/* Dashboard view — colorful style */

const { useMemo: useMemoD, useState: useStateD } = React;

function Dashboard({ products, purchases, issues, departments, onAddPurchase, onAddIssue, goTo, setPage, userName }) {
  const [scope, setScope] = useStateD('month');

  const filteredIssues = useMemoD(() => {
    if (scope === 'all') return issues;
    if (scope === 'year') return issues.filter(t => new Date(t.date).getFullYear() === 2026);
    if (scope === 'month') return issues.filter(t => monthKey(t.date) === monthKey(TODAY));
    return issues.filter(t => monthKey(t.date) === scope);
  }, [issues, scope]);

  // Branch ranking
  const ranking = useMemoD(() => {
    return departments
      .map(d => {
        const rows = filteredIssues.filter(t => t.dept === d.id);
        const qty = rows.reduce((s, t) => s + t.qty, 0);
        const value = rows.reduce((s, t) => {
          const p = products.find(p => p.id === t.pid);
          return s + (p ? p.price * t.qty : 0);
        }, 0);
        return { ...d, qty, value, count: rows.length };
      })
      .sort((a, b) => b.qty - a.qty);
  }, [departments, filteredIssues, products]);

  const totalQty = ranking.reduce((s, r) => s + r.qty, 0);
  const totalValue = ranking.reduce((s, r) => s + r.value, 0);
  const activeBranches = ranking.filter(r => r.qty > 0).length;
  const lowStock = products.filter(p => p.stock < p.min);

  // Sparklines — monthly totals
  const buySpark = MONTHS.map(m => purchases.filter(t => monthKey(t.date) === m.key).reduce((s,t) => s + t.qty, 0));
  const useSpark = MONTHS.map(m => issues.filter(t => monthKey(t.date) === m.key).reduce((s,t) => s + t.qty, 0));
  const valueSpark = MONTHS.map(m => {
    return issues.filter(t => monthKey(t.date) === m.key).reduce((s,t) => {
      const p = products.find(p => p.id === t.pid);
      return s + (p ? p.price * t.qty : 0);
    }, 0);
  });
  const branchSpark = MONTHS.map(m => {
    const dset = new Set(issues.filter(t => monthKey(t.date) === m.key).map(t => t.dept));
    return dset.size;
  });

  const thisMonth = monthKey(TODAY);
  const lastMonth = '2026-04';
  const useThis = issues.filter(t => monthKey(t.date) === thisMonth).reduce((s,t) => s + t.qty, 0);
  const useLast = issues.filter(t => monthKey(t.date) === lastMonth).reduce((s,t) => s + t.qty, 0);
  const useDelta = useLast > 0 ? Math.round(((useThis - useLast) / useLast) * 100) : 0;

  // Branch-kind breakdown for donut
  const byKind = [
    { id: 'branch',  label: 'สาขา', color: '#1a78c2' },
    { id: 'hq',      label: 'สำนักงานใหญ่', color: '#d97a1f' },
  ].map(k => {
    const value = ranking.filter(r => r.kind === k.id).reduce((s,r) => s + r.qty, 0);
    return { ...k, value };
  });
  const kindTotal = byKind.reduce((s,k) => s + k.value, 0);

  // Recent activity
  const productById = Object.fromEntries(products.map(p => [p.id, p]));
  const deptById = Object.fromEntries(departments.map(d => [d.id, d]));
  const recent = [
    ...purchases.map(t => ({...t, type: 'in'})),
    ...issues.map(t => ({...t, type: 'out'})),
  ].sort((a,b) => b.date - a.date).slice(0, 5);

  // Top 8 branches for dashboard
  const topBranches = ranking.slice(0, 8);
  const maxQty = Math.max(1, ...topBranches.map(r => r.qty));

  const scopeLabel = scope === 'all' ? 'ทั้งหมด'
    : scope === 'year' ? 'ปี 2026'
    : scope === 'month' ? 'พ.ค. 2026'
    : (MONTHS.find(m => m.key === scope)?.label || scope) + ' 2026';

  return (
    <div className="row-gap">
      {/* Hero */}
      <div className="hero">
        <div>
          <h2>{getGreeting()}, {userName} 👋</h2>
          <div className="sub">
            <span className="live-dot"></span>
            ภาพรวมการเบิกหมึก · อัปเดตล่าสุด 2 นาทีที่แล้ว
          </div>
        </div>
        <div className="hero-actions">
          <button className="btn" onClick={() => window.location.reload()}>↻ รีเฟรช</button>
          <button className="btn btn-primary" onClick={onAddPurchase}>{I.plus} รับเข้าใหม่</button>
        </div>
      </div>

      {/* KPI cards */}
      <div className="kpi-grid">
        <div className="kpi-color" style={{cursor: 'pointer'}} onClick={() => goTo('all')}>
          <div className="kpi-chip blue">{I.box}</div>
          <div className="kpi-label">รุ่นหมึกในระบบ</div>
          <div className="kpi-value">{products.length}</div>
          <div className="kpi-foot"><span className="delta-up">↑ {lowStock.length} ต้องสั่งเพิ่ม</span></div>
          <Sparkline points={[products.length-3, products.length-2, products.length-1, products.length, products.length, products.length]} color="#1a78c2"/>
        </div>
        <div className="kpi-color" style={{cursor: 'pointer'}} onClick={() => onAddPurchase()}>
          <div className="kpi-chip green">{I.arrow_in}</div>
          <div className="kpi-label">รับเข้ารวม (ตลับ)</div>
          <div className="kpi-value">{fmtNum(buySpark.reduce((a,b) => a+b, 0))}</div>
          <div className="kpi-foot"><span className="delta-up">↑ {fmtNum(buySpark[buySpark.length-1])} เดือนนี้</span></div>
          <Sparkline points={buySpark} color="#2d9d5b"/>
        </div>
        <div className="kpi-color">
          <div className="kpi-chip purple">{I.chart}</div>
          <div className="kpi-label">มูลค่าเบิกใช้ (บาท)</div>
          <div className="kpi-value">฿{fmtMoney(totalValue)}</div>
          <div className="kpi-foot">{useDelta >= 0
            ? <span className="delta-up">↑ {useDelta}% เทียบเดือนก่อน</span>
            : <span className="delta-down">↓ {Math.abs(useDelta)}%  เทียบเดือนก่อน</span>}</div>
          <Sparkline points={valueSpark} color="#7a5fbf"/>
        </div>
        <div className="kpi-color" style={{cursor: 'pointer'}} onClick={() => goTo('low')}>
          <div className="kpi-chip orange">{I.alert}</div>
          <div className="kpi-label">รายการที่ต้องระวัง</div>
          <div className="kpi-value">{lowStock.length}</div>
          <div className="kpi-foot"><span className="delta-warn">{lowStock.length === 0 ? '✓ เพียงพอ' : '↓ ใกล้หมด/หมด'}</span></div>
          <Sparkline points={[2, 3, 3, 4, 5, lowStock.length]} color="#d97a1f"/>
        </div>
      </div>

      {/* Chart + Donut */}
      <div className="grid-2">
        <div className="card">
          <div className="card-head">
            <div>
              <h3 className="card-title">การเคลื่อนไหวรายเดือน</h3>
              <div className="card-sub">รับเข้า vs จ่ายออก (ตลับ)</div>
            </div>
            <div style={{marginLeft: 'auto'}} className="flex gap-12 text-sm">
              <span className="flex gap-6"><span className="dot" style={{background: '#1a78c2'}}></span>รับเข้า</span>
              <span className="flex gap-6"><span className="dot" style={{background: '#d97a1f'}}></span>จ่ายออก</span>
            </div>
          </div>
          <div className="card-pad">
            <MonthlyChart purchases={purchases} issues={issues}/>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <h3 className="card-title">สัดส่วนการเบิกตามประเภท</h3>
              <div className="card-sub">{scopeLabel} · {fmtNum(totalQty)} ตลับ</div>
            </div>
            <div style={{marginLeft: 'auto'}} className="flex gap-6">
              <button className={`btn btn-sm ${scope === 'month' ? 'btn-primary' : ''}`} onClick={() => setScope('month')}>รายเดือน</button>
              <button className={`btn btn-sm ${scope === 'year' ? 'btn-primary' : ''}`} onClick={() => setScope('year')}>รายปี</button>
              <button className={`btn btn-sm ${scope === 'all' ? 'btn-primary' : ''}`} onClick={() => setScope('all')}>ทั้งหมด</button>
            </div>
          </div>
          <div className="card-pad" style={{display: 'flex', alignItems: 'center', gap: 22}}>
            <MiniDonut data={byKind} total={kindTotal} size={160}/>
            <div style={{flex: 1}}>
              {byKind.map(k => (
                <div key={k.id} className="flex-between" style={{padding: '6px 0', fontSize: 13}}>
                  <span className="flex gap-8">
                    <span style={{width: 10, height: 10, borderRadius: 3, background: k.color, flexShrink: 0}}></span>
                    {k.label}
                  </span>
                  <span className="mono fw-500">{fmtNum(k.value)} ตลับ <span className="muted">({kindTotal > 0 ? Math.round(k.value/kindTotal*100) : 0}%)</span></span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Branch ranking (top 8) + Recent activity */}
      <div className="grid-2">
        <div className="card">
          <div className="card-head">
            <div>
              <h3 className="card-title">สาขาที่เบิกมากที่สุด</h3>
              <div className="card-sub">{scopeLabel} · Top 8</div>
            </div>
            <div style={{marginLeft: 'auto'}} className="flex gap-6">
              <button className={`btn btn-sm ${scope === 'month' ? 'btn-primary' : ''}`} onClick={() => setScope('month')}>รายเดือน</button>
              <button className={`btn btn-sm ${scope === 'year' ? 'btn-primary' : ''}`} onClick={() => setScope('year')}>รายปี</button>
              <button className={`btn btn-sm ${scope === 'all' ? 'btn-primary' : ''}`} onClick={() => setScope('all')}>ทั้งหมด</button>
            </div>
          </div>
          <div style={{padding: '4px 0'}}>
            {topBranches.map((d, idx) => {
              const pct = (d.qty / maxQty) * 100;
              return (
                <div key={d.id} style={{padding: '11px 18px', borderBottom: idx === topBranches.length - 1 ? 'none' : '1px solid var(--border)'}}>
                  <div className="flex-between" style={{marginBottom: 6}}>
                    <div className="flex gap-8" style={{minWidth: 0}}>
                      <span className="mono muted text-xs" style={{width: 18, textAlign: 'right'}}>{idx + 1}</span>
                      <span style={{width: 6, height: 6, borderRadius: '50%', background: d.color, flexShrink: 0}}></span>
                      <span className="fw-500" style={{fontSize: 13, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{d.name}</span>
                      <span className="text-xs muted mono">{d.id}</span>
                    </div>
                    <div style={{textAlign: 'right'}}>
                      <span className="mono fw-600" style={{fontSize: 14}}>{fmtNum(d.qty)}</span>
                      <span className="text-xs muted" style={{marginLeft: 4}}>ตลับ</span>
                    </div>
                  </div>
                  <div className="dept-bar-bg" style={{marginLeft: 32}}>
                    <div className="dept-bar-fill" style={{width: pct + '%', background: d.color}}/>
                  </div>
                </div>
              );
            })}
          </div>
          <div style={{padding: '12px 18px', borderTop: '1px solid var(--border)', textAlign: 'center'}}>
            <button className="see-all" onClick={() => setPage('issues')}>
              ดูทั้งหมด {activeBranches} สาขา →
            </button>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3 className="card-title">กิจกรรมล่าสุด</h3>
            <span className="live-dot" style={{marginLeft: 6}}></span>
            <button className="see-all" style={{marginLeft: 'auto'}} onClick={() => goTo('issues')}>ดูทั้งหมด →</button>
          </div>
          <div style={{padding: '4px 0'}}>
            {recent.map(t => {
              const p = productById[t.pid];
              if (!p) return null;
              return (
                <div key={t.type + t.id} className="flex gap-12" style={{padding: '11px 18px', borderBottom: '1px solid var(--border)'}}>
                  <div style={{
                    width: 32, height: 32, borderRadius: 8,
                    background: t.type === 'in' ? 'rgba(45,157,91,0.12)' : 'rgba(217,122,31,0.12)',
                    color: t.type === 'in' ? '#2d9d5b' : '#d97a1f',
                    display: 'grid', placeItems: 'center', flexShrink: 0
                  }}>
                    {t.type === 'in' ? I.arrow_in : I.arrow_out}
                  </div>
                  <div style={{flex: 1, minWidth: 0}}>
                    <div className="fw-500" style={{fontSize: 13}}>
                      {t.type === 'in' ? 'รับเข้า' : 'จ่ายออก'} {p.name}
                    </div>
                    <div className="text-xs muted">
                      {t.type === 'in'
                        ? <>{t.supplier} · <span className="mono">{t.ref}</span></>
                        : <>{t.user} · {deptById[t.dept]?.name || t.dept}</>}
                    </div>
                  </div>
                  <div style={{textAlign: 'right'}}>
                    <div className="mono fw-600" style={{
                      fontSize: 14,
                      color: t.type === 'in' ? '#2d9d5b' : '#d97a1f'
                    }}>
                      {t.type === 'in' ? '+' : '−'}{t.qty}
                    </div>
                    <div className="text-xs muted mono">{fmtDate(t.date)}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Low stock strip */}
      {lowStock.length > 0 && (
        <div className="card">
          <div className="card-head">
            <span className="kpi-chip orange" style={{width: 28, height: 28, marginBottom: 0, borderRadius: 8}}>{I.alert}</span>
            <div>
              <h3 className="card-title" style={{marginLeft: 4}}>รายการต้องสั่งเพิ่ม</h3>
              <div className="card-sub" style={{marginLeft: 4}}>สินค้าที่ใกล้หมดหรือหมดสต็อก</div>
            </div>
            <button className="see-all" style={{marginLeft: 'auto'}} onClick={() => goTo('low')}>ดูทั้งหมด ({lowStock.length}) →</button>
          </div>
          <div style={{padding: '4px 0'}}>
            {lowStock.slice(0, 4).map(p => {
              const lvl = stockLevel(p);
              const pct = Math.min(100, (p.stock / Math.max(p.min * 2, 1)) * 100);
              return (
                <div key={p.id} className="flex gap-12" style={{padding: '11px 18px', borderBottom: '1px solid var(--border)'}}>
                  <div style={{flex: 1, minWidth: 0}}>
                    <div className="fw-500" style={{fontSize: 13}}>{p.name}</div>
                    <div className="text-xs muted mono">{p.sku}</div>
                  </div>
                  <div style={{width: 200}}>
                    <div className="flex-between" style={{marginBottom: 4}}>
                      <span className="text-xs muted">คงเหลือ <span className="mono fw-600" style={{color: lvl === 'crit' || lvl === 'out' ? 'var(--red)' : 'var(--amber)'}}>{p.stock}</span> / ขั้นต่ำ {p.min}</span>
                      {lvl === 'crit' && <span className="pill pill-red">วิกฤต</span>}
                      {lvl === 'low' && <span className="pill pill-amber">ใกล้หมด</span>}
                      {lvl === 'out' && <span className="pill pill-red">หมด</span>}
                    </div>
                    <div className="stock-bar">
                      <div className={`stock-bar-fill ${lvl}`} style={{width: pct + '%'}}/>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}

window.Dashboard = Dashboard;