import { useState } from 'react';
import { Check, Megaphone, X } from 'lucide-react';
import { useUiStore } from '@/stores/uiStore';
import { fileToDataUrl, resizeToMax } from '@/lib/img/resize';
import { Button } from '@/components/ui/Button';
import { Modal } from '@/components/ui/Modal';
import { Input, Textarea } from '@/components/ui/Input';

/** GM control: compose a handout (text + optional image) shown to players. */
export function HandoutControl() {
  const active = useUiStore((s) => s.activeHandout);
  const setActive = useUiStore((s) => s.setActiveHandout);
  const [open, setOpen] = useState(false);
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [image, setImage] = useState<string | undefined>(undefined);

  const openComposer = () => { setTitle(active?.title ?? ''); setBody(active?.body ?? ''); setImage(active?.image); setOpen(true); };
  const show = () => { setActive({ title: title.trim() || 'Handout', body: body.trim(), ...(image ? { image } : {}) }); setOpen(false); };
  const onImage = async (file: File) => setImage(await resizeToMax(await fileToDataUrl(file), 1280));

  return (
    <>
      <Button size="sm" variant={active ? 'primary' : 'ghost'} onClick={openComposer} title="Show a handout (text / image) to players">
        <Megaphone size={14} aria-hidden /> Handout {active && <Check size={12} aria-hidden />}
      </Button>
      {active && <Button size="sm" variant="ghost" className="px-1 text-danger" onClick={() => setActive(null)} title="Hide handout"><X size={14} aria-hidden /></Button>}
      {open && (
        <Modal open onClose={() => setOpen(false)} title="Handout for players"
          footer={<>
            <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
            {active && <Button variant="ghost" className="text-danger" onClick={() => { setActive(null); setOpen(false); }}>Hide current</Button>}
            <Button variant="primary" onClick={show}>Show to players</Button>
          </>}>
          <div className="space-y-3">
            <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title (e.g. A Mysterious Letter)" aria-label="Handout title" />
            <Textarea value={body} onChange={(e) => setBody(e.target.value)} placeholder="Text shown to players…" rows={5} aria-label="Handout text" />
            <div className="flex items-center gap-2">
              {image && <img src={image} alt="" className="h-16 w-16 rounded border border-line object-cover" />}
              <label className="cursor-pointer rounded-md border border-line px-2 py-1 text-xs text-ink hover:border-accent">Image…<input type="file" accept="image/*" className="hidden" aria-label="Handout image" onChange={(e) => { const f = e.target.files?.[0]; if (f) void onImage(f); e.target.value = ''; }} /></label>
              {image && <Button size="sm" variant="ghost" onClick={() => setImage(undefined)}>Remove image</Button>}
            </div>
            <p className="text-xs text-muted">Players see this on the Player View — and live, if you're hosting a session.</p>
          </div>
        </Modal>
      )}
    </>
  );
}
