import { createFileRoute, Link } from "@tanstack/react-router";
import { Suspense, useRef, useState } from "react";
import { useServerFn } from "@tanstack/react-start";
import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
import { ArrowUpRight, Check, Cloud, Copy, FileCode2, Globe, Layers3, Loader2, LockKeyhole, Plus, RefreshCw, Rocket, Search, Server, ShieldCheck, X } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { SignIn } from "@/components/sign-in";
import { CloudVoice } from "@/components/cloud-voice";
import { ConnectDomainButton } from "@/components/connect-domain";
import { CodeHub } from "@/components/codehub";
import { useAuth } from "@/hooks/use-auth";
import { getCloudWorkspace } from "@/lib/cloud.functions";
import { deployEchoBuild } from "@/lib/gemini.functions";
import cloudArt from "@/assets/cloud-system.jpg";

export const Route = createFileRoute("/cloud")({
  head: () => ({
    meta: [
      { title: "Codesynux Autonomous Clouds System" },
      { name: "description", content: "Your private Codesynux cloud workspace: saved projects, deployment addresses and the cloud-only Stratus voice assistant." },
      { property: "og:title", content: "Codesynux Autonomous Clouds System" },
      { property: "og:description", content: "Manage saved website projects and publishing with Stratus, your dedicated cloud voice assistant." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary" },
    ],
  }),
  component: CloudPage,
});

function CloudPage() {
  const { user, ready } = useAuth();
  const [signIn, setSignIn] = useState(false);
  return <main className="cloud-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"><p className="flex items-center gap-3 text-sm"><Cloud className="h-5 w-5 text-primary" />Codesynux <span className="text-muted-foreground">/ Autonomous Clouds System</span></p><span className="font-mono text-[10px] uppercase text-primary">Cloud control</span></header>
    {user && ready ? <Suspense fallback={<LoadingCloud />}><CloudWorkspace /></Suspense> : <>
      <div className="flex flex-wrap items-center justify-between gap-4 border-b border-border py-4"><div className="flex items-center gap-3"><Cloud className="h-6 w-6 text-primary" /><div><p className="text-sm font-semibold">Stratus <span className="ml-2 font-mono text-[10px] text-muted-foreground">CLOUD VOICE</span></p><p className="mt-1 text-xs text-muted-foreground">Your cloud, in conversation</p></div></div><Button onClick={() => setSignIn(true)}><LockKeyhole />Sign in to talk</Button></div>
      <CloudBanner />
      {!ready ? <LoadingCloud /> : signIn ? <SignIn /> : <section className="grid gap-6 border-b border-border py-8 sm:grid-cols-3">{[{ icon: Layers3, name: "Projects", value: "Private by default" }, { icon: Rocket, name: "Deployments", value: "Your saved publishing addresses" }, { icon: ShieldCheck, name: "Control", value: "Your approval. Your cloud." }].map(item => <div key={item.name}><item.icon className="mb-3 h-5 w-5 text-primary" /><h2 className="font-medium">{item.name}</h2><p className="mt-2 text-sm text-muted-foreground">{item.value}</p></div>)}</section>}
    </>}
  </div></main>;
}
function LoadingCloud() { return <div className="flex items-center gap-3 py-12 text-muted-foreground"><Loader2 className="h-5 w-5 animate-spin" />Opening your cloud…</div>; }
function CloudBanner() { return <section className="relative isolate min-h-[320px] overflow-hidden border-b border-border py-10 sm:min-h-[360px] sm:py-12"><img src={cloudArt} width={1536} height={1024} alt="Glass cloud computing sculpture containing silver server modules" className="cloud-art absolute inset-0 -z-10 h-full w-full object-cover object-right" /><p className="mb-4 flex items-center gap-2 font-mono text-[10px] uppercase text-primary"><span className="h-px w-6 bg-primary" />Codesynux cloud intelligence</p><h1 className="max-w-lg text-4xl font-bold sm:text-5xl">Codesynux<br /><span className="text-primary">Autonomous</span><br />Clouds System<span className="text-accent">.</span></h1><blockquote className="mt-6 max-w-xs border-l border-accent/60 pl-3 text-sm text-muted-foreground">“Ideas take shape. Your cloud takes them further.”</blockquote></section>; }

function CloudWorkspace() {
  const { user } = useAuth();
  const getWorkspace = useServerFn(getCloudWorkspace), deploy = useServerFn(deployEchoBuild);
  const qc = useQueryClient(), queryKey = ["cloud-workspace", user?.id];
  const { data } = useSuspenseQuery({ queryKey, queryFn: () => getWorkspace(), staleTime: 60000, refetchInterval: 60000, refetchIntervalInBackground: false, retry: false });
  const [filter, setFilter] = useState("all"), [search, setSearch] = useState(""), [publishId, setPublishId] = useState<string | null>(null), [publishing, setPublishing] = useState(false), [outcome, setOutcome] = useState<string | null>(null);
  const [tab, setTab] = useState<"echo" | "codehub">("echo");
  const notify = useRef<((message: string) => void) | null>(null);
  const refresh = () => qc.invalidateQueries({ queryKey });
  const projects = data.projects.filter(p => (filter === "all" || (filter === "published" ? Boolean(p.published) : !p.latest.deployed_url)) && p.latest.prompt.toLowerCase().includes(search.toLowerCase()));
  const target = data.projects.find(p => p.latest.id === publishId);
  const requestPublish = (id: string, report?: (message: string) => void) => { setPublishId(id); notify.current = report ?? null; };
  const publish = async () => {
    if (!target || publishing) return;
    setPublishing(true); setOutcome(null);
    try {
      const result = await deploy({ data: { buildId: target.latest.id, apiBase: window.location.origin } });
      if ("error" in result) throw new Error(result.error);
      const message = `Publishing address returned: ${result.url}. ${result.note ?? "Cloudflare may take a minute to serve the update."}`;
      setOutcome(message); notify.current?.(message); toast.success("Publishing address received.");
      await refresh(); setPublishId(null);
    } catch (error) { const message = error instanceof Error ? error.message : "Publishing failed. Please retry later."; setOutcome(message); notify.current?.(`Publishing failed: ${message}. Do not claim success.`); toast.error(message); }
    finally { setPublishing(false); }
  };
  return <>
    <CloudVoice onPublish={requestPublish} />
    <CloudBanner />
    <div className="flex flex-wrap items-center justify-between gap-3 py-5"><div className="flex flex-wrap gap-4 font-mono text-[10px] uppercase"><span className={data.publishingConfigured ? "text-security" : "text-security-warning"}>Publishing key {data.publishingConfigured ? "configured" : "missing"}</span><span className={data.voiceConfigured ? "text-primary" : "text-security-warning"}>Voice key {data.voiceConfigured ? "configured" : "missing"}</span></div><span className="text-[10px] text-muted-foreground">Saved records · {new Date(data.checkedAt).toLocaleTimeString()}</span></div>
    <nav className="flex gap-1 border-y border-border py-2" aria-label="Cloud sections">{[{ id: "echo", text: "Echo projects" }, { id: "codehub", text: "CodeHub" }].map(t => <Button key={t.id} size="sm" variant={tab === t.id ? "secondary" : "ghost"} onClick={() => setTab(t.id as "echo" | "codehub")}>{t.text}</Button>)}</nav>
    {tab === "codehub" ? <CodeHub publishingConfigured={data.publishingConfigured} /> : <>
    <div className="grid grid-cols-2 border-b border-border lg:grid-cols-4">{[{ icon: Layers3, label: "Saved projects", value: data.projects.length }, { icon: Globe, label: "Published addresses", value: data.projects.filter(p => p.published).length }, { icon: FileCode2, label: "Saved versions", value: data.versions }, { icon: Server, label: "Unpublished latest", value: data.projects.filter(p => !p.latest.deployed_url).length }].map(item => <div key={item.label} className="border-b border-r border-border px-4 py-5 lg:border-b-0"><div className="flex items-center justify-between gap-2 text-xs text-muted-foreground">{item.label}<item.icon className="h-4 w-4 shrink-0 text-primary" /></div><p className="mt-3 font-mono text-3xl">{item.value}</p></div>)}</div>
    <section className="py-8"><div className="flex flex-wrap items-center justify-between gap-4"><div><p className="mb-2 font-mono text-[10px] text-primary">PROJECT DIRECTORY</p><h2 className="text-2xl font-semibold">Your cloud projects</h2></div><div className="flex gap-2"><Button size="icon" variant="outline" title="Refresh projects" aria-label="Refresh projects" onClick={() => void refresh()}><RefreshCw /></Button><Button asChild><Link to="/echo"><Plus />New with Echo</Link></Button></div></div>
      <div className="mt-6 flex flex-wrap items-center justify-between gap-3 border-b border-border pb-4"><nav className="flex gap-1" aria-label="Project filters">{[{ id: "all", text: "All projects" }, { id: "published", text: "Published" }, { id: "draft", text: "Unpublished" }].map(tab => <Button key={tab.id} size="sm" variant={filter === tab.id ? "secondary" : "ghost"} onClick={() => setFilter(tab.id)}>{tab.text}</Button>)}</nav><div className="relative w-full sm:w-64"><Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" /><Input className="pl-9" aria-label="Search cloud projects" placeholder="Search projects…" value={search} onChange={e => setSearch(e.target.value)} /></div></div>
      {projects.length ? <div className="grid gap-4 pt-5 md:grid-cols-2 xl:grid-cols-3">{projects.map(project => <article key={project.latest.session_id} className="min-w-0 rounded-lg border border-border bg-card p-5 transition-colors hover:border-primary/40"><div className="flex items-start justify-between gap-3"><FileCode2 className="h-6 w-6 text-primary" /><span className={`font-mono text-[10px] uppercase ${project.latest.deployed_url ? "text-security" : "text-security-warning"}`}>{project.latest.deployed_url ? "Address saved" : project.published ? "Unpublished update" : "Unpublished"}</span></div><h3 className="mt-5 line-clamp-2 min-h-12 break-words text-base font-semibold">{project.latest.prompt}</h3><p className="mt-3 font-mono text-[10px] text-muted-foreground">{project.versions} VERSION{project.versions === 1 ? "" : "S"} · {new Date(project.latest.created_at).toLocaleDateString()}</p>{project.published?.deployed_url && <a href={project.published.deployed_url} target="_blank" rel="noreferrer" className="mt-4 block truncate text-xs text-primary">{project.published.deployed_url}<ArrowUpRight className="ml-1 inline h-3 w-3" /></a>}<div className="mt-5 flex flex-wrap gap-2 border-t border-border pt-4"><Button asChild size="sm" variant="outline"><Link to="/session/$id" params={{ id: project.latest.session_id }}>Open project<ArrowUpRight /></Link></Button><Button size="sm" disabled={publishing || !data.publishingConfigured} onClick={() => requestPublish(project.latest.id)}><Rocket />{project.published ? "Republish" : "Publish"}</Button>{project.published?.deployed_url && <ConnectDomainButton kind="echo" id={project.latest.session_id} />}{project.published?.deployed_url && <Button size="icon" variant="ghost" title="Copy published address" aria-label="Copy published address" onClick={() => void navigator.clipboard.writeText(project.published?.deployed_url ?? "").then(() => toast.success("Address copied."), () => toast.error("Copy unavailable."))}><Copy /></Button>}</div></article>)}</div> : <div className="py-14 text-center"><Layers3 className="mx-auto mb-4 h-10 w-10 text-primary" /><h3 className="text-lg font-medium">{search || filter !== "all" ? "No matching projects" : "A clear sky. A fresh start."}</h3><p className="mt-2 text-sm text-muted-foreground">{search || filter !== "all" ? "Try another search or filter." : "Your saved Echo websites will appear here."}</p><Button asChild variant="outline" className="mt-5"><Link to="/echo"><Plus />Create with Echo</Link></Button></div>}
      <p className="mt-5 text-xs text-muted-foreground">Latest {data.limit} saved versions. Recorded addresses are not uptime checks. Static Echo websites only; arbitrary server applications are not supported.</p>
      {outcome && <p role="status" className="mt-4 break-words border-l border-primary pl-3 text-sm">{outcome}</p>}
    </section></>}
    {target && <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/90 p-5" role="dialog" aria-modal="true" aria-labelledby="publish-title"><div className="w-full max-w-lg rounded-lg border border-border bg-card p-6"><div className="flex items-center justify-between gap-3"><h2 id="publish-title" className="text-xl font-semibold">{target.published ? "Replace published website?" : "Publish this website?"}</h2><Button size="icon" variant="ghost" aria-label="Close publishing dialog" disabled={publishing} onClick={() => { setPublishId(null); notify.current?.("The caller cancelled publishing. Nothing was published."); }}><X /></Button></div><p className="mt-4 line-clamp-3 break-words text-sm">{target.latest.prompt}</p><p className="mt-4 text-sm text-muted-foreground">This uses Echo’s existing Cloudflare publishing. It makes this saved version public and can replace the website for this project. Your Cloudflare account’s usage limits and any charges apply.</p>{target.published?.deployed_url && <p className="mt-3 break-all text-xs text-primary">{target.published.deployed_url}</p>}<p className="mt-3 text-xs text-muted-foreground">Shared site data requires Codesynux itself to have a public address; private preview addresses do not support external visitors.</p><div className="mt-6 flex justify-end gap-2"><Button variant="ghost" disabled={publishing} onClick={() => { setPublishId(null); notify.current?.("Publishing was cancelled."); }}>Cancel</Button><Button disabled={publishing} onClick={() => void publish()}>{publishing ? <Loader2 className="animate-spin" /> : <Check />}Approve publishing</Button></div></div></div>}
  </>;
}