"use client";

import { useEffect, useMemo, useState } from "react";
import { useTheme } from "next-themes";
import { ArrowLeft, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
import FileUploadChat from "@/components/ui/file-upload-and-chat";

// 👉 AQUI você importa o fluxo correto de voz (já testado e funcionando)
import AIVoiceFlow from "@/components/ZoeIA/ai-voice-flow";

export function ChatWidget() {
  const [assistantOpen, setAssistantOpen] = useState(false);
  const [realtimeOpen, setRealtimeOpen] = useState(false);
  const { theme } = useTheme();
  const isDark = theme === "dark";

  useEffect(() => {
    if (!assistantOpen && !realtimeOpen) return;

    const original = document.body.style.overflow;
    document.body.style.overflow = "hidden";

    return () => {
      document.body.style.overflow = original;
    };
  }, [assistantOpen, realtimeOpen]);

  const gradientRing = useMemo(
    () => (
      <span
        aria-hidden
        className="absolute inset-0 rounded-full bg-linear-to-br from-primary via-sky-500 to-emerald-400 opacity-90 blur-sm transition group-hover:blur group-hover:opacity-100"
      />
    ),
    []
  );

  const openAssistant = () => setAssistantOpen(true);
  const closeAssistant = () => setAssistantOpen(false);

  const openRealtime = () => setRealtimeOpen(true);
  const closeRealtime = () => {
    setRealtimeOpen(false);
    setAssistantOpen(true);
  };

  return (
    <>
      {/* ----------------- ASSISTANT PANEL ----------------- */}
      {assistantOpen && (
        <div
          id="ai-assistant-overlay"
          className={`fixed inset-0 z-100 flex flex-col transition-colors ${isDark ? "bg-slate-950" : "bg-white"}`}
        >
          <div className={`flex items-center justify-between border-b px-4 py-3 shadow-sm transition-colors ${isDark ? "bg-slate-900 border-slate-700" : "bg-white border-gray-200"}`}>
            <Button
              type="button"
              variant="ghost"
              className={`flex items-center gap-2 ${isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-700 hover:bg-slate-100"}`}
              onClick={closeAssistant}
            >
              <ArrowLeft className="h-4 w-4" aria-hidden />
              <span className="text-sm font-semibold">Voltar</span>
            </Button>
          </div>

          <div className="flex-1 overflow-auto">
            <FileUploadChat onOpenVoice={openRealtime} />
          </div>
        </div>
      )}

      {/* ----------------- REALTIME VOICE PANEL ----------------- */}
      {realtimeOpen && (
        <div
          id="ai-realtime-overlay"
          className={`fixed inset-0 z-110 flex flex-col transition-colors ${isDark ? "bg-slate-950" : "bg-white"}`}
        >
          <div className={`flex items-center justify-between border-b px-4 py-3 transition-colors ${isDark ? "bg-slate-900 border-slate-700" : "bg-white border-gray-200"}`}>
            <Button
              type="button"
              variant="ghost"
              className={`flex items-center gap-2 ${isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-700 hover:bg-slate-100"}`}
              onClick={closeRealtime}
            >
              <ArrowLeft className="h-4 w-4" aria-hidden />
              <span className="text-sm">Voltar para a Zoe</span>
            </Button>
          </div>

          {/* 🔥 Aqui entra o AIVoiceFlow COMPLETO */}
          <div className="flex-1 overflow-auto flex items-center justify-center">
            <AIVoiceFlow />
          </div>
        </div>
      )}

      {/* ----------------- FLOATING BUTTON ----------------- */}
      <div className="fixed bottom-6 right-6 z-50 sm:bottom-8 sm:right-8">
        <button
          type="button"
          onClick={openAssistant}
          className="group relative flex h-16 w-16 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
        >
          {gradientRing}
          <span className="relative flex h-16 w-16 items-center justify-center rounded-full bg-background text-primary shadow-[0_12px_30px_rgba(37,99,235,0.25)] ring-1 ring-primary/10 transition group-hover:scale-[1.03] group-active:scale-95">
            <Sparkles className="h-7 w-7" aria-hidden />
          </span>
        </button>
      </div>
    </>
  );
}