import React, { useState } from 'react';
import { Phase, Language, Theme } from '../types';
import { Activity, Target, Crosshair, Map, FileText, CheckCircle, Lock, Moon, Sun, Languages, ShieldCheck, Terminal, LayoutTemplate, TrendingUp, Shield, Menu, X } from 'lucide-react';

interface LayoutProps {
  currentPhase: Phase;
  maxAllowedPhase: Phase;
  onPhaseSelect: (phase: Phase) => void;
  children: React.ReactNode;
  theme: Theme;
  toggleTheme: () => void;
  language: Language;
  setLanguage: (lang: Language) => void;
  labels: any;
}

const getStepIcon = (id: Phase) => {
    switch(id) {
        case Phase.Input: return Terminal;
        case Phase.ProductAnalysis: return Activity;
        case Phase.ICPDiscovery: return Target;
        case Phase.WhaleHunting: return Crosshair;
        case Phase.Strategy: return Map;
        case Phase.AssetGeneration: return FileText;
        case Phase.SalesEnablement: return ShieldCheck;
        case Phase.LandingPage: return LayoutTemplate;
        case Phase.BusinessCase: return TrendingUp;
        case Phase.TechTranslator: return Shield;
        default: return Activity;
    }
}

export const Layout: React.FC<LayoutProps> = ({ 
  currentPhase, 
  maxAllowedPhase,
  onPhaseSelect,
  children, 
  theme, 
  toggleTheme, 
  language, 
  setLanguage,
  labels 
}) => {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  
  const steps = [
    { id: Phase.Input, label: labels.initTitle ? 'Input' : 'Input' }, 
    { id: Phase.ProductAnalysis, label: labels.phase1 },
    { id: Phase.ICPDiscovery, label: labels.phase2 },
    { id: Phase.WhaleHunting, label: labels.phase3 },
    { id: Phase.Strategy, label: labels.phase4 },
    { id: Phase.AssetGeneration, label: labels.phase5 },
    { id: Phase.SalesEnablement, label: labels.phase6 },
    { id: Phase.LandingPage, label: labels.phase7 },
    { id: Phase.BusinessCase, label: labels.phase8 },
    { id: Phase.TechTranslator, label: labels.phase9 },
  ];

  return (
    <div className={`min-h-screen flex font-sans transition-colors duration-300 ${theme === 'dark' ? 'dark bg-robo-900 text-slate-200' : 'bg-slate-50 text-slate-900'}`}>
      
      {/* Mobile Backdrop */}
      {isSidebarOpen && (
        <div 
          className="fixed inset-0 bg-black/50 z-40 md:hidden backdrop-blur-sm"
          onClick={() => setIsSidebarOpen(false)}
        />
      )}

      {/* Sidebar */}
      <div className={`
        fixed inset-y-0 left-0 z-50 w-80 border-r flex-shrink-0 flex flex-col transition-all duration-300 transform
        bg-white border-slate-200 dark:bg-robo-800 dark:border-robo-700
        ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}
        md:relative md:translate-x-0
      `}>
        <div className="p-6 border-b transition-colors duration-300 border-slate-200 dark:border-robo-700 flex justify-between items-center">
          <div>
            <h1 className="text-xl font-bold font-mono tracking-tighter flex items-center gap-2 text-slate-900 dark:text-white">
              <div className="w-3 h-3 bg-robo-500 dark:bg-robo-accent rounded-full animate-pulse"></div>
              ROBOPLANET v2.5
            </h1>
            <p className="text-xs mt-1 uppercase tracking-widest text-slate-500 dark:text-robo-400">GTM Architect Engine</p>
          </div>
          <button onClick={() => setIsSidebarOpen(false)} className="md:hidden p-2 text-slate-500">
            <X size={20} />
          </button>
        </div>

        <div className="px-4 py-4 flex gap-2">
            <button 
                onClick={toggleTheme}
                className="flex-1 flex items-center justify-center gap-2 p-2 rounded-md text-sm font-medium transition-colors
                bg-slate-100 hover:bg-slate-200 text-slate-700
                dark:bg-robo-900 dark:hover:bg-robo-700 dark:text-slate-300"
            >
                {theme === 'light' ? <Moon size={16}/> : <Sun size={16}/>}
                {theme === 'light' ? 'Dark' : 'Light'}
            </button>
            <button 
                onClick={() => setLanguage(language === 'en' ? 'de' : 'en')}
                className="flex-1 flex items-center justify-center gap-2 p-2 rounded-md text-sm font-medium transition-colors
                bg-slate-100 hover:bg-slate-200 text-slate-700
                dark:bg-robo-900 dark:hover:bg-robo-700 dark:text-slate-300"
            >
                <Languages size={16}/>
                {language.toUpperCase()}
            </button>
        </div>

        <nav className="flex-1 p-4 space-y-2 overflow-y-auto">
          {steps.map((step) => {
            const isActive = currentPhase === step.id;
            const isCompleted = currentPhase > step.id;
            const isUnlocked = step.id <= maxAllowedPhase;
            const Icon = getStepIcon(step.id);

            return (
              <button
                key={step.id}
                onClick={() => {
                  if (isUnlocked) {
                    onPhaseSelect(step.id);
                    setIsSidebarOpen(false);
                  }
                }}
                disabled={!isUnlocked}
                className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all border text-left
                  ${isActive
                    ? 'bg-blue-50 border-blue-200 text-blue-700 shadow-sm dark:bg-robo-700 dark:border-robo-500 dark:text-white dark:shadow-lg'
                    : isUnlocked 
                        ? 'border-transparent text-slate-600 hover:bg-slate-100 cursor-pointer dark:text-slate-300 dark:hover:bg-robo-700/50' 
                        : 'border-transparent text-slate-300 dark:text-slate-600 cursor-not-allowed'
                  } 
                  ${isCompleted && !isActive ? 'text-emerald-600 dark:text-emerald-400' : ''}
                `}
              >
                <div className={`p-2 rounded-md transition-colors ${
                    isActive 
                    ? 'bg-blue-100 dark:bg-robo-500 text-blue-600 dark:text-white' 
                    : isUnlocked && !isActive
                        ? 'bg-slate-200 dark:bg-robo-900 text-slate-600 dark:text-slate-400'
                        : 'bg-slate-100 dark:bg-robo-900/50'
                }`}>
                   {isCompleted ? <CheckCircle size={16} /> : <Icon size={16} />}
                </div>
                <div className="flex-1">
                  <div className="text-xs font-bold uppercase tracking-wider opacity-70">
                      {step.id === 0 ? 'Start' : `Phase 0${step.id}`}
                  </div>
                  <div className="font-medium text-sm truncate">{step.label}</div>
                </div>
                {!isUnlocked && <Lock size={12} className="opacity-30" />}
              </button>
            );
          })}
        </nav>

        <div className="p-4 border-t text-xs font-mono transition-colors duration-300
            border-slate-200 text-slate-400
            dark:border-robo-700 dark:text-slate-500
        ">
          System Status: ONLINE<br/>
          Language: {language.toUpperCase()}<br/>
          Mode: {theme.toUpperCase()}
        </div>
      </div>

      {/* Main Content */}
      <main className="flex-1 overflow-y-auto relative transition-colors duration-300
        bg-slate-50
        dark:bg-gradient-to-br dark:from-robo-900 dark:to-[#0b1120]
      ">
        {/* Mobile Header Toggle */}
        <header className="md:hidden flex items-center p-4 border-b bg-white dark:bg-robo-800 border-slate-200 dark:border-robo-700">
           <button onClick={() => setIsSidebarOpen(true)} className="p-2 text-slate-600 dark:text-slate-300">
              <Menu size={24} />
           </button>
           <h1 className="ml-2 font-bold font-mono tracking-tighter text-slate-900 dark:text-white">ROBOPLANET</h1>
        </header>

        <div className="max-w-5xl mx-auto p-8 pb-32">
          {children}
        </div>
      </main>
    </div>
  );
};