/* ============================================
   USER PROFILE / SETTINGS
   ============================================ */
function ProfileScreen({ onNavigate }) {
  const [theme, setTheme] = useState("light");
  const [lang, setLang] = useState("English");
  const [username, setUsername] = useState("Rio Pratama");
  const [emailNotif, setEmailNotif] = useState(true);
  const [browserNotif, setBrowserNotif] = useState(false);

  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">User Profile</h1>
          <p className="page-subtitle">
            <span className="mono">rio.pratama@bjp-industries.id</span>
            <span className="muted"> · Operator · L2 · Maintenance Line 3</span>
          </p>
        </div>
        <div className="row">
          <button className="btn btn--ghost" onClick={() => onNavigate("workspace")}>Cancel</button>
          <button className="btn btn--primary"><Icons.Check size={14} /> Save Changes</button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 16 }}>
        {/* Profile card */}
        <Card>
          <div style={{ textAlign: "center", padding: "8px 0 12px" }}>
            <div style={{
              width: 88, height: 88, margin: "0 auto",
              borderRadius: "50%",
              background: "linear-gradient(135deg, var(--navy-600), var(--navy-800))",
              color: "white", display: "grid", placeItems: "center",
              fontSize: 28, fontWeight: 700,
            }}>RP</div>
            <div style={{ fontSize: 16, fontWeight: 600, marginTop: 10 }}>Rio Pratama</div>
            <div className="text-xs muted mono">RIO.PRATAMA · ID 4912</div>
            <Badge kind="orange" dot={false}>Operator · L2</Badge>
          </div>
          <div style={{ borderTop: "1px solid var(--ink-200)", paddingTop: 12, marginTop: 4 }}>
            <ProfileMeta label="Department" value="Maintenance · Line 3" />
            <ProfileMeta label="Manager" value="Dewi Lestari" />
            <ProfileMeta label="Joined" value="Aug 12, 2023" />
            <ProfileMeta label="Sessions today" value="4" />
            <ProfileMeta label="Last sign-in" value="Today · 08:42 · Workstation L3-OP-02" />
          </div>
          <button className="btn btn--ghost btn--block" style={{ marginTop: 12, color: "var(--status-failed-fg)", borderColor: "#FCA5A5" }}>
            <Icons.Logout size={14} /> Sign out everywhere
          </button>
        </Card>

        {/* Settings */}
        <div className="col gap-16">
          {/* User Settings */}
          <Card title="User Settings" subtitle="Account details and authentication">
            <div className="form-group">
              <label className="label">Display Name</label>
              <input className="input" value={username} onChange={e => setUsername(e.target.value)} />
            </div>

            <div className="form-group">
              <label className="label">Corporate Email <span className="label-hint">Managed via Azure AD · cannot edit</span></label>
              <input className="input mono" defaultValue="rio.pratama@bjp-industries.id" disabled />
            </div>

            <div className="grid-2">
              <div className="form-group">
                <label className="label">Current Password</label>
                <input className="input" type="password" defaultValue="" placeholder="Enter current password" />
              </div>
              <div className="form-group">
                <label className="label">New Password <span className="label-hint">12 chars min</span></label>
                <input className="input" type="password" defaultValue="" placeholder="Enter new password" />
              </div>
            </div>

            <div className="form-group">
              <label className="label">Two-Factor Authentication</label>
              <div className="row" style={{ padding: 12, border: "1px solid var(--ink-200)", borderRadius: 6, background: "var(--ink-50)" }}>
                <div>
                  <div className="text-sm fw-600">Authenticator app · enabled</div>
                  <div className="text-xs muted">Microsoft Authenticator · last used today 08:42</div>
                </div>
                <span className="spacer" />
                <Badge kind="complete">2FA Active</Badge>
                <button className="btn btn--ghost btn--sm">Reconfigure</button>
              </div>
            </div>
          </Card>

          {/* User Preferences */}
          <Card title="User Preferences" subtitle="Interface and notification settings">
            {/* Theme */}
            <div className="form-group">
              <label className="label">Interface Theme</label>
              <div className="row gap-12">
                <ThemeOption kind="light" active={theme === "light"} onClick={() => setTheme("light")} />
                <ThemeOption kind="dark"  active={theme === "dark"}  onClick={() => setTheme("dark")} />
                <ThemeOption kind="auto"  active={theme === "auto"}  onClick={() => setTheme("auto")} />
              </div>
            </div>

            {/* Language */}
            <div className="form-group">
              <label className="label">Interface Language</label>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                <LangOption flag="🇮🇩" name="Bahasa Indonesia" code="id-ID" active={lang === "Indonesian"} onClick={() => setLang("Indonesian")} />
                <LangOption flag="🇬🇧" name="English" code="en-GB" active={lang === "English"} onClick={() => setLang("English")} />
              </div>
              <div className="text-xs muted" style={{ marginTop: 6 }}>The assistant responds in the user's question language regardless of this setting.</div>
            </div>

            {/* Density */}
            <div className="form-group">
              <label className="label">Interface Density</label>
              <div className="row gap-6">
                {["Comfortable", "Default", "Compact"].map((d, i) => (
                  <button key={d} style={{
                    flex: 1,
                    padding: "8px 12px",
                    border: "1px solid",
                    borderColor: i === 1 ? "var(--orange-500)" : "var(--ink-300)",
                    background: i === 1 ? "var(--orange-50)" : "white",
                    color: i === 1 ? "var(--orange-700)" : "var(--ink-700)",
                    borderRadius: 6,
                    fontWeight: 600, fontSize: 13,
                    cursor: "pointer",
                  }}>{d}</button>
                ))}
              </div>
            </div>

            {/* Notification toggles */}
            <div className="form-group">
              <label className="label">Notifications</label>
              <PrefToggle
                title="Email notifications"
                desc="Document ingestion complete, weekly digest, admin alerts"
                on={emailNotif}
                onChange={setEmailNotif}
              />
              <PrefToggle
                title="Browser notifications"
                desc="Real-time alerts when chats finish or jobs complete"
                on={browserNotif}
                onChange={setBrowserNotif}
              />
              <PrefToggle
                title="Show source citations inline"
                desc="Display orange citation chips next to each AI claim"
                on={true}
                onChange={() => {}}
              />
            </div>

            <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 6 }}>
              <button className="btn btn--primary"><Icons.Check size={14} /> Save Changes</button>
            </div>
          </Card>
        </div>
      </div>
    </>
  );
}

