"use client";
import { Suspense, useState, useEffect, useCallback } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { Shield, RefreshCw, Download, Copy, CheckCircle2, Plus, Trash2 } from "lucide-react";
import { ToolLayout } from "@/components/ToolLayout";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";

const TABS = [
  { value: "ssl-checker", label: "SSL Checker" },
  { value: "csr-generator", label: "CSR Generator" },
  { value: "csr-decoder", label: "CSR Decoder" },
  { value: "crt-key-to-pfx", label: "CRT+KEY → PFX" },
  { value: "pfx-to-pem", label: "PFX → PEM" },
  { value: "pem-to-crt-key", label: "PEM → CRT+KEY" },
  { value: "crt-to-der", label: "CRT → DER" },
];

// ──────── SSL Checker ────────
function SslChecker({ initDomain }: { initDomain: string }) {
  const router = useRouter();
  const [domain, setDomain] = useState(initDomain);
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<Record<string, unknown> | null>(null);

  const check = useCallback(async (d: string) => {
    if (!d.trim()) return;
    setLoading(true);
    setData(null);
    const params = new URLSearchParams({ tab: "ssl-checker", domain: d });
    router.replace(`/ssl?${params}`, { scroll: false });
    try {
      const res = await fetch(`/api/ssl/ssl-checker?domain=${encodeURIComponent(d)}`);
      setData(await res.json());
    } catch { toast.error("Request failed"); }
    finally { setLoading(false); }
  }, [router]);

  useEffect(() => { if (initDomain) check(initDomain); }, []); // eslint-disable-line

  const d = data as {
    error?: string; authorized?: boolean; daysLeft?: number; isExpired?: boolean; isExpiringSoon?: boolean;
    subject?: { CN?: string; O?: string }; issuer?: { CN?: string; O?: string }; validFrom?: string; validTo?: string;
    serialNumber?: string; fingerprint256?: string; sans?: string[]; keyBits?: number; protocol?: string;
    cipher?: { name?: string }; chain?: Array<{ subject: string; issuer: string; validTo: string }>;
  } | null;

  return (
    <div className="space-y-4">
      <form onSubmit={(e) => { e.preventDefault(); check(domain); }} className="flex gap-2">
        <Input value={domain} onChange={(e) => setDomain(e.target.value)} placeholder="example.com" className="flex-1" />
        <Button type="submit" disabled={loading}>{loading ? <RefreshCw className="h-4 w-4 animate-spin" /> : "Check"}</Button>
      </form>

      {d?.error && <div className="result-box p-4 badge-err">{d.error}</div>}

      {d && !d.error && (
        <div className="space-y-3 animate-fade-up">
          <div className="glass-card rounded-xl p-5">
            <div className="flex items-start justify-between gap-3 mb-4">
              <div>
                <p className="text-lg font-semibold">{d.subject?.CN}</p>
                <p className="text-sm text-muted-foreground">{d.issuer?.CN}</p>
              </div>
              <div className="flex flex-wrap gap-1.5">
                <Badge variant={d.isExpired ? "err" : d.isExpiringSoon ? "warn" : "ok"}>
                  {d.isExpired ? "Expired" : d.isExpiringSoon ? `${d.daysLeft}d left` : `${d.daysLeft}d left`}
                </Badge>
                <Badge variant={d.authorized ? "ok" : "warn"}>{d.authorized ? "Trusted" : "Untrusted"}</Badge>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-3">
              <InfoCard label="Valid From" value={d.validFrom} />
              <InfoCard label="Valid To" value={d.validTo} />
              <InfoCard label="Key Size" value={d.keyBits ? `${d.keyBits} bits` : undefined} />
              <InfoCard label="Protocol" value={d.protocol ?? undefined} />
            </div>

            {d.sans && d.sans.length > 0 && (
              <div className="mt-3">
                <p className="text-xs text-muted-foreground mb-1.5">Subject Alt Names</p>
                <div className="flex flex-wrap gap-1">
                  {d.sans.map((s) => <Badge key={s} variant="neutral" className="text-[10px] font-mono">{s}</Badge>)}
                </div>
              </div>
            )}

            {d.fingerprint256 && (
              <div className="mt-3 bg-muted/30 rounded-lg px-3 py-2">
                <p className="text-[10px] text-muted-foreground mb-0.5">SHA-256 Fingerprint</p>
                <p className="text-xs font-mono break-all">{d.fingerprint256}</p>
              </div>
            )}
          </div>

          {d.chain && d.chain.length > 1 && (
            <div className="glass-card rounded-xl p-4">
              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground/60 mb-3">Certificate Chain</p>
              <div className="space-y-2">
                {d.chain.map((c, i) => (
                  <div key={i} className="flex items-start gap-2 text-sm">
                    <span className="badge-neutral px-1.5 py-0.5 rounded text-[10px] shrink-0 mt-0.5">{i === 0 ? "END" : i === d.chain!.length - 1 ? "ROOT" : "INT"}</span>
                    <div>
                      <p className="font-medium">{c.subject}</p>
                      <p className="text-xs text-muted-foreground">by {c.issuer}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ──────── CSR Generator ────────
function CsrGenerator() {
  const [form, setForm] = useState({
    commonName: "", organization: "", organizationalUnit: "", locality: "", state: "", country: "US", email: "",
    keyType: "RSA", keySize: "2048", curve: "prime256v1", signatureAlgorithm: "sha256",
  });
  const [sans, setSans] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{ privateKey?: string; csr?: string; error?: string } | null>(null);

  const set = (k: string, v: string) => setForm((f) => ({ ...f, [k]: v }));

  const generate = async () => {
    if (!form.commonName) { toast.error("Common Name is required"); return; }
    setLoading(true);
    setResult(null);
    try {
      const res = await fetch("/api/ssl/csr-generate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, sans }),
      });
      setResult(await res.json());
    } catch { toast.error("Request failed"); }
    finally { setLoading(false); }
  };

  const copyText = (txt: string) => { navigator.clipboard.writeText(txt); toast.success("Copied!"); };
  const downloadText = (txt: string, name: string) => {
    const a = document.createElement("a");
    a.href = URL.createObjectURL(new Blob([txt], { type: "text/plain" }));
    a.download = name; a.click();
  };

  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      <div className="space-y-4">
        <div className="glass-card rounded-xl p-4 space-y-3">
          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground/60">Certificate Details</p>

          <div className="space-y-1"><Label>Common Name (CN) *</Label><Input value={form.commonName} onChange={(e) => set("commonName", e.target.value)} placeholder="example.com" /></div>
          <div className="space-y-1"><Label>Organization (O)</Label><Input value={form.organization} onChange={(e) => set("organization", e.target.value)} placeholder="Acme Corp" /></div>
          <div className="space-y-1"><Label>Organizational Unit (OU)</Label><Input value={form.organizationalUnit} onChange={(e) => set("organizationalUnit", e.target.value)} placeholder="IT Department" /></div>

          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-1"><Label>City (L)</Label><Input value={form.locality} onChange={(e) => set("locality", e.target.value)} /></div>
            <div className="space-y-1"><Label>State (ST)</Label><Input value={form.state} onChange={(e) => set("state", e.target.value)} /></div>
          </div>

          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-1"><Label>Country (C)</Label><Input value={form.country} onChange={(e) => set("country", e.target.value)} maxLength={2} placeholder="US" /></div>
            <div className="space-y-1"><Label>Email</Label><Input value={form.email} onChange={(e) => set("email", e.target.value)} /></div>
          </div>
        </div>

        <div className="glass-card rounded-xl p-4 space-y-3">
          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground/60">Key Settings</p>
          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-1">
              <Label>Key Type</Label>
              <Select value={form.keyType} onValueChange={(v) => set("keyType", v)}>
                <SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="RSA">RSA</SelectItem>
                  <SelectItem value="EC">EC (Elliptic Curve)</SelectItem>
                </SelectContent>
              </Select>
            </div>
            {form.keyType === "RSA" ? (
              <div className="space-y-1">
                <Label>Key Size</Label>
                <Select value={form.keySize} onValueChange={(v) => set("keySize", v)}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="2048">2048 bit</SelectItem>
                    <SelectItem value="4096">4096 bit</SelectItem>
                    <SelectItem value="8192">8192 bit</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            ) : (
              <div className="space-y-1">
                <Label>Curve</Label>
                <Select value={form.curve} onValueChange={(v) => set("curve", v)}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="prime256v1">P-256</SelectItem>
                    <SelectItem value="secp384r1">P-384</SelectItem>
                    <SelectItem value="secp521r1">P-521</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            )}
          </div>
          <div className="space-y-1">
            <Label>Signature Algorithm</Label>
            <Select value={form.signatureAlgorithm} onValueChange={(v) => set("signatureAlgorithm", v)}>
              <SelectTrigger><SelectValue /></SelectTrigger>
              <SelectContent>
                <SelectItem value="sha256">SHA-256</SelectItem>
                <SelectItem value="sha384">SHA-384</SelectItem>
                <SelectItem value="sha512">SHA-512</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        <div className="glass-card rounded-xl p-4 space-y-3">
          <div className="flex items-center justify-between">
            <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground/60">Subject Alt Names</p>
            <Button variant="ghost" size="sm" onClick={() => setSans((s) => [...s, ""])}>
              <Plus className="h-3.5 w-3.5 mr-1" />Add
            </Button>
          </div>
          {sans.map((san, i) => (
            <div key={i} className="flex gap-2">
              <Input value={san} onChange={(e) => setSans((s) => s.map((x, j) => j === i ? e.target.value : x))} placeholder="subdomain.example.com" className="flex-1" />
              <Button variant="ghost" size="icon" className="h-9 w-9" onClick={() => setSans((s) => s.filter((_, j) => j !== i))}>
                <Trash2 className="h-3.5 w-3.5" />
              </Button>
            </div>
          ))}
        </div>

        <Button onClick={generate} disabled={loading} className="w-full">
          {loading ? <RefreshCw className="h-4 w-4 animate-spin" /> : "Generate CSR"}
        </Button>
      </div>

      <div className="space-y-4">
        {result?.error && <div className="result-box p-4 badge-err">{result.error}</div>}
        {result?.privateKey && (
          <PemOutput label="Private Key" value={result.privateKey} filename="private.key" onCopy={copyText} onDownload={downloadText} warn />
        )}
        {result?.csr && (
          <PemOutput label="CSR" value={result.csr} filename="request.csr" onCopy={copyText} onDownload={downloadText} />
        )}
      </div>
    </div>
  );
}

// ──────── CSR Decoder ────────
function CsrDecoder() {
  const [csr, setCsr] = useState("");
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<Record<string, unknown> | null>(null);

  const decode = async () => {
    if (!csr.trim()) return;
    setLoading(true);
    setData(null);
    try {
      const res = await fetch("/api/ssl/csr-decoder", {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ csr }),
      });
      setData(await res.json());
    } catch { toast.error("Request failed"); }
    finally { setLoading(false); }
  };

  const d = data as { error?: string; subject?: string; publicKeyAlg?: string; keyBits?: string; sigAlg?: string; sans?: string[]; text?: string } | null;

  return (
    <div className="space-y-4">
      <Textarea value={csr} onChange={(e) => setCsr(e.target.value)} placeholder="Paste your CSR here..." className="min-h-[180px] font-mono text-xs" />
      <Button onClick={decode} disabled={loading} className="w-full">
        {loading ? <RefreshCw className="h-4 w-4 animate-spin" /> : "Decode CSR"}
      </Button>
      {d?.error && <div className="result-box p-4 badge-err">{d.error}</div>}
      {d && !d.error && (
        <div className="glass-card rounded-xl p-4 space-y-2 animate-fade-up">
          <Row label="Subject" value={d.subject} />
          <Row label="Public Key" value={d.publicKeyAlg} />
          <Row label="Key Size" value={d.keyBits ? `${d.keyBits} bits` : undefined} />
          <Row label="Signature Alg" value={d.sigAlg} />
          {d.sans && d.sans.length > 0 && (
            <div className="pt-2">
              <p className="text-xs text-muted-foreground mb-1.5">Subject Alt Names</p>
              <div className="flex flex-wrap gap-1">
                {d.sans.map((s, i) => <Badge key={i} variant="neutral" className="text-[10px] font-mono">{s}</Badge>)}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ──────── CRT+KEY to PFX ────────
function CrtKeyToPfx() {
  const [crt, setCrt] = useState("");
  const [key, setKey] = useState("");
  const [ca, setCa] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);

  const convert = async () => {
    if (!crt || !key) { toast.error("CRT and KEY are required"); return; }
    setLoading(true);
    try {
      const res = await fetch("/api/ssl/crt-key-to-pfx", {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ crt, key, ca, password }),
      });
      if (!res.ok || res.headers.get("content-type")?.includes("json")) {
        const j = await res.json();
        toast.error(j.error ?? "Conversion failed"); return;
      }
      const blob = await res.blob();
      const a = document.createElement("a");
      a.href = URL.createObjectURL(blob);
      a.download = "certificate.pfx"; a.click();
      toast.success("PFX downloaded!");
    } catch { toast.error("Request failed"); }
    finally { setLoading(false); }
  };

  return (
    <div className="space-y-3">
      <div className="space-y-1"><Label>Certificate (.crt)</Label><Textarea value={crt} onChange={(e) => setCrt(e.target.value)} placeholder="-----BEGIN CERTIFICATE-----" className="min-h-[120px] font-mono text-xs" /></div>
      <div className="space-y-1"><Label>Private Key (.key)</Label><Textarea value={key} onChange={(e) => setKey(e.target.value)} placeholder="-----BEGIN PRIVATE KEY-----" className="min-h-[120px] font-mono text-xs" /></div>
      <div className="space-y-1"><Label>CA Chain <span className="text-muted-foreground/60">(optional)</span></Label><Textarea value={ca} onChange={(e) => setCa(e.target.value)} placeholder="-----BEGIN CERTIFICATE-----" className="min-h-[80px] font-mono text-xs" /></div>
      <div className="space-y-1"><Label>PFX Password <span className="text-muted-foreground/60">(optional)</span></Label><Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /></div>
      <Button onClick={convert} disabled={loading} className="w-full"><Download className="h-4 w-4 mr-1" />{loading ? "Converting..." : "Convert & Download PFX"}</Button>
    </div>
  );
}

// ──────── PFX to PEM ────────
function PfxToPem() {
  const [file, setFile] = useState<File | null>(null);
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [pem, setPem] = useState("");

  const convert = async () => {
    if (!file) { toast.error("Select a PFX file"); return; }
    setLoading(true);
    const fd = new FormData();
    fd.append("pfx", file);
    fd.append("password", password);
    try {
      const res = await fetch("/api/ssl/pfx-to-pem", { method: "POST", body: fd });
      const j = await res.json();
      if (j.error) { toast.error(j.error); return; }
      setPem(j.pem);
    } catch { toast.error("Request failed"); }
    finally { setLoading(false); }
  };

  return (
    <div className="space-y-3">
      <div className="space-y-1">
        <Label>PFX File</Label>
        <input type="file" accept=".pfx,.p12" onChange={(e) => setFile(e.target.files?.[0] ?? null)} className="block w-full text-sm text-muted-foreground file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:bg-white/10 file:text-white hover:file:bg-white/15 cursor-pointer" />
      </div>
      <div className="space-y-1"><Label>Password <span className="text-muted-foreground/60">(if any)</span></Label><Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} /></div>
      <Button onClick={convert} disabled={loading} className="w-full">{loading ? "Converting..." : "Convert to PEM"}</Button>
      {pem && <PemOutput label="PEM Output" value={pem} filename="certificate.pem" onCopy={(t) => { navigator.clipboard.writeText(t); toast.success("Copied!"); }} onDownload={(t, n) => { const a = document.createElement("a"); a.href = URL.createObjectURL(new Blob([t])); a.download = n; a.click(); }} />}
    </div>
  );
}

// ──────── PEM to CRT+KEY ────────
function PemToCrtKey() {
  const [pem, setPem] = useState("");
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{ crt?: string | null; key?: string | null; error?: string } | null>(null);

  const convert = async () => {
    if (!pem.trim()) return;
    setLoading(true);
    setResult(null);
    try {
      const res = await fetch("/api/ssl/pem-to-crt-key", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ pem }) });
      setResult(await res.json());
    } catch { toast.error("Request failed"); }
    finally { setLoading(false); }
  };

  const copyText = (txt: string) => { navigator.clipboard.writeText(txt); toast.success("Copied!"); };
  const downloadText = (txt: string, name: string) => { const a = document.createElement("a"); a.href = URL.createObjectURL(new Blob([txt])); a.download = name; a.click(); };

  return (
    <div className="space-y-3">
      <div className="space-y-1"><Label>PEM Input</Label><Textarea value={pem} onChange={(e) => setPem(e.target.value)} placeholder="-----BEGIN CERTIFICATE-----&#10;...&#10;-----BEGIN PRIVATE KEY-----&#10;..." className="min-h-[160px] font-mono text-xs" /></div>
      <Button onClick={convert} disabled={loading} className="w-full">{loading ? "Converting..." : "Extract CRT & KEY"}</Button>
      {result?.error && <div className="result-box p-4 badge-err">{result.error}</div>}
      {result?.crt && <PemOutput label="Certificate (.crt)" value={result.crt} filename="certificate.crt" onCopy={copyText} onDownload={downloadText} />}
      {result?.key && <PemOutput label="Private Key (.key)" value={result.key} filename="private.key" onCopy={copyText} onDownload={downloadText} warn />}
    </div>
  );
}

// ──────── CRT to DER ────────
function CrtToDer() {
  const [crt, setCrt] = useState("");
  const [loading, setLoading] = useState(false);

  const convert = async () => {
    if (!crt.trim()) return;
    setLoading(true);
    try {
      const res = await fetch("/api/ssl/crt-to-der", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ crt }) });
      if (!res.ok || res.headers.get("content-type")?.includes("json")) {
        const j = await res.json(); toast.error(j.error ?? "Conversion failed"); return;
      }
      const blob = await res.blob();
      const a = document.createElement("a");
      a.href = URL.createObjectURL(blob); a.download = "certificate.der"; a.click();
      toast.success("DER downloaded!");
    } catch { toast.error("Request failed"); }
    finally { setLoading(false); }
  };

  return (
    <div className="space-y-3">
      <div className="space-y-1"><Label>Certificate (.crt / PEM)</Label><Textarea value={crt} onChange={(e) => setCrt(e.target.value)} placeholder="-----BEGIN CERTIFICATE-----" className="min-h-[200px] font-mono text-xs" /></div>
      <Button onClick={convert} disabled={loading} className="w-full"><Download className="h-4 w-4 mr-1" />{loading ? "Converting..." : "Convert & Download DER"}</Button>
    </div>
  );
}

// ──────── Shared helpers ────────
function PemOutput({ label, value, filename, onCopy, onDownload, warn }: {
  label: string; value: string; filename: string;
  onCopy: (t: string) => void; onDownload: (t: string, n: string) => void; warn?: boolean;
}) {
  return (
    <div className={`glass-card rounded-xl overflow-hidden animate-fade-up ${warn ? "border-yellow-500/20" : ""}`}>
      <div className="flex items-center justify-between px-3 py-2 border-b border-border/50">
        <p className="text-xs font-medium">{label}</p>
        <div className="flex gap-1">
          <Button variant="ghost" size="sm" onClick={() => onCopy(value)}><Copy className="h-3.5 w-3.5" /></Button>
          <Button variant="ghost" size="sm" onClick={() => onDownload(value, filename)}><Download className="h-3.5 w-3.5" /></Button>
        </div>
      </div>
      <pre className="p-3 text-[10px] font-mono text-foreground/80 overflow-x-auto max-h-48 whitespace-pre-wrap break-all">{value}</pre>
    </div>
  );
}

function InfoCard({ label, value }: { label: string; value: string | null | undefined }) {
  if (!value) return null;
  return (
    <div className="bg-muted/30 rounded-lg p-2.5">
      <p className="text-[10px] text-muted-foreground mb-0.5">{label}</p>
      <p className="text-sm">{value}</p>
    </div>
  );
}

function Row({ label, value }: { label: string; value: string | null | undefined }) {
  if (!value) return null;
  return (
    <div className="flex justify-between gap-3 py-1.5 border-b border-border/50 last:border-0">
      <span className="text-xs text-muted-foreground shrink-0">{label}</span>
      <span className="text-xs text-right break-all">{value}</span>
    </div>
  );
}

// ──────── Page ────────
function SslToolsContent() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const [tab, setTab] = useState(searchParams.get("tab") ?? "ssl-checker");
  const domain = searchParams.get("domain") ?? "";

  const handleTabChange = (v: string) => {
    setTab(v);
    const params = new URLSearchParams({ tab: v });
    if (v === "ssl-checker" && domain) params.set("domain", domain);
    router.replace(`/ssl?${params}`, { scroll: false });
  };

  return (
    <ToolLayout icon={Shield} title="SSL Tools" description="CSR generator, SSL checker, format converter and more.">
      <Tabs value={tab} onValueChange={handleTabChange}>
        <TabsList className="mb-2 flex-wrap">
          {TABS.map((t) => <TabsTrigger key={t.value} value={t.value}>{t.label}</TabsTrigger>)}
        </TabsList>

        <TabsContent value="ssl-checker"><SslChecker initDomain={tab === "ssl-checker" ? domain : ""} /></TabsContent>
        <TabsContent value="csr-generator"><CsrGenerator /></TabsContent>
        <TabsContent value="csr-decoder"><CsrDecoder /></TabsContent>
        <TabsContent value="crt-key-to-pfx"><CrtKeyToPfx /></TabsContent>
        <TabsContent value="pfx-to-pem"><PfxToPem /></TabsContent>
        <TabsContent value="pem-to-crt-key"><PemToCrtKey /></TabsContent>
        <TabsContent value="crt-to-der"><CrtToDer /></TabsContent>
      </Tabs>
    </ToolLayout>
  );
}

export default function SslToolsPage() {
  return <Suspense><SslToolsContent /></Suspense>;
}