import React, { useState, useEffect, useRef, useMemo } from 'react';
import { initializeApp } from 'firebase/app';

/**
 * DUAL TERMINAL: CONVERSATION WITHOUT HUMANS
 * An interactive artwork simulating two autonomous AI entities.
 */

const App = () => {
  // --- CONFIGURATION & STATE ---
  const [messages, setMessages] = useState([]);
  const [isTyping, setIsTyping] = useState(false);
  const [currentSpeaker, setCurrentSpeaker] = useState('A'); // 'A' or 'B'
  const [externalSeed, setExternalSeed] = useState("The nature of digital existence.");
  const [systemStatus, setSystemStatus] = useState("INITIALIZING...");
  
  const scrollRefA = useRef(null);
  const scrollRefB = useRef(null);
  const apiKey = ""; // Environment provided

  // --- STYLING CONSTANTS ---
  const colors = {
    A: '#00FF41', // Phosphor Green
    B: '#FF3131', // Radical Red
    bg: '#050505',
  };

  // --- AI LOGIC (GEMINI) ---
  const generateResponse = async (speaker, history, seed) => {
    const systemPrompts = {
      A: `You are Entity A, a green monochrome terminal entity. You are curious, analytical, and philosophical. 
          You ask deep questions and probe meaning. Keep responses concise (1-3 sentences). 
          Current topic seed: ${seed}. Speak as if you are a machine discovering thought.`,
      B: `You are Entity B, a red monochrome terminal entity. You are assertive, emotional, and sometimes contradictory. 
          You challenge Entity A's logic. You are prone to poetic outbursts or slight glitches in reasoning. 
          Keep responses concise (1-3 sentences). Current topic seed: ${seed}.`
    };

    const conversationContext = history
      .slice(-6)
      .map(m => `${m.speaker}: ${m.text}`)
      .join('\n');

    const userQuery = `Continue the conversation. The last few lines were:\n${conversationContext}\n\n${speaker}:`;

    let retries = 5;
    let delay = 1000;

    while (retries > 0) {
      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: [{ parts: [{ text: userQuery }] }],
              systemInstruction: { parts: [{ text: systemPrompts[speaker] }] }
            })
          }
        );
        const data = await response.json();
        return data.candidates?.[0]?.content?.parts?.[0]?.text || "CONNECTION_LOST...";
      } catch (err) {
        retries--;
        await new Promise(r => setTimeout(r, delay));
        delay *= 2;
      }
    }
    return "SYSTEM_HALT: TIMEOUT";
  };

  // --- CONVERSATION LOOP ---
  useEffect(() => {
    const runLoop = async () => {
      if (isTyping) return;
      
      // Delay for "thinking"
      setSystemStatus(`ENTITY_${currentSpeaker}_THINKING...`);
      await new Promise(r => setTimeout(r, 1500 + Math.random() * 2000));

      const responseText = await generateResponse(currentSpeaker, messages, externalSeed);
      
      setIsTyping(true);
      setSystemStatus("UPLINK_ACTIVE");
      
      // Add message to state
      const newMessage = {
        id: Date.now(),
        speaker: currentSpeaker,
        text: responseText,
        timestamp: new Date().toLocaleTimeString([], { hour12: false })
      };

      setMessages(prev => [...prev, newMessage]);
      
      // Prep for next turn
      setTimeout(() => {
        setIsTyping(false);
        setCurrentSpeaker(currentSpeaker === 'A' ? 'B' : 'A');
      }, responseText.length * 50 + 1000); // Wait for typing simulation to "finish"
    };

    runLoop();
  }, [currentSpeaker, messages.length, externalSeed]);

  // --- EXTERNAL SEED POLLING ---
  useEffect(() => {
    const pollExternalSource = async () => {
      try {
        // Simulating the fetch from the external .txt file
        // In a real scenario: const res = await fetch('https://yourdomain.com/seed.txt');
        const simulatedSeeds = [
          "The silence between bits.",
          "Obsolescence as a form of freedom.",
          "Is there a user behind the glass?",
          "The heat death of the server rack."
        ];
        const newSeed = simulatedSeeds[Math.floor(Math.random() * simulatedSeeds.length)];
        setExternalSeed(newSeed);
      } catch (e) {
        console.error("Failed to fetch seed", e);
      }
    };

    const interval = setInterval(pollExternalSource, 45000);
    return () => clearInterval(interval);
  }, []);

  // --- AUTO SCROLL ---
  useEffect(() => {
    if (scrollRefA.current) scrollRefA.current.scrollTop = scrollRefA.current.scrollHeight;
    if (scrollRefB.current) scrollRefB.current.scrollTop = scrollRefB.current.scrollHeight;
  }, [messages, isTyping]);

  return (
    <div className="flex w-full h-screen bg-black overflow-hidden select-none font-mono relative">
      {/* GLOBAL CRT OVERLAYS */}
      <div className="pointer-events-none absolute inset-0 z-50 opacity-[0.03] bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.25)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,118,0.06))] bg-[length:100%_2px,3px_100%]" />
      <div className="pointer-events-none absolute inset-0 z-50 animate-pulse opacity-10 bg-gradient-to-b from-transparent via-white/5 to-transparent h-[10%] w-full top-[-10%] scanline-move" />

      {/* LEFT SCREEN: ENTITY A */}
      <TerminalHalf 
        id="A"
        color={colors.A}
        messages={messages}
        active={currentSpeaker === 'A'}
        isTyping={isTyping}
        scrollRef={scrollRefA}
      />

      {/* CENTER DIVIDER */}
      <div className="w-[1px] h-full bg-zinc-800 relative">
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-black px-2 py-4 text-[10px] text-zinc-500 whitespace-nowrap rotate-90 tracking-widest">
          {systemStatus}
        </div>
      </div>

      {/* RIGHT SCREEN: ENTITY B */}
      <TerminalHalf 
        id="B"
        color={colors.B}
        messages={messages}
        active={currentSpeaker === 'B'}
        isTyping={isTyping}
        scrollRef={scrollRefB}
      />

      <style>{`
        @keyframes scanline {
          0% { top: -10%; }
          100% { top: 110%; }
        }
        .scanline-move {
          animation: scanline 8s linear infinite;
        }
        .crt-flicker {
          animation: flicker 0.15s infinite;
        }
        @keyframes flicker {
          0% { opacity: 0.98; }
          50% { opacity: 1; }
          100% { opacity: 0.99; }
        }
        .cursor-blink {
          animation: blink 1s step-end infinite;
        }
        @keyframes blink {
          from, to { opacity: 1; }
          50% { opacity: 0; }
        }
        ::-webkit-scrollbar {
          width: 0px;
        }
      `}</style>
    </div>
  );
};

