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

const fmtEur = v => v == null ? '€0,00' : `€${Number(v).toLocaleString('nl-NL', { minimumFractionDigits:2, maximumFractionDigits:2 })}`;
const year = new Date().getFullYear();
const quarter = Math.ceil((new Date().getMonth()+1)/3);

function BTWVAT() {
  const [period, setPeriod]   = useState('quarter');
  const [qNum, setQNum]       = useState(quarter);
  const [yearN, setYearN]     = useState(year);
  const [monthN, setMonthN]   = useState(new Date().getMonth()+1);
  const [data, setData]       = useState(null);
  const [loading, setLoading] = useState(false);

  async function load() {
    setLoading(true);
    const params = new URLSearchParams({ period, year: yearN });
    if (period === 'quarter') params.set('quarter', qNum);
    if (period === 'month')   params.set('month',   monthN);
    API.get(`/btw?${params}`)
      .then(setData)
      .catch(() => {})
      .finally(() => setLoading(false));
  }

  useEffect(() => { load(); }, [period, qNum, yearN, monthN]);

  const fmtEurAbs = v => v == null ? '€0,00' : `€${Math.abs(Number(v)).toLocaleString('nl-NL', { minimumFractionDigits:2, maximumFractionDigits:2 })}`;

  const periodLabel = period === 'month'
    ? `${['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][monthN-1]} ${yearN}`
    : period === 'quarter' ? `Q${qNum} ${yearN}` : `FY ${yearN}`;

  return (
    <div className="page page-sm">
      <div className="page-header">
        <div>
          <h1 className="page-title">BTW / VAT</h1>
          <div className="page-subtitle">OB aangifte summary — {periodLabel}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn--ghost" onClick={() => {
            if (!data) return;
            const lines = [
              `BTW aangifte — ${periodLabel}`,
              ``,
              `1a  Omzet (excl. BTW):            ${fmtEur(data.revenue)}`,
              `1b  BTW ontvangen (21%):           ${fmtEur(data.btw_collected)}`,
            ];
            if (data.rc_count > 0) lines.push(
              `4a  Diensten buitenland (verlegd): ${fmtEur(data.rc_base)}`,
              `    BTW verlegd (21% over 4a):     ${fmtEur(data.btw_4a)}`,
            );
            lines.push(
              `5b  Voorbelasting:                 -${fmtEurAbs(data.btw_paid)}`,
              ``,
              `Saldo (te betalen):               ${fmtEur(data.afdracht)}`,
            );
            navigator.clipboard.writeText(lines.join('\n')).catch(() => {});
            alert('Copied to clipboard');
          }}>Copy for Belastingdienst</button>
        </div>
      </div>

      <div style={{display:'flex',gap:12,marginBottom:24,flexWrap:'wrap',alignItems:'flex-end'}}>
        <div className="field" style={{marginBottom:0}}>
          <label className="field-label">Period</label>
          <select className="field-select" value={period} onChange={e => setPeriod(e.target.value)} style={{width:140}}>
            <option value="month">Monthly</option>
            <option value="quarter">Quarterly</option>
            <option value="year">Yearly</option>
          </select>
        </div>
        {period === 'quarter' && (
          <div className="field" style={{marginBottom:0}}>
            <label className="field-label">Quarter</label>
            <select className="field-select" value={qNum} onChange={e => setQNum(Number(e.target.value))} style={{width:80}}>
              <option value={1}>Q1</option><option value={2}>Q2</option><option value={3}>Q3</option><option value={4}>Q4</option>
            </select>
          </div>
        )}
        {period === 'month' && (
          <div className="field" style={{marginBottom:0}}>
            <label className="field-label">Month</label>
            <select className="field-select" value={monthN} onChange={e => setMonthN(Number(e.target.value))} style={{width:110}}>
              {['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].map((m,i) => <option key={i+1} value={i+1}>{m}</option>)}
            </select>
          </div>
        )}
        <div className="field" style={{marginBottom:0}}>
          <label className="field-label">Year</label>
          <select className="field-select" value={yearN} onChange={e => setYearN(Number(e.target.value))} style={{width:90}}>
            {[year-1, year, year+1].map(y => <option key={y} value={y}>{y}</option>)}
          </select>
        </div>
      </div>

      {loading && <div className="empty-state">Calculating…</div>}

      {data && !loading && (
        <>
          <div className="stat-grid" style={{gridTemplateColumns:'1fr 1fr'}}>
            <div className="stat-cell">
              <div className="stat-label">Omzet excl. BTW</div>
              <div className="stat-value signal">{fmtEur(data.revenue)}</div>
              <div className="stat-sub">{data.outbound_count} invoice{data.outbound_count !== 1 ? 's' : ''}</div>
            </div>
            <div className="stat-cell">
              <div className="stat-label">BTW ontvangen (1b)</div>
              <div className="stat-value">{fmtEur(data.btw_collected)}</div>
              <div className="stat-sub">collected from customers</div>
            </div>
            <div className="stat-cell">
              <div className="stat-label">Voorbelasting (5b)</div>
              <div className="stat-value">{fmtEur(data.btw_paid)}</div>
              <div className="stat-sub">
                {data.inbound_count} supplier invoice{data.inbound_count !== 1 ? 's' : ''}
                {data.rc_count > 0 && <span style={{color:'var(--signal)',marginLeft:4}}>+{data.rc_count} verlegd</span>}
              </div>
            </div>
            <div className="stat-cell">
              <div className="stat-label">Te betalen saldo</div>
              <div className={`stat-value ${data.afdracht > 0 ? 'ember' : 'signal'}`}>{fmtEur(data.afdracht)}</div>
              <div className="stat-sub">to Belastingdienst</div>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><span className="card-title">OB aangifte — rubriek overzicht</span></div>
            <div className="card-body">
              <table className="data-table">
                <tbody>
                  <tr>
                    <td className="mono">1a</td>
                    <td>Leveringen/diensten belast met hoog tarief (21%)</td>
                    <td className="mono" style={{textAlign:'right'}}>{fmtEur(data.revenue)}</td>
                  </tr>
                  <tr>
                    <td className="mono">1b</td>
                    <td>BTW verschuldigd over 1a</td>
                    <td className="mono" style={{textAlign:'right'}}>+{fmtEurAbs(data.btw_collected)}</td>
                  </tr>
                  {data.rc_count > 0 && <>
                    <tr style={{background:'rgba(111,227,209,0.04)'}}>
                      <td className="mono">4a</td>
                      <td>
                        Diensten afkomstig uit het buitenland — BTW verlegd
                        <span style={{fontSize:10,marginLeft:6,color:'var(--fg-subtle)',fontFamily:'var(--font-mono)'}}>({data.rc_count} invoice{data.rc_count!==1?'s':''})</span>
                      </td>
                      <td className="mono" style={{textAlign:'right'}}>{fmtEur(data.rc_base)}</td>
                    </tr>
                    <tr style={{background:'rgba(111,227,209,0.04)'}}>
                      <td className="mono"></td>
                      <td style={{paddingLeft:24,color:'var(--fg-subtle)',fontSize:13}}>BTW verschuldigd over 4a (21% — te verleggen)</td>
                      <td className="mono" style={{textAlign:'right'}}>+{fmtEurAbs(data.btw_4a)}</td>
                    </tr>
                  </>}
                  <tr>
                    <td className="mono">5b</td>
                    <td>
                      Voorbelasting — BTW op inkopen
                      {data.rc_count > 0 && <span style={{fontSize:11,marginLeft:6,color:'var(--fg-subtle)'}}>incl. {fmtEur(data.btw_4a)} reverse charge</span>}
                    </td>
                    <td className="mono" style={{textAlign:'right'}}>-{fmtEurAbs(data.btw_paid)}</td>
                  </tr>
                  <tr style={{borderTop:'2px solid var(--border-strong)'}}>
                    <td className="mono"></td>
                    <td style={{fontWeight:600}}>Saldo (te betalen / terug)</td>
                    <td className="mono" style={{textAlign:'right',fontWeight:600,color:data.afdracht>0?'var(--ember)':'var(--signal)'}}>{fmtEur(data.afdracht)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <div className="card" style={{borderColor: data.kor_ytd > 17000 ? 'rgba(255,107,107,0.3)' : 'var(--border)'}}>
            <div className="card-body">
              <div style={{display:'flex',justifyContent:'space-between',marginBottom:8}}>
                <span style={{fontSize:12,fontFamily:'var(--font-mono)',color:'var(--fg-subtle)',textTransform:'uppercase',letterSpacing:'0.1em'}}>KOR drempel {yearN}</span>
                <span className="text-mono">{fmtEur(data.kor_ytd)} / €20,000</span>
              </div>
              <div style={{height:4,background:'var(--night-elev-3)',borderRadius:2}}>
                <div style={{height:'100%',width:`${Math.min((data.kor_ytd/20000)*100,100)}%`,background:data.kor_ytd>17000?'var(--status-negative)':'var(--signal)',borderRadius:2}} />
              </div>
              {data.kor_ytd > 17000 && <div style={{marginTop:8,fontSize:12,color:'var(--status-negative)'}}>⚠ Approaching €20,000 KOR threshold — if exceeded, BTW obligation applies for full year</div>}
              {data.kor_ytd <= 17000 && <div style={{marginTop:8,fontSize:11,color:'var(--fg-subtle)'}}>Below KOR threshold. If revenue stays under €20,000 for {yearN}, BTW exemption may apply.</div>}
            </div>
          </div>
        </>
      )}
    </div>
  );
}
window.BTWVAT = BTWVAT;