/* global React, Placeholder, Field, Input, Textarea, TagInput, ImageUpload, useSaveFlash */
// Admin editors: KittenEditor (6 tabs), ParentEditor (3 tabs)

const { useState, useEffect } = React;

const KittenEditor = ({ kittenId, data, initialTab, onBack }) => {
  const original = data.kittens[kittenId];
  const [kitten, setKitten] = useState(original);
  const [tab, setTab] = useState(initialTab || 'basic');
  const [saved, flash] = useSaveFlash();
  const status = data.kittenStatus[kittenId] || {};

  useEffect(() => { setKitten(data.kittens[kittenId]); setTab(initialTab || 'basic'); }, [kittenId, initialTab]);

  const patch = (changes) => {
    setKitten(k => ({ ...k, ...changes }));
    flash();
  };

  const TABS = [
    { id: 'basic',      cn: '基本信息', en: 'basic' },
    { id: 'updates',    cn: '成长日记', en: 'updates' },
    { id: 'milestones', cn: '重要时刻', en: 'milestones' },
    { id: 'health',     cn: '健康记录', en: 'health' },
    { id: 'note',       cn: '管家说',   en: 'note' },
    { id: 'contract',   cn: '领养合同', en: 'contract' },
    { id: 'link',       cn: '客户链接', en: 'link' },
  ];

  return (
    <div>
      <div className="editor-topbar">
        <button className="back" onClick={onBack}>‹ {tx('返回', 'Back')}</button>
        <div className="thumb" style={{ backgroundColor: kitten.color }}>
          <Placeholder color={kitten.color} label={kitten.nameEn} />
        </div>
        <div className="titles">
          <div className="name">{pick(kitten, 'name')} {window.LANG !== 'en' && <span style={{ fontFamily: 'var(--font-hand)', color: 'var(--gold)', fontSize: 14, marginLeft: 6 }}>· {kitten.nameEn}</span>}</div>
          <div className="name-en" style={{ fontSize: 13, color: 'var(--ink-soft)', fontFamily: 'var(--font-cn-hand)' }}>
            {pick(kitten, 'breed')} · {kitten.born}
          </div>
        </div>
        <span className={`save-flash ${saved ? 'show' : ''}`}>{tx('已保存', 'Saved')}</span>
        <div className="actions">
          <a className="btn btn-ghost btn-sm" href={langHref('Meuwoo Cattery.html')} target="_blank" rel="noopener">
            {tx('查看客户视图', 'Customer view')} ↗
          </a>
          <button className="btn btn-outline btn-sm">{tx('复制链接', 'Copy link')}</button>
        </div>
      </div>

      <div className="editor-shell">
        <div className="editor-tabs">
          {TABS.map(t => (
            <button
              key={t.id}
              className={`editor-tab ${tab === t.id ? 'active' : ''}`}
              onClick={() => setTab(t.id)}
            >
              {Bi(t.cn, t.en)}
            </button>
          ))}
        </div>

        <div className="editor-body">
          {tab === 'basic' && <BasicForm kitten={kitten} patch={patch} parents={data.parents} status={status} />}
          {tab === 'updates' && <UpdatesForm kitten={kitten} patch={patch} />}
          {tab === 'milestones' && <MilestonesForm kitten={kitten} patch={patch} />}
          {tab === 'health' && <HealthForm kitten={kitten} patch={patch} />}
          {tab === 'note' && <NoteForm kitten={kitten} patch={patch} />}
          {tab === 'contract' && <ContractForm kitten={kitten} status={status} data={data} />}
          {tab === 'link' && <LinkForm kitten={kitten} status={status} />}
        </div>
      </div>
    </div>
  );
};

