/* global React, PORTAL */
const { useState, useEffect } = React;

const fmtEur = v => `€${Number(v).toLocaleString('nl-NL',{minimumFractionDigits:2,maximumFractionDigits:2})}`;

function InvoiceDetail({ id, onBack }) {
  const [inv, setInv] = useState(null);

  useEffect(() => {
    PORTAL.get(`/invoices/${id}`).then(setInv).catch(()=>{});
  }, [id]);

  if (!inv) return <div style={{color:'var(--fg-subtle)',padding:24}}>Loading…</div>;

  const today = new Date().toISOString().slice(0,10);
  const isOverdue = inv.status==='sent' && inv.due_date < today;

  return (
    <div>
      <button className="btn btn--ghost" style={{marginBottom:20,fontSize:12}} onClick={onBack}>← Back to invoices</button>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:24}}>
        <div>
          <h1 className="page-title" style={{marginBottom:4}}>Invoice {inv.invoice_number}</h1>
          <span className={`status ${inv.status==='paid'?'status--paid':isOverdue?'status--overdue':'status--sent'}`}>
            {inv.status==='paid'?'paid':isOverdue?'overdue':'open'}
          </span>
        </div>
        <div style={{display:'flex',gap:8}}>
          <a href={`/api/portal/invoices/${id}/pdf`} target="_blank" rel="noreferrer" className="btn btn--ghost" style={{fontSize:12}}>Download PDF</a>
          <a href={`/api/portal/invoices/${id}/print`} target="_blank" rel="noreferrer" className="btn btn--ghost" style={{fontSize:12}}>Print</a>
        </div>
      </div>

      <div className="card">
        <div className="card-body">
          <table className="inv-meta-table">
            <tbody>
              <tr><td>Invoice date</td><td className="mono">{inv.invoice_date}</td></tr>
              <tr><td>Due date</td><td className="mono" style={{color:isOverdue?'var(--danger)':undefined}}>{inv.due_date}</td></tr>
              {inv.currency && <tr><td>Currency</td><td className="mono">{inv.currency || 'EUR'}</td></tr>}
            </tbody>
          </table>
        </div>
      </div>

      <div className="card">
        <div className="table-wrap">
          <table className="data-table">
            <thead><tr><th>Description</th><th style={{textAlign:'right'}}>Qty</th><th style={{textAlign:'right'}}>Price</th><th style={{textAlign:'right'}}>BTW</th><th style={{textAlign:'right'}}>Subtotal</th></tr></thead>
            <tbody>
              {(inv.lines||[]).map((l,i)=>(
                <tr key={i} style={{cursor:'default'}}>
                  <td>{l.description}</td>
                  <td className="mono" style={{textAlign:'right'}}>{l.quantity}</td>
                  <td className="mono" style={{textAlign:'right'}}>{fmtEur(l.unit_price)}</td>
                  <td className="mono" style={{textAlign:'right'}}>{Math.round(l.vat_rate*100)}%</td>
                  <td className="mono" style={{textAlign:'right'}}>{fmtEur(l.subtotal)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div style={{padding:'12px 20px',textAlign:'right',borderTop:'1px solid var(--border)'}}>
          <div style={{fontSize:12,color:'var(--fg-subtle)',marginBottom:2}}>Subtotal: {fmtEur(inv.subtotal)}</div>
          <div style={{fontSize:12,color:'var(--fg-subtle)',marginBottom:6}}>BTW: {fmtEur(inv.vat_amount)}</div>
          <div className="amount amount--total">{fmtEur(inv.total)}</div>
        </div>
      </div>

      {inv.notes && <div className="card"><div className="card-body" style={{fontSize:13,color:'var(--fg-muted)'}}>{inv.notes}</div></div>}
    </div>
  );
}

function Invoices({ initialId }) {
  const [invoices, setInvoices] = useState([]);
  const [detail, setDetail]     = useState(initialId || null);
  const today = new Date().toISOString().slice(0,10);

  useEffect(() => {
    PORTAL.get('/invoices').then(setInvoices).catch(()=>{});
  }, []);

  if (detail) return <InvoiceDetail id={detail} onBack={()=>setDetail(null)} />;

  return (
    <div>
      <h1 className="page-title">Invoices</h1>
      <div className="page-subtitle">Your invoice history</div>

      <div className="card" style={{margin:0}}>
        <div className="table-wrap">
          <table className="data-table">
            <thead><tr><th>Invoice</th><th>Date</th><th>Due</th><th style={{textAlign:'right'}}>Amount</th><th>Status</th></tr></thead>
            <tbody>
              {invoices.length===0 && <tr><td colSpan={5}><div className="empty-state">No invoices yet</div></td></tr>}
              {invoices.map(i=>{
                const isOverdue = i.status==='sent' && i.due_date<today;
                return (
                  <tr key={i.id} onClick={()=>setDetail(i.id)}>
                    <td className="mono" style={{fontWeight:500}}>{i.invoice_number}</td>
                    <td className="mono">{i.invoice_date}</td>
                    <td className="mono" style={{color:isOverdue?'var(--danger)':undefined}}>{i.due_date}</td>
                    <td className="mono" style={{textAlign:'right'}}>{fmtEur(i.total)}</td>
                    <td><span className={`status ${i.status==='paid'?'status--paid':isOverdue?'status--overdue':'status--sent'}`}>{i.status==='paid'?'paid':isOverdue?'overdue':'open'}</span></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}
window.Invoices = Invoices;