"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
import {
  Link2,
  Loader2,
  ArrowRight,
  Clock,
  Palette,
  Monitor,
  Smartphone,
  Square,
  Sparkles,
  Wand2,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { useCreateFromYoutube } from "@/hooks/use-api";
import { useToast } from "@/components/ui/toast";

const videoStyles = [
  { id: "CINEMATIC", label: "Sinematik", emoji: "🎬" },
  { id: "DOCUMENTARY", label: "Belgesel", emoji: "📹" },
  { id: "EDUCATIONAL", label: "Eğitim", emoji: "📚" },
  { id: "STORYTELLING", label: "Hikâye", emoji: "📖" },
  { id: "NEWS", label: "Haber", emoji: "📰" },
];

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" },
];

const languages = [
  { code: "tr", label: "Türkçe", flag: "🇹🇷" },
  { code: "en", label: "English", flag: "🇺🇸" },
  { code: "de", label: "Deutsch", flag: "🇩🇪" },
  { code: "es", label: "Español", flag: "🇪🇸" },
];

export default function YoutubeToVideoPage() {
  const router = useRouter();
  const { toast } = useToast();

  const createFromYoutube = useCreateFromYoutube();

  const [youtubeUrl, setYoutubeUrl] = useState("");
  const [style, setStyle] = useState("CINEMATIC");
  const [duration, setDuration] = useState(60);
  const [aspectRatio, setAspectRatio] = useState("PORTRAIT_9_16");
  const [language, setLanguage] = useState("tr");

  const handleGenerate = async () => {
    if (!youtubeUrl.includes("youtube.com") && !youtubeUrl.includes("youtu.be")) {
      toast.error("Lütfen geçerli bir YouTube URL'si girin.");
      return;
    }

    try {
      const result: any = await createFromYoutube.mutateAsync({
        youtubeUrl,
        language,
        aspectRatio,
        videoStyle: style,
        targetDuration: duration,
      });

      toast.success("YouTube → Video projesi oluşturuldu!");
      router.push(`/dashboard/projects/${result.id}`);
    } catch (error) {
      toast.error("Proje oluşturulurken hata oluştu.");
    }
  };

  return (
    <div className="max-w-3xl mx-auto space-y-8 pb-24">
      {/* Header */}
      <div className="text-center space-y-3 pb-4">
        <div className="inline-flex items-center justify-center w-16 h-16 rounded-3xl bg-red-500/10 text-red-500 mb-2 ring-1 ring-red-500/20 shadow-[0_0_30px_rgba(239,68,68,0.15)]">
          <Link2 size={32} />
        </div>
        <h1 className="font-[family-name:var(--font-display)] text-3xl md:text-4xl font-bold tracking-tight text-[var(--color-text-primary)]">
          YouTube'dan Video Üret
        </h1>
        <p className="text-[var(--color-text-muted)] text-sm max-w-lg mx-auto">
          YouTube linkini yapıştırın, yapay zeka ana içeriği çıkartıp viral bir Reels/Shorts yaratsın.
        </p>
      </div>

      {/* Input */}
      <div className="card p-6 md:p-8 space-y-4">
        <div>
          <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-2 block">
            YouTube URL
          </label>
          <div className="relative">
            <input
              type="text"
              placeholder="https://www.youtube.com/watch?v=..."
              value={youtubeUrl}
              onChange={(e) => setYoutubeUrl(e.target.value)}
              className="w-full bg-[var(--color-bg-surface)] border-2 border-[var(--color-border-faint)] rounded-2xl py-4 pl-12 pr-4 text-sm 
                focus:border-red-500/50 focus:ring-4 focus:ring-red-500/10 transition-all outline-none"
            />
            <Link2
              size={18}
              className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--color-text-ghost)]"
            />
          </div>
        </div>
      </div>

      {/* Video Settings */}
      <div className="space-y-6">
        <div className="card p-5 space-y-3">
          <label className="text-sm font-medium text-[var(--color-text-secondary)]">
            Video Dili
          </label>
          <div className="flex gap-2">
            {languages.map((l) => (
              <button
                key={l.code}
                onClick={() => setLanguage(l.code)}
                className={cn(
                  "flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs transition-all",
                  language === l.code
                    ? "bg-red-500/12 border border-red-500/30 text-red-400"
                    : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)]",
                )}
              >
                <span>{l.flag}</span>
                {l.label}
              </button>
            ))}
          </div>
        </div>

        <div className="card p-5 space-y-3">
          <label className="text-sm font-medium text-[var(--color-text-secondary)]">
            <Palette size={14} className="inline mr-1.5 text-red-400" />
            Video Stili
          </label>
          <div className="flex flex-wrap gap-2">
            {videoStyles.map((s) => (
              <button
                key={s.id}
                onClick={() => setStyle(s.id)}
                className={cn(
                  "flex items-center gap-1.5 px-3 py-2 rounded-xl text-xs transition-all",
                  style === s.id
                    ? "bg-red-500/12 border border-red-500/30 text-red-400"
                    : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)]",
                )}
              >
                <span>{s.emoji}</span>
                {s.label}
              </button>
            ))}
          </div>
        </div>

        <div className="card p-5 space-y-4">
          <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-red-400">{duration}s</span>
            </label>
            <input
              type="range"
              min={15}
              max={120}
              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-red-500
                [&::-webkit-slider-thumb]:shadow-[0_0_12px_rgba(239,68,68,0.4)]
                [&::-webkit-slider-thumb]:cursor-grab"
            />
          </div>

          <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-red-500/12 border border-red-500/30 text-red-400"
                        : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-[var(--color-text-muted)]",
                    )}
                  >
                    <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>
        </div>

        <button
          onClick={handleGenerate}
          disabled={createFromYoutube.isPending || !youtubeUrl}
          className={cn(
            "w-full py-4 rounded-xl font-semibold text-base flex items-center justify-center gap-2 transition-all",
            createFromYoutube.isPending
              ? "bg-red-500/20 text-red-400 cursor-wait"
              : "bg-red-500 hover:bg-red-600 text-white shadow-lg shadow-red-500/20",
            !youtubeUrl && "opacity-50 cursor-not-allowed"
          )}
        >
          {createFromYoutube.isPending ? (
            <>
              <Loader2 size={20} className="animate-spin" />
              <span>Video Projesi Oluşturuluyor... (Bu işlem uzun sürebilir)</span>
            </>
          ) : (
            <>
              <Wand2 size={20} />
              <span>YouTube → Video Oluştur</span>
              <ArrowRight size={16} />
            </>
          )}
        </button>

        <p className="text-center text-[11px] text-[var(--color-text-ghost)]">
          Bu işlem 1 kredi kullanır • AI senaryo + görsel üretim dahil
        </p>
      </div>

    </div>
  );
}
