// Dashboard — KPI, comparison, forecast
// อัปเดต: ใช้ข้อมูลจาก Cloudflare Workers API จริง (window.BFData._dash)

const Dashboard = ({ tweaks, onNavigate }) => {
  const dash      = window.BFData._dash;
  const inventory = window.BFData.INVENTORY;

  const kpi       = dash.kpi       || {};
  const today     = kpi.today      || { revenue: 0, cost: 0, cups: 0, profit: 0 };
  const yesterday = kpi.yesterday  || { revenue: 0, cups: 0 };
  const chart7    = dash.chart7    || [];
  const hourly    = dash.hourly    || [];
  const bestsellers = dash.bestsellers || [];
  const profitRank  = dash.profitRank  || [];

  const prev7Avg  = kpi.prev7Avg  || 0;
  const monthLoss = kpi.monthLoss || 0;

  // วันที่วันนี้แบบ Thai
  const todayLabel = new Date().toLocaleDateString('th-TH', {
    day: 'numeric', month: 'short', year: 'numeric',
    timeZone: 'Asia/Bangkok',
  });

  const delta = (a, b) => (b > 0 ? ((a - b) / b) * 100 : 0);
  const todayDelta = delta(today.revenue, yesterday.revenue);
  const weekDelta  = delta(today.revenue, prev7Avg);

  const totalRev  = chart7.reduce((s, d) => s + (d.revenue || 0), 0);
  const totalCost = chart7.reduce((s, d) => s + (d.cost    || 0), 0);
  const margin    = totalRev > 0 ? ((totalRev - totalCost) / totalRev) * 100 : 0;
  const avgPrice  = today.cups > 0 ? today.revenue / today.cups : 0;

  const peakHour  = hourly.length ? hourly.reduce((m, h) => h.c > m.c ? h : m, hourly[0]) : null;
  const lowStock  = inventory.filter(i => i.days <= 7);

  return (
    <div className="bf-dashboard" data-layout={tweaks.dashLayout}>
      <SectionHead
        eyebrow={`วันนี้ · ${todayLabel}`}
        title="ภาพรวมร้าน"
        action={<div className="bf-time-pills">
          <Pill active>วันนี้</Pill>
          <Pill>สัปดาห์นี้</Pill>
          <Pill>เดือนนี้</Pill>
        </div>}
      />

      {/* KPI row */}
      <div className="bf-kpi-row">
        <Stat
          label="ยอดขายวันนี้"
          value={baht(today.revenue)}
          sub={`${today.cups} แก้ว · ${baht(avgPrice)}/แก้ว`}
          delta={todayDelta}
          accent="primary"
        />
        <Stat
          label="กำไรวันนี้"
          value={baht(today.profit)}
          sub={`margin ${margin.toFixed(0)}% · สูญเสีย ${baht(monthLoss)}`}
          accent="default"
        />
        <Stat
          label="เทียบ 7 วันก่อน"
          value={`${weekDelta >= 0 ? '+' : ''}${weekDelta.toFixed(0)}%`}
          sub={`เฉลี่ย ${baht(prev7Avg)}/วัน`}
          delta={null}
          accent={weekDelta >= 0 ? 'good' : 'warn'}
        />
        <Stat
          label="แก้วต่อชั่วโมง (peak)"
          value={peakHour ? `${peakHour.c}` : '—'}
          sub={peakHour ? `${peakHour.h}:00 น.` : 'ยังไม่มีข้อมูล'}
          accent="default"
        />
      </div>

      {/* Main grid */}
      <div className="bf-dash-grid">
        {/* 7-day sales chart */}
        <Card
          title="ยอดขาย 7 วันล่าสุด"
          subtitle={`รวม ${baht(totalRev)}`}
          className="bf-span-2"
        >
          <SalesChart data={chart7} />
        </Card>

        {/* Hourly heatmap */}
        <Card title="ชั่วโมงไหนขายดี" subtitle="วันนี้">
          <HourlyHeat data={hourly} />
        </Card>

        {/* Profit ranking */}
        <Card title="เมนูที่กำไรดีที่สุด" subtitle="7 วันล่าสุด" className="bf-span-2">
          <ProfitRanking data={profitRank.slice(0, 6)} />
        </Card>

        {/* Bestseller */}
        <Card title="ขายดี (จำนวนแก้ว)" subtitle="7 วันล่าสุด">
          <BestsellerList data={bestsellers.slice(0, 5)} />
        </Card>

        {/* Inventory forecast */}
        <Card
          title="วัตถุดิบเหลือกี่วัน"
          subtitle={lowStock.length ? `${lowStock.length} รายการต้องสั่งซื้อ` : 'ทุกอย่างเพียงพอ'}
          className="bf-span-3"
          action={
            <button className="bf-link" onClick={() => onNavigate('records')}>
              บันทึกซื้อวัตถุดิบ →
            </button>
          }
        >
          <InventoryGrid data={inventory} />
        </Card>
      </div>
    </div>
  );
};

