// --- Report — versione Libro --------------------------------------------
function ReportScreen() {
  const [period, setPeriod] = useState('week'); // day | week | month | year
  const [data, setData] = useState(null);
  const [projects, setProjects] = useState([]);
  const [loading, setLoading] = useState(true);

  const load = () => {
    setLoading(true);
    const today = new Date().toISOString().slice(0, 10);
    const url = period === 'day'
      ? '/api/reports/daily?date=' + today
      : period === 'week' ? '/api/reports/weekly'
      : period === 'month' ? '/api/reports/monthly'
      : '/api/reports/yearly';
    Promise.all([
      apiT(url).catch(() => null),
      apiT('/api/projects').catch(() => []),
    ]).then(([d, p]) => { setData(d); setProjects(p); setLoading(false); });
  };
  useEffect(load, [period]);

  const totalSec = data?.total_seconds || 0;
  const breakSec = data?.total_break_seconds || 0;
  const tasksDone = data?.completed_count || 0;
  const perProject = data?.per_project || [];
  const perDay = data?.per_day || [];
  const totalHours = totalSec / 3600;
  const maxPerDay = Math.max(1, ...perDay.map((d) => d.seconds || 0));
  const maxPerProject = Math.max(1, ...perProject.map((p) => p.seconds || 0));

  return (
    <>
      <Topbar crumbs={['Gestionale', 'Produttività', 'Report']} />
      <div className="content">
        <div className="page-head">
          <div>
            <h1 className="page-title">Report <em>{({day: 'oggi', week: 'settimana', month: 'mese', year: 'anno'})[period]}</em></h1>
            <div className="page-sub">Ore · task completate · produttività per progetto</div>
          </div>
          <div className="tabs" style={{ margin: 0 }}>
            {[{ id: 'day', l: 'Oggi' }, { id: 'week', l: 'Settimana' }, { id: 'month', l: 'Mese' }, { id: 'year', l: 'Anno' }].map((t) => (
              <div key={t.id} className={`tab ${period === t.id ? 'active' : ''}`} onClick={() => setPeriod(t.id)}>{t.l}</div>
            ))}
          </div>
        </div>

        <div className="kpi-strip">
          {[
            { label: 'Ore lavorate', value: totalHours, fmt: 'h', ic: 'clock' },
            { label: 'Task completate', value: tasksDone, ic: 'check-circle-2', kind: 'success', nonEuro: true },
            { label: 'Ore di pause', value: breakSec / 3600, fmt: 'h', ic: 'coffee' },
            { label: 'Progetti attivi', value: perProject.length, ic: 'layers', nonEuro: true },
          ].map((k, i) => (
            <div key={i} className="kpi">
              <div className="kpi-label"><Icon name={k.ic} size={12} stroke={2} />{k.label}</div>
              <div className="kpi-value" style={{ fontSize: 32 }}>
                {k.fmt === 'h' ? <>{Math.floor(k.value)}<span className="cent">,{String(Math.round((k.value % 1) * 60)).padStart(2,'0')}</span></> : k.value}
                {k.fmt === 'h' && <span style={{ fontSize: 14, color: 'var(--ink-3)', marginLeft: 4 }}>h</span>}
              </div>
            </div>
          ))}
        </div>

        {loading ? (
          <div style={{ padding: 40, textAlign: 'center', color: 'var(--ink-3)' }}>Caricamento…</div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }} className="report-grid">
            {/* Per progetto */}
            <div className="card" style={{ background: '#fff', border: '1px solid var(--rule)', borderRadius: 10, padding: 16 }}>
              <div style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12 }}>Ore per progetto</div>
              {perProject.length === 0 ? (
                <div style={{ padding: 20, textAlign: 'center', color: 'var(--ink-3)' }}>Nessun dato</div>
              ) : perProject.map((p) => {
                const proj = projects.find((x) => x.id === p.project_id);
                const pct = (p.seconds / maxPerProject) * 100;
                return (
                  <div key={p.project_id || 'none'} style={{ marginBottom: 10 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 4 }}>
                      <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                        {proj && <span style={{ width: 9, height: 9, borderRadius: '50%', background: proj.color }} />}
                        {proj?.name || p.project_name || 'Senza progetto'}
                      </span>
                      <span className="mono" style={{ color: 'var(--ink-2)' }}>{fmtHours(p.seconds)}</span>
                    </div>
                    <div style={{ height: 6, background: 'var(--paper-2)', borderRadius: 99 }}>
                      <div style={{ width: pct + '%', height: '100%', background: proj?.color || 'var(--accent)', borderRadius: 99 }} />
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Per giorno */}
            <div className="card" style={{ background: '#fff', border: '1px solid var(--rule)', borderRadius: 10, padding: 16 }}>
              <div style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12 }}>Ore per giorno</div>
              {perDay.length === 0 ? (
                <div style={{ padding: 20, textAlign: 'center', color: 'var(--ink-3)' }}>Nessun dato</div>
              ) : (
                <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 160, paddingTop: 8 }}>
                  {perDay.map((d, i) => {
                    const pct = (d.seconds / maxPerDay) * 100;
                    return (
                      <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                        <div style={{ flex: 1, width: '100%', display: 'flex', alignItems: 'flex-end', minHeight: 0 }}>
                          <div style={{ width: '100%', height: pct + '%', background: 'var(--accent)', borderRadius: '4px 4px 0 0', minHeight: pct > 0 ? 2 : 0 }} title={fmtHours(d.seconds)} />
                        </div>
                        <div style={{ fontSize: 10, color: 'var(--ink-3)' }}>{d.date?.slice(-2) || d.label}</div>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </>
  );
}

window.ReportScreen = ReportScreen;