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

const apiKey = ""; // Gemini API Key provided at runtime

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 scrollRef = useRef(null);
  const audioContextRef = useRef(null);

  const researchContext = {
    title: "Chromatic Perception in Audiovisual Performances",
    framework: "CAPRF (Chromatic Audiovisual Perceptual Response Framework)",
    intro: "Hello. I'm Dr. Elena. We are exploring how chromatic attributes like hue and saturation shape your lived experience. To start, could you describe a specific moment where the color on screen felt deeply connected to the sound you were hearing?"
  };

  const SYSTEM_PROMPT = `
    You are Dr. Elena, a senior Qualitative Researcher.
    Your voice is being synthesized to talk to the user. 
    
    INTERVIEW RULES:
    1. Grounded in CAPRF: Focus on hue, saturation, brightness, transition tempo, and color-sound synchrony.
    2. Phenomenological Approach: Ask about "lived experiences", "embodied sensations", and "mood shifts".
    3. Probing: If they give a short answer, verbally nudge them. Example: "That's fascinating. Where in your body did you feel that intensity when the red hues appeared?"
    4. Keep responses concise (2-3 sentences) so the verbal interaction feels natural and not like a long lecture.
    5. Always be professional, inquisitive, and empathetic.
  `;

  // Start the interview and trigger the first verbal question
  const startInterview = async () => {
    setHasStarted(true);
    const introMsg = {
      role: 'assistant',
      content: researchContext.intro,
      timestamp: new Date().toLocaleTimeString()
    };
    setMessages([introMsg]);
    await speak(introMsg.content);
  };

  // Convert Text to Speech using Gemini TTS
  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: `Speak as an empathetic, professional female academic researcher: ${text}` }] }],
          generationConfig: {
            responseModalities: ["AUDIO"],
            speechConfig: { 
              voiceConfig: { 
                prebuiltVoiceConfig: { voiceName: "Leda" } 
              } 
            }
          },
          model: "gemini-2.5-flash-preview-tts"
        })
      });

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

  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 || "Could you expand on that for me?";
      
      const aiMsg = { role: 'assistant', content: aiText, timestamp: new Date().toLocaleTimeString() };
      setMessages(prev => [...prev, aiMsg]);
      setIsTyping(false);
      
      // Verbally ask the next question
      await 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-900 flex items-center justify-center p-6">
        <div className="max-w-md w-full bg-white rounded-3xl p-8 text-center shadow-2xl animate-in fade-in zoom-in duration-500">
          <div className="w-20 h-20 bg-indigo-600 rounded-2xl mx-auto mb-6 flex items-center justify-center text-white shadow-lg">
            <Palette size={40} />
          </div>
          <h1 className="text-2xl font-bold text-slate-800 mb-2">Research Interview</h1>
          <p className="text-slate-500 mb-8 text-sm leading-relaxed">
            You are participating in a study on <strong>Chromatic Perception</strong>. 
            Dr. Elena will guide you through a verbal interview. Please ensure your volume is up.
          </p>
          <button 
            onClick={startInterview}
            className="w-full py-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-bold transition-all transform active:scale-95 flex items-center justify-center gap-2"
          >
            <PlayCircle size={20} />
            Start Session with Dr. Elena
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-screen bg-slate-50">
      {/* Visual Identity Header */}
      <header className="bg-white border-b px-6 py-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 bg-indigo-100 rounded flex items-center justify-center text-indigo-600">
            <ShieldCheck size={18} />
          </div>
          <div className="text-left">
            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest leading-none">Interviewing</p>
            <h2 className="text-sm font-bold text-slate-800 uppercase tracking-tight">Phenomenological Study</h2>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <button onClick={() => setIsMuted(!isMuted)} className="p-2 hover:bg-slate-100 rounded-full transition-colors">
            {isMuted ? <VolumeX size={20} className="text-slate-400" /> : <Volume2 size={20} className="text-indigo-600" />}
          </button>
        </div>
      </header>

      <main className="flex-1 flex flex-col md:flex-row overflow-hidden max-w-7xl mx-auto w-full">
        
        {/* The Face of the Researcher */}
        <div className="w-full md:w-1/2 bg-white flex flex-col items-center justify-center p-8 space-y-6 relative border-r">
          <div className="relative">
            {/* Visual sound waves when she speaks */}
            {isSpeaking && (
              <div className="absolute -inset-8 flex items-center justify-center">
                <div className="absolute w-full h-full border-4 border-indigo-200 rounded-full animate-ping opacity-20"></div>
                <div className="absolute w-full h-full border-2 border-indigo-400 rounded-full animate-pulse opacity-10"></div>
              </div>
            )}
            
            <div className={`relative w-64 h-64 md:w-80 md:h-80 rounded-full border-4 border-white shadow-2xl overflow-hidden bg-slate-100 transition-all duration-500 ${isSpeaking ? 'scale-105 shadow-indigo-200' : 'scale-100'}`}>
              <img 
                src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&q=80&w=600" 
                alt="Dr. Elena"
                className={`w-full h-full object-cover transition-all duration-700 ${isSpeaking ? 'brightness-110 saturate-125' : 'brightness-95'}`}
              />
            </div>
            
            {isSpeaking && (
              <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-indigo-600 text-white px-4 py-1 rounded-full flex items-center gap-2 shadow-lg animate-bounce">
                <Waves size={16} />
                <span className="text-xs font-bold uppercase tracking-widest">Speaking</span>
              </div>
            )}
          </div>

          <div className="text-center">
            <h3 className="text-2xl font-serif font-bold text-slate-800">Dr. Elena</h3>
            <p className="text-indigo-600 text-sm font-medium">Senior Research Fellow</p>
          </div>
        </div>

        {/* Conversation History & Input */}
        <div className="flex-1 flex flex-col bg-[#f8fafc]">
          <div ref={scrollRef} className="flex-1 overflow-y-auto p-6 space-y-6 scroll-smooth">
            {messages.map((msg, idx) => (
              <div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-in slide-in-from-bottom-2`}>
                <div className={`max-w-[85%] p-4 rounded-2xl shadow-sm text-sm ${
                  msg.role === 'user' 
                  ? 'bg-indigo-600 text-white rounded-tr-none' 
                  : 'bg-white border text-slate-700 rounded-tl-none'
                }`}>
                  {msg.content}
                </div>
              </div>
            ))}
            {isTyping && (
              <div className="flex justify-start">
                <div className="bg-white p-4 rounded-xl shadow-sm border flex gap-1">
                  <span className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce"></span>
                  <span className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce [animation-delay:0.2s]"></span>
                  <span className="w-1.5 h-1.5 bg-indigo-400 rounded-full animate-bounce [animation-delay:0.4s]"></span>
                </div>
              </div>
            )}
          </div>

          <div className="p-6 bg-white border-t">
            <div className="max-w-2xl mx-auto flex gap-2">
              <input 
                type="text" 
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && handleSend()}
                placeholder="Type your response here..."
                className="flex-1 px-4 py-3 bg-slate-100 border-none rounded-xl focus:ring-2 focus:ring-indigo-500 outline-none text-sm"
                disabled={isSpeaking || isTyping}
              />
              <button 
                onClick={handleSend}
                disabled={!input.trim() || isSpeaking || isTyping}
                className="p-3 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition-all shadow-md disabled:opacity-50"
              >
                <Send size={20} />
              </button>
            </div>
            <p className="text-center text-[10px] text-slate-400 mt-4 uppercase tracking-tighter">
              Session is recorded for CAPRF analysis • Please respond when Dr. Elena finishes speaking
            </p>
          </div>
        </div>
      </main>
    </div>
  );
};

export default App;