// bequest.jsx — Write and seal the bequest for an object.

function BequestEditor({ item, go, lang = 'en' }) {
  const tb = window.T[lang].bequest;
  const it = item || window.ITEMS[0];
  const [choice, setChoice] = React.useState('send');
  const [recipient, setRecipient] = React.useState({ name: '', relation: '', email: '', message: '' });
  const [willText, setWillText] = React.useState('');
  const setR = (k, v) => setRecipient(r => ({ ...r, [k]: v }));

  const choices = [
    {
      id: 'send', label: tb.sendLabel,
      icon: (selected) => (
        <svg width="36" height="36" viewBox="0 0 36 36">
          <circle cx="18" cy="18" r="13" fill="none" stroke={selected ? 'var(--frost)' : 'var(--steel)'} strokeWidth="1" />
        </svg>
      ),
      desc: tb.sendDesc,
    },
    {
      id: 'sell', label: tb.sellLabel,
      icon: (selected) => (
        <svg width="36" height="36" viewBox="0 0 36 36">
          <rect x="5" y="5" width="26" height="26" fill="none" stroke={selected ? 'var(--frost)' : 'var(--steel)'} strokeWidth="1" />
        </svg>
      ),
      desc: tb.sellDesc,
    },
    {
      id: 'preserve', label: tb.preserveLabel,
      icon: (selected) => (
        <svg width="36" height="36" viewBox="0 0 36 36">
          <polygon points="18,4 32,31 4,31" fill="none" stroke={selected ? 'var(--frost)' : 'var(--steel)'} strokeWidth="1" />
        </svg>
      ),
      desc: tb.preserveDesc,
    },
  ];

  return (
    <>
      {/* Item context strip */}
      <div style={{ background: 'var(--paper-2)', borderBottom: '1px solid var(--ink)', padding: '24px 0' }}>
        <div className="page" style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          <div style={{ width: 72, height: 72, flexShrink: 0 }}>
            <ItemVisual item={it} h={72} />
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 4 }}>
              {it.category} · {it.year}
            </div>
            <div className="display" style={{ fontSize: 22, lineHeight: 1.1 }}>{it.name}</div>
          </div>
          <button className="btn ghost" onClick={() => go('item', it)}
            style={{ padding: '10px 18px', fontSize: 11, flexShrink: 0 }}>
            {tb.backToObject}
          </button>
        </div>
      </div>

      {/* Page header */}
      <header style={{ borderBottom: '1px solid var(--ink)', padding: '64px 0 56px' }}>
        <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' }}>{tb.sectionTag}</div>
              <div className="mono tiny upper" style={{ color: 'var(--muted)', marginTop: 8, letterSpacing: '0.22em' }}>
                {tb.sectionSub}
              </div>
            </div>
            <h1 className="display" style={{ fontSize: 'clamp(36px,5vw,72px)', margin: 0, lineHeight: 0.95 }}>
              {tb.title.split('\n').map((line, i) => <span key={i}>{line}{i === 0 && <br />}</span>)}
            </h1>
            <p className="serif" style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.6, fontWeight: 300, margin: 0 }}>
              {tb.subtitle}{' '}
              <em style={{ color: 'var(--ice)' }}>{tb.subtitleEm}</em>
            </p>
          </div>
        </div>
      </header>

      <div className="page" style={{ padding: '72px 32px' }}>

        {/* 01: Disposition */}
        <div style={{ marginBottom: 72 }}>
          <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 24 }}>
            {tb.disposition}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)' }}>
            {choices.map((c, i) => {
              const selected = choice === c.id;
              return (
                <div key={c.id} onClick={() => setChoice(c.id)} style={{
                  padding: '36px 28px 40px',
                  borderLeft: i === 0 ? 'none' : '1px solid var(--hairline)',
                  background: selected ? 'var(--ink)' : 'transparent',
                  color: selected ? 'var(--paper)' : 'var(--ink)',
                  cursor: 'pointer', transition: 'background 0.2s, color 0.2s',
                }}>
                  <div style={{ marginBottom: 24 }}>{c.icon(selected)}</div>
                  <div className="display" style={{ fontSize: 20, marginBottom: 12, lineHeight: 1.1 }}>{c.label}.</div>
                  <div className="serif" style={{
                    fontSize: 14, lineHeight: 1.6, fontWeight: 300, fontStyle: 'italic',
                    color: selected ? 'rgba(239,239,237,0.72)' : 'var(--ink-2)',
                  }}>{c.desc}</div>
                </div>
              );
            })}
          </div>
        </div>

        {/* 02: Recipient */}
        {(choice === 'send' || choice === 'sell') && (
          <div style={{ marginBottom: 72 }}>
            <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 24 }}>
              {tb.recipient}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
                <FormField label={choice === 'sell' ? (lang === 'zh' ? '預定買家' : 'Intended buyer') : tb.nameLabel} hint={tb.nameHint}
                  value={recipient.name} onChange={v => setR('name', v)} large />
                <FormField label={tb.relationLabel} hint={tb.relationHint}
                  value={recipient.relation} onChange={v => setR('relation', v)} />
                <FormField label={tb.emailLabel} hint={tb.emailHint}
                  value={recipient.email} onChange={v => setR('email', v)} type="email" />
              </div>
              <div>
                <FormField label={tb.noteLabel} hint={tb.noteHint}
                  value={recipient.message} onChange={v => setR('message', v)} multiline rows={6} />
                <div className="serif" style={{ fontSize: 13, color: 'var(--muted)', fontStyle: 'italic', fontWeight: 300, marginTop: 16 }}>
                  {tb.noteFooter}
                </div>
              </div>
            </div>
          </div>
        )}

        {/* The will — dark section */}
        <div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '64px', margin: '0 -32px', marginBottom: 0 }}>
          <div className="mono tiny upper" style={{ color: 'var(--frost)', letterSpacing: '0.28em', marginBottom: 24 }}>
            {choice !== 'preserve' ? tb.wordsLabelAlt : tb.wordsLabel}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
            <div>
              <div className="serif" style={{ fontSize: 16, lineHeight: 1.65, color: 'rgba(239,239,237,0.58)', fontWeight: 300, fontStyle: 'italic', marginBottom: 32 }}>
                {tb.wordsDesc}
              </div>
              <textarea
                value={willText}
                onChange={e => setWillText(e.target.value)}
                placeholder={tb.placeholder}
                rows={8}
                style={{
                  width: '100%', border: 'none', outline: 'none',
                  background: 'transparent', resize: 'vertical',
                  fontFamily: 'Fraunces, serif', fontSize: 18, lineHeight: 1.65,
                  fontWeight: 300, fontStyle: 'italic', color: 'var(--paper)',
                  borderBottom: '1px solid rgba(102,153,204,0.45)',
                  paddingBottom: 16,
                }} />
            </div>
            <div>
              {willText ? (
                <blockquote style={{ margin: 0, padding: '28px 32px', borderLeft: '1px solid var(--ice)' }}>
                  <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 16 }}>
                    {tb.previewTitle}
                  </div>
                  <div className="serif" style={{ fontSize: 17, lineHeight: 1.65, fontWeight: 300, fontStyle: 'italic', color: 'rgba(239,239,237,0.92)' }}>
                    "{willText}"
                  </div>
                  <div className="mono tiny upper" style={{ color: 'rgba(239,239,237,0.35)', letterSpacing: '0.22em', marginTop: 20 }}>
                    — {window.KEEPER.name}
                  </div>
                </blockquote>
              ) : (
                <div style={{ minHeight: 200, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <div className="serif" style={{ fontSize: 15, fontStyle: 'italic', fontWeight: 300, color: 'rgba(239,239,237,0.25)', textAlign: 'center', lineHeight: 1.8 }}>
                    {tb.previewEmpty.split('\n').map((line, i) => <span key={i}>{line}{i === 0 && <br />}</span>)}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Seal CTA */}
        <div style={{ padding: '64px 0', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 48, borderBottom: '1px solid var(--hairline)', flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 520 }}>
            <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 12 }}>
              {tb.sealTitle}
            </div>
            <div className="serif" style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.6, fontWeight: 300, fontStyle: 'italic' }}>
              {tb.sealDesc}
            </div>
          </div>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
            <BarSubmit label={tb.sealBtn} done={tb.sealBusy}
              onClick={() => setTimeout(() => go('item', it), 1600)} />
            <button className="btn ghost" onClick={() => go('item', it)}
              style={{ padding: '16px 22px', fontSize: 11 }}>
              {tb.draftBtn}
            </button>
          </div>
        </div>

        {/* Notary note */}
        <div style={{ padding: '32px 0 120px', display: 'flex', gap: 12, alignItems: 'flex-start' }}>
          <span style={{ display: 'inline-block', width: 8, height: 8, background: 'var(--frost)', marginTop: 3, flexShrink: 0 }} />
          <div className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.22em', lineHeight: 1.8 }}>
            Notary on file · A. Pereira · Chamber 0044 · Lisbon<br />
            {tb.notaryNote}
          </div>
        </div>
      </div>

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

Object.assign(window, { BequestEditor });