/* global React, Placeholder, Field, Input, TagInput */
// 新窝向导：4 步引导式录入新窝小猫

const { useState } = React;

const STEPS = [
  { id: 1, cn: '选择父母', en: 'parents' },
  { id: 2, cn: '窝信息',   en: 'litter info' },
  { id: 3, cn: '添加小猫', en: 'kittens' },
  { id: 4, cn: '确认完成', en: 'confirm' },
];

const NewLitterWizard = ({ data, open, onClose, onComplete }) => {
  const [step, setStep] = useState(1);
  const [state, setState] = useState({
    momId: '', dadId: '',
    litterName: '', birthDate: '', count: 3, notes: '',
    kittens: [],
  });

  if (!open) return null;

  const next = () => {
    if (step === 2 && state.kittens.length < state.count) {
      const colors = ['#e8c97a', '#eee9df', '#c89668', '#d9a35b', '#cfc7b8'];
      setState(s => ({
        ...s,
        kittens: Array.from({ length: s.count }, (_, i) => ({
          name: '', nameEn: '', gender: '男孩子', color: colors[i % colors.length], breed: '长毛金渐层',
        })),
      }));
    }
    setStep(s => Math.min(4, s + 1));
  };
  const prev = () => setStep(s => Math.max(1, s - 1));

  const updateKit = (i, changes) => {
    setState(s => ({ ...s, kittens: s.kittens.map((k, j) => j === i ? { ...k, ...changes } : k) }));
  };

  const mom = data.parents[state.momId];
  const dad = data.parents[state.dadId];

  const canNext =
    (step === 1 && state.momId && state.dadId) ||
    (step === 2 && state.litterName && state.birthDate) ||
    (step === 3 && state.kittens.every(k => k.name)) ||
    step === 4;

  return (
    <div className="modal-overlay-admin" onClick={onClose}>
      <div className="wizard" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>✕</button>

        <div className="wiz-head">
          <div className="wiz-title">
            {Bi('新窝向导', 'new litter wizard')}
          </div>
          <div className="wiz-steps">
            {STEPS.map(s => (
              <div key={s.id} className={`wiz-step ${step === s.id ? 'active' : ''} ${step > s.id ? 'done' : ''}`}>
                <div className="wiz-step-num">{step > s.id ? '✓' : s.id}</div>
                <div className="wiz-step-label">
                  {window.LANG === 'en' ? s.en : <>{s.cn}{window.LANG !== 'en' && <span className="en">{s.en}</span>}</>}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="wiz-body">
          {step === 1 && (
            <>
              <div className="wiz-intro">
                {Bi('先选这窝小猫的爸爸妈妈 · 后续族谱会自动建立', 'pick the parents — pedigree will auto-link')}
              </div>
              <div className="wiz-parent-pick">
                <div className="wiz-pick-col">
                  <div className="wiz-pick-label">{tx('妈妈 · MAMA', 'Mama')}</div>
                  <div className="wiz-pick-list">
                    {Object.values(data.parents).filter(p => p.role === 'mom').map(p => (
                      <div
                        key={p.id}
                        className={`wiz-pick-card ${state.momId === p.id ? 'on' : ''}`}
                        onClick={() => setState(s => ({ ...s, momId: p.id }))}
                      >
                        <div className="wiz-pick-portrait" style={{ backgroundColor: p.color }}>
                          <Placeholder color={p.color} label={p.nameEn} />
                        </div>
                        <div className="wiz-pick-name">{pick(p, 'name')}{window.LANG !== 'en' && <span>{p.nameEn}</span>}</div>
                        <div className="wiz-pick-info">{pick(p, 'breed')} · {window.LANG === 'en' ? `${pick(p, 'eyes')} eyes` : `${p.eyes}眼`}</div>
                      </div>
                    ))}
                  </div>
                </div>
                <div className="wiz-pick-col">
                  <div className="wiz-pick-label">{tx('爸爸 · PAPA', 'Papa')}</div>
                  <div className="wiz-pick-list">
                    {Object.values(data.parents).filter(p => p.role === 'dad').map(p => (
                      <div
                        key={p.id}
                        className={`wiz-pick-card ${state.dadId === p.id ? 'on' : ''}`}
                        onClick={() => setState(s => ({ ...s, dadId: p.id }))}
                      >
                        <div className="wiz-pick-portrait" style={{ backgroundColor: p.color }}>
                          <Placeholder color={p.color} label={p.nameEn} />
                        </div>
                        <div className="wiz-pick-name">{pick(p, 'name')}{window.LANG !== 'en' && <span>{p.nameEn}</span>}</div>
                        <div className="wiz-pick-info">{pick(p, 'breed')} · {window.LANG === 'en' ? `${pick(p, 'eyes')} eyes` : `${p.eyes}眼`}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </>
          )}

          {step === 2 && (
            <>
              <div className="wiz-intro">
                {Bi('给这窝小猫起个名字，记录出生日期', 'name this litter, record the birth date')}
              </div>
              <div className="wiz-parents-summary">
                <div className="psum">
                  <div className="psum-thumb" style={{ backgroundColor: mom?.color }}>
                    <Placeholder color={mom?.color} label={mom?.nameEn} />
                  </div>
                  <span>{mom ? pick(mom, 'name') : ''}</span>
                </div>
                <div className="psum-x">×</div>
                <div className="psum">
                  <div className="psum-thumb" style={{ backgroundColor: dad?.color }}>
                    <Placeholder color={dad?.color} label={dad?.nameEn} />
                  </div>
                  <span>{dad ? pick(dad, 'name') : ''}</span>
                </div>
              </div>
              <Field label="窝名" labelEn="litter name">
                <Input
                  value={state.litterName}
                  onChange={v => setState(s => ({ ...s, litterName: v }))}
                  placeholder={tx('比如「夏日窝」「情人节窝」', 'e.g. "Summer Litter", "Valentine Litter"')}
                />
              </Field>
              <div className="field-row">
                <Field label="出生日期" labelEn="birth date">
                  <Input value={state.birthDate} onChange={v => setState(s => ({ ...s, birthDate: v }))} placeholder="2026.07.07" />
                </Field>
                <Field label="小猫数量" labelEn="kitten count">
                  <select className="input" value={state.count} onChange={e => setState(s => ({ ...s, count: parseInt(e.target.value) }))}>
                    {[1,2,3,4,5,6,7].map(n => <option key={n} value={n}>{window.LANG === 'en' ? `${n}` : `${n} 只`}</option>)}
                  </select>
                </Field>
              </div>
              <Field label="备注" labelEn="notes">
                <textarea
                  className="input"
                  rows={2}
                  value={state.notes}
                  onChange={e => setState(s => ({ ...s, notes: e.target.value }))}
                  placeholder={tx('顺产 / 剖腹产、母猫状态、注意事项...', 'Natural / C-section, dam condition, notes...')}
                />
              </Field>
            </>
          )}

          {step === 3 && (
            <>
              <div className="wiz-intro">
                {Bi('填写每只小猫的基本信息 · 你随时可以稍后补充细节', 'name each kitten — fill more later')}
              </div>
              <div className="wiz-kit-list">
                {state.kittens.map((k, i) => (
                  <div className="wiz-kit-row" key={i}>
                    <div className="wiz-kit-num">{i + 1}</div>
                    <div
                      className="wiz-kit-thumb"
                      style={{ backgroundColor: k.color }}
                    >
                      <Placeholder color={k.color} label={k.nameEn || `kit ${i + 1}`} />
                    </div>
                    <div className="wiz-kit-fields">
                      <input className="input" placeholder={tx('中文名 (软糖)', 'Chinese name (软糖)')} value={k.name} onChange={e => updateKit(i, { name: e.target.value })} />
                      <input className="input" placeholder={tx('英文名 (Mochi)', 'English name (Mochi)')} value={k.nameEn} onChange={e => updateKit(i, { nameEn: e.target.value })} />
                    </div>
                    <div className="wiz-kit-fields">
                      <select className="input" value={k.gender} onChange={e => updateKit(i, { gender: e.target.value })}>
                        <option value="男孩子">{tx('男孩子', 'Male')}</option>
                        <option value="女孩子">{tx('女孩子', 'Female')}</option>
                      </select>
                      <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                        <input className="input" value={k.color} onChange={e => updateKit(i, { color: e.target.value })} placeholder={tx('#色号', '#hex')} />
                        <div style={{ width: 32, height: 32, borderRadius: 8, background: k.color, border: '1px solid var(--hairline)', flex: '0 0 32px' }} />
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </>
          )}

          {step === 4 && (
            <>
              <div className="wiz-intro" style={{ textAlign: 'center', padding: '20px 0' }}>
                {window.LANG === 'en'
                  ? `${state.count} kitten pages will be created`
                  : <>{`确认信息后系统会自动建立 ${state.count} 只小猫的页面`}<span className="en">{state.count} kitten pages will be created</span></>
                }
              </div>
              <div className="wiz-confirm">
                <div className="confirm-row">
                  <span className="lab">{tx('窝名', 'Litter name')}</span>
                  <span className="val">{state.litterName}</span>
                </div>
                <div className="confirm-row">
                  <span className="lab">{tx('出生日期', 'Birth date')}</span>
                  <span className="val">{state.birthDate}</span>
                </div>
                <div className="confirm-row">
                  <span className="lab">{tx('父母', 'Parents')}</span>
                  <span className="val">{mom ? pick(mom, 'name') : ''} × {dad ? pick(dad, 'name') : ''}</span>
                </div>
                <div className="confirm-kittens">
                  {state.kittens.map((k, i) => (
                    <div className="confirm-kit" key={i}>
                      <div className="confirm-kit-thumb" style={{ backgroundColor: k.color }}>
                        <Placeholder color={k.color} label={k.nameEn} />
                      </div>
                      <div className="confirm-kit-meta">
                        <div className="cn">{window.LANG === 'en' ? k.nameEn || k.name : k.name}</div>
                        {window.LANG !== 'en' && <div className="en">{k.nameEn}</div>}
                        <div className="g">{window.LANG === 'en' ? (k.gender === '男孩子' ? 'Male' : 'Female') : k.gender}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </>
          )}
        </div>

        <div className="wiz-foot">
          {step > 1 ? (
            <button className="btn btn-ghost" onClick={prev}>{tx('‹ 上一步', '‹ Back')}</button>
          ) : <span />}
          {step < 4 ? (
            <button className="btn btn-primary" disabled={!canNext} onClick={next}>
              {tx('下一步 →', 'Next →')}
            </button>
          ) : (
            <button className="btn btn-primary" onClick={() => { onComplete && onComplete(state); onClose(); }}>
              {tx('✓ 完成 · 创建小猫页面', '✓ Done · Create kitten pages')}
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

window.NewLitterWizard = NewLitterWizard;