// Profile & Settings

function ProfileSettings() {
  const { user } = useAuth();
  const [form, setForm] = React.useState(() => profileFormFromUser(user));
  const [busy, setBusy] = React.useState(false);
  const [status, setStatus] = React.useState('');
  const [err, setErr] = React.useState('');

  React.useEffect(() => {
    setForm(profileFormFromUser(user));
  }, [user?.userId, user?.email, user?.phone]);

  const update = (key, value) => {
    setForm((f) => ({ ...f, [key]: value }));
    setStatus('');
    setErr('');
  };

  const reset = () => {
    setForm(profileFormFromUser(user));
    setStatus('');
    setErr('');
  };

  const save = async () => {
    setBusy(true);
    setErr('');
    setStatus('');
    try {
      const result = await window.molaraAuth.updatePatientProfile(form);
      if (result?.user) setForm(profileFormFromUser(result.user));
      setStatus('Profile saved to your account');
    } catch (e) {
      setErr(e.message || 'Could not save profile.');
    } finally {
      setBusy(false);
    }
  };

  const displayName = form.name || user?.name || 'Patient';
  const initials = window.molaraAuth?.initialsFor ? window.molaraAuth.initialsFor(displayName) : (user?.initials || 'PT');
  const patientId = user?.userId ? user.userId.replace(/^patient:/, 'MOL-') : 'MOL-new';

  return (
    <PortalShell active="profile" title="Profile & Settings" subtitle="Manage your account, privacy and preferences">
      <div style={{ padding: '24px 32px', display: 'grid', gridTemplateColumns: '220px 1fr', gap: 32, maxWidth: 1100 }}>
        {/* Settings nav */}
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          {[
            { l: 'Personal info',   on: true  },
            { l: 'Privacy & data',  on: false },
            { l: 'Notifications',   on: false },
            { l: 'Security',        on: false },
            { l: 'Language',        on: false },
            { l: 'Family members',  on: false },
            { l: 'Delete account',  on: false, danger: true },
          ].map(n => (
            <div key={n.l} style={{
              padding: '8px 12px', borderRadius: 8, fontSize: 13.5,
              background: n.on ? 'var(--paper-2)' : 'transparent',
              fontWeight: n.on ? 500 : 400,
              color: n.danger ? 'var(--danger)' : n.on ? 'var(--ink)' : 'var(--ink-2)',
              cursor: 'pointer',
            }}>{n.l}</div>
          ))}
        </nav>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Avatar block */}
          <div className="ml-card" style={{ padding: 24, display: 'flex', alignItems: 'center', gap: 20 }}>
            <div className="ml-avatar" style={{ width: 80, height: 80, borderRadius: '50%', fontSize: 28 }}>{initials}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 20, fontFamily: 'var(--display)', letterSpacing: '-0.02em' }}>{displayName}</div>
              <div className="ml-muted" style={{ fontSize: 13, marginTop: 2 }}>Patient ID · {patientId}</div>
            </div>
            <button className="ml-btn ml-btn--ghost" style={{ fontSize: 12.5 }}>Change photo</button>
          </div>

          {/* Personal */}
          <div className="ml-card" style={{ padding: 24 }}>
            <div className="ml-label" style={{ marginBottom: 14 }}>Personal information</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <Field label="Full name" value={form.name} placeholder="Your full name" onChange={(v) => update('name', v)}/>
              <Field label="Date of birth" value={form.dob} placeholder="DD MMM YYYY" onChange={(v) => update('dob', v)}/>
              <Field label="Gender" value={form.gender} placeholder="Optional" onChange={(v) => update('gender', v)}/>
              <Field label="Blood type" value={form.bloodType} placeholder="Optional" onChange={(v) => update('bloodType', v)}/>
              <Field label="Phone" value={form.phone} placeholder="Your mobile number" onChange={(v) => update('phone', v)} disabled={!!user?.phone}/>
              <Field label="Email" value={form.email} placeholder="you@gmail.com" onChange={(v) => update('email', v)} disabled={!!user?.email}/>
              <Field label="Address" full value={form.address} placeholder="Your address" onChange={(v) => update('address', v)}/>
            </div>
            {err && <div style={{ marginTop: 14, padding: 10, borderRadius: 8, background: 'oklch(96% 0.05 25)', color: 'var(--danger)', fontSize: 12.5 }}>{err}</div>}
            {status && <div style={{ marginTop: 14, padding: 10, borderRadius: 8, background: 'oklch(94% 0.06 165)', color: 'oklch(35% 0.12 165)', fontSize: 12.5 }}>{status}</div>}
            <div style={{ marginTop: 18, display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <button type="button" onClick={reset} className="ml-btn ml-btn--ghost" style={{ fontSize: 12.5 }}>Cancel</button>
              <button type="button" onClick={save} disabled={busy || !form.name.trim()} className="ml-btn ml-btn--primary" style={{ fontSize: 12.5, opacity: (busy || !form.name.trim()) ? 0.6 : 1 }}>{busy ? 'Saving...' : 'Save changes'}</button>
            </div>
          </div>

          {/* Notifications block — peek of next section */}
          <div className="ml-card" style={{ padding: 24 }}>
            <div className="ml-label" style={{ marginBottom: 14 }}>Notifications</div>
            {[
              { l: 'Appointment reminders',     sub: 'SMS + email · 24h and 1h before',  on: true  },
              { l: 'Prescription ready',        sub: 'Push notification',                 on: true  },
              { l: 'Dentist messages',          sub: 'Real-time push + email',            on: true  },
              { l: 'Promotions & health tips',  sub: 'Weekly digest',                     on: false },
            ].map((row, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 16,
                padding: '12px 0', borderBottom: i === 3 ? 'none' : '1px solid var(--line-2)',
              }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5 }}>{row.l}</div>
                  <div className="ml-muted" style={{ fontSize: 12 }}>{row.sub}</div>
                </div>
                <Toggle on={row.on}/>
              </div>
            ))}
          </div>

          {/* Language */}
          <div className="ml-card" style={{ padding: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div className="ml-label">Language</div>
              <div style={{ fontSize: 14, marginTop: 4 }}>English (India)</div>
            </div>
            <button className="ml-btn ml-btn--ghost" style={{ fontSize: 12.5 }}>
              <I.globe size={14}/> Change
            </button>
          </div>
        </div>
      </div>
    </PortalShell>
  );
}

