import type { Metadata } from "next";
import Image from "@/components/ui/resilient-image";
import Link from "next/link";
import { ExternalLinkIcon } from "lucide-react";

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { SiteHeader } from "@/components/public/site-header";
import { SiteFooter } from "@/components/public/site-footer";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

type ThanksProfile = {
  username: string;
  role: string;
  profile: string;
  link: string;
};

const specialThanks: ThanksProfile[] = [

   {
    username: "Buzz",
    role: "Calculator & Guide Creator",
    profile: "buzz.png",
    link: "https://www.youtube.com/@Genshinmaichaigamemurtur",
   },
   {
    username: "Gunshin",
    role: "Developer",
    profile: "gunshin.gif",
    link: "https://gunshiz.top"
   },
   {
     username: "Keqing Kung",
     role: "Data Entry",
     profile: "keqing.png",
     link: "https://discord.com/users/860156010361520138",
   },
   {
    username: "Mple",
    role: "Data Entry",
    profile: "mple.png",
    link: "https://discord.com/users/527126736651943946",
   }
];

export const metadata: Metadata = {
  title: "ขอบคุณผู้สนับสนุน",
  description: "ขอบคุณทุกคนที่มีส่วนช่วยให้ Buzz Guide เกิดขึ้นได้",
};

function getInitials(username: string) {
  return username.trim().slice(0, 2).toUpperCase();
}

export default function ThanksPage() {
  return (
    <div className="flex min-h-svh flex-col bg-background">
      <SiteHeader />

      <main className="mx-auto flex w-full max-w-6xl flex-col gap-10 px-4 py-12 sm:px-6 sm:py-16">
        <header className="mx-auto flex max-w-2xl flex-col gap-3 text-center">
          <h1 className="font-heading text-4xl font-semibold tracking-tight sm:text-5xl">
            ขอบคุณผู้สนับสนุน
          </h1>
          <p className="text-lg leading-8 text-muted-foreground">
            ขอบคุณทุกคนที่มอบแรงสนับสนุนและเวลาให้เว็บไซต์นี้เกิดขึ้นได้
          </p>
        </header>

        <Card className="w-full gap-0 py-0 sm:flex-row sm:items-center">
          <CardHeader className="grid-cols-[auto_1fr] items-center gap-x-4 gap-y-1 py-4 text-left sm:flex-1">
            <Image
              src="/thanks/astral.png"
              alt="Astral Development
"
              width={128}
              height={128}
              className="row-span-2 size-16 object-contain"
            />
            <CardTitle className="text-xl sm:text-2xl">
              Astral Development
            </CardTitle>
            <CardDescription className="font-medium">
              ผู้สนับสนุนหลักด้าน Development
            </CardDescription>
          </CardHeader>
          <CardContent className="pb-4 sm:max-w-md sm:py-4">
            <p className="leading-6 text-muted-foreground">
              ขอบคุณที่สนับสนุนระบบ Hosting ที่สามารถให้เว็บออนไลน์และพร้อมใช้งาน
            </p>
          </CardContent>
          <CardFooter className="justify-center sm:self-stretch sm:border-t-0 sm:border-l">
            <Button
              nativeButton={false}
              render={
                <Link href="https://astrxl.dev" target="_blank" rel="noreferrer" />
              }
            >
              เยี่ยมชม Astral
              <ExternalLinkIcon data-icon="inline-end" />
            </Button>
          </CardFooter>
        </Card>

        {specialThanks.length > 0 ? (
          <section
            aria-label="รายชื่อผู้สนับสนุน"
            className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
          >
            {specialThanks.map((person) => (
              <Card key={person.username}>
                <CardHeader className="justify-items-center text-center">
                  <Avatar className="size-20">
                    <AvatarImage
                      src={`/thanks/${person.profile}`}
                      alt={`รูปโปรไฟล์ของ ${person.username}`}
                    />
                    <AvatarFallback>{getInitials(person.username)}</AvatarFallback>
                  </Avatar>
                  <CardTitle className="mt-2">{person.username}</CardTitle>
                  {person.role ? (
                    <CardDescription>{person.role}</CardDescription>
                  ) : null}
                </CardHeader>
                <CardContent>
                  <p className="text-center text-muted-foreground">
                    ขอบคุณที่เป็นส่วนสำคัญของเว็บไซด์นี้
                  </p>
                </CardContent>
                <CardFooter>
                  <Button
                    className="w-full"
                    variant="outline"
                    nativeButton={false}
                    render={
                      <a
                        href={person.link}
                        target="_blank"
                        rel="noreferrer"
                      />
                    }
                  >
                    ดูโปรไฟล์
                    <ExternalLinkIcon data-icon="inline-end" />
                  </Button>
                </CardFooter>
              </Card>
            ))}
          </section>
        ) : (
            <div>I am sigma number one</div>
        )}
      </main>
      <SiteFooter />
    </div>
  );
}