/* global React, Placeholder, Field, Input, Textarea */
// Admin views (extended): Calendar, Breeding, CRM, Finance, Analytics

const { useState, useMemo } = React;

// ===================== Calendar =====================
const EVENT_STYLES = {
  vaccine:  { color: 'var(--leaf)',  bg: 'var(--leaf-pale)', cn: '疫苗', en: 'vaccine',    dot: '⊕' },
  deworm:   { color: 'var(--gold)',  bg: 'var(--gold-pale)', cn: '驱虫', en: 'deworming',  dot: '◯' },
  vetVisit: { color: '#5a7fa0',      bg: '#e2ecf3',         cn: '产检', en: 'vet visit',  dot: '✚' },
  pickup:   { color: 'var(--rose)',  bg: 'var(--rose-pale)', cn: '接猫', en: 'pickup',     dot: '✿' },
  birth:    { color: 'var(--ink)',   bg: 'var(--bg-deep)',  cn: '分娩', en: 'birth',      dot: '♡' },
};

const Calendar = ({ data }) => {
  const [month, setMonth] = useState({ y: 2026, m: 5 }); // May 2026
  const events = data.events || [];
  const byDate = useMemo(() => {
    const map = {};
    events.forEach(e => { (map[e.date] = map[e.date] || []).push(e); });
    return map;
  }, [events]);

  const firstDay = new Date(month.y, month.m - 1, 1).getDay();
  const daysInMonth = new Date(month.y, month.m, 0).getDate();
  const cells = [];
  for (let i = 0; i < firstDay; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);

  const today = { y: 2026, m: 5, d: 21 };
  const fmt = (d) => `${month.y}.${String(month.m).padStart(2, '0')}.${String(d).padStart(2, '0')}`;

  const upcoming = events
    .filter(e => !e.done)
    .sort((a, b) => a.date.localeCompare(b.date))
    .slice(0, 6);

  const prev = () => setMonth(m => m.m === 1 ? { y: m.y - 1, m: 12 } : { ...m, m: m.m - 1 });
  const next = () => setMonth(m => m.m === 12 ? { y: m.y + 1, m: 1 } : { ...m, m: m.m + 1 });

  return (
    <div>
      <div className="page-head">
        <div>
          <h1>{Bi('日程日历', 'calendar')}</h1>
          <div className="sub">{tx('疫苗 · 驱虫 · 产检 · 接猫 · 全部安排在一处', 'Vaccines · deworming · vet visits · pickups — all in one place')}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost">{tx('+ 添加事件', '+ Add event')}</button>
          <button className="btn btn-primary">{tx('同步到日历 App', 'Sync to Calendar')}</button>
        </div>
      </div>

      <div className="cal-grid">
        <div className="card cal-month">
          <div className="cal-head">
            <button className="cal-nav" onClick={prev}>‹</button>
            <div className="cal-title">
              {window.LANG === 'en'
                ? `${new Date(month.y, month.m - 1).toLocaleString('en', { month: 'long' })} ${month.y}`
                : <>{month.y} 年 {month.m} 月<span className="en">{new Date(month.y, month.m - 1).toLocaleString('en', { month: 'long' })} {month.y}</span></>
              }
            </div>
            <button className="cal-nav" onClick={next}>›</button>
          </div>
          <div className="cal-weekdays">
            {(window.LANG === 'en'
              ? ['Su','Mo','Tu','We','Th','Fr','Sa']
              : ['日','一','二','三','四','五','六']
            ).map(w => <div key={w}>{w}</div>)}
          </div>
          <div className="cal-cells">
            {cells.map((d, i) => {
              if (d === null) return <div className="cal-cell empty" key={'e' + i} />;
              const evs = byDate[fmt(d)] || [];
              const isToday = month.y === today.y && month.m === today.m && d === today.d;
              return (
                <div className={`cal-cell ${isToday ? 'today' : ''} ${evs.length ? 'has-events' : ''}`} key={d}>
                  <div className="cal-day-num">{d}</div>
                  <div className="cal-dots">
                    {evs.slice(0, 3).map(e => (
                      <span
                        key={e.id}
                        className="cal-evdot"
                        style={{ background: EVENT_STYLES[e.type]?.color }}
                        title={e.title}
                      />
                    ))}
                    {evs.length > 3 && <span className="cal-evmore">+{evs.length - 3}</span>}
                  </div>
                </div>
              );
            })}
          </div>
          <div className="cal-legend">
            {Object.entries(EVENT_STYLES).map(([k, v]) => (
              <span key={k} className="legend-item">
                <span className="legend-dot" style={{ background: v.color }} />
                {tx(v.cn, v.en)}
              </span>
            ))}
          </div>
        </div>

        <div className="card cal-upcoming">
          <div className="card-head">
            <div>
              <h3>{tx('即将到来', 'Upcoming')}</h3>
              {window.LANG !== 'en' && <span className="en">upcoming</span>}
            </div>
          </div>
          <div className="upcoming-list">
            {upcoming.map(e => {
              const s = EVENT_STYLES[e.type];
              return (
                <div className="upcoming-row" key={e.id}>
                  <div className="upcoming-date">
                    {window.LANG === 'en'
                      ? <><span className="month">{new Date(e.date.replace(/\./g, '-')).toLocaleString('en', { month: 'short' })}</span><span className="day">{parseInt(e.date.split('.')[2])}</span></>
                      : <><span className="month">{e.date.split('.')[1]}月</span><span className="day">{parseInt(e.date.split('.')[2])}</span></>
                    }
                  </div>
                  <div className="upcoming-body">
                    <div className="up-title">
                      <span className="type-pill" style={{ background: s?.bg, color: s?.color }}>{tx(s?.cn, s?.en)}</span>
                      {pick(e, 'title')}
                    </div>
                    <div className="up-time">{e.time}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

// ===================== Breeding (pregnancy tracker) =====================
const Breeding = ({ data, onEditParent }) => {
  const list = data.breeding || [];
  const current = list.filter(b => b.status === 'pregnant');
  const past = list.filter(b => b.status === 'past');
  const today = new Date('2026-05-21');

  return (
    <div>
      <div className="page-head">
        <div>
          <h1>{Bi('繁育计划', 'breeding')}</h1>
          <div className="sub">{tx('追踪每一窝的怀孕进度、产检和过往记录', 'Track pregnancy progress, vet visits, and past litters')}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-primary">{tx('+ 新的配对', '+ New pair')}</button>
        </div>
      </div>

      <div className="stats-grid">
        <div className="stat-tile">
          <div className="label">{Bi('当前怀孕', 'pregnant')}</div>
          <div className="value">{current.length}</div>
          <div className="delta">{current.length > 0 ? tx('注意营养与情绪', 'Watch nutrition & stress') : tx('暂无', 'None')}</div>
        </div>
        <div className="stat-tile">
          <div className="label">{Bi('近期产检', 'vet visits')}</div>
          <div className="value">2</div>
          <div className="delta">{tx('下次 5 月 28 日', 'Next: May 28')}</div>
        </div>
        <div className="stat-tile">
          <div className="label">{Bi('历史窝数', 'past litters')}</div>
          <div className="value">{past.length}</div>
          <div className="delta">{window.LANG === 'en'
            ? `${past.reduce((s, b) => s + (b.kittenIds?.length || 0), 0)} kittens total`
            : `共产下 ${past.reduce((s, b) => s + (b.kittenIds?.length || 0), 0)} 只小猫`}</div>
        </div>
        <div className="stat-tile">
          <div className="label">{Bi('最近一窝', 'latest')}</div>
          <div className="value" style={{ fontSize: 22 }}>{tx('情人节窝', "Valentine's litter")}</div>
          <div className="delta">{tx('2026.02.14 · 3 只', '2026.02.14 · 3 kittens')}</div>
        </div>
      </div>

      {current.length > 0 && (
        <div style={{ marginTop: 6 }}>
          <h3 style={{ fontFamily: 'var(--font-cn-hand)', fontSize: 18, letterSpacing: 3, color: 'var(--ink)', margin: '12px 0' }}>
            {tx('当前怀孕', 'Current Pregnancies')}
            {window.LANG !== 'en' && <span style={{ fontFamily: 'var(--font-hand)', color: 'var(--gold)', marginLeft: 8 }}>current pregnancies</span>}
          </h3>
          {current.map(b => {
            const mom = data.parents[b.momId];
            const dad = data.parents[b.dadId];
            const due = new Date(b.dueDate.replace(/\./g, '-'));
            const daysLeft = Math.round((due - today) / (1000 * 60 * 60 * 24));
            const pregDays = Math.round((today - new Date(b.mated.replace(/\./g, '-'))) / (1000 * 60 * 60 * 24));
            const pct = Math.min(100, Math.max(0, (pregDays / 63) * 100));
            return (
              <div className="preg-card" key={b.id}>
                <div className="preg-parents">
                  <div className="preg-cat" onClick={() => onEditParent(mom.id)}>
                    <div className="preg-portrait" style={{ backgroundColor: mom.color }}>
                      <Placeholder color={mom.color} label={mom.nameEn} />
                    </div>
                    <div className="preg-name">{pick(mom, 'name')} {window.LANG !== 'en' && <span>{mom.nameEn}</span>}</div>
                    <div className="preg-role">{tx('妈妈', 'Mama')}</div>
                  </div>
                  <div className="preg-x">×</div>
                  <div className="preg-cat" onClick={() => onEditParent(dad.id)}>
                    <div className="preg-portrait" style={{ backgroundColor: dad.color }}>
                      <Placeholder color={dad.color} label={dad.nameEn} />
                    </div>
                    <div className="preg-name">{pick(dad, 'name')} {window.LANG !== 'en' && <span>{dad.nameEn}</span>}</div>
                    <div className="preg-role">{tx('爸爸', 'Papa')}</div>
                  </div>
                </div>

                <div className="preg-progress">
                  <div className="preg-bar">
                    <div className="preg-fill" style={{ width: pct + '%' }} />
                    <div className="preg-marker" style={{ left: pct + '%' }}>
                      <span className="dot" />
                      <span className="label">{window.LANG === 'en' ? `Day ${pregDays}` : `第 ${pregDays} 天`}</span>
                    </div>
                  </div>
                  <div className="preg-bar-labels">
                    <span>{window.LANG === 'en' ? `${b.mated} mated` : `${b.mated} 配对`}</span>
                    <span style={{ textAlign: 'right' }}>
                      {window.LANG === 'en'
                        ? <>{b.dueDate} due · <strong>{daysLeft}</strong> days left</>
                        : <>{b.dueDate} 预产 · 还有 <strong>{daysLeft}</strong> 天</>}
                    </span>
                  </div>
                </div>

                <div className="preg-info">
                  <div className="preg-info-tile">
                    <div className="lab">{tx('本窝名', 'Litter name')}</div>
                    <div className="val">{pick(b, 'litterName')}</div>
                  </div>
                  <div className="preg-info-tile">
                    <div className="lab">{tx('下次产检', 'Next vet visit')}</div>
                    <div className="val">{b.vetCheck}</div>
                  </div>
                  <div className="preg-info-tile" style={{ flex: 2 }}>
                    <div className="lab">{tx('备注', 'Notes')}</div>
                    <div className="val" style={{ fontSize: 13 }}>{pick(b, 'notes')}</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      <div style={{ marginTop: 24 }}>
        <h3 style={{ fontFamily: 'var(--font-cn-hand)', fontSize: 18, letterSpacing: 3, color: 'var(--ink)', margin: '12px 0' }}>
          {tx('历史窝', 'Past Litters')}
          {window.LANG !== 'en' && <span style={{ fontFamily: 'var(--font-hand)', color: 'var(--gold)', marginLeft: 8 }}>past litters</span>}
        </h3>
        <div className="litter-timeline">
          {past.map(b => {
            const mom = data.parents[b.momId];
            const dad = data.parents[b.dadId];
            return (
              <div className="litter-card" key={b.id}>
                <div className="litter-date">{b.dueDate}</div>
                <div className="litter-name">{pick(b, 'litterName')}</div>
                <div className="litter-parents">
                  {pick(mom, 'name')} × {pick(dad, 'name')}
                </div>
                <div className="litter-kittens">
                  {(b.kittenIds || []).map(kid => {
                    const k = data.kittens[kid];
                    return k && (
                      <div className="lit-kit" key={kid}>
                        <div className="lit-thumb" style={{ backgroundColor: k.color }}>
                          <Placeholder color={k.color} label={k.nameEn} />
                        </div>
                        <span>{pick(k, 'name')}</span>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

// ===================== CRM =====================
const CRM = ({ data }) => {
  const [filter, setFilter] = useState('all');
  const [selectedId, setSelectedId] = useState(null);
  const customers = Object.values(data.customers || {});
  const counts = {
    all: customers.length,
    inquiry: customers.filter(c => c.status === 'inquiry').length,
    active: customers.filter(c => c.status === 'active').length,
    adopted: customers.filter(c => c.status === 'adopted').length,
    returning: customers.filter(c => c.status === 'returning').length,
  };
  const filtered = filter === 'all' ? customers : customers.filter(c => c.status === filter);
  const selected = selectedId ? data.customers[selectedId] : null;

  const statusInfo = {
    inquiry:   { cn: '询问中', en: 'Inquiry',   bg: 'var(--bg-deep)',     color: 'var(--ink-soft)' },
    active:    { cn: '进行中', en: 'Active',    bg: 'var(--gold-pale)',   color: 'var(--gold)' },
    adopted:   { cn: '已领养', en: 'Adopted',   bg: 'var(--leaf-pale)',   color: 'var(--leaf-deep)' },
    returning: { cn: '回头客', en: 'Returning', bg: 'var(--rose-pale)',   color: 'var(--rose)' },
  };

  return (
    <div>
      <div className="page-head">
        <div>
          <h1>{Bi('客户', 'customers')}</h1>
          <div className="sub">{tx('所有领养家庭与询问中的潜在客户', 'All adopting families and prospective inquiries')}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost">{tx('导出', 'Export')}</button>
          <button className="btn btn-primary">{tx('+ 新客户', '+ New customer')}</button>
        </div>
      </div>

      <div className="filter-row">
        {[
          { id: 'all',       label: tx('全部', 'All') },
          { id: 'inquiry',   label: tx('询问中', 'Inquiry') },
          { id: 'active',    label: tx('进行中', 'Active') },
          { id: 'adopted',   label: tx('已领养', 'Adopted') },
          { id: 'returning', label: tx('回头客', 'Returning') },
        ].map(f => (
          <button key={f.id} className={`chip ${filter === f.id ? 'active' : ''}`} onClick={() => setFilter(f.id)}>
            {f.label}<span className="count">{counts[f.id]}</span>
          </button>
        ))}
      </div>

      <div className="crm-grid">
        <div className="crm-list">
          {filtered.map(c => {
            const si = statusInfo[c.status];
            return (
              <div
                className={`crm-row ${selectedId === c.id ? 'sel' : ''}`}
                key={c.id}
                onClick={() => setSelectedId(c.id)}
              >
                <div className="crm-avatar">{pick(c, 'name').slice(0, 1)}</div>
                <div className="crm-meta">
                  <div className="crm-name">{pick(c, 'name')}<span style={{ marginLeft: 8, color: 'var(--ink-faint)', fontSize: 12, fontFamily: 'var(--font-cn-hand)' }}>· {pick(c, 'city')}</span></div>
                  <div className="crm-info">{c.wechat} · {c.phone}</div>
                </div>
                <div className="crm-meta-right">
                  <span className="status-pill" style={{ background: si.bg, color: si.color }}>{tx(si.cn, si.en)}</span>
                  <div className="crm-stats">
                    {c.kittenIds.length > 0
                      ? (window.LANG === 'en' ? `${c.kittenIds.length} kitten${c.kittenIds.length === 1 ? '' : 's'} · ¥${c.paid.toLocaleString()}` : `${c.kittenIds.length} 只 · ¥${c.paid.toLocaleString()}`)
                      : tx('尚未下单', 'No order yet')}
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        <div className="crm-detail card">
          {!selected ? (
            <div className="empty">
              {tx('从左侧选择一位客户', 'Select a customer')}
              {window.LANG !== 'en' && <span className="en">select a customer</span>}
            </div>
          ) : (
            <>
              <div className="crm-detail-head">
                <div className="crm-avatar lg">{pick(selected, 'name').slice(0, 1)}</div>
                <div>
                  <div className="crm-detail-name">{pick(selected, 'name')}</div>
                  <div className="crm-detail-meta">
                    {selected.wechat} · {selected.phone}<br />
                    {pick(selected, 'city')} · {window.LANG === 'en' ? `joined ${selected.joinedAt}` : `加入于 ${selected.joinedAt}`}
                  </div>
                </div>
                <span
                  className="status-pill"
                  style={{
                    background: statusInfo[selected.status].bg,
                    color: statusInfo[selected.status].color,
                    marginLeft: 'auto'
                  }}
                >
                  {tx(statusInfo[selected.status].cn, statusInfo[selected.status].en)}
                </span>
              </div>

              <div className="crm-detail-section">
                <div className="crm-section-title">{tx('关联小猫', 'Kittens')} · kittens</div>
                {selected.kittenIds.length === 0 ? (
                  <div className="empty" style={{ padding: 8 }}>{tx('暂无', 'None')}</div>
                ) : (
                  <div className="crm-kittens">
                    {selected.kittenIds.map(kid => {
                      const k = data.kittens[kid];
                      return k && (
                        <div className="crm-kitten" key={kid}>
                          <div className="crm-kit-thumb" style={{ backgroundColor: k.color }}>
                            <Placeholder color={k.color} label={k.nameEn} />
                          </div>
                          <div className="crm-kit-name">{pick(k, 'name')}</div>
                          <div className="crm-kit-en">{k.nameEn}</div>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>

              <div className="crm-detail-section">
                <div className="crm-section-title">{tx('付款', 'Payment')} · payment</div>
                <div className="payment-row">
                  <div className="pay-line">
                    <span className="pay-label">{tx('订金', 'Deposit')}</span>
                    <span className="pay-val">¥{selected.deposit.toLocaleString()}</span>
                  </div>
                  <div className="pay-line">
                    <span className="pay-label">{tx('总价', 'Total')}</span>
                    <span className="pay-val">¥{selected.total.toLocaleString()}</span>
                  </div>
                  <div className="pay-line">
                    <span className="pay-label">{tx('已付', 'Paid')}</span>
                    <span className="pay-val emphasis">¥{selected.paid.toLocaleString()}</span>
                  </div>
                  {selected.total > 0 && (
                    <div className="pay-bar"><div className="pay-fill" style={{ width: ((selected.paid / selected.total) * 100) + '%' }} /></div>
                  )}
                </div>
              </div>

              <div className="crm-detail-section">
                <div className="crm-section-title">{tx('备注', 'Notes')} · notes</div>
                <textarea className="input" defaultValue={pick(selected, 'notes')} rows={4} />
              </div>

              <div style={{ display: 'flex', gap: 8 }}>
                <button className="btn btn-primary btn-sm">{tx('发起聊天', 'Message')}</button>
                <button className="btn btn-outline btn-sm">{tx('查看历史', 'History')}</button>
                <button className="btn btn-ghost btn-sm">{tx('编辑', 'Edit')}</button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

// ===================== Finance =====================
const Finance = ({ data }) => {
  const entries = data.finance || [];
  const totalIncome = entries.filter(e => e.type === 'income').reduce((s, e) => s + e.amount, 0);
  const totalExpense = entries.filter(e => e.type === 'expense').reduce((s, e) => s + e.amount, 0);
  const net = totalIncome - totalExpense;
  const [period, setPeriod] = useState('month');

  // Build simple bar chart of last 12 months (mock)
  const monthlyData = [
    { m: '24.10', income: 18000, expense: 2400 },
    { m: '24.11', income: 12000, expense: 1800 },
    { m: '24.12', income: 26000, expense: 3200 },
    { m: '25.01', income: 8000, expense: 1500 },
    { m: '25.02', income: 32000, expense: 2800 },
    { m: '25.03', income: 14000, expense: 2100 },
    { m: '25.04', income: 19000, expense: 1900 },
    { m: '25.05', income: 27000, expense: 4200 },
    { m: '25.06', income: 11000, expense: 2200 },
    { m: '25.07', income: 8000, expense: 1700 },
    { m: '25.08', income: 21000, expense: 2400 },
    { m: '25.09', income: 16000, expense: 3100 },
  ];
  const maxBar = Math.max(...monthlyData.map(m => Math.max(m.income, m.expense)));

  return (
    <div>
      <div className="page-head">
        <div>
          <h1>{Bi('账本', 'finance')}</h1>
          <div className="sub">{tx('收支流水 · 帮你看清猫舍的真实健康', 'Income & expenses · your cattery\'s financial health at a glance')}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost">{tx('导出', 'Export')}</button>
          <button className="btn btn-primary">{tx('+ 记一笔', '+ Add entry')}</button>
        </div>
      </div>

      <div className="stats-grid">
        <div className="stat-tile">
          <div className="label">{Bi('本月收入', 'income')}</div>
          <div className="value" style={{ color: 'var(--leaf-deep)' }}>¥{totalIncome.toLocaleString()}</div>
          <div className="delta" style={{ color: 'var(--leaf-deep)' }}>{tx('↑ 比上月多 ¥4,200', '↑ ¥4,200 more than last month')}</div>
        </div>
        <div className="stat-tile">
          <div className="label">{Bi('本月支出', 'expense')}</div>
          <div className="value" style={{ color: 'var(--rose)' }}>¥{totalExpense.toLocaleString()}</div>
          <div className="delta">{tx('猫粮 · 医疗占大头', 'Food & vet bills are the top costs')}</div>
        </div>
        <div className="stat-tile">
          <div className="label">{Bi('本月净收益', 'net')}</div>
          <div className="value">¥{net.toLocaleString()}</div>
          <div className="delta">{window.LANG === 'en' ? `Margin ${Math.round((net / totalIncome) * 100)}%` : `利润率 ${Math.round((net / totalIncome) * 100)}%`}</div>
        </div>
        <div className="stat-tile">
          <div className="label">{Bi('待收尾款', 'receivable')}</div>
          <div className="value" style={{ color: 'var(--gold)' }}>¥16,000</div>
          <div className="delta">{tx('2 笔 · 6 月内到账', '2 payments due within June')}</div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <h3>{tx('近 12 个月', 'Last 12 months')}</h3>
            {window.LANG !== 'en' && <span className="en">12 months</span>}
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <button className={`chip ${period === 'month' ? 'active' : ''}`} onClick={() => setPeriod('month')}>{tx('月度', 'Monthly')}</button>
            <button className={`chip ${period === 'year' ? 'active' : ''}`} onClick={() => setPeriod('year')}>{tx('年度', 'Yearly')}</button>
          </div>
        </div>
        <div className="bar-chart">
          {monthlyData.map(m => (
            <div className="bar-col" key={m.m}>
              <div className="bar-stack">
                <div className="bar income" style={{ height: ((m.income / maxBar) * 140) + 'px' }} title={`${tx('收入', 'Income')} ¥${m.income}`} />
                <div className="bar expense" style={{ height: ((m.expense / maxBar) * 140) + 'px' }} title={`${tx('支出', 'Expense')} ¥${m.expense}`} />
              </div>
              <div className="bar-label">{m.m}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 18, justifyContent: 'center', marginTop: 12 }}>
          <span className="legend-item"><span className="legend-dot" style={{ background: 'var(--leaf)' }} />{tx('收入', 'Income')}</span>
          <span className="legend-item"><span className="legend-dot" style={{ background: 'var(--rose)' }} />{tx('支出', 'Expense')}</span>
        </div>
      </div>

      <div style={{ height: 16 }} />

      <div className="card">
        <div className="card-head">
          <div>
            <h3>{tx('最近流水', 'Recent entries')}</h3>
            {window.LANG !== 'en' && <span className="en">recent entries</span>}
          </div>
        </div>
        <div className="ledger-list">
          {entries.map(e => (
            <div className={`ledger-row ${e.type}`} key={e.id}>
              <div className="ledger-icon">{e.type === 'income' ? '↓' : '↑'}</div>
              <div className="ledger-body">
                <div className="ledger-title">
                  <span>{pick(e, 'source')}</span>
                  <span className="ledger-cat">{pick(e, 'category')}</span>
                </div>
                <div className="ledger-date">{e.date}</div>
              </div>
              <div className={`ledger-amount ${e.type}`}>
                {e.type === 'income' ? '+' : '-'}¥{e.amount.toLocaleString()}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ===================== Analytics =====================
const Analytics = ({ data }) => {
  const stats = data.analytics || {};
  const all = Object.entries(stats);
  const totalViews = all.reduce((s, [, v]) => s + v.views, 0);
  const totalWeek = all.reduce((s, [, v]) => s + v.weekViews, 0);
  const totalComments = all.reduce((s, [, v]) => s + (v.comments || 0), 0);

  return (
    <div>
      <div className="page-head">
        <div>
          <h1>{Bi('数据', 'analytics')}</h1>
          <div className="sub">{tx('每只小猫的页面被看了多少次 · 客户什么时候打开', 'How many times each kitten page was viewed · when customers check in')}</div>
        </div>
      </div>

      <div className="stats-grid">
        <div className="stat-tile">
          <div className="label">{Bi('总浏览', 'views')}</div>
          <div className="value">{totalViews}</div>
          <div className="delta">{window.LANG === 'en' ? `+${totalWeek} this week` : `本周 +${totalWeek}`}</div>
        </div>
        <div className="stat-tile">
          <div className="label">{Bi('本周浏览', 'this week')}</div>
          <div className="value" style={{ color: 'var(--leaf-deep)' }}>{totalWeek}</div>
          <div className="delta">{tx('↑ 比上周多 18', '↑ 18 more than last week')}</div>
        </div>
        <div className="stat-tile">
          <div className="label">{Bi('总评论', 'comments')}</div>
          <div className="value">{totalComments}</div>
          <div className="delta">{tx('17 条等待回复', '17 awaiting reply')}</div>
        </div>
        <div className="stat-tile">
          <div className="label">{Bi('平均停留', 'avg dwell')}</div>
          <div className="value" style={{ fontSize: 30 }}>2m 47s</div>
          <div className="delta">{tx('客户在认真看 ♡', 'Customers are engaged ♡')}</div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <h3>{tx('每只小猫的数据', 'Per-kitten stats')}</h3>
            {window.LANG !== 'en' && <span className="en">per kitten</span>}
          </div>
        </div>
        <table className="analytics-table">
          <thead>
            <tr>
              <th>{tx('小猫', 'Kitten')}</th>
              <th>{tx('总浏览', 'Views')}</th>
              <th>{tx('本周', 'This week')}</th>
              <th>{tx('独立访问', 'Unique')}</th>
              <th>{tx('平均停留', 'Avg dwell')}</th>
              <th>{tx('评论', 'Comments')}</th>
              <th>{tx('最近打开', 'Last opened')}</th>
            </tr>
          </thead>
          <tbody>
            {all.map(([id, s]) => {
              const k = data.kittens[id];
              if (!k) return null;
              return (
                <tr key={id}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{ width: 28, height: 28, borderRadius: '50%', backgroundColor: k.color, position: 'relative', overflow: 'hidden' }}>
                        <Placeholder color={k.color} label={k.nameEn} style={{ position: 'absolute', inset: 3, borderRadius: 'inherit' }} />
                      </div>
                      <span>{pick(k, 'name')} <span style={{ color: 'var(--gold)', fontFamily: 'var(--font-hand)' }}>· {k.nameEn}</span></span>
                    </div>
                  </td>
                  <td><strong>{s.views}</strong></td>
                  <td><span style={{ color: 'var(--leaf-deep)' }}>+{s.weekViews}</span></td>
                  <td>{s.uniqueVisitors}</td>
                  <td>{s.avgDuration}</td>
                  <td>{s.comments || 0}</td>
                  <td style={{ color: 'var(--ink-soft)', fontSize: 12 }}>{pick(s, 'lastViewed') || '—'}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div style={{ height: 16 }} />

      <div className="dash-grid">
        <div className="card">
          <div className="card-head">
            <div>
              <h3>{tx('最受欢迎的更新', 'Top updates')}</h3>
              {window.LANG !== 'en' && <span className="en">top photos</span>}
            </div>
          </div>
          <div className="top-photo-list">
            {[
              { kit: 'mochi',   captionZh: '今天第一次自己跳上猫爬架顶端', captionEn: 'First time scaling the cat tree solo',  views: 14, hearts: 8 },
              { kit: 'mochi',   captionZh: '和姐姐牛奶一起午睡',            captionEn: 'Napping with sister Milk',             views: 11, hearts: 6 },
              { kit: 'toffee',  captionZh: '太妃 1 岁生日',                  captionEn: "Toffee's 1st birthday",               views: 9,  hearts: 12 },
              { kit: 'caramel', captionZh: '焦糖第一次见鱼缸',               captionEn: "Caramel meets the fish tank",          views: 8,  hearts: 4 },
            ].map((p, i) => {
              const k = data.kittens[p.kit];
              return (
                <div className="top-photo-row" key={i}>
                  <div className="rank">{i + 1}</div>
                  <div className="tp-thumb" style={{ backgroundColor: k.color }}>
                    <Placeholder color={k.color} label={k.nameEn} />
                  </div>
                  <div className="tp-body">
                    <div className="tp-title">{tx(p.captionZh, p.captionEn)}</div>
                    <div className="tp-meta">{pick(k, 'name')} · ♥ {p.hearts}</div>
                  </div>
                  <div className="tp-views">{window.LANG === 'en' ? `${p.views}×` : `${p.views} 次`}</div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <h3>{tx('客户打开高峰', 'Peak hours')}</h3>
              {window.LANG !== 'en' && <span className="en">peak hours</span>}
            </div>
          </div>
          <div className="hours-chart">
            {[8,12,15,9,7,18,28,40,52,38,22,14].map((v, i) => (
              <div className="hour-col" key={i}>
                <div className="hour-bar" style={{ height: (v * 1.6) + 'px' }} />
                <div className="hour-label">{window.LANG === 'en' ? `${8 + i * 2}h` : `${8 + i * 2}时`}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 10, fontFamily: 'var(--font-cn-hand)', fontSize: 12, color: 'var(--ink-soft)', textAlign: 'center' }}>
            {tx('客户最常在晚上 8-10 点查看小猫近况，建议在此前完成当日更新', 'Customers most often check in between 8–10 pm — finish your daily updates before then')}
          </div>
        </div>
      </div>
    </div>
  );
};

window.Calendar = Calendar;
window.Breeding = Breeding;
window.CRM = CRM;
window.Finance = Finance;
window.Analytics = Analytics;