// add-item.jsx — Catalogue a new object in the archive.

function AddItem({ go, lang = 'en' }) {
  const ta = window.T[lang].addItem;
  const [dragOver, setDragOver] = React.useState(false);
  const [form, setForm] = React.useState({
    name: '', category: 'OBJECTS', year: '', material: '',
    location: '', condition: 'Good', description: '',
    provenance: '', goesTo: '',
  });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const cats = ['PHOTOGRAPHY', 'LITERATURE', 'FURNITURE', 'INSTRUMENTS', 'EPHEMERA', 'JEWELRY', 'OBJECTS'];
  const conditions = lang === 'zh'
    ? ['完美', '良好', '尚可', '待修']
    : ['Pristine', 'Good', 'Fair', 'Poor'];

  return (
    <>
      <header style={{ borderBottom: '1px solid var(--ink)', padding: '72px 0 64px' }}>
        <div className="page">
          <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr 1fr', gap: 48, alignItems: 'flex-end' }}>
            <div>
              <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em' }}>{ta.sectionTag}</div>
              <div className="mono tiny upper" style={{ color: 'var(--muted)', marginTop: 8, letterSpacing: '0.22em' }}>{lang === 'zh' ? '新增至典藏庫' : 'Add to archive'}</div>
            </div>
            <h1 className="display" style={{ fontSize: 'clamp(36px,5vw,72px)', margin: 0, lineHeight: 0.95 }}>
              {ta.title}
            </h1>
            <p className="serif" style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.6, fontWeight: 300, margin: 0 }}>
              {ta.subtitle}{' '}
              <em style={{ color: 'var(--ice)' }}>{ta.subtitleEm}</em>
            </p>
          </div>
        </div>
      </header>

      <div className="page" style={{ padding: '72px 32px 120px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'flex-start' }}>

          {/* Left: photo + provenance */}
          <div>
            <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 20 }}>
              {ta.photoSection}
            </div>
            <div
              onDragOver={e => { e.preventDefault(); setDragOver(true); }}
              onDragLeave={() => setDragOver(false)}
              onDrop={e => { e.preventDefault(); setDragOver(false); }}
              style={{
                height: 420, background: 'var(--paper-2)', cursor: 'pointer',
                border: `1px ${dragOver ? 'solid var(--ice)' : 'dashed rgba(191,236,255,0.55)'}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexDirection: 'column', gap: 24,
                position: 'relative', overflow: 'hidden',
                transition: 'border-color 0.2s',
              }}>
              <div style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(135deg, rgba(255,255,255,0.10), transparent 40%, rgba(0,0,0,0.08))',
              }} />
              <svg viewBox="0 0 200 200" style={{ width: 96, height: 96, opacity: 0.22 }}>
                <rect x="40" y="40" width="120" height="120" fill="none" stroke="var(--steel)" strokeWidth="1" />
                <circle cx="155" cy="55" r="16" fill="none" stroke="var(--steel)" strokeWidth="1" />
                <line x1="100" y1="0" x2="100" y2="200" stroke="var(--steel)" strokeWidth="0.5" strokeDasharray="1 4" />
                <line x1="0" y1="100" x2="200" y2="100" stroke="var(--steel)" strokeWidth="0.5" strokeDasharray="1 4" />
              </svg>
              <div style={{ position: 'relative', textAlign: 'center' }}>
                <div className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.26em' }}>
                  {ta.dragDrop}
                </div>
                <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.26em', marginTop: 6 }}>
                  {ta.orClick}
                </div>
              </div>
              {dragOver && (
                <div style={{
                  position: 'absolute', inset: 0, background: 'rgba(102,153,204,0.07)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em' }}>
                    {lang === 'zh' ? '放開以上傳' : 'Release to upload'}
                  </div>
                </div>
              )}
            </div>
            <div className="serif" style={{ fontSize: 13, color: 'var(--muted)', fontStyle: 'italic', fontWeight: 300, marginTop: 14 }}>
              {lang === 'zh' ? 'JPEG 或 PNG，最大 20 MB。照片上傳前，系統會自動生成線框佔位圖。' : 'JPEG or PNG, max 20 MB. Until photography arrives, the system generates a wireframe placeholder.'}
            </div>

            <div style={{ marginTop: 48, borderTop: '1px solid var(--hairline)', paddingTop: 32 }}>
              <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 6 }}>
                {lang === 'zh' ? '§ 來源' : '§ Provenance'}
              </div>
              <div className="serif" style={{ fontSize: 13, color: 'var(--muted)', fontStyle: 'italic', fontWeight: 300, marginBottom: 20 }}>
                {lang === 'zh' ? '它是如何來到你身邊的？' : 'How did this come to you?'}
              </div>
              <FormField label={ta.provenanceLabel} hint={ta.provenanceHint}
                value={form.provenance} onChange={v => set('provenance', v)} multiline rows={3} />
            </div>
          </div>

          {/* Right: form fields */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
            <FormField label={ta.nameLabel} hint={ta.nameHint}
              value={form.name} onChange={v => set('name', v)} large />

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
              <FormField label={ta.categoryLabel}
                value={form.category} onChange={v => set('category', v)}
                type="select" options={cats} />
              <FormField label={ta.yearLabel} hint={ta.yearHint}
                value={form.year} onChange={v => set('year', v)} />
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
              <FormField label={ta.materialLabel} hint={ta.materialHint}
                value={form.material} onChange={v => set('material', v)} />
              <FormField label={ta.locationLabel} hint={ta.locationHint}
                value={form.location} onChange={v => set('location', v)} />
            </div>

            <div>
              <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 16 }}>
                {ta.conditionLabel}
              </div>
              <div style={{ display: 'flex', borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)' }}>
                {conditions.map((c, i) => (
                  <button key={c} onClick={() => set('condition', c)} style={{
                    flex: 1, padding: '14px 0', border: 'none',
                    borderLeft: i === 0 ? 'none' : '1px solid var(--hairline)',
                    background: form.condition === c ? 'var(--ink)' : 'transparent',
                    color: form.condition === c ? 'var(--paper)' : 'var(--ink-2)',
                    cursor: 'pointer',
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                    textTransform: 'uppercase', letterSpacing: '0.22em',
                    transition: 'background 0.15s, color 0.15s',
                  }}>{c}</button>
                ))}
              </div>
            </div>

            <FormField label={ta.descLabel} hint={ta.descHint}
              value={form.description} onChange={v => set('description', v)} multiline rows={4} />

            <div style={{ borderTop: '1px solid var(--hairline)', paddingTop: 32 }}>
              <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 6 }}>
                {ta.bequestLabel}
              </div>
              <div className="serif" style={{ fontSize: 13, color: 'var(--muted)', fontStyle: 'italic', fontWeight: 300, marginBottom: 20 }}>
                {ta.bequestHint}
              </div>
              <FormField label={lang === 'zh' ? '遺贈給' : 'Goes to'} hint={lang === 'zh' ? '姓名・關係・或留空' : 'Name · relationship · or leave blank'}
                value={form.goesTo} onChange={v => set('goesTo', v)} />
            </div>

            <div style={{ display: 'flex', gap: 16, alignItems: 'center', paddingTop: 8 }}>
              <BarSubmit label={ta.submit} done={ta.submitted} onClick={() => go('archive')} />
              <button className="btn ghost" onClick={() => go('archive')} style={{ padding: '16px 22px', fontSize: 11 }}>
                {ta.cancel}
              </button>
            </div>
          </div>
        </div>
      </div>

      <Footer lang={lang} />
    </>
  );
}

Object.assign(window, { AddItem });