import { createFileRoute, Link } from "@tanstack/react-router";
import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
import { Suspense, useState } from "react";
import { AudioLines, ArrowLeft } from "lucide-react";
import { supabase } from "@/integrations/supabase/client";
import { SitePreview } from "@/components/site-preview";

const sessionQuery = (id: string) =>
  queryOptions({
    queryKey: ["session", id],
    queryFn: async () => {
      const [conv, builds] = await Promise.all([
        supabase.from("voice_conversations").select("started_at, voice_messages(position, role, content)").eq("session_id", id).maybeSingle(),
        supabase.from("voice_builds").select("id, prompt, html, created_at, deployed_url").eq("session_id", id).order("created_at"),
      ]);
      if (conv.error) throw conv.error;
      if (builds.error) throw builds.error;
      return { conversation: conv.data, builds: builds.data ?? [] };
    },
  });

export const Route = createFileRoute("/session/$id")({
  head: () => ({
    meta: [
      { title: "Echo session — conversation & live preview" },
      { name: "description", content: "Read an Echo voice conversation and run the website Echo built during it." },
      { property: "og:title", content: "Echo session — conversation & live preview" },
      { property: "og:description", content: "A shared Echo voice session with its full dialogue and live website preview." },
      { property: "og:type", content: "article" },
      { name: "twitter:card", content: "summary" },
    ],
  }),
  component: SessionPage,
});

function SessionPage() {
  const { id } = Route.useParams();
  return (
    <main className="mx-auto flex min-h-screen max-w-7xl flex-col gap-6 px-5 py-8">
      <header className="flex items-center justify-between">
        <Link to="/" className="flex items-center gap-2 font-mono text-xs uppercase tracking-[0.25em] text-muted-foreground">
          <ArrowLeft className="h-4 w-4" /> <AudioLines className="h-4 w-4 text-primary" /> Echo
        </Link>
        <span className="font-mono text-xs text-muted-foreground">session</span>
      </header>
      <Suspense fallback={<p className="font-mono text-sm text-muted-foreground">Loading session…</p>}>
        <SessionBody id={id} />
      </Suspense>
    </main>
  );
}

function SessionBody({ id }: { id: string }) {
  const { data } = useSuspenseQuery(sessionQuery(id));
  const [pick, setPick] = useState(data.builds.length - 1);
  const build = data.builds[pick];
  const msgs = [...(data.conversation?.voice_messages ?? [])].sort((a, b) => a.position - b.position);
  if (!data.conversation && !data.builds.length) return <p className="text-muted-foreground">This session isn't available. Sign in with the account that made it — it appears once the call is saved.</p>;
  return (
    <div className="grid gap-6 lg:grid-cols-[1fr_2fr]">
      <section className="space-y-2 rounded-2xl border border-border bg-card p-4">
        <h1 className="font-mono text-xs uppercase tracking-[0.25em] text-muted-foreground">
          Conversation {data.conversation && `· ${new Date(data.conversation.started_at).toLocaleString()}`}
        </h1>
        {msgs.length ? msgs.map((m) => (
          <p key={m.position} className={m.role === "user" ? "" : "text-primary"}>
            <span className="mr-2 font-mono text-xs uppercase text-muted-foreground">{m.role === "user" ? "visitor" : "echo"}</span>
            {m.content}
          </p>
        )) : <p className="text-sm text-muted-foreground">The dialogue appears after the call ends.</p>}
      </section>
      <section className="space-y-3">
        {build ? (
          <>
            {data.builds.length > 1 && (
              <div className="flex flex-wrap gap-2">
                {data.builds.map((b, i) => (
                  <button key={b.id} type="button" onClick={() => setPick(i)} className={`rounded-full border border-border px-3 py-1 font-mono text-xs ${i === pick ? "bg-primary text-primary-foreground" : "bg-secondary"}`}>
                    Version {i + 1}
                  </button>
                ))}
              </div>
            )}
            <p className="text-sm text-muted-foreground">{build.prompt}</p>
            <SitePreview html={build.html} name={`echo-session-v${pick + 1}`} appId={id} buildId={build.id} deployedUrl={build.deployed_url} />
          </>
        ) : <p className="rounded-2xl border border-dashed border-border p-8 text-center text-muted-foreground">No website was built in this session.</p>}
      </section>
    </div>
  );
}