HoushaWebsite/src/components/home/HeroAiVisual.tsx

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { 
  Sparkles, 
  Cpu, 
  Zap, 
  CheckCircle2, 
  Terminal, 
  ArrowLeft, 
  ShieldCheck, 
  Layers,
  Copy,
  Check,
  RotateCcw,
  Flame,
  Brain,
  Code,
  Palette,
  TrendingUp
} from 'lucide-react';

interface PromptPreset {
  id: string;
  category: string;
  icon: React.ReactNode;
  model: string;
  modelIcon: string;
  modelProvider: string;
  prompt: string;
  thought?: string;
  response: string;
  stats: {
    speed: string;
    tokens: string;
    latency: string;
  };
}

export const HeroAiVisual: React.FC = () => {
  const presets: PromptPreset[] = [
    {
      id: 'strategy',
      category: 'استراتژی کسب‌وکار',
      icon: <TrendingUp className="w-4 h-4 text-amber-400" />,
      model: 'GPT-4o',
      modelIcon: '/storage/bot/llm/gpt.png',
      modelProvider: 'OpenAI',
      prompt: 'یک استراتژی عملیاتی ۳۰ روزه برای تحول دیجیتال و رشد ۳ برابری فروش تدوین کن.',
      thought: 'بررسی داده‌های بازار هدف، بهینه‌سازی قیف فروش و خودکارسازی فرآیند با هوش مصنوعی...',
      response: `۱. **هوشمندسازی قیف فروش**: پیاده‌سازی ربات هوشان برای پاسخ‌دهی خودکار و تبدیل ۲۴ ساعته لیدها.
۲. **شخصی‌سازی بازاریابی**: تولید کمپین‌های تبلیغاتی متناسب با رفتار مشتری با نرخ تبدیل +۴۵٪.
۳. **داشبورد تحلیلی پیش‌بین**: یکپارچه‌سازی تحلیل داده‌ها برای تصمیم‌گیری مدیران ارشد در لحظه.`,
      stats: { speed: '۲۸۰ توکن/ثانیه', tokens: '۵۴۰ توکن', latency: '۰.۲۴s' }
    },
    {
      id: 'coding',
      category: 'برنامه‌نویسی و وب',
      icon: <Code className="w-4 h-4 text-cyan-400" />,
      model: 'Claude 3.7 Sonnet',
      modelIcon: '/storage/bot/llm/claude.png',
      modelProvider: 'Anthropic',
      prompt: 'یک تابع پایتون بنویس که اتصال پایگاه داده را با کش Redis و مدیریت خطای خودکار انجام دهد.',
      thought: 'تحلیل ساختار ناهمگام (Async)، مدیریت Connection Pool و کش دو لایه...',
      response: `\`\`\`python
from fastapi import FastAPI, Depends
import redis.asyncio as aioredis

async def get_cached_ai_response(prompt_hash: str):
    client = aioredis.from_url("redis://localhost:6379")
    cached = await client.get(prompt_hash)
    if cached:
        return {"source": "cache", "data": cached.decode()}
    return None
\`\`\``,
      stats: { speed: '۳۲۰ توکن/ثانیه', tokens: '۶۸۰ توکن', latency: '۰.۱۹s' }
    },
    {
      id: 'reasoning',
      category: 'استدلال عمیق و منطق',
      icon: <Brain className="w-4 h-4 text-indigo-400" />,
      model: 'DeepSeek R1',
      modelIcon: '/storage/bot/llm/deepseek.png',
      modelProvider: 'DeepSeek AI',
      prompt: 'روش بهینه‌سازی الگوریتم مسیریابی لجستیک با حداقل مصرف انرژی را گام به گام تحلیل کن.',
      thought: 'فرموله‌سازی مسئله TSP و الگوریتم ژنتیک ترکیبی با ضریب متغیر ترافیک...',
      response: `✓ **اثبات ریاضی بهینه‌سازی**: استفاده از گراف وزندار $G=(V, E)$ و حداقل‌سازی تابع هزینه:
$$\\min \\sum_{i,j} c_{ij} x_{ij} + \\lambda \\cdot E(traffic)$$
نتیجه: کاهش ۲۳٪ در مصرف انرژی ناوگان و ۱۸٪ زمان سفر به دست می‌آید.`,
      stats: { speed: '۲۱۰ توکن/ثانیه', tokens: '۷۹۰ توکن', latency: '۰.۳۱s' }
    },
    {
      id: 'design',
      category: 'ایده‌پردازی و تصویر',
      icon: <Palette className="w-4 h-4 text-rose-400" />,
      model: 'Gemini 2.0 Flash',
      modelIcon: '/storage/bot/llm/gemini.png',
      modelProvider: 'Google AI',
      prompt: 'یک توصیف پرامپت حرفه‌ای انگلیسی برای تولید لوگو و کاراکتر هوش مصنوعی مدرن بساز.',
      thought: 'ایجاد توصیف متنی سینمایی، نورپردازی نئونی و استایل سه بعدی هایپربولیک...',
      response: `"Cinematic 3D isometric render of an intelligent futuristic AI glowing core, translucent glassmorphism interface floating in deep navy space, glowing cyan and violet optic cables, 8k resolution, minimalist masterpiece."`,
      stats: { speed: '۳۶۰ توکن/ثانیه', tokens: '۳۱۰ توکن', latency: '۰.۱۵s' }
    }
  ];

  const [viewMode, setViewMode] = useState<'statue' | 'sandbox'>('statue');
  const [activeTab, setActiveTab] = useState<string>('strategy');
  const [copied, setCopied] = useState<boolean>(false);
  const [displayText, setDisplayText] = useState<string>('');
  const [isTyping, setIsTyping] = useState<boolean>(false);

  const currentPreset = presets.find((p) => p.id === activeTab) || presets[0];

  useEffect(() => {
    setIsTyping(true);
    setDisplayText('');
    let idx = 0;
    const fullText = currentPreset.response;
    const interval = setInterval(() => {
      idx += 3;
      if (idx >= fullText.length) {
        setDisplayText(fullText);
        setIsTyping(false);
        clearInterval(interval);
      } else {
        setDisplayText(fullText.slice(0, idx));
      }
    }, 15);

    return () => clearInterval(interval);
  }, [activeTab]);

  const handleCopy = () => {
    navigator.clipboard.writeText(currentPreset.response);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="relative w-full max-w-2xl mx-auto lg:max-w-none">
      
      {/* Decorative Glow Orbs in Background */}
      <div className="absolute -top-10 -right-10 w-72 h-72 bg-cyan-500/20 rounded-full blur-[90px] pointer-events-none animate-pulse-glow" />
      <div className="absolute -bottom-10 -left-10 w-80 h-80 bg-indigo-600/25 rounded-full blur-[100px] pointer-events-none animate-pulse-glow" />

      {/* Mode Switcher Pills (Statue Artwork vs Live Sandbox) */}
      <div className="flex items-center justify-center gap-2 mb-3 z-30 relative">
        <div className="bg-slate-900/90 p-1 rounded-2xl border border-white/10 flex items-center gap-1 shadow-lg backdrop-blur-md">
          <button
            onClick={() => setViewMode('statue')}
            className={`px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 cursor-pointer ${
              viewMode === 'statue'
                ? 'bg-gradient-to-r from-indigo-600 to-indigo-500 text-white shadow-md'
                : 'text-slate-400 hover:text-white'
            }`}
          >
            <span>🏛️ دستیار هوشان</span>
          </button>

          <button
            onClick={() => setViewMode('sandbox')}
            className={`px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 cursor-pointer ${
              viewMode === 'sandbox'
                ? 'bg-gradient-to-r from-indigo-600 to-indigo-500 text-white shadow-md'
                : 'text-slate-400 hover:text-white'
            }`}
          >
            <Sparkles className="w-3.5 h-3.5 text-cyan-300" />
            <span>⚡ تست زنده مدل‌ها</span>
          </button>
        </div>
      </div>

      {viewMode === 'statue' ? (
        /* Authentic Original Hero Artwork View */
        <div className="relative rounded-3xl bg-slate-950/70 border border-white/10 shadow-2xl backdrop-blur-xl p-6 sm:p-8 flex flex-col items-center justify-center overflow-hidden min-h-[460px]">
          {/* Halftone Aura Light */}
          <div className="absolute inset-0 bg-gradient-to-t from-indigo-950/80 via-slate-950/40 to-transparent pointer-events-none" />
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-indigo-500/20 rounded-full blur-3xl pointer-events-none" />

          {/* Floating AI Feature Badges */}
          <div className="absolute top-6 right-4 sm:right-8 z-20 px-3 py-1.5 rounded-2xl bg-slate-900/90 border border-cyan-500/40 shadow-xl backdrop-blur-md flex items-center gap-2 animate-float">
            <span className="text-base">🎬</span>
            <div className="text-right">
              <span className="text-[10px] text-cyan-300 block font-bold">تولید ویدیو</span>
              <span className="text-[9px] text-slate-400 block">متن و تصویر به ویدیو</span>
            </div>
          </div>

          <div className="absolute top-12 left-4 sm:left-6 z-20 px-3 py-1.5 rounded-2xl bg-slate-900/90 border border-purple-500/40 shadow-xl backdrop-blur-md flex items-center gap-2 animate-float-delayed">
            <span className="text-base">🎨</span>
            <div className="text-right">
              <span className="text-[10px] text-purple-300 block font-bold">استودیو تصویر</span>
              <span className="text-[9px] text-slate-400 block">کیفیت 4K و روتوش</span>
            </div>
          </div>

          <div className="absolute bottom-6 right-6 sm:right-10 z-20 px-3 py-1.5 rounded-2xl bg-slate-900/90 border border-amber-500/40 shadow-xl backdrop-blur-md flex items-center gap-2 animate-float">
            <span className="text-base">🎙️</span>
            <div className="text-right">
              <span className="text-[10px] text-amber-300 block font-bold">صوت و موسیقی</span>
              <span className="text-[9px] text-slate-400 block">تولید آهنگ و TTS</span>
            </div>
          </div>

          <div className="absolute bottom-8 left-4 sm:left-8 z-20 px-3 py-1.5 rounded-2xl bg-slate-900/90 border border-emerald-500/40 shadow-xl backdrop-blur-md flex items-center gap-2 animate-float-delayed">
            <span className="text-base">🧠</span>
            <div className="text-right">
              <span className="text-[10px] text-emerald-300 block font-bold">استدلال عمیق</span>
              <span className="text-[9px] text-slate-400 block">GPT-4o & DeepSeek R1</span>
            </div>
          </div>

          {/* Original Greek Statue AI Artwork */}
          <div className="relative z-10 max-w-[340px] sm:max-w-[400px] hover:scale-105 transition-transform duration-500 drop-shadow-[0_20px_40px_rgba(99,102,241,0.3)]">
            <img 
              src="/storage/banner/herosection-1.png" 
              alt="هوشان؛ دستیار هوش مصنوعی شما" 
              className="w-full h-auto object-contain select-none pointer-events-none"
            />
          </div>

          {/* Bottom Quick Test Bar */}
          <div className="relative z-20 mt-3 pt-3 border-t border-white/10 w-full flex items-center justify-between text-xs">
            <span className="text-slate-400 flex items-center gap-1.5">
              <Zap className="w-4 h-4 text-cyan-400" />
              <span>پلتفرم یکپارچه هوش مصنوعی فارسی</span>
            </span>
            <button
              onClick={() => setViewMode('sandbox')}
              className="text-cyan-300 hover:text-white font-bold flex items-center gap-1 transition-colors cursor-pointer"
            >
              <span>تست زنده خروجی مدل‌ها</span>
              <ArrowLeft className="w-3.5 h-3.5" />
            </button>
          </div>
        </div>
      ) : (
        /* Main Glassmorphic AI Console Window */
        <div className="relative rounded-2xl sm:rounded-3xl bg-slate-950/85 border border-white/10 shadow-[0_20px_60px_-15px_rgba(15,23,42,0.9)] backdrop-blur-xl overflow-hidden">
          
          {/* Top Window Header Bar */}
          <div className="flex items-center justify-between px-4 sm:px-6 py-3.5 border-b border-white/10 bg-slate-900/60">
          
          {/* Window Buttons */}
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 rounded-full bg-rose-500/80" />
            <div className="w-3 h-3 rounded-full bg-amber-500/80" />
            <div className="w-3 h-3 rounded-full bg-emerald-500/80" />
            <span className="text-[11px] font-mono text-slate-400 mr-2 flex items-center gap-1.5">
              <Terminal className="w-3 h-3 text-cyan-400" />
              <span>Houshan AI Engine v2.0</span>
            </span>
          </div>

          {/* Active Model Indicator */}
          <div className="flex items-center gap-2 px-3 py-1 rounded-xl bg-slate-800/80 border border-white/5">
            <img 
              src={currentPreset.modelIcon} 
              alt={currentPreset.model} 
              className="w-4 h-4 object-contain"
            />
            <span className="text-xs font-bold text-white font-english">{currentPreset.model}</span>
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
          </div>

        </div>

        {/* Interactive Category Selector Tabs */}
        <div className="p-2 sm:p-3 bg-slate-900/40 border-b border-white/5 overflow-x-auto">
          <div className="flex items-center gap-2 min-w-max">
            {presets.map((preset) => {
              const isActive = activeTab === preset.id;
              return (
                <button
                  key={preset.id}
                  onClick={() => setActiveTab(preset.id)}
                  className={`flex items-center gap-2 px-3 sm:px-4 py-2 rounded-xl text-xs font-medium transition-all cursor-pointer ${
                    isActive 
                      ? 'bg-gradient-to-r from-indigo-600 to-blue-600 text-white shadow-md shadow-indigo-600/30 border border-indigo-400/30' 
                      : 'bg-slate-900/80 text-slate-400 hover:text-slate-200 hover:bg-slate-800/80 border border-white/5'
                  }`}
                >
                  {preset.icon}
                  <span>{preset.category}</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* Playground Content Area */}
        <div className="p-4 sm:p-6 space-y-4">
          
          {/* User Prompt Message */}
          <div className="flex items-start gap-3 bg-indigo-950/30 border border-indigo-500/20 p-3.5 rounded-2xl">
            <div className="w-8 h-8 rounded-xl bg-indigo-600/30 border border-indigo-500/40 flex items-center justify-center shrink-0 text-white font-bold text-xs">
              شما
            </div>
            <div className="flex-1">
              <p className="text-xs sm:text-sm text-slate-200 leading-relaxed font-medium">
                {currentPreset.prompt}
              </p>
            </div>
          </div>

          {/* AI Thinking Step (If reasoning model) */}
          {currentPreset.thought && (
            <div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-slate-900/60 border border-cyan-500/20 text-cyan-300 text-[11px] font-mono">
              <Sparkles className="w-3.5 h-3.5 animate-spin" />
              <span>فرایند تفکر عمیق: {currentPreset.thought}</span>
            </div>
          )}

          {/* AI Response Box */}
          <div className="relative p-4 rounded-2xl bg-slate-900/70 border border-white/10 space-y-3">
            
            <div className="flex items-center justify-between border-b border-white/5 pb-2">
              <div className="flex items-center gap-2">
                <img 
                  src={currentPreset.modelIcon} 
                  alt={currentPreset.model} 
                  className="w-4 h-4 object-contain" 
                />
                <span className="text-xs font-bold text-cyan-300">
                  پاسخ هوش مصنوعی هوشان ({currentPreset.model})
                </span>
              </div>

              <div className="flex items-center gap-2">
                <button
                  onClick={handleCopy}
                  className="text-slate-400 hover:text-white p-1 rounded-lg hover:bg-slate-800 transition-colors"
                  title="کپی پاسخ"
                >
                  {copied ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5" />}
                </button>
              </div>
            </div>

            {/* Generated Output with Formatting */}
            <div className="text-xs sm:text-sm text-slate-300 leading-relaxed font-vazir min-h-[90px] whitespace-pre-line">
              {displayText}
              {isTyping && <span className="inline-block w-1.5 h-4 bg-cyan-400 mr-1 animate-pulse" />}
            </div>

            {/* Performance Stats Pill Bar */}
            <div className="flex flex-wrap items-center justify-between gap-2 pt-2 border-t border-white/5 text-[11px] text-slate-400 font-mono">
              <div className="flex items-center gap-3">
                <span className="text-emerald-400">⚡ {currentPreset.stats.latency}</span>
                <span>🚀 {currentPreset.stats.speed}</span>
                <span>📝 {currentPreset.stats.tokens}</span>
              </div>

              <Link
                to={`/chat?prompt=${encodeURIComponent(currentPreset.prompt)}&model=${encodeURIComponent(currentPreset.model)}`}
                className="inline-flex items-center gap-1.5 text-indigo-400 hover:text-cyan-300 font-bold font-vazir transition-colors text-xs"
              >
                <span>امتحان در محیط چت کامل</span>
                <ArrowLeft className="w-3.5 h-3.5" />
              </Link>
            </div>

          </div>

          {/* Model Family Quick Carousel */}
          <div className="grid grid-cols-4 gap-2 pt-1">
            {[
              { name: 'GPT-4o', brand: 'OpenAI', icon: '/storage/bot/llm/gpt.png', badge: 'Flagship' },
              { name: 'Claude 3.7', brand: 'Anthropic', icon: '/storage/bot/llm/claude.png', badge: 'Sonnet' },
              { name: 'DeepSeek R1', brand: 'DeepSeek', icon: '/storage/bot/llm/deepseek.png', badge: 'Reasoning' },
              { name: 'Gemini 2.0', brand: 'Google', icon: '/storage/bot/llm/gemini.png', badge: 'Flash' },
            ].map((m, i) => (
              <div 
                key={i} 
                className="p-2 sm:p-2.5 rounded-xl bg-slate-900/50 border border-white/5 flex flex-col sm:flex-row items-center sm:items-start gap-1.5 sm:gap-2 text-center sm:text-right hover:border-indigo-500/30 transition-all"
              >
                <img src={m.icon} alt={m.name} className="w-5 h-5 object-contain shrink-0" />
                <div className="min-w-0">
                  <span className="text-[11px] font-bold text-white block truncate font-english">{m.name}</span>
                  <span className="text-[9px] text-slate-500 block truncate">{m.badge}</span>
                </div>
              </div>
            ))}
          </div>

        </div>
      </div>
    )}

  </div>
);
};