import React, { useState, useMemo, useEffect } from 'react';
import { RefreshCw, ChevronRight, ChevronLeft, Info, BookOpen, Layers, Play } from 'lucide-react';

const COLORS = {
  outer: 'bg-blue-100 border-blue-500 text-blue-900',
  inner: 'bg-purple-100 border-purple-500 text-purple-900',
  success: 'bg-green-100 border-green-500 text-green-900',
  fail: 'bg-red-50 border-red-200 text-red-300 opacity-50',
  neutral: 'bg-gray-100 border-gray-300 text-gray-700',
  highlight: 'bg-yellow-100 border-yellow-500 text-yellow-900'
};

const App = () => {
  const [activeTab, setActiveTab] = useState('basic');
  
  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-800 p-4 md:p-8">
      <div className="max-w-5xl mx-auto space-y-6">
        {/* Header */}
        <header className="bg-white rounded-2xl shadow-sm p-6 border border-slate-200">
          <div className="flex items-center gap-3 mb-2">
            <div className="p-2 bg-blue-600 rounded-lg text-white">
              <Layers size={24} />
            </div>
            <h1 className="text-2xl font-bold text-slate-900">List Comprehension Visualizer</h1>
          </div>
          <p className="text-slate-500 max-w-2xl">
            Python's syntax can be terse. This tool expands the one-line syntax into visual steps to help your students understand the logic flow, especially for nested loops.
          </p>
        </header>

        {/* Navigation Tabs */}
        <div className="flex flex-wrap gap-2">
          <TabButton 
            active={activeTab === 'basic'} 
            onClick={() => setActiveTab('basic')} 
            icon={<BookOpen size={18}/>}
            title="1. The Basics"
            desc="Single loop mapping"
          />
          <TabButton 
            active={activeTab === 'filter'} 
            onClick={() => setActiveTab('filter')} 
            icon={<Info size={18}/>}
            title="2. Filtering"
            desc="Adding conditions (if)"
          />
          <TabButton 
            active={activeTab === 'nested'} 
            onClick={() => setActiveTab('nested')} 
            icon={<Layers size={18}/>}
            title="3. Nested Loops"
            desc="The 'Multiplier' Effect"
          />
        </div>

        {/* Main Content Area */}
        <main className="bg-white rounded-2xl shadow-lg border border-slate-200 overflow-hidden min-h-[600px]">
          {activeTab === 'basic' && <BasicLesson />}
          {activeTab === 'filter' && <FilterLesson />}
          {activeTab === 'nested' && <NestedLesson />}
        </main>
      </div>
    </div>
  );
};

const TabButton = ({ active, onClick, icon, title, desc }) => (
  <button
    onClick={onClick}
    className={`flex items-center gap-3 px-5 py-3 rounded-xl transition-all duration-200 text-left flex-1 md:flex-none min-w-[200px] border-2 ${
      active 
        ? 'border-blue-500 bg-blue-50 text-blue-700 shadow-sm' 
        : 'border-transparent bg-white hover:bg-slate-50 text-slate-600 hover:border-slate-200'
    }`}
  >
    <div className={active ? 'text-blue-500' : 'text-slate-400'}>{icon}</div>
    <div>
      <div className="font-semibold text-sm">{title}</div>
      <div className="text-xs opacity-75">{desc}</div>
    </div>
  </button>
);

// --- LESSON COMPONENTS ---

const BasicLesson = () => {
  const data = useMemo(() => ["apple", "banana", "cherry"], []);
  
  return (
    <VisualizerEngine 
      title="Basic Mapping"
      description="A list comprehension creates a new list by transforming every element of an existing list."
      code={`[fruit.upper() for fruit in fruits]`}
      data={{ fruits: data }}
      loopConfig={useMemo(() => ({
        logic: (item) => ({ 
          result: item.toUpperCase(), 
          kept: true,
          desc: `Convert "${item}" to uppercase` 
        })
      }), [])}
    />
  );
};

