/* global React, Placeholder, Avatar */
// Admin views: Dashboard, KittensList, ParentsList

// ============ Dashboard ============
const Dashboard = ({ data, onNavigate, onEditKitten }) => {
  const status = data.kittenStatus;
  const all = Object.values(data.kittens);
  const totalKittens = all.length;
  const reserved = all.filter(k => status[k.id]?.status === 'reserved').length;
  const available = all.filter(k => status[k.id]?.status === 'available').length;
  const adopted = all.filter(k => status[k.id]?.status === 'adopted').length;

  // 待更新的小猫：reserved 状态且 lastUpdated 不是今天
  const today = '2026.05.21';
  const pending = all.filter(k => {
    const s = status[k.id];
    return s?.status === 'reserved' && !s.lastUpdated.startsWith(today);
  });

  const recentActivity = window.LANG === 'en' ? [
    { time: 'Today 09:42', body: <><span className="who">Amy</span> added a new photo to <span className="who">Mochi</span> <span className="what">"First time scaling the cat tree solo"</span></> },
    { time: 'Today 09:38', body: <><span className="who">Amy</span> updated <span className="who">Milk</span>'s <span className="what">weight record</span></> },
    { time: 'Yesterday 18:20', body: <><span className="who">Amy</span> completed <span className="who">Mochi</span>'s <span className="what">second vaccine milestone</span></> },
    { time: 'Yesterday 14:05', body: <><span className="who">Amy</span> sent <span className="who">Caramel</span>'s <span className="what">customer link to Ms. Zhou</span></> },
    { time: '2 days ago', body: <><span className="who">Amy</span> created <span className="who">Caramel</span>'s <span className="what">page</span></> },
  ] : [
    { time: '今天 09:42', body: <><span className="who">阿喵</span> 给 <span className="who">软糖</span> <span className="what">添加了新照片"今天第一次自己跳上猫爬架顶端"</span></> },
    { time: '今天 09:38', body: <><span className="who">阿喵</span> 更新了 <span className="who">牛奶</span> <span className="what">的体重记录</span></> },
    { time: '昨天 18:20', body: <><span className="who">阿喵</span> 给 <span className="who">软糖</span> <span className="what">完成了第二针疫苗里程碑</span></> },
    { time: '昨天 14:05', body: <><span className="who">阿喵</span> 发送了 <span className="who">焦糖</span> <span className="what">的客户链接给 周女士</span></> },
    { time: '前天', body: <><span className="who">阿喵</span> 新建了 <span className="who">焦糖</span> <span className="what">的页面</span></> },
  ];

  return (
    <div>
      <div className="page-head">
        <div>
          <h1>
            {Bi('早上好，阿喵', 'Good morning, Amy')}
          </h1>
          <div className="sub">{window.LANG === 'en'
            ? `Thursday, May 21, 2026 · ${pending.length} kitten${pending.length === 1 ? '' : 's'} still need updates today`
            : `2026 年 5 月 21 日 · 周四 · 今天还有 ${pending.length} 只小猫需要更新`}</div>
        </div>
      </div>

      <div className="stats-grid">
        <div className={`stat-tile ${pending.length > 0 ? 'urgent' : ''}`}>
          <div className="label">{Bi('今日待更新', 'to-do')}</div>
          <div className="value">{pending.length}</div>
          <div className="delta">{pending.length > 0 ? tx('别忘了让小主人放心 ♡', "Don't keep the families waiting ♡") : tx('全部已完成 ✓', 'All done ✓')}</div>
        </div>
        <div className="stat-tile">
          <div className="label">{Bi('在窝小猫', 'kittens')}</div>
          <div className="value">{totalKittens - adopted}</div>
          <div className="delta">{window.LANG === 'en' ? `${totalKittens} total · ${reserved} reserved · ${available} available` : `共 ${totalKittens} 只 · 已分配 ${reserved} · 可领养 ${available}`}</div>
        </div>
        <div className="stat-tile">
          <div className="label">{Bi('已回家', 'adopted')}</div>
          <div className="value">{adopted}</div>
          <div className="delta">{window.LANG === 'en' ? `${adopted} families following along` : `${adopted} 个家庭长期关注更新中`}</div>
        </div>
        <div className="stat-tile">
          <div className="label">{Bi('本月新增更新', 'posts')}</div>
          <div className="value">42</div>
          <div className="delta">{tx('↑ 比上月多 7 篇', '↑ 7 more than last month')}</div>
        </div>
      </div>

      <div className="dash-grid">
        {/* Pending kittens */}
        <div className="card">
          <div className="card-head">
            <div>
              <h3>{tx('今天需要更新', "Today's updates")}</h3>
              {window.LANG !== 'en' && <span className="en">today's reminders</span>}
            </div>
            <button className="btn btn-ghost btn-sm" onClick={() => onNavigate('kittens')}>{tx('看全部', 'See all')}</button>
          </div>
          {pending.length === 0 ? (
            <div className="empty">
              {tx('全部小猫今天都已经更新过了 ✿', 'Every kitten is up to date today ✿')}
              {window.LANG !== 'en' && <span className="en">all caught up</span>}
            </div>
          ) : (
            <div className="reminder-list">
              {pending.map(k => {
                const s = status[k.id];
                const days = Math.floor((Date.now() - new Date(s.lastUpdated.split(' ')[0].replace(/\./g, '-')).getTime()) / (1000 * 60 * 60 * 24));
                return (
                  <div className="reminder-row" key={k.id}>
                    <div className="thumb">
                      <Placeholder color={k.color} label={k.nameEn} />
                    </div>
                    <div className="meta">
                      <div className="name">{pick(k, 'name')}{window.LANG !== 'en' && <span className="en">· {k.nameEn}</span>}</div>
                      <div className="info">
                        {window.LANG === 'en'
                          ? `${pick(k, 'breed')} · Customer ${pick(s, 'customer')} · Updated ${s.lastUpdated}`
                          : `${k.breed} · 客户 ${s.customer} · 上次更新 ${s.lastUpdated}`}
                      </div>
                    </div>
                    <div className={`when ${days >= 2 ? '' : 'warn'}`}>
                      {window.LANG === 'en' ? `${days}d no update` : `${days} 天没更新`}
                    </div>
                    <button className="btn btn-primary btn-sm" onClick={() => onEditKitten(k.id, 'updates')}>
                      {tx('去更新 →', 'Update →')}
                    </button>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* Activity feed */}
        <div className="card">
          <div className="card-head">
            <div>
              <h3>{tx('动态', 'Activity')}</h3>
              {window.LANG !== 'en' && <span className="en">recent activity</span>}
            </div>
          </div>
          <div>
            {recentActivity.map((a, i) => (
              <div className="feed-item" key={i}>
                <div className="feed-time">{a.time}</div>
                <div className="feed-body">{a.body}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// ============ Kittens List ============
const KittensList = ({ data, onEditKitten, onLaunchWizard }) => {
  const [filter, setFilter] = React.useState('all');
  const status = data.kittenStatus;
  const all = Object.values(data.kittens);
  const counts = {
    all: all.length,
    reserved: all.filter(k => status[k.id]?.status === 'reserved').length,
    available: all.filter(k => status[k.id]?.status === 'available').length,
    adopted: all.filter(k => status[k.id]?.status === 'adopted').length,
  };
  const filtered = filter === 'all' ? all : all.filter(k => status[k.id]?.status === filter);

  const statusLabel = {
    reserved: { cn: '已分配客户', en: 'reserved' },
    available: { cn: '可领养', en: 'available' },
    adopted: { cn: '已回家', en: 'adopted' },
  };

  return (
    <div>
      <div className="page-head">
        <div>
          <h1>
            {Bi('小猫们', 'kittens')}
          </h1>
          <div className="sub">{tx('管理猫舍所有小猫的页面和日常更新', 'Manage every kitten page and daily update')}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-outline" onClick={onLaunchWizard}>{tx('✿ 新窝向导', '✿ New litter')}</button>
          <button className="btn btn-primary">{tx('+ 单只新建', '+ Add one')}</button>
        </div>
      </div>

      <div className="filter-row">
        {[
          { id: 'all', label: tx('全部', 'All') },
          { id: 'reserved', label: tx('已分配', 'Reserved') },
          { id: 'available', label: tx('可领养', 'Available') },
          { id: 'adopted', label: tx('已回家', 'Adopted') },
        ].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="kitten-grid">
        {filtered.map(k => {
          const s = status[k.id] || {};
          const sl = statusLabel[s.status] || statusLabel.available;
          return (
            <div className="kitten-tile" key={k.id} onClick={() => onEditKitten(k.id)}>
              <div className="portrait-lg" style={{ backgroundColor: k.color }}>
                <Placeholder color={k.color} label={k.nameEn} />
              </div>
              <div className="row1">
                <div>
                  <div className="name">{pick(k, 'name')}</div>
                  {window.LANG !== 'en' && <div className="name-en">{k.nameEn}</div>}
                </div>
                <span className={`status-pill ${s.status}`}>{tx(sl.cn, sl.en)}</span>
              </div>
              <div className="info">
                {pick(k, 'breed')}<br />
                {k.born} · {pick(k, 'gender') || '—'}
              </div>
              <div className="row-bottom">
                <span className="since">{s.lastUpdated ? (window.LANG === 'en' ? 'Last ' : '上次 ') + s.lastUpdated.split(' ')[0] : tx('未更新', 'No update')}</span>
                {s.customer && <span style={{ fontFamily: 'var(--font-cn-hand)', fontSize: 11, color: 'var(--ink-soft)' }}>{tx('客户: ', 'Customer: ')}{pick(s, 'customer')}</span>}
              </div>
            </div>
          );
        })}
        <div className="kitten-tile add" onClick={onLaunchWizard}>
          <div className="plus">+</div>
          {tx('新建小猫', 'New kitten')}
          {window.LANG !== 'en' && <span className="en" style={{ fontFamily: 'var(--font-hand)', fontSize: 13, color: 'inherit', opacity: 0.7 }}>new kitten / litter</span>}
        </div>
      </div>
    </div>
  );
};

// ============ Parents List ============
const ParentsList = ({ data, onEditParent }) => {
  const parents = Object.values(data.parents);
  return (
    <div>
      <div className="page-head">
        <div>
          <h1>
            {Bi('种猫们', 'breeding cats')}
          </h1>
          <div className="sub">{tx('猫舍的种公种母 · 后续小猫族谱的根', 'Your sires and dams · roots of every future litter')}</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-primary">{window.LANG === 'en' ? '+ New breeder' : <>+ 新建种猫 <span className="en">new</span></>}</button>
        </div>
      </div>

      <div className="kitten-grid">
        {parents.map(p => (
          <div className="kitten-tile" key={p.id} onClick={() => onEditParent(p.id)}>
            <div className="portrait-lg" style={{ backgroundColor: p.color }}>
              <Placeholder color={p.color} label={p.nameEn} />
            </div>
            <div className="row1">
              <div>
                <div className="name">{pick(p, 'name')}</div>
                {window.LANG !== 'en' && <div className="name-en">{p.nameEn}</div>}
              </div>
              <span className={`status-pill ${p.role === 'mom' ? 'reserved' : 'available'}`}>
                {p.role === 'mom' ? tx('种母', 'Dam') : tx('种公', 'Sire')}
              </span>
            </div>
            <div className="info">
              {pick(p, 'breed')}<br />
              {window.LANG === 'en' ? `${pick(p, 'eyes')} eyes · ${p.born}` : `${p.eyes}眼 · ${p.born}`}
            </div>
            <div className="row-bottom">
              <span className="since">{window.LANG === 'en' ? `${p.childrenIds.length} kittens` : `${p.childrenIds.length} 只孩子`}</span>
              <span style={{ fontFamily: 'var(--font-hand)', fontSize: 13, color: 'var(--gold)' }}>{tx('查看 →', 'View →')}</span>
            </div>
          </div>
        ))}
        <div className="kitten-tile add">
          <div className="plus">+</div>
          {tx('新建种猫', 'New breeder')}
          {window.LANG !== 'en' && <span className="en" style={{ fontFamily: 'var(--font-hand)', fontSize: 13, color: 'inherit', opacity: 0.7 }}>new breeder</span>}
        </div>
      </div>
    </div>
  );
};

window.Dashboard = Dashboard;
window.KittensList = KittensList;
window.ParentsList = ParentsList;