import { createFileRoute, Link } from "@tanstack/react-router";
import { SitePreview } from "@/components/site-preview";
import { queryOptions, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
import { Suspense, useCallback, useEffect, useRef, useState } from "react";
import { Mic, MicOff, PhoneOff, MessagesSquare, Clock, AudioLines, ExternalLink } from "lucide-react";
import { supabase } from "@/integrations/supabase/client";
import type { LiveEvent } from "@/hooks/use-live-voice";
import { useGeminiLive } from "@/hooks/use-gemini-live";
import { Button } from "@/components/ui/button";
import { SignIn } from "@/components/sign-in";
import { useAuth, displayName } from "@/hooks/use-auth";

type Conversation = {
  id: string;
  session_id: string | null;
  started_at: string;
  ended_at: string;
  turn_count: number;
  voice_messages: { position: number; role: string; content: string }[];
};

const historyQuery = queryOptions({
  queryKey: ["voice-history"],
  queryFn: async (): Promise<Conversation[]> => {
    const { data, error } = await supabase
      .from("voice_conversations")
      .select("id, session_id, started_at, ended_at, turn_count, voice_messages(position, role, content)")
      .order("started_at", { ascending: false })
      .limit(50);
    if (error) throw error;
    return data ?? [];
  },
});

export const Route = createFileRoute("/echo")({
  head: () => ({
    meta: [
      { title: "Echo — Live Voice Agent | Codesynux" },
      { name: "description", content: "Talk to Echo with your voice. Every conversation is saved to a live history dashboard you can ask about." },
      { property: "og:title", content: "Echo — Hands-free Voice Assistant" },
      { property: "og:description", content: "Talk, don't type. A voice assistant with a live conversation history dashboard." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Index,
});

type Caption = { role: "user" | "assistant"; text: string };

function Index() {
  const queryClient = useQueryClient();
  const [captions, setCaptions] = useState<Caption[]>([]);
  type Site = { html: string; id: string; building: string | null; error: string | null; autoFix: boolean; url: string | null; deploying: boolean };
  const empty: Site = { html: "", id: "", building: null, error: null, autoFix: false, url: null, deploying: false };
  const [site, setSite] = useState<Site>(empty);

  const onEvent = useCallback(
    (event: LiveEvent) => {
      if (event.type === "app.started") { setCaptions([]); setSite(empty); }
      if (event.type === "app.build.start") setSite((p) => ({ ...p, building: event["fix"] ? "Fixing the issues live testing found" : String(event["request"] ?? ""), error: null }));
      // A voice build may be auto-fixed once; a fix result is never auto-fixed again (no loops).
      if (event.type === "app.build.done") setSite((p) => ({ ...p, html: String(event["html"] ?? ""), id: String(event["id"] ?? ""), building: null, error: null, autoFix: !event["fix"], url: null }));
      if (event.type === "app.build.error") setSite((p) => ({ ...p, building: null, error: String(event["message"] ?? "Build failed") }));
      if (event.type === "app.deploy.start") setSite((p) => ({ ...p, deploying: true }));
      if (event.type === "app.deploy.done") setSite((p) => ({ ...p, deploying: false, url: String(event["url"] ?? "") }));
      if (event.type === "app.deploy.error") setSite((p) => ({ ...p, deploying: false, error: String(event["message"] ?? "Publishing failed") }));
      if (event.type === "session.input_transcript.delta" || event.type === "session.output_transcript.delta") {
        const role = event.type === "session.input_transcript.delta" ? "user" : "assistant";
        const delta = typeof event["delta"] === "string" ? event["delta"] : "";
        if (!delta) return;
        setCaptions((prev) => {
          const last = prev[prev.length - 1];
          if (last && last.role === role) return [...prev.slice(0, -1), { role, text: last.text + delta }];
          return [...prev, { role, text: delta }];
        });
      }
      if (event.type === "app.closed") {
        setTimeout(() => queryClient.invalidateQueries({ queryKey: ["voice-history"] }), 1500);
      }
    },
    [queryClient],
  );

  const voice = useGeminiLive({ onEvent });
  const idle = voice.status === "idle" || voice.status === "closed";
  const live = voice.status === "connected";
  const { user, ready } = useAuth();
  const name = displayName(user);
  const [entered, setEntered] = useState(false);

  useEffect(() => {
    queryClient.invalidateQueries({ queryKey: ["voice-history"] });
  }, [user?.id, queryClient]);

  const auto = useRef(false);
  useEffect(() => {
    const ua = (navigator as Navigator & { userActivation?: { hasBeenActive: boolean } }).userActivation;
    if (user && !auto.current && ua?.hasBeenActive) { auto.current = true; setEntered(true); voice.start(name); }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [user]);

  const connect = () => {
    setEntered(true);
    voice.start(name);
  };

  const label = {
    idle: "Ready",
    connecting: "Connecting…",
    connected: voice.muted ? "Muted" : voice.phase === "speaking" ? "Speaking…" : `Listening to you, ${name}…`,
    stopping: "Ending call…",
    closed: "Call ended",
  }[voice.status];

  if (!ready) return <main className="flex min-h-screen items-center justify-center font-mono text-sm text-muted-foreground">Loading…</main>;
  if (!user) return <SignIn />;

  if (!entered) {
    return (
      <main className="mx-auto flex min-h-[80vh] max-w-md flex-col justify-center gap-8 px-6 py-10">
        <div className="space-y-3">
          <h1 className="text-4xl font-bold leading-tight tracking-tight">
            Hi {name}. <span className="text-primary">Ready to talk?</span>
          </h1>
          <p className="text-muted-foreground">Echo will greet you and start listening right away.</p>
        </div>
        <Button type="button" onClick={connect} className="h-14 w-full rounded-2xl text-base font-semibold shadow-glow">
          <Mic className="mr-2 h-5 w-5" /> Connect to Echo
        </Button>
      </main>
    );
  }

  return (
    <main className="mx-auto flex min-h-screen max-w-7xl flex-col gap-10 px-5 py-8 md:py-12">

      <section className="flex flex-col items-center gap-6 text-center">
        <h1 className="text-4xl font-bold leading-tight tracking-tight md:text-6xl">
          Talk. <span className="text-primary">Don't type.</span>
        </h1>
        <p className="max-w-md text-muted-foreground">
          Ask Echo about code, everyday questions, or your past conversations.
        </p>

        <div
          aria-hidden
          className={`mt-4 flex h-36 w-36 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-glow ${live && !voice.muted ? "animate-orb" : "opacity-60"}`}
        >
          {voice.muted || idle ? <MicOff className="h-12 w-12" /> : <AudioLines className="h-12 w-12" />}
        </div>
        <p role="status" className="font-mono text-sm text-muted-foreground">{label}</p>

        <div className="flex gap-3">
          {live && (
            <Button
              variant="secondary"
              type="button"
              onClick={() => voice.setMuted(!voice.muted)}
              className="flex items-center gap-2 rounded-full border border-border bg-secondary px-4 py-2 text-sm"
            >
              {voice.muted ? <MicOff className="h-4 w-4" /> : <Mic className="h-4 w-4" />}
              {voice.muted ? "Unmute" : "Mute"}
            </Button>
          )}
          {idle ? (
            <Button type="button" onClick={() => voice.start(name)} className="rounded-full px-4 py-2 text-sm">
              <Mic className="mr-2 h-4 w-4" /> Reconnect
            </Button>
          ) : (
            <Button type="button" variant="secondary" onClick={voice.stop} disabled={voice.status === "stopping"} className="rounded-full border border-border px-4 py-2 text-sm">
              <PhoneOff className="mr-2 h-4 w-4" /> End
            </Button>
          )}
        </div>
        {voice.error && <p role="alert" className="text-sm text-destructive">{voice.error}</p>}

        {(site.html || site.building || site.error) && (
          <div className="w-full space-y-2 text-left">
            {site.building && <p className="font-mono text-xs text-primary">Building: {site.building}…</p>}
            {site.error && <p role="alert" className="text-sm text-destructive">{site.error}</p>}
            {site.deploying && <p className="font-mono text-xs text-primary">Publishing to Cloudflare…</p>}
            {site.html && (
              <SitePreview
                html={site.html}
                appId={voice.sessionId ?? undefined}
                buildId={site.id || undefined}
                deployedUrl={site.url}
                autoFix={site.autoFix}
                onFix={(errors) => { setSite((p) => ({ ...p, autoFix: false })); void voice.fixBuild(errors); }}
                onTestResult={voice.reportTest}
              />
            )}
            {voice.sessionId && site.html && (
              <Link to="/session/$id" params={{ id: voice.sessionId }} className="inline-flex items-center gap-1 font-mono text-xs text-primary underline">
                <ExternalLink className="h-3 w-3" /> Shareable session page (full chat appears after the call ends)
              </Link>
            )}
          </div>
        )}

        {captions.length > 0 && (
          <div className="w-full max-w-xl space-y-2 rounded-2xl border border-border bg-card p-4 text-left">
            {captions.slice(-6).map((c, i) => (
              <p key={i} className={`whitespace-pre-wrap break-words ${c.role === "user" ? "text-foreground" : "text-primary"}`}>
                <span className="mr-2 font-mono text-xs uppercase text-muted-foreground">
                  {c.role === "user" ? "you" : "echo"}
                </span>
                {c.text}
              </p>
            ))}
          </div>
        )}
      </section>

      <Suspense fallback={<p className="text-center font-mono text-sm text-muted-foreground">Loading history…</p>}>
        <Dashboard />
      </Suspense>
    </main>
  );
}

function Dashboard() {
  const { data } = useSuspenseQuery(historyQuery);
  const [open, setOpen] = useState<string | null>(null);
  const totalTurns = data.reduce((n, c) => n + c.turn_count, 0);
  const last = data[0];

  return (
    <section className="space-y-5">
      <h2 className="font-mono text-xs uppercase tracking-[0.25em] text-muted-foreground">Dashboard · history</h2>
      <div className="grid grid-cols-3 gap-3">
        <Stat label="Conversations" value={String(data.length)} />
        <Stat label="Messages" value={String(totalTurns)} />
        <Stat label="Last talk" value={last ? timeAgo(last.started_at) : "—"} />
      </div>

      {data.length === 0 ? (
        <div className="rounded-2xl border border-dashed border-border p-8 text-center text-muted-foreground">
          No conversations yet. Tap the button above and say hello.
        </div>
      ) : (
        <ul className="space-y-3">
          {data.map((c) => {
            const msgs = [...c.voice_messages].sort((a, b) => a.position - b.position);
            const first = msgs.find((m) => m.role === "user")?.content ?? "Conversation";
            const isOpen = open === c.id;
            return (
              <li key={c.id} className="rounded-2xl border border-border bg-card">
                <button
                  type="button"
                  onClick={() => setOpen(isOpen ? null : c.id)}
                  className="flex w-full items-start gap-3 p-4 text-left"
                >
                  <MessagesSquare className="mt-1 h-4 w-4 shrink-0 text-primary" />
                  <div className="min-w-0 flex-1">
                    <p className="truncate font-medium">{first}</p>
                    <p className="mt-1 flex items-center gap-2 font-mono text-xs text-muted-foreground">
                      <Clock className="h-3 w-3" /> {new Date(c.started_at).toLocaleString()} · {c.turn_count} messages
                    </p>
                  </div>
                </button>
                {isOpen && (
                  <div className="space-y-2 border-t border-border p-4">
                    {c.session_id && (
                      <Link to="/session/$id" params={{ id: c.session_id }} className="inline-flex items-center gap-1 font-mono text-xs text-primary underline">
                        <ExternalLink className="h-3 w-3" /> Open session page
                      </Link>
                    )}
                    {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>
                    ))}
                  </div>
                )}
              </li>
            );
          })}
        </ul>
      )}
    </section>
  );
}

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

function timeAgo(iso: string) {
  const mins = Math.round((Date.now() - new Date(iso).getTime()) / 60000);
  if (mins < 1) return "now";
  if (mins < 60) return `${mins}m`;
  const h = Math.round(mins / 60);
  return h < 24 ? `${h}h` : `${Math.round(h / 24)}d`;
}