function ProfileMeta({ label, value }) {
  return (
    <div style={{ display: "flex", padding: "8px 0", borderBottom: "1px dashed var(--ink-100)", fontSize: 12.5 }}>
      <span className="muted" style={{ width: 110 }}>{label}</span>
      <span style={{ flex: 1, color: "var(--ink-900)", fontWeight: 500 }}>{value}</span>
    </div>
  );
}

function ThemeOption({ kind, active, onClick }) {
  const bg = kind === "light" ? "white" : kind === "dark" ? "var(--ink-900)" : "linear-gradient(90deg, white 50%, var(--ink-900) 50%)";
  const sidebar = kind === "light" ? "var(--navy-800)" : kind === "dark" ? "#000" : "linear-gradient(90deg, var(--navy-800) 50%, #000 50%)";
  return (
    <button onClick={onClick} style={{
      flex: 1, padding: 0, border: "2px solid", borderColor: active ? "var(--orange-500)" : "var(--ink-300)",
      borderRadius: 8, cursor: "pointer", background: "white", overflow: "hidden", textAlign: "left",
    }}>
      <div style={{ height: 80, background: bg, display: "flex", borderRadius: "6px 6px 0 0" }}>
        <div style={{ width: 24, background: sidebar }} />
        <div style={{ flex: 1, padding: 8, display: "flex", flexDirection: "column", gap: 4 }}>
          <div style={{ height: 4, borderRadius: 2, background: kind === "light" ? "var(--ink-200)" : "rgba(255,255,255,0.2)", width: "60%" }} />
          <div style={{ height: 4, borderRadius: 2, background: kind === "light" ? "var(--ink-100)" : "rgba(255,255,255,0.1)", width: "80%" }} />
          <div style={{ height: 4, borderRadius: 2, background: "var(--orange-500)", width: "40%" }} />
        </div>
      </div>
      <div className="row" style={{ padding: "8px 10px", justifyContent: "space-between" }}>
        <span style={{ fontWeight: 600, fontSize: 12.5, textTransform: "capitalize" }}>{kind}</span>
        {active && <span style={{ color: "var(--orange-500)" }}><Icons.Check size={14} /></span>}
      </div>
    </button>
  );
}

function LangOption({ flag, name, code, active, onClick }) {
  return (
    <button onClick={onClick} style={{
      display: "flex", alignItems: "center", gap: 12,
      padding: 12,
      border: "1px solid",
      borderColor: active ? "var(--orange-500)" : "var(--ink-300)",
      background: active ? "var(--orange-50)" : "white",
      borderRadius: 6, cursor: "pointer", textAlign: "left",
    }}>
      <div style={{ fontSize: 24 }}>{flag}</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontWeight: 600, fontSize: 13 }}>{name}</div>
        <div className="mono text-xs muted">{code}</div>
      </div>
      {active && <span style={{ color: "var(--orange-500)" }}><Icons.Check size={16} /></span>}
    </button>
  );
}

function PrefToggle({ title, desc, on, onChange }) {
  return (
    <div className="row" style={{ padding: "10px 12px", borderRadius: 6, marginBottom: 6, background: "var(--ink-50)", border: "1px solid var(--ink-200)" }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontWeight: 600, fontSize: 13 }}>{title}</div>
        <div className="text-xs muted">{desc}</div>
      </div>
      <Toggle on={on} onChange={onChange} />
    </div>
  );
}

window.ProfileScreen = ProfileScreen;