// Woodbury Operator — Profile / account settings. Registers window.ProfileScreen.
(function () {
  const NS = window.WoodburyPropertiesDesignSystem_7290ca;
  const { Card, CardHeader, Button, Badge, Avatar, Input, Select, Checkbox, Switch, Eyebrow, Modal } = NS;

  function ProfileScreen({ role, onBack }) {
    const [avatar, setAvatar] = React.useState("../../assets/images/avatar-1.jpg");
    const [twoFA, setTwoFA] = React.useState(true);
    const [setup, setSetup] = React.useState(false);
    const [code, setCode] = React.useState("");
    const fileRef = React.useRef(null);

    const toggle2FA = (v) => {
      if (v) { setSetup(true); }
      else { setTwoFA(false); window.WBToast("Two-factor authentication disabled", "danger"); }
    };

    const onFile = (e) => {
      const f = e.target.files && e.target.files[0];
      if (!f) return;
      const url = URL.createObjectURL(f);
      setAvatar(url);
      window.WBToast("Profile photo updated");
    };

    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 28, padding: "36px 40px", maxWidth: 1000 }}>
        <window.WBPageHeader eyebrow="Account" title="My Profile"
          sub="Update your personal details, photo, and preferences."
          actions={<Button variant="secondary" icon="arrow-left" onClick={onBack}>Back</Button>} />

        {/* Identity card with photo upload */}
        <Card style={{ padding: 28 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
            <div style={{ position: "relative" }}>
              <Avatar src={avatar} name="Kwame Ansah" size={96} />
              <button onClick={() => fileRef.current && fileRef.current.click()} title="Change photo"
                style={{ position: "absolute", right: -2, bottom: -2, width: 34, height: 34, borderRadius: 9999, border: "3px solid var(--surface)", background: "var(--brand)", color: "var(--cream-50)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <span className="wb-ico" style={{ width: 16, height: 16 }}><i data-lucide="camera"></i></span>
              </button>
              <input ref={fileRef} type="file" accept="image/*" onChange={onFile} style={{ display: "none" }} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <h2 style={{ margin: 0, fontFamily: "var(--font-serif)", fontWeight: 700, fontSize: 26, color: "var(--text-heading)" }}>Kwame Ansah</h2>
                <Badge tone="brand">{role || "Super Administrator"}</Badge>
              </div>
              <p style={{ margin: "6px 0 14px", fontSize: 14, color: "var(--text-muted)" }}>kwame.ansah@woodbury.com</p>
              <div style={{ display: "flex", gap: 10 }}>
                <Button variant="secondary" size="sm" icon="upload" onClick={() => fileRef.current && fileRef.current.click()}>Upload Photo</Button>
                <Button variant="ghost" size="sm" onClick={() => { setAvatar("../../assets/images/avatar-1.jpg"); window.WBToast("Photo reset"); }}>Remove</Button>
              </div>
            </div>
          </div>
        </Card>

        {/* Personal details */}
        <Card>
          <CardHeader title="Personal Details" />
          <div style={{ padding: 28, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
            <Input label="Full name" defaultValue="Kwame Ansah" />
            <Input label="Work email" icon="mail" defaultValue="kwame.ansah@woodbury.com" />
            <Input label="Phone" defaultValue="+233 24 000 1122" />
            <Select label="Preferred language" options={["English", "Twi", "Ga", "Ewe"]} />
            <Select label="Timezone" options={["GMT (Accra)", "GMT+1", "GMT-5"]} containerStyle={{ gridColumn: "1 / 2" }} />
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end", gap: 12, padding: "16px 28px", borderTop: "1px solid var(--border)", background: "var(--cream-50)" }}>
            <Button variant="secondary" onClick={onBack}>Cancel</Button>
            <Button variant="primary" icon="check" onClick={() => window.WBToast("Profile details saved")}>Save Changes</Button>
          </div>
        </Card>

        {/* Preferences + security */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignItems: "start" }}>
          <Card style={{ padding: 28 }}>
            <Eyebrow>Notifications</Eyebrow>
            <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 18 }}>
              <Checkbox label="Email me about urgent maintenance" defaultChecked />
              <Checkbox label="Email me new applicant submissions" defaultChecked />
              <Checkbox label="Weekly portfolio summary" />
              <Checkbox label="SMS alerts for critical issues" defaultChecked />
            </div>
          </Card>
          <Card style={{ padding: 28 }}>
            <Eyebrow>Security</Eyebrow>
            <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 18 }}>
              <Input label="Current password" type="password" placeholder="••••••••" />
              <Input label="New password" type="password" placeholder="At least 8 characters" />
              <Button variant="secondary" icon="lock" onClick={() => window.WBToast("Password updated")}>Update Password</Button>
            </div>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, marginTop: 22, paddingTop: 22, borderTop: "1px solid var(--border)" }}>
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ fontWeight: 700, fontSize: 14, color: "var(--text-heading)" }}>Two-Factor Authentication</span>
                  {twoFA ? <Badge tone="success" dot>On</Badge> : <Badge tone="neutral">Off</Badge>}
                </div>
                <p style={{ margin: "4px 0 0", fontSize: 12, color: "var(--text-muted)", maxWidth: 280 }}>Optional. Require a 6-digit code from an authenticator app at sign-in.</p>
              </div>
              <Switch checked={twoFA} onChange={toggle2FA} />
            </div>
            {twoFA && <Button variant="ghost" size="sm" icon="key-round" onClick={() => window.WBToast("Backup codes downloaded")} style={{ marginTop: 12 }}>View backup codes</Button>}
          </Card>
        </div>

        {/* 2FA setup modal */}
        <Modal open={setup} onClose={() => setSetup(false)} icon="shield-check" title="Set up Two-Factor Authentication" subtitle="Scan the code with your authenticator app, then verify." width={460}
          footer={<React.Fragment><Button variant="secondary" onClick={() => setSetup(false)}>Cancel</Button><Button variant="primary" icon="check" disabled={code.length < 6} onClick={() => { setSetup(false); setTwoFA(true); window.WBToast("Two-factor authentication enabled"); }}>Enable 2FA</Button></React.Fragment>}>
          <div style={{ display: "flex", flexDirection: "column", gap: 20, alignItems: "center" }}>
            <div style={{ width: 168, height: 168, borderRadius: "var(--radius-md)", background: "var(--surface)", boxShadow: "inset 0 0 0 1px var(--border)", padding: 12, display: "grid", gridTemplateColumns: "repeat(11, 1fr)", gridAutoRows: "1fr", gap: 2 }}>
              {Array.from({ length: 121 }).map((_, i) => { const r = ((i * 73 + 17) % 100) < 46 || i % 12 === 0; return <span key={i} style={{ background: r ? "var(--espresso)" : "transparent", borderRadius: 1 }} />; })}
            </div>
            <div style={{ textAlign: "center" }}>
              <div style={{ fontSize: 12, color: "var(--text-muted)" }}>Or enter this key manually</div>
              <div style={{ fontFamily: "var(--font-serif)", fontWeight: 700, fontSize: 16, letterSpacing: "0.12em", color: "var(--text-heading)", marginTop: 4 }}>WBRY-4F8K-2ACR-91GH</div>
            </div>
            <div style={{ width: "100%" }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: 10, textAlign: "center" }}>Enter the 6-digit code</div>
              <window.WBCodeInput onChange={setCode} />
            </div>
          </div>
        </Modal>
      </div>
    );
  }
  window.ProfileScreen = ProfileScreen;
})();