import Image from "next/image";
import Link from "next/link";
import { ChevronLeftIcon, DownloadIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Kbd } from "@/components/ui/kbd";
import { Separator } from "@/components/ui/separator";
import { SiteHeader } from "@/components/public/site-header";
import { ElementIcon } from "@/components/public/element-icon";
import { LiveRefresh } from "@/components/live-refresh";
import { rarityGradientClass, rarityTextClass } from "@/lib/catalog/rarity";
import type { PublicGuide } from "@/lib/guides/queries";
import { normalizeTalentPriorities, talentRelationSymbol } from "@/lib/guides/talents";
import { cn } from "@/lib/utils";

function hasSection(guide: PublicGuide, slug: string): boolean {
  if (slug === "weapon") return guide.weapons.length > 0;
  if (slug === "artifact")
    return (
      guide.artifactGroups.some((group) => group.rows.length > 0) ||
      Boolean(
        guide.artifactProfile &&
        (guide.artifactProfile.sands.length ||
          guide.artifactProfile.goblet.length ||
          guide.artifactProfile.circlet.length),
      )
    );
  if (slug === "constellations") return guide.constellations.length > 0;
  if (slug === "team") return guide.teams.length > 0;
  return guide.extras.some(
    (extra) => extra.slug === slug && extra.rows.length > 0,
  );
}

export function publicSections(guide: PublicGuide) {
  return guide.sections.filter((section) => hasSection(guide, section.slug));
}

export function StructuredGuideShell({
  guide,
  section,
}: {
  guide: PublicGuide;
  section?: string;
}) {
  const sections = publicSections(guide);
  return (
    <div className="min-h-svh bg-background">
      <LiveRefresh endpoint={`/api/events/page/${guide.id}`} />
      <SiteHeader />
      <div className="sticky top-0 z-10 border-b bg-background/95 supports-backdrop-filter:backdrop-blur">
        <div className="mx-auto flex min-h-16 w-full max-w-7xl items-center gap-3 px-4 sm:px-6">
          <Link
            href="/"
            aria-label="กลับหน้ารวม"
            className="grid size-10 place-items-center rounded-lg hover:bg-muted"
          >
            <ChevronLeftIcon />
          </Link>
          <div className={cn("relative size-11 overflow-hidden rounded-lg border", rarityGradientClass(guide.character.rarity))}>
            <Image
              src={guide.character.imageUrl}
              alt={guide.name}
              fill
              className="object-contain"
            />
          </div>
          <div className="flex min-w-0 flex-1 flex-col items-start gap-1">
            <p className="truncate font-heading font-semibold">{guide.name}</p>
            {guide.character.element ? (
              <Badge>
                {guide.character.elementIconUrl ? (
                  <ElementIcon element={guide.character.element} url={guide.character.elementIconUrl} />
                ) : null}
                {guide.character.element}
              </Badge>
            ) : null}
          </div>
        </div>
        <nav className="mx-auto flex min-h-11 w-full max-w-7xl gap-1 overflow-x-auto px-4 sm:px-6">
          <Link
            href={`/${guide.slug}`}
            className={cn(
              "flex shrink-0 items-center whitespace-nowrap rounded-md px-3 text-sm text-muted-foreground",
              !section && "bg-muted text-foreground",
            )}
          >
            Overview
          </Link>
          {sections.map((item) => (
            <Link
              key={item.id}
              href={`/${guide.slug}/${item.slug}`}
              className={cn(
                "flex shrink-0 items-center whitespace-nowrap rounded-md px-3 text-sm text-muted-foreground",
                section === item.slug && "bg-muted text-foreground",
              )}
            >
              {item.title}
            </Link>
          ))}
        </nav>
      </div>
      <main className="mx-auto w-full max-w-7xl p-4 sm:p-6 lg:p-10">
        {section ? (
          <GuideSection guide={guide} section={section} />
        ) : (
          <GuideOverview guide={guide} sections={sections} />
        )}
      </main>
    </div>
  );
}

