/* global React, ReactDOM, CATTERY_DATA, Dashboard, KittensList, ParentsList, KittenEditor, ParentEditor */

const { useState } = React;

const NAV = [
  { id: 'dashboard', cn: '首页',     en: 'home',      icon: '✦' },
  { id: 'kittens',   cn: '小猫们',   en: 'kittens',   icon: '◐' },
  { id: 'parents',   cn: '种猫们',   en: 'breeders',  icon: '◉' },
  { id: 'breeding',  cn: '繁育计划', en: 'breeding',  icon: '✿' },
  { id: 'calendar',  cn: '日程日历', en: 'calendar',  icon: '☷' },
  { id: 'crm',       cn: '客户',     en: 'customers', icon: '♢' },
  { id: 'finance',   cn: '账本',     en: 'finance',   icon: '¥' },
  { id: 'analytics', cn: '数据',     en: 'analytics', icon: '◰' },
  { id: 'todos',     cn: '待办',     en: 'todo',      icon: '☐', badge: '3' },
  { id: 'settings',  cn: '设置',     en: 'settings',  icon: '✸' },
];

const AdminApp = () => {
  const [view, setView] = useState({ name: 'dashboard' });
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [wizardOpen, setWizardOpen] = useState(false);

  const navigate = (name, params = {}) => {
    setView({ name, ...params });
    setSidebarOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const editKitten = (id, initialTab) => navigate('kitten-editor', { kittenId: id, initialTab });
  const editParent = (id) => navigate('parent-editor', { parentId: id });
  const launchWizard = () => setWizardOpen(true);

  let mainContent;
  switch (view.name) {
    case 'kittens':
      mainContent = <KittensList data={CATTERY_DATA} onEditKitten={editKitten} onLaunchWizard={launchWizard} />;
      break;
    case 'parents':
      mainContent = <ParentsList data={CATTERY_DATA} onEditParent={editParent} />;
      break;
    case 'kitten-editor':
      mainContent = <KittenEditor kittenId={view.kittenId} initialTab={view.initialTab} data={CATTERY_DATA} onBack={() => navigate('kittens')} />;
      break;
    case 'parent-editor':
      mainContent = <ParentEditor parentId={view.parentId} data={CATTERY_DATA} onBack={() => navigate('parents')} />;
      break;
    case 'breeding':
      mainContent = <Breeding data={CATTERY_DATA} onEditParent={editParent} />;
      break;
    case 'calendar':
      mainContent = <Calendar data={CATTERY_DATA} />;
      break;
    case 'crm':
      mainContent = <CRM data={CATTERY_DATA} />;
      break;
    case 'finance':
      mainContent = <Finance data={CATTERY_DATA} />;
      break;
    case 'analytics':
      mainContent = <Analytics data={CATTERY_DATA} />;
      break;
    case 'todos':
      mainContent = (
        <div>
          <div className="page-head">
            <div>
              <h1>{Bi('待办', 'to-do')}</h1>
              <div className="sub">{tx('所有待处理的事项', 'Everything that needs your attention')}</div>
            </div>
          </div>
          <div className="card">
            <div className="reminder-list">
              <div className="reminder-row">
                <div className="thumb" style={{ background: '#e8c97a' }}><div className="placeholder-photo" data-label="mochi" style={{ '--ph-bg': '#e8c97a' }} /></div>
                <div className="meta">
                  <div className="name">{tx('软糖 · Mochi', 'Mochi')} <span style={{ color: 'var(--ink-soft)', fontFamily: 'var(--font-cn-hand)', fontSize: 12 }}>{tx('预约 6 月 4 日上门', 'Pickup booked Jun 4')}</span></div>
                  <div className="info">{tx('陈女士 · 还差最后一针疫苗', 'Ms. Chen · one vaccine left')}</div>
                </div>
                <div className="when warn">{tx('10 天后', 'in 10 days')}</div>
                <button className="btn btn-primary btn-sm">{tx('查看', 'View')}</button>
              </div>
              <div className="reminder-row">
                <div className="thumb" style={{ background: '#c89668' }}><div className="placeholder-photo" data-label="caramel" style={{ '--ph-bg': '#c89668' }} /></div>
                <div className="meta">
                  <div className="name">{tx('焦糖 · Caramel', 'Caramel')}</div>
                  <div className="info">{tx('还没有客户 · 是否准备发布到公开列表？', 'No customer yet · publish to the public list?')}</div>
                </div>
                <div className="when">{tx('尚未分配', 'Unassigned')}</div>
                <button className="btn btn-outline btn-sm">{tx('分配客户', 'Assign customer')}</button>
              </div>
              <div className="reminder-row">
                <div className="thumb" style={{ background: '#e8e4dd' }}><div className="placeholder-photo" data-label="snowy" style={{ '--ph-bg': '#e8e4dd' }} /></div>
                <div className="meta">
                  <div className="name">{tx('雪团 · Snowy', 'Snowy')}</div>
                  <div className="info">{tx('写真集已 3 周未更新', 'Photo album not updated in 3 weeks')}</div>
                </div>
                <div className="when warn">{tx('21 天前', '21 days ago')}</div>
                <button className="btn btn-outline btn-sm">{tx('去添加', 'Add')}</button>
              </div>
            </div>
          </div>
        </div>
      );
      break;
    case 'settings':
      mainContent = (
        <div>
          <div className="page-head">
            <div>
              <h1>{Bi('设置', 'settings')}</h1>
              <div className="sub">{tx('账号 · 猫舍资料 · 提醒', 'Account · Cattery · Reminders')}</div>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><div><h3>{tx('个人资料', 'Profile')}</h3>{window.LANG !== 'en' && <span className="en">profile</span>}</div></div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 18 }}>
              <div className="sidebar-footer" style={{ border: 'none', padding: 0, margin: 0 }}>
                <div className="avatar" style={{ width: 64, height: 64, fontSize: 24 }}>{tx('阿', 'A')}</div>
              </div>
              <div>
                <button className="btn btn-outline btn-sm">{tx('更换头像', 'Change avatar')}</button>
                <div style={{ fontSize: 11, color: 'var(--ink-faint)', marginTop: 4, fontFamily: 'var(--font-cn-hand)' }}>{tx('jpg / png · 推荐方形', 'jpg / png · square recommended')}</div>
              </div>
            </div>
            <div className="field-row">
              <Field label="姓名" labelEn="name"><Input value={tx('阿喵', 'Amy')} /></Field>
              <Field label="英文名" labelEn="english"><Input value="Amy" /></Field>
            </div>
            <div className="field-row">
              <Field label="手机号" labelEn="phone"><Input value="138 8888 8888" /></Field>
              <Field label="邮箱" labelEn="email"><Input value="amy@meuwoo.cn" /></Field>
            </div>
            <Field label="微信号" labelEn="wechat"><Input value="meuwoo_cat" /></Field>
            <div style={{ display: 'flex', gap: 8, marginTop: 6 }}>
              <button className="btn btn-primary btn-sm">{tx('保存修改', 'Save')}</button>
              <span className="save-flash show" style={{ alignSelf: 'center' }}>{tx('2 分钟前自动保存', 'auto-saved 2 min ago')}</span>
            </div>
          </div>

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

          <div className="card">
            <div className="card-head">
              <div><h3>{tx('修改密码', 'Password')}</h3>{window.LANG !== 'en' && <span className="en">password</span>}</div>
              <span style={{ fontFamily: 'var(--font-cn-hand)', fontSize: 12, color: 'var(--ink-soft)' }}>{tx('上次修改：2025.11.03', 'Last changed 2025.11.03')}</span>
            </div>
            <Field label="原密码" labelEn="current"><input type="password" className="input" placeholder={tx('请输入当前密码', 'Current password')} /></Field>
            <div className="field-row">
              <Field label="新密码" labelEn="new" hint={tx('至少 8 位，包含字母和数字', 'At least 8 chars, letters and numbers')}><input type="password" className="input" placeholder={tx('新密码', 'New password')} /></Field>
              <Field label="确认新密码" labelEn="confirm"><input type="password" className="input" placeholder={tx('再输一次', 'Re-enter')} /></Field>
            </div>
            <button className="btn btn-primary btn-sm">{tx('更新密码', 'Update password')}</button>
          </div>

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

          <div className="card">
            <div className="card-head"><div><h3>{tx('猫舍信息', 'Cattery')}</h3>{window.LANG !== 'en' && <span className="en">cattery</span>}</div></div>
            <div className="field-row">
              <Field label="猫舍名" labelEn="name"><Input value="Meuwoo Cattery" /></Field>
              <Field label="中文名" labelEn="cn"><Input value="喵屋猫舍" /></Field>
            </div>
            <Field label="联系方式" labelEn="contact"><Input value={tx('weibo @meuwoo · 微信 meuwoo_cat', 'weibo @meuwoo · WeChat meuwoo_cat')} /></Field>
            <Field label="标语" labelEn="motto"><Input value={tx('每一只小猫都被珍视 — where every kitten is cherished', 'where every kitten is cherished')} /></Field>
          </div>

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

          <div className="card">
            <div className="card-head"><div><h3>{tx('提醒规则', 'Reminders')}</h3>{window.LANG !== 'en' && <span className="en">reminders</span>}</div></div>
            <Field label="多久未更新算逾期" labelEn="overdue threshold"><Input value={tx('2 天', '2 days')} /></Field>
            <Field label="发送时间" labelEn="daily reminder"><Input value={tx('每天 09:00', 'Daily 09:00')} /></Field>
          </div>

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

          <div className="card" style={{ borderColor: 'var(--rose-pale)' }}>
            <div className="card-head">
              <div>
                <h3 style={{ color: 'var(--rose)' }}>{tx('账号操作', 'Account')}</h3>
                {window.LANG !== 'en' && <span className="en">account</span>}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <a className="btn btn-danger btn-sm" href={langHref('Meuwoo Login.html')}>↩ {tx('退出登录', 'Log out')}</a>
              <button className="btn btn-ghost btn-sm">{tx('导出全部数据', 'Export all data')}</button>
            </div>
          </div>
        </div>
      );
      break;
    case 'dashboard':
    default:
      mainContent = <Dashboard data={CATTERY_DATA} onNavigate={navigate} onEditKitten={editKitten} />;
  }

  return (
    <div className="admin-shell">
      <aside className={`sidebar ${sidebarOpen ? 'open' : ''}`}>
        <div className="sidebar-brand">
          <span className="en">Meuwoo</span>
          <span className="cn">{tx('管理后台', 'admin console')}</span>
        </div>
        <div className="sidebar-section">
          <div className="sidebar-section-label">menu</div>
          {NAV.map(n => (
            <button
              key={n.id}
              className={`nav-item ${(view.name === n.id || (n.id === 'kittens' && view.name === 'kitten-editor') || (n.id === 'parents' && view.name === 'parent-editor')) ? 'active' : ''}`}
              onClick={() => navigate(n.id)}
            >
              <span className="icon">{n.icon}</span>
              {Bi(n.cn, n.en)}
              {n.badge && <span className="badge">{n.badge}</span>}
            </button>
          ))}
        </div>
        <div className="sidebar-section">
          <div className="sidebar-section-label">shortcuts</div>
          <a className="nav-item" href={langHref('Meuwoo Cattery.html')} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
            <span className="icon">↗</span>
            {Bi('客户视图', 'customer view')}
          </a>
          <a className="nav-item" href={langHref('Meuwoo Mobile Admin.html')} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
            <span className="icon">▢</span>
            {Bi('手机版后台', 'mobile')}
          </a>
        </div>
        <div className="sidebar-footer">
          <button className="sf-account" onClick={() => navigate('settings')}>
            <div className="avatar">{tx('阿', 'A')}</div>
            <div className="who">
              <span className="name">{tx('阿喵', 'Amy')}</span>
              <span className="role">cattery owner</span>
            </div>
            <span className="sf-gear">⚙</span>
          </button>
          <a className="sf-logout" href={langHref('Meuwoo Login.html')} title={tx('退出登录', 'Log out')}>↩</a>
        </div>
      </aside>

      <main className="main">
        <button className="mobile-menu" onClick={() => setSidebarOpen(o => !o)}>≡ {tx('菜单', 'menu')}</button>
        {mainContent}
      </main>

      <NewLitterWizard
        data={CATTERY_DATA}
        open={wizardOpen}
        onClose={() => setWizardOpen(false)}
        onComplete={() => navigate('kittens')}
      />
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<AdminApp />);