const FilterLesson = () => {
  const data = useMemo(() => ["apple", "banana", "kiwi", "mango"], []);
  
  return (
    <VisualizerEngine 
      title="Filtering with 'if'"
      description="You can add an 'if' statement at the end to keep only certain items."
      code={`[fruit for fruit in fruits if "n" in fruit]`}
      data={{ fruits: data }}
      loopConfig={useMemo(() => ({
        logic: (item) => {
          const hasN = item.includes('n');
          return { 
            result: item, 
            kept: hasN,
            desc: hasN ? `"${item}" contains 'n'. Keep it.` : `"${item}" has no 'n'. Discard.` 
          };
        }
      }), [])}
    />
  );
};

const NestedLesson = () => {
  const fruits = useMemo(() => ["apple", "kiwi"], []);
  const duplicate = useMemo(() => [1, 2, 3], []);
  
  return (
    <VisualizerEngine 
      title="Nested Loops (The Multiplier)"
      description="The second loop runs completely for every single item of the first loop. Even though 'y' isn't used in the output, it causes the logic to repeat."
      code={`[x for x in fruits for y in duplicate if "a" in x]`}
      data={{ fruits, duplicate }}
      isNested={true}
      loopConfig={useMemo(() => ({
        logic: (x, y) => {
          const hasA = x.includes('a');
          return {
            result: x,
            kept: hasA,
            desc: `Outer: "${x}", Inner: ${y}. Check "a" in "${x}"? ${hasA ? 'Yes' : 'No'}.`
          };
        }
      }), [])}
    />
  );
};

// --- CORE ENGINE ---

