// Approvals — unified approval workflow for design, content, invoice, leave, etc.
(() => {
const { Card, Badge } = window.TechyFuelOSDesignSystem_be0222;

const TYPES = [['design','Design'],['content','Content'],['invoice','Invoice'],['leave','Leave'],['other','Other']];
const TYPE_LABEL = Object.fromEntries(TYPES);
const EMPTY = { type: 'design', title: '', detail: '', link_url: '' };

function fmtWhen(ts) {
  if (!ts) return '';
  const d = new Date(String(ts).replace(' ', 'T') + (String(ts).endsWith('Z') ? '' : 'Z'));
  return isNaN(d) ? '' : d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' });
}

function Approvals() {
  useLucide();
  const [rows, setRows] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [filter, setFilter] = React.useState('pending');
  const [modalOpen, setModalOpen] = React.useState(false);
  const [form, setForm] = React.useState(EMPTY);
  const [saving, setSaving] = React.useState(false);
  const canReview = ['owner','admin','manager'].includes(window.TFMyRole);

  const load = React.useCallback(() => {
    if (!window.API || !window.API.getApprovals) { setLoading(false); return; }
    setLoading(true);
    window.API.getApprovals().then(r => { if (r.data) setRows(r.data); }).catch(()=>{}).finally(()=>setLoading(false));
  }, []);
  React.useEffect(() => { load(); }, [load]);

  function set(k,v){ setForm(f=>({ ...f, [k]:v })); }
  async function submit() {
    if (!form.title.trim() || !window.API) return;
    setSaving(true);
    try { const { data } = await window.API.createApproval(form); if (data) setRows(prev => [data, ...prev]); setModalOpen(false); setForm(EMPTY); }
    catch { alert('Could not submit approval.'); }
    setSaving(false);
  }
  async function review(a, status) {
    setRows(prev => prev.map(x => x.id===a.id?{...x,status}:x));
    try { await window.API.reviewApproval(a.id, { status }); } catch { load(); }
  }
  async function remove(a) {
    if (!window.confirm('Delete this approval?')) return;
    setRows(prev => prev.filter(x => x.id !== a.id));
    try { await window.API.deleteApproval(a.id); } catch {}
  }

  const filtered = filter === 'all' ? rows : rows.filter(r => r.status === filter);
  const pendingCount = rows.filter(r => r.status === 'pending').length;

  return (
    <div style={{ padding: 24, maxWidth: 1100, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 18, flexWrap: 'wrap', gap: 12 }}>
        <div>
          <h1 style={{ fontSize: 'var(--text-3xl)', fontWeight: 'var(--fw-extrabold)', letterSpacing: '-0.02em' }}>Approvals</h1>
          <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', marginTop: 2 }}>Design, content, invoices & leave — request and approve in one place.</p>
        </div>
        <button onClick={() => { setForm(EMPTY); setModalOpen(true); }} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, height: 38, padding: '0 16px', background: 'var(--blue-600)', color: '#fff', border: 'none', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 'var(--fw-semibold)', cursor: 'pointer' }}>
          <Icon name="plus" size={16} /> Request approval
        </button>
      </div>

      <div style={{ display: 'flex', gap: 8, marginBottom: 14, flexWrap: 'wrap' }}>
        {[['pending',`Pending${pendingCount?` (${pendingCount})`:''}`],['approved','Approved'],['rejected','Rejected'],['all','All']].map(([v,l]) => (
          <button key={v} onClick={() => setFilter(v)} style={{ height: 32, padding: '0 12px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', fontWeight: 'var(--fw-semibold)', background: filter===v?'var(--blue-50)':'var(--slate-0)', color: filter===v?'var(--blue-700)':'var(--text-muted)' }}>{l}</button>
        ))}
      </div>

      <Card padding="none">
        <div style={{ overflowX: 'auto' }} data-scroll-x>
          <table style={{ width: '100%', minWidth: 680, borderCollapse: 'collapse' }}>
            <thead><tr style={{ borderBottom: '1px solid var(--border-subtle)' }}>
              {['Title','Type','Requested by','When','Status',''].map((h,i)=>(<th key={i} style={{ textAlign: 'left', padding: '11px 14px', fontSize: 'var(--text-2xs)', fontWeight: 'var(--fw-bold)', textTransform: 'uppercase', letterSpacing:'0.05em', color: 'var(--text-subtle)', whiteSpace:'nowrap' }}>{h}</th>))}
            </tr></thead>
            <tbody>
              {loading && <tr><td colSpan={6} style={{ padding: 28, textAlign:'center', color:'var(--text-muted)', fontSize:'var(--text-sm)' }}>Loading…</td></tr>}
              {!loading && filtered.length===0 && <tr><td colSpan={6} style={{ padding: 40, textAlign:'center', color:'var(--text-muted)', fontSize:'var(--text-sm)' }}>No {filter==='all'?'':filter} approvals.</td></tr>}
              {!loading && filtered.map(a => (
                <tr key={a.id} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', fontWeight:'var(--fw-semibold)', color: 'var(--text-strong)' }}>
                    {a.link_url ? <a href={a.link_url} target="_blank" rel="noreferrer" style={{ color: 'var(--blue-600)', textDecoration: 'none' }}>{a.title} ↗</a> : a.title}
                    {a.detail && <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', fontWeight: 'var(--fw-regular)', marginTop: 2 }}>{a.detail.slice(0,80)}</div>}
                  </td>
                  <td style={{ padding: '10px 14px' }}><Badge tone="neutral" size="sm">{TYPE_LABEL[a.type]||a.type}</Badge></td>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-sm)', color: 'var(--text-body)', whiteSpace:'nowrap' }}>{a.requested_by_name||'—'}</td>
                  <td style={{ padding: '10px 14px', fontSize: 'var(--text-xs)', color: 'var(--text-muted)', whiteSpace:'nowrap' }}>{fmtWhen(a.created_at)}</td>
                  <td style={{ padding: '10px 14px' }}><Badge tone={a.status==='approved'?'success':a.status==='rejected'?'danger':'warning'} size="sm">{a.status}</Badge></td>
                  <td style={{ padding: '10px 14px', textAlign:'right', whiteSpace:'nowrap' }}>
                    {canReview && a.status==='pending' && (
                      <div style={{ display:'inline-flex', gap:4 }}>
                        <button onClick={()=>review(a,'approved')} style={{ height: 28, padding: '0 10px', background: 'var(--green-600)', color:'#fff', border:'none', borderRadius:'var(--radius-sm)', cursor:'pointer', fontSize:'var(--text-xs)', fontWeight:'var(--fw-semibold)', fontFamily:'var(--font-sans)' }}>Approve</button>
                        <button onClick={()=>review(a,'rejected')} style={{ height: 28, padding: '0 10px', background: 'transparent', color:'var(--red-600)', border:'1px solid var(--red-200)', borderRadius:'var(--radius-sm)', cursor:'pointer', fontSize:'var(--text-xs)', fontWeight:'var(--fw-semibold)', fontFamily:'var(--font-sans)' }}>Reject</button>
                      </div>
                    )}
                    {canReview && a.status!=='pending' && <button onClick={()=>remove(a)} style={{ width:28, height:28, display:'inline-flex', alignItems:'center', justifyContent:'center', background:'transparent', border:'1px solid var(--red-200)', borderRadius:'var(--radius-sm)', cursor:'pointer', color:'var(--red-600)' }}><Icon name="trash-2" size={13} /></button>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>

      <Modal open={modalOpen} onClose={()=>setModalOpen(false)} title="Request approval" onSubmit={submit} loading={saving} submitLabel="Submit">
        <FormRow label="Type" required>
          <select style={FF.input} value={form.type} onChange={e=>set('type', e.target.value)}>
            {TYPES.map(([v,l]) => <option key={v} value={v}>{l}</option>)}
          </select>
        </FormRow>
        <FormRow label="Title" required><input style={FF.input} value={form.title} onChange={e=>set('title', e.target.value)} placeholder="e.g. Homepage banner design" /></FormRow>
        <FormRow label="Detail"><textarea style={{ ...FF.input, minHeight: 60, resize: 'vertical' }} value={form.detail} onChange={e=>set('detail', e.target.value)} placeholder="Context for the approver…" /></FormRow>
        <FormRow label="Link (file / preview)"><input style={FF.input} value={form.link_url} onChange={e=>set('link_url', e.target.value)} placeholder="https://…" /></FormRow>
      </Modal>
    </div>
  );
}
Object.assign(window, { Approvals });
})();