// MyAirSpace — Account dashboard. List of the resident's certificates.
const { Button, Card, Badge, Seal } = window.MyAirSpace || {};
const Icon = window.MyAirSpaceIcon;

function useVP() { const g = () => (typeof window === "undefined" ? 1180 : window.innerWidth); const [w, setW] = React.useState(g); React.useEffect(() => { const o = () => setW(g()); window.addEventListener("resize", o); return () => window.removeEventListener("resize", o); }, []); return w; }

const CERTS = [
  { id: "MAS-4F2K-8WMT", addr: "14 Rodwell Avenue, Weymouth", postcode: "DT4 8QT", issued: "18 Jun 2026", expires: "18 Jun 2027", status: "active" },
  { id: "MAS-2B8P-3ESP", addr: "Flat 5, 8 The Esplanade, Weymouth", postcode: "DT4 7AA", issued: "02 Mar 2026", expires: "02 Mar 2027", status: "active" },
  { id: "MAS-9XQ1-7PRT", addr: "3 Portland Road, Weymouth", postcode: "DT5 1AH", issued: "11 Jun 2025", expires: "11 Jun 2026", status: "expired" },
];

function Sidebar({ active = "certificates", mobile }) {
  const items = [
    ["certificates", "file-text", "My certificates", "index.html"],
    ["account", "user", "Account details", "details.html"],
    ["billing", "credit-card", "Billing & receipts", "billing.html"],
    ["help", "life-buoy", "Help & support", "help.html"],
  ];
  const links = items.map(([key, icon, label, href]) => {
    const on = key === active;
    return (
      <a key={key} href={href} style={{ display: "flex", alignItems: "center", gap: mobile ? 8 : 12, padding: mobile ? "8px 12px" : "10px 12px", borderRadius: "var(--radius-md)", textDecoration: "none", whiteSpace: "nowrap", flex: "none", background: on ? "var(--accent-soft)" : (mobile ? "var(--surface-sunken)" : "transparent"), color: on ? "var(--teal-700)" : "var(--text-secondary)", fontFamily: "var(--font-ui)", fontSize: mobile ? 13.5 : 14.5, fontWeight: on ? 600 : 500 }}>
        <Icon name={icon} size={mobile ? 16 : 18} color={on ? "var(--accent-hover)" : "var(--text-muted)"} />{label}
      </a>
    );
  });
  if (mobile) {
    return (
      <aside style={{ background: "var(--surface-card)", borderBottom: "1px solid var(--border-subtle)", padding: "14px 16px", display: "flex", flexDirection: "column", gap: 12, boxSizing: "border-box" }}>
        <a href="index.html"><img src="../../assets/logo-wordmark.svg" alt="MyAirSpace" style={{ height: 26, display: "block" }} /></a>
        <nav style={{ display: "flex", gap: 6, overflowX: "auto", paddingBottom: 2 }}>{links}</nav>
      </aside>
    );
  }
  return (
    <aside style={{ width: 248, flex: "none", background: "var(--surface-card)", borderRight: "1px solid var(--border-subtle)", padding: "24px 16px", display: "flex", flexDirection: "column", minHeight: "100vh", boxSizing: "border-box" }}>
      <img src="../../assets/logo-wordmark.svg" alt="MyAirSpace" style={{ height: 28, margin: "4px 8px 28px" }} />
      <nav style={{ display: "flex", flexDirection: "column", gap: 4 }}>{links}</nav>
      <div style={{ marginTop: "auto", padding: 14, background: "var(--surface-cream)", borderRadius: "var(--radius-lg)", border: "1px solid var(--border-cream)" }}>
        <div style={{ fontFamily: "var(--font-heading)", fontWeight: 600, fontSize: 15, marginBottom: 4 }}>Add a property</div>
        <p style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-muted)", lineHeight: 1.45, marginBottom: 12 }}>Extra certificates are discounted.</p>
        <Button variant="secondary" size="sm" fullWidth onClick={() => { window.location.href = "../purchase/index.html"; }}>New certificate</Button>
      </div>
    </aside>
  );
}

