// MyAirSpace — Public certificate verification page.
const { Button, Card, Badge, Field, Seal } = window.MyAirSpace || {};
const Icon = window.MyAirSpaceIcon;

function VerifyPage() {
  const [query, setQuery] = React.useState("MAS-4F2K-8WMT");
  const [result, setResult] = React.useState("valid"); // 'idle' | 'valid'

  return (
    <div style={{ minHeight: "100vh", background: "var(--surface-page)" }}>
      <header style={{ borderBottom: "1px solid var(--border-subtle)", background: "var(--surface-card)" }}>
        <div style={{ maxWidth: 720, margin: "0 auto", padding: "16px 28px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <img src="../../assets/logo-wordmark.svg" alt="MyAirSpace" style={{ height: 28 }} />
          <a href="#" style={{ fontFamily: "var(--font-ui)", fontSize: 14, color: "var(--text-secondary)", textDecoration: "none" }}>myairspace.co.uk/verify</a>
        </div>
      </header>

      <div style={{ maxWidth: 620, margin: "0 auto", padding: "56px 28px" }}>
        <div style={{ textAlign: "center", marginBottom: 32 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Certificate verification</div>
          <h1 style={{ fontSize: "clamp(28px, 6vw, 38px)", letterSpacing: "-0.02em", marginBottom: 12 }}>Check a certificate</h1>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--text-secondary)", maxWidth: 460, margin: "0 auto" }}>
            Enter a certificate ID to confirm it was issued by MyAirSpace and view its public record.
          </p>
        </div>

        <Card padding="md" elevation="sm" style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "flex-end", marginBottom: 28 }}>
          <Field label="Certificate ID" value={query} onChange={(e) => setQuery(e.target.value)} style={{ flex: 1, minWidth: 180 }} prefix={<Icon name="search" size={16} color="var(--text-muted)" />} />
          <Button variant="primary" size="md" onClick={() => setResult("valid")} style={{ marginBottom: 1 }}>Verify</Button>
        </Card>

        {result === "valid" && (
          <Card padding="lg" elevation="md">
            <div style={{ display: "flex", alignItems: "center", gap: 14, paddingBottom: 20, borderBottom: "1px solid var(--border-default)", marginBottom: 20 }}>
              <div style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--success-soft)", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
                <Icon name="circle-check-big" size={26} color="var(--success)" />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <h2 style={{ fontSize: 22 }}>Valid certificate</h2>
                  <Badge tone="success" dot size="sm">Active</Badge>
                </div>
                <p style={{ fontFamily: "var(--font-ui)", fontSize: 14, color: "var(--text-muted)", marginTop: 2 }}>Issued by MyAirSpace · record is genuine</p>
              </div>
              <Seal size={72} refText="MAS" />
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 18, marginBottom: 20 }}>
              <Detail label="Certificate ID" value={query} mono />
              <Detail label="Status" value="Active" />
              <Detail label="Property postcode" value="DT4 8QT" mono />
              <Detail label="Issued" value="18 Jun 2026" />
              <Detail label="Valid until" value="18 Jun 2027" />
              <Detail label="Declaration" value="No-consent recorded" />
            </div>

            <div style={{ background: "var(--surface-cream)", border: "1px solid var(--border-cream)", borderRadius: "var(--radius-md)", padding: "13px 16px" }}>
              <p style={{ fontFamily: "var(--font-ui)", fontSize: 12.5, lineHeight: 1.6, color: "var(--text-muted)", margin: 0 }}>
                For privacy, the resident’s name and full address are not shown publicly. This record confirms a certificate exists and is a dated statement of privacy preference — it is not legally binding and does not create a no-fly zone.
              </p>
            </div>
          </Card>
        )}
      </div>
    </div>
  );
}

function Detail({ label, value, mono }) {
  return (
    <div>
      <div className="eyebrow" style={{ marginBottom: 4 }}>{label}</div>
      <div style={{ fontFamily: mono ? "var(--font-data)" : "var(--font-body)", fontSize: mono ? 15 : 16, fontWeight: 600, color: "var(--text-primary)" }}>{value}</div>
    </div>
  );
}
window.VerifyPage = VerifyPage;