// ============================================================
// project_actions.jsx — mini modali per ProjectDetail
// ============================================================

function AddMilestoneModal({ open, onClose, projectId }) {
  const { addMilestone, pushToast, user } = useStore();
  const [f, setF] = React.useState({ title: '', due: '', status: 'planned', owner: '', notes: '' });
  const [saving, setSaving] = React.useState(false);
  const [serverError, setServerError] = React.useState(null);
  React.useEffect(() => {
    if (open) {
      setF({ title: '', due: '', status: 'planned', owner: '', notes: '' });
      setServerError(null);
      setSaving(false);
    }
  }, [open]);
  // FASE 2b.4: salva la milestone in DB tramite POST /api/projects/<id>/milestones,
  // poi propaga il record server in extras via addMilestone.
  const submit = async () => {
    if (!f.title || !f.due || saving) return;
    setServerError(null);
    setSaving(true);
    try {
      const res = await fetch(`/api/projects/${projectId}/milestones`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-Actor-Persona-Id': user?.id || '' },
        body: JSON.stringify({
          title: f.title,
          due: f.due,
          status: f.status,
          owner: f.owner || null,
        }),
      });
      const json = await res.json().catch(() => null);
      if (!res.ok) {
        const msg = json?.error === 'validation_error'
          ? (json.issues?.map(i => `${i.path?.join('.') || 'campo'}: ${i.message}`).join(' · ') || 'Validazione fallita')
          : (json?.error || `Errore HTTP ${res.status}`);
        setServerError(msg);
        setSaving(false);
        return;
      }
      addMilestone(projectId, json.data);
      pushToast({ title: 'Milestone aggiunta', desc: `${json.data.title} — ${json.data.due || 'data da definire'}`, tone: 'ok' });
      setSaving(false);
      onClose();
    } catch (err) {
      setServerError(err?.message || 'Errore di rete');
      setSaving(false);
    }
  };
  return (
    <Modal open={open} onClose={onClose} size="md" title="Nuova milestone" footer={<>
      <Btn variant="ghost" size="sm" onClick={onClose} disabled={saving}>Annulla</Btn>
      <Btn variant="primary" size="sm" onClick={submit} disabled={saving}>{saving ? 'Salvataggio…' : 'Aggiungi'}</Btn>
    </>}>
      {serverError && (
        <div style={{ margin: '0 0 12px', padding: '10px 12px', border: '1px solid var(--err, #c0392b)', borderRadius: 6, background: 'rgba(192,57,43,0.08)', color: 'var(--err, #c0392b)', fontSize: 12 }}>
          <strong>Errore salvataggio:</strong> {serverError}
        </div>
      )}
      <FormGrid cols={2}>
        <FormField label="Titolo milestone" required cols={2}>
          <input value={f.title} onChange={e => setF({ ...f, title: e.target.value })} placeholder="es. FAT presso vendor"/>
        </FormField>
        <FormField label="Scadenza" required>
          <input type="date" value={f.due} onChange={e => setF({ ...f, due: e.target.value })}/>
        </FormField>
        <FormField label="Stato">
          <select value={f.status} onChange={e => setF({ ...f, status: e.target.value })}>
            <option value="planned">pianificata</option>
            <option value="in_progress">in corso</option>
            <option value="done">completata</option>
            <option value="at_risk">a rischio</option>
          </select>
        </FormField>
        <FormField label="Responsabile" cols={2}>
          <input value={f.owner} onChange={e => setF({ ...f, owner: e.target.value })} placeholder="Nome responsabile"/>
        </FormField>
        <FormField label="Note" cols={2}>
          <textarea rows={2} value={f.notes} onChange={e => setF({ ...f, notes: e.target.value })} placeholder="Dipendenze, criteri di completamento..."/>
        </FormField>
      </FormGrid>
    </Modal>
  );
}

function AddDocumentModal({ open, onClose, projectId }) {
  const { addProjectDoc, pushToast } = useStore();
  const [f, setF] = React.useState({ title: '', kind: 'specifica', notes: '', files: [] });
  React.useEffect(() => { if (open) setF({ title: '', kind: 'specifica', notes: '', files: [] }); }, [open]);
  const submit = () => {
    if (!f.title) return;
    addProjectDoc(projectId, { title: f.title, kind: f.kind, notes: f.notes, size: f.files[0] ? fmtBytes(f.files[0].size) : '—', uploaded: new Date().toISOString().slice(0, 10), status: 'nuovo' });
    pushToast({ title: 'Documento aggiunto', desc: `${f.title} indicizzato dall'AI`, tone: 'ok' });
    onClose();
  };
  const kinds = ['specifica', 'capitolato', 'offerta', 'contratto', 'certificazione', 'piano', 'checklist', 'verbale', 'SAL', 'altro'];
  return (
    <Modal open={open} onClose={onClose} size="md" title="Nuovo documento di progetto" footer={<>
      <Btn variant="ghost" size="sm" onClick={onClose}>Annulla</Btn>
      <Btn variant="ai" size="sm" onClick={() => pushToast({ title: 'Classificazione AI', desc: 'Estrazione metadata e classificazione automatica attivata.', tone: 'ok' })}><Icon name="sparkle" size={11}/> Auto-classify</Btn>
      <Btn variant="primary" size="sm" onClick={submit}>Aggiungi</Btn>
    </>}>
      <FormGrid cols={2}>
        <FormField label="Titolo" required cols={2}>
          <input value={f.title} onChange={e => setF({ ...f, title: e.target.value })} placeholder="es. Specifica tecnica v2.1"/>
        </FormField>
        <FormField label="Tipo documento">
          <select value={f.kind} onChange={e => setF({ ...f, kind: e.target.value })}>
            {kinds.map(k => <option key={k}>{k}</option>)}
          </select>
        </FormField>
        <FormField label="Note" cols={2}>
          <textarea rows={2} value={f.notes} onChange={e => setF({ ...f, notes: e.target.value })} placeholder="Versione, criticità, commenti..."/>
        </FormField>
      </FormGrid>
      <div style={{ marginTop: 12 }}>
        <AttachmentsList files={f.files} onAdd={file => setF({ ...f, files: [...f.files, file] })} onRemove={i => setF({ ...f, files: f.files.filter((_, j) => j !== i) })} />
      </div>
    </Modal>
  );
}

