App.tsx

import React, { useState, useEffect, useRef } from 'react';
import { 
  Color, 
  ColorCode, 
  GameMode, 
  GameStatus, 
  RowData 
} from './types';
import { 
  COLORS, 
  CODE_LENGTH, 
  MAX_GUESSES 
} from './constants';
import { 
  generateSecretCode, 
  calculateFeedback, 
  encodeGame, 
  decodeGame 
} from './services/gameLogic';
import { getAiCommentary, getAiGuess } from './services/geminiService';
import { Row } from './components/Row';
import { ColorPicker } from './components/ColorPicker';
import { Peg } from './components/Peg';
import { Tutorial } from './components/Tutorial';
import { FeedbackInput } from './components/FeedbackInput';
import { 
  Users, 
  Globe2, 
  Cpu, 
  Share2, 
  RotateCcw, 
  Copy, 
  CheckCircle2, 
  Play,
  HelpCircle,
  Eye,
  EyeOff
} from 'lucide-react';

const App = () => {
  // --- State ---
  const [mode, setMode] = useState<GameMode | null>(null);
  const [status, setStatus] = useState<GameStatus>(GameStatus.SETUP);
  const [secretCode, setSecretCode] = useState<ColorCode>([]);
  const [guesses, setGuesses] = useState<RowData[]>([]);
  const [currentGuess, setCurrentGuess] = useState<ColorCode>(Array(CODE_LENGTH).fill(null));
  const [activeSlot, setActiveSlot] = useState<number>(0);
  const [aiComment, setAiComment] = useState<string>("");
  const [isAiThinking, setIsAiThinking] = useState<boolean>(false);
  const [shareCode, setShareCode] = useState<string>("");
  const [inputCode, setInputCode] = useState<string>("");
  const [showSecret, setShowSecret] = useState<boolean>(false);
  
  // New State for requested features
  const [showTutorial, setShowTutorial] = useState<boolean>(false);
  const [manualFeedbackMode, setManualFeedbackMode] = useState<boolean>(false);
  
  // Helper refs for auto-scrolling
  const bottomRef = useRef<HTMLDivElement>(null);

  // --- Effects ---

  useEffect(() => {
    // Show tutorial on first visit
    const visited = localStorage.getItem('chroma_visited');
    if (!visited) {
      setShowTutorial(true);
      localStorage.setItem('chroma_visited', 'true');
    }
  }, []);

  useEffect(() => {
    if ((status === GameStatus.PLAYING || status === GameStatus.JUDGING) && bottomRef.current) {
      setTimeout(() => {
          bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
      }, 100);
    }
  }, [guesses, status, activeSlot]);

  // --- Actions ---

  const startSinglePlayer = () => {
    setMode(GameMode.SINGLE_PLAYER);
    setManualFeedbackMode(false);
    const secret = generateSecretCode(COLORS, CODE_LENGTH);
    setSecretCode(secret);
    setStatus(GameStatus.PLAYING);
    setGuesses([]);
    setCurrentGuess(Array(CODE_LENGTH).fill(null));
    setActiveSlot(0);
    setAiComment("I've hidden the code in the digital void. Good luck.");
  };

  const startLocalMultiplayer = (manualJudge: boolean) => {
    setMode(GameMode.TWO_PLAYER_LOCAL);
    setManualFeedbackMode(manualJudge);
    setStatus(GameStatus.SETUP); // Player 1 needs to set code
    setGuesses([]);
    setCurrentGuess(Array(CODE_LENGTH).fill(null));
    setActiveSlot(0);
    setAiComment("");
  };

  const startRemoteGame = () => {
    if (!inputCode) return;
    const decoded = decodeGame(inputCode);
    if (decoded && decoded.length === CODE_LENGTH) {
      setMode(GameMode.TWO_PLAYER_REMOTE);
      setManualFeedbackMode(false);
      setSecretCode(decoded);
      setStatus(GameStatus.PLAYING);
      setGuesses([]);
      setCurrentGuess(Array(CODE_LENGTH).fill(null));
      setActiveSlot(0);
      setAiComment("Challenger code accepted. Prove your worth.");
    } else {
      alert("Invalid Game Code!");
    }
  };

  const startAiGuesser = () => {
    setMode(GameMode.AI_GUESSER);
    setManualFeedbackMode(false);
    setStatus(GameStatus.SETUP); // User sets code
    setGuesses([]);
    setCurrentGuess(Array(CODE_LENGTH).fill(null));
    setActiveSlot(0);
  };

  const handleColorSelect = (color: Color) => {
    const newGuess = [...currentGuess];
    newGuess[activeSlot] = color;
    setCurrentGuess(newGuess);

    // Auto-advance slot
    if (activeSlot < CODE_LENGTH - 1) {
      setActiveSlot(activeSlot + 1);
    }
  };

  const handleSlotClick = (index: number) => {
    setActiveSlot(index);
  };

  const submitSecretCode = async () => {
    if (currentGuess.some(c => c === null)) return;
    
    setSecretCode(currentGuess as ColorCode);
    
    if (mode === GameMode.TWO_PLAYER_LOCAL) {
      // Clear screen for Player 2
      setCurrentGuess(Array(CODE_LENGTH).fill(null));
      setActiveSlot(0);
      setStatus(GameStatus.PLAYING);
      setAiComment(manualFeedbackMode 
        ? "Code locked. Player 2 guesses, Player 1 judges." 
        : "Code locked. Player 2, start guessing!");
    } else if (mode === GameMode.AI_GUESSER) {
      setStatus(GameStatus.PLAYING);
      setGuesses([]);
      triggerAiTurn([], currentGuess as ColorCode);
    } else {
      const code = encodeGame(currentGuess as ColorCode);
      setShareCode(code);
    }
  };

  const triggerAiTurn = async (currentHistory: RowData[], secret: ColorCode) => {
    setIsAiThinking(true);
    const guess = await getAiGuess(currentHistory, COLORS, CODE_LENGTH);
    setIsAiThinking(false);

    if (guess) {
       const feedback = calculateFeedback(secret, guess);
       const newHistory = [...currentHistory, { guess, feedback }];
       setGuesses(newHistory);

       if (feedback.exact === CODE_LENGTH) {
         setStatus(GameStatus.LOST);
         setAiComment("I have calculated the solution. Human effort was futile.");
         setShowSecret(true);
       } else if (newHistory.length >= MAX_GUESSES) {
         setStatus(GameStatus.WON);
         setAiComment("Computation limit reached. You win this round.");
         setShowSecret(true);
       } else {
         setTimeout(() => triggerAiTurn(newHistory, secret), 1500);
       }
    } else {
      setAiComment("My algorithms are stumped. I yield.");
      setStatus(GameStatus.WON);
    }
  };

  const submitGuess = async () => {
    if (currentGuess.some(c => c === null)) return;

    // Local Multiplayer Manual Judge Mode
    if (mode === GameMode.TWO_PLAYER_LOCAL && manualFeedbackMode) {
      // Instead of calculating, we freeze and ask Player 1 to judge
      setStatus(GameStatus.JUDGING);
      return; 
    }

    // Standard Auto-Judge Mode
    const guess = currentGuess as ColorCode;
    const feedback = calculateFeedback(secretCode, guess);
    
    processTurnResult(guess, feedback);
  };

  // Called after Manual Judgement or Auto Judgement
  const processTurnResult = async (guess: ColorCode, feedback: { exact: number, partial: number }) => {
    const newGuesses = [...guesses, { guess, feedback }];
    setGuesses(newGuesses);
    
    if (feedback.exact === CODE_LENGTH) {
      setStatus(GameStatus.WON);
      setShowSecret(true);
      if (mode === GameMode.SINGLE_PLAYER) {
         const comment = await getAiCommentary(guess, feedback, newGuesses, true);
         setAiComment(comment);
      } else {
        setAiComment("Decryption Successful. Access Granted.");
      }
    } else if (newGuesses.length >= MAX_GUESSES) {
      setStatus(GameStatus.LOST);
      setShowSecret(true);
      if (mode === GameMode.SINGLE_PLAYER) {
        const comment = await getAiCommentary(guess, feedback, newGuesses, false);
        setAiComment(comment);
      } else {
        setAiComment("Maximum attempts exceeded. System Locked.");
      }
    } else {
      // Next turn
      setStatus(GameStatus.PLAYING);
      setCurrentGuess(Array(CODE_LENGTH).fill(null));
      setActiveSlot(0);
      
      if (mode === GameMode.SINGLE_PLAYER) {
        getAiCommentary(guess, feedback, newGuesses, false).then(setAiComment);
      }
    }
  };

  const handleManualFeedbackSubmit = (exact: number, partial: number) => {
    processTurnResult(currentGuess as ColorCode, { exact, partial });
  };

  const resetGame = () => {
    setMode(null);
    setStatus(GameStatus.SETUP);
    setGuesses([]);
    setSecretCode([]);
    setShareCode("");
    setShowSecret(false);
    setAiComment("");
    setManualFeedbackMode(false);
  };

  // --- Render Sections ---

  const renderLobby = () => (
    <div className="flex flex-col gap-5 max-w-md w-full mx-auto p-6 animate-fade-in pb-20">
      <div className="text-center mb-6 pt-4">
        <h1 className="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-400 to-cyan-400 mb-2 drop-shadow-[0_0_15px_rgba(129,140,248,0.5)]">
          CHROMA
        </h1>
        <p className="text-slate-400 tracking-widest text-xs uppercase font-bold">Code Breaker Protocol</p>
      </div>

      <button 
        onClick={startSinglePlayer}
        className="group relative flex items-center p-5 bg-gradient-to-r from-slate-800 to-slate-900 rounded-2xl border border-slate-700 hover:border-indigo-500 transition-all shadow-lg hover:shadow-indigo-500/20 active:scale-95"
      >
        <div className="bg-indigo-500/20 p-3 rounded-xl mr-4 group-hover:scale-110 transition-transform">
          <Cpu className="w-8 h-8 text-indigo-400" />
        </div>
        <div className="text-left">
          <h3 className="font-bold text-lg text-slate-100">Solo vs AI</h3>
          <p className="text-xs text-slate-400 mt-1">Challenge Gemini's logic engine.</p>
        </div>
      </button>

      {/* Local MP Container */}
      <div className="bg-slate-800/40 rounded-2xl border border-slate-700/50 p-1">
        <div className="p-4 flex items-center gap-3 border-b border-slate-700/50 mb-1">
           <div className="bg-emerald-500/20 p-2 rounded-lg">
              <Users className="w-6 h-6 text-emerald-400" />
           </div>
           <h3 className="font-bold text-slate-200">Pass & Play</h3>
        </div>
        <div className="grid grid-cols-2 gap-1">
          <button 
            onClick={() => startLocalMultiplayer(false)}
            className="p-3 text-center hover:bg-slate-700/50 rounded-xl transition-colors"
          >
             <div className="text-sm font-bold text-emerald-300">Auto Judge</div>
             <div className="text-[10px] text-slate-500">App gives feedback</div>
          </button>
          <button 
            onClick={() => startLocalMultiplayer(true)}
            className="p-3 text-center hover:bg-slate-700/50 rounded-xl transition-colors"
          >
             <div className="text-sm font-bold text-emerald-300">You Judge</div>
             <div className="text-[10px] text-slate-500">You give feedback</div>
          </button>
        </div>
      </div>

      <div className="bg-slate-800/40 p-5 rounded-2xl border border-slate-700/50">
        <div className="flex items-center gap-3 mb-4">
          <div className="bg-cyan-500/20 p-2 rounded-lg">
            <Globe2 className="w-6 h-6 text-cyan-400" />
          </div>
          <div>
            <h3 className="font-bold text-slate-200">Remote Play</h3>
            <p className="text-xs text-slate-400">Share or join with a code.</p>
          </div>
        </div>
        <div className="flex gap-2">
          <input 
            type="text" 
            value={inputCode}
            onChange={(e) => setInputCode(e.target.value)}
            placeholder="Paste Game Code..."
            className="flex-1 bg-slate-900/80 border border-slate-600 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-cyan-500 transition-colors shadow-inner"
          />
          <button 
            onClick={startRemoteGame}
            disabled={!inputCode}
            className="bg-cyan-600 hover:bg-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed text-white px-5 rounded-xl font-bold transition-all hover:shadow-[0_0_15px_rgba(6,182,212,0.4)]"
          >
            JOIN
          </button>
        </div>
        <div className="mt-4 pt-4 border-t border-slate-700/50">
           <button 
             onClick={() => { setMode(null); setStatus(GameStatus.SETUP); setShareCode("GENERATE"); }}
             className="w-full text-sm text-cyan-400 hover:text-cyan-300 flex items-center justify-center gap-2 py-2 hover:bg-slate-800/50 rounded-lg transition-colors"
           >
             <Share2 className="w-4 h-4" />
             Create Challenge Code
           </button>
        </div>
      </div>
    </div>
  );

  const renderCodeCreator = () => (
    <div className="flex flex-col h-full max-w-md mx-auto w-full p-4 animate-fade-in">
       <div className="flex justify-between items-center mb-6">
        <button onClick={resetGame} className="p-2 bg-slate-800 rounded-full hover:bg-slate-700 transition-colors">
          <RotateCcw className="w-5 h-5 text-slate-400" />
        </button>
        <h2 className="text-lg font-bold tracking-wide uppercase text-slate-300">Set Secret Code</h2>
        <div className="w-9"></div>
      </div>

      <div className="flex-1 flex flex-col items-center pt-10 gap-8">
        <div className="bg-slate-800/80 backdrop-blur-md p-8 rounded-3xl shadow-2xl border border-slate-700/50 w-full relative overflow-hidden">
           {/* Decor */}
           <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-indigo-500 to-transparent opacity-50"></div>

          <p className="text-center text-slate-400 mb-8 uppercase tracking-widest text-xs font-bold">
             Tap slots to fill
          </p>
          <div className="flex justify-center gap-3 mb-8">
             {currentGuess.map((color, i) => (
                <Peg 
                  key={i} 
                  color={color} 
                  onClick={() => handleSlotClick(i)}
                  selected={activeSlot === i}
                  emptyLabel={(i+1).toString()}
                />
             ))}
          </div>
          
          {shareCode === "GENERATE" && !shareCode.length && !inputCode ? (
             <div className="text-center">
                <button 
                  onClick={submitSecretCode}
                  disabled={currentGuess.some(c => c === null)}
                  className="w-full bg-gradient-to-r from-indigo-600 to-blue-600 hover:from-indigo-500 hover:to-blue-500 disabled:opacity-50 disabled:cursor-not-allowed text-white py-4 rounded-xl font-bold text-lg shadow-lg hover:shadow-indigo-500/25 transition-all transform hover:-translate-y-0.5 active:translate-y-0"
                >
                  Confirm Code
                </button>
             </div>
          ) : shareCode && shareCode !== "GENERATE" ? (
             <div className="space-y-6 animate-fade-in">
               <div className="bg-slate-950 p-4 rounded-xl break-all font-mono text-xs text-slate-400 border border-slate-800 relative group">
                 {shareCode}
                 <button 
                    onClick={() => navigator.clipboard.writeText(shareCode)}
                    className="absolute top-2 right-2 p-2 bg-slate-800 rounded hover:bg-slate-700 text-slate-200 opacity-0 group-hover:opacity-100 transition-opacity"
                    title="Copy"
                 >
                   <Copy className="w-4 h-4" />
                 </button>
               </div>
               <div className="flex items-center gap-2 text-emerald-400 text-sm justify-center font-bold">
                 <CheckCircle2 className="w-5 h-5" /> Code Ready! Share it.
               </div>
               <button onClick={resetGame} className="w-full py-3 text-slate-400 hover:text-white border border-slate-700 rounded-xl hover:bg-slate-800 transition-colors">
                 Return to Menu
               </button>
             </div>
          ) : (
            <button 
              onClick={submitSecretCode}
              disabled={currentGuess.some(c => c === null)}
              className="w-full bg-emerald-600 hover:bg-emerald-500 disabled:bg-slate-700 disabled:text-slate-500 text-white py-4 rounded-xl font-bold text-lg shadow-lg transition-all flex items-center justify-center gap-2"
            >
              <Play className="w-5 h-5" /> Start Game
            </button>
          )}

        </div>
      </div>
      
      {/* BUG FIX: Ensure ColorPicker shows if we are actively building the code */}
      {(!shareCode || shareCode === "GENERATE") && (
         <ColorPicker colors={COLORS} onSelect={handleColorSelect} />
      )}
    </div>
  );

  const renderGame = () => (
    <div className="flex flex-col h-full max-w-md mx-auto w-full relative">
      {/* Sticky Header */}
      <div className="flex items-center justify-between p-3 bg-slate-900/80 backdrop-blur-md sticky top-0 z-30 border-b border-slate-800 shadow-sm">
        <button onClick={resetGame} className="p-2 hover:bg-slate-800 rounded-full text-slate-400 hover:text-white transition-colors">
          <RotateCcw className="w-5 h-5" />
        </button>
        <div className="flex flex-col items-center">
           <span className="text-[10px] font-black text-indigo-400 tracking-[0.2em] uppercase">
             {mode === GameMode.AI_GUESSER ? 'AI TURN' : 'YOUR TURN'}
           </span>
           <span className="font-bold text-slate-200">
             Round {guesses.length + 1}/{MAX_GUESSES}
           </span>
        </div>
        <button onClick={() => setShowTutorial(true)} className="p-2 hover:bg-slate-800 rounded-full text-slate-400 hover:text-indigo-400 transition-colors">
          <HelpCircle className="w-5 h-5" />
        </button>
      </div>

      {/* AI Commentary / Status Bar */}
      {aiComment && (
        <div className="px-4 py-3 bg-indigo-500/10 border-b border-indigo-500/20 backdrop-blur-sm animate-slide-down">
          <div className="flex gap-3 items-center justify-center text-center">
            <Cpu className="w-4 h-4 text-indigo-400 shrink-0" />
            <p className="text-sm text-indigo-100 font-medium leading-tight">{aiComment}</p>
          </div>
        </div>
      )}

      {/* Game Board */}
      <div className="flex-1 overflow-y-auto p-4 pb-48 custom-scrollbar">
        <div className="space-y-3 min-h-[50vh]">
          {/* Previous Guesses */}
          {guesses.map((row, idx) => (
            <Row 
              key={idx} 
              guess={row.guess} 
              feedback={row.feedback} 
              length={CODE_LENGTH}
              className="animate-fade-in-up" 
            />
          ))}

          {/* Active Guess Row */}
          {(status === GameStatus.PLAYING || status === GameStatus.JUDGING) && mode !== GameMode.AI_GUESSER && (
            <div ref={bottomRef} className="animate-fade-in-up">
              <div className="text-xs text-slate-500 font-bold uppercase tracking-wider mb-2 pl-2">Current Attempt</div>
              <Row 
                 guess={currentGuess} 
                 isActive={true}
                 length={CODE_LENGTH}
                 onPegClick={status === GameStatus.PLAYING ? handleSlotClick : undefined}
                 activeSlotIndex={status === GameStatus.PLAYING ? activeSlot : null}
              />
            </div>
          )}
          
          {/* AI Thinking */}
          {mode === GameMode.AI_GUESSER && isAiThinking && (
             <div ref={bottomRef} className="p-6 flex flex-col items-center justify-center gap-3 text-slate-400 animate-pulse bg-slate-800/30 rounded-2xl border border-dashed border-slate-700">
               <div className="flex gap-1">
                 <div className="w-2 h-2 bg-indigo-500 rounded-full animate-bounce" style={{animationDelay: '0ms'}}></div>
                 <div className="w-2 h-2 bg-indigo-500 rounded-full animate-bounce" style={{animationDelay: '150ms'}}></div>
                 <div className="w-2 h-2 bg-indigo-500 rounded-full animate-bounce" style={{animationDelay: '300ms'}}></div>
               </div>
               <span className="text-xs font-mono">CALCULATING PROBABILITY...</span>
             </div>
          )}
        </div>

        {/* End Game Overlay (Inline) */}
        {(status === GameStatus.WON || status === GameStatus.LOST) && (
          <div ref={bottomRef} className="mt-8 p-8 bg-slate-800/90 backdrop-blur rounded-3xl border border-slate-600/50 text-center animate-bounce-in shadow-2xl relative overflow-hidden">
            <div className={`absolute inset-0 opacity-20 ${status === GameStatus.WON ? 'bg-green-500' : 'bg-red-500'}`}></div>
            <div className="relative z-10">
              <h2 className={`text-4xl font-black mb-2 ${status === GameStatus.WON ? 'text-green-400 drop-shadow-lg' : 'text-red-400 drop-shadow-lg'}`}>
                {status === GameStatus.WON ? 'CRACKED!' : 'FAILED'}
              </h2>
              <p className="text-slate-300 mb-8 font-medium">
                {status === GameStatus.WON ? 'System security bypassed.' : 'Too many failed attempts.'}
              </p>
              
              <div className="bg-slate-900/80 p-6 rounded-2xl border border-slate-700 mb-8">
                <p className="text-[10px] uppercase text-slate-500 font-bold mb-4 tracking-widest">The Secret Code Was</p>
                <div className="flex justify-center gap-3">
                  {secretCode.map((c, i) => <Peg key={i} color={c} />)}
                </div>
              </div>

              <button 
                onClick={resetGame} 
                className="w-full bg-slate-100 hover:bg-white text-slate-900 py-4 rounded-xl font-black tracking-wide uppercase transition-transform hover:scale-105"
              >
                Reboot System
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Controls & Pickers */}
      
      {/* Manual Feedback Input */}
      {status === GameStatus.JUDGING && (
         <FeedbackInput onSubmit={handleManualFeedbackSubmit} guess={guesses[guesses.length]?.guess || currentGuess} />
      )}

      {/* Guess Input Controls */}
      {status === GameStatus.PLAYING && mode !== GameMode.AI_GUESSER && (
        <>
          <div className="fixed bottom-24 left-1/2 -translate-x-1/2 w-full max-w-md px-6 z-30 pointer-events-none">
             <button 
                onClick={submitGuess}
                disabled={currentGuess.some(c => c === null)}
                className="pointer-events-auto w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-indigo-500 hover:from-indigo-400 hover:via-purple-400 hover:to-indigo-400 disabled:opacity-0 disabled:translate-y-10 text-white py-3.5 rounded-2xl font-black tracking-widest text-sm shadow-[0_10px_30px_rgba(99,102,241,0.5)] transition-all duration-300 transform border border-white/10"
              >
                DECRYPT
              </button>
          </div>
          <ColorPicker colors={COLORS} onSelect={handleColorSelect} />
        </>
      )}
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 font-sans selection:bg-indigo-500/30 overflow-hidden relative">
      {/* Background Gradients */}
      <div className="fixed inset-0 pointer-events-none z-0">
         <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-indigo-600/20 rounded-full blur-[100px]"></div>
         <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-cyan-600/10 rounded-full blur-[100px]"></div>
      </div>

      <div className="relative z-10 h-full">
         {status === GameStatus.SETUP && !shareCode && !mode && renderLobby()}
         {status === GameStatus.SETUP && (mode === GameMode.TWO_PLAYER_LOCAL || mode === GameMode.AI_GUESSER || shareCode === "GENERATE") && renderCodeCreator()}
         {(status === GameStatus.PLAYING || status === GameStatus.WON || status === GameStatus.LOST || status === GameStatus.JUDGING) && renderGame()}
      </div>

      {showTutorial && <Tutorial onClose={() => setShowTutorial(false)} />}
      
      {/* Lobby Help Button */}
      {status === GameStatus.SETUP && !showTutorial && (
        <button 
          onClick={() => setShowTutorial(true)}
          className="fixed top-6 right-6 p-2 bg-slate-800/50 hover:bg-slate-700 rounded-full transition-colors z-50 text-slate-400"
        >
          <HelpCircle className="w-6 h-6" />
        </button>
      )}
    </div>
  );
};

export default App;