import React, { useState, useEffect, useRef } from 'react';
import { Coffee, FileText, PenTool } from 'lucide-react';

/**
 * ARCHIVIST DEMO - EZGI EDITION (1923 BAYREUTH)
 * Setting: German Hyperinflation.
 * Protagonist: Ezgi (History of Economics Student).
 */

// --- UTILS ---

const HighlightedText = ({ text }) => {
  if (!text.includes('*')) return <span>{text}</span>;
  const parts = text.split('*');
  return (
    <span>
      {parts.map((part, i) => 
        i % 2 === 1 ? (
          <span key={i} className="text-neutral-200 italic font-semibold tracking-wide shadow-white/10 drop-shadow-sm transition-colors duration-200">{part}</span>
        ) : (
          <span key={i}>{part}</span>
        )
      )}
    </span>
  );
};

const resolveFinalText = (rawText) => {
  if (!rawText) return "";
  let result = "";
  for (let i = 0; i < rawText.length; i++) {
    if (rawText[i] === '^') {
      result = result.slice(0, -1); 
    } else {
      result += rawText[i];
    }
  }
  return result;
};

const processTextForFatigue = (rawText, fatigue) => {
  if (!rawText.includes('^')) return rawText;
  if (fatigue < 44) return resolveFinalText(rawText);
  if (fatigue >= 44 && fatigue < 70) {
    if (rawText.length % 2 === 0) return resolveFinalText(rawText);
  }
  return rawText;
};

// --- DATA ---

const FATIGUE_WARNINGS = [
  "I really need a coffee.",
  "I can't keep going on like this.",
  "I should stop for a while.",
  "My eyes are burning.",
  "The letters are swimming on the page."
];