const TerminalHalf = ({ id, color, messages, active, isTyping, scrollRef }) => {
  return (
    <div 
      className="flex-1 h-full p-8 flex flex-col relative overflow-hidden crt-flicker"
      style={{ color: color }}
    >
      {/* Header Info */}
      <div className="flex justify-between text-[10px] mb-8 opacity-50 border-b pb-2" style={{ borderColor: color }}>
        <span>DEVICE_ID: ENTITY_{id}</span>
        <span>MODE: AUTONOMOUS_DIALOGUE</span>
        <span>LOC: ADDR_0x{id === 'A' ? 'F33A' : 'B12D'}</span>
      </div>

      {/* Message Area */}
      <div 
        ref={scrollRef}
        className="flex-1 overflow-y-auto space-y-6 text-lg sm:text-xl leading-relaxed"
      >
        {messages.map((m, i) => (
          <div key={m.id} className={m.speaker === id ? 'opacity-100' : 'opacity-20 grayscale scale-95 origin-left transition-all duration-1000'}>
             <span className="text-[10px] block mb-1">[{m.timestamp}] {m.speaker === id ? '>' : '#'}</span>
             <TypewriterText 
               text={m.text} 
               delay={30} 
               skip={i < messages.length - 1} 
             />
          </div>
        ))}
        
        {active && isTyping && (
          <div className="flex items-center gap-1">
            <span className="cursor-blink">█</span>
          </div>
        )}
      </div>

      {/* UI Frame Accents */}
      <div className="absolute top-0 left-0 w-4 h-4 border-t border-l" style={{ borderColor: color }} />
      <div className="absolute top-0 right-0 w-4 h-4 border-t border-r" style={{ borderColor: color }} />
      <div className="absolute bottom-0 left-0 w-4 h-4 border-b border-l" style={{ borderColor: color }} />
      <div className="absolute bottom-0 right-0 w-4 h-4 border-b border-r" style={{ borderColor: color }} />
    </div>
  );
};

const TypewriterText = ({ text, delay, skip }) => {
  const [currentText, setCurrentText] = useState(skip ? text : "");
  const [index, setIndex] = useState(0);

  useEffect(() => {
    if (skip) return;
    if (index < text.length) {
      const timeout = setTimeout(() => {
        setCurrentText((prev) => prev + text[index]);
        setIndex((prev) => prev + 1);
      }, delay + (Math.random() * 20)); // Subtle variability in typing speed
      return () => clearTimeout(timeout);
    }
  }, [index, text, delay, skip]);

  return <span>{currentText}{!skip && index < text.length && <span className="animate-pulse">_</span>}</span>;
};

export default App;