const BasicForm = ({ kitten, patch, parents, status }) => (
  <div className="card">
    <div className="card-head">
      <div>
        <h3>{tx('基本信息', 'Basics')}</h3>
        {window.LANG !== 'en' && <span className="en">basics</span>}
      </div>
    </div>
    <div className="field-row">
      <Field label="中文名" labelEn="name">
        <Input value={kitten.name} onChange={v => patch({ name: v })} />
      </Field>
      <Field label="英文名" labelEn="english name">
        <Input value={kitten.nameEn} onChange={v => patch({ nameEn: v })} />
      </Field>
    </div>
    <div className="field-row">
      <Field label="品种" labelEn="breed">
        <Input value={kitten.breed} onChange={v => patch({ breed: v })} />
      </Field>
      <Field label="英文品种" labelEn="breed en">
        <Input value={kitten.breedEn} onChange={v => patch({ breedEn: v })} />
      </Field>
    </div>
    <div className="field-row-3">
      <Field label="出生日期" labelEn="born">
        <Input value={kitten.born} onChange={v => patch({ born: v })} />
      </Field>
      <Field label="性别" labelEn="gender">
        <Input value={kitten.gender} onChange={v => patch({ gender: v })} />
      </Field>
      <Field label="体重" labelEn="weight">
        <Input value={kitten.weight} onChange={v => patch({ weight: v })} />
      </Field>
    </div>
    <div className="field-row">
      <Field label="眼色" labelEn="eyes">
        <Input value={kitten.eyes} onChange={v => patch({ eyes: v })} />
      </Field>
      <Field label="毛色 (hex)" labelEn="color">
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <Input value={kitten.color} onChange={v => patch({ color: v })} />
          <div style={{ width: 36, height: 36, borderRadius: 8, background: kitten.color, border: '1px solid var(--hairline)' }} />
        </div>
      </Field>
    </div>
    <div className="field-row">
      <Field label="妈妈" labelEn="mother">
        <select className="input" value={kitten.parents?.momId || ''} onChange={e => patch({ parents: { ...kitten.parents, momId: e.target.value } })}>
          <option value="">—</option>
          {Object.values(parents).filter(p => p.role === 'mom').map(p => (
            <option key={p.id} value={p.id}>{window.LANG === 'en' ? p.nameEn : `${p.name} ${p.nameEn}`}</option>
          ))}
        </select>
      </Field>
      <Field label="爸爸" labelEn="father">
        <select className="input" value={kitten.parents?.dadId || ''} onChange={e => patch({ parents: { ...kitten.parents, dadId: e.target.value } })}>
          <option value="">—</option>
          {Object.values(parents).filter(p => p.role === 'dad').map(p => (
            <option key={p.id} value={p.id}>{window.LANG === 'en' ? p.nameEn : `${p.name} ${p.nameEn}`}</option>
          ))}
        </select>
      </Field>
    </div>
    <Field label="性格标签" labelEn="personality tags">
      <TagInput tags={kitten.tags || []} onChange={v => patch({ tags: v })} placeholder={tx('输入后回车...', 'Type and press Enter...')} />
    </Field>
    <Field label="一句话故事" labelEn="story">
      <Textarea value={kitten.story} onChange={v => patch({ story: v })} rows={2} placeholder={tx('给小猫写一句温暖的开场...', 'Write a warm intro for this kitten...')} />
    </Field>
    <Field label="英文故事" labelEn="story (en)">
      <Textarea value={kitten.storyEn} onChange={v => patch({ storyEn: v })} rows={2} />
    </Field>
    <Field label="主图照片" labelEn="hero photo">
      <ImageUpload label={tx('点击替换主图', 'Upload hero photo')} labelEn="upload hero" />
    </Field>
  </div>
);

