// settings.jsx — Account profile, guardians, and estate settings.

function Settings({ go, lang = 'en' }) {
  const ts = window.T[lang].settings;
  const [section, setSection] = React.useState('profile');
  const [profile, setProfile] = React.useState({
    name: window.KEEPER.name,
    city: window.KEEPER.location,
    country: 'Portugal',
    email: 'h.markovic@post.pt',
    born: String(window.KEEPER.born),
  });
  const setP = (k, v) => setProfile(p => ({ ...p, [k]: v }));

  const [guardians, setGuardians] = React.useState([
    { id: 1, name: 'Mateo Vidal',    relation: 'Son',    email: 'mateo.vidal@pm.me',       phone: '+34 612 400 222',   status: 'confirmed' },
    { id: 2, name: 'Lúcia Ferreira', relation: 'Notary', email: 'lucia@pereira-notaria.pt', phone: '+351 21 888 0044', status: 'confirmed' },
  ]);
  const [addingGuardian, setAddingGuardian] = React.useState(false);
  const [newG, setNewG] = React.useState({ name: '', relation: '', email: '', phone: '' });
  const setNG = (k, v) => setNewG(g => ({ ...g, [k]: v }));

  const [graceMonths, setGraceMonths] = React.useState(12);

  const tabs = [
    { id: 'profile',      label: ts.profileTab },
    { id: 'guardians',    label: ts.guardiansTab },
    { id: 'confirmation', label: ts.confirmationTab },
    { id: 'export',       label: ts.exportTab },
  ];

  const graceOptions = [
    { m: 6,  label: ts.grace6label,  desc: ts.grace6desc },
    { m: 12, label: ts.grace12label, desc: ts.grace12desc },
    { m: 24, label: ts.grace24label, desc: ts.grace24desc },
  ];

  const confirmSteps = [
    { title: ts.confirmStep1Title, desc: ts.confirmStep1Desc },
    { title: ts.confirmStep2Title, desc: ts.confirmStep2Desc },
    { title: ts.confirmStep3Title, desc: ts.confirmStep3Desc },
    { title: ts.confirmStep4Title, desc: ts.confirmStep4Desc },
  ];

  const exportItems = [
    { label: ts.exportPDFLabel,    desc: ts.exportPDFDesc },
    { label: ts.exportTextLabel,   desc: ts.exportTextDesc },
    { label: ts.exportPhotosLabel, desc: ts.exportPhotosDesc },
  ];

  const dangerItems = [
    { label: ts.withdrawLabel, desc: ts.withdrawDesc },
    { label: ts.deleteLabel,   desc: ts.deleteDesc },
  ];

  return (
    <>
      <header style={{ borderBottom: '1px solid var(--ink)', padding: '72px 0 0' }}>
        <div className="page">
          <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr 1fr', gap: 48, alignItems: 'flex-end', paddingBottom: 48 }}>
            <div>
              <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em' }}>{ts.sectionTag}</div>
              <div className="mono tiny upper" style={{ color: 'var(--muted)', marginTop: 8, letterSpacing: '0.22em' }}>
                {ts.sectionSub}
              </div>
            </div>
            <h1 className="display" style={{ fontSize: 'clamp(36px,5vw,72px)', margin: 0, lineHeight: 0.95 }}>
              {ts.headerTitle.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 }}>
              {ts.headerSubtitle}
            </p>
          </div>

          <div style={{ display: 'flex', gap: 0, borderTop: '1px solid var(--hairline)' }}>
            {tabs.map((t, i) => (
              <button key={t.id} onClick={() => setSection(t.id)} style={{
                padding: '18px 28px', border: 'none', background: 'transparent',
                borderBottom: section === t.id ? '2px solid var(--ink)' : '2px solid transparent',
                color: section === t.id ? 'var(--ink)' : 'var(--muted)',
                fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                textTransform: 'uppercase', letterSpacing: '0.24em', cursor: 'pointer',
                transition: 'color 0.15s, border-color 0.15s',
              }}>
                {String(i + 1).padStart(2, '0')} · {t.label}
              </button>
            ))}
          </div>
        </div>
      </header>

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

        {/* 01 Profile */}
        {section === 'profile' && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'flex-start' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
              <div>
                <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 10 }}>
                  {ts.keeperId}
                </div>
                <div style={{ borderBottom: '1px solid var(--hairline)', padding: '8px 0 12px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span className="display" style={{ fontSize: 22 }}>{window.KEEPER.id}</span>
                  <span className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.22em' }}>{ts.readOnly}</span>
                </div>
              </div>
              <FormField label={ts.nameLabel} value={profile.name} onChange={v => setP('name', v)} large />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
                <FormField label={ts.cityLabel} value={profile.city} onChange={v => setP('city', v)} />
                <FormField label={ts.countryLabel} value={profile.country} onChange={v => setP('country', v)} />
              </div>
              <FormField label={ts.birthLabel} hint={ts.birthHint}
                value={profile.born} onChange={v => setP('born', v)} />
              <FormField label={ts.emailLabel} hint={ts.emailHint}
                value={profile.email} onChange={v => setP('email', v)} type="email" />
              <BarSubmit label={ts.saveChanges} done={ts.saved} />
            </div>

            <div>
              <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 20 }}>
                {ts.archiveStatus}
              </div>
              <div style={{ borderTop: '1px solid var(--ink)' }}>
                {[
                  [ts.statItems,     window.KEEPER.itemCount || '47'],
                  [ts.statBequests,  '9 of 12'],
                  [ts.statGuardians, '2 of 2'],
                  [ts.statWillStatus, window.KEEPER.willStatus],
                  [ts.statNotary,    'A. Pereira · Chamber 0044'],
                  [ts.statMember,    'March 2024'],
                ].map(([label, val]) => (
                  <div key={label} style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, padding: '14px 0', borderBottom: '1px dotted var(--hairline)' }}>
                    <span className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.22em' }}>{label}</span>
                    <span className="mono tiny upper" style={{ color: 'var(--ink)', letterSpacing: '0.22em' }}>{val}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* 02 Guardians */}
        {section === 'guardians' && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'flex-start' }}>
            <div>
              <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 16 }}>
                {ts.aboutGuardians}
              </div>
              <p className="serif" style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.65, fontWeight: 300, fontStyle: 'italic', margin: '0 0 16px' }}>
                {ts.guardianDesc1}
              </p>
              <p className="serif" style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.65, fontWeight: 300, margin: 0 }}>
                {ts.guardianDesc2}
              </p>
            </div>

            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
                <div className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.22em' }}>
                  {guardians.length} {ts.guardiansOf}
                </div>
                {guardians.length < 3 && !addingGuardian && (
                  <button className="btn ghost" onClick={() => setAddingGuardian(true)}
                    style={{ padding: '10px 16px', fontSize: 11 }}>
                    {ts.addGuardian}
                  </button>
                )}
              </div>

              <div style={{ borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)' }}>
                {guardians.map((g, i) => (
                  <div key={g.id} style={{ padding: '28px 0', borderTop: i === 0 ? 'none' : '1px solid var(--hairline)' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                      <div>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
                          <span style={{
                            display: 'inline-block', width: 8, height: 8, flexShrink: 0,
                            background: g.status === 'confirmed' ? 'var(--frost)' : 'transparent',
                            border: g.status === 'confirmed' ? 'none' : '1px solid var(--muted)',
                          }} />
                          <span className="display" style={{ fontSize: 20 }}>{g.name}</span>
                          <span className="mono tiny upper" style={{
                            color: g.status === 'confirmed' ? 'var(--ice)' : 'var(--muted)',
                            letterSpacing: '0.22em', fontSize: 9,
                          }}>
                            {g.status === 'confirmed' ? ts.confirmed : ts.pending}
                          </span>
                        </div>
                        <div className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.22em', marginBottom: 4 }}>
                          {g.relation}
                        </div>
                        <div className="mono tiny upper" style={{ color: 'var(--steel)', letterSpacing: '0.18em' }}>
                          {g.email} · {g.phone}
                        </div>
                      </div>
                      <button onClick={() => setGuardians(prev => prev.filter(x => x.id !== g.id))} style={{
                        background: 'transparent', border: 'none', cursor: 'pointer',
                        color: 'var(--muted)', fontFamily: 'JetBrains Mono, monospace',
                        fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.22em',
                      }}>{ts.remove}</button>
                    </div>
                  </div>
                ))}
                {guardians.length === 0 && (
                  <div style={{ padding: '40px 0', textAlign: 'center' }}>
                    <div className="serif" style={{ fontSize: 16, color: 'var(--muted)', fontStyle: 'italic', fontWeight: 300 }}>
                      {ts.noGuardians}
                    </div>
                  </div>
                )}
              </div>

              {addingGuardian && (
                <div style={{ marginTop: 32, padding: '32px', background: 'var(--paper-2)' }}>
                  <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 28 }}>
                    {ts.newGuardian}
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
                    <FormField label={ts.guardianName} value={newG.name} onChange={v => setNG('name', v)} />
                    <FormField label={ts.guardianRelation} hint={ts.guardianRelationHint}
                      value={newG.relation} onChange={v => setNG('relation', v)} />
                    <FormField label={ts.guardianEmail} value={newG.email} onChange={v => setNG('email', v)} type="email" />
                    <FormField label={ts.guardianPhone} value={newG.phone} onChange={v => setNG('phone', v)} />
                  </div>
                  <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
                    <button className="btn" onClick={() => {
                      if (newG.name && newG.email) {
                        setGuardians(prev => [...prev, { ...newG, id: Date.now(), status: 'pending' }]);
                        setNewG({ name: '', relation: '', email: '', phone: '' });
                        setAddingGuardian(false);
                      }
                    }} style={{ padding: '12px 20px', fontSize: 11 }}>{ts.sendInvitation}</button>
                    <button className="btn ghost" onClick={() => setAddingGuardian(false)}
                      style={{ padding: '12px 20px', fontSize: 11 }}>{ts.cancel}</button>
                  </div>
                </div>
              )}
            </div>
          </div>
        )}

        {/* 03 Confirmation */}
        {section === 'confirmation' && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'flex-start' }}>
            <div>
              <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 16 }}>
                {ts.annualConfirmation}
              </div>
              <p className="serif" style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.65, fontWeight: 300, fontStyle: 'italic', margin: '0 0 32px' }}>
                {ts.confirmationDesc}
              </p>

              <div style={{ borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)', marginBottom: 40 }}>
                {graceOptions.map((opt, i) => (
                  <div key={opt.m} onClick={() => setGraceMonths(opt.m)} style={{
                    display: 'flex', alignItems: 'flex-start', gap: 20, padding: '20px 0',
                    borderTop: i === 0 ? 'none' : '1px solid var(--hairline)', cursor: 'pointer',
                  }}>
                    <span style={{
                      display: 'inline-block', width: 14, height: 14, borderRadius: '50%',
                      flexShrink: 0, marginTop: 2,
                      border: '1px solid var(--ink)',
                      background: graceMonths === opt.m ? 'var(--ink)' : 'transparent',
                      transition: 'background 0.15s',
                    }} />
                    <div>
                      <div className="mono tiny upper" style={{ color: graceMonths === opt.m ? 'var(--ink)' : 'var(--ink-2)', letterSpacing: '0.22em' }}>
                        {opt.label}
                      </div>
                      <div className="serif" style={{ fontSize: 13, color: 'var(--muted)', fontStyle: 'italic', fontWeight: 300, marginTop: 6 }}>
                        {opt.desc}
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              <BarSubmit label={ts.saveSettings} done={ts.saved} />
            </div>

            <div style={{ borderTop: '1px solid var(--ice)', paddingTop: 20 }}>
              <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 28 }}>
                {ts.howItWorks}
              </div>
              {confirmSteps.map((step, i) => (
                <div key={i} style={{ display: 'flex', gap: 20, marginBottom: 28, alignItems: 'flex-start' }}>
                  <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.22em', minWidth: 28, flexShrink: 0 }}>
                    {String(i + 1).padStart(2, '0')}
                  </div>
                  <div>
                    <div className="display" style={{ fontSize: 17, marginBottom: 8 }}>{step.title}.</div>
                    <div className="serif" style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6, fontWeight: 300 }}>{step.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* 04 Export & End */}
        {section === 'export' && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'flex-start' }}>
            <div>
              <div className="mono tiny upper" style={{ color: 'var(--ice)', letterSpacing: '0.28em', marginBottom: 24 }}>{ts.exportTitle}</div>
              <div style={{ borderTop: '1px solid var(--ink)', borderBottom: '1px solid var(--ink)', marginBottom: 48 }}>
                {exportItems.map((item, i) => (
                  <div key={i} style={{ padding: '24px 0', borderTop: i === 0 ? 'none' : '1px solid var(--hairline)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24 }}>
                    <div>
                      <div className="display" style={{ fontSize: 16, marginBottom: 6 }}>{item.label}.</div>
                      <div className="serif" style={{ fontSize: 14, color: 'var(--muted)', fontWeight: 300, fontStyle: 'italic' }}>{item.desc}</div>
                    </div>
                    <button className="btn ghost" style={{ padding: '10px 16px', fontSize: 11, flexShrink: 0 }}>{ts.downloadBtn}</button>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <div className="mono tiny upper" style={{ color: 'var(--muted)', letterSpacing: '0.28em', marginBottom: 24 }}>
                {ts.dangerZone}
              </div>
              <div style={{ border: '1px solid var(--rule)', padding: '0 24px' }}>
                {dangerItems.map((item, i) => (
                  <div key={i} style={{ padding: '24px 0', borderTop: i === 0 ? 'none' : '1px solid var(--hairline)' }}>
                    <div className="display" style={{ fontSize: 16, marginBottom: 8, color: 'var(--ink-2)' }}>{item.label}.</div>
                    <div className="serif" style={{ fontSize: 14, color: 'var(--muted)', fontWeight: 300, fontStyle: 'italic', marginBottom: 16 }}>{item.desc}</div>
                    <button className="btn ghost" style={{ padding: '10px 16px', fontSize: 11, borderColor: 'var(--rule)' }}>
                      {ts.proceedBtn}
                    </button>
                  </div>
                ))}
              </div>
              <div className="serif" style={{ fontSize: 13, color: 'var(--muted)', fontStyle: 'italic', fontWeight: 300, marginTop: 16 }}>
                {ts.dangerNote}
              </div>
            </div>
          </div>
        )}

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

Object.assign(window, { Settings });