import { Check, ChevronRight, ArrowUp } from 'lucide-react';
import type { Character } from '@/lib/schemas';
import { getTurnGuide, getGenericGuide } from '@/lib/assistant/actions';

/** Collapsible "What can I do?" guide for the player in-session view. */
export function ActionGuide({ character }: { character: Character }) {
  const guide = getTurnGuide(character.system, character.className?.toLowerCase() ?? '') ?? getGenericGuide(character.system);

  return (
    <details className="mt-3 rounded-lg border border-line bg-surface-2">
      <summary className="flex cursor-pointer select-none items-center gap-1 px-3 py-2 text-xs text-muted hover:text-ink">
        <ChevronRight size={13} aria-hidden /> What can I do on my turn?
      </summary>
      <div className="border-t border-line px-3 pb-3 pt-2">
        <ul className="space-y-2">
          {guide.actions.map((a) => (
            <li key={a.label}>
              <span className="text-xs font-semibold text-ink">{a.label}: </span>
              <span className="text-xs text-muted">{a.desc}</span>
            </li>
          ))}
        </ul>
        {guide.upgradeAt && character.level < guide.upgradeAt.level && (
          <p className="mt-2 flex items-center gap-1 rounded-md border border-accent/30 bg-accent/5 px-2 py-1 text-xs text-accent">
            <ArrowUp size={12} aria-hidden /> {guide.upgradeAt.note}
          </p>
        )}
        {guide.upgradeAt && character.level >= guide.upgradeAt.level && (
          <p className="mt-2 rounded-md border border-success/30 bg-success/5 px-2 py-1 text-xs text-success">
            <Check size={12} className="mr-1 inline" aria-hidden /> {guide.upgradeAt.note}
          </p>
        )}
        {guide.tip && (
          <p className="mt-2 border-t border-line pt-2 text-xs italic text-muted">{guide.tip}</p>
        )}
      </div>
    </details>
  );
}