import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { 
  Sparkles, 
  ArrowLeft, 
  Image as ImageIcon, 
  FileText, 
  Mic, 
  Video, 
  Bot, 
  Check, 
  Layers, 
  Maximize2, 
  SlidersHorizontal,
  Wand2
} from 'lucide-react';
import toolsData from '../../data/tools.json';

export const ToolsShowcase: React.FC = () => {
  const [activeCategory, setActiveCategory] = useState<'all' | 'image' | 'text' | 'audio' | 'video' | 'bots'>('image');
  const [sliderPosition, setSliderPosition] = useState(50);

  const categories = [
    { id: 'all', name: 'همه‌ی ابزارها', icon: Layers },
    { id: 'image', name: 'تولید و ویرایش عکس', icon: ImageIcon },
    { id: 'text', name: 'تولید محتوا و متن', icon: FileText },
    { id: 'audio', name: 'صدا و گفتار فارسی', icon: Mic },
    { id: 'video', name: 'تولید ویدیو', icon: Video },
    { id: 'bots', name: 'دستیارها و بات‌ها', icon: Bot },
  ];

  const filteredTools = activeCategory === 'all' 
    ? toolsData 
    : toolsData.filter(t => t.category === activeCategory);

  return (
    <section className="py-20 relative bg-slate-900/30 overflow-hidden">
      {/* Glow */}
      <div className="absolute top-1/2 left-0 w-96 h-96 bg-indigo-600/10 rounded-full blur-3xl pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Section Header */}
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
          <div className="space-y-3 max-w-2xl">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs font-semibold">
              <Wand2 className="w-3.5 h-3.5" />
              <span>مجموعه ابزارهای هوش مصنوعی هوشان</span>
            </div>
            <h2 className="text-2xl sm:text-4xl font-black text-white tracking-tight">
              ابزارهای قدرتمند هوشان برای هر نیاز شما
            </h2>
            <p className="text-sm text-slate-400 leading-relaxed">
              از تولید تصاویر خلاقانه و تبدیل صدا تا خلاصه‌سازی اسناد حقوقی و ساخت بات اختصاصی، همه چیز را با زبان فارسی تجربه کنید.
            </p>
          </div>

          <Link
            to="/tools"
            className="inline-flex items-center gap-2 text-xs sm:text-sm font-bold text-indigo-400 hover:text-indigo-300 transition-colors group shrink-0"
          >
            <span>مشاهده و تست تمام ابزارها</span>
            <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
          </Link>
        </div>

        {/* Category Tabs */}
        <div className="flex items-center gap-2 overflow-x-auto pb-4 mb-8">
          {categories.map((cat) => {
            const Icon = cat.icon;
            const isActive = activeCategory === cat.id;
            return (
              <button
                key={cat.id}
                onClick={() => setActiveCategory(cat.id as any)}
                className={`px-4 py-2.5 rounded-2xl text-xs font-semibold transition-all flex items-center gap-2 shrink-0 cursor-pointer ${
                  isActive
                    ? 'bg-gradient-to-r from-indigo-600 to-indigo-500 text-white shadow-lg shadow-indigo-600/25'
                    : 'bg-slate-900/80 text-slate-400 hover:text-slate-200 hover:bg-slate-800 border border-slate-800'
                }`}
              >
                <Icon className="w-4 h-4" />
                <span>{cat.name}</span>
              </button>
            );
          })}
        </div>

        {/* Interactive Before / After Feature Showcase (when Image tab is active) */}
        {activeCategory === 'image' && (
          <div className="mb-12 p-6 sm:p-8 rounded-3xl bg-slate-950/80 border border-slate-800/80 grid grid-cols-1 lg:grid-cols-12 gap-8 items-center shadow-xl">
            <div className="lg:col-span-5 space-y-4">
              <div className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-emerald-500/10 text-emerald-400 text-[11px] font-semibold">
                <span>⚡ قابلیت تعاملی هوشان</span>
              </div>
              <h3 className="text-xl font-bold text-white">
                حذف پس‌زمینه و بهبود کیفیت هوشمند
              </h3>
              <p className="text-xs text-slate-400 leading-relaxed">
                با الگوریتم‌های هوش مصنوعی هوشان، بدون نیاز به فتوشاپ، پس‌زمینه عکس‌های محصول یا پرتره را به صورت میلی‌متری حذف کنید و رزولوشن آن‌ها را تا ۴ برابر افزایش دهید.
              </p>
              
              <div className="space-y-2 pt-2 text-xs text-slate-300">
                <div className="flex items-center gap-2">
                  <div className="w-4 h-4 rounded-full bg-indigo-500/20 text-indigo-400 flex items-center justify-center text-[10px]">✓</div>
                  <span>تشخیص تار مو و لبه‌های نازک به صورت خودکار</span>
                </div>
                <div className="flex items-center gap-2">
                  <div className="w-4 h-4 rounded-full bg-indigo-500/20 text-indigo-400 flex items-center justify-center text-[10px]">✓</div>
                  <span>خروجی شفاف PNG با رزولوشن فوق‌العاده بالا</span>
                </div>
                <div className="flex items-center gap-2">
                  <div className="w-4 h-4 rounded-full bg-indigo-500/20 text-indigo-400 flex items-center justify-center text-[10px]">✓</div>
                  <span>پردازش ثانیه‌ای با یک کلیک</span>
                </div>
              </div>

              <div className="pt-2">
                <Link
                  to="/tools"
                  className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold transition-all shadow-md shadow-indigo-600/20"
                >
                  <span>امتحان کنید</span>
                  <ArrowLeft className="w-3.5 h-3.5" />
                </Link>
              </div>
            </div>

            {/* Interactive Before / After Slider Box */}
            <div className="lg:col-span-7">
              <div className="relative h-64 sm:h-80 w-full rounded-2xl overflow-hidden border border-slate-700/80 select-none">
                {/* Background "After" Side */}
                <div className="absolute inset-0 bg-slate-950">
                  <img 
                    src="/storage/bot/image-to-image/ghibli-after.png" 
                    alt="پس از پردازش هوش مصنوعی هوشان" 
                    className="w-full h-full object-cover"
                  />
                  <div className="absolute top-4 left-4 bg-cyan-500/90 text-slate-950 text-[11px] font-black px-3 py-1 rounded-full shadow-lg backdrop-blur-md">
                    خروجی تبدیل سبک هوشان (استودیو جیبلی)
                  </div>
                </div>

                {/* Foreground "Before" Side */}
                <div 
                  className="absolute inset-0 bg-slate-950 overflow-hidden border-l-2 border-cyan-400"
                  style={{ width: `${sliderPosition}%` }}
                >
                  <img 
                    src="/storage/bot/image-to-image/ghibli-before.jpg" 
                    alt="تصویر اولیه" 
                    className="w-full h-full object-cover max-w-none"
                    style={{ width: '100%', height: '100%' }}
                  />
                  <div className="absolute top-4 right-4 bg-slate-900/90 text-slate-300 text-[11px] font-bold px-3 py-1 rounded-full shadow-lg backdrop-blur-md">
                    تصویر اولیه کاربر
                  </div>
                </div>

                {/* Slider Handle */}
                <input
                  type="range"
                  min="0"
                  max="100"
                  value={sliderPosition}
                  onChange={(e) => setSliderPosition(Number(e.target.value))}
                  className="absolute inset-0 w-full h-full opacity-0 cursor-ew-resize z-30"
                  aria-label="قبل و بعد"
                />

                <div 
                  className="absolute top-0 bottom-0 pointer-events-none flex items-center justify-center"
                  style={{ left: `${sliderPosition}%`, transform: 'translateX(-50%)' }}
                >
                  <div className="w-7 h-7 rounded-full bg-white text-slate-950 font-bold text-[10px] flex items-center justify-center shadow-lg border-2 border-cyan-400">
                    ↔
                  </div>
                </div>

                {/* Labels */}
                <span className="absolute bottom-3 right-3 px-2 py-1 rounded bg-black/60 backdrop-blur-md text-[10px] text-white pointer-events-none">
                  قبل (عکس اصلی)
                </span>
                <span className="absolute bottom-3 left-3 px-2 py-1 rounded bg-black/60 backdrop-blur-md text-[10px] text-cyan-300 pointer-events-none">
                  بعد (پردازش هوشان)
                </span>
              </div>
            </div>
          </div>
        )}

        {/* Tools Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredTools.map((tool) => (
            <div 
              key={tool.id}
              className="p-6 rounded-3xl bg-slate-900/60 border border-slate-800/80 hover:border-indigo-500/40 glass-panel-hover flex flex-col justify-between space-y-4"
            >
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-[10px] font-semibold px-2.5 py-1 rounded-full bg-indigo-500/10 text-indigo-300 border border-indigo-500/20">
                    {tool.categoryName}
                  </span>
                  {tool.badge && (
                    <span className="text-[10px] font-bold px-2.5 py-0.5 rounded-full bg-cyan-500/20 text-cyan-300">
                      {tool.badge}
                    </span>
                  )}
                </div>

                <h3 className="text-base font-bold text-white">
                  {tool.title}
                </h3>

                <p className="text-xs text-slate-400 leading-relaxed">
                  {tool.description}
                </p>

                {tool.capabilities && (
                  <div className="space-y-1.5 pt-2 border-t border-slate-800/60">
                    {tool.capabilities.slice(0, 2).map((cap, i) => (
                      <div key={i} className="flex items-center gap-2 text-[11px] text-slate-300">
                        <Check className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
                        <span>{cap}</span>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              <div className="pt-2">
                <Link
                  to="/tools"
                  className="w-full py-2.5 rounded-xl bg-slate-800/70 hover:bg-indigo-600 text-slate-300 hover:text-white text-xs font-semibold transition-all flex items-center justify-center gap-2"
                >
                  <span>استفاده از ابزار</span>
                  <ArrowLeft className="w-3.5 h-3.5" />
                </Link>
              </div>
            </div>
          ))}
        </div>

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