"use client";

import { useState } from "react";
import type { ComponentType, SVGProps } from "react";
import { Button } from "@/components/ui/button";
import { CardContent } from "@/components/ui/card";
import Link from "next/link";
import { ArrowLeft, ArrowRight, Trophy } from "lucide-react";
import { LinkConfig, type IconName } from "@/lib/config";
import { getCountForLink, formatCount, FollowerCounts } from "@/lib/followers/utils";
import { RobloxIcon, DiscordIcon, TiktokIcon, YoutubeIcon, FormIcon, DonateIcon } from "@/lib/icons";

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

export function LinkCard({ counts, links1, links2 }: { counts: FollowerCounts, links1: LinkConfig[], links2: LinkConfig[] }) {
  const [isPage2, setIsPage2] = useState(false);
  const currentLinks = isPage2 ? links2 : links1;

  return (
    <CardContent>
      <div key={isPage2 ? "p2" : "p1"} className="animate-in fade-in slide-in-from-bottom-2 duration-150">
        <nav aria-label="ลิ้งค์โซเชียลมีเดีย" className="flex flex-col gap-3">
          {currentLinks.map((item, index) => {
            const IconComponent = iconMap[item.icon];
            const isDonate = item.icon === "donate";

            const count = getCountForLink(item.name, counts);

            return (
              <Button
                key={index}
                variant="outline"
                className="w-full h-12 p-4 group md:bg-muted bg-black/60 "
                asChild
              >
                <Link href={item.link} target={item.link.startsWith("/") ? undefined : "_blank"} rel={item.link.startsWith("/") ? undefined : "noopener noreferrer"} >
                  <div className="flex items-center justify-between w-full">
                    <div className="flex items-center gap-3">
                      <div className="shrink-0 w-8 h-8 flex items-center justify-center">
                        <IconComponent className="w-6 h-6 text-zinc-300" />
                      </div>
                      <div className="flex flex-col items-start text-left">
                        <span className="font-medium text-zinc-100">{item.name}</span>
                        {item.desc && <span className="text-xs text-zinc-400">{item.desc}</span>}
                      </div>
                    </div>
                    {isDonate ? (
                      <span className="text-xs font-medium shrink-0 text-zinc-400">ขี้นจอ 10 บาท+</span>
                    ) : count !== null && (
                      <span className="text-xs font-medium shrink-0">
                        {formatCount(count.count)} 
                        <span className="text-zinc-400"> {count.label}</span>
                      </span>
                    )}
                  </div>
                </Link>
              </Button>
            );
          })}
        </nav>
      </div>
      <div className="flex justify-between items-center pt-4">
        <Button 
          variant="ghost" 
          onClick={() => setIsPage2(false)}
          disabled={!isPage2}
          aria-label="หน้าก่อนหน้า"
        >
          <ArrowLeft />
        </Button>
        <Button 
          variant="ghost" 
          onClick={() => setIsPage2(true)}
          disabled={isPage2}
          aria-label="หน้าถัดไป"
        >
          <ArrowRight />
        </Button>
      </div>
    </CardContent>
  );
}