import { Text, Localized } from "@/components/i18n/text";
import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { ExternalLinkIcon } from "lucide-react";

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
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: "Special Thanks",
  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">
      <header className="border-b">
        <div className="mx-auto flex min-h-16 w-full max-w-6xl items-center px-4 sm:px-6">
          <Link
            href="/"
            className="flex min-h-11 items-center gap-3 rounded-lg font-heading font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          >
            <Image
              src="/icon.png"
              alt=""
              width={36}
              height={36}
              className="size-9 object-contain"
            />
            <span><Text message="ไกด์เกนชินไม่ใช่เกมมือถือ" /></span>
          </Link>
        </div>
      </header>

      <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">
            <Text message="Special Thanks" /></h1>
          <p className="text-lg leading-8 text-muted-foreground">
            <Text message="ขอบคุณทุกคนที่มอบแรงสนับสนุนและเวลาให้เว็บไซต์นี้เกิดขึ้นได้" /></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">
              <Text message="Astral Development" /></CardTitle>
            <CardDescription className="font-medium">
              <Text message="ผู้สนับสนุนหลักด้าน Development" /></CardDescription>
          </CardHeader>
          <CardContent className="pb-4 sm:max-w-md sm:py-4">
            <p className="leading-6 text-muted-foreground">
              <Text message="ขอบคุณที่สนับสนุนระบบ 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" />
              }
            >
              <Text message="เยี่ยมชม Astral" /><ExternalLinkIcon data-icon="inline-end" />
            </Button>
          </CardFooter>
        </Card>

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