// CORE-04 · Profile & settings  (route: profile)
// User profile, password change, language, notifications.
const ProfilePage = ({ tweaks }) => {
  const Ic = window.Icons;
  const toast = useToast();
  const [tab, setTab] = useState((tweaks && tweaks.profileTab) || "profile");
  useEffect(() => { if (tweaks && tweaks.profileTab) setTab(tweaks.profileTab); }, [tweaks && tweaks.profileTab]);

  const [twofa, setTwofa] = useState(true);
  const [show, setShow] = useState(false);
  const [prefs, setPrefs] = useState({ app: true, email: true, sms: false, weekly: true, theme: false });

  const TABS = [{ value: "profile", label: "Profile" }, { value: "security", label: "Security" }, { value: "prefs", label: "Preferences" }];

  const Toggle = ({ k, t, d }) => (
    <div className="core-toggle-row">
      <div className="body"><div className="t">{t}</div><div className="d">{d}</div></div>
      <Switch checked={prefs[k]} onChange={(v)=> setPrefs(p => ({ ...p, [k]: v }))}/>
    </div>
  );

  return (
    <div className="page" style={{ maxWidth: 1080 }}>
      <div className="page-head">
        <div>
          <h1 className="page-title">Profile &amp; settings</h1>
          <div className="page-sub">Manage your account, security and notification preferences</div>
        </div>
      </div>

      <Card style={{ marginBottom: 18 }}>
        <div className="core-prof-head">
          <Avatar initials="CW" tone="avocado" className="core-prof-avatar" size="lg"/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 20, fontWeight: 600, letterSpacing: "-0.02em" }}>Caroline Wanjala</div>
            <div className="muted" style={{ fontSize: 13.5, marginTop: 2 }}>caroline@amoms.co.ke</div>
            <div className="row" style={{ gap: 8, marginTop: 9 }}>
              <span className="badge badge-avocado"><Ic.Shield size={11}/> Plant Manager</span>
              <span className="badge badge-success"><Ic.CheckCircle size={11}/> Active</span>
              <span className="muted" style={{ fontSize: 12 }}>Member since Jan 2025</span>
            </div>
          </div>
          <Button variant="outline" icon={Ic.Camera}>Change photo</Button>
        </div>
      </Card>

      <div style={{ marginBottom: 18 }}>
        <Tabs value={tab} onChange={setTab} options={TABS}/>
      </div>

      {tab === "profile" && (
        <Card>
          <CardHead title="Personal information" desc="This is visible to other admins on your team."/>
          <div className="card-body">
            <div className="core-form-grid">
              <div className="field"><label className="label">Full name</label><input className="input" defaultValue="Caroline Wanjala"/></div>
              <div className="field"><label className="label">Display name</label><input className="input" defaultValue="Caroline"/></div>
              <div className="field"><label className="label">Work email</label><input className="input" defaultValue="caroline@amoms.co.ke" disabled/><div className="field-hint">Email changes are managed by an administrator.</div></div>
              <div className="field"><label className="label">Phone</label><input className="input" defaultValue="+254 722 481 002"/></div>
              <div className="field"><label className="label">Role</label><input className="input" defaultValue="Plant Manager" disabled/><div className="field-hint">Set in Roles &amp; permissions.</div></div>
              <div className="field"><label className="label">Default plant</label>
                <select className="select" defaultValue="Murang'a"><option>Murang'a Plant</option><option>Nyeri Depot</option></select>
              </div>
              <div className="field span-2"><label className="label">Bio / title</label><textarea className="textarea" defaultValue="Plant Manager — oversees procurement, production and dispatch at Murang'a."/></div>
            </div>
          </div>
          <div className="card-body" style={{ paddingTop: 0, display: "flex", gap: 8, justifyContent: "flex-end" }}>
            <Button variant="ghost">Cancel</Button>
            <Button variant="primary" icon={Ic.Check} onClick={()=> toast({ title: "Profile saved" })}>Save changes</Button>
          </div>
        </Card>
      )}

      {tab === "security" && (
        <div className="col" style={{ gap: 18 }}>
          <Card>
            <CardHead title="Change password" desc="Use at least 10 characters with a mix of letters, numbers and symbols."/>
            <div className="card-body">
              <div className="core-form-grid">
                <div className="field span-2" style={{ maxWidth: 420 }}><label className="label">Current password</label>
                  <div className="auth-input-wrap"><Ic.Lock size={16} className="ic"/><input className="input" type={show ? "text" : "password"} placeholder="••••••••" style={{ paddingLeft: 38 }}/><button type="button" className="eye" onClick={()=> setShow(s => !s)}>{show ? <Ic.EyeOff size={16}/> : <Ic.Eye size={16}/>}</button></div>
                </div>
                <div className="field"><label className="label">New password</label><input className="input" type="password" placeholder="••••••••"/></div>
                <div className="field"><label className="label">Confirm new password</label><input className="input" type="password" placeholder="••••••••"/></div>
              </div>
              <div style={{ marginTop: 14 }}><Button variant="primary" icon={Ic.Key} onClick={()=> toast({ title: "Password updated" })}>Update password</Button></div>
            </div>
          </Card>

          <Card>
            <CardHead title="Two-factor authentication"/>
            <div className="card-body" style={{ paddingTop: 0 }}>
              <div className="core-toggle-row">
                <span className="core-session-ic"><Ic.Fingerprint size={18}/></span>
                <div className="body"><div className="t">Authenticator app</div><div className="d">{twofa ? "Enabled — codes via Google Authenticator" : "Add a second step at sign-in"}</div></div>
                <Switch checked={twofa} onChange={setTwofa}/>
              </div>
            </div>
          </Card>

          <Card>
            <CardHead title="Active sessions" action={<Button variant="outline" size="sm" icon={Ic.LogOut}>Sign out all</Button>}/>
            <div className="card-body" style={{ paddingTop: 0 }}>
              {[
                { ic: "Monitor", dev: "Chrome · macOS", loc: "Murang'a, KE · 196.201.214.2", now: true },
                { ic: "Smartphone", dev: "AMOMS app · Android", loc: "Murang'a, KE", now: false, when: "2 hours ago" },
              ].map((s, i) => {
                const SI = Ic[s.ic];
                return (
                  <div key={i} className="core-session">
                    <span className="core-session-ic"><SI size={18}/></span>
                    <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 13.5, fontWeight: 500 }}>{s.dev}</div><div className="muted" style={{ fontSize: 12 }}>{s.loc}</div></div>
                    {s.now ? <span className="badge badge-success">This device</span> : <span className="muted" style={{ fontSize: 12 }}>{s.when}</span>}
                  </div>
                );
              })}
            </div>
          </Card>
        </div>
      )}

      {tab === "prefs" && (
        <div className="col" style={{ gap: 18 }}>
          <Card>
            <CardHead title="Language &amp; region"/>
            <div className="card-body">
              <div className="core-form-grid">
                <div className="field"><label className="label">Language</label><select className="select"><option>English</option><option>Kiswahili</option></select></div>
                <div className="field"><label className="label">Date format</label><select className="select"><option>DD MMM YYYY</option><option>YYYY-MM-DD</option></select></div>
                <div className="field"><label className="label">Timezone</label><select className="select"><option>EAT · Nairobi (GMT+3)</option></select></div>
                <div className="field"><label className="label">Currency</label><select className="select"><option>KSh — Kenyan Shilling</option></select></div>
              </div>
            </div>
          </Card>
          <Card>
            <CardHead title="Notifications" desc="Choose how you want to be alerted."/>
            <div className="card-body" style={{ paddingTop: 0 }}>
              <Toggle k="app" t="In-app notifications" d="Show alerts in the notification inbox"/>
              <Toggle k="email" t="Email" d="Daily digest + urgent alerts to caroline@amoms.co.ke"/>
              <Toggle k="sms" t="SMS" d="Critical alerts only (threshold breaches, downtime)"/>
              <Toggle k="weekly" t="Weekly summary" d="Procurement, production and QC roundup every Monday"/>
            </div>
          </Card>
        </div>
      )}
    </div>
  );
};

window.Pages = Object.assign(window.Pages || {}, { profile: ProfilePage });