import type { ComponentType, SVGProps } from "react";
import { config, type IconName, type LinkConfig } from "@/lib/config";
import { Card, CardHeader } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import Link from "next/link";
import { Finger_Paint } from "next/font/google";
import { getFollowerCounts } from "@/lib/followers";
import { headers } from "next/headers";
import { Trophy, Users } from "lucide-react";
import { Kbd } from "@/components/ui/kbd";
import Background from "@/public/background/space.webp";
import { trackUniqueVisitor } from "@/lib/visitor/unique-visitors";
import {
  formatCount,
  getCountForLink,
  type FollowerCounts,
} from "@/lib/followers/utils";
import {
  DiscordIcon,
  DonateIcon,
  FormIcon,
  RobloxIcon,
  TiktokIcon,
  YoutubeIcon,
} from "@/lib/icons";
import { LinkCarousel } from "./client";

const fingerPaint = Finger_Paint({
  weight: "400",
  subsets: ["latin"],
});

const iconMap: Record<IconName, ComponentType<SVGProps<SVGSVGElement>>> = {
  roblox: RobloxIcon,
  discord: DiscordIcon,
  tiktok: TiktokIcon,
  youtube: YoutubeIcon,
  form: FormIcon,
  donate: DonateIcon,
  leaderboard: Trophy,
};

function LinkList({
  counts,
  label,
  links,
}: {
  counts: FollowerCounts;
  label: string;
  links: readonly LinkConfig[];
}) {
  return (
    <nav aria-label={label} className="flex flex-col gap-3">
      {links.map((item) => {
        const IconComponent = iconMap[item.icon];
        const count = getCountForLink(item.name, counts);
        const external = !item.link.startsWith("/");

        return (
          <Button
            key={item.link}
            variant="outline"
            className="group h-12 w-full justify-start p-4"
            asChild
          >
            <Link
              href={item.link}
              target={external ? "_blank" : undefined}
              rel={external ? "noopener noreferrer" : undefined}
            >
              <span className="flex w-full items-center justify-between gap-3">
                <span className="flex min-w-0 items-center gap-3">
                  <span className="flex size-4 shrink-0">
                    <IconComponent className="size-5 text-muted-foreground" />
                  </span>
                  <span className="flex min-w-0 flex-col items-start text-left">
                    <span className="truncate font-medium text-foreground">
                      {item.name}
                    </span>
                    {item.desc && (
                      <span className="truncate text-xs text-muted-foreground">
                        {item.desc}
                      </span>
                    )}
                  </span>
                </span>
                {item.icon === "donate" ? (
                  <span className="shrink-0 text-xs font-medium text-muted-foreground">
                    ขึ้นจอ 10 บาท+
                  </span>
                ) : count !== null ? (
                  <span className="shrink-0 text-xs font-medium">
                    {formatCount(count.count)}{" "}
                    <span className="text-muted-foreground">{count.label}</span>
                  </span>
                ) : null}
              </span>
            </Link>
          </Button>
        );
      })}
    </nav>
  );
}

export default async function Home() {
  const visitorCountPromise = headers()
    .then(trackUniqueVisitor)
    .catch((error) => {
      console.error("Failed to track visitor:", error);
      return 0;
    });
  const [{ counts }, visitorCount] = await Promise.all([
    getFollowerCounts(),
    visitorCountPromise,
  ]);

  // Use configured profile data.
  const profileName = config.profile.name;
  const profileAvatar = config.profile.avatar;
  const links1 = config.links;

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "ProfilePage",
    name: profileName,
    description: config.profile.desc,
    url: config.site.url,
    mainEntity: {
      "@type": "Person",
      name: profileName,
      image: profileAvatar.startsWith("/") ? `${config.site.url}${profileAvatar}` : profileAvatar,
      sameAs: links1.map((l) => l.link),
    },
  };


  return (
    <main className="relative flex min-h-screen flex-col items-center justify-center bg-background p-4 text-foreground">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <Image
        src={Background}
        alt="Background"
        fill
        priority
        className="fixed top-0 left-0 z-0 h-fit min-h-dvh w-full object-cover opacity-40"
      />
      <Card className="relative z-10 w-full max-w-sm bg-card/90 backdrop-blur md:max-w-lg" role="article">
        <CardHeader className="flex flex-col items-center gap-4 text-center">
          <div className="relative w-24 h-24 overflow-hidden rounded-full">
            <Image 
              src={profileAvatar} 
              alt={`${profileName} avatar`}
              fill
              sizes="96px"
              priority
              className="object-cover"
            />
          </div>
          <div>
            <h1 className={`${fingerPaint.className} text-2xl`}>
              {profileName}
            </h1>
            {visitorCount > 0 && (
              <div className="mt-3 flex justify-center">
                <Kbd>
                  <Users className="size-3.5" />
                  <span>{visitorCount} Unique Visitors</span>
                </Kbd>
              </div>
            )}
          </div>
        </CardHeader>

        <LinkCarousel
          primary={<LinkList counts={counts} label="ลิงก์หลัก" links={links1} />}
          secondary={
            <LinkList
              counts={counts}
              label="ลิงก์เพิ่มเติม"
              links={config.secondaryLinks}
            />
          }
        />
      </Card>
    </main>
  );
}