import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { supabase } from "@/integrations/supabase/client";
import { useServerFn } from "@tanstack/react-start";
import { useCallback, useEffect, useRef, useState } from "react";
import { Bot, Camera, CameraOff, Loader2, MessageSquareText, Mic, MicOff, PhoneOff, Phone, SendHorizontal, Trash2, Video, AudioLines } from "lucide-react";
import { askEcho, buildEchoSite } from "@/lib/gemini.functions";
import { SitePreview } from "@/components/site-preview";
import { useGeminiLive } from "@/hooks/use-gemini-live";
import type { LiveEvent } from "@/hooks/use-live-voice";
import { useAuth, displayName } from "@/hooks/use-auth";
import { SignIn } from "@/components/sign-in";
import { AgentFace } from "@/components/agent-face";
import { Textarea } from "@/components/ui/textarea";

export const Route = createFileRoute("/autonomous")({
  head: () => ({
    meta: [
      { title: "Autonomous Systems — Codesynux Agent Studio" },
      { name: "description", content: "Chat, plan and research with the Codesynux agent by typing, dictation, live voice or a face-to-face video call." },
      { property: "og:title", content: "Autonomous Systems — Codesynux" },
      { property: "og:description", content: "An AI agent studio with typing, microphone, live voice and an animated video-call agent." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  validateSearch: (s: Record<string, unknown>): { project?: string } => {
    const p = s["project"];
    return typeof p === "string" && /^[0-9a-f-]{36}$/i.test(p) ? { project: p } : {};
  },
  component: Studio,
});

type Msg = { role: "user" | "assistant"; text: string };
type Mode = "chat" | "plan" | "research" | "code";
const MODES: { id: Mode; label: string }[] = [
  { id: "chat", label: "Chat" }, { id: "plan", label: "Plan" }, { id: "research", label: "Research" }, { id: "code", label: "Code" },
];
const STORE = "codesynux-agent-chat";

function Studio() {
  const { user, ready } = useAuth();
  const [view, setView] = useState<"chat" | "voice" | "video">("chat");
  const { project } = Route.useSearch();
  const navigate = useNavigate();
  const [captions, setCaptions] = useState<Msg[]>([]);
  const [voiceSite, setVoiceSite] = useState<{ id: string; html: string; title?: string | undefined } | null>(null);
  const onEvent = useCallback((e: LiveEvent) => {
    if (e.type === "app.started") setCaptions([]);
    if (e.type === "app.project.opened") setVoiceSite((p) => ({ id: p?.id ?? "", html: p?.html ?? "", title: String(e["title"] ?? "") }));
    if (e.type === "app.build.done") setVoiceSite((p) => ({ id: String(e["id"] ?? ""), html: String(e["html"] ?? ""), title: p?.title }));
    if (e.type === "session.input_transcript.delta" || e.type === "session.output_transcript.delta") {
      const role = e.type === "session.input_transcript.delta" ? "user" : "assistant";
      const d = typeof e["delta"] === "string" ? e["delta"] : "";
      if (!d) return;
      setCaptions((p) => { const l = p[p.length - 1]; return l && l.role === role ? [...p.slice(0, -1), { role, text: l.text + d }] : [...p, { role, text: d }]; });
    }
  }, []);
  const voice = useGeminiLive({ onEvent });

  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 tabs = [
    { id: "chat", label: "Type & dictate", icon: MessageSquareText },
    { id: "voice", label: "Nova voice", icon: AudioLines },
    { id: "video", label: "Video call", icon: Video },
  ] as const;

  return (
    <main className="mx-auto flex max-w-5xl flex-col gap-5 px-4 py-6">
      <div className="flex items-center gap-3">
        <button type="button" onClick={() => { setView("chat"); navigate({ to: "/autonomous", search: { project: crypto.randomUUID() } }); }} aria-label="Start a new project" title="Start a new project" className="flex h-11 w-11 items-center justify-center rounded-2xl bg-brand text-primary-foreground transition hover:scale-105"><Bot className="h-6 w-6" /></button>
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Autonomous Systems</h1>
          <p className="text-sm text-muted-foreground">Tap the robot to start a new project — everything is saved to your profile</p>
        </div>
      </div>
      <div className="grid grid-cols-3 gap-1 rounded-2xl border border-border bg-card p-1">
        {tabs.map((t) => (
          <button key={t.id} type="button" onClick={() => setView(t.id)} className={`flex items-center justify-center gap-2 rounded-xl px-2 py-2.5 text-sm font-medium transition ${view === t.id ? "bg-brand text-primary-foreground" : "text-muted-foreground hover:text-foreground"}`}>
            <t.icon className="h-4 w-4 shrink-0" /><span className="truncate">{t.label}</span>
          </button>
        ))}
      </div>
      {view === "chat" ? <Chat key={project ?? "new"} project={project} /> : <><Call video={view === "video"} voice={voice} name={name} captions={captions} />{voiceSite?.html && <div className="flex flex-col gap-2">{voiceSite.title && <p className="font-mono text-xs text-muted-foreground">Open project: {voiceSite.title}</p>}<SitePreview html={voiceSite.html} name="codesynux-site" appId={voice.sessionId ?? undefined} buildId={voiceSite.id} /></div>}</>}
    </main>
  );
}

const CODE_RE = /\b(build|create|make|develop|code|design|generate)\b[^.?!]{0,60}\b(website|web ?site|web ?app|app|landing page|page|portfolio|dashboard|game|store|shop|calculator|todo|form|component|project)\b|\b(html|css|javascript|react|tailwind)\b/i;
/** True for prompts that ask to build a website, app or other coding project. */
function isCodingPrompt(t: string) { return CODE_RE.test(t); }

function Chat({ project }: { project?: string | undefined }) {
  const ask = useServerFn(askEcho);
  const build = useServerFn(buildEchoSite);
  const [site, setSite] = useState<{ id: string; html: string } | null>(null);
  const [sessionId, setSessionId] = useState(() => project ?? crypto.randomUUID());
  const [msgs, setMsgs] = useState<Msg[]>([]);
  const [mode, setMode] = useState<Mode>("chat");
  const [text, setText] = useState("");
  const [busy, setBusy] = useState(false);
  const [listening, setListening] = useState(false);
  const [canDictate, setCanDictate] = useState(false);
  const rec = useRef<{ stop: () => void } | null>(null);
  const end = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!project) return;
    void supabase.from("voice_builds").select("id, html, prompt").eq("session_id", project).order("created_at").then(({ data }) => {
      const last = data?.[data.length - 1];
      if (!last) return;
      setSite({ id: last.id, html: last.html }); setMode("code");
      setMsgs(data!.flatMap((b, i) => [{ role: "user" as const, text: b.prompt }, { role: "assistant" as const, text: i === 0 ? "Built your website." : "Updated the website." }]));
    });
  }, [project]);
  useEffect(() => {
    if (project) return;
    try { const s = JSON.parse(localStorage.getItem(STORE) ?? "[]"); if (Array.isArray(s)) setMsgs(s.slice(-50)); } catch { /* ignore */ }
    const w = window as unknown as Record<string, unknown>;
    setCanDictate(!!(w["SpeechRecognition"] || w["webkitSpeechRecognition"]));
  }, []);
  useEffect(() => { if (!project) localStorage.setItem(STORE, JSON.stringify(msgs.slice(-50))); end.current?.scrollIntoView({ behavior: "smooth", block: "end" }); }, [msgs]);

  const send = async () => {
    const t = text.trim();
    if (!t || busy) return;
    const next = [...msgs, { role: "user" as const, text: t }];
    setMsgs(next); setText(""); setBusy(true);
    try {
      const auto = mode !== "code" && isCodingPrompt(t);
      if (auto) setMode("code");
      if (mode === "code" || auto) {
        const r = await build({ data: { sessionId, request: t, previous: site?.html } });
        if ("error" in r) setMsgs([...next, { role: "assistant", text: r.error ?? "Build failed." }]);
        else { setSite({ id: r.id, html: r.html }); setMsgs([...next, { role: "assistant", text: site ? "Updated the preview with your changes." : "Built your website — see the live preview." }]); }
        setBusy(false);
        return;
      }
      const r = await ask({ data: { messages: next.slice(-20), mode } });
      setMsgs([...next, { role: "assistant", text: r.answer ?? r.error ?? "No answer." }]);
    } catch {
      setMsgs([...next, { role: "assistant", text: "The agent couldn't answer right now. Try again." }]);
    }
    setBusy(false);
  };

  const dictate = () => {
    if (listening) { rec.current?.stop(); return; }
    const w = window as unknown as Record<string, new () => any>; // eslint-disable-line @typescript-eslint/no-explicit-any
    const R = w["SpeechRecognition"] || w["webkitSpeechRecognition"];
    if (!R) return;
    const r = new R();
    r.interimResults = false; r.lang = navigator.language;
    r.onresult = (e: { results: ArrayLike<ArrayLike<{ transcript: string }>> }) => {
      const said = Array.from(e.results).map((x) => x[0]?.transcript ?? "").join(" ");
      setText((p) => (p ? p + " " : "") + said);
    };
    r.onend = () => setListening(false);
    r.onerror = () => setListening(false);
    rec.current = r; setListening(true); r.start();
  };

  const fix = useCallback((errors: string[]) => { setText(`Fix these errors: ${errors.join(" | ")}`); }, []);
  return (
    <div className={site && mode === "code" ? "grid gap-4 lg:grid-cols-2" : ""}>
    <section className="flex min-h-[60vh] flex-col rounded-3xl border border-border bg-card">
      <div className="flex items-center gap-2 overflow-x-auto border-b border-border p-3">
        {MODES.map((m) => (
          <button key={m.id} type="button" onClick={() => setMode(m.id)} className={`rounded-full border px-3 py-1 text-sm transition ${mode === m.id ? "border-primary text-primary" : "border-border text-muted-foreground"}`}>{m.label}</button>
        ))}
        {msgs.length > 0 && <button type="button" onClick={() => { setMsgs([]); setSite(null); setSessionId(crypto.randomUUID()); localStorage.removeItem(STORE); }} aria-label="Clear chat" className="ml-auto text-muted-foreground hover:text-destructive"><Trash2 className="h-4 w-4" /></button>}
      </div>
      <div className="flex-1 space-y-4 overflow-y-auto p-4">
        {msgs.length === 0 && (
          <div className="py-10 text-center text-muted-foreground">
            <Bot className="mx-auto mb-3 h-10 w-10 text-primary" />
            Pick a mode and ask anything — “Plan a food delivery app”, “Research the best database for chat apps”.
          </div>
        )}
        {msgs.map((m, i) => (
          <div key={i} className={`flex ${m.role === "user" ? "justify-end" : ""}`}>
            <p className={`max-w-[85%] whitespace-pre-wrap break-words rounded-2xl px-4 py-3 text-sm ${m.role === "user" ? "bg-brand text-primary-foreground" : "border border-border bg-background"}`}>{m.text}</p>
          </div>
        ))}
        {busy && <p className="flex items-center gap-2 text-sm text-muted-foreground"><Loader2 className="h-4 w-4 animate-spin" /> Thinking…</p>}
        <div ref={end} />
      </div>
      <form onSubmit={(e) => { e.preventDefault(); void send(); }} className="flex items-end gap-2 border-t border-border p-3">
        <Textarea value={text} onChange={(e) => setText(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void send(); } }} placeholder={mode === "code" ? (site ? "Describe a change to your website…" : "Describe a website to build…") : `Message in ${mode} mode…`} rows={1} maxLength={8000} className="max-h-40 min-h-11 resize-none rounded-2xl" />
        {canDictate && (
          <button type="button" onClick={dictate} aria-label={listening ? "Stop dictation" : "Dictate"} className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-full border ${listening ? "animate-orb border-primary text-primary" : "border-border text-muted-foreground"}`}>
            {listening ? <MicOff className="h-4 w-4" /> : <Mic className="h-4 w-4" />}
          </button>
        )}
        <button type="submit" disabled={busy || !text.trim()} aria-label="Send" className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-brand text-primary-foreground disabled:opacity-40"><SendHorizontal className="h-4 w-4" /></button>
      </form>
    </section>
    {site && mode === "code" && (
      <SitePreview html={site.html} name="codesynux-site" appId={sessionId} buildId={site.id} onFix={fix} />
    )}
    </div>
  );
}

function Call({ video, voice, name, captions }: { video: boolean; voice: ReturnType<typeof useGeminiLive>; name: string; captions: Msg[] }) {
  const idle = voice.status === "idle" || voice.status === "closed";
  const live = voice.status === "connected";
  const speaking = live && voice.phase === "speaking";
  const [cam, setCam] = useState(false);
  const vid = useRef<HTMLVideoElement>(null);
  const stream = useRef<MediaStream | null>(null);

  useEffect(() => {
    if (!video || !cam) { stream.current?.getTracks().forEach((t) => t.stop()); stream.current = null; return; }
    navigator.mediaDevices?.getUserMedia({ video: { facingMode: "user" } }).then((s) => {
      stream.current = s; if (vid.current) vid.current.srcObject = s;
    }).catch(() => setCam(false));
    return () => { stream.current?.getTracks().forEach((t) => t.stop()); stream.current = null; };
  }, [video, cam]);

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

  return (
    <section className="relative flex flex-col items-center gap-5 overflow-hidden rounded-3xl border border-border bg-card px-4 py-8">
      {video ? <AgentFace speaking={speaking} active={live} size={260} /> : (
        <div className={`flex h-36 w-36 items-center justify-center rounded-full bg-brand 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>
      )}
      {video && cam && <video ref={vid} autoPlay playsInline muted className="absolute right-3 top-3 h-32 w-24 rounded-2xl border border-border object-cover md:h-40 md:w-32" />}
      <p role="status" className="font-mono text-sm text-muted-foreground">{label}</p>
      <div className="flex flex-wrap justify-center gap-3">
        {live && (
          <button type="button" onClick={() => voice.setMuted(!voice.muted)} className="flex items-center gap-2 rounded-full border border-border 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>
        )}
        {video && (
          <button type="button" onClick={() => setCam(!cam)} className="flex items-center gap-2 rounded-full border border-border px-4 py-2 text-sm">
            {cam ? <CameraOff className="h-4 w-4" /> : <Camera className="h-4 w-4" />}{cam ? "Camera off" : "Camera on"}
          </button>
        )}
        {idle ? (
          <button type="button" onClick={() => voice.start(name)} className="flex items-center gap-2 rounded-full bg-brand px-5 py-2 text-sm font-semibold text-primary-foreground shadow-glow"><Phone className="h-4 w-4" /> Start call</button>
        ) : (
          <button type="button" onClick={voice.stop} disabled={voice.status === "stopping"} className="flex items-center gap-2 rounded-full bg-destructive px-5 py-2 text-sm font-semibold text-destructive-foreground"><PhoneOff className="h-4 w-4" /> End</button>
        )}
      </div>
      {voice.error && <p role="alert" className="text-sm text-destructive">{voice.error}</p>}
      {video && cam && <p className="text-xs text-muted-foreground">Your camera stays on your device; Echo hears you but doesn't see you.</p>}
      {captions.length > 0 && (
        <div className="w-full max-w-xl space-y-2 rounded-2xl border border-border bg-background p-4">
          {captions.slice(-6).map((c, i) => (
            <p key={i} className={`whitespace-pre-wrap break-words text-sm ${c.role === "user" ? "" : "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>
  );
}