// Profile page with tabs: Personal, Job, Emergency, Notifications, Security
const { useState: useStateP } = React;

function Profile({ user, onUpdate, onResetPw, onLogout }) {
  const [tab, setTab] = useStateP("personal");
  const [data, setData] = useStateP(user);
  const [savedToast, setSavedToast] = useStateP(false);

  const set = (k, v) => setData(d => ({...d, [k]: v}));
  const setNotif = (k, v) => setData(d => ({...d, notifications: {...d.notifications, [k]: v}}));

  const save = () => {
    onUpdate(data);
    setSavedToast(true);
    setTimeout(() => setSavedToast(false), 2000);
  };

  return (
    <div className="page no-sidebar">
      <main className="main">
        <div className="page-header">
          <div>
            <h1>Your profile</h1>
            <div className="sub">Manage your details, preferences and security</div>
          </div>
        </div>

        <div className="profile-grid">
          <aside className="profile-side">
            <div className="avatar lg" style={{margin: '0 auto', position: 'relative'}}>
              <span className="muted">PHOTO</span>
            </div>
            <div className="name">{data.firstName} {data.lastName}</div>
            <div className="role">{data.jobTitle}</div>
            <div className="role" style={{marginTop: 4, opacity: 0.7}}>{data.department}</div>
            <button className="ghost upload">
              <I.Camera style={{verticalAlign: '-2px', marginRight: 6}}/> Upload photo
            </button>
            <div style={{marginTop: 16, paddingTop: 16, borderTop: '1px dashed var(--line)', textAlign: 'left'}}>
              <div className="muted" style={{marginBottom: 8}}>Account</div>
              <div style={{fontSize: 13, marginBottom: 4}}>{data.email}</div>
              <div style={{fontSize: 12, color: 'var(--ink-3)'}}>Last sign-in: today, 09:14</div>
            </div>
          </aside>

          <div>
            <div className="profile-tabs">
              <button className={tab === "personal" ? "active" : ""} onClick={() => setTab("personal")}>Personal</button>
              <button className={tab === "job" ? "active" : ""} onClick={() => setTab("job")}>Job &amp; Team</button>
              <button className={tab === "emergency" ? "active" : ""} onClick={() => setTab("emergency")}>Emergency</button>
              <button className={tab === "notif" ? "active" : ""} onClick={() => setTab("notif")}>Notifications</button>
              <button className={tab === "security" ? "active" : ""} onClick={() => setTab("security")}>Security</button>
            </div>

            {tab === "personal" && (
              <div>
                <div className="subhead">Personal details</div>
                <div className="field-grid">
                  <div className="field"><label>First name</label><input value={data.firstName} onChange={e => set("firstName", e.target.value)}/></div>
                  <div className="field"><label>Last name</label><input value={data.lastName} onChange={e => set("lastName", e.target.value)}/></div>
                  <div className="field fg-full"><label>Email address</label><input value={data.email} onChange={e => set("email", e.target.value)} type="email"/></div>
                  <div className="field fg-full"><label>Phone number</label><input value={data.phone} onChange={e => set("phone", e.target.value)} type="tel"/></div>
                </div>
                <div className="cta-row" style={{justifyContent: 'flex-end'}}>
                  <button className="ghost" onClick={() => setData(user)}>Discard changes</button>
                  <button className="primary" onClick={save}>Save changes</button>
                </div>
              </div>
            )}

            {tab === "job" && (
              <div>
                <div className="subhead">Job &amp; Team</div>
                <div className="field-grid">
                  <div className="field"><label>Job title</label><input value={data.jobTitle} onChange={e => set("jobTitle", e.target.value)}/></div>
                  <div className="field"><label>Department</label><input value={data.department} onChange={e => set("department", e.target.value)}/></div>
                  <div className="field"><label>Manager</label><input value={data.manager} onChange={e => set("manager", e.target.value)}/></div>
                  <div className="field"><label>Team</label><input value={data.team} onChange={e => set("team", e.target.value)}/></div>
                </div>
                <div className="muted" style={{marginBottom: 24}}>
                  Some of these fields are managed by HR. Contact your line manager if changes are required.
                </div>
                <div className="cta-row" style={{justifyContent: 'flex-end'}}>
                  <button className="primary" onClick={save}>Save changes</button>
                </div>
              </div>
            )}

            {tab === "emergency" && (
              <div>
                <div className="subhead">Emergency contact</div>
                <div className="field-grid">
                  <div className="field"><label>Contact name</label><input value={data.emergencyName} onChange={e => set("emergencyName", e.target.value)}/></div>
                  <div className="field"><label>Relationship</label><input value={data.emergencyRelation} onChange={e => set("emergencyRelation", e.target.value)}/></div>
                  <div className="field fg-full"><label>Contact phone</label><input value={data.emergencyPhone} onChange={e => set("emergencyPhone", e.target.value)} type="tel"/></div>
                </div>
                <div className="muted" style={{marginBottom: 24}}>
                  Used only by HR &amp; Health &amp; Safety in the event of a workplace incident.
                </div>
                <div className="cta-row" style={{justifyContent: 'flex-end'}}>
                  <button className="primary" onClick={save}>Save changes</button>
                </div>
              </div>
            )}

            {tab === "notif" && (
              <div>
                <div className="subhead">Notification preferences</div>
                {[
                  { k: "newAssets",        title: "New items assigned to me",     sub: "Email when new policies, training or forms are added" },
                  { k: "deadlineReminders",title: "Deadline reminders",           sub: "Email reminders 7, 3 and 1 days before due dates" },
                  { k: "weeklyDigest",     title: "Weekly digest",                sub: "Monday morning summary of outstanding items" },
                  { k: "productUpdates",   title: "Product &amp; system updates",  sub: "Heads-up on planned maintenance and new features" },
                ].map(row => (
                  <div className="switch-row" key={row.k}>
                    <div>
                      <div style={{fontWeight: 500}} dangerouslySetInnerHTML={{__html: row.title}}/>
                      <div className="meta">{row.sub}</div>
                    </div>
                    <div
                      className={`switch ${data.notifications[row.k] ? "on" : ""}`}
                      onClick={() => setNotif(row.k, !data.notifications[row.k])}
                    />
                  </div>
                ))}
                <div className="cta-row" style={{justifyContent: 'flex-end', marginTop: 24}}>
                  <button className="primary" onClick={save}>Save preferences</button>
                </div>
              </div>
            )}

            {tab === "security" && (
              <div>
                <div className="subhead">Password</div>
                <div style={{
                  border: '1px solid var(--line)',
                  padding: 16,
                  marginBottom: 24,
                  display: 'flex', alignItems: 'center', gap: 16,
                }}>
                  <div style={{
                    width: 36, height: 36,
                    border: '1px solid var(--ink)',
                    display: 'grid', placeItems: 'center', flexShrink: 0,
                  }}>
                    <I.Lock/>
                  </div>
                  <div style={{flex: 1}}>
                    <div style={{fontWeight: 500}}>Password</div>
                    <div className="meta" style={{fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--ink-3)'}}>
                      Last changed 47 days ago
                    </div>
                  </div>
                  <button className="ghost" onClick={onResetPw}>Reset password</button>
                </div>

                <div className="subhead">Sessions</div>
                <div style={{border: '1px solid var(--line)', padding: 16, marginBottom: 12}}>
                  <div className="spread">
                    <div>
                      <div style={{fontWeight: 500}}>This device — MacBook Pro · Chrome</div>
                      <div className="meta">London, UK · Active now</div>
                    </div>
                    <span className="tag solid">Current</span>
                  </div>
                </div>
                <div style={{border: '1px solid var(--line)', padding: 16, marginBottom: 24}}>
                  <div className="spread">
                    <div>
                      <div style={{fontWeight: 500}}>iPhone · Safari</div>
                      <div className="meta">London, UK · 2 days ago</div>
                    </div>
                    <button className="ghost">Sign out</button>
                  </div>
                </div>

                <div className="subhead">Two-factor authentication</div>
                <div className="switch-row" style={{borderTop: 'none'}}>
                  <div>
                    <div style={{fontWeight: 500}}>Authenticator app</div>
                    <div className="meta">Use a one-time code from an authenticator app</div>
                  </div>
                  <div className="switch on"/>
                </div>

                <div className="subhead" style={{marginTop: 32, color: 'var(--ink)'}}>Danger zone</div>
                <div style={{border: '1px solid var(--line)', padding: 16}}>
                  <div className="spread">
                    <div>
                      <div style={{fontWeight: 500}}>Sign out of all devices</div>
                      <div className="meta">You'll need to sign in again on every device</div>
                    </div>
                    <button className="ghost" onClick={onLogout}>Sign out</button>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </main>

      {savedToast && <div className="toast"><I.Check/> Changes saved</div>}
    </div>
  );
}

window.Profile = Profile;