// Dashboard page

const BarChart = ({ data, color = 'var(--brand)', max, fmtY = (v)=>v }) => {
  const M = max ?? Math.max(...data.map(d=>d.v)) * 1.1;
  return (
    <div className="chart" style={{ display: 'flex', flexDirection:'column' }}>
      <div style={{ flex: 1, display: 'flex', alignItems:'flex-end', gap: 6, padding:'10px 4px 0', borderBottom:'1px solid var(--border)', position:'relative' }}>
        {[0.25, 0.5, 0.75, 1].map(t => (
          <div key={t} style={{ position:'absolute', left:0, right:0, bottom:`${t*100}%`, borderTop:'1px dashed var(--border)' }}/>
        ))}
        {data.map((d,i) => (
          <div key={i} style={{ flex: 1, display:'flex', flexDirection:'column', alignItems:'center', gap: 6, position:'relative', zIndex:1 }}>
            <div style={{ flex:1 }}/>
            <div title={fmtY(d.v)} style={{
              width: '70%', maxWidth: 32,
              height: `${(d.v/M)*100}%`,
              background: color, borderRadius:'4px 4px 0 0',
              transition:'height 0.4s ease',
              minHeight: 2,
            }}/>
          </div>
        ))}
      </div>
      <div style={{ display:'flex', gap: 6, paddingTop: 6 }}>
        {data.map((d,i)=>(
          <div key={i} style={{ flex:1, textAlign:'center', fontSize: 11, color:'var(--text-3)' }}>{d.l}</div>
        ))}
      </div>
    </div>
  );
};

const LineChart = ({ data, color = 'var(--brand)' }) => {
  const W = 600, H = 220, P = { l: 36, r: 12, t: 12, b: 24 };
  const max = Math.max(...data.map(d=>d.v));
  const min = 0;
  const x = (i) => P.l + (i / (data.length-1)) * (W - P.l - P.r);
  const y = (v) => P.t + (1 - (v-min)/(max-min)) * (H - P.t - P.b);
  const pts = data.map((d,i) => `${x(i)},${y(d.v)}`).join(' ');
  const area = `M${x(0)},${H-P.b} L${pts.split(' ').join(' L')} L${x(data.length-1)},${H-P.b} Z`;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} className="chart" style={{ height: 220 }} preserveAspectRatio="none">
      <defs>
        <linearGradient id="lg-area" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.18"/>
          <stop offset="100%" stopColor={color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      {[0,0.25,0.5,0.75,1].map((t,i) => {
        const yy = P.t + t * (H-P.t-P.b);
        return <line key={i} x1={P.l} y1={yy} x2={W-P.r} y2={yy} stroke="var(--border)" strokeDasharray={i===0||i===4?'':'3 3'}/>;
      })}
      <path d={area} fill="url(#lg-area)"/>
      <polyline fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" points={pts}/>
      {data.map((d,i) => (
        <g key={i}>
          <circle cx={x(i)} cy={y(d.v)} r="3" fill="white" stroke={color} strokeWidth="2"/>
          <text x={x(i)} y={H-6} textAnchor="middle" fontSize="10" fill="var(--text-3)">{d.l}</text>
        </g>
      ))}
    </svg>
  );
};

const Donut = ({ data, size = 160 }) => {
  const total = data.reduce((s,d)=>s+d.v, 0);
  const r = size/2 - 14;
  const cx = size/2, cy = size/2;
  let acc = 0;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--bg)" strokeWidth="22"/>
      {data.map((d,i) => {
        const start = (acc/total) * Math.PI * 2;
        acc += d.v;
        const end = (acc/total) * Math.PI * 2;
        const x1 = cx + Math.sin(start)*r;
        const y1 = cy - Math.cos(start)*r;
        const x2 = cx + Math.sin(end)*r;
        const y2 = cy - Math.cos(end)*r;
        const large = end - start > Math.PI ? 1 : 0;
        return (
          <path key={i} d={`M${x1},${y1} A${r},${r} 0 ${large} 1 ${x2},${y2}`} stroke={d.c} strokeWidth="22" fill="none" strokeLinecap="butt"/>
        );
      })}
      <text x={cx} y={cy-2} textAnchor="middle" fontSize="11" fill="var(--text-3)">총 매장</text>
      <text x={cx} y={cy+16} textAnchor="middle" fontSize="22" fontWeight="700" fill="var(--text)">{total.toLocaleString()}</text>
    </svg>
  );
};

