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

const fmtEur = v => v == null ? '—' : `€${Number(v).toLocaleString('nl-NL',{minimumFractionDigits:2,maximumFractionDigits:2})}`;
const fmtPct = v => v == null ? '—' : `${Number(v).toFixed(1)}%`;

const CAT_LABEL = {
  hosting:'Hosting', software:'Software', professional:'Professional services',
  travel:'Travel', office:'Office', marketing:'Marketing', hardware:'Hardware',
  subscriptions:'Subscriptions', other:'Other',
};

function StatCell({ label, value, sub, color }) {
  return (
    <div className="stat-cell" style={{flex:1}}>
      <div className="stat-label">{label}</div>
      <div className={`stat-value${color?' '+color:''}`}>{value}</div>
      {sub && <div style={{fontSize:11,fontFamily:'var(--font-mono)',color:'var(--fg-subtle)',marginTop:2}}>{sub}</div>}
    </div>
  );
}

function ProfitLoss() {
  const currentYear = new Date().getFullYear();
  const [year, setYear]       = useState(currentYear.toString());
  const [quarter, setQuarter] = useState('');
  const [data, setData]       = useState(null);
  const [loading, setLoading] = useState(false);
  const { toast } = useApp();

  const load = useCallback(() => {
    setLoading(true);
    const q = quarter ? `&quarter=${quarter}` : '';
    API.get(`/pl?year=${year}${q}`)
      .then(setData)
      .catch(() => toast('Could not load P&L data', 'error'))
      .finally(() => setLoading(false));
  }, [year, quarter]);

  useEffect(() => { load(); }, [load]);

  const years = Array.from({length:3}, (_,i) => (currentYear - i).toString());

  if (!data) return (
    <div className="page">
      <div className="page-header"><div><h1 className="page-title">Profit &amp; Loss</h1></div></div>
      <div className="empty-state" style={{marginTop:48}}>{loading ? 'Loading…' : 'No data'}</div>
    </div>
  );

  const { revenue, costs, net_profit, gross_margin_pct, period } = data;

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Profit &amp; Loss</h1>
          <div className="page-subtitle">
            {period.quarter ? `Q${period.quarter} ` : ''}{period.year} · {period.date_start} — {period.date_end}
          </div>
        </div>
        <div className="page-actions" style={{gap:8,display:'flex',alignItems:'center'}}>
          <select className="field-select" style={{fontSize:12,padding:'4px 8px'}} value={year} onChange={e => setYear(e.target.value)}>
            {years.map(y => <option key={y} value={y}>{y}</option>)}
          </select>
          <select className="field-select" style={{fontSize:12,padding:'4px 8px'}} value={quarter} onChange={e => setQuarter(e.target.value)}>
            <option value="">Full year</option>
            <option value="1">Q1</option><option value="2">Q2</option>
            <option value="3">Q3</option><option value="4">Q4</option>
          </select>
          <button className="btn btn--ghost btn--sm" onClick={load} disabled={loading}>↻</button>
        </div>
      </div>

      {/* Key metrics */}
      <div style={{display:'flex',gap:1,background:'var(--border)',border:'1px solid var(--border)',marginBottom:24}}>
        <StatCell label="Revenue" value={fmtEur(revenue.total)} sub={`${fmtEur(revenue.received)} received · ${fmtEur(revenue.outstanding)} open`} />
        <StatCell label="Total costs" value={fmtEur(costs.total)} sub={`${fmtEur(costs.vat_deductible)} BTW deductible`} />
        <StatCell label="Net profit" value={fmtEur(net_profit)} color={net_profit >= 0 ? 'signal' : 'danger'} />
        <StatCell label="Gross margin" value={fmtPct(gross_margin_pct)} />
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,marginBottom:24}}>

        {/* Revenue by customer */}
        <div className="card">
          <div className="card-head"><span className="card-title">Revenue by customer</span></div>
          <div style={{padding:'0 16px 16px'}}>
            {revenue.by_customer.length === 0 && <div className="empty-state" style={{fontSize:12}}>No revenue in this period</div>}
            {revenue.by_customer.map(r => (
              <div key={r.customer} style={{display:'flex',justifyContent:'space-between',padding:'6px 0',borderBottom:'1px solid var(--border)',fontSize:13}}>
                <span>{r.customer || '—'}</span>
                <span className="mono" style={{fontFamily:'var(--font-mono)'}}>{fmtEur(r.total)}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Costs by category */}
        <div className="card">
          <div className="card-head">
            <span className="card-title">Costs by category</span>
            <span style={{fontSize:11,fontFamily:'var(--font-mono)',color:'var(--fg-subtle)'}}>business-pct adjusted</span>
          </div>
          <div style={{padding:'0 16px 16px'}}>
            {costs.by_category.length === 0 && costs.depreciation === 0 && <div className="empty-state" style={{fontSize:12}}>No costs in this period</div>}
            {costs.by_category.map(c => {
              const pct = costs.total ? c.deductible / costs.total * 100 : 0;
              return (
                <div key={c.cat} style={{padding:'6px 0',borderBottom:'1px solid var(--border)'}}>
                  <div style={{display:'flex',justifyContent:'space-between',fontSize:13}}>
                    <span>{CAT_LABEL[c.cat] || c.cat}</span>
                    <span className="mono" style={{fontFamily:'var(--font-mono)'}}>{fmtEur(c.deductible)}</span>
                  </div>
                  <div style={{height:3,background:'var(--border)',marginTop:4,borderRadius:2}}>
                    <div style={{height:'100%',width:`${pct}%`,background:'var(--signal)',borderRadius:2,opacity:0.7}} />
                  </div>
                </div>
              );
            })}
            {costs.depreciation > 0 && (
              <div style={{display:'flex',justifyContent:'space-between',padding:'6px 0',fontSize:13,color:'var(--fg-subtle)'}}>
                <span>Depreciation</span>
                <span className="mono" style={{fontFamily:'var(--font-mono)'}}>{fmtEur(costs.depreciation)}</span>
              </div>
            )}
          </div>
        </div>

      </div>

      {/* Fixed assets table */}
      {costs.assets?.length > 0 && (
        <div className="card" style={{margin:0}}>
          <div className="card-head"><span className="card-title">Fixed assets — depreciation</span></div>
          <div className="table-wrap">
            <table className="data-table">
              <thead><tr><th>Description</th><th>Cost</th><th>Activated</th><th>Life (yrs)</th><th>Annual dep.</th></tr></thead>
              <tbody>
                {costs.assets.map((a, i) => (
                  <tr key={i}>
                    <td>{a.description}</td>
                    <td className="mono">{fmtEur(a.amount)}</td>
                    <td className="mono">{a.activation_date}</td>
                    <td className="mono">{a.useful_life_years || 3}</td>
                    <td className="mono">{fmtEur(a.annual_dep)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

    </div>
  );
}
window.ProfitLoss = ProfitLoss;