/* hPanel content screens. Composes DS primitives from the namespace. */
const HDS = window.HostingerHPanelDesignSystem_3ef285;
const { Button, Card, SpotlightPanel, Badge, SegmentedTabs, Icon, Avatar } = HDS;
const AppLogo = window.AppLogo;

/* ---- shared bits ---- */
function PageHeader({ title, action }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 28 }}>
      <h1 style={{ fontSize: "var(--fs-h1)", fontWeight: "var(--fw-bold)" }}>{title}</h1>
      {action}
    </div>
  );
}

function FeatureCard({ icon, title, body }) {
  return (
    <Card interactive style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <span style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        width: 40, height: 40, borderRadius: "var(--radius-md)",
        background: "var(--neutral-50)", color: "var(--text-strong)",
      }}>
        <Icon name={icon} size={20} />
      </span>
      <h3 style={{ fontSize: "var(--fs-h4)", fontWeight: "var(--fw-semibold)" }}>{title}</h3>
      <p style={{ fontSize: "var(--fs-sm)", color: "var(--text-muted)", lineHeight: "var(--lh-normal)" }}>{body}</p>
    </Card>
  );
}

/* IDE switcher — dark-style segmented row with real app logos. */
function IdeTabs({ value, onChange }) {
  const items = [
    { value: "vscode", label: "VS Code", logo: "vscode" },
    { value: "cursor", label: "Cursor", logo: "cursor" },
    { value: "devin", label: "Devin Desktop", logo: "devin" },
    { value: "antigravity", label: "Antigravity", logo: "antigravity" },
    { value: "claude", label: "Claude Code", logo: "claude" },
  ];
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      {items.map((it) => {
        const active = it.value === value;
        return (
          <button
            key={it.value} type="button" onClick={() => onChange(it.value)}
            style={{
              display: "inline-flex", alignItems: "center", gap: 9,
              height: 46, padding: "0 20px", borderRadius: "var(--radius-pill)",
              background: active ? "var(--neutral-950)" : "var(--neutral-0)",
              color: active ? "#fff" : "var(--text-body)",
              border: active ? "1px solid transparent" : "1px solid var(--border-default)",
              boxShadow: active ? "var(--shadow-sm)" : "none",
              fontFamily: "var(--font-sans)", fontSize: "var(--fs-body)",
              fontWeight: "var(--fw-medium)", letterSpacing: "-0.01em",
              cursor: "pointer", whiteSpace: "nowrap",
              transition: "background var(--dur-fast), color var(--dur-fast)",
            }}
          >
            <AppLogo name={it.logo} size={22} />
            {it.label}
          </button>
        );
      })}
    </div>
  );
}

