/**
 * V1 — 클래식 그리드 (정통)
 * 상단 KPI 4개 가로 → 차트 3개 가로 → 알림 4개 카테고리 가로
 * 가장 익숙한 어드민 레이아웃. 모든 정보가 한눈에 보이고 균형잡혀있음.
 */
const DashboardV1 = () => {
  const D = DASH_DATA;
  const fmt = n => n.toLocaleString();
  const fmtMoney = n => { const eok = n/100_000_000; if (Math.abs(eok) >= 1) return '₩' + (Math.round(eok*100)/100).toFixed(2).replace(/\.?0+$/,'') + '억'; return '₩' + Math.round(n/10000).toLocaleString() + '만'; };

  return <DashShell headline="안녕하세요, 김매니저님 👋" subtitle="오늘 5월 15일 목요일 · 처리할 일 7건이 있어요">
    <div style={{padding:'20px 28px',display:'flex',flexDirection:'column',gap:16}}>

      {/* 상단 KPI 4개 */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14}}>
        <KpiCard label="오늘 배송" value={D.today.deliveryCount} unit="건"
          sub={{text:`${D.today.deliveryCompanies}개 업체 · ${fmt(D.today.deliveryQty)}식`,color:C.fg3}}
          color={C.primary} icon="🚚"
          sparkline={<Sparkline data={[40,42,38,45,43,46,47]} color={C.primary}/>}/>
        <KpiCard label="미수금" value={(Math.round(D.unpaid.total/10000)).toLocaleString()} unit="만원"
          sub={{text:`${D.unpaid.companies}개 업체 · 30일↑ ${D.unpaid.overdue30}곳`,color:C.danger}}
          color={C.danger} icon="💰"
          sparkline={<Sparkline data={[820,850,830,870,890,860,875]} color={C.danger}/>}/>
        <KpiCard label="이번달 매출" value={(Math.round(D.sales.thisMonth/10000)).toLocaleString()} unit="만원"
          sub={<><span style={{color:C.primary,fontWeight:700}}>▲ {D.sales.diff}%</span> <span style={{color:C.fg4}}>지난달 대비</span></>}
          color={C.info} icon="📈"
          sparkline={<Sparkline data={D.sales.daily} color={C.info}/>}/>
        <KpiCard label="신규 / 종료" value={`${D.companies.newThisMonth} / ${D.companies.endThisMonth}`}
          sub={{text:`순증 +${D.companies.diff} · 총 ${D.companies.total}곳`,color:C.fg3}}
          color={C.violet} icon="🏢"
          sparkline={<Sparkline data={[3,5,8,9,11,12]} color={C.violet}/>}/>
      </div>

      {/* 중단 차트 3개 */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14}}>
        {/* 매출 */}
        <div style={{background:'#fff',border:`1px solid ${C.border}`,borderRadius:12,padding:'18px 20px 14px'}}>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:12}}>
            <div>
              <div style={{fontSize:12,fontWeight:700,color:C.fg3}}>일별 매출</div>
              <div style={{display:'flex',alignItems:'baseline',gap:8,marginTop:4}}>
                <span style={{fontSize:22,fontWeight:900,color:C.fg1}}>{fmtMoney(D.sales.thisMonth)}</span>
                <TrendBadge value={D.sales.diff}/>
              </div>
            </div>
            <span style={{fontSize:10,color:C.fg4,fontWeight:600}}>최근 15일</span>
          </div>
          <LineChart data={D.sales.daily} color={C.info}/>
        </div>
        {/* 주문량 */}
        <div style={{background:'#fff',border:`1px solid ${C.border}`,borderRadius:12,padding:'18px 20px 14px'}}>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:12}}>
            <div>
              <div style={{fontSize:12,fontWeight:700,color:C.fg3}}>일별 주문량</div>
              <div style={{display:'flex',alignItems:'baseline',gap:8,marginTop:4}}>
                <span style={{fontSize:22,fontWeight:900,color:C.fg1}}>{fmt(D.orders.thisMonth)}<span style={{fontSize:13,fontWeight:600,color:C.fg4}}> 식</span></span>
                <TrendBadge value={D.orders.diff}/>
              </div>
            </div>
            <span style={{fontSize:10,color:C.fg4,fontWeight:600}}>최근 15일</span>
          </div>
          <LineChart data={D.orders.daily} color={C.primary}/>
        </div>
        {/* 업체 증감 */}
        <div style={{background:'#fff',border:`1px solid ${C.border}`,borderRadius:12,padding:'18px 20px 14px'}}>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:12}}>
            <div>
              <div style={{fontSize:12,fontWeight:700,color:C.fg3}}>월별 업체 증감</div>
              <div style={{display:'flex',alignItems:'baseline',gap:8,marginTop:4}}>
                <span style={{fontSize:22,fontWeight:900,color:C.fg1}}>+{D.companies.diff}<span style={{fontSize:13,fontWeight:600,color:C.fg4}}> 곳 (5월)</span></span>
              </div>
            </div>
            <div style={{display:'flex',gap:8,fontSize:10,color:C.fg3,fontWeight:600}}>
              <span style={{display:'flex',alignItems:'center',gap:3}}><span style={{width:8,height:8,background:C.primary,borderRadius:2}}/>신규</span>
              <span style={{display:'flex',alignItems:'center',gap:3}}><span style={{width:8,height:8,background:C.fg4,borderRadius:2}}/>종료</span>
            </div>
          </div>
          <BarChart data={D.companies.monthly} height={120}/>
        </div>
      </div>

      {/* 하단 알림 4개 카테고리 스택 */}
      <div>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:10,padding:'0 2px'}}>
          <div style={{fontSize:14,fontWeight:800,color:C.fg1}}>처리할 알림</div>
          <span style={{fontSize:11,color:C.fg4,fontWeight:600}}>총 {D.alerts.unpaid.length+D.alerts.complaint.length+D.alerts.expiring.length+D.alerts.todo.length}건</span>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14,height:260}}>
          <AlertStack title="미수금" count={D.unpaid.companies} color={C.danger} items={D.alerts.unpaid}/>
          <AlertStack title="컴플레인" count={D.alerts.complaint.length} color={C.warning} items={D.alerts.complaint}/>
          <AlertStack title="계약 만료 임박" count={D.alerts.expiring.length} color={C.info} items={D.alerts.expiring}/>
          <AlertStack title="처리할 TODO" count={D.alerts.todo.length} color={C.violet} items={D.alerts.todo}/>
        </div>
      </div>

    </div>
  </DashShell>;
};

window.DashboardV1 = DashboardV1;