"use client";

import { useState, useMemo } from "react";
import { useRouter } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
import {
  ArrowLeft,
  ArrowRight,
  Sparkles,
  Languages,
  Clock,
  Palette,
  Monitor,
  Smartphone,
  Square,
  Loader2,
  Check,
  Wand2,
  Search,
  ChevronDown,
} from "lucide-react";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { useCreateProject } from "@/hooks/use-api";
import { useToast } from "@/components/ui/toast";
import { projectsApi } from "@/lib/api/api-service";

const steps = ["Konu & Dil", "Stil & Süre", "AI Senaryo"];

const languages = [
  { code: "tr", label: "Türkçe", flag: "🇹🇷" },
  { code: "en", label: "English", flag: "🇺🇸" },
  { code: "es", label: "Español", flag: "🇪🇸" },
  { code: "de", label: "Deutsch", flag: "🇩🇪" },
  { code: "fr", label: "Français", flag: "🇫🇷" },
  { code: "ar", label: "العربية", flag: "🇸🇦" },
  { code: "pt", label: "Português", flag: "🇧🇷" },
  { code: "ja", label: "日本語", flag: "🇯🇵" },
];

const videoStyles = [
  // Film & Sinema
  { id: "CINEMATIC", label: "Sinematik", emoji: "🎬", desc: "Film kalitesinde görseller", category: "Film & Sinema" },
  { id: "DOCUMENTARY", label: "Belgesel", emoji: "📹", desc: "Bilimsel ve ciddi ton", category: "Film & Sinema" },
  { id: "STORYTELLING", label: "Hikâye Anlatımı", emoji: "📖", desc: "Anlatı odaklı, sürükleyici", category: "Film & Sinema" },
  { id: "NEWS", label: "Haber", emoji: "📰", desc: "Güncel ve bilgilendirici", category: "Film & Sinema" },
  { id: "ARTISTIC", label: "Sanatsal", emoji: "🎨", desc: "Yaratıcı ve sıra dışı", category: "Film & Sinema" },
  { id: "NOIR", label: "Film Noir", emoji: "🖤", desc: "Karanlık, dramatik", category: "Film & Sinema" },
  { id: "VLOG", label: "Vlog", emoji: "📱", desc: "Günlük, samimi", category: "Film & Sinema" },
  // Animasyon
  { id: "ANIME", label: "Anime", emoji: "⛩️", desc: "Japon animasyon stili", category: "Animasyon" },
  { id: "ANIMATION_3D", label: "3D Animasyon", emoji: "🧊", desc: "Pixar kalitesi", category: "Animasyon" },
  { id: "ANIMATION_2D", label: "2D Animasyon", emoji: "✏️", desc: "Klasik el çizimi", category: "Animasyon" },
  { id: "STOP_MOTION", label: "Stop Motion", emoji: "🧸", desc: "Kare kare animasyon", category: "Animasyon" },
  { id: "MOTION_COMIC", label: "Hareketli Çizgi Roman", emoji: "💥", desc: "Panel bazlı anlatım", category: "Animasyon" },
  { id: "CARTOON", label: "Karikatür", emoji: "🎭", desc: "Çizgi film stili", category: "Animasyon" },
  { id: "CLAYMATION", label: "Claymation", emoji: "🏺", desc: "Kil animasyon", category: "Animasyon" },
  { id: "PIXEL_ART", label: "Pixel Art", emoji: "👾", desc: "8-bit retro oyun", category: "Animasyon" },
  { id: "ISOMETRIC", label: "İzometrik", emoji: "🔷", desc: "İzometrik animasyon", category: "Animasyon" },
  // Eğitim & Bilgi
  { id: "EDUCATIONAL", label: "Eğitim", emoji: "🎓", desc: "Öğretici ve açıklayıcı", category: "Eğitim & Bilgi" },
  { id: "INFOGRAPHIC", label: "İnfografik", emoji: "📊", desc: "Veri görselleştirme", category: "Eğitim & Bilgi" },
  { id: "WHITEBOARD", label: "Whiteboard", emoji: "📝", desc: "Tahta animasyonu", category: "Eğitim & Bilgi" },
  { id: "EXPLAINER", label: "Explainer", emoji: "💡", desc: "Ürün/konsept anlatımı", category: "Eğitim & Bilgi" },
  { id: "DATA_VIZ", label: "Veri Görselleştirme", emoji: "📈", desc: "Grafikler ve tablolar", category: "Eğitim & Bilgi" },
  // Retro & Nostaljik
  { id: "RETRO_80S", label: "Retro 80s", emoji: "🕹️", desc: "Synthwave estetik", category: "Retro & Nostaljik" },
  { id: "VINTAGE_FILM", label: "Vintage Film", emoji: "📽️", desc: "Super 8 filmi", category: "Retro & Nostaljik" },
  { id: "VHS", label: "VHS", emoji: "📼", desc: "Kaset estetik", category: "Retro & Nostaljik" },
  { id: "POLAROID", label: "Polaroid", emoji: "📸", desc: "Analog fotoğraf", category: "Retro & Nostaljik" },
  { id: "RETRO_90S", label: "Retro 90s Y2K", emoji: "💿", desc: "Y2K & internet", category: "Retro & Nostaljik" },
  // Sanat Akımları
  { id: "WATERCOLOR", label: "Suluboya", emoji: "🎨", desc: "Suluboya resim", category: "Sanat Akımları" },
  { id: "OIL_PAINTING", label: "Yağlı Boya", emoji: "🖌️", desc: "Klasik tuval", category: "Sanat Akımları" },
  { id: "IMPRESSIONIST", label: "Empresyonist", emoji: "🌅", desc: "Monet tarzı", category: "Sanat Akımları" },
  { id: "POP_ART", label: "Pop Art", emoji: "🎯", desc: "Warhol stili", category: "Sanat Akımları" },
  { id: "UKIYO_E", label: "Ukiyo-e", emoji: "🏯", desc: "Japon gravür", category: "Sanat Akımları" },
  { id: "ART_DECO", label: "Art Deco", emoji: "✨", desc: "1920s zarafet", category: "Sanat Akımları" },
  { id: "SURREAL", label: "Sürrealist", emoji: "🌀", desc: "Dalí tarzı", category: "Sanat Akımları" },
  { id: "COMIC_BOOK", label: "Çizgi Roman", emoji: "💬", desc: "Marvel/DC stili", category: "Sanat Akımları" },
  { id: "SKETCH", label: "Karakalem", emoji: "✍️", desc: "Kalem çizim", category: "Sanat Akımları" },
  // Modern & Minimal
  { id: "MINIMALIST", label: "Minimalist", emoji: "⚪", desc: "Apple estetiği", category: "Modern & Minimal" },
  { id: "GLASSMORPHISM", label: "Glassmorphism", emoji: "🔮", desc: "Cam efekti", category: "Modern & Minimal" },
  { id: "NEON", label: "Neon Glow", emoji: "💜", desc: "Neon ışıkları", category: "Modern & Minimal" },
  { id: "CYBERPUNK", label: "Cyberpunk", emoji: "🤖", desc: "Gelecek distopya", category: "Modern & Minimal" },
  { id: "STEAMPUNK", label: "Steampunk", emoji: "⚙️", desc: "Viktoryan mekanik", category: "Modern & Minimal" },
  { id: "ABSTRACT", label: "Soyut", emoji: "🔵", desc: "Abstract sanat", category: "Modern & Minimal" },
  // Fotoğrafik
  { id: "PRODUCT", label: "Ürün Fotoğrafı", emoji: "📦", desc: "Studio çekim", category: "Fotoğrafik" },
  { id: "FASHION", label: "Moda", emoji: "👗", desc: "Editöryal çekim", category: "Fotoğrafik" },
  { id: "AERIAL", label: "Havadan", emoji: "🚁", desc: "Drone görüntüsü", category: "Fotoğrafik" },
  { id: "MACRO", label: "Makro", emoji: "🔬", desc: "Yakın çekim", category: "Fotoğrafik" },
  { id: "PORTRAIT", label: "Portre", emoji: "🧑", desc: "Portre fotoğraf", category: "Fotoğrafik" },
];

