import { createFileRoute, Link } from "@tanstack/react-router";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { AudioLines, LogOut, Bot, Code2, ExternalLink, FolderGit2 } from "lucide-react";
import { supabase } from "@/integrations/supabase/client";
import { useAuth, displayName } from "@/hooks/use-auth";
import { SignIn } from "@/components/sign-in";
import { NAV } from "@/components/app-header";

export const Route = createFileRoute("/profile")({
  head: () => ({
    meta: [
      { title: "Your Profile — Codesynux" },
      { name: "description", content: "Sign in to Codesynux to talk with Echo, run autonomous agents, scan security and deploy to the cloud." },
      { property: "og:title", content: "Codesynux — Autonomous AI Platform" },
      { property: "og:description", content: "Live voice agents, autonomous systems, security scans and cloud deployment in one place." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Profile,
});

function Profile() {
  const { user, ready } = useAuth();
  const qc = useQueryClient();
  const stats = useQuery({
    queryKey: ["profile-stats", user?.id],
    enabled: !!user,
    queryFn: async () => {
      const [c, b] = await Promise.all([
        supabase.from("voice_conversations").select("id", { count: "exact", head: true }),
        supabase.from("voice_builds").select("id", { count: "exact", head: true }),
      ]);
      return { calls: c.count ?? 0, builds: b.count ?? 0 };
    },
  });

  if (!ready) return <main className="flex min-h-[80vh] items-center justify-center font-mono text-sm text-muted-foreground">Loading…</main>;
  if (!user) return <SignIn />;
  const name = displayName(user);

  const signOut = async () => { await qc.cancelQueries(); qc.clear(); await supabase.auth.signOut(); };

  return (
    <main className="mx-auto max-w-5xl space-y-8 px-4 py-10">
      <section className="flex flex-col gap-5 rounded-3xl border border-border bg-card p-6 md:flex-row md:items-center">
        <div className="flex h-20 w-20 shrink-0 items-center justify-center rounded-full bg-brand text-3xl font-bold text-primary-foreground">{name[0]?.toUpperCase()}</div>
        <div className="min-w-0 flex-1">
          <p className="font-mono text-xs uppercase tracking-[0.25em] text-muted-foreground">Profile</p>
          <h1 className="text-3xl font-bold tracking-tight md:text-4xl">Welcome, <span className="text-brand">{name}</span></h1>
          <p className="truncate text-sm text-muted-foreground">{user.email}</p>
        </div>
        <button type="button" onClick={signOut} className="flex items-center gap-2 self-start rounded-full border border-border px-4 py-2 text-sm hover:border-destructive hover:text-destructive md:self-center"><LogOut className="h-4 w-4" /> Sign out</button>
      </section>

      <div className="grid grid-cols-2 gap-3">
        <Stat label="Echo calls" value={stats.data?.calls} />
        <Stat label="Websites built" value={stats.data?.builds} />
      </div>

      <Projects userId={user.id} />

      <Link to="/echo" className="flex items-center gap-4 rounded-3xl bg-brand p-6 text-primary-foreground shadow-glow transition hover:opacity-95">
        <AudioLines className="h-10 w-10" />
        <span><span className="block text-xl font-bold">Talk to Echo</span><span className="text-sm opacity-80">Start a live voice call and build websites by speaking</span></span>
      </Link>

      <section className="grid gap-3 md:grid-cols-3">
        {NAV.map((n) => (
          <Link key={n.to} to={n.to} className="rounded-3xl border border-border bg-card p-5 transition hover:border-primary">
            <n.icon className="mb-3 h-7 w-7 text-primary" />
            <p className="font-semibold">{n.label}</p>
            <p className="text-sm text-muted-foreground">{n.note}</p>
          </Link>
        ))}
      </section>
    </main>
  );
}

function Stat({ label, value }: { label: string; value: number | undefined }) {
  return (
    <div className="rounded-2xl border border-border bg-card p-4">
      <p className="text-3xl font-bold text-primary">{value ?? "—"}</p>
      <p className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">{label}</p>
    </div>
  );
}

function Projects({ userId }: { userId: string }) {
  const q = useQuery({
    queryKey: ["profile-projects", userId],
    queryFn: async () => {
      const { data, error } = await supabase.from("voice_builds").select("id, session_id, prompt, created_at, deployed_url").order("created_at", { ascending: false }).limit(200);
      if (error) throw error;
      const map = new Map<string, { session: string; title: string; updated: string; versions: number; url: string | null }>();
      for (const b of data ?? []) {
        const p = map.get(b.session_id);
        if (p) { p.versions++; p.title = b.prompt; p.url ??= b.deployed_url; }
        else map.set(b.session_id, { session: b.session_id, title: b.prompt, updated: b.created_at, versions: 1, url: b.deployed_url });
      }
      return [...map.values()];
    },
  });
  return (
    <section className="space-y-3">
      <div className="flex items-center justify-between">
        <h2 className="flex items-center gap-2 text-xl font-bold"><FolderGit2 className="h-5 w-5 text-primary" /> Websites built</h2>
        <Link to="/autonomous" search={{ project: crypto.randomUUID() }} className="flex items-center gap-2 rounded-full bg-brand px-4 py-2 text-sm font-semibold text-primary-foreground"><Bot className="h-4 w-4" /> New project</Link>
      </div>
      {q.isLoading ? <p className="text-sm text-muted-foreground">Loading your projects…</p>
        : !q.data?.length ? <p className="rounded-2xl border border-dashed border-border p-6 text-center text-sm text-muted-foreground">No projects yet. Ask Echo or the agent to build a website and it will be saved here automatically.</p>
        : <div className="grid gap-3 md:grid-cols-2">
          {q.data.map((p) => (
            <div key={p.session} className="flex flex-col gap-3 rounded-2xl border border-border bg-card p-4 transition hover:border-primary">
              <div className="min-w-0">
                <p className="line-clamp-2 font-semibold">{p.title}</p>
                <p className="font-mono text-[11px] text-muted-foreground">{p.versions} version{p.versions > 1 ? "s" : ""} · {new Date(p.updated).toLocaleString()}</p>
              </div>
              <div className="flex flex-wrap gap-2 text-sm">
                <Link to="/autonomous" search={{ project: p.session }} className="flex items-center gap-1 rounded-full bg-brand px-3 py-1 text-primary-foreground"><Code2 className="h-4 w-4" /> Continue</Link>
                <Link to="/session/$id" params={{ id: p.session }} className="rounded-full border border-border px-3 py-1">Preview, code & history</Link>
                {p.url && <a href={p.url} target="_blank" rel="noreferrer" className="flex items-center gap-1 rounded-full border border-border px-3 py-1">Live <ExternalLink className="h-3 w-3" /></a>}
              </div>
            </div>
          ))}
        </div>}
    </section>
  );
}