// --- Matrice Eisenhower — versione Libro ---------------------------------
const QUADRANTS = [
  { id: 'q1', urgency: 1, importance: 1, title: 'Fai subito',   sub: 'Urgente + Importante',     color: 'var(--red)' },
  { id: 'q2', urgency: 0, importance: 1, title: 'Pianifica',    sub: 'Importante · non urgente', color: 'var(--accent)' },
  { id: 'q3', urgency: 1, importance: 0, title: 'Delega',       sub: 'Urgente · non importante', color: 'var(--amber)' },
  { id: 'q4', urgency: 0, importance: 0, title: 'Elimina',      sub: 'Né urgente né importante', color: 'var(--ink-3)' },
];

function MatrixScreen() {
  const [tasks, setTasks] = useState([]);
  const [projects, setProjects] = useState([]);
  const [projectFilter, setProjectFilter] = useState('all');
  const [loading, setLoading] = useState(true);

  const load = () => {
    setLoading(true);
    Promise.all([
      apiT('/api/tasks').catch(() => []),
      apiT('/api/projects').catch(() => []),
    ]).then(([ts, ps]) => { setTasks(ts); setProjects(ps); setLoading(false); });
  };
  useEffect(load, []);

  const projById = Object.fromEntries(projects.map((p) => [p.id, p]));

  const filtered = tasks.filter((t) => {
    if (t.status === 'completata' || t.status === 'archiviata') return false;
    if (projectFilter !== 'all' && String(t.project_id || '') !== String(projectFilter)) return false;
    return true;
  });

  const byQ = QUADRANTS.reduce((acc, q) => {
    acc[q.id] = filtered.filter((t) => !!t.urgency === !!q.urgency && !!t.importance === !!q.importance);
    return acc;
  }, {});

  const moveToQuadrant = async (taskId, urgency, importance) => {
    try { await apiT('/api/tasks/' + taskId, { method: 'PATCH', body: { urgency, importance } }); load(); }
    catch (e) { alert(e.message); }
  };

  const onDragStart = (e, taskId) => { e.dataTransfer.setData('task/id', String(taskId)); };
  const onDropOnQ = (e, q) => {
    e.preventDefault();
    const id = Number(e.dataTransfer.getData('task/id'));
    if (id) moveToQuadrant(id, q.urgency, q.importance);
  };

  return (
    <>
      <Topbar crumbs={['Gestionale', 'Produttività', 'Matrice Eisenhower']} />
      <div className="content">
        <div className="page-head">
          <div>
            <h1 className="page-title">Matrice <em>Eisenhower</em></h1>
            <div className="page-sub">Priorità per quadrante · trascina le task da un quadrante all'altro</div>
          </div>
          <select className="select-sm" value={projectFilter} onChange={(e) => setProjectFilter(e.target.value)}>
            <option value="all">Tutti i progetti</option>
            {projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
          </select>
        </div>

        {loading ? (
          <div style={{ padding: 40, textAlign: 'center', color: 'var(--ink-3)' }}>Caricamento…</div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, minHeight: 500 }} className="matrix-grid">
            {QUADRANTS.map((q) => (
              <div key={q.id}
                onDragOver={(e) => e.preventDefault()}
                onDrop={(e) => onDropOnQ(e, q)}
                style={{
                  background: '#fff',
                  border: '1px solid var(--rule)',
                  borderTop: `3px solid ${q.color}`,
                  borderRadius: 10,
                  padding: 14,
                  display: 'flex',
                  flexDirection: 'column',
                }}>
                <div style={{ marginBottom: 10 }}>
                  <div style={{ fontFamily: 'Fraunces', fontSize: 18, fontWeight: 500 }}>{q.title}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{q.sub} <span style={{ color: q.color, marginLeft: 6 }}>{byQ[q.id].length}</span></div>
                </div>
                <div style={{ flex: 1, minHeight: 120 }}>
                  {byQ[q.id].length === 0 ? (
                    <div style={{ padding: 20, textAlign: 'center', color: 'var(--ink-3)', fontSize: 12.5 }}>Nessuna task</div>
                  ) : byQ[q.id].map((t) => {
                    const p = projById[t.project_id];
                    return (
                      <div key={t.id}
                        draggable
                        onDragStart={(e) => onDragStart(e, t.id)}
                        style={{
                          padding: '8px 10px', background: 'var(--paper-2)',
                          borderRadius: 6, marginBottom: 6, fontSize: 13,
                          borderLeft: `3px solid ${p?.color || 'transparent'}`,
                          cursor: 'grab',
                        }}>
                        <div style={{ fontWeight: 500 }}>{t.title}</div>
                        <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 3, display: 'flex', gap: 10 }}>
                          {p && <span>{p.name}</span>}
                          {t.due_date && <span>📅 {fmtDate(t.due_date)}</span>}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </>
  );
}

window.MatrixScreen = MatrixScreen;