const DEMO_DATA = {
  manuscript: [
    // INTRO
    "Field Journal: Bayreuth,\nGermany. October 12, 1923.\n\nSubject: The Inflation Crisis.",
    "I arrived at the station\nthis morning. The price of\na ticket has tripled since\nI left Munich.",
    "The Papiermark is dead.\nPeople are carrying cash in\nwheelbarrows just to buy\nbread.",
    "I secured a room at a\nboarding house near the\nold Opera district.",
    "The landlady demanded\n40 billion Marks for the\nweek. I paid it.",
    "I have locked the door to\nmy room. The city feels\ndesperate. Unsafe.", // Page 5: Sets up the "Door" anomaly
    "Section I: Economic Collapse.\nShops are open, but shelves\nare empty for those paying\nwith currency.",
    "Yet, I see locals leaving\nthe back rooms with meat\nand coal. They hold no\nmoney.",
    "I asked a baker what the\nprice of a loaf was. He\nsmiled and said, 'Too\nexpensive for you.'",
    "The cafe is crowded today.\nEveryone is smoking cheap\ntobacco to curb their\nhunger.", // Page 9: Sets up the "Smell" anomaly
    "Section II: The Shadow Ledger.\nI followed a merchant to\nthe cellars beneath the\nmarket square.",
    "There is a secondary\neconomy operating here.\nA barter system.",
    "But they are not trading\ngoods. I watched an old\nwoman buy potatoes.",
    "She did not offer money.\nShe offered a small glass\nvial filled with... breath?", // Page 13: Sets up the "Hands" anomaly (writing strain)
    "I am writing this hastily.\nMy hands are stiff from\nthe cold in this cellar.",
    "The merchant inhaled the\nsmoke from the vial. He\nshuddered. The deal was\nstruck.",
    "What was in that vial?\nA memory? A year of life?\nThe exchange rates are\nirrational.",
    "I am back in my room.\nI am safe here. I am\nalone.", // Page 17: Sets up the "Safe" anomaly
    "November 1st. Inflation is\nworse. Bread is now 200\nbillion Marks.",
    "My research grant is\nworthless. I am hungry.\nThe landlady is looking\nat me strangely.",
    "She asked me if I had\n'good years' to trade.\nI did not answer.",
    "I tried to leave the city.\nThe trains are stopped.\nThe tracks are rusted.",
    "I returned to the desk.\nI must document this.\nMy back aches terribly.", // Page 23: Sets up the "Legs" anomaly
    "I went back to the cellar.\nI needed to know who runs\nthis market.",
    "They call him 'The\nCollector'. He takes the\nvials. He eats the time.",
    "I made a mistake. I was\ntaking notes. The ink on\nmy paper started to glow.",
    "They saw me. The merchant,\nthe baker, the landlady.\nThey all stopped trading.",
    "They don't want my money.\nThey want my history.\nThey want to consume who\nI am.",
    "My name is Ezgi. I am\na student of history.\nAnd I am being erased.", // NAME DROP
    "They are breaking the\ndoor down. The wood is\nsplintering.",
    "I will hide this journal\nin the floorboards. Please.\nRemember me."
  ],
  comments: {
    0: "Document recovered from demolition\nsite, Bavaria, 1998.",
    3: "Historical context: 1923 Hyperinflation.\nMatches records.",
    5: "The locking mechanism on 1920s\ndoors was notoriously weak.",
    9: "Tobacco was often used to\nsuppress appetite during the famine.",
    13: "Glass vials? No historical\nprecedent for this currency.",
    16: "The writing becomes erratic here.\nHands shaking?",
    20: "Subject is showing signs of\nsevere malnutrition.",
    24: "The Collector. No civil record\nof this individual exists.",
    28: "Ezgi. Student records confirm\na disappearance in 1923.",
    30: "The journal ends abruptly.\nThe rest is scratched out."
  },
  narrativeThreads: [
    // Keeping your original threads as requested
    { triggerPage: 2, text: "I have a slight headache.", type: 'thought' },
    { triggerPage: 7, text: "Headache is getting stronger.", type: 'thought' },
    { triggerPage: 4, text: "I can see a pigeon flying near the window.", type: 'thought' },
    { triggerPage: 11, text: "The pigeon is staring right at me.", type: 'thought' },
    { triggerPage: 5, text: "My candle is flickering.", type: 'thought' },
    { triggerPage: 16, text: "The candle's light is just a tiny bit more red.", type: 'thought' },
    { triggerPage: 27, text: "The candle is out. I should light it again.", type: 'thought' },
    { triggerPage: 12, text: "My ears are ringing.", type: 'thought' },
    { triggerPage: 18, text: "The sounds outside are getting muffled.", type: 'thought' },
    { triggerPage: 25, text: "The sounds have stopped. Complete silence.", type: 'thought' },
    { triggerPage: 24, text: "It is getting dark.", type: 'thought' }
  ],
  mundaneThoughts: [
    "I need to adjust my chair. My back aches.",
    "Writing this long hurts my hand.",
    "The wind is howling outside today.",
    "I need a new pillow. Neck is stiff.",
    "I feel a little cold. The fire must be dying.",
    "My coffee cup is empty.",
    "The 'A' key is sticking again.", 
    "This ink smells strange."
  ],
  events: [
    // YOUR ORIGINAL ANOMALIES (Kept exactly as requested)
    {
      id: 'glitch_door',
      triggerPage: 5, 
      type: 'LOG_GASLIGHT_INSTANT',
      normalText: "The door is locked.", 
      glitchText: "The door is *unlocked*.", // Highlighted (Gaslight)
      duration: 800
    },
    {
      id: 'glitch_smell', 
      triggerPage: 9, 
      type: 'LOG_GASLIGHT_INSTANT',
      normalText: "There is a faint smell of cigarette smoke.",
      glitchText: "There is a faint smell of *burning meat*.", // Highlighted (Gaslight)
      duration: 900
    },
    {
      id: 'glitch_hands',
      triggerPage: 13, 
      type: 'LOG_GASLIGHT_INSTANT', // Moved to page 13 to match story flow
      normalText: "My hands are stiff.",
      glitchText: "My hands are covered in *oil*.", // Highlighted (Gaslight)
      duration: 800
    },
    {
      id: 'glitch_safe',
      triggerPage: 17, 
      type: 'LOG_GASLIGHT_INSTANT',
      normalText: "I am safe and alone.",
      glitchText: "I am safe. I feel *safe?*", // Highlighted (Gaslight)
      duration: 1000
    },
    {
      id: 'glitch_legs',
      triggerPage: 23, 
      type: 'LOG_GASLIGHT_INSTANT',
      normalText: "My back hurts.", 
      glitchText: "I can't feel my *legs*.", // Highlighted (Gaslight)
      duration: 1000
    },
    {
      id: 'glitch_phantom',
      triggerPage: 10, 
      type: 'LOG_PHANTOM_SEQUENCE',
    },
    {
      id: 'autosave_normal_1',
      triggerPage: 15, 
      type: 'LOG_NORMAL_AUTOSAVE',
      text: "The ink is drying." 
    }
  ]
};

