/* global React, API, useApp */
const { useState, useEffect, useRef, useCallback } = React;

function fmt(mins) {
  const h = Math.floor(mins / 60), m = mins % 60;
  return `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`;
}
function fmtDate(v) { return v ? new Date(v).toLocaleDateString('nl-NL') : '—'; }

function TimeTracker() {
  const [entries, setEntries]     = useState([]);
  const [companies, setCompanies] = useState([]);
  const [running, setRunning]     = useState(false);
  const [elapsed, setElapsed]     = useState(0);
  const [startTime, setStartTime] = useState(null);
  const [timerCo, setTimerCo]     = useState('');
  const [timerDesc, setTimerDesc] = useState('');
  const [filter, setFilter]       = useState('uninvoiced');
  const [manualModal, setManualModal] = useState(false);
  const tickRef = useRef(null);
  const { toast } = useApp();

  const load = useCallback(() => {
    API.get('/time').then(setEntries).catch(() => {});
  }, []);

  useEffect(() => {
    load();
    API.get('/companies?type=customer').then(setCompanies).catch(() => {});
  }, [load]);

  useEffect(() => {
    if (running) {
      tickRef.current = setInterval(() => setElapsed(Math.floor((Date.now() - startTime) / 60000)), 10000);
      setElapsed(0);
    } else {
      clearInterval(tickRef.current);
    }
    return () => clearInterval(tickRef.current);
  }, [running, startTime]);

  function startTimer() {
    setStartTime(Date.now());
    setRunning(true);
  }

  async function stopTimer() {
    setRunning(false);
    const endedAt = new Date().toISOString();
    const startedAt = new Date(startTime).toISOString();
    const mins = Math.max(1, Math.round((Date.now() - startTime) / 60000));
    try {
      await API.post('/time', { company_id: timerCo || null, description: timerDesc, started_at: startedAt, ended_at: endedAt, duration_minutes: mins });
      toast(`Logged ${fmt(mins)}`);
      load();
      setTimerDesc(''); setElapsed(0);
    } catch (e) { toast(e.error || 'Error', 'error'); }
  }

  async function deleteEntry(id) {
    if (!confirm('Delete this entry?')) return;
    await API.del(`/time/${id}`).catch(e => toast(e.error || 'Error', 'error'));
    load(); toast('Entry deleted');
  }

  const visible = entries.filter(e => {
    if (filter === 'uninvoiced') return !e.invoiced;
    if (filter === 'invoiced') return !!e.invoiced;
    return true;
  });

  const totalMins = visible.reduce((s, e) => s + (e.duration_minutes || 0), 0);

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Time tracker</h1>
          <div className="page-subtitle">Log hours, attach to invoices</div>
        </div>
        <div className="page-actions">
          <button className="btn btn--ghost" onClick={() => setManualModal(true)}>+ Manual entry</button>
        </div>
      </div>

      <div className="card">
        <div className="card-body">
          <div className="timer-display">{fmt(running ? elapsed : 0)}</div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12,maxWidth:500,margin:'0 auto 20px'}}>
            <div className="field">
              <label className="field-label">Customer</label>
              <select className="field-select" value={timerCo} onChange={e => setTimerCo(e.target.value)} disabled={running}>
                <option value="">— none —</option>
                {companies.map(co => <option key={co.id} value={co.id}>{co.name}</option>)}
              </select>
            </div>
            <div className="field">
              <label className="field-label">Description</label>
              <input className="field-input" value={timerDesc} onChange={e => setTimerDesc(e.target.value)} placeholder="What are you working on?" disabled={running} />
            </div>
          </div>
          <div className="timer-controls">
            {!running
              ? <button className="btn btn--primary" onClick={startTimer}>Start timer</button>
              : <button className="btn btn--danger" style={{background:'var(--status-negative)',color:'#fff',borderColor:'var(--status-negative)'}} onClick={stopTimer}>Stop &amp; save</button>
            }
          </div>
        </div>
      </div>

      <div style={{display:'flex',alignItems:'center',gap:16,marginBottom:16}}>
        <div className="tabs" style={{marginBottom:0,border:'none'}}>
          {[['uninvoiced','Uninvoiced'],['invoiced','Invoiced'],['all','All']].map(([v,l]) => (
            <button key={v} className={`tab ${filter===v?'is-active':''}`} onClick={() => setFilter(v)}>{l}</button>
          ))}
        </div>
        <span className="text-mono" style={{fontSize:12,marginLeft:'auto',color:'var(--fg-muted)'}}>
          Total: {fmt(totalMins)} ({(totalMins/60).toFixed(1)} hrs)
        </span>
      </div>

      <div className="card" style={{margin:0}}>
        <div className="table-wrap">
          <table className="data-table" style={{padding:'0 20px'}}>
            <thead><tr><th>Date</th><th>Customer</th><th>Description</th><th>Duration</th><th>Status</th><th></th></tr></thead>
            <tbody>
              {visible.length === 0 && <tr><td colSpan={6}><div className="empty-state">No time entries</div></td></tr>}
              {visible.map(e => (
                <tr key={e.id}>
                  <td className="mono">{fmtDate(e.started_at)}</td>
                  <td>{e.company_name || <span className="muted">—</span>}</td>
                  <td>{e.description || <span className="muted">—</span>}</td>
                  <td className="mono">{fmt(e.duration_minutes || 0)}</td>
                  <td><span className={`status ${e.invoiced ? 'status--paid' : 'status--pending'}`}>{e.invoiced ? 'invoiced' : 'open'}</span></td>
                  <td>
                    {!e.invoiced && (
                      <button className="btn btn--danger btn--sm" onClick={() => deleteEntry(e.id)}>Del</button>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {manualModal && <ManualModal companies={companies} onSave={() => { load(); setManualModal(false); }} onClose={() => setManualModal(false)} />}
    </div>
  );
}

function ManualModal({ companies, onSave, onClose }) {
  const [form, setForm] = useState({ company_id:'', description:'', started_at: new Date().toISOString().slice(0,16), duration_minutes:60 });
  const [busy, setBusy] = useState(false);
  const { toast } = useApp();
  const f = k => e => setForm(p => ({ ...p, [k]: e.target.value }));

  async function save(e) {
    e.preventDefault(); setBusy(true);
    try {
      await API.post('/time', { ...form, started_at: new Date(form.started_at).toISOString(), duration_minutes: Number(form.duration_minutes) });
      toast('Entry logged'); onSave();
    } catch (e) { toast(e.error || 'Error', 'error'); }
    finally { setBusy(false); }
  }

  return (
    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="modal">
        <div className="modal-head"><span className="modal-title">Manual time entry</span><button className="modal-close" onClick={onClose}>×</button></div>
        <form onSubmit={save}>
          <div className="modal-body">
            <div className="form-grid">
              <div className="field field--full">
                <label className="field-label">Customer</label>
                <select className="field-select" value={form.company_id} onChange={f('company_id')}>
                  <option value="">— none —</option>
                  {companies.map(co => <option key={co.id} value={co.id}>{co.name}</option>)}
                </select>
              </div>
              <div className="field field--full">
                <label className="field-label">Description</label>
                <input className="field-input" value={form.description} onChange={f('description')} />
              </div>
              <div className="field">
                <label className="field-label">Date / time</label>
                <input className="field-input" type="datetime-local" value={form.started_at} onChange={f('started_at')} />
              </div>
              <div className="field">
                <label className="field-label">Duration (minutes)</label>
                <input className="field-input" type="number" min={1} value={form.duration_minutes} onChange={f('duration_minutes')} />
              </div>
            </div>
          </div>
          <div className="modal-foot">
            <button type="button" className="btn btn--ghost" onClick={onClose}>Cancel</button>
            <button type="submit" className="btn btn--primary" disabled={busy}>{busy?'Saving…':'Log entry'}</button>
          </div>
        </form>
      </div>
    </div>
  );
}
window.TimeTracker = TimeTracker;