import { useRef, useState } from "react";
import { Link } from "@tanstack/react-router";
import { useServerFn } from "@tanstack/react-start";
import { ArrowUpRight, AudioLines, Loader2, Mic, MicOff, Phone, PhoneOff, ShieldCheck } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useGeminiLive } from "@/hooks/use-gemini-live";
import { useAuth } from "@/hooks/use-auth";
import { securityOverview, scanSecuritySite, startAegisLive } from "@/lib/security.functions";
import { publicHostname } from "@/lib/security-policy";

export function AegisVoice({ onRefresh }: { onRefresh: () => Promise<unknown> }) {
  const startSession = useServerFn(startAegisLive);
  const overview = useServerFn(securityOverview);
  const scan = useServerFn(scanSecuritySite);
  const { user } = useAuth();
  const [transcript, setTranscript] = useState<{ role: string; text: string }[]>([]);
  const [pendingScan, setPendingScan] = useState<string | null>(null);
  const [handoff, setHandoff] = useState(false);
  const [scanning, setScanning] = useState(false);
  const [notice, setNotice] = useState<string | null>(null);
  const callVersion = useRef(0);
  const voice = useGeminiLive({
    assistantName: "Aegis", saveCall: false,
    startSession: name => startSession({ data: { name } }),
    onEvent: event => {
      if (event.type === "app.started") { setTranscript([]); setNotice(null); setHandoff(false); setPendingScan(null); }
      if (event.type === "app.closed") { setPendingScan(null); setHandoff(false); }
      if (typeof event["delta"] !== "string") return;
      const delta = event["delta"];
      const role = event.type === "session.input_transcript.delta" ? "You" : event.type === "session.output_transcript.delta" ? "Aegis" : null;
      if (!role) return;
      setTranscript(previous => {
        const last = previous[previous.length - 1];
        return last?.role === role ? [...previous.slice(0, -1), { role, text: (last.text + delta).slice(-6000) }] : [...previous.slice(-11), { role, text: delta }];
      });
    },
    onToolCall: async call => {
      if (call.name === "get_security_overview") {
        const data = await overview();
        return { cloud: data.cloud, external: data.external.map(site => ({ hostname: site.hostname, verified: Boolean(site.verified_at) })), reports: data.reports.slice(0, 3), edge: data.edge, enforcement: "Read-only monitoring, no protection changes performed." };
      }
      if (call.name === "request_security_scan") {
        if (typeof call.args?.["hostname"] !== "string") return { error: "A public domain is required." };
        const hostname = publicHostname(call.args["hostname"]);
        setPendingScan(hostname);
        return { awaitingApproval: true, hostname, message: "The caller must approve this domain on screen before a public Observatory scan runs." };
      }
      if (call.name === "request_echo_handoff") {
        setHandoff(true);
        return { awaitingApproval: true, message: "Echo has NOT opened. Ask the caller to approve on screen." };
      }
      return { error: "Aegis cannot perform that action." };
    },
  });
  const active = voice.status === "connecting" || voice.status === "connected";
  const end = () => { callVersion.current += 1; setPendingScan(null); setHandoff(false); voice.stop(); };
  const approveScan = async () => {
    if (!pendingScan || scanning || !active) return;
    const hostname = pendingScan, version = callVersion.current;
    setPendingScan(null); setScanning(true); setNotice(null);
    try {
      const report = await scan({ data: { hostname, publicScanConsent: true } });
      await onRefresh();
      if (callVersion.current !== version) return;
      const summary = `${report.hostname}: header grade ${report.grade}, ${report.failed} failed checks. Observed ${report.scannedAt}. This is not a guarantee of safety.`;
      setNotice(summary);
      voice.reportTest(`Approved security scan result: ${summary} Findings: ${report.findings.filter(f => !f.pass).map(f => `${f.name}: ${f.advice}`).join("; ")}`);
    } catch (error) {
      if (callVersion.current !== version) return;
      const message = error instanceof Error ? error.message : "The scan could not complete.";
      setNotice(message); voice.reportTest(`The approved scan failed: ${message}. Do not claim success.`);
    } finally { setScanning(false); }
  };
  return <section className="border-b border-border p-4" aria-label="Aegis voice call">
    <div className="flex min-h-10 items-center justify-between gap-2">
      <span className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground"><AudioLines className={`h-4 w-4 shrink-0 text-security ${active ? "motion-safe:animate-pulse" : ""}`} />{voice.status === "connecting" ? "Connecting…" : voice.status === "connected" ? voice.muted ? "Microphone muted" : voice.phase === "speaking" ? "Aegis speaking" : "Listening" : voice.status === "stopping" ? "Ending call…" : "Voice with Aegis"}</span>
      <div className="flex shrink-0 gap-1">
        {active ? <><Button size="icon" variant="ghost" aria-label={voice.muted ? "Unmute Aegis microphone" : "Mute Aegis microphone"} title={voice.muted ? "Unmute microphone" : "Mute microphone"} onClick={() => voice.setMuted(!voice.muted)}>{voice.muted ? <MicOff /> : <Mic />}</Button><Button size="icon" variant="destructive" aria-label="End Aegis call" title="End call" onClick={end}><PhoneOff /></Button></> : <Button size="sm" variant="outline" disabled={voice.status === "stopping"} onClick={() => { callVersion.current += 1; void voice.start(String(user?.user_metadata?.["full_name"] ?? "there").slice(0, 40)); }}><Phone />{voice.status === "closed" ? "Call again" : "Call Aegis"}</Button>}
      </div>
    </div>
    {voice.error && <p role="alert" className="mt-3 text-xs text-security-warning">{voice.error}</p>}
    {transcript.length > 0 && <div className="mt-3 max-h-48 space-y-3 overflow-y-auto border-t border-border pt-3" aria-label="Voice transcript" aria-live="polite">{transcript.map((message, index) => <div key={index}><p className="font-mono text-[10px] uppercase text-security">{message.role}</p><p className="mt-1 whitespace-pre-wrap break-words text-xs leading-relaxed">{message.text}</p></div>)}</div>}
    {pendingScan && active && <div className="mt-3 space-y-3 border-t border-border pt-3"><p className="break-words text-xs">Scan <strong>{pendingScan}</strong> with Mozilla Observatory? The domain and scan results will be public and may be cached.</p><div className="flex flex-wrap gap-2"><Button size="sm" onClick={() => void approveScan()}><ShieldCheck />Approve scan</Button><Button size="sm" variant="ghost" onClick={() => { setPendingScan(null); voice.reportTest("The caller declined the public scan. Do not scan."); }}>Cancel</Button></div></div>}
    {scanning && <p className="mt-3 flex items-center gap-2 text-xs text-muted-foreground"><Loader2 className="h-3 w-3 animate-spin" />Scanning approved domain…</p>}
    {notice && <p role="status" className="mt-3 break-words text-xs text-muted-foreground">{notice}</p>}
    {handoff && active && <div className="mt-3 space-y-2 border-t border-border pt-3"><p className="text-xs">Continue with Echo? Your Aegis call will end.</p><div className="flex flex-wrap gap-2"><Button asChild size="sm"><Link to="/echo" onClick={end}>Yes, open Echo<ArrowUpRight /></Link></Button><Button size="sm" variant="ghost" onClick={() => { setHandoff(false); voice.reportTest("The caller chose to stay with Aegis. Do not open Echo."); }}>Stay here</Button></div></div>}
  </section>;
}