ttrpg_manager/src/features/assistant/SessionPrepCard.tsx

import { useState } from 'react';
import { Copy, Check } from 'lucide-react';
import type { Campaign, Character, Note, Quest } from '@/lib/schemas';
import { complete } from '@/lib/llm/client';
import { getLlmConfig, useAssistantStore } from '@/stores/assistantStore';
import { buildCampaignContext } from '@/lib/assistant/context';
import { buildSessionHookPrompt, sessionHookSchema, fallbackSessionHooks, type SessionHook } from '@/lib/assistant/session';
import { Button } from '@/components/ui/Button';

interface Props {
  campaign: Campaign;
  characters: Character[];
  notes: Note[];
  quests: Quest[];
}

export function SessionPrepCard({ campaign, characters, notes, quests }: Props) {
  const llmEnabled = useAssistantStore((s) => s.enabled);
  const hasKey = useAssistantStore((s) => !!s.apiKey);
  const canUseLlm = llmEnabled && hasKey;

  const [state, setState] = useState<'idle' | 'loading' | 'ready' | 'error'>('idle');
  const [hooks, setHooks] = useState<SessionHook[]>([]);
  const [message, setMessage] = useState<string | null>(null);

  const generate = async () => {
    setState('loading');
    setMessage(null);
    const ctx = buildCampaignContext({ campaign, characters, encounters: [], quests, notes });

    if (canUseLlm) {
      const { system, user } = buildSessionHookPrompt(ctx);
      const result = await complete<{ hooks: SessionHook[] }>(getLlmConfig(), { system, user, schema: sessionHookSchema });
      if (result.ok && 'data' in result) {
        setHooks(result.data.hooks);
        setState('ready');
        return;
      }
      setMessage(`AI unavailable${!result.ok ? ` (${result.error})` : ''}. Showing template hooks instead.`);
    }

    setHooks(fallbackSessionHooks(ctx));
    setState('ready');
  };

  return (
    <div className="rounded-lg border border-line bg-panel p-4">
      <p className="mb-3 text-sm text-muted">
        Generate three distinct session opening hooks grounded in your campaign&apos;s current threads.
      </p>
      <Button variant="secondary" disabled={state === 'loading'} onClick={() => void generate()}>
        {state === 'loading' ? 'Thinking…' : state === 'ready' ? 'Regenerate' : canUseLlm ? 'Generate hooks (AI)' : 'Generate hooks'}
      </Button>

      {message && <p className="mt-2 text-xs text-muted">{message}</p>}

      {state === 'ready' && hooks.length > 0 && (
        <div className="mt-4 space-y-3">
          {hooks.map((h, i) => (
            <HookCard key={i} hook={h} />
          ))}
        </div>
      )}
    </div>
  );
}

function HookCard({ hook }: { hook: SessionHook }) {
  const [copied, setCopied] = useState(false);
  const copy = () => {
    void navigator.clipboard?.writeText(`${hook.title}\n\n${hook.opening}\n\n${hook.tension}`).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    });
  };
  return (
    <div className="rounded-md border border-line bg-surface-2 p-3 text-sm">
      <div className="mb-1 flex items-start justify-between gap-2">
        <span className="font-display font-semibold text-ink">{hook.title}</span>
        <button onClick={copy} title="Copy hook" className="shrink-0 text-muted hover:text-ink">
          {copied ? <Check size={13} aria-hidden /> : <Copy size={13} aria-hidden />}
        </button>
      </div>
      <p className="text-muted">{hook.opening}</p>
      <p className="mt-1.5 text-xs italic text-faint">{hook.tension}</p>
    </div>
  );
}