// CardByte Enterprise — My Card (editor + live preview).
const React = window.React;
const Icon = window.CBIcon;

function MyCardScreen() {
  const { DigitalCard, Input, Button, Switch, Badge } = window.CardByteDesignSystem_069862;
  const A = "../../assets/";
  const [card, setCard] = React.useState({ name: "Aditi Kapoor", role: "Enterprise Sales Lead", company: "CardByte" });
  const [theme, setTheme] = React.useState("blue");
  const [dynamicQr, setDynamicQr] = React.useState(true);
  const set = (k) => (e) => setCard((c) => ({ ...c, [k]: e.target.value }));
  const themes = [["blue", "#143FB0"], ["navy", "#0D2358"], ["indigo", "#3A329A"], ["gold", "#D9A904"]];

  return (
    <div style={{ display: "flex", gap: 24, flexWrap: "wrap", alignItems: "flex-start" }}>
      {/* Preview */}
      <div style={{ flex: "0 0 360px", background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", padding: 24, position: "sticky", top: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 18 }}>
          <h3 style={{ fontSize: 15, fontWeight: 600, color: "var(--text-strong)" }}>Live Preview</h3>
          <Badge tone="success" dot>Published</Badge>
        </div>
        <DigitalCard {...card} theme={theme} width={312} logoSrc={A + "logo-full.svg"} />
        <div style={{ display: "flex", gap: 10, marginTop: 18 }}>
          <Button variant="secondary" size="sm" block iconLeft={<Icon name="qr" size={16} />}>QR Code</Button>
          <Button variant="secondary" size="sm" block iconLeft={<Icon name="share" size={16} />}>Share</Button>
        </div>
      </div>

      {/* Editor */}
      <div style={{ flex: 1, minWidth: 320, display: "flex", flexDirection: "column", gap: 22 }}>
        <div style={{ background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", padding: 22 }}>
          <h3 style={{ fontSize: 16, fontWeight: 600, color: "var(--text-strong)", marginBottom: 16 }}>Card Details</h3>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <Input label="Full name" value={card.name} onChange={set("name")} />
            <Input label="Job title" value={card.role} onChange={set("role")} />
            <Input label="Company" value={card.company} onChange={set("company")} />
            <Input label="Email" value="aditi@cardbyte.ai" iconLeft={<Icon name="mail" size={16} />} onChange={() => {}} />
          </div>
        </div>

        <div style={{ background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", padding: 22 }}>
          <h3 style={{ fontSize: 16, fontWeight: 600, color: "var(--text-strong)", marginBottom: 16 }}>Theme</h3>
          <div style={{ display: "flex", gap: 12, marginBottom: 18 }}>
            {themes.map(([id, col]) => (
              <button key={id} onClick={() => setTheme(id)} title={id}
                style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: col, cursor: "pointer", border: theme === id ? "3px solid var(--cb-blue)" : "3px solid transparent", outline: "1px solid var(--border-subtle)" }} />
            ))}
          </div>
          <Switch checked={dynamicQr} onChange={setDynamicQr} label="Enable dynamic QR for trade shows" />
        </div>

        <div style={{ display: "flex", gap: 12, justifyContent: "flex-end" }}>
          <Button variant="ghost">Discard</Button>
          <Button variant="primary" iconLeft={<Icon name="check" size={17} />}>Save &amp; Publish</Button>
        </div>
      </div>
    </div>
  );
}
window.CBMyCardScreen = MyCardScreen;