import React, { useState, useEffect } from 'react';
import { ChevronRight, ChevronLeft, Play, Clock, Shield, Cpu, Activity, BarChart3, Film, ArrowRight, CheckCircle2 } from 'lucide-react';

// البيانات المستخرجة من ملف JSON
const storyboardData = {
  "project_metadata": {
    "title": "رؤية لوجستية متكاملة: الذكاء يلتقي بالمتانة",
    "duration_seconds": 90,
    "format": "4K Cinematic",
    "target_audience": "الإدارة العليا & الشركاء الاستراتيجيين",
    "core_pillars": [
      "الكفاءة التشغيلية",
      "الأمان المعتمد",
      "الذكاء الاصطناعي (IoT)"
    ]
  },
  "visual_style": {
    "tone": "Futuristic, Corporate, High-Tech",
    "color_palette": ["Metallic Silver", "Safety Orange", "Digital Blue", "Clean White"],
    "techniques": ["CGI Animation", "Drone Cinematography", "HUD Graphics", "X-Ray Rendering"]
  },
  "storyboard_sequence": [
    {
      "sequence_id": 1,
      "time_range": "00:00 - 00:10",
      "title": "الافتتاحية والرؤية الوطنية",
      "visual_elements": {
        "camera_movement": "Wide Drone Shot -> Transition -> Hero Shot",
        "key_assets": [
          "مشاهد جوية للبنية التحتية السعودية",
          "لقطة سينمائية للناقلة مع شروق الشمس"
        ]
      },
      "audio_cues": {
        "music": "تصاعدي ملهم (Inspirational Build-up)",
        "sfx": "صوت هواء خفيف، محرك ناعم وقوي"
      },
      "strategic_message": "ربط النمو الاقتصادي بحلول لوجستية متقدمة تليق برؤية المملكة."
    },
    {
      "sequence_id": 2,
      "time_range": "00:10 - 00:25",
      "title": "ثورة الكفاءة التشغيلية",
      "visual_elements": {
        "camera_movement": "X-Ray View Transition",
        "key_assets": [
          "تصميم داخلي متعدد الحجرات (3D CGI)",
          "مقارنة بصرية: 1 ناقلة حديثة = 3 ناقلات تقليدية"
        ]
      },
      "audio_cues": {
        "music": "إيقاع تقني سريع (Rhythmic Tech)",
        "sfx": "مؤثرات صوتية رقمية عند التحول للأشعة السينية"
      },
      "strategic_message": "كفاءة مضاعفة: تقليل الرحلات، تحسين الأصول، وتوفير التكاليف."
    },
    {
      "sequence_id": 3,
      "time_range": "00:25 - 00:50",
      "title": "الأمان المعزز والمتانة الهندسية",
      "visual_elements": {
        "camera_movement": "Macro Zoom -> Dynamic Simulation",
        "key_assets": [
          "حساسات بصرية (Optic Sensors)",
          "نظام التأريض (Grounding)",
          "صندوق مضاد للانفجار (Explosion Proof Box)",
          "شعار معيار IP66 بأسلوب هولوغرافي",
          "محاكاة ثبات السوائل (Anti-Surge)"
        ]
      },
      "audio_cues": {
        "music": "نغمة عميقة توحي بالثقة والقوة",
        "sfx": "صوت إغلاق معدني محكم، صوت 'مسح' إلكتروني للحساسات"
      },
      "strategic_message": "أمان بلا مساومة: اعتماد أعلى المعايير العالمية لحماية الأصول."
    },
    {
      "sequence_id": 4,
      "time_range": "00:50 - 01:15",
      "title": "الناقلة الذكية والتحول الرقمي",
      "visual_elements": {
        "camera_movement": "Tracking Shot with Digital Overlay",
        "key_assets": [
          "شبكة بيانات تغطي الناقلة",
          "نبضات ضوئية من الحساسات (GPS, Fuel Level)",
          "واجهة مستخدم لمركز التحكم (Dashboard UI)"
        ]
      },
      "audio_cues": {
        "music": "موسيقى إلكترونية حديثة (Futuristic Ambient)",
        "sfx": "أصوات نقل بيانات (Data transmission pings)"
      },
      "strategic_message": "الشفافية الكاملة والتحكم المطلق عبر تقنيات IoT."
    },
    {
      "sequence_id": 5,
      "time_range": "01:15 - 01:30",
      "title": "الخاتمة والأثر الاستراتيجي",
      "visual_elements": {
        "camera_movement": "Pull back shot -> Logo Reveal",
        "key_assets": [
          "موشن جرافيك: توفير 25%",
          "موشن جرافيك: خفض CO2 بنسبة 36.5%",
          "أفق مدينة مستقبلية",
          "شعار الحملة: تمكين مستقبل نقل الطاقة"
        ]
      },
      "audio_cues": {
        "music": "ذروة موسيقية قوية ثم هدوء للنهاية (Grand Finale)",
        "sfx": "صوت شعار العلامة التجارية (Audio Logo)"
      },
      "strategic_message": "استثمار استراتيجي لمستقبل مستدام ورائد عالمياً."
    }
  ],
  "kpis_highlighted": {
    "operational_savings": "25%",
    "emissions_reduction": "36.5%",
    "fleet_optimization": "3:1 Ratio"
  }
};

