import Image from "next/image";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { elementBackgroundColor } from "@/lib/catalog/element";
import { characterRarityGradientClass, rarityGradientClass } from "@/lib/catalog/rarity";
import type { CommissionRequest } from "@/lib/commission/request";
import { cn } from "@/lib/utils";

type Item = { key: string; name: string; imageUrl: string; rarity?: number | null; element?: string | null };
type Catalog = { characters: Item[]; weapons: Item[]; artifacts: Item[] };

function ItemImage({ item, size = "small", character = false }: { item: Item; size?: "small" | "large"; character?: boolean }) {
  return <div title={item.name} className={cn("relative aspect-square min-w-0 overflow-hidden rounded-lg", character ? characterRarityGradientClass(item.key, item.rarity) : rarityGradientClass(item.rarity))}>
    <Image src={item.imageUrl} alt={item.name} fill sizes={size === "large" ? "160px" : "64px"} className="object-contain" />
  </div>;
}

function CommissionTeamCard({ team, index, catalog }: { team: CommissionRequest["teams"][number]; index: number; catalog: Catalog }) {
  const characters = new Map(catalog.characters.map((item) => [item.key, item]));
  const weapons = new Map(catalog.weapons.map((item) => [item.key, item]));
  const artifacts = new Map(catalog.artifacts.map((item) => [item.key, item]));
  return <div className="@container"><Card size="sm">
      <CardHeader className="flex flex-row items-center justify-between gap-2">
        <CardTitle>ทีม {index + 1}</CardTitle><Badge variant="secondary">฿100</Badge>
      </CardHeader>
      <CardContent className="grid grid-cols-4 gap-1 lg:grid-cols-2 lg:gap-2 lg:@min-[560px]:grid-cols-4">
        {team.members.map((member, memberIndex) => {
          const character = characters.get(member.characterKey);
          const weapon = weapons.get(member.weaponKey);
          const artifact = artifacts.get(member.artifactKey);
          return <div key={memberIndex} className="min-w-0 rounded-lg p-1 lg:p-1.5" style={{ backgroundColor: elementBackgroundColor(character?.element) }}>
            <div className="grid grid-cols-1 gap-1 lg:grid-cols-[2fr_1fr]">
              {character ? <ItemImage item={character} size="large" character /> : <div className="aspect-square rounded-lg bg-muted" />}
              <div className="grid min-w-0 grid-cols-2 gap-0.5 lg:grid-cols-1 lg:grid-rows-2 lg:gap-1">
                {weapon ? <ItemImage item={weapon} /> : <div title={member.weaponKey} className="aspect-square rounded-lg bg-muted" />}
                {artifact ? <ItemImage item={artifact} /> : <div title={member.artifactKey} className="aspect-square rounded-lg bg-muted" />}
              </div>
            </div>
            <div className="mt-1 flex flex-wrap items-center justify-center gap-0.5 lg:flex-nowrap lg:gap-1">
              <Badge variant="secondary" className="h-4 px-0.5 text-[9px] lg:h-auto lg:px-2 lg:text-xs">C{member.constellation ?? "0"}</Badge>
              <Badge variant="secondary" className="h-4 px-0.5 text-[9px] lg:h-auto lg:px-2 lg:text-xs">R{member.refinement ?? "1"}</Badge>
            </div>
            <p className="mt-1 truncate text-center text-[10px] font-medium lg:text-xs" title={character?.name}>{character?.name ?? member.characterKey}</p>
          </div>;
        })}
      </CardContent>
    </Card></div>;
}

export function CommissionRequestSummary({ request, catalog, amountBaht }: {
  request: CommissionRequest; catalog: Catalog; amountBaht: number;
}) {
  const characters = new Map(catalog.characters.map((item) => [item.key, item]));
  const weapons = new Map(catalog.weapons.map((item) => [item.key, item]));
  const comparisonTotal = request.weapons.reduce((sum, set) => sum + set.weaponKeys.length * 20, 0) +
    request.constellations.reduce((sum, set) => sum + set.levels.length * 20, 0);

  return <div className="@container flex flex-col gap-4">
    {request.teams.length === 0 && amountBaht > comparisonTotal ?
      <Card size="sm"><CardHeader className="flex flex-row items-center justify-between gap-2">
        <CardTitle>ค่าบริการพื้นฐาน</CardTitle><Badge variant="secondary">฿100</Badge>
      </CardHeader></Card> : null}
    {request.teams.map((team, index) => <CommissionTeamCard key={`team-${index}`} team={team} index={index} catalog={catalog} />)}
    {request.weapons.map((set, index) => {
      const character = characters.get(set.characterKey);
      return <Card key={`weapon-${index}`} size="sm">
        <CardHeader className="flex flex-row items-center justify-between gap-2">
          <CardTitle>เปรียบเทียบอาวุธ {index + 1}</CardTitle><Badge variant="secondary">฿{set.weaponKeys.length * 20}</Badge>
        </CardHeader>
        <CardContent className="grid grid-cols-[minmax(0,1fr)_64px] items-start gap-3">
          <div className="flex min-w-0 flex-wrap gap-2">
            {set.weaponKeys.map((key) => {
              const weapon = weapons.get(key);
              return weapon ? <div key={key} className="w-16 shrink-0"><ItemImage item={weapon} />
                  <div className="mt-1 flex justify-center"><Badge variant="secondary">R{set.refinements?.[key] ?? "1"}</Badge></div>
                  <p className="mt-1 truncate text-center text-xs" title={weapon.name}>{weapon.name}</p></div>
                : <p key={key} className="w-16 wrap-break-word text-xs">{key}</p>;
            })}
          </div>
          {character ? <div className="w-16 min-w-0"><ItemImage item={character} size="large" character /><p className="mt-1 truncate text-center text-xs" title={character.name}>{character.name}</p></div> : null}
        </CardContent>
      </Card>;
    })}
    {request.constellations.map((set, index) => {
      const character = characters.get(set.characterKey);
      return <Card key={`constellation-${index}`} size="sm">
        <CardHeader className="flex flex-row items-center justify-between gap-2">
          <CardTitle>เปรียบเทียบกลุ่มดาว {index + 1}</CardTitle><Badge variant="secondary">฿{set.levels.length * 20}</Badge>
        </CardHeader>
        <CardContent className="grid grid-cols-[minmax(0,1fr)_64px] items-center gap-3">
          <div className="flex min-w-0 flex-wrap gap-2">{set.levels.map((level) => <Badge key={level} variant="outline">C{level}</Badge>)}</div>
          {character ? <div className="w-16 min-w-0"><ItemImage item={character} size="large" character /><p className="mt-1 truncate text-center text-xs" title={character.name}>{character.name}</p></div> : null}
        </CardContent>
      </Card>;
    })}
  </div>;
}