function AddCommModal({ open, onClose, projectId }) {
  const { addComm, pushToast } = useStore();
  const [f, setF] = React.useState({ kind: 'email', from: '', subject: '', preview: '' });
  React.useEffect(() => { if (open) setF({ kind: 'email', from: '', subject: '', preview: '' }); }, [open]);
  const submit = () => {
    if (!f.from || !f.subject) return;
    addComm(projectId, { ...f, ts: new Date().toISOString() });
    pushToast({ title: 'Comunicazione aggiunta', desc: `${f.from}: ${f.subject}`, tone: 'ok' });
    onClose();
  };
  return (
    <Modal open={open} onClose={onClose} size="md" title="Nuova comunicazione" footer={<>
      <Btn variant="ghost" size="sm" onClick={onClose}>Annulla</Btn>
      <Btn variant="ai" size="sm" onClick={() => pushToast({ title: 'Bozza AI', desc: 'Generazione corpo email dal contesto progetto.', tone: 'ok' })}><Icon name="sparkle" size={11}/> Genera bozza</Btn>
      <Btn variant="primary" size="sm" onClick={submit}>Salva</Btn>
    </>}>
      <FormGrid cols={2}>
        <FormField label="Canale">
          <div className="row" style={{ gap: 4 }}>
            {[['email','Email'],['meeting','Riunione'],['call','Telefonata'],['chat','Chat']].map(([v, l]) => (
              <button key={v} type="button" className={`btn sm ${f.kind === v ? 'primary' : 'ghost'}`} onClick={() => setF({ ...f, kind: v })}>{l}</button>
            ))}
          </div>
        </FormField>
        <FormField label="Mittente / partecipante" required>
          <input value={f.from} onChange={e => setF({ ...f, from: e.target.value })} placeholder="Nome, vendor o interlocutore"/>
        </FormField>
        <FormField label="Oggetto" required cols={2}>
          <input value={f.subject} onChange={e => setF({ ...f, subject: e.target.value })} placeholder="Argomento principale"/>
        </FormField>
        <FormField label="Contenuto / estratto" cols={2}>
          <textarea rows={5} value={f.preview} onChange={e => setF({ ...f, preview: e.target.value })} placeholder="Sintesi dei punti principali..."/>
        </FormField>
      </FormGrid>
    </Modal>
  );
}

function AddBudgetRowModal({ open, onClose, projectId, totalBudget }) {
  const { addBudgetRow, pushToast } = useStore();
  const [f, setF] = React.useState({ v: '', a: '', kind: 'SAL', date: '', notes: '' });
  React.useEffect(() => { if (open) setF({ v: '', a: '', kind: 'SAL', date: new Date().toISOString().slice(0,10), notes: '' }); }, [open]);
  const submit = () => {
    if (!f.v || !f.a) return;
    const amount = Number(f.a);
    addBudgetRow(projectId, { v: f.v, a: amount, p: totalBudget ? ((amount/totalBudget*100).toFixed(1) + '%') : '—', kind: f.kind, date: f.date, notes: f.notes });
    pushToast({ title: 'Voce budget aggiunta', desc: `${f.v}: ${fmtEUR(amount)}`, tone: 'ok' });
    onClose();
  };
  return (
    <Modal open={open} onClose={onClose} size="md" title="Nuova voce di budget / SAL" footer={<>
      <Btn variant="ghost" size="sm" onClick={onClose}>Annulla</Btn>
      <Btn variant="primary" size="sm" onClick={submit}>Aggiungi</Btn>
    </>}>
      <FormGrid cols={2}>
        <FormField label="Descrizione voce" required cols={2}>
          <input value={f.v} onChange={e => setF({ ...f, v: e.target.value })} placeholder="es. SAL 03 · avanzamento opere civili"/>
        </FormField>
        <FormField label="Importo (€)" required>
          <input type="number" value={f.a} onChange={e => setF({ ...f, a: e.target.value })} className="num"/>
        </FormField>
        <FormField label="Tipologia">
          <select value={f.kind} onChange={e => setF({ ...f, kind: e.target.value })}>
            {['SAL','Impegno (PO)','Variante','Extra-scope','Contingency','Fatturato','Revenue'].map(k => <option key={k}>{k}</option>)}
          </select>
        </FormField>
        <FormField label="Data">
          <input type="date" value={f.date} onChange={e => setF({ ...f, date: e.target.value })}/>
        </FormField>
        <FormField label="Note" cols={2}>
          <textarea rows={2} value={f.notes} onChange={e => setF({ ...f, notes: e.target.value })}/>
        </FormField>
      </FormGrid>
    </Modal>
  );
}

Object.assign(window, { AddMilestoneModal, AddDocumentModal, AddCommModal, AddBudgetRowModal });