import { useState } from "react";
import { useServerFn } from "@tanstack/react-start";
import { AudioLines, Cloud, Mic, MicOff, Phone, PhoneOff } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useGeminiLive } from "@/hooks/use-gemini-live";
import { useAuth } from "@/hooks/use-auth";
import { getCloudWorkspace, startCloudLive } from "@/lib/cloud.functions";

export function CloudVoice({ onPublish }: { onPublish: (id: string, notify: (result: string) => void) => void }) {
  const startFn = useServerFn(startCloudLive), overview = useServerFn(getCloudWorkspace);
  const { user } = useAuth();
  const [transcript, setTranscript] = useState<{ role: string; text: string }[]>([]);
  const voice = useGeminiLive({ saveCall: false, assistantName: "Stratus", startSession: name => startFn({ data: { name } }),
    onEvent: event => {
      if (event.type === "app.started") setTranscript([]);
      const delta = event["delta"];
      if (typeof delta !== "string") return;
      const role = event.type === "session.input_transcript.delta" ? "You" : event.type === "session.output_transcript.delta" ? "Stratus" : null;
      if (!role) return;
      setTranscript(items => { const last = items.at(-1); return last?.role === role ? [...items.slice(0,-1), { role, text: (last.text + delta).slice(-4000) }] : [...items.slice(-7), { role, text: delta }]; });
    },
    onToolCall: async call => {
      if (call.name === "get_cloud_projects") return overview();
      if (call.name === "request_publish_project") {
        const id = call.args?.["buildId"];
        const workspace = await overview();
        if (typeof id !== "string" || !workspace.projects.some(p => p.latest.id === id)) return { error: "Choose the latest version of one of your saved projects." };
        onPublish(id, voice.reportTest);
        return { awaitingApproval: true, message: "The caller must approve the specific project on screen. It has not been published." };
      }
      return { error: "Stratus only handles cloud project reads and permission requests." };
    },
  });
  const active = voice.status === "connecting" || voice.status === "connected";
  return <section className="border-b border-border py-4" aria-label="Cloud voice assistant">
    <div className="flex flex-wrap items-center justify-between gap-4"><div className="flex items-center gap-3"><span className="flex h-10 w-10 items-center justify-center rounded-md bg-primary/10"><Cloud className="h-5 w-5 text-primary" /></span><div><p className="text-sm font-semibold">Stratus <span className="ml-2 font-mono text-[10px] font-normal text-muted-foreground">CLOUD VOICE</span></p><p className="mt-1 flex items-center gap-2 text-xs text-muted-foreground"><AudioLines className={`h-3 w-3 ${active ? "motion-safe:animate-pulse text-primary" : ""}`} />{voice.status === "connecting" ? "Connecting…" : voice.status === "connected" ? voice.muted ? "Microphone muted" : voice.phase === "speaking" ? "Stratus speaking" : "Listening" : "Your cloud, in conversation"}</p></div></div><div className="flex gap-2">{active ? <><Button size="icon" variant="outline" title={voice.muted ? "Unmute microphone" : "Mute microphone"} aria-label={voice.muted ? "Unmute microphone" : "Mute microphone"} onClick={() => voice.setMuted(!voice.muted)}>{voice.muted ? <MicOff /> : <Mic />}</Button><Button variant="destructive" onClick={voice.stop}><PhoneOff />End call</Button></> : <Button disabled={voice.status === "stopping"} onClick={() => void voice.start(String(user?.user_metadata?.["full_name"] ?? "there").slice(0,40))}><Phone />{voice.status === "closed" ? "Call again" : "Talk to Stratus"}</Button>}</div></div>
    {voice.error && <p role="alert" className="mt-3 text-sm text-destructive">{voice.error}</p>}
    {transcript.length > 0 && <div className="mt-4 grid max-h-44 gap-3 overflow-auto border-t border-border pt-4" aria-live="polite">{transcript.map((m,i) => <p key={i} className="break-words text-sm"><span className="mr-2 text-primary">{m.role}</span>{m.text}</p>)}</div>}
  </section>;
}