// ---------- Dashboard ----------
const { LineChart, Line, BarChart, Bar, AreaChart, Area, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } = Recharts;

function chartColors() {
  const cs = getComputedStyle(document.documentElement);
  return {
    accent: cs.getPropertyValue('--accent').trim() || '#C0603A',
    gold: cs.getPropertyValue('--gold').trim(),
    green: cs.getPropertyValue('--green').trim(),
    blue: cs.getPropertyValue('--blue').trim(),
    purple: cs.getPropertyValue('--purple').trim(),
    border: cs.getPropertyValue('--border').trim(),
    text: cs.getPropertyValue('--text').trim(),
    textDim: cs.getPropertyValue('--text-dim').trim(),
    card: cs.getPropertyValue('--card').trim(),
  };
}

function CustomTooltip({ active, payload, label, fmt }) {
  if (!active || !payload || !payload.length) return null;
  return (
    <div style={{background:'var(--card)',border:'1px solid var(--border2)',borderRadius:10,padding:'10px 14px',fontSize:12,boxShadow:'0 10px 30px -10px rgba(0,0,0,0.5)'}}>
      <div style={{fontFamily:'JetBrains Mono',fontSize:10,letterSpacing:'0.1em',textTransform:'uppercase',color:'var(--text-dim)',marginBottom:6}}>{label}</div>
      {payload.map((p,i) => (
        <div key={i} style={{display:'flex',justifyContent:'space-between',gap:20,marginTop:3}}>
          <span style={{color:'var(--text-dim)',display:'flex',alignItems:'center',gap:6}}>
            <span style={{width:8,height:8,borderRadius:2,background:p.color}}/>{p.name}
          </span>
          <span style={{fontWeight:500}}>{fmt ? fmt(p.value) : p.value}</span>
        </div>
      ))}
    </div>
  );
}