const UpdatesForm = ({ kitten, patch }) => {
  const updates = kitten.photoWall || [];
  const today = new Date().toISOString().slice(0, 10).replace(/-/g, '.');
  const [bulkPreview, setBulkPreview] = useState([]);

  const updateRow = (i, changes) => {
    const next = updates.map((u, j) => j === i ? { ...u, ...changes } : u);
    patch({ photoWall: next });
  };
  const removeRow = (i) => patch({ photoWall: updates.filter((_, j) => j !== i) });
  const addRow = () => patch({ photoWall: [{ date: today, caption: '', captionEn: '' }, ...updates] });

  const bulkUpload = () => {
    // simulate dropping multiple photos
    const n = 4 + Math.floor(Math.random() * 3);
    setBulkPreview(Array.from({ length: n }, (_, i) => ({
      id: Date.now() + i,
      date: today,
      caption: '',
      captionEn: '',
    })));
  };

  const updateBulk = (i, changes) => {
    setBulkPreview(b => b.map((p, j) => j === i ? { ...p, ...changes } : p));
  };
  const removeBulk = (i) => setBulkPreview(b => b.filter((_, j) => j !== i));
  const importBulk = () => {
    patch({ photoWall: [...bulkPreview, ...updates] });
    setBulkPreview([]);
  };

  return (
    <>
      <div className="card">
        <div className="card-head">
          <div>
            <h3>{tx('添加今日更新', 'Post a new update')}</h3>
            {window.LANG !== 'en' && <span className="en">post a new update</span>}
          </div>
          <span className="save-flash show" style={{ fontFamily: 'var(--font-cn-hand)', color: 'var(--ink-faint)' }}>
            {tx('每天一更，让客户安心 ♡', 'Daily updates keep customers at ease ♡')}
          </span>
        </div>
        <div className="bulk-upload-zone" onClick={bulkUpload}>
          <div className="icon">⤓</div>
          <div className="label">{tx('拖拽多张今日照片到这里', 'Drop today\'s photos here')}</div>
          <div className="hint">drop multiple photos · auto date · batch edit</div>
        </div>

        {bulkPreview.length > 0 && (
          <>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14 }}>
              <div className="section-sub" style={{ marginBottom: 0 }}>
                {window.LANG === 'en'
                  ? `${bulkPreview.length} pending · edit date and caption for each`
                  : <>{bulkPreview.length} 张待发布 · 编辑每张的日期和说明<span className="en">{bulkPreview.length} pending</span></>}
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <button className="btn btn-ghost btn-sm" onClick={() => setBulkPreview([])}>{tx('清空', 'Clear')}</button>
                <button className="btn btn-primary btn-sm" onClick={importBulk}>{tx('全部发布 ✓', 'Publish all ✓')}</button>
              </div>
            </div>
            <div className="bulk-preview">
              {bulkPreview.map((p, i) => (
                <div className="bulk-tile" key={p.id}>
                  <button className="remove" onClick={() => removeBulk(i)}>✕</button>
                  <div className="bulk-thumb">
                    <Placeholder color={kitten.color} label={`new ${i + 1}`} />
                  </div>
                  <input className="date" value={p.date} onChange={e => updateBulk(i, { date: e.target.value })} />
                  <input className="cap" placeholder={tx('说明 (可选)', 'Caption (optional)')} value={p.caption} onChange={e => updateBulk(i, { caption: e.target.value })} />
                  <input className="cap-en" placeholder="english" value={p.captionEn} onChange={e => updateBulk(i, { captionEn: e.target.value })} />
                </div>
              ))}
            </div>
          </>
        )}
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <h3>{tx('历史更新', 'Update history')}</h3>
            {window.LANG !== 'en' && <span className="en">{updates.length} entries</span>}
          </div>
          <button className="btn btn-ghost btn-sm" onClick={addRow}>+ {tx('手动添加', 'Add manually')}</button>
        </div>
        <div className="update-list">
          {updates.map((u, i) => (
            <div className="update-row" key={i}>
              <div className="urow-thumb">
                <Placeholder color={kitten.color} label={`day ${i + 1}`} />
              </div>
              <div className="urow-body">
                <input
                  className="urow-date"
                  value={u.date}
                  onChange={e => updateRow(i, { date: e.target.value })}
                  style={{ border: 'none', background: 'transparent', outline: 'none' }}
                />
                <input
                  className="urow-cap"
                  value={u.caption || ''}
                  placeholder={tx('写一句今天的事...', "Today's note...")}
                  onChange={e => updateRow(i, { caption: e.target.value })}
                />
                <input
                  className="urow-cap-en"
                  value={u.captionEn || ''}
                  placeholder="english caption..."
                  onChange={e => updateRow(i, { captionEn: e.target.value })}
                />
              </div>
              <div className="urow-actions">
                <button className="ge-btn" title={tx('删除', 'Delete')} onClick={() => removeRow(i)}>✕</button>
              </div>
            </div>
          ))}
          {updates.length === 0 && (
            <div className="empty">
              {tx('还没有任何更新', 'No updates yet')}
              {window.LANG !== 'en' && <span className="en">no updates yet</span>}
            </div>
          )}
        </div>
      </div>
    </>
  );
};

