import { createFileRoute, Link } from "@tanstack/react-router";
import { Suspense, useEffect, useState } from "react";
import { useServerFn } from "@tanstack/react-start";
import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
import { Activity, ArrowUpRight, Check, ChevronRight, Copy, Eye, Globe, Loader2, LockKeyhole, Plus, Radar, RefreshCw, Send, Shield, ShieldCheck, SlidersHorizontal, Terminal, X } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useAuth } from "@/hooks/use-auth";
import { SignIn } from "@/components/sign-in";
import { securityOverview, registerSecuritySite, verifySecuritySite, scanSecuritySite, askAegis } from "@/lib/security.functions";
import type { SecurityReport } from "@/lib/security-policy";
import shieldArt from "@/assets/aegis-shield.jpg";
import { AegisVoice } from "@/components/aegis-voice";

export const Route = createFileRoute("/security")({
  head: () => ({
    meta: [
      { title: "Aegis — Cybersecurity | Codesynux" },
      { name: "description", content: "Codesynux Aegis: website security monitoring, live header scans, verified edge status and defensive AI advice." },
      { property: "og:title", content: "Aegis — Codesynux Cybersecurity" },
      { property: "og:description", content: "Your dedicated cybersecurity workspace for cloud and external websites." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary" },
    ],
  }),
  component: SecurityPage,
});

function SecurityPage() {
  const { user, ready } = useAuth();
  const [signIn, setSignIn] = useState(false);
  return <main className="security-space min-h-screen">
    <div className="mx-auto max-w-7xl px-5 pb-12 sm:px-8">
      <header className="flex flex-wrap items-center justify-between gap-3 border-b border-border py-5">
        <div className="flex items-center gap-3"><ShieldCheck className="h-6 w-6 text-security" /><span className="text-sm font-medium">Codesynux <span className="text-muted-foreground">/ Cybersecurity</span></span></div>
        <span className="flex items-center gap-2 font-mono text-[10px] uppercase text-muted-foreground"><span className="h-1.5 w-1.5 rounded-full bg-security" />Defensive intelligence</span>
      </header>
      <section className="relative min-h-[300px] overflow-hidden border-b border-border py-10 sm:min-h-[330px] sm:py-12">
        <img src={shieldArt} width={1024} height={1024} alt="Aegis chrome shield with emerald circuit inlays" className="security-art absolute -right-14 top-0 h-full w-[65%] object-contain opacity-35 sm:right-0 sm:w-[47%] sm:opacity-90" />
        <div className="relative max-w-xl"><p className="mb-4 flex items-center gap-2 font-mono text-xs uppercase text-security"><span className="h-px w-6 bg-security" />Codesynux autonomous cybersecurity</p>
          <h1 className="text-6xl font-bold sm:text-7xl">Aegis<span className="text-security">.</span></h1>
          <p className="mt-4 max-w-sm text-xl text-foreground/90">A watchful eye. A stronger web.</p>
          <blockquote className="mt-5 max-w-sm border-l border-security/50 pl-3 text-sm text-muted-foreground">“Trust is earned. Protection is verified.”</blockquote>
          {!user && <Button className="mt-6" onClick={() => setSignIn(true)}><LockKeyhole />Open my security workspace<ArrowUpRight /></Button>}
        </div>
      </section>
      {!ready ? <Loading /> : user ? <Suspense fallback={<Loading />}><Workspace /></Suspense> : signIn ? <SignIn /> : <div className="grid gap-5 py-8 sm:grid-cols-3">{[{ icon: Shield, title: "Your websites", text: "Sign in to discover your Codesynux deployments." }, { icon: Radar, title: "Verified observations", text: "Edge status is unknown until a domain is verified." }, { icon: Terminal, title: "Aegis intelligence", text: "Private defensive advice, powered by your Gemini connection." }].map(item => <div key={item.title} className="border-t border-border pt-5"><item.icon className="mb-3 h-5 w-5 text-security" /><h2 className="font-medium">{item.title}</h2><p className="mt-2 text-sm text-muted-foreground">{item.text}</p></div>)}</div>}
    </div>
  </main>;
}
function Loading() { return <div className="flex items-center gap-3 py-12 text-muted-foreground"><Loader2 className="h-5 w-5 animate-spin" />Opening security workspace…</div>; }

function Workspace() {
  const overview = useServerFn(securityOverview), register = useServerFn(registerSecuritySite), verify = useServerFn(verifySecuritySite), scan = useServerFn(scanSecuritySite), ask = useServerFn(askAegis);
  const qc = useQueryClient();
  const { user } = useAuth();
  const queryKey = ["security-workspace", user?.id];
  const { data, error } = useSuspenseQuery({ queryKey, queryFn: () => overview(), staleTime: 60000, retry: false, refetchInterval: query => query.state.data?.edge.error || query.state.data?.edge.sites.some(s => s.error) ? false : 60000, refetchIntervalInBackground: false });
  const [tab, setTab] = useState("overview"), [connect, setConnect] = useState(false), [domain, setDomain] = useState(""), [busy, setBusy] = useState<string | null>(null);
  const [selected, setSelected] = useState<SecurityReport | null>(null), [consent, setConsent] = useState(false), [filter, setFilter] = useState("all"), [dark, setDark] = useState(6);
  const [text, setText] = useState(""), [messages, setMessages] = useState<{ role: "user" | "assistant"; text: string }[]>([]), [handoff, setHandoff] = useState(false);
  useEffect(() => { const el = document.querySelector<HTMLElement>(".security-space"); el?.style.setProperty("--bg-l", String(dark / 100)); }, [dark]);
  const refresh = () => qc.invalidateQueries({ queryKey });
  const action = async (name: string, fn: () => Promise<unknown>) => { setBusy(name); try { await fn(); } catch(e) { toast.error(e instanceof Error ? e.message : "This action could not complete."); } finally { setBusy(null); } };
  const send = (prompt: string) => action("ask", async () => { const next = [...messages, { role: "user" as const, text: prompt }]; setMessages(next); setText(""); const answer = await ask({ data: { messages: next.slice(-19) } }); setMessages([...next, { role: "assistant", text: answer.answer }]); setHandoff(answer.handoff); });
  const sites = [...data.cloud.map(s => ({ ...s, source: "Codesynux Cloud" })), ...data.external.map(s => ({ hostname: s.hostname, url: `https://${s.hostname}`, source: "External website" }))].filter((s,i,a) => a.findIndex(x => x.hostname === s.hostname) === i);
  const events = data.edge.events.filter(e => filter === "all" || e.action === filter);
  const report = selected ?? data.reports[0]?.report;
  const known = data.edge.sites.filter(s => s.proxy === true && !s.error);
  const copy = async (value: string) => { try { await navigator.clipboard.writeText(value); toast.success("Copied."); } catch { toast.error("Copy unavailable. Select and copy the value instead."); } };
  return <>
    <div className="flex flex-wrap items-center justify-between gap-3 py-5"><div className="flex items-center gap-2 text-xs"><span className={`h-2 w-2 rounded-full ${data.edge.connected ? "bg-security" : "bg-security-warning"}`} /><span>Cloudflare {data.edge.connected ? "connected" : "unavailable"}</span><span className="text-muted-foreground">· {new Date(data.edge.checkedAt).toLocaleTimeString()}</span></div><div className="flex items-center gap-3"><label className="flex items-center gap-2" title="Background brightness"><SlidersHorizontal className="h-4 w-4 text-muted-foreground" /><input aria-label="Background brightness" type="range" min={2} max={14} value={dark} onChange={e => setDark(Number(e.target.value))} className="w-16 accent-primary" /></label><Button size="icon" variant="ghost" title="Refresh status" aria-label="Refresh status" onClick={() => refresh()}><RefreshCw /></Button><Button variant="outline" onClick={() => setConnect(true)}><Plus />Connect website</Button></div></div>
    {(error || data.edge.error) && <p role="alert" className="mb-4 text-sm text-security-warning">{error?.message ?? data.edge.error}</p>}
    <div className="grid border-y border-border sm:grid-cols-4">{[{ label: "Monitored websites", value: sites.length.toString(), detail: "Cloud + external", icon: Globe }, { label: "Proxy verified", value: known.length.toString(), detail: "Not a full security guarantee", icon: ShieldCheck }, { label: "Blocked events", value: data.edge.sites.length && data.edge.sites.every(s => !s.error && s.proxy !== null) ? data.edge.events.filter(e => e.action === "block").length.toString() : "—", detail: "Last hour · sampled events", icon: Radar }, { label: "Latest header grade", value: report?.grade ?? "—", detail: report?.hostname ?? "No scan yet", icon: Activity }].map(metric => <div key={metric.label} className="min-w-0 border-b border-border px-4 py-5 sm:border-b-0 sm:border-r last:border-r-0"><div className="flex items-center justify-between text-xs text-muted-foreground">{metric.label}<metric.icon className="h-4 w-4 text-security" /></div><p className="mt-3 font-mono text-3xl">{metric.value}</p><p className="mt-2 truncate text-[11px] text-muted-foreground">{metric.detail}</p></div>)}</div>
    <div className="grid gap-8 py-7 lg:grid-cols-[minmax(0,1fr)_350px]">
      <div className="min-w-0"><nav className="mb-6 flex gap-1 overflow-x-auto border-b border-border pb-3" aria-label="Security views">{[{ id: "overview", label: "Websites", icon: Globe }, { id: "scan", label: "Scanner", icon: Eye }, { id: "events", label: "Threat log", icon: Radar }].map(t => <Button key={t.id} variant={tab === t.id ? "secondary" : "ghost"} onClick={() => setTab(t.id)}><t.icon />{t.label}</Button>)}</nav>
      {tab === "overview" && <section><div className="mb-5 flex items-center justify-between"><h2 className="text-xl font-semibold">Site protection manager</h2><span className="font-mono text-xs text-muted-foreground">{sites.length} SITES</span></div>
        {!sites.length && <div className="security-grid relative overflow-hidden border border-border py-10 text-center"><Globe className="mx-auto mb-4 h-8 w-8 text-muted-foreground" /><h3>No websites connected yet</h3><p className="mx-auto mt-2 max-w-xs text-sm text-muted-foreground">Your published Codesynux sites appear here automatically. External domains need ownership verification.</p><Button variant="outline" className="mt-5" onClick={() => setConnect(true)}><Plus />Add external website</Button></div>}
        {sites.map(site => { const edge = data.edge.sites.find(s => s.hostname === site.hostname), external = data.external.find(s => s.hostname === site.hostname); return <div key={site.hostname} className="border-b border-border py-5"><div className="flex flex-wrap items-center justify-between gap-3"><div className="flex min-w-0 items-center gap-3"><Globe className="h-5 w-5 shrink-0 text-security" /><div className="min-w-0"><a href={site.url} target="_blank" rel="noreferrer" className="break-all text-sm font-semibold">{site.hostname}<ArrowUpRight className="ml-1 inline h-3 w-3" /></a><p className="mt-1 text-xs text-muted-foreground">{site.source}</p></div></div><Button size="sm" variant="outline" onClick={() => { setDomain(site.hostname); setTab("scan"); }}><Eye />Scan</Button></div><div className="mt-4 flex flex-wrap gap-x-4 gap-y-2 text-[11px] text-muted-foreground"><span className={edge?.proxy ? "text-security" : "text-security-warning"}>{edge?.proxy ? "DNS proxy active" : external && !external.verified_at ? "Ownership needs verification" : "Edge protection unverified"}</span><span>WAF ruleset: {edge?.waf == null ? "Unknown" : edge.waf ? "Present" : "Not found"}</span><span>TLS mode: {edge?.ssl ?? "Unknown"}</span><span>Rate limiting: {edge?.rateLimit == null ? "Unknown" : edge.rateLimit ? "Ruleset present" : "Not found"}</span></div>{edge?.error && <p className="mt-2 text-xs text-security-warning">{edge.error}</p>}{external && !external.verified_at && <div className="mt-4 space-y-2 border-l border-security-warning pl-3"><p className="text-xs text-muted-foreground">DNS TXT name: <span className="break-all text-foreground">_codesynux.{external.hostname}</span></p><div className="flex items-center gap-2"><code className="min-w-0 break-all text-[11px]">codesynux-verify={external.verification_token}</code><Button size="icon" variant="ghost" aria-label="Copy verification value" onClick={() => copy(`codesynux-verify=${external.verification_token}`)}><Copy /></Button></div><Button size="sm" variant="outline" disabled={busy !== null} onClick={() => action("verify", async () => { const result = await verify({ data: { id: external.id } }); toast[result.verified ? "success" : "info"](result.verified ? "Website ownership verified." : "TXT record not found yet. DNS changes can take time."); await refresh(); })}><Check />Verify ownership</Button></div>}</div>; })}
        <div className="mt-6 flex gap-3 border-t border-border pt-5"><Shield className="h-5 w-5 shrink-0 text-security-warning" /><p className="text-xs leading-relaxed text-muted-foreground">Monitoring does not route traffic or block attacks. External shielding requires an active Cloudflare zone and a proxied DNS record. TLS, WAF and rate-limit changes require explicit approval. A browser snippet cannot stop DDoS or protect an origin.</p></div>
      </section>}
      {tab === "scan" && <section><h2 className="text-xl font-semibold">Live security scanner</h2><form className="mt-4 space-y-3" onSubmit={e => { e.preventDefault(); void action("scan", async () => { const result = await scan({ data: { hostname: domain, publicScanConsent: true } }); setSelected(result); await refresh(); }); }}><div className="flex gap-2"><Input aria-label="Website to scan" placeholder="https://your-website.com" required value={domain} onChange={e => setDomain(e.target.value)} /><Button type="submit" disabled={!consent || busy !== null}>{busy === "scan" ? <Loader2 className="animate-spin" /> : <Eye />}Scan</Button></div><label className="flex items-start gap-2 text-xs leading-relaxed text-muted-foreground"><input type="checkbox" checked={consent} onChange={e => setConsent(e.target.checked)} className="mt-0.5 accent-primary" />I agree to send this public domain to Mozilla Observatory. Scan results are public and may be cached.</label></form>
        {report ? <div className="mt-6"><div className="flex items-center gap-5 border-y border-border py-5"><span className="font-mono text-5xl text-security">{report.grade}</span><div className="min-w-0"><p className="break-all font-medium">{report.hostname}</p><p className="mt-1 text-xs text-muted-foreground">{report.passed} passed · {report.failed} failed · score {report.score}</p><p className="mt-1 text-[10px] text-muted-foreground">Observed {new Date(report.scannedAt).toLocaleString()}</p></div></div><p className="my-4 text-xs text-muted-foreground">HTTP security posture only — not a penetration test, SSL certificate grade, malware scan or proof of safety.</p>{report.findings.map(f => <div key={f.name} className="border-b border-border py-4"><div className="flex items-start gap-2">{f.pass ? <Check className="h-4 w-4 shrink-0 text-security" /> : <X className="h-4 w-4 shrink-0 text-security-warning" />}<div className="min-w-0"><h3 className="text-sm capitalize">{f.name.replace(/-/g, " ")}</h3><p className="mt-1 break-all font-mono text-[10px] text-muted-foreground">{f.result}</p>{!f.pass && <p className="mt-2 text-xs leading-relaxed text-muted-foreground">{f.advice}</p>}</div></div></div>)}<div className="mt-4 flex flex-wrap gap-3"><Button variant="outline" onClick={() => send(`Explain the security issues for ${report.hostname} in my latest saved scan and provide exact safe configuration snippets.`)} disabled={busy !== null}><Terminal />Ask Aegis for fixes</Button><Button asChild variant="ghost"><a href={report.detailsUrl} target="_blank" rel="noreferrer">Full report<ArrowUpRight /></a></Button></div></div> : <div className="py-14 text-center text-sm text-muted-foreground"><Eye className="mx-auto mb-3 h-7 w-7" />No scan report yet.</div>}
      </section>}
      {tab === "events" && <section><div className="flex items-center justify-between gap-3"><h2 className="text-xl font-semibold">Live threat events</h2><select aria-label="Filter threat events" value={filter} onChange={e => setFilter(e.target.value)} className="rounded-md border border-border bg-background p-2 text-xs"><option value="all">All actions</option>{[...new Set(data.edge.events.map(e => e.action))].map(a => <option key={a} value={a}>{a}</option>)}</select></div><p className="mt-2 text-xs text-muted-foreground">Last hour · up to 100 sampled events per verified domain · refreshes every minute while open.</p><div className="mt-5 space-y-3">{events.length ? events.map((e,i) => <div key={`${e.datetime}-${i}`} className="border-b border-border pb-3 text-xs"><div className="flex justify-between gap-2"><span className="text-security">{e.action}</span><time className="text-muted-foreground">{new Date(e.datetime).toLocaleTimeString()}</time></div><p className="mt-2 break-all">{e.clientRequestHTTPHost} · {e.clientIP}</p><p className="mt-1 text-muted-foreground">{e.clientCountryName} · {e.source}</p></div>) : <div className="security-grid py-16 text-center"><Radar className="mx-auto mb-3 h-8 w-8 text-muted-foreground" /><p className="text-sm">No verified threat events available</p><p className="mx-auto mt-2 max-w-xs text-xs text-muted-foreground">Connect and verify a proxied domain to read Cloudflare events. No events does not mean no attacks.</p></div>}</div><p className="mt-5 text-xs text-muted-foreground">SQLi, XSS and DDoS counts are not inferred from event sources; attack classification requires provider evidence.</p></section>}
      </div>
      <aside className="self-start rounded-lg border border-border bg-card" aria-label="Aegis security assistant"><div className="flex items-center gap-3 border-b border-border p-5"><span className="flex h-10 w-10 items-center justify-center rounded-md bg-security/10"><ShieldCheck className="h-6 w-6 text-security" /></span><div><h2 className="font-semibold">Aegis</h2><p className="font-mono text-[10px] uppercase text-security">Security intelligence</p></div><span className="ml-auto h-2 w-2 rounded-full bg-security" /></div><AegisVoice onRefresh={refresh} /><div className="max-h-[440px] min-h-[200px] overflow-y-auto p-5" aria-live="polite">{!messages.length && <><p className="text-sm leading-relaxed">I’m Aegis. Your published sites are discovered automatically. External websites need verified ownership before I can report edge protection.</p><p className="mt-3 text-xs leading-relaxed text-muted-foreground">{sites.length ? `${sites.length} website${sites.length === 1 ? "" : "s"} in your workspace.` : "No websites in your workspace yet."} {known.length ? `${known.length} verified proxied domain${known.length === 1 ? "" : "s"}.` : "Protection is not verified yet."}</p><div className="mt-5 space-y-2">{["How do I protect my external website?", "What does my security grade mean?"].map(q => <Button key={q} variant="outline" className="h-auto w-full justify-between whitespace-normal py-2 text-left text-xs" disabled={busy !== null} onClick={() => send(q)}>{q}<ChevronRight /></Button>)}</div></>}{messages.map((m,i) => <div key={i} className="mb-5"><p className={`mb-1 font-mono text-[10px] uppercase ${m.role === "assistant" ? "text-security" : "text-muted-foreground"}`}>{m.role === "assistant" ? "Aegis" : "You"}</p><p className="whitespace-pre-wrap break-words text-sm leading-relaxed">{m.text}</p></div>)}{busy === "ask" && <Loader2 className="h-4 w-4 animate-spin text-security" />}{handoff && <div className="space-y-2 border-t border-border pt-3"><p className="text-xs text-muted-foreground">Continue with Echo? This opens Echo without starting a call.</p><div className="flex gap-2"><Button asChild size="sm"><Link to="/echo">Yes, open Echo<ArrowUpRight /></Link></Button><Button variant="ghost" size="sm" onClick={() => setHandoff(false)}>Stay here</Button></div></div>}</div><form className="flex items-center gap-2 border-t border-border p-3" onSubmit={e => { e.preventDefault(); if(text.trim()) void send(text.trim()); }}><Input aria-label="Message Aegis" placeholder="Ask about website security…" value={text} onChange={e => setText(e.target.value)} maxLength={4000} /><Button type="submit" size="icon" aria-label="Send to Aegis" disabled={!text.trim() || busy !== null}><Send /></Button></form><p className="px-4 pb-3 text-[10px] text-muted-foreground">Gemini advice · no automatic security changes</p></aside>
    </div>
    {connect && <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/90 p-5" role="dialog" aria-modal="true" aria-labelledby="connect-title"><div className="w-full max-w-lg rounded-lg border border-border bg-card p-6"><div className="flex items-center justify-between"><h2 id="connect-title" className="text-xl font-semibold">Connect an external website</h2><Button size="icon" variant="ghost" aria-label="Close connection dialog" onClick={() => setConnect(false)}><X /></Button></div><p className="mt-3 text-sm leading-relaxed text-muted-foreground">Add your domain, then verify ownership with a DNS TXT record. Verification enables status reads — it does not change traffic.</p><form className="mt-5 space-y-4" onSubmit={e => { e.preventDefault(); void action("connect", async () => { await register({ data: { hostname: domain } }); await refresh(); setConnect(false); setTab("overview"); toast.success("Domain saved. Add the verification TXT record to continue."); }); }}><Input aria-label="External website domain" placeholder="your-domain.com" value={domain} required onChange={e => setDomain(e.target.value)} /><div className="border-t border-border pt-4"><p className="text-xs leading-relaxed text-muted-foreground">For edge shielding, add your website to Cloudflare and follow its nameserver setup. Keep your existing origin DNS records and enable proxy only after reviewing the impact. No generic CNAME target or Shield.js snippet is supplied because neither would create a working protection service.</p></div><Button type="submit" className="w-full" disabled={busy !== null}>{busy === "connect" ? <Loader2 className="animate-spin" /> : <Plus />}Add domain</Button></form></div></div>}
  </>;
}