// Profile screen — full account management
window.ProfileScreen = function ProfileScreen({ t, lang, subTab, setSubTab }) {
  // Map subnav id ('api') to internal tab id ('api_keys')
  const tabFromSub = subTab === "api" ? "api_keys" : (subTab || "personal");
  const tab = tabFromSub;
  const setTab = (id) => setSubTab && setSubTab(id === "api_keys" ? "api" : id);
  const Icons = window.Icons;

  return (
    <div className="page">
      <window.PageHeader title={t("profile_title")} subtitle={t("profile_sub")} />

      <div>
        {tab === "personal" && <PersonalTab t={t} />}
        {tab === "team" && <TeamTab t={t} />}
        {tab === "notifications" && <NotificationsTab t={t} />}
        {tab === "integrations" && <IntegrationsTab t={t} />}
        {tab === "billing" && <BillingTab t={t} />}
        {tab === "api_keys" && <ApiKeysTab t={t} />}
        {tab === "security" && <SecurityTab t={t} />}
      </div>
    </div>
  );
};

function PersonalTab({ t }) {
  // The user profile API doesn't exist yet — empty form, no prefilled values.
  return (
    <div className="card" style={{ padding: 32, textAlign: "center", color: "var(--text-muted)", fontSize: 12.5 }}>
      {t("coming_soon_sub")}
    </div>
  );
}

function TeamTab({ t }) {
  const Icons = window.Icons;
  return (
    <div className="card">
      <div className="card-header">
        <h3>Team members</h3>
        <window.Btn variant="brand" icon={Icons.Plus} disabled>Invite</window.Btn>
      </div>
      <div style={{ padding: 32, textAlign: "center", color: "var(--text-muted)", fontSize: 12.5 }}>
        {t("coming_soon_sub")}
      </div>
    </div>
  );
}

function NotificationsTab({ t }) {
  const opts = [
    { title: "Email — invoices", desc: "Get notified when invoices are paid, pending or overdue.", on: true },
    { title: "Email — alerts", desc: "Reminders for tax filings, renewals, deadlines.", on: true },
    { title: "Email — team activity", desc: "When members invite, remove or change roles.", on: false },
    { title: "Push — desktop", desc: "Browser notifications while Vildez is open.", on: true },
    { title: "Weekly digest", desc: "Summary of your business every Monday.", on: true },
  ];
  return (
    <div className="card">
      <div className="card-header"><h3>Notification preferences</h3></div>
      <div className="row-list">
        {opts.map((o, i) => <NotifRow key={i} {...o} />)}
      </div>
    </div>
  );
}
function NotifRow({ title, desc, on: initial }) {
  const [on, setOn] = React.useState(initial);
  return (
    <div className="row">
      <div className="row-main">
        <div className="row-title">{title}</div>
        <div className="row-sub">{desc}</div>
      </div>
      <window.Switch on={on} onChange={setOn} />
    </div>
  );
}

function IntegrationsTab({ t }) {
  return (
    <div className="card" style={{ padding: 32, textAlign: "center", color: "var(--text-muted)", fontSize: 12.5 }}>
      {t("coming_soon_sub")}
    </div>
  );
}

function BillingTab({ t }) {
  return (
    <div className="card" style={{ padding: 32, textAlign: "center", color: "var(--text-muted)", fontSize: 12.5 }}>
      {t("coming_soon_sub")}
    </div>
  );
}

function ApiKeysTab({ t }) {
  const Icons = window.Icons;
  return (
    <div className="card">
      <div className="card-header">
        <h3>API keys</h3>
        <window.Btn variant="brand" icon={Icons.Plus} disabled>Create key</window.Btn>
      </div>
      <div style={{ padding: 32, textAlign: "center", color: "var(--text-muted)", fontSize: 12.5 }}>
        {t("coming_soon_sub")}
      </div>
    </div>
  );
}

function SecurityTab({ t }) {
  return (
    <div>
      <div className="card">
        <div className="card-header"><h3>Password</h3></div>
        <div style={{ padding: 20, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <label className="field">Current password<input type="password" className="input" defaultValue="••••••••" /></label>
          <div />
          <label className="field">New password<input type="password" className="input" /></label>
          <label className="field">Confirm<input type="password" className="input" /></label>
        </div>
        <div style={{ borderTop: "1px solid var(--border)", padding: "12px 20px", display: "flex", justifyContent: "flex-end" }}>
          <window.Btn variant="brand">Update password</window.Btn>
        </div>
      </div>
      <div className="card" style={{ marginTop: 16 }}>
        <div className="card-header"><h3>Two-factor authentication</h3></div>
        <div className="row-list">
          <div className="row">
            <div className="row-main">
              <div className="row-title">Authenticator app</div>
              <div className="row-sub">Use an app like 1Password or Authy.</div>
            </div>
            <span className="badge success">Enabled</span>
          </div>
          <div className="row">
            <div className="row-main">
              <div className="row-title">SMS</div>
              <div className="row-sub">Backup codes by text message.</div>
            </div>
            <window.Btn variant="ghost" className="btn sm">Setup</window.Btn>
          </div>
        </div>
      </div>
      <div className="card" style={{ marginTop: 16 }}>
        <div className="card-header"><h3>Active sessions</h3></div>
        <div className="row-list">
          {[
            { dev: "MacBook Pro · Chrome", loc: "Madrid, ES", time: "Now", current: true },
            { dev: "iPhone · Safari", loc: "Madrid, ES", time: "2h ago", current: false },
            { dev: "Windows · Firefox", loc: "Lisbon, PT", time: "3d ago", current: false },
          ].map((s, i) => (
            <div key={i} className="row">
              <div className="row-main">
                <div className="row-title">{s.dev} {s.current && <span className="badge success" style={{ marginLeft: 8 }}>Current</span>}</div>
                <div className="row-sub mono">{s.loc} · {s.time}</div>
              </div>
              {!s.current && <window.Btn variant="ghost" className="btn sm">Revoke</window.Btn>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProfileScreen: window.ProfileScreen });