function Topbar({ mobile }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap", padding: mobile ? "16px 18px" : "20px 36px", borderBottom: "1px solid var(--border-subtle)", background: "var(--surface-page)" }}>
      <div>
        <div className="eyebrow" style={{ marginBottom: 4 }}>Account</div>
        <h1 style={{ fontSize: mobile ? 22 : 26, letterSpacing: "-0.02em" }}>My certificates</h1>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <Button variant="primary" iconLeft={<Icon name="plus" size={16} color="#fff" />} onClick={() => { window.location.href = "../purchase/index.html"; }}>New certificate</Button>
        <div style={{ width: 40, height: 40, borderRadius: "50%", background: "var(--accent)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-ui)", fontWeight: 600, flex: "none" }}>EH</div>
      </div>
    </div>
  );
}

function StatCard({ icon, value, label, tone }) {
  return (
    <Card padding="md" elevation="sm" style={{ display: "flex", alignItems: "center", gap: 14 }}>
      <div style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: tone, display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}>{icon}</div>
      <div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 600, lineHeight: 1, color: "var(--text-primary)" }}>{value}</div>
        <div style={{ fontFamily: "var(--font-ui)", fontSize: 13, color: "var(--text-muted)", marginTop: 4 }}>{label}</div>
      </div>
    </Card>
  );
}

function CertRow({ c }) {
  const active = c.status === "active";
  return (
    <Card padding="md" elevation="sm" interactive style={{ display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap" }}>
      <div style={{ width: 52, height: 52, borderRadius: "var(--radius-md)", background: active ? "var(--accent-soft)" : "var(--surface-sunken)", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
        <Icon name="file-text" size={24} color={active ? "var(--accent-hover)" : "var(--text-faint)"} />
      </div>
      <div style={{ flex: 1, minWidth: 200 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4, flexWrap: "wrap" }}>
          <span style={{ fontFamily: "var(--font-heading)", fontWeight: 600, fontSize: 16.5, color: "var(--text-primary)" }}>{c.addr}</span>
          {active ? <Badge tone="success" dot size="sm">Active</Badge> : <Badge tone="danger" dot size="sm">Expired</Badge>}
        </div>
        <div style={{ display: "flex", gap: "4px 18px", flexWrap: "wrap", fontFamily: "var(--font-data)", fontSize: 12.5, color: "var(--text-muted)" }}>
          <span>{c.id}</span><span>Issued {c.issued}</span><span>{active ? `Valid to ${c.expires}` : `Expired ${c.expires}`}</span>
        </div>
      </div>
      <div style={{ display: "flex", gap: 8, flex: "none" }}>
        {active ? (
          <Button variant="secondary" size="sm" iconLeft={<Icon name="download" size={15} color="var(--text-secondary)" />} onClick={() => { window.location.href = "../certificate/index.html"; }}>PDF</Button>
        ) : (
          <Button variant="primary" size="sm" iconLeft={<Icon name="refresh-cw" size={15} color="#fff" />} onClick={() => { window.location.href = "../purchase/index.html"; }}>Renew</Button>
        )}
        <Button variant="ghost" size="sm" iconLeft={<Icon name="ellipsis" size={16} color="var(--text-muted)" />}> </Button>
      </div>
    </Card>
  );
}

function Dashboard() {
  const mobile = useVP() < 900;
  return (
    <div style={{ display: "flex", flexDirection: mobile ? "column" : "row", background: "var(--surface-page)", minHeight: "100vh" }}>
      <Sidebar mobile={mobile} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <Topbar mobile={mobile} />
        <div style={{ padding: mobile ? "20px 18px 56px" : "28px 36px 56px", maxWidth: 1000 }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 16, marginBottom: 28 }}>
            <StatCard icon={<Icon name="shield-check" size={22} color="var(--success)" />} value="2" label="Active certificates" tone="var(--success-soft)" />
            <StatCard icon={<Icon name="clock" size={22} color="var(--warning)" />} value="1" label="Due for renewal" tone="var(--warning-soft)" />
            <StatCard icon={<Icon name="home" size={22} color="var(--accent-hover)" />} value="3" label="Properties on record" tone="var(--accent-soft)" />
          </div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
            <h2 style={{ fontSize: 19 }}>All certificates</h2>
            <a href="#" style={{ fontFamily: "var(--font-ui)", fontSize: 14, fontWeight: 500, color: "var(--text-link)" }}>Filter</a>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {CERTS.map((c) => <CertRow key={c.id} c={c} />)}
          </div>
        </div>
      </div>
    </div>
  );
}
window.Dashboard = Dashboard;