import Image from "next/image";
import { CheckIcon, XIcon } from "lucide-react";

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { LunarisText } from "@/components/public/lunaris-text";
import { parseLunarisText } from "@/lib/catalog/lunaris";
import { elementIconFilter } from "@/lib/catalog/element";
import { rarityGradientClass } from "@/lib/catalog/rarity";
import type { getActiveCatalog } from "@/lib/guides/queries";
import type { getStygianSchedule } from "@/lib/stygian/repository";
import { cn } from "@/lib/utils";

type Schedule = NonNullable<Awaited<ReturnType<typeof getStygianSchedule>>>;
type Catalog = NonNullable<Awaited<ReturnType<typeof getActiveCatalog>>>;
type Item = Schedule["recommendations"][number]["items"][number];

function RecommendedMechanic({ mechanic, type }: { mechanic: string; type: string }) {
  const parts = mechanic.split(/(\{SPRITE_PRESET#\d+\})/gu);
  return (
    <span className="inline-flex flex-wrap items-center gap-1">
      {parts.map((part, index) => {
        const preset = /^\{SPRITE_PRESET#(\d+)\}$/u.exec(part)?.[1];
        if (preset) return <Image key={`${part}-${index}`} src={`https://api.lunaris.moe/data/assets/icons/${preset}.png`} alt="" width={20} height={20} className="size-5 shrink-0 object-contain" />;
        return part ? <LunarisText key={`${part}-${index}`} nodes={parseLunarisText(part)} fallback={part} /> : null;
      })}
      {type === "Disadvantage"
        ? <XIcon className="size-4 text-red-500" aria-hidden="true" />
        : type === "Advantage"
          ? <CheckIcon className="size-4 text-emerald-500" aria-hidden="true" />
          : null}
    </span>
  );
}

function recommendation(item: Item, catalog: Catalog) {
  if (item.kind === "element" && item.element) {
    const source = catalog.characters.find((character) => character.element === item.element && character.elementIconUrl);
    return { name: item.element, imageUrl: source?.elementIconUrl ?? null, badge: "Element", rarity: null };
  }
  if (item.kind === "character") {
    const character = catalog.characters.find((candidate) => candidate.key === item.catalogKey);
    const weapon = catalog.weapons.find((candidate) => candidate.key === item.weaponKey);
    const artifact = catalog.artifacts.find((candidate) => candidate.key === item.artifactKey);
    return {
      name: character?.name ?? item.catalogKey ?? "Unknown",
      imageUrl: character?.imageUrl ?? null,
      badge: item.constellationLevel === null ? "Character" : `C${item.constellationLevel}`,
      rarity: character?.rarity ?? null,
      weapon,
      artifact,
      refinement: item.refinement,
    };
  }
  const collection = item.kind === "weapon" ? catalog.weapons : catalog.artifacts;
  const value = collection.find((candidate) => candidate.key === item.catalogKey);
  return { name: value?.name ?? item.catalogKey ?? "Unknown", imageUrl: value?.imageUrl ?? null, badge: item.kind, rarity: value?.rarity ?? null };
}

function RecommendationIcon({ item, catalog, teamLayout = false }: { item: Item; catalog: Catalog; teamLayout?: boolean }) {
  const value = recommendation(item, catalog);
  if (item.kind === "character") {
    const hasEquipment = Boolean(value.weapon || value.artifact);
    return (
      <div className={cn("flex min-w-0 flex-col gap-1 rounded-lg border bg-card p-1", teamLayout && "sm:p-2", teamLayout && !hasEquipment && item.constellationLevel === null && "aspect-square justify-center")}>
        <div className={teamLayout && hasEquipment ? "flex flex-col gap-1 sm:grid sm:grid-cols-3 sm:gap-2" : "flex flex-col gap-1"}>
          <div className={cn("relative aspect-square overflow-hidden rounded-lg", teamLayout && hasEquipment && "sm:col-span-2 sm:row-span-2", rarityGradientClass(value.rarity))}>
            {value.imageUrl ? <Image src={value.imageUrl} alt={value.name} fill sizes={teamLayout ? "(min-width: 640px) 128px, 25vw" : "128px"} className="object-contain" /> : null}
          </div>
          {hasEquipment ? <div className={teamLayout ? "grid grid-cols-2 gap-1 sm:row-span-2 sm:grid-cols-1 sm:gap-2" : "grid grid-cols-2 gap-1"}>
            {value.weapon ? <div className={cn("relative aspect-square overflow-hidden rounded-md border", rarityGradientClass(value.weapon.rarity))}><Image src={value.weapon.imageUrl} alt={value.weapon.name} fill sizes="64px" className="object-contain p-1" /></div> : null}
            {value.artifact ? <div className={cn("relative aspect-square overflow-hidden rounded-md border", rarityGradientClass(value.artifact.rarity))}><Image src={value.artifact.imageUrl} alt={value.artifact.name} fill sizes="64px" className="object-contain p-1" /></div> : null}
          </div> : null}
        </div>
        {teamLayout ? item.constellationLevel !== null || value.weapon && value.refinement ? <div className="flex justify-center gap-1">
          {item.constellationLevel !== null ? <Badge variant="secondary">C{item.constellationLevel}</Badge> : null}
          {value.weapon && value.refinement ? <Badge variant="secondary">R{value.refinement}</Badge> : null}
        </div> : null : <span className="truncate text-center text-xs font-medium" title={value.name}>{value.name}</span>}
      </div>
    );
  }
  return (
    <div className="flex min-w-0 flex-col items-center gap-1 text-center">
      <div className={cn("relative aspect-square w-full overflow-hidden rounded-lg border", item.kind !== "element" && rarityGradientClass(value.rarity))}>
        {value.imageUrl ? <Image src={value.imageUrl} alt={value.name} fill sizes="80px" className="object-contain" style={item.kind === "element" && item.element ? { filter: elementIconFilter(item.element) } : undefined} /> : null}
      </div>
      <span className="max-w-20 truncate text-xs font-medium" title={value.name}>{value.name}</span>
    </div>
  );
}

function BossCard({ schedule, level, position, catalog }: { schedule: Schedule; level: 105 | 110; position: number; catalog: Catalog }) {
  const boss = schedule.bosses.find((candidate) => candidate.level === level && candidate.position === position);
  if (!boss) return null;
  const groups = schedule.recommendations.filter((group) => group.level === level && group.bossPosition === position);
  const teams = groups.filter((group) => group.kind === "team");
  const units = groups.filter((group) => group.kind === "unit").flatMap((group) => group.items);
  return (
    <Card>
      <CardContent className="flex flex-col gap-6">
        <header className="text-center">
          <h2 className="font-heading text-lg font-semibold">{boss.name}</h2>
          <p className="mt-1 text-sm text-muted-foreground">Level {level} · HP {Math.round(boss.hp).toLocaleString("en-US")}</p>
        </header>
        <div className="flex min-w-0 flex-col gap-5">
        <Accordion>
          <AccordionItem value="overview">
            <AccordionTrigger>Boss overview</AccordionTrigger>
            <AccordionContent className="whitespace-pre-line text-muted-foreground">
              <LunarisText nodes={parseLunarisText(boss.description)} fallback={boss.description} />
            </AccordionContent>
          </AccordionItem>
          {boss.mechanics.map((mechanic, index) => (
            <AccordionItem key={`${mechanic.name}-${index}`} value={`mechanic-${index}`}>
              <AccordionTrigger>{mechanic.name}</AccordionTrigger>
              <AccordionContent className="text-muted-foreground">
                <LunarisText nodes={parseLunarisText(mechanic.description)} fallback={mechanic.description} />
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
        <section className="flex flex-col gap-3" aria-label={`Recommended teams for ${boss.name}`}>
          <h3 className="font-heading text-lg font-semibold">Recommended team</h3>
          {teams.length ? teams.map((team) => (
            <div key={team.id} className="grid w-full grid-cols-4 items-start gap-1 rounded-lg border bg-muted/20 p-2 sm:w-fit sm:grid-cols-[repeat(4,minmax(0,7.5rem))] sm:gap-3">
              {team.items.slice(0, 4).map((item) => <RecommendationIcon key={`${item.groupId}-${item.position}`} item={item} catalog={catalog} teamLayout />)}
              {Array.from({ length: Math.max(0, 4 - team.items.length) }, (_, index) => <div key={`empty-${index}`} className="aspect-square rounded-lg border border-dashed bg-muted/30" aria-hidden="true" />)}
            </div>
          )) : <p className="text-sm text-muted-foreground">No team recommendations yet.</p>}
        </section>
        <section className="flex flex-col gap-3" aria-label={`Recommended units for ${boss.name}`}>
          <h3 className="font-heading text-lg font-semibold">Recommended unit</h3>
          {units.length ? <div className="grid grid-cols-[repeat(auto-fill,minmax(4rem,5rem))] gap-2">{units.map((item) => <RecommendationIcon key={`${item.groupId}-${item.position}`} item={item} catalog={catalog} />)}</div> : <p className="text-sm text-muted-foreground">No unit recommendations yet.</p>}
        </section>
        </div>
      </CardContent>
    </Card>
  );
}

export function StygianGuide({ schedule, catalog }: { schedule: Schedule; catalog: Catalog }) {
  return (
    <Tabs defaultValue="110">
      <TabsList aria-label="Stygian difficulty">
        <TabsTrigger value="105">Level 105</TabsTrigger>
        <TabsTrigger value="110">Level 110</TabsTrigger>
      </TabsList>
      {([105, 110] as const).map((level) => (
        <TabsContent key={level} value={String(level)}>
          <Tabs defaultValue="0">
            <TabsList variant="line" className="grid w-full grid-cols-3 overflow-hidden group-data-horizontal/tabs:h-auto group-data-horizontal/tabs:min-h-96" aria-label={`Level ${level} bosses`}>
              {[0, 1, 2].map((position) => {
                const boss = schedule.bosses.find((candidate) => candidate.level === level && candidate.position === position);
                const label = boss?.name ?? `Boss ${position + 1}`;
                const positionLabel = ["บน", "กลาง", "ล่าง"][position];
                return <TabsTrigger key={position} value={String(position)} aria-label={`${positionLabel}: ${label}`} title={label} className="h-full min-w-0 flex-col justify-start overflow-hidden rounded-none px-2 py-3">
                  {boss ? <Image src={boss.imageUrl} alt="" width={256} height={256} sizes="256px" className="size-64 shrink-0 object-contain" priority={level === 110} /> : <span>{position + 1}</span>}
                  <span className="text-base font-semibold">{positionLabel}</span>
                  {boss?.recommendedMechanics.some(Boolean) ? <span className="mt-2 flex flex-col items-center gap-1 text-xs font-normal whitespace-normal text-muted-foreground">
                    {boss.recommendedMechanics.map((mechanic, index) => mechanic ? <RecommendedMechanic key={`${mechanic}-${index}`} mechanic={mechanic} type={boss.recommendedMechanicTypes[index] ?? (index === 0 ? "Advantage" : index === 1 ? "Disadvantage" : "None")} /> : null)}
                  </span> : null}
                </TabsTrigger>;
              })}
            </TabsList>
            {[0, 1, 2].map((position) => <TabsContent key={position} value={String(position)} className="pt-4"><BossCard schedule={schedule} level={level} position={position} catalog={catalog} /></TabsContent>)}
          </Tabs>
        </TabsContent>
      ))}
    </Tabs>
  );
}