const MilestonesForm = ({ kitten, patch }) => {
  const items = kitten.milestones || [];
  const updateRow = (i, changes) => patch({ milestones: items.map((m, j) => j === i ? { ...m, ...changes } : m) });
  const removeRow = (i) => patch({ milestones: items.filter((_, j) => j !== i) });
  const addRow = () => patch({ milestones: [...items, { date: '', title: '', titleEn: '', tone: 'soft' }] });

  return (
    <div className="card">
      <div className="card-head">
        <div>
          <h3>{tx('重要时刻', 'Milestones')}</h3>
          {window.LANG !== 'en' && <span className="en">milestones</span>}
        </div>
        <button className="btn btn-ghost btn-sm" onClick={addRow}>+ {tx('新增一条', 'Add')}</button>
      </div>
      <div className="section-sub">
        {tx('客户在小猫页面会看到完整的成长里程碑', 'Customers see the full growth timeline on the kitten page')}
        {window.LANG !== 'en' && <span className="en"> — vaccinations, weaning, weight ...</span>}
      </div>
      <div className="milestone-list">
        {items.map((m, i) => (
          <div className="milestone-edit" key={i}>
            <input className="input" value={m.date} placeholder="2026.05.20" onChange={e => updateRow(i, { date: e.target.value })} />
            <input className="input" value={m.title} placeholder={tx('中文标题', 'Chinese title')} onChange={e => updateRow(i, { title: e.target.value })} />
            <input className="input" value={m.titleEn} placeholder="english" onChange={e => updateRow(i, { titleEn: e.target.value })} />
            <button className="ge-btn" title={tx('删除', 'Delete')} onClick={() => removeRow(i)}>✕</button>
          </div>
        ))}
      </div>
    </div>
  );
};

