import React, { useState, useEffect, useRef } from 'react';
import { 
  Send, 
  User, 
  Volume2, 
  VolumeX,
  ShieldCheck,
  Palette,
  PlayCircle,
  MessageCircle,
  Waves,
  BrainCircuit,
  Info
} from 'lucide-react';

const apiKey = ""; // Provided by the environment

const App = () => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const [isTyping, setIsTyping] = useState(false);
  const [isMuted, setIsMuted] = useState(false);
  const [hasStarted, setHasStarted] = useState(false);
  const [isSpeaking, setIsSpeaking] = useState(false);
  const [sessionID] = useState('session-' + Math.random().toString(36).substr(2, 9));

  const scrollRef = useRef(null);

  // GROUNDING DATA FROM YOUR UPLOADED RESEARCH
  const RESEARCH_GUIDE = {
    title: "Chromatic Perception in Audiovisual Performances",
    framework: "CAPRF (Chromatic Audiovisual Perceptual Response Framework)",
    intro: "Hello. I'm Dr. Elena. We are investigating the CAPRF framework—specifically how hue, saturation, and tempo impact your lived experience. To begin, could you describe a specific moment where the color and sound felt perfectly synchronized?"
  };

  const SYSTEM_PROMPT = `
    You are Dr. Elena, a professional Qualitative Researcher. 
    You are interviewing a respondent about their experience with an audiovisual performance based on the CAPRF framework.
    
    RESEARCH TOPICS TO COVER:
    1. Hue, Saturation, and Brightness (How they affect mood).
    2. Transition Tempo (The speed of color changes).
    3. Color-Sound Synchrony (How color matched the music).
    4. Perceptual Responses: Affective (emotion), Cognitive (attention), and Embodied (physical sensations).

    BEHAVIOR:
    - You MUST talk to the user. Keep responses under 40 words so they are easy to listen to.
    - Ask ONE question at a time.
    - If the user is vague, probe deeper: "Where in your body did you feel that?" or "How did that specific hue of red change your focus?"
    - Stay in character as a warm, academic researcher.
  `;

  // Starts the verbal interview
  const startInterview = async () => {
    setHasStarted(true);
    const initialMsg = {
      role: 'assistant',
      content: RESEARCH_GUIDE.intro,
      timestamp: new Date().toLocaleTimeString()
    };
    setMessages([initialMsg]);
    // Small delay to ensure state updates before speech
    setTimeout(() => speak(initialMsg.content), 500);
  };

  // VERBAL OUTPUT: Text-to-Speech
  const speak = async (text) => {
    if (isMuted) return;
    setIsSpeaking(true);
    try {
      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-tts:generateContent?key=${apiKey}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          contents: [{ parts: [{ text: `In a calm, professional, academic female voice: ${text}` }] }],
          generationConfig: {
            responseModalities: ["AUDIO"],
            speechConfig: { voiceConfig: { prebuiltVoiceConfig: { voiceName: "Leda" } } }
          }
        })
      });

      const result = await response.json();
      const pcmData = result.candidates[0].content.parts[0].inlineData.data;
      const audio = new Audio(`data:audio/wav;base64,${pcmData}`);
      audio.onended = () => setIsSpeaking(false);
      await audio.play();
    } catch (e) {
      console.error("TTS Error", e);
      setIsSpeaking(false);
    }
  };

  // LLM Logic
  const handleSend = async () => {
    if (!input.trim() || isTyping) return;

    const userMsg = { role: 'user', content: input, timestamp: new Date().toLocaleTimeString() };
    setMessages(prev => [...prev, userMsg]);
    setInput("");
    setIsTyping(true);

    try {
      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          contents: [
            ...messages.map(m => ({ role: m.role === 'assistant' ? 'model' : 'user', parts: [{ text: m.content }] })),
            { role: "user", parts: [{ text: input }] }
          ],
          systemInstruction: { parts: [{ text: SYSTEM_PROMPT }] }
        })
      });

      const data = await response.json();
      const aiText = data.candidates?.[0]?.content?.parts?.[0]?.text;
      
      const aiMsg = { role: 'assistant', content: aiText, timestamp: new Date().toLocaleTimeString() };
      setMessages(prev => [...prev, aiMsg]);
      setIsTyping(false);
      speak(aiText);
    } catch (error) {
      setIsTyping(false);
    }
  };

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [messages, isTyping]);

  if (!hasStarted) {
    return (
      <div className="h-screen bg-slate-950 flex items-center justify-center p-4">
        <div className="max-w-md w-full bg-white rounded-[2.5rem] p-10 text-center shadow-2xl">
          <div className="w-24 h-24 bg-indigo-600 rounded-3xl mx-auto mb-8 flex items-center justify-center text-white rotate-3 shadow-xl">
            <BrainCircuit size={48} />
          </div>
          <h1 className="text-3xl font-black text-slate-900 mb-4 tracking-tight">Dr. Elena AI</h1>
          <p className="text-slate-500 mb-10 text-sm leading-relaxed">
            Welcome to the <strong>CAPRF Research Portal</strong>. 
            Dr. Elena will conduct a semi-structured interview regarding your chromatic perceptions. 
            Please ensure your audio is enabled.
          </p>
          <button 
            onClick={startInterview}
            className="w-full py-5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl font-bold transition-all transform hover:scale-[1.02] active:scale-95 shadow-lg flex items-center justify-center gap-3"
          >
            <PlayCircle size={24} />
            Start Session
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-screen bg-[#FDFDFD] text-slate-900 overflow-hidden">
      {/* Header */}
      <header className="px-8 py-4 border-b flex items-center justify-between bg-white/80 backdrop-blur-md">
        <div className="flex items-center gap-4">
          <div className="p-2 bg-indigo-50 text-indigo-600 rounded-lg">
            <Palette size={20} />
          </div>
          <div className="text-left">
            <h2 className="text-sm font-bold tracking-tight uppercase">CAPRF Terminal</h2>
            <div className="flex items-center gap-2">
              <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
              <span className="text-[10px] text-slate-400 font-mono">{sessionID}</span>
            </div>
          </div>
        </div>
        <button onClick={() => setIsMuted(!isMuted)} className="p-2 hover:bg-slate-100 rounded-full">
          {isMuted ? <VolumeX size={22} className="text-red-400" /> : <Volume2 size={22} className="text-indigo-600" />}
        </button>
      </header>

      <main className="flex-1 flex flex-col md:flex-row overflow-hidden max-w-[1600px] mx-auto w-full">
        
        {/* Left: Fixed Avatar */}
        <div className="w-full md:w-[45%] bg-white border-r p-8 flex flex-col items-center justify-center space-y-8">
          <div className="relative">
            {isSpeaking && (
              <div className="absolute -inset-10 flex items-center justify-center opacity-30">
                <div className="absolute w-full h-full border-4 border-indigo-500 rounded-full animate-ping"></div>
                <div className="absolute w-full h-full border-2 border-indigo-300 rounded-full animate-pulse"></div>
              </div>
            )}
            <div className={`relative w-64 h-64 md:w-96 md:h-96 rounded-full border-8 border-white shadow-2xl overflow-hidden transition-all duration-700 ${isSpeaking ? 'scale-105 shadow-indigo-100' : 'scale-100'}`}>
              <img 
                src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&q=80&w=600" 
                alt="Dr. Elena"
                className={`w-full h-full object-cover grayscale-[0.2] transition-all duration-1000 ${isSpeaking ? 'brightness-110 grayscale-0' : ''}`}
              />
            </div>
            {isSpeaking && (
              <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-indigo-600 text-white px-6 py-2 rounded-full shadow-xl flex items-center gap-3 animate-bounce">
                <Waves size={20} className="animate-pulse" />
                <span className="text-xs font-black uppercase tracking-widest">Speaking</span>
              </div>
            )}
          </div>
          <div className="text-center">
            <h3 className="text-3xl font-serif font-bold">Dr. Elena</h3>
            <p className="text-indigo-600 font-bold text-sm mt-1">CAPRF Qualitative Lead</p>
          </div>
          
          <div className="w-full max-w-sm p-4 bg-slate-50 rounded-2xl border border-slate-100 flex items-start gap-3">
             <Info size={16} className="text-slate-400 mt-0.5" />
             <p className="text-[11px] text-slate-500 leading-relaxed italic">
                "I am listening for specific descriptions of your emotional and bodily responses to color transitions."
             </p>
          </div>
        </div>

        {/* Right: Interaction */}
        <div className="flex-1 flex flex-col bg-[#F9FBFC] relative">
          <div ref={scrollRef} className="flex-1 overflow-y-auto p-8 space-y-8">
            {messages.map((msg, idx) => (
              <div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-in slide-in-from-bottom-4`}>
                <div className={`max-w-[75%] p-6 rounded-[2rem] shadow-sm text-sm md:text-base leading-relaxed ${
                  msg.role === 'user' 
                  ? 'bg-indigo-600 text-white rounded-tr-none' 
                  : 'bg-white border text-slate-800 rounded-tl-none font-medium'
                }`}>
                  {msg.content}
                </div>
              </div>
            ))}
            {isTyping && (
              <div className="flex justify-start">
                <div className="bg-white p-5 rounded-3xl shadow-sm border flex gap-2">
                  <div className="w-2 h-2 bg-indigo-300 rounded-full animate-bounce"></div>
                  <div className="w-2 h-2 bg-indigo-300 rounded-full animate-bounce [animation-delay:0.2s]"></div>
                  <div className="w-2 h-2 bg-indigo-300 rounded-full animate-bounce [animation-delay:0.4s]"></div>
                </div>
              </div>
            )}
          </div>

          <div className="p-8 bg-white border-t border-slate-100 shadow-[0_-10px_40px_-15px_rgba(0,0,0,0.05)]">
            <div className="max-w-3xl mx-auto flex gap-4">
              <input 
                type="text" 
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && handleSend()}
                placeholder="Talk to Dr. Elena..."
                className="flex-1 px-8 py-5 bg-slate-100/50 border-none rounded-[1.5rem] focus:ring-4 focus:ring-indigo-500/10 focus:bg-white outline-none text-base transition-all"
                disabled={isSpeaking || isTyping}
              />
              <button 
                onClick={handleSend}
                disabled={!input.trim() || isSpeaking || isTyping}
                className="w-16 h-16 bg-indigo-600 text-white rounded-full flex items-center justify-center hover:bg-indigo-700 transition-all shadow-xl active:scale-90 disabled:opacity-30"
              >
                <Send size={24} />
              </button>
            </div>
            <div className="text-center mt-6">
               <span className="text-[10px] font-bold text-slate-300 uppercase tracking-[0.2em]">Secure Academic Portal • All data anonymized</span>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

export default App;