// --- TYPEWRITER COMPONENTS ---

const TypewriterText = ({ text, onComplete, speedMultiplier = 1 }) => {
  const [displayedText, setDisplayedText] = useState("");
  const isCancelled = useRef(false);

  useEffect(() => {
    isCancelled.current = false;
    setDisplayedText(""); 
    if (!text) return;

    const operations = [];
    let i = 0;
    while(i < text.length) {
      if (text[i] === '^') {
        operations.push({ type: 'PAUSE', duration: 400 });
        while(i < text.length && text[i] === '^') {
          operations.push({ type: 'BACKSPACE' });
          i++;
        }
        operations.push({ type: 'PAUSE', duration: 300 });
      } else {
        operations.push({ type: 'ADD', char: text[i] });
        i++;
      }
    }

    let opIndex = 0;
    let currentStr = "";

    const processNextOp = () => {
      if (isCancelled.current) return;
      if (opIndex >= operations.length) {
        if(onComplete) onComplete();
        return;
      }

      const op = operations[opIndex];
      opIndex++;

      if (op.type === 'ADD') {
        currentStr += op.char;
        setDisplayedText(currentStr);
        const speed = (30 + Math.random() * 20) * speedMultiplier;
        setTimeout(processNextOp, speed);
      } else if (op.type === 'BACKSPACE') {
        currentStr = currentStr.slice(0, -1);
        setDisplayedText(currentStr);
        setTimeout(processNextOp, 100); 
      } else if (op.type === 'PAUSE') {
        setTimeout(processNextOp, op.duration);
      }
    };

    processNextOp();
    return () => { isCancelled.current = true; };
  }, [text, speedMultiplier]);

  return <span>{displayedText}</span>;
};

// --- REDACTION ---
const RedactedBlock = ({ length = 8 }) => {
  const chars = "█▓▒░#&@$";
  const [text, setText] = useState("");
  useEffect(() => {
    let str = "";
    for(let i=0; i<length; i++) {
       str += chars[Math.floor(Math.random() * chars.length)];
    }
    setText(str);
  }, [length]);
  return <span className="text-neutral-800 select-none bg-neutral-900/10 px-1">{text}</span>;
};

// --- BUTTON ---
const Button = ({ children, onClick, disabled, className = '', variant = 'primary' }) => {
  const baseClass = "px-6 py-4 font-mono text-sm uppercase tracking-widest transition-all duration-200 border flex items-center justify-center gap-3 relative overflow-hidden";
  const variants = {
    primary: disabled ? 'bg-neutral-900 border-neutral-800 text-neutral-700 cursor-not-allowed' : 'bg-neutral-900 border-neutral-700 text-neutral-400 hover:bg-neutral-800 hover:text-white hover:border-neutral-500',
    action: disabled ? 'bg-neutral-900 border-neutral-800 text-neutral-700 cursor-not-allowed' : 'bg-neutral-200 border-neutral-200 text-black hover:bg-white',
    warning: "border-amber-900/30 text-amber-700 hover:bg-amber-900/10 hover:border-amber-800"
  };
  return (
    <button onClick={onClick} disabled={disabled} className={`${baseClass} ${variants[variant]} ${className}`}>
      {children}
    </button>
  );
};