const HealthForm = ({ kitten, patch }) => {
  const items = kitten.health || [];
  const updateRow = (i, changes) => patch({ health: items.map((h, j) => j === i ? { ...h, ...changes } : h) });
  const addRow = () => patch({ health: [...items, { label: '', labelEn: '', value: '', valueEn: '' }] });
  const removeRow = (i) => patch({ health: items.filter((_, j) => j !== i) });

  return (
    <div className="card">
      <div className="card-head">
        <div>
          <h3>{tx('健康记录', 'Health')}</h3>
          {window.LANG !== 'en' && <span className="en">health</span>}
        </div>
        <button className="btn btn-ghost btn-sm" onClick={addRow}>+ {tx('加一项', 'Add item')}</button>
      </div>
      <div className="section-sub">
        {tx('疫苗 · 驱虫 · 体检 · 任何客户想知道的健康信息', 'Vaccines · Deworming · Check-ups · Anything customers should know')}
        {window.LANG !== 'en' && <span className="en"> — anything customers should know</span>}
      </div>
      <div className="health-edit-grid">
        {items.map((h, i) => (
          <div className="health-edit-tile" key={i}>
            <div style={{ display: 'flex', gap: 6 }}>
              <input className="input" value={h.label} placeholder={tx('项目名', 'Label')} onChange={e => updateRow(i, { label: e.target.value })} />
              <input className="input" value={h.labelEn} placeholder="label en" onChange={e => updateRow(i, { labelEn: e.target.value })} style={{ flex: 1 }} />
              <button className="ge-btn" onClick={() => removeRow(i)}>✕</button>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <input className="input" value={h.value} placeholder={tx('值', 'Value')} onChange={e => updateRow(i, { value: e.target.value })} />
              <input className="input" value={h.valueEn} placeholder="value en" onChange={e => updateRow(i, { valueEn: e.target.value })} />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const ContractForm = ({ kitten, status, data }) => {
  const pickup = data.pickup?.[kitten.id];
  const customer = Object.values(data.customers || {}).find(c => c.kittenIds?.includes(kitten.id));
  const signed = pickup?.contractSigned;

  return (
    <>
      <div className={`contract-status ${signed ? 'signed' : ''}`}>
        <div className="contract-status-icon">{signed ? '✓' : '✎'}</div>
        <div className="meta">
          <div className="title">
            {window.LANG === 'en'
              ? (signed ? 'Contract signed' : 'Awaiting signature')
              : (signed ? '合同已签署' : '等待客户签字')}
          </div>
          <div className="desc">
            {signed
              ? (window.LANG === 'en'
                  ? `${customer?.name || '—'} signed online on ${pickup?.date || '—'}`
                  : `客户 ${customer?.name || '—'} 已于 ${pickup?.date || '—'} 在线签署`)
              : (window.LANG === 'en'
                  ? `Sent to ${customer?.name || '—'} · link valid for 7 days`
                  : `已发送给 ${customer?.name || '—'} · 链接 7 天内有效`)}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignSelf: 'center' }}>
          <button className="btn btn-outline btn-sm">
            {signed ? tx('下载 PDF', 'Download PDF') : tx('重新发送', 'Resend')}
          </button>
          {!signed && <button className="btn btn-primary btn-sm">{tx('提醒签字', 'Remind')}</button>}
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <h3>{tx('合同预览', 'Contract preview')}</h3>
            {window.LANG !== 'en' && <span className="en">contract preview</span>}
          </div>
          <button className="btn btn-ghost btn-sm">{tx('编辑模板', 'Edit template')}</button>
        </div>
        <div className="contract-preview">
          <h4>领养协议</h4>
          <div className="sub-title">— Adoption Agreement —</div>
          <div>甲方（猫舍）：Meuwoo Cattery · 喵屋猫舍 · 主理人 阿喵</div>
          <div>乙方（领养人）：{customer?.name || '___________'} （{customer?.phone || '___'}）</div>
          <br />
          <div>第一条 · 领养小猫信息</div>
          <div style={{ paddingLeft: 14 }}>
            姓名：{kitten.name} · {kitten.nameEn}<br />
            品种：{kitten.breed}<br />
            出生日期：{kitten.born}<br />
            性别：{kitten.gender || '—'}<br />
            父母：{data.parents[kitten.parents.momId]?.name} × {data.parents[kitten.parents.dadId]?.name}
          </div>
          <br />
          <div>第二条 · 领养金额</div>
          <div style={{ paddingLeft: 14 }}>
            总金额：¥{customer?.total?.toLocaleString() || '___'}<br />
            订金：¥{customer?.deposit?.toLocaleString() || '___'}（已支付）<br />
            尾款：¥{((customer?.total || 0) - (customer?.paid || 0)).toLocaleString()}（接猫当日付清）
          </div>
          <br />
          <div>第三条 · 健康与售后</div>
          <div style={{ paddingLeft: 14 }}>
            ① 离窝前完成 3 针疫苗 + 1 次驱虫，附完整体检报告<br />
            ② 离窝 7 天内出现猫舍未告知的健康问题，全额退款或更换<br />
            ③ 终身售后咨询，可随时联系
          </div>
          <br />
          <div>第四条 · 领养承诺</div>
          <div style={{ paddingLeft: 14 }}>
            乙方承诺善待小猫，不弃养、不转卖。如无法继续饲养，须先告知猫舍优先回收。
          </div>
          <div className="sig-block">
            <div className={`sig-cell ${signed ? 'signed' : ''}`}>
              <div className="sig-line" />
              <div className="sig-label">乙方签字 · adopter</div>
            </div>
            <div className="sig-cell keeper-signed">
              <div className="sig-line" />
              <div className="sig-label">甲方签字 · cattery</div>
            </div>
          </div>
          <div style={{ textAlign: 'right', marginTop: 14, color: 'var(--ink-soft)' }}>
            {pickup?.date || '签署日期 · __________'}
          </div>
        </div>
      </div>
    </>
  );
};

const NoteForm = ({ kitten, patch }) => (
  <div className="card">
    <div className="card-head">
      <div>
        <h3>{tx('管家说', "Keeper's note")}</h3>
        {window.LANG !== 'en' && <span className="en">keeper's note</span>}
      </div>
    </div>
    <div className="section-sub">
      {tx('每只小猫的页面顶部都会显示这段话 · 通常每周更新一次', 'Shown at the top of the kitten page · update weekly')}
      {window.LANG !== 'en' && <span className="en"> — shown prominently on the kitten page</span>}
    </div>
    <Field label="中文" labelEn="cn">
      <Textarea value={kitten.keeperNote} onChange={v => patch({ keeperNote: v })} rows={5} />
    </Field>
    <Field label="英文" labelEn="en">
      <Textarea value={kitten.keeperNoteEn} onChange={v => patch({ keeperNoteEn: v })} rows={4} />
    </Field>
  </div>
);

const LinkForm = ({ kitten, status }) => {
  const fullUrl = 'https://' + (status.link || `meuwoo.cn/m/${kitten.id}`);
  const [copied, setCopied] = useState(false);
  const copy = () => {
    navigator.clipboard?.writeText(fullUrl);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  return (
    <>
      <div className="card">
        <div className="card-head">
          <div>
            <h3>{tx('客户分享链接', 'Customer link')}</h3>
            {window.LANG !== 'en' && <span className="en">customer link</span>}
          </div>
        </div>
        <div className="section-sub">
          {window.LANG === 'en'
            ? `Direct link to ${kitten.nameEn || kitten.name}'s page`
            : <>这是发给客户的专属链接，打开就是 {kitten.name} 的页面 <span className="en">— direct link to this kitten</span></>}
        </div>
        <div className="link-box">
          <div className="qr" />
          <div className="url">{fullUrl}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <button className="btn btn-primary btn-sm" onClick={copy}>
              {copied ? tx('已复制 ✓', 'Copied ✓') : tx('复制链接', 'Copy link')}
            </button>
            <button className="btn btn-outline btn-sm">{tx('微信发送', 'Send via WeChat')}</button>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <h3>{tx('客户信息', 'Customer')}</h3>
            {window.LANG !== 'en' && <span className="en">customer</span>}
          </div>
        </div>
        {status.customer ? (
          <>
            <Field label="客户" labelEn="name">
              <Input value={status.customer} />
            </Field>
            <Field label="联系方式" labelEn="phone">
              <Input value={status.customerPhone} />
            </Field>
            <div style={{ fontSize: 12, color: 'var(--ink-soft)', fontFamily: 'var(--font-cn-hand)', marginTop: 8 }}>
              {window.LANG === 'en'
                ? `Link sent on ${status.linkSent}`
                : `链接已于 ${status.linkSent} 发送`}
            </div>
          </>
        ) : (
          <div className="empty">
            {tx('尚未分配客户', 'No customer yet')}
            {window.LANG !== 'en' && <span className="en">no customer yet</span>}
          </div>
        )}
      </div>
    </>
  );
};

// ============ Parent Editor ============
const ParentEditor = ({ parentId, data, onBack }) => {
  const original = data.parents[parentId];
  const [parent, setParent] = useState(original);
  const [tab, setTab] = useState('basic');
  const [saved, flash] = useSaveFlash();

  useEffect(() => { setParent(data.parents[parentId]); setTab('basic'); }, [parentId]);

  const patch = (changes) => {
    setParent(p => ({ ...p, ...changes }));
    flash();
  };

  const TABS = [
    { id: 'basic',    cn: '基本信息', en: 'basic' },
    { id: 'gallery',  cn: '写真集',   en: 'gallery' },
    { id: 'children', cn: '孩子们',   en: 'kittens' },
  ];

  return (
    <div>
      <div className="editor-topbar">
        <button className="back" onClick={onBack}>‹ {tx('返回', 'Back')}</button>
        <div className="thumb" style={{ backgroundColor: parent.color }}>
          <Placeholder color={parent.color} label={parent.nameEn} />
        </div>
        <div className="titles">
          <div className="name">{pick(parent, 'name')} {window.LANG !== 'en' && <span style={{ fontFamily: 'var(--font-hand)', color: 'var(--gold)', fontSize: 14, marginLeft: 6 }}>· {parent.nameEn}</span>}</div>
          <div style={{ fontSize: 13, color: 'var(--ink-soft)', fontFamily: 'var(--font-cn-hand)' }}>
            {window.LANG === 'en' ? (parent.role === 'mom' ? 'Dam' : 'Sire') : (parent.role === 'mom' ? '种母' : '种公')} · {pick(parent, 'breed')}
          </div>
        </div>
        <span className={`save-flash ${saved ? 'show' : ''}`}>{tx('已保存', 'Saved')}</span>
      </div>

      <div className="editor-shell">
        <div className="editor-tabs">
          {TABS.map(t => (
            <button key={t.id} className={`editor-tab ${tab === t.id ? 'active' : ''}`} onClick={() => setTab(t.id)}>
              {Bi(t.cn, t.en)}
            </button>
          ))}
        </div>

        <div className="editor-body">
          {tab === 'basic' && (
            <div className="card">
              <div className="card-head">
                <div>
                  <h3>{tx('基本信息', 'Basics')}</h3>
                  {window.LANG !== 'en' && <span className="en">basics</span>}
                </div>
              </div>
              <div className="field-row">
                <Field label="中文名" labelEn="name"><Input value={parent.name} onChange={v => patch({ name: v })} /></Field>
                <Field label="英文名" labelEn="en"><Input value={parent.nameEn} onChange={v => patch({ nameEn: v })} /></Field>
              </div>
              <div className="field-row">
                <Field label="品种" labelEn="breed"><Input value={parent.breed} onChange={v => patch({ breed: v })} /></Field>
                <Field label="英文品种" labelEn="breed en"><Input value={parent.breedEn} onChange={v => patch({ breedEn: v })} /></Field>
              </div>
              <div className="field-row-3">
                <Field label="出生" labelEn="born"><Input value={parent.born} onChange={v => patch({ born: v })} /></Field>
                <Field label="眼色" labelEn="eyes"><Input value={parent.eyes} onChange={v => patch({ eyes: v })} /></Field>
                <Field label="毛色">
                  <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                    <Input value={parent.color} onChange={v => patch({ color: v })} />
                    <div style={{ width: 32, height: 32, borderRadius: 8, background: parent.color, border: '1px solid var(--hairline)' }} />
                  </div>
                </Field>
              </div>
              <div className="field-row">
                <Field label="血统证书" labelEn="cert"><Input value={parent.cert} onChange={v => patch({ cert: v })} /></Field>
                <Field label="证书英文" labelEn="cert en"><Input value={parent.certEn} onChange={v => patch({ certEn: v })} /></Field>
              </div>
              <Field label="性格" labelEn="personality"><TagInput tags={parent.personality || []} onChange={v => patch({ personality: v })} /></Field>
              <Field label="bio 中文" labelEn="bio cn"><Textarea value={parent.bio} onChange={v => patch({ bio: v })} rows={3} /></Field>
              <Field label="bio 英文" labelEn="bio en"><Textarea value={parent.bioEn} onChange={v => patch({ bioEn: v })} rows={2} /></Field>
              <Field label="头像照片" labelEn="portrait">
                <ImageUpload label={tx('点击替换头像', 'Upload portrait')} labelEn="upload portrait" />
              </Field>
            </div>
          )}

          {tab === 'gallery' && (
            <div className="card">
              <div className="card-head">
                <div>
                  <h3>{tx('写真集', 'Gallery')}</h3>
                  {window.LANG !== 'en' && <span className="en">gallery</span>}
                </div>
                <button className="btn btn-ghost btn-sm">+ {tx('批量上传', 'Bulk upload')}</button>
              </div>
              <ImageUpload label={tx('拖拽多张照片到这里', 'Drop photos here')} labelEn="drop photos to add" />
              <div style={{ height: 16 }} />
              <div className="gallery-edit-grid">
                {(parent.gallery || []).map((g, i) => (
                  <div className="gallery-edit-tile" key={i}>
                    <Placeholder color={parent.color} label={`${parent.nameEn} ${i + 1}`} />
                    <div className="ge-actions">
                      <button className="ge-btn" title={tx('替换', 'Replace')}>↺</button>
                      <button className="ge-btn" title={tx('删除', 'Delete')}>✕</button>
                    </div>
                    <div className="ge-cap">{g.cap}</div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {tab === 'children' && (
            <div className="card">
              <div className="card-head">
                <div>
                  <h3>
                    {window.LANG === 'en'
                      ? `${parent.nameEn}'s kittens`
                      : `${parent.name}的孩子们`}
                  </h3>
                  {window.LANG !== 'en' && <span className="en">{parent.childrenIds.length} kittens</span>}
                </div>
              </div>
              <div className="section-sub">
                {tx('通过小猫页面的"妈妈/爸爸"字段自动关联', 'Auto-linked via the parent fields on each kitten')}
                {window.LANG !== 'en' && <span className="en"> — linked via parent fields on each kitten</span>}
              </div>
              <div className="kitten-grid">
                {parent.childrenIds.map(cid => {
                  const c = data.kittens[cid];
                  if (!c) return null;
                  return (
                    <div className="kitten-tile" key={cid}>
                      <div className="portrait-lg" style={{ backgroundColor: c.color }}>
                        <Placeholder color={c.color} label={c.nameEn} />
                      </div>
                      <div className="row1">
                        <div>
                          <div className="name">{pick(c, 'name')}</div>
                          {window.LANG !== 'en' && <div className="name-en">{c.nameEn}</div>}
                        </div>
                      </div>
                      <div className="info">{pick(c, 'breed')}<br />{c.born}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

window.KittenEditor = KittenEditor;
window.ParentEditor = ParentEditor;