ttrpg_manager/src/features/characters/sheet/ClassFeaturesSection.tsx

import { collectChoices, collectFeatures } from '@/lib/rules';
import type { ClassEntry } from '@/lib/schemas';
import { Input, Select } from '@/components/ui/Input';
import { Badge } from '@/components/ui/Codex';
import { SheetSection, type SectionProps } from './common';

/**
 * Class features + every choice the character must make — 5e (Fighting Style, Pact Boon,
 * Invocations, Metamagic, Expertise, subclass maneuvers…) and PF2e (class/skill/general/
 * ancestry feats, instinct/doctrine/bloodline…) — so no unlock-able option is missed.
 */
export function ClassFeaturesSection({ c, update }: SectionProps) {
  // 5e multiclasses via classes[]; pf2e is single-class with its subclass resolved in choices[].
  const classes: ClassEntry[] = c.classes.length
    ? c.classes
    : c.className
      ? [{ className: c.className, level: c.level, ...(c.system === 'pf2e' ? { subclass: c.choices.find((ch) => ch.key.endsWith(':subclass'))?.values[0] } : {}) }]
      : [];
  const features = collectFeatures(c.system, classes);
  const choices = collectChoices(c.system, classes);
  if (features.length === 0 && choices.length === 0) return null;

  const getVals = (key: string) => c.choices.find((ch) => ch.key === key)?.values ?? [];
  const setVal = (key: string, idx: number, value: string) => {
    const cur = [...getVals(key)];
    while (cur.length <= idx) cur.push('');
    cur[idx] = value;
    update({ choices: [...c.choices.filter((ch) => ch.key !== key), { key, values: cur }] });
  };

  const pendingTotal = choices.reduce((n, ch) => n + Math.max(0, ch.count - getVals(ch.key).filter(Boolean).length), 0);

  return (
    <SheetSection title="Class Features & Choices">
      {choices.length > 0 && (
        <div className="mb-4">
          <div className="mb-2 flex items-center gap-2">
            <span className="smallcaps">Choices</span>
            {pendingTotal > 0 && <Badge tone="ember">{pendingTotal} to choose</Badge>}
          </div>
          <div className="space-y-2">
            {choices.map((ch) => {
              const vals = getVals(ch.key);
              const filled = vals.filter(Boolean).length;
              return (
                <div key={ch.key} className="rounded-md border border-line bg-panel p-2">
                  <div className="mb-1 flex items-center gap-2 text-sm">
                    <span className="font-medium text-ink">{ch.label}</span>
                    <span className="text-[10px] uppercase text-muted">{ch.source}</span>
                    {filled < ch.count && <Badge tone="ember">choose {ch.count - filled}</Badge>}
                  </div>
                  <div className="grid grid-cols-1 gap-1 sm:grid-cols-2">
                    {Array.from({ length: ch.count }).map((_, i) => {
                      const val = vals[i] ?? '';
                      return ch.options ? (
                        <Select key={i} className="text-xs" value={val} onChange={(e) => setVal(ch.key, i, e.target.value)} aria-label={`${ch.label} ${i + 1}`}>
                          <option value="">— choose —</option>
                          {val && !ch.options.includes(val) && <option value={val}>{val}</option>}
                          {ch.options.map((o) => <option key={o} value={o}>{o}</option>)}
                        </Select>
                      ) : (
                        <Input key={i} className="h-8 text-xs" value={val} onChange={(e) => setVal(ch.key, i, e.target.value)} aria-label={`${ch.label} ${i + 1}`} placeholder={`${ch.label} ${i + 1}`} />
                      );
                    })}
                  </div>
                  {ch.hint && <p className="mt-1 text-[10px] text-muted">{ch.hint}</p>}
                </div>
              );
            })}
          </div>
        </div>
      )}

      {features.length > 0 && (
        <div>
          <div className="mb-2 smallcaps">Features</div>
          <ul className="space-y-1.5">
            {features.map((f, i) => (
              <li key={`${f.source}-${f.name}-${i}`} className="rounded-md border border-line bg-panel px-2 py-1.5 text-sm">
                <div className="flex items-baseline gap-2">
                  <span className="font-medium text-ink">{f.name}</span>
                  <span className="text-[10px] uppercase text-muted">{f.source} · L{f.level}</span>
                </div>
                {f.text && <p className="mt-0.5 text-xs text-muted">{f.text}</p>}
              </li>
            ))}
          </ul>
        </div>
      )}
    </SheetSection>
  );
}