const SlideCard = ({ title, children, className = "" }) => (
  <div className={`bg-slate-800/50 border border-slate-700 rounded-xl p-6 backdrop-blur-sm hover:border-blue-500/50 transition-colors duration-300 ${className}`}>
    <h3 className="text-blue-400 text-sm font-semibold uppercase tracking-wider mb-3 flex items-center gap-2">
      {title}
    </h3>
    {children}
  </div>
);

const Pill = ({ children, icon: Icon, color = "blue" }) => {
  const colorClasses = {
    blue: "bg-blue-500/10 text-blue-400 border-blue-500/20",
    orange: "bg-orange-500/10 text-orange-400 border-orange-500/20",
    green: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
  };

  return (
    <span className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium border ${colorClasses[color]}`}>
      {Icon && <Icon size={12} />}
      {children}
    </span>
  );
};

export default function App() {
  const [currentSlide, setCurrentSlide] = useState(0);
  const [direction, setDirection] = useState(0); // 1 for next, -1 for prev

  const totalSlides = storyboardData.storyboard_sequence.length + 2; // +1 Cover, +1 Summary

  const nextSlide = () => {
    if (currentSlide < totalSlides - 1) {
      setDirection(1);
      setCurrentSlide(c => c + 1);
    }
  };

  const prevSlide = () => {
    if (currentSlide > 0) {
      setDirection(-1);
      setCurrentSlide(c => c - 1);
    }
  };

  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'ArrowRight') nextSlide(); // RTL Logic: Right is next in UI flow usually, but let's stick to logical next
      if (e.key === 'ArrowLeft') prevSlide();
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [currentSlide]);

  const renderContent = () => {
    // 1. Cover Slide
    if (currentSlide === 0) {
      return (
        <div className="flex flex-col items-center justify-center h-full text-center space-y-8 animate-fadeIn">
          <div className="inline-block p-4 rounded-full bg-blue-500/10 mb-4 animate-pulse">
            <Film size={48} className="text-blue-400" />
          </div>
          <h1 className="text-4xl md:text-6xl font-bold text-white leading-tight max-w-4xl">
            {storyboardData.project_metadata.title}
          </h1>
          <div className="flex flex-wrap justify-center gap-4 mt-6">
            <Pill icon={Clock} color="orange">{storyboardData.project_metadata.duration_seconds} ثانية</Pill>
            <Pill icon={Activity} color="blue">{storyboardData.project_metadata.format}</Pill>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12 w-full max-w-4xl text-right">
            {storyboardData.project_metadata.core_pillars.map((pillar, idx) => (
              <div key={idx} className="bg-slate-800/50 p-4 rounded-lg border-r-4 border-blue-500 shadow-lg">
                <p className="text-gray-200 font-semibold">{pillar}</p>
              </div>
            ))}
          </div>
          
          <div className="mt-12 text-slate-400 text-sm">
            الجمهور المستهدف: {storyboardData.project_metadata.target_audience}
          </div>
        </div>
      );
    }

    // 2. Sequence Slides
    if (currentSlide > 0 && currentSlide <= storyboardData.storyboard_sequence.length) {
      const sequence = storyboardData.storyboard_sequence[currentSlide - 1];
      return (
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 h-full animate-slideIn rtl">
          {/* Header Area */}
          <div className="lg:col-span-12 flex flex-col items-start border-b border-slate-700 pb-4 mb-4">
            <div className="flex items-center gap-3 mb-2">
              <span className="bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded">
                مشهد {sequence.sequence_id}
              </span>
              <span className="text-slate-400 font-mono text-sm">{sequence.time_range}</span>
            </div>
            <h2 className="text-3xl font-bold text-white">{sequence.title}</h2>
          </div>

          {/* Left Column (Visuals) */}
          <div className="lg:col-span-7 space-y-6">
            <SlideCard title="العناصر البصرية" className="h-full">
              <div className="mb-4">
                <span className="text-slate-400 text-sm">حركة الكاميرا:</span>
                <p className="text-blue-300 font-mono mt-1 text-sm bg-slate-900/50 p-2 rounded border border-slate-700/50">
                  {sequence.visual_elements.camera_movement}
                </p>
              </div>
              <ul className="space-y-3">
                {sequence.visual_elements.key_assets.map((asset, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <CheckCircle2 size={18} className="text-green-500 mt-1 shrink-0" />
                    <span className="text-gray-300">{asset}</span>
                  </li>
                ))}
              </ul>
            </SlideCard>
          </div>

          {/* Right Column (Audio & Message) */}
          <div className="lg:col-span-5 space-y-6 flex flex-col">
            <SlideCard title="الصوتيات والمؤثرات">
              <div className="space-y-4">
                <div>
                  <div className="flex items-center gap-2 text-slate-300 mb-1">
                    <Activity size={14} className="text-orange-400" />
                    <span className="text-sm font-semibold">الموسيقى</span>
                  </div>
                  <p className="text-sm text-slate-400 pr-6">{sequence.audio_cues.music}</p>
                </div>
                <div>
                  <div className="flex items-center gap-2 text-slate-300 mb-1">
                    <Activity size={14} className="text-blue-400" />
                    <span className="text-sm font-semibold">SFX</span>
                  </div>
                  <p className="text-sm text-slate-400 pr-6">{sequence.audio_cues.sfx}</p>
                </div>
              </div>
            </SlideCard>

            <div className="flex-grow bg-gradient-to-br from-blue-900/40 to-slate-900/40 border border-blue-500/30 rounded-xl p-6 flex flex-col justify-center">
              <h3 className="text-blue-400 text-sm font-semibold uppercase tracking-wider mb-3">الرسالة الاستراتيجية</h3>
              <p className="text-lg text-white font-medium leading-relaxed">
                "{sequence.strategic_message}"
              </p>
            </div>
          </div>
        </div>
      );
    }

    // 3. Summary Slide
    if (currentSlide === totalSlides - 1) {
      return (
        <div className="flex flex-col items-center justify-center h-full text-center space-y-12 animate-fadeIn">
          <div className="inline-block p-4 rounded-full bg-green-500/10 mb-4">
            <BarChart3 size={48} className="text-green-400" />
          </div>
          <h2 className="text-4xl font-bold text-white">الأثر الاستراتيجي المتوقع</h2>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full max-w-5xl">
            <div className="bg-slate-800 p-8 rounded-2xl border border-slate-700 flex flex-col items-center hover:scale-105 transition-transform duration-300">
              <div className="text-5xl font-bold text-blue-400 mb-2">{storyboardData.kpis_highlighted.operational_savings}</div>
              <div className="text-gray-400">توفير في التكاليف التشغيلية</div>
            </div>
            
            <div className="bg-slate-800 p-8 rounded-2xl border border-slate-700 flex flex-col items-center hover:scale-105 transition-transform duration-300">
              <div className="text-5xl font-bold text-green-400 mb-2">{storyboardData.kpis_highlighted.emissions_reduction}</div>
              <div className="text-gray-400">خفض انبعاثات الكربون</div>
            </div>
            
            <div className="bg-slate-800 p-8 rounded-2xl border border-slate-700 flex flex-col items-center hover:scale-105 transition-transform duration-300">
              <div className="text-5xl font-bold text-orange-400 mb-2">{storyboardData.kpis_highlighted.fleet_optimization}</div>
              <div className="text-gray-400">معدل تحسين الأسطول</div>
            </div>
          </div>

          <button 
            onClick={() => setCurrentSlide(0)}
            className="mt-12 px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full font-medium transition-colors flex items-center gap-2"
          >
            إعادة العرض <Play size={16} />
          </button>
        </div>
      );
    }
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans p-4 md:p-8 flex flex-col" dir="rtl">
      {/* Top Bar */}
      <div className="flex justify-between items-center mb-8 px-4">
        <div className="text-xs font-mono text-slate-500 uppercase tracking-widest">
          PROJECT: {storyboardData.project_metadata.title}
        </div>
        <div className="flex items-center gap-2">
          <div className="h-1.5 w-32 bg-slate-800 rounded-full overflow-hidden">
            <div 
              className="h-full bg-blue-500 transition-all duration-500"
              style={{ width: `${((currentSlide + 1) / totalSlides) * 100}%` }}
            />
          </div>
          <span className="text-xs text-slate-400 font-mono">
            {currentSlide + 1} / {totalSlides}
          </span>
        </div>
      </div>

      {/* Main Content Area */}
      <div className="flex-grow relative overflow-hidden bg-slate-900 rounded-3xl border border-slate-800 shadow-2xl">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-blue-900/20 via-slate-900/0 to-transparent pointer-events-none" />
        
        <div className="h-full p-8 md:p-12 overflow-y-auto">
          {renderContent()}
        </div>

        {/* Navigation Arrows */}
        <div className="absolute bottom-8 right-8 flex gap-4">
           {/* In RTL, Right arrow is logically 'Next' for user direction if we map it to 'forward' in content flow, 
               but usually Left is 'Next' in pure RTL layout slider logic. 
               However, let's stick to standard arrow directions: Left Arrow points Left (Previous in RTL time?), Right Arrow points Right.
               Let's simply use text or icons that are clear. */}
           
           <button 
            onClick={prevSlide}
            disabled={currentSlide === 0}
            className="p-3 rounded-full bg-slate-800 border border-slate-700 hover:bg-slate-700 disabled:opacity-30 disabled:cursor-not-allowed transition-all"
           >
             <ChevronRight size={24} /> {/* In RTL, ChevronRight points Right, which is 'Back' visually */}
           </button>

           <button 
            onClick={nextSlide}
            disabled={currentSlide === totalSlides - 1}
            className="p-3 rounded-full bg-blue-600 hover:bg-blue-500 text-white shadow-lg disabled:opacity-30 disabled:cursor-not-allowed transition-all"
           >
             <ChevronLeft size={24} /> {/* In RTL, ChevronLeft points Left, which is 'Forward' visually */}
           </button>
        </div>
      </div>
    </div>
  );
}