// Analytics dashboard — charts: bar (sales vs expense), area (balance), donut, leaderboard
function AnalyticsView(){
  const data = CASHFLOW.slice(0,14);
  const totals = {
    sales:   data.reduce((s,r)=>s+r.sales,0),
    expense: data.reduce((s,r)=>s+r.expense,0),
    interest:data.reduce((s,r)=>s+r.interest,0),
    chq:     data.reduce((s,r)=>s+r.payChq,0),
    mni:     data.reduce((s,r)=>s+r.payMNI,0),
    js:      data.reduce((s,r)=>s+r.payJS,0),
  };
  const net = totals.sales - totals.expense - totals.interest;
  const [tab, setTab] = useState('overview');

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-title">Analytics Dashboard</div>
          <div className="page-sub">Cash flow & expense breakdown — last 14 days</div>
        </div>
        <div className="row" style={{gap:8}}>
          <div className="seg">
            <button className={tab==='overview'?'on':''} onClick={()=>setTab('overview')}>Overview</button>
            <button className={tab==='detail'?'on':''} onClick={()=>setTab('detail')}>Detail</button>
            <button className={tab==='forecast'?'on':''} onClick={()=>setTab('forecast')}>Forecast</button>
          </div>
          <button className="btn primary" onClick={()=>{
            const head = ['Date','Sales','Expense','Interest','Pay Cheque','Pay MNI','Pay JS','Total','Cash Balance'];
            const rows = data.map(r=>[r.date,r.sales,r.expense,r.interest,r.payChq,r.payMNI,r.payJS,r.totalAmount,r.cashBalance].map(v=>typeof v==='number'?v.toFixed(2):v));
            window.downloadCSV('analytics_report.csv',[head,...rows]);
            window.toast('Analytics report downloaded',{tone:'success'});
          }}><I.Download size={14}/> Report</button>
        </div>
      </div>

      <div className="kpi-grid">
        <StatBlock tone="green"   label="Total Sales"    value={totals.sales}    delta="+8.1%" dir="up"/>
        <StatBlock tone="red"     label="Total Expense"  value={totals.expense}  delta="-2.3%" dir="down"/>
        <StatBlock tone="amber"   label="Total Interest" value={totals.interest} delta="+4.7%" dir="up"/>
        <StatBlock tone="blue"    label="Net Cash Flow"  value={net}             delta="+15.2%" dir="up" hi/>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:18}}>
        {/* Bar chart */}
        <div className="card chart-card">
          <div className="card-head" style={{padding:0,border:0,marginBottom:8}}>
            <div className="card-title">Sales vs Expense vs Interest</div>
            <div className="row" style={{gap:14,fontSize:12}}>
              <Legend color="#16a34a" label="Sales"/>
              <Legend color="#dc2626" label="Expense"/>
              <Legend color="#d97706" label="Interest"/>
            </div>
          </div>
          <BarChart data={data} keys={['sales','expense','interest']} colors={['#16a34a','#dc2626','#d97706']}/>
        </div>

        {/* Donut */}
        <div className="card chart-card">
          <div className="card-head" style={{padding:0,border:0,marginBottom:8}}>
            <div className="card-title">Payment Mix</div>
            <span className="chip">Last 14d</span>
          </div>
          <DonutChart segs={[
            {label:'Pay MNI',    value:totals.mni, color:'#1f2a8e'},
            {label:'Pay JS',     value:totals.js,  color:'#2cb8b0'},
            {label:'Pay Cheque', value:totals.chq, color:'#7c6eff'},
          ]}/>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:18,marginTop:18}}>
        {/* Area / Balance trend */}
        <div className="card chart-card">
          <div className="card-head" style={{padding:0,border:0,marginBottom:8}}>
            <div className="card-title">Cash Balance Trend</div>
            <span className="chip green"><I.TrendUp size={11}/> Healthy</span>
          </div>
          <AreaChart data={data.map(r=>r.cashBalance)} labels={data.map(r=>r.date)} color="#1f2a8e"/>
        </div>

        {/* Department leaderboard */}
        <div className="card">
          <div className="card-head">
            <div className="card-title">Top Departments</div>
            <span className="chip">Spend</span>
          </div>
          <div className="card-body">
            {[
              { name:'การเงินและการบัญชี', amt: 1240500, pct: 92, color:'#1f2a8e' },
              { name:'ฝ่ายปฏิบัติการ',      amt: 980200,  pct: 74, color:'#2cb8b0' },
              { name:'ฝ่ายขาย',            amt: 645800,  pct: 52, color:'#7c6eff' },
              { name:'ฝ่ายบุคคล',          amt: 312400,  pct: 28, color:'#f59e0b' },
              { name:'IT & Systems',       amt: 198100,  pct: 18, color:'#10b981' },
            ].map((d,i)=>(
              <div key={i} style={{margin:'12px 0'}}>
                <div className="row between" style={{marginBottom:6}}>
                  <span className="thai" style={{fontSize:13,fontWeight:600}}>{d.name}</span>
                  <span className="mono" style={{fontSize:12,fontWeight:700}}>{fmt(d.amt,0)}</span>
                </div>
                <div style={{height:8,background:'#eef1f8',borderRadius:8,overflow:'hidden'}}>
                  <div style={{
                    width:d.pct+'%',height:'100%',
                    background:`linear-gradient(90deg, ${d.color}, ${d.color}aa)`,
                    transition:'width 1s ease',
                  }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function StatBlock({ tone, label, value, delta, dir, hi }){
  return (
    <div className={"kpi "+tone}>
      <div className="label"><span>{label}</span><span className="cur">THB</span></div>
      <div className="value mono">{fmt(value)}</div>
      <div className="foot">
        <span className={"delta "+dir}>
          {dir==='up' ? <I.TrendUp size={12}/> : <I.TrendDown size={12}/>}
          {delta}
        </span>
        {hi && <span className="chip" style={{fontSize:10}}>Net</span>}
      </div>
    </div>
  );
}

function Legend({ color, label }){
  return <span className="row" style={{gap:6}}><span style={{width:10,height:10,borderRadius:3,background:color,display:'inline-block'}}/>{label}</span>;
}

function BarChart({ data, keys, colors }){
  const w = 720, h = 240, pad = { l:48, r:16, t:14, b:34 };
  const max = Math.max(...data.flatMap(d=>keys.map(k=>d[k])));
  const groupW = (w-pad.l-pad.r)/data.length;
  const barW = groupW/(keys.length+1);
  const yScale = v => h-pad.b - (v/max)*(h-pad.t-pad.b);
  const ticks = 5;
  return (
    <svg className="chart" viewBox={`0 0 ${w} ${h}`}>
      {/* grid */}
      {Array.from({length:ticks+1}).map((_,i)=>{
        const y = pad.t + ((h-pad.t-pad.b)/ticks)*i;
        return <g key={i}>
          <line x1={pad.l} x2={w-pad.r} y1={y} y2={y} stroke="#eef1f8"/>
          <text x={pad.l-8} y={y+4} fontSize="10" fill="#7b87a8" textAnchor="end" fontFamily="Anuphan">
            {fmtCompact(Math.round(max-(max/ticks)*i))}
          </text>
        </g>;
      })}
      {data.map((d,i)=>{
        const gx = pad.l + i*groupW + groupW*0.1;
        return (
          <g key={i}>
            {keys.map((k,j)=>{
              const v = d[k];
              const y = yScale(v);
              const x = gx + j*barW;
              return (
                <rect key={k} x={x} y={y} width={barW*.85} height={h-pad.b-y}
                      fill={colors[j]} opacity=".92" rx="2">
                  <title>{k}: {fmt(v)}</title>
                </rect>
              );
            })}
            <text x={gx + (keys.length*barW)/2} y={h-pad.b+16} fontSize="10" fill="#7b87a8"
                  textAnchor="middle" fontFamily="Anuphan">{d.date.slice(0,-3)}</text>
          </g>
        );
      })}
    </svg>
  );
}

function AreaChart({ data, labels, color }){
  const w = 720, h = 240, pad = { l:48, r:16, t:14, b:34 };
  const max = Math.max(...data), min = Math.min(...data, 0);
  const range = max-min || 1;
  const stepX = (w-pad.l-pad.r)/(data.length-1);
  const pts = data.map((v,i)=>[pad.l+i*stepX, h-pad.b - ((v-min)/range)*(h-pad.t-pad.b)]);
  const d = pts.map((p,i)=> (i?'L':'M')+p[0]+' '+p[1]).join(' ');
  const area = d + ` L ${pts[pts.length-1][0]} ${h-pad.b} L ${pts[0][0]} ${h-pad.b} Z`;
  return (
    <svg className="chart" viewBox={`0 0 ${w} ${h}`}>
      <defs>
        <linearGradient id="ar" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor={color} stopOpacity=".45"/>
          <stop offset="1" stopColor={color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      {[0,.25,.5,.75,1].map((t,i)=>{
        const y = pad.t + (h-pad.t-pad.b)*t;
        return <line key={i} x1={pad.l} x2={w-pad.r} y1={y} y2={y} stroke="#eef1f8"/>;
      })}
      <path d={area} fill="url(#ar)"/>
      <path d={d} fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
      {pts.map((p,i)=> i%2===0 ? (
        <g key={i}>
          <circle cx={p[0]} cy={p[1]} r="3" fill="#fff" stroke={color} strokeWidth="2"/>
          <text x={p[0]} y={h-pad.b+16} fontSize="10" fill="#7b87a8" textAnchor="middle" fontFamily="Anuphan">{labels[i].slice(0,-3)}</text>
        </g>) : null)}
    </svg>
  );
}

function DonutChart({ segs }){
  const total = segs.reduce((s,x)=>s+x.value,0);
  const R = 70, r = 46, cx = 110, cy = 110;
  let acc = 0;
  const arcs = segs.map((s,i)=>{
    const a0 = acc/total * Math.PI*2 - Math.PI/2;
    acc += s.value;
    const a1 = acc/total * Math.PI*2 - Math.PI/2;
    const large = (a1-a0) > Math.PI ? 1 : 0;
    const x0 = cx+R*Math.cos(a0), y0 = cy+R*Math.sin(a0);
    const x1 = cx+R*Math.cos(a1), y1 = cy+R*Math.sin(a1);
    const xi1 = cx+r*Math.cos(a1), yi1 = cy+r*Math.sin(a1);
    const xi0 = cx+r*Math.cos(a0), yi0 = cy+r*Math.sin(a0);
    return <path key={i} fill={s.color} opacity=".95"
      d={`M ${x0} ${y0} A ${R} ${R} 0 ${large} 1 ${x1} ${y1} L ${xi1} ${yi1} A ${r} ${r} 0 ${large} 0 ${xi0} ${yi0} Z`}/>;
  });
  return (
    <div>
      <div style={{display:'flex',alignItems:'center',gap:18}}>
        <svg viewBox="0 0 220 220" width="220" height="220">
          {arcs}
          <text x="110" y="106" textAnchor="middle" fontWeight="700" fontSize="13" fill="#7b87a8">Total</text>
          <text x="110" y="128" textAnchor="middle" fontWeight="800" fontSize="18" fill="#0b1330" fontFamily="Anuphan">{fmtCompact(total)}</text>
        </svg>
        <div style={{flex:1}}>
          {segs.map((s,i)=>(
            <div key={i} className="row between" style={{margin:'10px 0',gap:10}}>
              <span className="row" style={{gap:8}}>
                <span style={{width:10,height:10,borderRadius:3,background:s.color}}/>
                <span style={{fontSize:13,fontWeight:600}}>{s.label}</span>
              </span>
              <span className="mono" style={{fontSize:12,fontWeight:700}}>{((s.value/total)*100).toFixed(1)}%</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.AnalyticsView = AnalyticsView;