const aspectRatios = [
  { id: "PORTRAIT_9_16", label: "9:16", icon: Smartphone, desc: "Shorts / Reels" },
  { id: "SQUARE_1_1", label: "1:1", icon: Square, desc: "Instagram" },
  { id: "LANDSCAPE_16_9", label: "16:9", icon: Monitor, desc: "YouTube" },
];

export default function NewProjectPage() {
  const router = useRouter();
  const createProject = useCreateProject();
  const toast = useToast();

  const [currentStep, setCurrentStep] = useState(0);

  // Form state
  const [topic, setTopic] = useState("");
  const [language, setLanguage] = useState("tr");
  const [style, setStyle] = useState("CINEMATIC");
  const [duration, setDuration] = useState(60);
  const [aspectRatio, setAspectRatio] = useState("PORTRAIT_9_16");

  // Search & Category state
  const [styleSearch, setStyleSearch] = useState("");
  const [expandedCategory, setExpandedCategory] = useState<string | null>("Film & Sinema");

  const filteredStyles = useMemo(() => {
    return videoStyles.filter(s => 
      s.label.toLowerCase().includes(styleSearch.toLowerCase()) || 
      s.desc.toLowerCase().includes(styleSearch.toLowerCase())
    );
  }, [styleSearch]);

  const groupedStyles = useMemo(() => {
    return filteredStyles.reduce((acc, curr) => {
      const cat = curr.category || "Diğer";
      if (!acc[cat]) acc[cat] = [];
      acc[cat].push(curr);
      return acc;
    }, {} as Record<string, typeof videoStyles>);
  }, [filteredStyles]);

  const canProceed = currentStep === 0 ? topic.trim().length >= 5 : true;
  const isGenerating = createProject.isPending;

  const handleGenerate = async () => {
    try {
      // Backend DTO alanları: prompt (zorunlu), videoStyle, title, language, aspectRatio, targetDuration
      const result = await createProject.mutateAsync({
        title: topic.slice(0, 80),
        prompt: topic,           // ← topic → prompt (backend alanı)
        language,
        videoStyle: style,       // ← style → videoStyle (backend alanı)
        targetDuration: duration,
        aspectRatio,
      });
      toast.success("Proje başarıyla oluşturuldu! AI senaryo üretiliyor...");
      const projectId = result?.id;
      if (projectId) {
        // Proje oluşturulduktan sonra otomatik senaryo üretimini tetikle
        projectsApi.generateScript(projectId).catch((err) => {
          console.error("Senaryo üretimi başlatılamadı:", err);
        });
        router.push(`/dashboard/projects/${projectId}`);
      } else {
        router.push("/dashboard/projects");
      }
    } catch {
      toast.error("Proje oluşturulurken bir hata oluştu. Lütfen tekrar deneyin.");
    }
  };

  return (
    <div className="max-w-2xl mx-auto">
      {/* Geri + Başlık */}
      <div className="flex items-center gap-3 mb-6">
        <Link
          href="/dashboard/projects"
          className="w-9 h-9 rounded-xl flex items-center justify-center text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-elevated)] transition-colors"
        >
          <ArrowLeft size={18} />
        </Link>
        <div>
          <h1 className="font-[family-name:var(--font-display)] text-xl font-bold">Yeni Proje</h1>
          <p className="text-xs text-[var(--color-text-muted)]">AI ile video oluştur</p>
        </div>
      </div>

      {/* Step Indicator */}
      <div className="flex items-center gap-2 mb-8">
        {steps.map((step, i) => (
          <div key={step} className="flex items-center gap-2">
            <button
              onClick={() => i < currentStep && setCurrentStep(i)}
              className={cn(
                "flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium transition-all",
                i === currentStep
                  ? "bg-violet-500/15 text-violet-400 border border-violet-500/25"
                  : i < currentStep
                    ? "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 cursor-pointer"
                    : "text-[var(--color-text-ghost)] border border-[var(--color-border-faint)]"
              )}
            >
              {i < currentStep ? (
                <Check size={12} />
              ) : (
                <span className="w-4 h-4 rounded-full border border-current flex items-center justify-center text-[10px]">
                  {i + 1}
                </span>
              )}
              <span className="hidden sm:inline">{step}</span>
            </button>
            {i < steps.length - 1 && (
              <div className={cn(
                "w-6 h-px",
                i < currentStep ? "bg-emerald-500/40" : "bg-[var(--color-border-faint)]"
              )} />
            )}
          </div>
        ))}
      </div>

      {/* Step Content */}
      <AnimatePresence mode="wait">
        {currentStep === 0 && (
          <motion.div
            key="step-0"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
            className="space-y-6"
          >
            {/* Konu */}
            <div>
              <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-2 block">
                <Sparkles size={14} className="inline mr-1.5 text-violet-400" />
                Videonun Konusu
              </label>
              <textarea
                value={topic}
                onChange={(e) => setTopic(e.target.value)}
                placeholder="Örn: Boötes Boşluğu — evrendeki en büyük boşluk ve gizemi..."
                className="w-full h-32 px-4 py-3 rounded-xl bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-primary)] text-sm placeholder:text-[var(--color-text-ghost)] focus:outline-none focus:border-violet-500/40 focus:ring-1 focus:ring-violet-500/20 transition-all resize-none"
              />
              <p className="text-[11px] text-[var(--color-text-ghost)] mt-1.5">
                Ne kadar detaylı yazarsan, AI o kadar iyi senaryo üretir ({topic.length} karakter)
              </p>
            </div>

            {/* Dil Seçimi */}
            <div>
              <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 block">
                <Languages size={14} className="inline mr-1.5 text-cyan-400" />
                Video Dili
              </label>
              <div className="grid grid-cols-4 gap-2">
                {languages.map((lang) => (
                  <button
                    key={lang.code}
                    onClick={() => setLanguage(lang.code)}
                    className={cn(
                      "flex flex-col items-center gap-1 py-3 px-2 rounded-xl text-xs transition-all",
                      language === lang.code
                        ? "bg-violet-500/12 border border-violet-500/30 text-violet-300"
                        : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)] hover:border-[var(--color-border-default)]"
                    )}
                  >
                    <span className="text-lg">{lang.flag}</span>
                    <span className="font-medium">{lang.label}</span>
                  </button>
                ))}
              </div>
            </div>
          </motion.div>
        )}

        {currentStep === 1 && (
          <motion.div
            key="step-1"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
            className="space-y-6"
          >
            {/* Video Stili */}
            <div>
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-3">
                <label className="text-sm font-medium text-[var(--color-text-secondary)] block">
                  <Palette size={14} className="inline mr-1.5 text-violet-400" />
                  Video Stili
                </label>
                <div className="relative w-full sm:w-56">
                  <div className="absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none">
                    <Search size={14} className="text-[var(--color-text-ghost)]" />
                  </div>
                  <input
                    type="text"
                    placeholder="Stil ara..."
                    value={styleSearch}
                    onChange={(e) => setStyleSearch(e.target.value)}
                    className="w-full pl-8 pr-3 py-1.5 bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] rounded-md text-xs text-[var(--color-text-primary)] placeholder:text-[var(--color-text-ghost)] focus:outline-none focus:border-violet-500/50"
                  />
                </div>
              </div>
              
              <div className="space-y-3 max-h-[360px] overflow-y-auto pr-1 custom-scrollbar">
                {Object.entries(groupedStyles).map(([category, items]) => {
                  const isExpanded = styleSearch ? true : expandedCategory === category;
                  return (
                    <div key={category} className="bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] rounded-xl overflow-hidden">
                      <button
                        onClick={() => !styleSearch && setExpandedCategory(isExpanded ? null : category)}
                        className="w-full flex items-center justify-between p-3 bg-[var(--color-bg-elevated)] hover:bg-[var(--color-bg-surface-hover)] transition-colors"
                      >
                        <span className="text-sm font-medium text-[var(--color-text-secondary)]">{category} <span className="text-[11px] text-[var(--color-text-ghost)] ml-1">({items.length})</span></span>
                        {!styleSearch && (
                          <ChevronDown 
                            size={16} 
                            className={cn("text-[var(--color-text-ghost)] transition-transform duration-200", isExpanded && "rotate-180")} 
                          />
                        )}
                      </button>
                      
                      <AnimatePresence initial={false}>
                        {isExpanded && (
                          <motion.div
                            initial={{ height: 0, opacity: 0 }}
                            animate={{ height: "auto", opacity: 1 }}
                            exit={{ height: 0, opacity: 0 }}
                            transition={{ duration: 0.2 }}
                          >
                            <div className="p-3 pt-0 mt-3 grid grid-cols-2 sm:grid-cols-3 gap-2">
                              {items.map((s) => (
                                <button
                                  key={s.id}
                                  onClick={() => setStyle(s.id)}
                                  className={cn(
                                    "flex flex-col items-start gap-1 p-2.5 rounded-xl text-left transition-all",
                                    style === s.id
                                      ? "bg-violet-500/12 border border-violet-500/30 glow-violet"
                                      : "bg-[var(--color-bg-base)] border border-[var(--color-border-faint)] hover:border-[var(--color-border-default)]"
                                  )}
                                >
                                  <span className="text-xl mb-0.5">{s.emoji}</span>
                                  <span className="text-xs font-semibold leading-tight">{s.label}</span>
                                  <span className="text-[10px] text-[var(--color-text-ghost)] leading-tight">{s.desc}</span>
                                </button>
                              ))}
                            </div>
                          </motion.div>
                        )}
                      </AnimatePresence>
                    </div>
                  );
                })}
                {Object.keys(groupedStyles).length === 0 && (
                  <div className="text-center py-8 text-[var(--color-text-ghost)] text-sm">
                    "{styleSearch}" için sonuç bulunamadı.
                  </div>
                )}
              </div>
            </div>

            {/* Süre */}
            <div>
              <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 block">
                <Clock size={14} className="inline mr-1.5 text-cyan-400" />
                Hedef Süre: <span className="text-violet-400">{duration}s</span>
              </label>
              <input
                type="range"
                min={15}
                max={180}
                step={5}
                value={duration}
                onChange={(e) => setDuration(Number(e.target.value))}
                className="w-full h-1.5 rounded-full bg-[var(--color-bg-elevated)] appearance-none cursor-pointer
                  [&::-webkit-slider-thumb]:appearance-none
                  [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5
                  [&::-webkit-slider-thumb]:rounded-full
                  [&::-webkit-slider-thumb]:bg-violet-500
                  [&::-webkit-slider-thumb]:shadow-[0_0_12px_rgba(139,92,246,0.4)]
                  [&::-webkit-slider-thumb]:cursor-grab"
              />
              <div className="flex justify-between text-[10px] text-[var(--color-text-ghost)] mt-1">
                <span>15s</span>
                <span>60s</span>
                <span>120s</span>
                <span>180s</span>
              </div>
            </div>

            {/* En-Boy Oranı */}
            <div>
              <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 block">
                En-Boy Oranı
              </label>
              <div className="flex gap-2">
                {aspectRatios.map((ar) => {
                  const Icon = ar.icon;
                  return (
                    <button
                      key={ar.id}
                      onClick={() => setAspectRatio(ar.id)}
                      className={cn(
                        "flex-1 flex flex-col items-center gap-1.5 py-3 rounded-xl text-xs transition-all",
                        aspectRatio === ar.id
                          ? "bg-violet-500/12 border border-violet-500/30 text-violet-300"
                          : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)] hover:border-[var(--color-border-default)]"
                      )}
                    >
                      <Icon size={20} />
                      <span className="font-semibold">{ar.label}</span>
                      <span className="text-[10px] text-[var(--color-text-ghost)]">{ar.desc}</span>
                    </button>
                  );
                })}
              </div>
            </div>
          </motion.div>
        )}

        {currentStep === 2 && (
          <motion.div
            key="step-2"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
            className="space-y-6"
          >
            {/* Özet */}
            <div className="card-surface p-5 space-y-4">
              <h3 className="font-[family-name:var(--font-display)] text-base font-semibold">Proje Özeti</h3>
              <div className="grid grid-cols-2 gap-3 text-sm">
                <div>
                  <span className="text-[var(--color-text-muted)] text-xs">Konu</span>
                  <p className="font-medium mt-0.5 line-clamp-2">{topic || "—"}</p>
                </div>
                <div>
                  <span className="text-[var(--color-text-muted)] text-xs">Dil</span>
                  <p className="font-medium mt-0.5">
                    {languages.find((l) => l.code === language)?.flag}{" "}
                    {languages.find((l) => l.code === language)?.label}
                  </p>
                </div>
                <div>
                  <span className="text-[var(--color-text-muted)] text-xs">Stil</span>
                  <p className="font-medium mt-0.5">
                    {videoStyles.find((s) => s.id === style)?.emoji}{" "}
                    {videoStyles.find((s) => s.id === style)?.label}
                  </p>
                </div>
                <div>
                  <span className="text-[var(--color-text-muted)] text-xs">Süre / Oran</span>
                  <p className="font-medium mt-0.5">{duration}s • {aspectRatios.find((a) => a.id === aspectRatio)?.label}</p>
                </div>
              </div>
            </div>

            {/* Generate butonu */}
            <button
              onClick={handleGenerate}
              disabled={isGenerating}
              className={cn(
                "w-full py-4 rounded-xl font-semibold text-base flex items-center justify-center gap-2 transition-all",
                isGenerating
                  ? "bg-violet-500/20 text-violet-300 cursor-wait"
                  : "btn-primary text-lg"
              )}
            >
              {isGenerating ? (
                <>
                  <Loader2 size={20} className="animate-spin" />
                  <span>AI Senaryo Üretiliyor...</span>
                </>
              ) : (
                <>
                  <Wand2 size={20} />
                  <span>AI ile Senaryo Üret</span>
                </>
              )}
            </button>

            <p className="text-center text-[11px] text-[var(--color-text-ghost)]">
              Bu işlem 1 kredi kullanır • Tahmini süre: ~15 saniye
            </p>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Navigation Buttons */}
      <div className="flex items-center justify-between mt-8 pt-4 border-t border-[var(--color-border-faint)]">
        <button
          onClick={() => setCurrentStep((s) => Math.max(0, s - 1))}
          disabled={currentStep === 0}
          className={cn(
            "flex items-center gap-1.5 text-sm font-medium transition-colors",
            currentStep === 0
              ? "text-[var(--color-text-ghost)] cursor-not-allowed"
              : "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]"
          )}
        >
          <ArrowLeft size={16} />
          Geri
        </button>
        {currentStep < steps.length - 1 && (
          <button
            onClick={() => setCurrentStep((s) => Math.min(steps.length - 1, s + 1))}
            disabled={!canProceed}
            className={cn(
              "flex items-center gap-1.5 px-5 py-2 rounded-xl text-sm font-semibold transition-all",
              canProceed
                ? "btn-primary"
                : "bg-[var(--color-bg-elevated)] text-[var(--color-text-ghost)] cursor-not-allowed"
            )}
          >
            İleri
            <ArrowRight size={16} />
          </button>
        )}
      </div>
    </div>
  );
}