function Dashboard({ setPage, userObj, role }) {
  const { t } = useT();
  const [tick, setTick] = React.useState(0);
  React.useEffect(()=> {
    const h = () => setTick(x=>x+1);
    window.addEventListener('tweak-change', h);
    window.addEventListener('gh-admin-data', h);
    return ()=> {
      window.removeEventListener('tweak-change', h);
      window.removeEventListener('gh-admin-data', h);
    };
  },[]);
  const colors = chartColors();

  const todayStr = typeof window !== 'undefined'
    ? new Date().toISOString().slice(0, 10)
    : '2026-04-20';
  const batchList = (typeof window !== 'undefined' && window.BATCHES) ? window.BATCHES : [];
  const todayBatches = batchList.filter(b => (b.batch_date||'').slice(0,10) === todayStr);
  const todayProdKg = Math.round(todayBatches.reduce((s,b)=> s + (parseFloat(b.quantity_kg)||0), 0) * 10) / 10;

  const todaySales = SALES.filter(s => s.sale_date === todayStr);
  const todayScoops = todaySales.reduce((s,x) => s + x.quantity_scoops, 0);
  const monthRevenue = SALES.reduce((s,x) => s + x.amount_fcfa, 0);

  const activeEmployees = EMPLOYEES.filter(e => e.status === 'active').length;
  const lowStock = (window.INVENTORY || INVENTORY).filter(i => stockStatus(i) !== 'ok').length;

  const welcomeDate = new Date().toLocaleDateString('en-GB', { weekday:'long', day:'2-digit', month:'short', year:'numeric' });

  // Revenue this week vs last week (bar)
  const weekData = React.useMemo(() => {
    const days = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
    return days.map((d,i) => ({
      day: d,
      'This week': 120000 + Math.sin((i+tick)*0.8)*40000 + i*18000 + (i>=4 ? 60000 : 0),
      'Last week': 110000 + Math.cos(i*0.9)*35000 + i*15000 + (i>=4 ? 50000 : 0),
    }));
  }, [tick]);

  // Top flavors today
  const topFlavors = React.useMemo(()=>{
    const map = {};
    SALES.filter(s => s.sale_date >= '2026-04-14').forEach(s => {
      map[s.flavor] = (map[s.flavor] || 0) + s.quantity_scoops;
    });
    return Object.entries(map).map(([name, scoops]) => ({ name, scoops })).sort((a,b)=>b.scoops-a.scoops).slice(0,5);
  }, []);

  return (
    <div style={{display:'flex',flexDirection:'column',gap:24}}>
      {/* Welcome */}
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',flexWrap:'wrap',gap:20}}>
        <div>
          <div style={{fontFamily:'JetBrains Mono',fontSize:11,letterSpacing:'0.2em',textTransform:'uppercase',color:'var(--accent)',marginBottom:6}}>✦ {welcomeDate} · N&apos;Djamena · <span className="mono">{todayStr}</span></div>
          <h2 style={{fontSize:36,fontWeight:400,letterSpacing:'-0.015em'}}>
            {t('admin.welcome')} <span style={{fontStyle:'italic',color:'var(--accent)'}}>{userObj.full_name.split(' ')[0]}</span>
          </h2>
          <div style={{color:'var(--text-dim)',fontSize:14,marginTop:4}}>{t('admin.welcome_sub')}</div>
        </div>
        <div style={{display:'flex',gap:10}}>
          <button className="btn btn-ghost btn-sm"><Icon.Download size={13}/> Export report</button>
          <button className="btn btn-primary btn-sm" onClick={()=>setPage('production')}><Icon.Plus size={13}/> Log batch</button>
        </div>
      </div>

      {/* KPIs */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(220px,1fr))',gap:16}}>
        <KPI label="Revenue · month" value={fmtFCFA(monthRevenue)} delta={18} icon={Icon.DollarSign} color="var(--accent)" spark="M0 30 L14 25 L28 27 L42 18 L56 22 L70 12 L84 16 L100 6"/>
        <KPI label="Production · today (kg)" value={fmtNumber(todayProdKg)} delta={todayBatches.length ? todayBatches.length + ' batches' : '—'} icon={Icon.Package} color="var(--gold)" spark="M0 20 L14 22 L28 18 L42 14 L56 12 L70 16 L84 10 L100 8"/>
        <KPI label="Scoops · today" value={fmtNumber(todayScoops)} delta={6} icon={Icon.IceCream} color="var(--purple)" spark="M0 20 L14 22 L28 18 L42 14 L56 12 L70 16 L84 10 L100 8"/>
        <KPI label="Active employees" value={activeEmployees} delta={0} icon={Icon.Users} color="var(--green)"/>
        <KPI label="Inventory alerts" value={lowStock} delta={-25} icon={Icon.AlertTriangle} color="var(--red)"/>
      </div>

      {/* Chart + activity */}
      <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:16}} className="dash-row">
        <div className="card" style={{padding:22}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:18}}>
            <div>
              <h3 style={{fontSize:18,fontWeight:400}}>Weekly revenue</h3>
              <div style={{fontSize:12,color:'var(--text-dim)'}}>This week vs last week · FCFA</div>
            </div>
            <div className="chip" style={{fontFamily:'JetBrains Mono',fontSize:10,letterSpacing:'0.1em'}}>LIVE · updates on tweak</div>
          </div>
          <div style={{height:260}}>
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={weekData} barGap={4}>
                <CartesianGrid stroke={colors.border} strokeDasharray="3 3" vertical={false}/>
                <XAxis dataKey="day" stroke={colors.textDim} fontSize={11} tickLine={false} axisLine={false}/>
                <YAxis stroke={colors.textDim} fontSize={11} tickLine={false} axisLine={false} tickFormatter={v=>`${(v/1000).toFixed(0)}k`}/>
                <Tooltip content={<CustomTooltip fmt={fmtFCFA}/>} cursor={{fill:colors.border}}/>
                <Legend iconType="circle" wrapperStyle={{fontSize:12,paddingTop:10}}/>
                <Bar dataKey="Last week" fill={colors.border} radius={[6,6,0,0]}/>
                <Bar dataKey="This week" fill={colors.accent} radius={[6,6,0,0]}/>
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>
        <div className="card" style={{padding:22,display:'flex',flexDirection:'column'}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
            <h3 style={{fontSize:18,fontWeight:400}}>Activity</h3>
            <button style={{fontSize:12,color:'var(--accent)'}}>{t('common.view_all')}</button>
          </div>
          <div style={{display:'flex',flexDirection:'column',gap:14,flex:1,overflow:'auto'}}>
            {AUDIT.slice(0,6).map(a => (
              <div key={a.id} style={{display:'flex',gap:12}}>
                <div style={{width:30,height:30,borderRadius:'50%',background:'var(--accent-dim)',border:'1px solid var(--accent-border)',color:'var(--accent)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:10,fontWeight:600,flexShrink:0}}>
                  {a.user.split(' ').map(p=>p[0]).join('').slice(0,2)}
                </div>
                <div style={{minWidth:0,flex:1}}>
                  <div style={{fontSize:12,lineHeight:1.4}}><b>{a.user}</b> <span style={{color:'var(--text-dim)'}}>{a.action}d</span> <code style={{fontSize:11,color:'var(--accent)'}}>{a.table_name}</code></div>
                  <div style={{fontSize:10,color:'var(--text-dimmer)',fontFamily:'JetBrains Mono',marginTop:2}}>{fmtDateTime(a.created_at)}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Inventory quick-view + top flavors */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}} className="dash-row">
        <div className="card" style={{padding:22}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
            <h3 style={{fontSize:18,fontWeight:400}}>Inventory alerts</h3>
            <button onClick={()=>setPage('inventory')} style={{fontSize:12,color:'var(--accent)'}}>{t('common.view_all')} <Icon.ArrowRight size={11} style={{display:'inline'}}/></button>
          </div>
          <div style={{display:'flex',flexDirection:'column',gap:14}}>
            {(window.INVENTORY || INVENTORY).filter(i => stockStatus(i) !== 'ok').slice(0,5).map(i => {
              const pct = Math.min(100, (i.quantity / i.min_threshold) * 100);
              const s = stockStatus(i);
              const color = s === 'critical' ? 'var(--red)' : 'var(--gold)';
              return (
                <div key={i.id}>
                  <div style={{display:'flex',justifyContent:'space-between',fontSize:13,marginBottom:6}}>
                    <span>{i.name}</span>
                    <span style={{color:'var(--text-dim)',fontFamily:'JetBrains Mono',fontSize:11}}>{formatInvQty(i.quantity, invDisplayUnit(i))} / {formatInvQty(i.min_threshold, invDisplayUnit(i))} {invDisplayUnit(i)}</span>
                  </div>
                  <div style={{height:4,background:'var(--card2)',borderRadius:999,overflow:'hidden'}}>
                    <div style={{height:'100%',width:pct+'%',background:color,borderRadius:999,transition:'width .6s'}}/>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <div className="card" style={{padding:22}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
            <h3 style={{fontSize:18,fontWeight:400}}>Top flavors · week</h3>
            <div className="badge badge-terra">by scoops</div>
          </div>
          <div style={{display:'flex',flexDirection:'column',gap:12}}>
            {topFlavors.map((f, i) => {
              const flavor = FLAVORS.find(fl => fl.name === f.name);
              const max = topFlavors[0].scoops;
              return (
                <div key={f.name} style={{display:'flex',alignItems:'center',gap:12}}>
                  <div style={{width:30,fontFamily:'JetBrains Mono',fontSize:11,color:'var(--text-dim)'}}>{String(i+1).padStart(2,'0')}</div>
                  <div style={{width:36,height:36,borderRadius:10,background:flavor?`radial-gradient(circle at 30% 30%, ${flavor.color2}, ${flavor.color})` : 'var(--accent)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:18,flexShrink:0}}>
                    {flavor?.emoji}
                  </div>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontSize:13,fontWeight:500,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{f.name}</div>
                    <div style={{height:3,background:'var(--card2)',marginTop:6,borderRadius:999,overflow:'hidden'}}>
                      <div style={{height:'100%',width: (f.scoops/max*100)+'%', background: flavor?.color || 'var(--accent)'}}/>
                    </div>
                  </div>
                  <div style={{fontFamily:'JetBrains Mono',fontSize:12,color:'var(--text-dim)'}}>{f.scoops}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Quick actions */}
      <div className="card" style={{padding:22}}>
        <div style={{fontSize:11,letterSpacing:'0.15em',textTransform:'uppercase',color:'var(--text-dim)',marginBottom:14,fontFamily:'JetBrains Mono'}}>Quick actions</div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(160px,1fr))',gap:10}}>
          {[
            ['Log batch', Icon.IceCream, 'production'],
            ['Add stock', Icon.Box, 'inventory'],
            ['Record deposit', Icon.Landmark, 'deposits'],
            ['Issue warning', Icon.AlertTriangle, 'hr'],
            ['View analytics', Icon.TrendingUp, 'analytics'],
            ['Approve users', Icon.ShieldCheck, 'users'],
          ].map(([l, Ic, p]) => (
            <button key={l} onClick={()=>setPage(p)} className="card" style={{padding:'14px 16px',display:'flex',alignItems:'center',gap:10,border:'1px solid var(--border)',background:'var(--card2)',fontSize:13,cursor:'pointer',transition:'all .2s'}}
              onMouseEnter={e=>e.currentTarget.style.borderColor='var(--accent)'}
              onMouseLeave={e=>e.currentTarget.style.borderColor='var(--border)'}
            >
              <Ic size={16} style={{color:'var(--accent)'}}/>
              <span>{l}</span>
            </button>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 1000px) {
          .dash-row { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { Dashboard, chartColors, CustomTooltip });