const VisualizerEngine = ({ title, description, code, data, loopConfig, isNested = false }) => {
  const [stepIndex, setStepIndex] = useState(-1);
  
  // Extract Data Lists
  const outerKey = Object.keys(data)[0];
  const outerList = data[outerKey];
  
  const innerKey = isNested ? Object.keys(data)[1] : null;
  const rawInnerList = isNested ? data[innerKey] : null;

  // Pre-calculate the entire simulation timeline
  // This ensures stability: we don't calculate on the fly, avoiding "infinite add" bugs
  const timeline = useMemo(() => {
    const steps = [];
    const innerListToUse = isNested ? rawInnerList : [null];

    outerList.forEach((itemX, idxX) => {
      innerListToUse.forEach((itemY, idxY) => {
        const outcome = isNested 
          ? loopConfig.logic(itemX, itemY) 
          : loopConfig.logic(itemX);
        
        steps.push({
          outerItem: itemX,
          innerItem: itemY,
          outerIdx: idxX,
          innerIdx: idxY,
          ...outcome
        });
      });
    });
    return steps;
  }, [outerList, rawInnerList, isNested, loopConfig]);

  const totalSteps = timeline.length;

  // Derived state for the UI based on current stepIndex
  const currentStep = stepIndex >= 0 && stepIndex < totalSteps ? timeline[stepIndex] : null;
  const currentLog = currentStep ? currentStep.desc : "";
  
  // Calculate results up to the current step
  const currentResults = useMemo(() => {
    if (stepIndex === -1) return [];
    // Slice timeline up to current step, filter only kept items
    return timeline.slice(0, stepIndex + 1)
      .filter(step => step.kept)
      .map(step => step.result);
  }, [timeline, stepIndex]);

  const progress = Math.max(0, ((stepIndex + 1) / totalSteps) * 100);

  // Controls
  const handleNext = () => {
    if (stepIndex < totalSteps - 1) setStepIndex(prev => prev + 1);
  };

  const handlePrev = () => {
    if (stepIndex > -1) setStepIndex(prev => prev - 1);
  };

  const handleReset = () => {
    setStepIndex(-1);
  };

  // Auto-reset when tab changes (data changes)
  useEffect(() => {
    setStepIndex(-1);
  }, [title]);

  return (
    <div className="flex flex-col h-full">
      {/* Top Bar */}
      <div className="p-6 border-b border-slate-100 bg-white">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
          <div>
            <h2 className="text-xl font-bold text-slate-800">{title}</h2>
            <p className="text-slate-500 text-sm mt-1">{description}</p>
          </div>
          
          {/* Controls */}
          <div className="flex gap-2 bg-slate-50 p-1 rounded-xl border border-slate-200">
            <button 
              onClick={handleReset}
              className="p-2 text-slate-500 hover:bg-white hover:text-slate-700 hover:shadow-sm rounded-lg transition-all"
              title="Reset"
            >
              <RefreshCw size={20} />
            </button>
            <div className="w-px bg-slate-200 my-1 mx-1"></div>
            <button 
              onClick={handlePrev}
              disabled={stepIndex <= -1}
              className={`flex items-center gap-1 px-4 py-2 rounded-lg font-bold text-sm transition-all ${
                stepIndex <= -1
                  ? 'text-slate-300 cursor-not-allowed'
                  : 'bg-white text-slate-700 shadow-sm hover:bg-slate-50 hover:text-blue-600'
              }`}
            >
              <ChevronLeft size={16}/> Prev
            </button>
            <button 
              onClick={handleNext}
              disabled={stepIndex >= totalSteps - 1}
              className={`flex items-center gap-1 px-6 py-2 rounded-lg font-bold text-sm transition-all shadow-sm ${
                stepIndex >= totalSteps - 1
                  ? 'bg-slate-100 text-slate-400 cursor-not-allowed shadow-none'
                  : 'bg-blue-600 text-white hover:bg-blue-700 shadow-blue-200'
              }`}
            >
              {stepIndex === -1 ? 'Start' : 'Next'} <ChevronRight size={16}/>
            </button>
          </div>
        </div>

        {/* Code Block */}
        <div className="bg-slate-900 rounded-xl p-4 font-mono text-sm md:text-base text-slate-100 shadow-inner overflow-x-auto relative group">
          <div className="absolute top-2 right-2 text-xs text-slate-500 font-sans">Python</div>
          <CodeColorizer code={code} />
          <div className="absolute bottom-0 left-0 h-1 bg-green-500 transition-all duration-300" style={{ width: `${progress}%` }}></div>
        </div>
      </div>

      {/* Visualization Area */}
      <div className="flex-1 bg-slate-50 p-6 overflow-y-auto">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
          
          {/* LEFT: Inputs */}
          <div className="lg:col-span-4 space-y-6">
            <ListBox 
              title={outerKey} 
              items={outerList} 
              activeIndex={currentStep ? currentStep.outerIdx : -1}
              color="blue"
              label="Outer Loop (x)"
            />

            {isNested && (
              <div className="relative">
                <div className="absolute -left-3 top-[-24px] bottom-1/2 w-4 border-l-2 border-dashed border-slate-300 rounded-bl-xl"></div>
                <ListBox 
                  title={innerKey} 
                  items={rawInnerList} 
                  activeIndex={currentStep ? currentStep.innerIdx : -1}
                  color="purple"
                  label="Inner Loop (y)"
                />
              </div>
            )}
          </div>

          {/* CENTER: Processing Stage */}
          <div className="lg:col-span-4 flex flex-col items-center justify-center min-h-[200px]">
             {currentStep ? (
               <div className="animate-in fade-in zoom-in duration-300 w-full" key={stepIndex}>
                 <ProcessingCard 
                   outer={currentStep.outerItem} 
                   inner={currentStep.innerItem} 
                   isNested={isNested}
                   log={currentLog}
                 />
               </div>
             ) : (
               stepIndex === -1 ? (
                 <div className="text-slate-400 text-center border-2 border-dashed border-slate-200 rounded-xl p-8 w-full">
                   <Play size={40} className="mx-auto mb-2 opacity-50"/>
                   <p>Click Next to step through</p>
                 </div>
               ) : (
                 <div className="text-green-600 text-center bg-green-50 rounded-xl p-8 w-full animate-in zoom-in">
                   <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
                     <RefreshCw size={24} />
                   </div>
                   <p className="font-bold">Finished!</p>
                 </div>
               )
             )}
          </div>

          {/* RIGHT: Output */}
          <div className="lg:col-span-4">
             <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden h-full min-h-[300px] flex flex-col">
               <div className="bg-slate-100 px-4 py-2 border-b border-slate-200 flex justify-between items-center">
                 <span className="font-bold text-slate-700 font-mono">newlist = []</span>
                 <span className="text-xs font-bold bg-slate-200 px-2 py-1 rounded-full text-slate-600">{currentResults.length} items</span>
               </div>
               <div className="p-2 flex-1 overflow-y-auto space-y-1">
                 {currentResults.length === 0 && stepIndex > -1 && stepIndex < totalSteps - 1 && (
                   <p className="text-slate-400 text-sm p-4 text-center italic">Collecting items...</p>
                 )}
                 {currentResults.map((res, idx) => (
                   <div key={idx} className="font-mono text-sm p-3 bg-green-50 text-green-800 border border-green-200 rounded animate-in slide-in-from-left-2 fade-in">
                     {typeof res === 'string' ? `'${res}'` : res}
                   </div>
                 ))}
               </div>
             </div>
          </div>

        </div>
      </div>
    </div>
  );
};