function profileFormFromUser(user) {
  return {
    name: user?.name || '',
    email: user?.email || '',
    phone: user?.phone || '',
    dob: user?.dob || '',
    gender: user?.gender || '',
    bloodType: user?.bloodType || '',
    address: user?.address || '',
  };
}

function Field({ label, value, placeholder, full, disabled, onChange }) {
  return (
    <div style={{ gridColumn: full ? 'span 2' : 'auto' }}>
      <div className="ml-label" style={{ marginBottom: 6 }}>{label}</div>
      <input className="ml-input" value={value} placeholder={placeholder || ''} disabled={disabled}
        onChange={(e) => onChange && onChange(e.target.value)}
        style={disabled ? { background: 'var(--paper-2)', color: 'var(--ink-3)' } : null}/>
    </div>
  );
}

function Toggle({ on }) {
  return (
    <div style={{
      width: 36, height: 20, borderRadius: 999,
      background: on ? 'var(--blue)' : 'var(--line)',
      position: 'relative', cursor: 'pointer',
      transition: 'background .15s',
    }}>
      <div style={{
        position: 'absolute', top: 2, left: on ? 18 : 2,
        width: 16, height: 16, borderRadius: 999,
        background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,.2)',
        transition: 'left .15s',
      }}/>
    </div>
  );
}

window.ProfileSettings = ProfileSettings;