export function ArtifactScreen() {
  const { active, data } = useDataSource();
  const c = active ?? data.characters[0];
  return (
    <div className="p-5 md:p-8">
      {c?.artifact ? (
        <Panel tone="raised" className="p-4 md:p-6">
          {/* Keyed so switching Guardians reseeds the local selection. */}
          <ArtifactSelector
            key={`${c.id}:${c.artifact.hash}`}
            artifact={c.artifact}
          />
        </Panel>
      ) : (
        <p className="text-engram-muted text-sm">
          No artifact equipped on this Guardian.
        </p>
      )}
    </div>
  );
}

function ArtifactSelector({ artifact }: { artifact: ResolvedArtifact }) {
  const [picked, setPicked] = useState<Set<number>>(
    () =>
      new Set(
        artifact.groups.flatMap((g) =>
          g.sockets.flatMap((s) => (s.pick ? [s.pick.hash] : [])),
        ),
      ),
  );

  // Each group's displayed pool: its perks minus everything a cheaper group
  // already showed.
  const seen = new Set<number>();
  const displayGroups = artifact.groups.map((group) => {
    const pool = new Map(
      group.sockets
        .flatMap((s) => s.pool)
        .filter((p) => !seen.has(p.hash))
        .map((p) => [p.hash, p]),
    );
    for (const hash of pool.keys()) seen.add(hash);
    return { ...group, pool: [...pool.values()] };
  });

  const toggle = (groupIndex: number, hash: number) => {
    setPicked((prev) => {
      const next = new Set(prev);
      if (next.has(hash)) {
        next.delete(hash);
        return next;
      }
      const group = displayGroups[groupIndex];
      const inGroup = group.pool.filter((p) => next.has(p.hash)).length;
      if (inGroup >= group.sockets.length) return prev; // group is full
      next.add(hash);
      return next;
    });
  };

  return (
    <div className="flex flex-col gap-6">
      {/* The in-game artifact header: icon tile + name/type row, then the
          flavor line and the "Works best with" block below, left-aligned
          (see design/references/artifact-queensfoil.png). */}
      <div className="flex flex-col gap-3">
        <div className="flex items-center gap-4">
          {artifact.icon ? (
            <ItemImage
              icon={artifact.icon}
              rarity="legendary"
              size={64}
              className="shrink-0"
            />
          ) : null}
          <div className="flex min-w-0 flex-col gap-1">
            <h2 className="font-engram-display font-bold text-2xl text-engram-fg uppercase leading-none tracking-engram-title">
              {artifact.name}
            </h2>
            <span className="font-engram-display text-[11px] text-engram-muted uppercase tracking-engram-label">
              Artifact
            </span>
          </div>
        </div>
        {artifact.flavor ? (
          <p className="max-w-xl text-engram-muted text-sm italic leading-relaxed">
            {artifact.flavor}
          </p>
        ) : null}
        {artifact.worksBestWith ? (
          <div className="flex flex-col gap-1.5 text-engram-muted text-sm">
            <span>Works best with:</span>
            {artifact.worksBestWith.elements.length > 0 ? (
              <span className="flex items-center gap-2">
                Elements:
                {artifact.worksBestWith.elements.map((el) => (
                  <ElementIcon key={el} element={el} size={16} />
                ))}
              </span>
            ) : null}
            {artifact.worksBestWith.weapons.length > 0 ? (
              <span className="flex flex-wrap items-center gap-x-3 gap-y-1">
                Weapons:
                {artifact.worksBestWith.weapons.map((w) =>
                  weaponGlyphFromName(w) ? (
                    <WeaponIcon
                      key={w}
                      name={w}
                      size={18}
                      className="text-engram-fg/90"
                    />
                  ) : (
                    <span
                      key={w}
                      className="font-engram-display text-[11px] text-engram-fg/90 uppercase tracking-engram-label"
                    >
                      {w}
                    </span>
                  ),
                )}
              </span>
            ) : null}
          </div>
        ) : null}
      </div>

      {/* The pip groups: click a perk to slot it (up to the group's socket
          count), click again to remove. Hover for the inspect popup. */}
      <div className="flex flex-col gap-5">
        {displayGroups.map((group, gi) => {
          const used = group.pool.filter((p) => picked.has(p.hash)).length;
          return (
            <div key={group.pips} className="flex flex-col gap-2">
              <Caption>
                {"◆".repeat(group.pips)} · {used}/{group.sockets.length}{" "}
                {group.sockets.length === 1 ? "slot" : "slots"}
              </Caption>
              <div className="flex flex-wrap gap-2">
                {group.pool.map((perk) => {
                  const inspect = artifact.perkInspect[perk.hash];
                  return (
                    <ArtifactPerk
                      key={perk.hash}
                      icon={perk.icon}
                      name={perk.name}
                      size={56}
                      state={picked.has(perk.hash) ? "active" : "unlocked"}
                      onPick={() => toggle(gi, perk.hash)}
                      popup={inspect ? <PlugPopup {...inspect} /> : null}
                    />
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
Slayer Baron Apothecary Satchel