function GuideOverview({
  guide,
  sections,
}: {
  guide: PublicGuide;
  sections: ReturnType<typeof publicSections>;
}) {
  return (
    <div className="flex flex-col gap-8">
      <div className="relative mx-auto aspect-square w-full max-w-3xl overflow-hidden rounded-xl border bg-muted">
        <Image
          src={guide.coverUrl}
          alt={`Guide ${guide.name}`}
          fill
          priority
          className="object-cover"
        />
      </div>
      <div className="mx-auto flex max-w-3xl flex-col gap-3 text-center">
        <p className="text-sm font-medium text-primary">Build Overview</p>
        <h1 className="font-heading text-4xl font-semibold">{guide.name}</h1>
        <p className="text-lg leading-8 text-muted-foreground">
          {guide.overview}
        </p>
      </div>
      {sections.length ? (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {sections.map((item) => (
            <Link key={item.id} href={`/${guide.slug}/${item.slug}`}>
              <Card className="h-full">
                <CardHeader>
                  <CardTitle>{item.title}</CardTitle>
                  <CardDescription>เปิดดูคำแนะนำฉบับเต็ม</CardDescription>
                </CardHeader>
              </Card>
            </Link>
          ))}
        </div>
      ) : (
        <Card>
          <CardHeader>
            <CardTitle>กำลังจัดทำเนื้อหา</CardTitle>
            <CardDescription>
              กลับมาตรวจสอบอีกครั้งหลังผู้ดูแลเพิ่มข้อมูล
            </CardDescription>
          </CardHeader>
        </Card>
      )}
    </div>
  );
}

function GuideSection({
  guide,
  section,
}: {
  guide: PublicGuide;
  section: string;
}) {
  if (section === "weapon") return <WeaponSection guide={guide} />;
  if (section === "artifact") return <ArtifactSection guide={guide} />;
  if (section === "constellations")
    return <ConstellationSection guide={guide} />;
  if (section === "team") return <TeamSection guide={guide} />;
  const extra = guide.extras.find((item) => item.slug === section);
  return extra ? <ExtraSection extra={extra} /> : null;
}

function metric(value: string | null) {
  return value === null
    ? null
    : `${Number(value).toLocaleString(undefined, { maximumFractionDigits: 2 })}%`;
}