// ── 7-day bar chart ────────────────────────────────────────────────────────────
const THAI_DAYS_SHORT = ['อา','จ','อ','พ','พฤ','ศ','ส'];
function thaiDayShort(dateStr) {
  const d = new Date(dateStr + 'T12:00:00');
  return THAI_DAYS_SHORT[d.getDay()];
}

const SalesChart = ({ data }) => {
  if (!data.length) return <div style={{ textAlign: 'center', color: 'var(--bf-text-3)', padding: 32 }}>ยังไม่มีข้อมูลการขาย</div>;
  const max = Math.max(...data.map(d => d.revenue), 1);
  return (
    <div className="bf-bars">
      {data.map((d, i) => {
        const isToday = !!d.isToday || i === data.length - 1;
        const profit  = (d.revenue || 0) - (d.cost || 0);
        return (
          <div key={d.date} className={`bf-bar-col ${isToday ? 'is-today' : ''}`}>
            <div className="bf-bar-track">
              <div className="bf-bar-cost"   style={{ height: `${((d.cost   || 0) / max) * 100}%` }} />
              <div className="bf-bar-profit" style={{ height: `${(profit > 0 ? profit / max : 0) * 100}%` }} />
            </div>
            <div className="bf-bar-label">{thaiDayShort(d.date)}</div>
            <div className="bf-bar-value">{baht(d.revenue)}</div>
          </div>
        );
      })}
      <div className="bf-bar-legend">
        <span><i className="dot dot-profit" /> กำไรสุทธิ</span>
        <span><i className="dot dot-cost"   /> ต้นทุน</span>
      </div>
    </div>
  );
};

// ── Hourly heatmap ─────────────────────────────────────────────────────────────
const HourlyHeat = ({ data }) => {
  const max = Math.max(...data.map(d => d.c), 1);
  const currentHour = new Date().getHours();
  const hours = Array.from({ length: 11 }, (_, i) => 8 + i);
  return (
    <div className="bf-heat">
      <div className="bf-heat-row">
        {hours.map(h => {
          const d = data.find(x => x.h === h);
          const intensity = d ? d.c / max : 0;
          const isFuture  = h > currentHour;
          return (
            <div
              key={h}
              className={`bf-heat-cell ${isFuture ? 'is-future' : ''}`}
              style={{ '--i': intensity.toFixed(2) }}
              title={`${h}:00 — ${d ? d.c : 0} แก้ว`}
            >
              <span className="bf-heat-num">{d ? d.c : ''}</span>
            </div>
          );
        })}
      </div>
      <div className="bf-heat-axis">
        {hours.map(h => <span key={h}>{h}</span>)}
      </div>
    </div>
  );
};

// ── Profit ranking bars ────────────────────────────────────────────────────────
const ProfitRanking = ({ data }) => {
  if (!data.length) return <div style={{ color: 'var(--bf-text-3)', padding: 16 }}>ยังไม่มีข้อมูล</div>;
  const max = Math.max(...data.map(d => d.profit), 1);
  return (
    <div className="bf-rank">
      {data.map((d, i) => (
        <div key={d.name} className="bf-rank-row">
          <div className="bf-rank-pos">{i + 1}</div>
          <div className="bf-rank-swatch" style={{ background: TONE_BG[window.toneForName(d.name)] || TONE_BG.black }} />
          <div className="bf-rank-name">{d.name}</div>
          <div className="bf-rank-track">
            <div className="bf-rank-fill" style={{ width: `${(d.profit / max) * 100}%` }} />
          </div>
          <div className="bf-rank-value">{baht(d.profit)}</div>
        </div>
      ))}
    </div>
  );
};

// ── Bestseller list ────────────────────────────────────────────────────────────
const BestsellerList = ({ data }) => {
  if (!data.length) return <div style={{ color: 'var(--bf-text-3)', padding: 16 }}>ยังไม่มีข้อมูล</div>;
  return (
    <div className="bf-rank">
      {data.map((d, i) => (
        <div key={d.name} className="bf-rank-row bf-rank-compact">
          <div className="bf-rank-pos">{i + 1}</div>
          <div className="bf-rank-swatch" style={{ background: TONE_BG[window.toneForName(d.name)] || TONE_BG.black }} />
          <div className="bf-rank-name">{d.name}</div>
          <div className="bf-rank-cups">{d.cups} แก้ว</div>
        </div>
      ))}
    </div>
  );
};

// ── Inventory forecast grid ────────────────────────────────────────────────────
const InventoryGrid = ({ data }) => (
  <div className="bf-inv-grid">
    {data.map(i => (
      <div key={i.id} className="bf-inv-tile" data-status={i.status || (i.days <= 3 ? 'danger' : i.days <= 7 ? 'warn' : 'ok')}>
        <div className="bf-inv-name">{i.name}</div>
        <div className="bf-inv-stock">
          {typeof i.stock === 'number' ? i.stock.toLocaleString('th-TH') : i.stock}
          {' '}<span>{i.unit}</span>
        </div>
        <SupplyBar days={i.days} />
        <div className="bf-inv-burn">ใช้ ~{i.perDay} {i.unit}/วัน</div>
      </div>
    ))}
  </div>
);

window.Dashboard = Dashboard;