// Categories breakdown + bar chart + heatmap.

const PageCategories = () => {
  const { state, derived } = useAppState();
  const { categoryBreakdown, months } = derived;

  if (state.transactions.length === 0) {
    return (
      <div>
        <div className="topbar">
          <div>
            <h1 className="page-title">Categories</h1>
            <div className="page-sub">Where it all goes</div>
          </div>
        </div>
        <div className="empty">
          <div className="empty-icon"><ICat size={22}/></div>
          <h3 className="serif" style={{fontSize:22}}>No spending tracked yet</h3>
          <p>Add transactions to see where your money flows.</p>
        </div>
      </div>
    );
  }

  return (
    <div>
      <div className="topbar">
        <div>
          <h1 className="page-title">Categories</h1>
          <div className="page-sub">Spending broken down · {monthNames[today().getMonth()]} {today().getFullYear()}</div>
        </div>
      </div>

      <div className="grid" style={{gridTemplateColumns:'1fr 1fr', gap:20, marginBottom:20}}>
        <div className="card card-pad-lg fade-up">
          <div className="card-title">Distribution</div>
          <Donut data={categoryBreakdown} size={240}/>
        </div>
        <div className="card card-pad-lg fade-up" style={{animationDelay:'0.1s'}}>
          <div className="card-title">Income vs spending · 6 months</div>
          <BarChart months={months} width={420} height={240}/>
        </div>
      </div>

      <div className="card card-pad-lg fade-up" style={{marginBottom:20, animationDelay:'0.2s'}}>
        <div className="card-title">Categories ranked</div>
        <div style={{display:'flex', flexDirection:'column', gap:14}}>
          {categoryBreakdown.map((c, i) => (
            <div key={c.id} style={{animation:`fadeUp 0.4s ${i*0.05}s both`}}>
              <div className="row-between" style={{marginBottom:8}}>
                <div className="row" style={{gap:10}}>
                  <span className="dot" style={{background:`var(${c.cssVar})`, width:10, height:10}}></span>
                  <span style={{fontWeight:500, fontSize:14}}>{c.label}</span>
                  <span className="pill" style={{marginLeft:6}}>{(c.pct * 100).toFixed(1)}%</span>
                </div>
                <span className="mono" style={{fontWeight:500}}>{fmtZAR(c.amount, {cents:false})}</span>
              </div>
              <div className="progress-track" style={{height:10}}>
                <div className="progress-fill" style={{width:`${c.pct * 100}%`, background:`var(${c.cssVar})`}}/>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="card card-pad-lg fade-up" style={{animationDelay:'0.3s'}}>
        <div className="card-title row-between">
          <span>Spending heatmap · {today().getFullYear()}</span>
          <span className="row" style={{fontSize:11, color:'var(--ink-3)', gap:6}}>
            Less <span className="dot" style={{background:'oklch(0.96 0.005 250)', width:10, height:10, borderRadius:2}}></span>
            <span className="dot" style={{background:'oklch(0.85 0.07 30)', width:10, height:10, borderRadius:2}}></span>
            <span className="dot" style={{background:'oklch(0.65 0.13 30)', width:10, height:10, borderRadius:2}}></span> More
          </span>
        </div>
        <CalendarHeatmap year={today().getFullYear()}/>
      </div>
    </div>
  );
};

Object.assign(window, { PageCategories });