// --- HELPER COMPONENTS ---

const ListBox = ({ title, items, activeIndex, color, label }) => {
  const isBlue = color === 'blue';
  
  return (
    <div className={`bg-white rounded-xl border ${isBlue ? 'border-blue-200' : 'border-purple-200'} shadow-sm overflow-hidden`}>
      <div className={`px-4 py-2 text-xs font-bold uppercase tracking-wide flex justify-between ${isBlue ? 'bg-blue-50 text-blue-700' : 'bg-purple-50 text-purple-700'}`}>
        <span>{title}</span>
        <span>{label}</span>
      </div>
      <div className="divide-y divide-slate-100">
        {items.map((item, idx) => (
          <div 
            key={idx} 
            className={`px-4 py-3 font-mono text-sm transition-all duration-300 flex justify-between items-center ${
              idx === activeIndex 
                ? (isBlue ? 'bg-blue-600 text-white scale-[1.02] shadow-md' : 'bg-purple-600 text-white scale-[1.02] shadow-md')
                : 'text-slate-600'
            }`}
          >
            <span>{typeof item === 'string' ? `"${item}"` : item}</span>
            {idx === activeIndex && <ChevronRight size={16} />}
          </div>
        ))}
      </div>
    </div>
  );
};

const ProcessingCard = ({ outer, inner, isNested, log }) => (
  <div className="bg-white rounded-xl shadow-lg border border-yellow-200 p-6 w-full max-w-sm relative overflow-hidden">
    <div className="absolute top-0 left-0 w-full h-1 bg-yellow-400"></div>
    <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-4">Current Iteration</h3>
    
    <div className="space-y-4">
      <div className="flex items-center gap-3">
        <div className="w-8 h-8 rounded bg-blue-100 text-blue-700 flex items-center justify-center font-bold text-sm">x</div>
        <div className="font-mono text-lg text-slate-800">
           {typeof outer === 'string' ? `"${outer}"` : outer}
        </div>
      </div>

      {isNested && (
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 rounded bg-purple-100 text-purple-700 flex items-center justify-center font-bold text-sm">y</div>
          <div className="font-mono text-lg text-slate-800">
            {inner}
          </div>
        </div>
      )}
      
      <div className="pt-4 mt-2 border-t border-slate-100">
        <p className="text-sm text-slate-600 font-medium leading-relaxed">
          {log}
        </p>
      </div>
    </div>
  </div>
);

const CodeColorizer = ({ code }) => {
  const parts = code.split(/(\[|\]|for | in | if |"|'|\(|\))/g);
  return (
    <div>
      {parts.map((part, i) => {
        if (part === 'for ' || part === ' in ' || part === ' if ') return <span key={i} className="text-pink-400 font-bold">{part}</span>;
        if (part === '"' || part === "'") return <span key={i} className="text-amber-300">{part}</span>;
        if (part === '[' || part === ']') return <span key={i} className="text-yellow-400">{part}</span>;
        if (part.match(/^[0-9]+$/)) return <span key={i} className="text-purple-400">{part}</span>;
        if (part.trim() === 'x' || part.trim() === 'fruit') return <span key={i} className="text-blue-300 font-bold">{part}</span>;
        if (part.trim() === 'y') return <span key={i} className="text-purple-300 font-bold">{part}</span>;
        return <span key={i} className="text-slate-200">{part}</span>;
      })}
    </div>
  );
};

export default App;