function WeaponSection({ guide }: { guide: PublicGuide }) {
  return (
    <section className="flex flex-col gap-6">
      <header className="flex flex-col items-center gap-3 text-center">
        <p className="text-sm font-medium text-primary">อาวุธที่แนะนำ</p>
        <h1 className="whitespace-nowrap font-heading text-4xl font-semibold">Weapons</h1>
        <a
          href={`/api/guides/${guide.id}/weapons/image`}
          download
          className={buttonVariants({ variant: "outline", size: "sm" })}
        >
          <DownloadIcon data-icon="inline-start" />
          Export image
        </a>
      </header>
      <div className="grid gap-3">
        {guide.weapons.map((row, index) => (
          <Card key={row.id} size="sm" className="bg-white py-0">
            <CardContent className="grid p-0 md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)]">
              <div
                className={cn(
                  "flex min-h-28 min-w-0 items-center gap-4 rounded-br-[4rem] p-4 pr-10 text-white md:rounded-br-[8rem] md:pr-16",
                  rarityGradientClass(row.weapon.rarity),
                )}
              >
                <div className="relative size-20 shrink-0">
                  <Image
                    src={row.weapon.imageUrl}
                    alt={row.weapon.name}
                    fill
                    className="object-contain"
                  />
                </div>
                <p className="truncate text-base font-semibold sm:text-lg">
                  {index + 1}. {row.weapon.name} R{row.refinement}
                </p>
              </div>
              <div className="flex items-center justify-around gap-4 bg-white px-4 py-5 text-black">
                {row.overallPercent ? (
                  <div className="flex-1 text-center">
                    <p
                      className={cn(
                        "whitespace-nowrap text-4xl leading-none font-bold sm:text-5xl",
                        rarityTextClass(row.weapon.rarity),
                      )}
                    >
                      {metric(row.overallPercent)}
                    </p>
                    <p className="mt-1 text-sm sm:text-base">ดาเมททั้งทีม</p>
                  </div>
                ) : null}
                {row.personalPercent ? (
                  <div className="flex-1 text-center">
                    <p
                      className={cn(
                        "whitespace-nowrap text-4xl leading-none font-bold sm:text-5xl",
                        rarityTextClass(row.weapon.rarity),
                      )}
                    >
                      {metric(row.personalPercent)}
                    </p>
                    <p className="mt-1 text-sm sm:text-base">ดาเมจส่วนตัว</p>
                  </div>
                ) : null}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </section>
  );
}

function ArtifactSection({ guide }: { guide: PublicGuide }) {
  const profile = guide.artifactProfile;
  return (
    <section className="flex flex-col gap-6">
      <header className="flex flex-col items-center gap-3 text-center">
        <p className="text-sm font-medium text-primary">
          อาร์ติแฟกต์และสเตตัสที่แนะนำ
        </p>
        <h1 className="font-heading text-4xl font-semibold">
          Artifacts & Stats
        </h1>
        <a
          href={`/api/guides/${guide.id}/artifacts/image`}
          download
          className={buttonVariants({ variant: "outline", size: "sm" })}
        >
          <DownloadIcon data-icon="inline-start" />
          Export image
        </a>
      </header>
      <div className="grid gap-5 lg:grid-cols-[1.2fr_1fr]">
        {" "}
        <div className="flex flex-col gap-5">
          {guide.artifactGroups.map((group) => (
            <Card key={group.id}>
              <CardHeader>
                <CardTitle>{group.name}</CardTitle>
              </CardHeader>
              <CardContent className="flex flex-col gap-3">
                {group.rows.map((row, index) => (
                  <div key={row.id} className="flex items-center gap-3">
                    <div className="flex -space-x-3">
                      <div
                        className={cn(
                          "relative size-14 overflow-hidden rounded-lg border",
                          rarityGradientClass(row.first.rarity),
                        )}
                      >
                        <Image
                          src={row.first.imageUrl}
                          alt={row.first.name}
                          fill
                          className="object-contain"
                        />
                      </div>
                      {row.second ? (
                        <div
                          className={cn(
                            "relative size-14 overflow-hidden rounded-lg border",
                            rarityGradientClass(row.second.rarity),
                          )}
                        >
                          <Image
                            src={row.second.imageUrl}
                            alt={row.second.name}
                            fill
                            className="object-contain"
                          />
                        </div>
                      ) : null}
                    </div>
                    <div className="min-w-0 flex-1">
                      <p className="font-medium">
                        {index + 1}. {row.first.name}
                        {row.second ? ` + ${row.second.name}` : ""}
                      </p>
                    </div>
                    <p className="text-2xl font-semibold">
                      {metric(row.percent)}
                    </p>
                  </div>
                ))}
              </CardContent>
            </Card>
          ))}
        </div>
        {profile ? (
          <div className="flex flex-col gap-5">
            <Card className="overflow-hidden pt-0">
              <CardHeader className="bg-primary py-4 text-center text-primary-foreground">
                <CardTitle className="text-2xl">Artifact Stats</CardTitle>
              </CardHeader>
              <CardContent className="grid grid-cols-3 p-0">
                <ArtifactStat iconSrc="/icon/Icon_Sands_of_Eon.webp" label="Sands" values={profile.sands} />
                <ArtifactStat iconSrc="/icon/Icon_Goblet_of_Eonothem.webp" label="Goblet" values={profile.goblet} />
                <ArtifactStat iconSrc="/icon/Icon_Circlet_of_Logos.webp" label="Circlet" values={profile.circlet} />
              </CardContent>
            </Card>
            {profile.substats.length ? (
              <Card>
                <CardContent className="py-6 text-center text-lg">
                  <strong>Stat Priority:</strong> {profile.substats.map(statLabel).join(" > ")}
                </CardContent>
              </Card>
            ) : null}
            <Card>
              <CardHeader><CardTitle>รายละเอียดเพิ่มเติม</CardTitle></CardHeader>
              <CardContent className="flex flex-col gap-5">
              {profile.targets.length ? (
                <div>
                  <p className="mb-2 text-sm font-medium">Target Stats</p>
                  {profile.targets.map((target) => (
                    <div
                      key={`${target.stat}-${target.value}`}
                      className="flex justify-between py-1 text-sm"
                    >
                      <span>{target.stat}</span>
                      <strong>{target.value}</strong>
                    </div>
                  ))}
                </div>
              ) : null}
              {profile.talents.length ? (
                <div>
                  <p className="mb-2 text-sm font-medium">ลำดับการอัพพรสวรรค์</p>
                  <div className="flex items-start justify-center gap-1 sm:gap-3">
                    {normalizeTalentPriorities(profile.talents)
                      .map((talent, index, talents) => {
                        const catalogTalent = guide.character.talents.find((item) => item.type === talent.type);
                        const talentName = catalogTalent?.name ?? talent.type;
                        return (
                          <div key={talent.type} className="flex min-w-0 items-start gap-1 sm:gap-3">
                            <div className="flex w-16 flex-col items-center gap-2 text-center sm:w-28">
                              <div className="relative size-14 overflow-hidden rounded-xl border bg-muted sm:size-20">
                                {catalogTalent?.iconUrl ? <Image src={catalogTalent.iconUrl} alt={talentName} fill className="object-contain" /> : <span className="grid size-full place-items-center font-semibold">{talent.type}</span>}
                              </div>
                              <Badge variant="secondary">{talent.level ? `Lv.${talent.level}+` : "—"}</Badge>
                              <p className="text-xs font-medium sm:text-sm">{talentName}</p>
                            </div>
                            {index < talents.length - 1 ? (
                              <span className="mt-4 text-xl font-semibold sm:mt-6 sm:text-3xl" aria-label={talent.relationToNext === "gte" ? "มากกว่าหรือเท่ากับ" : "มากกว่า"}>
                                {talentRelationSymbol(talent.relationToNext)}
                              </span>
                            ) : null}
                          </div>
                        );
                      })}
                  </div>
                </div>
              ) : null}
              {profile.note ? (
                <div className="pt-3">
                  <p className="mb-2 text-sm font-medium">โน็ต</p>
                  <p className="text-sm leading-6 text-muted-foreground">
                    {profile.note}
                  </p>
                </div>
              ) : null}
              </CardContent>
            </Card>
          </div>
        ) : null}
      </div>
    </section>
  );
}

function statLabel(value: string): string {
  return value === "EM" ? "Elemental Mastery" : value === "ER" ? "Energy Recharge" : value;
}

function ArtifactStat({ iconSrc, label, values }: { iconSrc: string; label: string; values: string[] }) {
  return (
    <div className="flex min-w-0 flex-col items-center gap-3 border-r p-3 text-center last:border-r-0 sm:p-5">
      <Image src={iconSrc} alt="" width={48} height={48} className="size-12 object-contain" />
      <p className="font-semibold">{label}</p>
      <Separator />
      <p className="text-sm leading-6 sm:text-base">{values.length ? values.map(statLabel).join(" > ") : "—"}</p>
    </div>
  );
}

function ConstellationSection({ guide }: { guide: PublicGuide }) {
  return (
    <section className="flex flex-col gap-6">
      <header className="text-center">
        <p className="text-sm font-medium text-primary">กลุ่มดาว</p>
        <h1 className="font-heading text-4xl font-semibold">Constellations</h1>
      </header>
      <div className="grid gap-4 md:grid-cols-2">
        {guide.constellations.map((row) => (
          <Card key={row.level}>
            <CardHeader>
              <CardTitle className={cn("text-3xl text-white", row.isGreat && "text-warning")}>
                {metric(row.cumulativePercent)}
              </CardTitle>
              <CardDescription className="text-base font-medium text-white">
                C{row.level} · {row.name}
              </CardDescription>
              {row.iconUrl ? (
                <CardAction>
                  <Image
                    src={row.iconUrl}
                    alt=""
                    width={48}
                    height={48}
                    className="rounded-lg bg-muted"
                  />
                </CardAction>
              ) : null}
            </CardHeader>
            <CardContent>
              <p className="whitespace-pre-line leading-7">{row.detail}</p>
            </CardContent>
          </Card>
        ))}
      </div>
    </section>
  );
}

function TeamSection({ guide }: { guide: PublicGuide }) {
  return (
    <section className="flex flex-col gap-6">
      <header className="text-center">
        <p className="text-sm font-medium text-primary">คำนวณความเสียหาย</p>
        <h1 className="font-heading text-4xl font-semibold">Team Calc</h1>
      </header>
      <div className="grid gap-5 xl:grid-cols-2">
        {guide.teams.map((team) => {
          const total = team.members.reduce(
            (sum, member) => sum + Number(member.damage),
            0,
          );
          const seconds = Number(team.rotationSeconds);
          return (
            <Card key={team.id}>
              <CardHeader>
                <CardTitle>{team.title}</CardTitle>
                <CardDescription>{seconds}s rotation</CardDescription>
                <CardAction>
                  <a
                    href={`/api/teams/${team.id}/image`}
                    download
                    className={buttonVariants({
                      variant: "outline",
                      size: "sm",
                    })}
                  >
                    <DownloadIcon data-icon="inline-start" />
                    Export image
                  </a>
                </CardAction>
              </CardHeader>
              <CardContent className="flex flex-col gap-4">
                <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
                  {team.members.map((member) => (
                    <div key={member.position} className="min-w-0 text-center">
                      <div className="grid grid-cols-[minmax(0,1fr)_2.75rem] gap-2">
                        <div className="relative aspect-square overflow-hidden rounded-lg bg-muted">
                          <Image
                            src={member.character.imageUrl}
                            alt={member.character.name}
                            fill
                            className="object-cover"
                          />
                        </div>
                        <div className="flex flex-col gap-2">
                          {member.weapon ? (
                            <div
                              className={cn(
                                "relative aspect-square overflow-hidden rounded-md bg-muted",
                                rarityGradientClass(member.weapon.rarity),
                              )}
                            >
                              <Image
                                src={member.weapon.imageUrl}
                                alt={member.weapon.name}
                                fill
                                className="object-contain"
                              />
                              <Kbd className="absolute top-0 right-0">
                                R{member.refinement}
                              </Kbd>
                            </div>
                          ) : (
                            <div className="aspect-square rounded-md border bg-muted" />
                          )}
                          {member.artifact ? (
                            <div
                              className={cn(
                                "relative aspect-square overflow-hidden rounded-md bg-muted",
                                rarityGradientClass(member.artifact.rarity),
                              )}
                            >
                              <Image
                                src={member.artifact.imageUrl}
                                alt={member.artifact.name}
                                fill
                                className="object-contain"
                              />
                            </div>
                          ) : (
                            <div className="aspect-square rounded-md border bg-muted" />
                          )}
                        </div>
                      </div>
                      <p className="mt-2 truncate text-sm font-medium">
                        C{member.constellation} {member.character.name}
                      </p>
                      <p className="text-sm font-semibold">
                        {Number(member.damage).toLocaleString(undefined, {
                          maximumFractionDigits: 2,
                        })}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        {total
                          ? ((Number(member.damage) / total) * 100).toFixed(2)
                          : "0.00"}
                        %
                      </p>
                    </div>
                  ))}
                </div>
                <Separator />
                <div className="flex items-end justify-between">
                  <div>
                    <p className="text-sm text-muted-foreground">
                      Total damage
                    </p>
                    <p className="font-semibold">{total.toLocaleString()}</p>
                  </div>
                  <div className="text-right">
                    <p className="text-sm text-muted-foreground">Total DPS</p>
                    <p className="text-3xl font-semibold text-primary">
                      {seconds > 0
                        ? (total / seconds).toLocaleString(undefined, {
                            maximumFractionDigits: 0,
                          })
                        : "0"}
                    </p>
                  </div>
                </div>
                <p className="rounded-lg bg-muted p-3 text-sm leading-6">
                  {team.combo}
                </p>
              </CardContent>
            </Card>
          );
        })}
      </div>
    </section>
  );
}

function ExtraSection({ extra }: { extra: PublicGuide["extras"][number] }) {
  return (
    <section className="flex flex-col gap-6">
      <header className="text-center">
        <p className="text-sm font-medium text-primary">Extra Guide</p>
        <h1 className="font-heading text-4xl font-semibold">{extra.title}</h1>
      </header>
      <div className="grid gap-5 md:grid-cols-2">
        {extra.rows.map((row) => (
          <Card key={row.id} className="overflow-hidden py-0">
            {row.imageUrl ? (
              <div className="relative aspect-video bg-muted">
                <Image
                  src={row.imageUrl}
                  alt={row.heading}
                  fill
                  className="object-cover"
                />
              </div>
            ) : null}
            <CardHeader className="pt-5">
              <CardTitle>{row.heading}</CardTitle>
              <CardDescription>{row.body}</CardDescription>
              {row.percent ? <Badge>{metric(row.percent)}</Badge> : null}
            </CardHeader>
          </Card>
        ))}
      </div>
    </section>
  );
}