// --- INTRO OVERLAY ---
const IntroOverlay = ({ onDismiss }) => {
  return (
    <div className="fixed inset-0 z-50 bg-neutral-950 flex flex-col items-center justify-center p-8 animate-in fade-in duration-1000">
      <div className="max-w-md w-full text-center space-y-8">
        <div className="font-serif text-2xl text-neutral-200 leading-relaxed italic opacity-90">
          "The damp air is ruining the paper. I really need to finish translating these records before the ink dissolves completely. Just thirty pages left..."
        </div>
        <button 
          onClick={onDismiss}
          className="px-8 py-3 text-sm font-mono uppercase tracking-widest text-neutral-500 hover:text-white border border-transparent hover:border-neutral-800 transition-all"
        >
          [ Begin Work ]
        </button>
      </div>
    </div>
  );
};

// --- OUTRO OVERLAY ---
const OutroOverlay = ({ show }) => {
  if (!show) return null;

  const text = "End of demo, eğer oyunu beğendiyseniz uğraşcam";
  const [displayed, setDisplayed] = useState("");

  useEffect(() => {
    let i = 0;
    const interval = setInterval(() => {
      if (i < text.length) {
        setDisplayed(text.substring(0, i + 1));
        i++;
      } else {
        clearInterval(interval);
      }
    }, 100); 
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="fixed inset-0 z-50 bg-neutral-950/95 backdrop-blur-md flex flex-col items-center justify-center p-8 animate-in fade-in duration-1000">
      <div className="max-w-md w-full text-center">
        <div className="font-mono text-xl text-neutral-200 leading-relaxed">
          {displayed}
          <span className="animate-pulse">_</span>
        </div>
      </div>
    </div>
  );
};

// --- MAIN ---

export default function ArchivistDemoV22() {
  const [showIntro, setShowIntro] = useState(true);
  const [pageIndex, setPageIndex] = useState(0);
  const [isDecrypted, setIsDecrypted] = useState(false);
  const [isTypingManuscript, setIsTypingManuscript] = useState(false); 
  const [fatigue, setFatigue] = useState(0);
  
  // CLOCK SYSTEM: Starting time 11:42 PM
  const [currentTime, setCurrentTime] = useState(new Date(1998, 10, 14, 23, 42)); 

  const formatTime = (date) => {
    return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
  };

  const advanceTime = (minutes) => {
    const newTime = new Date(currentTime.getTime() + minutes * 60000);
    setCurrentTime(newTime);
    return formatTime(newTime);
  };

  const [logs, setLogs] = useState([]);
  
  useEffect(() => {
     if(logs.length === 0) {
       setLogs([{ id: 'init', text: "November 14, 1998.\nThe candle is lit.", time: formatTime(currentTime), type: 'system' }]);
     }
  }, []);
  
  const logsEndRef = useRef(null);

  useEffect(() => {
    logsEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [logs.length]); 

  const generateId = () => `log_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;

  // --- LOGGING ENGINE ---
  const addLog = (text, type = 'system', glitchData = null) => {
    const id = generateId();
    const cleanText = glitchData ? text : resolveFinalText(text);
    const timeStr = formatTime(currentTime);
    setLogs(prev => [...prev, { id, text: cleanText, type, glitchData, time: timeStr }]);
    return id;
  };

  // --- GLITCH PROCESSOR ---
  useEffect(() => {
    const latestLog = logs[logs.length - 1];
    if (latestLog && latestLog.glitchData && latestLog.text === latestLog.glitchData.glitchText) {
      const { id, glitchData } = latestLog;
      const timer = setTimeout(() => {
         setLogs(prev => prev.map(l => l.id === id ? { 
           ...l, 
           text: glitchData.finalText || glitchData.normalText,
           glitchData: null 
         } : l));
      }, glitchData.duration || 800);
      return () => clearTimeout(timer);
    }
  }, [logs]);

  // --- NARRATIVE MANAGER ---
  useEffect(() => {
    if (!isDecrypted || showIntro) return; 

    // 1. THREADS
    const thread = DEMO_DATA.narrativeThreads.find(t => t.triggerPage === pageIndex);
    if (thread) {
      const delay = Math.random() * 2000 + 500;
      setTimeout(() => addLog(thread.text, 'thought'), delay);
      return; 
    }

    // 2. EVENTS
    const event = DEMO_DATA.events.find(e => e.triggerPage === pageIndex);
    if (event) {
      if (event.type === 'LOG_GASLIGHT_INSTANT') {
        // NOTE: Adds GLITCH TEXT first (Scary), then swaps to Normal later via Effect
        setTimeout(() => addLog(event.glitchText, 'thought', event), 1000);
      }
      else if (event.type === 'LOG_NORMAL_AUTOSAVE') {
        setTimeout(() => addLog("Turning the page...", "system"), 500);
        setTimeout(() => addLog(event.text, "system"), 2000);
      }
      else if (event.type === 'LOG_PHANTOM_SEQUENCE') {
         setTimeout(() => addLog("The air feels damp and heavy.", "thought"), 500);
         setTimeout(() => {
           const id = addLog("Did I just hear something?", "thought");
           setTimeout(() => {
             setLogs(prev => prev.filter(l => l.id !== id));
           }, 1500);
         }, 1500);
      }
      return; 
    }

    // 3. MUNDANE
    if (Math.random() > 0.7) { 
       const randomThought = DEMO_DATA.mundaneThoughts[Math.floor(Math.random() * DEMO_DATA.mundaneThoughts.length)];
       const delay = Math.random() * 3000 + 1000;
       setTimeout(() => addLog(randomThought, 'thought'), delay);
    }

  }, [pageIndex, isDecrypted, showIntro]);


  const handleDecrypt = () => {
    if (fatigue >= 100) {
      const warning = FATIGUE_WARNINGS[Math.floor(Math.random() * FATIGUE_WARNINGS.length)];
      addLog(warning, "thought");
      return;
    }

    setIsDecrypted(true);
    setIsTypingManuscript(true); 
    setFatigue(prev => Math.min(prev + 5, 100)); 
    advanceTime(12);
  };

  const onManuscriptComplete = () => {
    setIsTypingManuscript(false);
    if (DEMO_DATA.comments[pageIndex]) {
       setTimeout(() => {
         addLog(`>> ${DEMO_DATA.comments[pageIndex]}`, "system");
       }, 500);
    }
  };

  const handleArchive = () => {
    const nextIndex = pageIndex + 1;
    if (nextIndex > DEMO_DATA.manuscript.length) return;

    addLog(`Page ${nextIndex} filed.`, "system");
    setPageIndex(nextIndex);
    setIsDecrypted(false);
    setFatigue(prev => Math.min(prev + 3, 100));
    advanceTime(3); 
  };

  const handleRest = () => {
    if (fatigue === 0) return;
    setFatigue(0);
    addLog("Drank some coffee. It's cold.", "system");
    setTimeout(() => addLog("That's better. Focus.", "thought"), 1500);
    advanceTime(15);
  };

  let fatigueState = "Focused";
  if (fatigue > 40) fatigueState = "Weary";
  if (fatigue > 80) fatigueState = "Exhausted";

  const currentText = DEMO_DATA.manuscript[pageIndex];
  const displayManuscript = currentText ? processTextForFatigue(currentText, fatigue) : "";
  const isFinished = pageIndex >= DEMO_DATA.manuscript.length;

  return (
    <div className="flex flex-col h-screen bg-neutral-950 text-neutral-400 font-mono overflow-hidden relative selection:bg-neutral-800 selection:text-white">
      
      {showIntro && <IntroOverlay onDismiss={() => setShowIntro(false)} />}
      <OutroOverlay show={isFinished} />

      {/* SCANLINES */}
      <div className="absolute inset-0 pointer-events-none opacity-5 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,255,0.06))] z-50 bg-[length:100%_2px,3px_100%]"></div>
      
      {/* HEADER */}
      <div className="flex-none h-14 border-b border-neutral-900 flex items-center justify-between px-6 bg-neutral-900/20 backdrop-blur-sm z-20">
        <div className="flex flex-col">
          <span className="text-[10px] uppercase tracking-widest text-neutral-600">Reference</span>
          <span className="text-neutral-300 text-xs font-bold tracking-wider">Box 7, Item 23</span>
        </div>
        <div className="flex flex-col w-48 items-end">
           <div className="flex justify-between w-full text-[10px] uppercase tracking-widest mb-1">
             <span className={fatigue > 80 ? "text-neutral-300 animate-pulse" : "text-neutral-600"}>
               Condition
             </span>
             <span className="text-neutral-500">{fatigueState}</span>
           </div>
           <div className="w-full h-1 bg-neutral-900 rounded-full overflow-hidden">
             <div 
              className={`h-full transition-all duration-500 ${fatigue > 80 ? 'bg-neutral-400' : 'bg-neutral-700'}`} 
              style={{ width: `${fatigue}%` }}
            />
           </div>
        </div>
      </div>

      {/* WORKSPACE */}
      <div className="flex-1 flex flex-col items-center justify-center p-6 md:p-12 relative z-10 min-h-0 overflow-y-auto">
        <div className="max-w-2xl w-full flex flex-col items-center gap-8 md:gap-12">
          
          {/* MANUSCRIPT AREA */}
          <div className="w-full h-[220px] md:h-[280px] flex flex-col items-start justify-start pt-8 relative bg-neutral-900/10 border border-neutral-900/50 rounded-sm shrink-0">
             
             {pageIndex < DEMO_DATA.manuscript.length ? (
               <>
                 <div className="w-full px-8 font-serif text-lg md:text-2xl leading-relaxed text-neutral-300 h-full text-left whitespace-pre-wrap overflow-hidden">
                    {isDecrypted ? (
                      <span className="animate-in fade-in duration-700 w-full">
                        <TypewriterText 
                          text={displayManuscript} 
                          onComplete={onManuscriptComplete}
                        />
                      </span>
                    ) : (
                      <div className="flex flex-wrap justify-center gap-2 opacity-30 mt-12">
                        {[...Array(8)].map((_, i) => <RedactedBlock key={i} length={Math.floor(Math.random() * 8) + 4} />)}
                      </div>
                    )}
                 </div>
                 <div className="text-[10px] text-neutral-700 font-sans uppercase tracking-[0.2em] absolute bottom-4 w-full text-center">
                   Page {pageIndex + 1} / {DEMO_DATA.manuscript.length} | Status: {isDecrypted ? "DECIPHERED" : "UNREAD"}
                 </div>
               </>
             ) : (
               <div className="w-full text-center text-neutral-300 font-mono tracking-widest mt-24">WORK COMPLETE</div>
             )}
          </div>

          {/* CONTROLS */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full md:w-2/3 shrink-0">
             {!isDecrypted ? (
               <Button 
                  onClick={handleDecrypt} 
                  disabled={pageIndex >= DEMO_DATA.manuscript.length}
                  className="h-16 md:h-20 group"
                  variant="action"
               >
                  <PenTool size={20} />
                  <span>Decipher</span>
               </Button>
             ) : (
               <Button 
                  onClick={handleArchive} 
                  disabled={pageIndex >= DEMO_DATA.manuscript.length || isTypingManuscript} 
                  className="h-16 md:h-20 group"
               >
                  <FileText size={20} />
                  <span>File Page</span>
               </Button>
             )}

             <Button 
                onClick={handleRest}
                disabled={fatigue === 0}
                variant="warning"
                className="h-16 md:h-20"
             >
                <Coffee size={20} />
                <span>Drink Coffee</span>
             </Button>
          </div>
        </div>
      </div>

      {/* LOG TERMINAL */}
      <div className="flex-none h-48 border-t border-neutral-900 bg-neutral-950 px-6 py-4 font-mono text-xs overflow-y-auto custom-scrollbar z-20">
        <div className="flex flex-col justify-end min-h-full">
          {logs.map((log) => (
            <div key={log.id} className="mb-1.5 flex items-start gap-3 text-neutral-500 min-h-[1.25em] break-words whitespace-pre-wrap">
              <span className="opacity-30 shrink-0 select-none w-16 text-right">
                {log.time}
              </span>
              <span className="select-none opacity-50">{'>'}</span>
              <span className={log.type === 'thought' ? 'opacity-80 italic' : ''}>
                <HighlightedText text={log.text} />
              </span>
            </div>
          ))}
          <div ref={logsEndRef} />
        </div>
      </div>

      <style jsx global>{`
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #0a0a0a; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #262626; }
      `}</style>
    </div>
  );
}