/* ============================ API SCREEN ============================ */
function ApiScreen() {
  const [ide, setIde] = React.useState("vscode");
  const [os, setOs] = React.useState("mac");
  return (
    <div>
      <PageHeader title="API" action={
        <Button variant="secondary" iconRight="external">Documentation</Button>
      } />

      <h2 style={{ textAlign: "center", fontSize: "var(--fs-h2)", fontWeight: "var(--fw-semibold)", marginBottom: 22 }}>
        Connect your IDEs to Hostinger MCP
      </h2>
      <div style={{ display: "flex", justifyContent: "center", marginBottom: 26 }}>
        <IdeTabs value={ide} onChange={setIde} />
      </div>

      <Card padding="lg" style={{ marginBottom: 20 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 36, alignItems: "stretch" }}>
          <div style={{ display: "flex", flexDirection: "column" }}>
            <div style={{ marginBottom: 26 }}>
              <SegmentedTabs variant="track" value={os} onChange={setOs}
                items={[{ value: "mac", label: "MacOS" }, { value: "win", label: "Windows" }, { value: "linux", label: "Linux" }]} />
            </div>
            <h3 style={{ fontSize: "var(--fs-h3)", fontWeight: "var(--fw-semibold)", marginBottom: 12 }}>Install extension</h3>
            <p style={{ fontSize: "var(--fs-body)", color: "var(--text-muted)", lineHeight: "var(--lh-relaxed)", marginBottom: "auto" }}>
              Open VS Code and install the Hostinger Connector extension. Then open the extension, paste your API token, and select Connect.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
              <Button variant="primary" iconRight="external">Install in VS Code</Button>
              <Button variant="secondary">Config manually</Button>
            </div>
          </div>

          {/* Spotlight preview of the VS Code extension page */}
          <SpotlightPanel padding="0" style={{ overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center", minHeight: 320 }}>
            <div style={{ width: "82%", border: "1px solid rgba(255,255,255,0.12)", borderRadius: "var(--radius-lg)", padding: 18, background: "rgba(255,255,255,0.04)", position: "relative" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 9, color: "rgba(255,255,255,0.62)", fontSize: "var(--fs-xs)", marginBottom: 18, paddingBottom: 14, borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
                <Icon name="layers" size={16} /> Extension: Hostinger Connector
              </div>
              <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
                <img src="assets/hostinger-logo-mark-violet.png" alt="" style={{ width: 56, height: 56 }} />
                <div style={{ flex: 1 }}>
                  <div style={{ color: "#fff", fontSize: "var(--fs-h3)", fontWeight: "var(--fw-semibold)" }}>Hostinger Connector</div>
                  <div style={{ color: "rgba(255,255,255,0.55)", fontSize: "var(--fs-xs)", marginTop: 4, display: "flex", alignItems: "center", gap: 7 }}>
                    Hostinger
                    <span style={{ opacity: 0.4 }}>|</span>
                    <span style={{ display: "inline-flex", alignItems: "center", gap: 3 }}>↓ 1,500</span>
                    <span style={{ opacity: 0.4 }}>|</span>
                    <span style={{ color: "#E8C84D" }}>★★★★★</span>
                  </div>
                </div>
              </div>
              <div style={{ marginTop: 18 }}>
                <button style={{ background: "var(--brand)", color: "#fff", border: "none", borderRadius: "6px", padding: "8px 22px", fontFamily: "var(--font-sans)", fontSize: "var(--fs-sm)", fontWeight: "var(--fw-semibold)", cursor: "pointer" }}>Install</button>
              </div>
              {/* cursor pointer */}
              <svg width="34" height="34" viewBox="0 0 24 24" style={{ position: "absolute", left: "32%", bottom: -2, filter: "drop-shadow(0 2px 3px rgba(0,0,0,0.5))" }}>
                <path d="M5 3l5.5 14 2-5.5L18 9.5 5 3z" fill="#fff" stroke="#0C0C0E" strokeWidth="1.2" strokeLinejoin="round" />
              </svg>
            </div>
          </SpotlightPanel>
        </div>
      </Card>

      {/* Generate token spotlight */}
      <SpotlightPanel style={{ marginBottom: 40, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, overflow: "hidden", position: "relative" }}>
        <div style={{ position: "relative", zIndex: 1 }}>
          <h3 style={{ color: "#fff", fontSize: "var(--fs-h2)", fontWeight: "var(--fw-semibold)", marginBottom: 10 }}>Generate an API token</h3>
          <p style={{ color: "var(--text-on-dark-muted)", fontSize: "var(--fs-body)", marginBottom: 22, maxWidth: 520 }}>
            Generate an API token to use Hostinger with tools like VS Code, Cursor, and Claude.
          </p>
          <Button variant="brand">Generate API token</Button>
        </div>
        {/* fanned app logos */}
        <div style={{ position: "relative", width: 240, height: 150, flex: "none" }}>
          {[
            { logo: "vscode", x: 18, y: 4, r: -8 },
            { logo: "cursor", x: 96, y: 0, r: 0 },
            { logo: "claude", x: 172, y: 6, r: 8 },
            { logo: "devin", x: 60, y: 86, r: -6 },
            { logo: "antigravity", x: 138, y: 90, r: 7 },
          ].map((a, i) => (
            <div key={i} style={{
              position: "absolute", left: a.x, top: a.y, transform: `rotate(${a.r}deg)`,
              width: 60, height: 60, borderRadius: 16, overflow: "hidden",
              boxShadow: "0 10px 26px rgba(0,0,0,0.45)",
            }}>
              <AppLogo name={a.logo} size={60} />
            </div>
          ))}
        </div>
      </SpotlightPanel>

      <h2 style={{ fontSize: "var(--fs-h2)", fontWeight: "var(--fw-semibold)", marginBottom: 20 }}>What you can do</h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
        <FeatureCard icon="server" title="Spin up infrastructure on the fly" body="Deploy a VPS, choose an OS, and configure firewalls from a single chat prompt. No dashboard clicking." />
        <FeatureCard icon="database" title="Ship sites without switching tabs" body="Deploy WordPress, static sites, or JS apps straight from your editor. Push code, go live." />
        <FeatureCard icon="monitor" title="Monitor and troubleshoot in real-time" body="Pull CPU, memory, and bandwidth metrics. Scan for malware. Restore backups. All through natural language." />
        <FeatureCard icon="globe" title="Manage domains and DNS like code" body="Register domains, update DNS records, toggle WHOIS privacy, and set up forwarding. No control panel needed." />
      </div>
    </div>
  );
}

/* ============================ HOME SCREEN ============================ */
function HomeScreen() {
  return (
    <div>
      <PageHeader title="Welcome back, Ada" action={<Button variant="primary" iconLeft="plus">Add website</Button>} />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 28 }}>
        {[
          { icon: "globe", label: "Active domains", value: "12" },
          { icon: "server", label: "Running VPS", value: "3" },
          { icon: "mail", label: "Mailboxes", value: "28" },
        ].map((s, i) => (
          <Card key={i} style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 44, height: 44, borderRadius: "var(--radius-md)", background: "var(--brand-soft-bg)", color: "var(--brand)" }}>
              <Icon name={s.icon} size={22} />
            </span>
            <div>
              <div style={{ fontSize: "var(--fs-display)", fontWeight: "var(--fw-bold)", lineHeight: 1, color: "var(--text-strong)", letterSpacing: "-0.02em" }}>{s.value}</div>
              <div style={{ fontSize: "var(--fs-sm)", color: "var(--text-muted)", marginTop: 4 }}>{s.label}</div>
            </div>
          </Card>
        ))}
      </div>

      <SpotlightPanel style={{ marginBottom: 28, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 }}>
        <div>
          <Badge tone="brand" style={{ marginBottom: 12 }}>Next action</Badge>
          <h3 style={{ color: "#fff", fontSize: "var(--fs-h2)", fontWeight: "var(--fw-semibold)", marginBottom: 8 }}>Your SSL certificate is ready</h3>
          <p style={{ color: "var(--text-on-dark-muted)", fontSize: "var(--fs-body)", maxWidth: 460 }}>Activate HTTPS on store.adalovelace.dev to secure checkout and boost search ranking.</p>
        </div>
        <Button variant="brand">Activate SSL</Button>
      </SpotlightPanel>

      <h2 style={{ fontSize: "var(--fs-h2)", fontWeight: "var(--fw-semibold)", marginBottom: 16 }}>Your websites</h2>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {[
          { name: "adalovelace.dev", type: "WordPress", status: "Active", tone: "success" },
          { name: "store.adalovelace.dev", type: "WooCommerce", status: "Needs SSL", tone: "warning" },
          { name: "blog.adalovelace.dev", type: "Static", status: "Active", tone: "success" },
        ].map((w, i) => (
          <Card key={i} interactive style={{ display: "flex", alignItems: "center", gap: 16, padding: 16 }}>
            <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 40, height: 40, borderRadius: "var(--radius-md)", background: "var(--neutral-50)", color: "var(--text-strong)" }}>
              <Icon name="window" size={20} />
            </span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: "var(--fs-body)", fontWeight: "var(--fw-medium)", color: "var(--text-strong)" }}>{w.name}</div>
              <div style={{ fontSize: "var(--fs-xs)", color: "var(--text-muted)", marginTop: 2 }}>{w.type}</div>
            </div>
            <Badge tone={w.tone} dot>{w.status}</Badge>
            <Icon name="chevron-right" size={18} color="var(--text-subtle)" />
          </Card>
        ))}
      </div>
    </div>
  );
}