const Dashboard = () => {
  const [period, setPeriod] = React.useState('30d');
  const liveOrders = ORDERS.slice(0,5);
  const monthSales = [
    {l:'06월',v:5200000},{l:'07월',v:4800000},{l:'08월',v:6080000},
    {l:'09월',v:5500000},{l:'10월',v:7180000},{l:'11월',v:6800000},
    {l:'12월',v:7320000},{l:'01월',v:6240000},{l:'02월',v:5910000},
    {l:'03월',v:7050000},{l:'04월',v:6700000},{l:'05월',v:7820000},
  ];
  const monthOrders = monthSales.map((d,i) => ({ l:d.l, v: [420,380,510,460,590,540,620,478,448,572,530,648][i] }));
  const dailyOrders = [
    {l:'5/4',v:182},{l:'5/5',v:201},{l:'5/6',v:166},{l:'5/7',v:228},
    {l:'5/8',v:245},{l:'5/9',v:268},{l:'5/10',v:284},
  ];
  const catShare = [
    { l:'커피음료', v:62, c:'#FF6B1A' },
    { l:'김밥분식', v:48, c:'#FFB57A' },
    { l:'치킨', v:42, c:'#FFDE36' },
    { l:'도시락', v:36, c:'#7BC67E' },
    { l:'한식', v:34, c:'#5CB8E0' },
    { l:'기타', v:120, c:'#C8CDD6' },
  ];

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>대시보드</h1>
          <div className="sub">전체 운영 현황을 한눈에 확인합니다 · 기준일 2026.05.10</div>
        </div>
        <div className="actions">
          <Seg items={[
            { value:'7d', label:'7일' },
            { value:'30d', label:'30일' },
            { value:'90d', label:'90일' },
            { value:'ytd', label:'연간' },
          ]} value={period} onChange={setPeriod}/>
          <button className="btn btn-ghost"><Icon name="download" size={14}/>리포트</button>
          <button className="btn btn-soft"><Icon name="flask" size={14}/>더미데이터</button>
        </div>
      </div>

      <div className="stat-grid">
        <Stat icon="won" label="총 매출 (30일)" value={fmtKRW(124530000)} delta="+12.5%" deltaTone="up" foot="전월 대비 ₩13,820,000 증가"/>
        <Stat icon="cart" label="총 주문 건수" value="8,472건" delta="+8.3%" deltaTone="up" foot="전월 대비 651건 증가" tone="blue"/>
        <Stat icon="store" label="노출중 매장" value="342개" delta="+5.2%" deltaTone="up" foot="전월 대비 17개 증가" tone="green"/>
        <Stat icon="user" label="활성 회원" value="18,204명" delta="+11.7%" deltaTone="up" foot="신규 가입 1,082명" tone="purple"/>
      </div>

      <div className="stat-grid" style={{ gridTemplateColumns:'repeat(4, 1fr)' }}>
        <MiniStat label="결제 대기" value="14건" tone="warn"/>
        <MiniStat label="승인 대기" value="6건" tone="warn"/>
        <MiniStat label="정산 대기" value="₩28,420,000" tone="info"/>
        <MiniStat label="신고 리뷰" value="3건" tone="danger"/>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr', gap:14, marginTop:14 }}>
        <div className="card">
          <div className="card-h">
            <h3>월별 매출 추이</h3>
            <Badge tone="brand">2026년</Badge>
            <span style={{ marginLeft:'auto', fontSize:13, color:'var(--text-3)' }}>총 ₩76,610,000</span>
          </div>
          <BarChart data={monthSales} color="var(--brand)"/>
        </div>
        <div className="card">
          <div className="card-h">
            <h3>카테고리별 매장</h3>
            <span className="more"><button className="btn-icon"><Icon name="moreH" size={16}/></button></span>
          </div>
          <div style={{ display:'flex', alignItems:'center', gap: 16 }}>
            <Donut data={catShare}/>
            <div style={{ flex:1, display:'flex', flexDirection:'column', gap:8 }}>
              {catShare.map(d => (
                <div key={d.l} style={{ display:'flex', alignItems:'center', gap:8, fontSize:13 }}>
                  <span style={{ width:10, height:10, borderRadius:2, background:d.c }}/>
                  <span style={{ flex:1 }}>{d.l}</span>
                  <span style={{ fontWeight:600 }}>{d.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginTop:14 }}>
        <div className="card">
          <div className="card-h">
            <h3>월별 주문 건수</h3>
            <Badge tone="info">2026년</Badge>
          </div>
          <BarChart data={monthOrders} color="#2A6FDB"/>
        </div>
        <div className="card">
          <div className="card-h">
            <h3>일별 주문 추세 (최근 7일)</h3>
            <span style={{ marginLeft:'auto', fontSize:13, color:'var(--success)', fontWeight:600 }}>↑ 14.2%</span>
          </div>
          <LineChart data={dailyOrders} color="var(--brand)"/>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr', gap:14, marginTop:14 }}>
        <div className="card" style={{ padding: 0 }}>
          <div style={{ padding:'16px 20px', borderBottom:'1px solid var(--border)', display:'flex', alignItems:'center', gap:10 }}>
            <h3 style={{ margin:0, fontSize:15 }}>실시간 주문</h3>
            <Badge tone="success" dot="success">LIVE</Badge>
            <span style={{ marginLeft:'auto', fontSize:12, color:'var(--text-3)' }}>5초마다 갱신</span>
          </div>
          <table className="table">
            <thead><tr>
              <th>주문번호</th><th>매장</th><th>모드</th><th>금액</th><th>상태</th><th>픽업시간</th>
            </tr></thead>
            <tbody>
              {liveOrders.map(o => {
                const s = ORDER_STATUS[o.status];
                return (
                  <tr key={o.id}>
                    <td><span className="t-mono">{o.id.split('-').slice(-1)}</span></td>
                    <td>{o.store}</td>
                    <td><Badge tone={o.mode==='포장'?'brand':'info'}>{o.mode}</Badge></td>
                    <td style={{ fontWeight:600 }}>{fmtKRW(o.total)}</td>
                    <td><Badge tone={s.tone} dot={s.dot}>{s.label}</Badge></td>
                    <td style={{ color:'var(--text-3)' }}>{o.pickup}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        <div className="card">
          <div className="card-h">
            <h3>오늘의 TOP 매장</h3>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap: 12 }}>
            {STORES.slice(0,5).map((s,i) => (
              <div key={s.id} style={{ display:'flex', alignItems:'center', gap:12 }}>
                <div style={{ width:24, height:24, borderRadius:6, display:'grid', placeItems:'center', background: i===0?'var(--brand)':'var(--bg)', color: i===0?'white':'var(--text-2)', fontSize:12, fontWeight:700 }}>{i+1}</div>
                <div className="thumb">{s.cat[0]}</div>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontWeight:600, fontSize:13, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{s.name}</div>
                  <div style={{ fontSize:11.5, color:'var(--text-3)' }}>{s.cat} · 주문 {s.orders30}건</div>
                </div>
                <div style={{ textAlign:'right' }}>
                  <div style={{ fontWeight:700, fontSize:13 }}>{fmtKRW(s.sales30)}</div>
                  <div style={{ fontSize:11.5, color:'var(--success)' }}>★ {s.rating}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const Stat = ({ icon, label, value, delta, deltaTone='up', foot, tone='' }) => (
  <div className={`stat ${tone?'s-'+tone:''}`}>
    <div className="stat-icon"><Icon name={icon} size={16}/></div>
    <div className="stat-label">{label}</div>
    <div className="stat-value">{value}</div>
    <div className="stat-foot">
      <span className={`delta ${deltaTone}`}>
        <Icon name={deltaTone==='up'?'arrowUp':'arrowDown'} size={12}/>{delta}
      </span>
      <span>{foot}</span>
    </div>
  </div>
);

const MiniStat = ({ label, value, tone='neutral' }) => {
  const colors = { warn:'var(--warn)', danger:'var(--danger)', info:'var(--info)', success:'var(--success)' };
  return (
    <div className="card" style={{ padding:'14px 16px', display:'flex', alignItems:'center', gap:12 }}>
      <div style={{ width:8, height:36, borderRadius:4, background: colors[tone] || 'var(--text-4)' }}/>
      <div style={{ flex:1 }}>
        <div style={{ fontSize:12, color:'var(--text-3)' }}>{label}</div>
        <div style={{ fontSize:18, fontWeight:700, marginTop:2 }}>{value}</div>
      </div>
      <button className="btn btn-sm btn-ghost">처리</button>
    </div>
  );
};

Object.assign(window, { Dashboard, Stat, MiniStat });