/* ============================ DOMAINS SCREEN ============================ */
function DomainsScreen() {
  const [tab, setTab] = React.useState("all");
  const rows = [
    { name: "adalovelace.dev", reg: "Mar 2024", exp: "Mar 2027", status: "Active", tone: "success" },
    { name: "hermes-agent.ai", reg: "Jan 2026", exp: "Jan 2027", status: "Active", tone: "success" },
    { name: "openclaw.io", reg: "Nov 2025", exp: "Nov 2026", status: "Expiring", tone: "warning" },
    { name: "ada.shop", reg: "Feb 2026", exp: "—", status: "Pending", tone: "neutral" },
  ];
  return (
    <div>
      <PageHeader title="Domains" action={<Button variant="primary" iconLeft="plus">Register domain</Button>} />
      <div style={{ marginBottom: 20 }}>
        <SegmentedTabs variant="track" value={tab} onChange={setTab}
          items={[{ value: "all", label: "All domains" }, { value: "active", label: "Active" }, { value: "expiring", label: "Expiring" }]} />
      </div>
      <Card padding="sm">
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 40px", gap: 12, padding: "10px 14px", fontSize: "var(--fs-2xs)", fontWeight: "var(--fw-semibold)", letterSpacing: "var(--ls-label)", textTransform: "uppercase", color: "var(--text-subtle)" }}>
          <span>Domain</span><span>Registered</span><span>Expires</span><span>Status</span><span></span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 40px", gap: 12, padding: "16px 14px", alignItems: "center", borderTop: "1px solid var(--border-hairline)" }}>
            <span style={{ display: "flex", alignItems: "center", gap: 10, fontWeight: "var(--fw-medium)", color: "var(--text-strong)" }}>
              <Icon name="globe" size={18} color="var(--brand)" /> {r.name}
            </span>
            <span style={{ fontSize: "var(--fs-sm)", color: "var(--text-muted)" }}>{r.reg}</span>
            <span style={{ fontSize: "var(--fs-sm)", color: "var(--text-muted)" }}>{r.exp}</span>
            <span><Badge tone={r.tone} dot>{r.status}</Badge></span>
            <Icon name="more-horizontal" size={18} color="var(--text-subtle)" />
          </div>
        ))}
      </Card>
    </div>
  );
}

window.ApiScreen = ApiScreen;
window.HomeScreen = HomeScreen;
window.DomainsScreen = DomainsScreen;