"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { cn } from "@/lib/utils";
import { useCreateFromText } from "@/hooks/use-api";
import { useToast } from "@/components/ui/toast";
import { Loader2, ArrowRight, Wand2, Type } from "lucide-react";
import {
  LanguageSelector,
  StyleSelector,
  DurationSelector,
  AspectRatioSelector,
} from "@/components/projects/ProjectConfiguration";

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

  const createFromText = useCreateFromText();

  const [textInput, setTextInput] = useState("");
  
  const [style, setStyle] = useState("CINEMATIC");
  const [cinematicReference, setCinematicReference] = useState("");
  const [duration, setDuration] = useState(60);
  const [aspectRatio, setAspectRatio] = useState("PORTRAIT_9_16");
  const [language, setLanguage] = useState("tr");

  const handleGenerate = async () => {
    if (!textInput.trim()) {
      toast("error", "Lütfen bir konu, hikaye veya metin girin.");
      return;
    }

    try {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const result: any = await createFromText.mutateAsync({
        text: textInput,
        language,
        aspectRatio,
        videoStyle: style,
        cinematicReference: cinematicReference ? cinematicReference : undefined,
        targetDuration: duration,
      });

      toast("success", "Video projesi başarıyla oluşturuldu!");
      router.push(`/dashboard/projects/${result.id}`);
    } catch (error) {
      toast("error", "Proje oluşturulurken bir 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-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] mb-2 ring-1 ring-[var(--color-bg-inverted)]/20 shadow-none">
          <Type 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)]">
          Metinden Video Üret
        </h1>
        <p className="text-[var(--color-text-muted)] text-sm max-w-lg mx-auto">
          İstediğiniz konuyu, bir hikayeyi veya makaleyi kopyalayıp yapıştırın; yapay zeka sizin için detaylı bir video senaryosu üretsin.
        </p>
      </div>

      {/* Input */}
      <div className="card p-6 md:p-8 space-y-6">
        <div>
          <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-2 block">
            Fikriniz veya Metniniz
          </label>
          <textarea
            value={textInput}
            onChange={(e) => setTextInput(e.target.value)}
            placeholder="Örn: Evrenin başlangıcı ve kara deliklerin sırları hakkında detaylı ve sürükleyici bir anlatım..."
            rows={6}
            className="w-full bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-bg-inverted)]/50 resize-none transition-all placeholder:text-[var(--color-text-ghost)]"
          />
        </div>

        {/* Configurations */}
        <div className="space-y-8 pt-6 border-t border-[var(--color-border-faint)]">
          
          <LanguageSelector value={language} onChange={setLanguage} />

          <StyleSelector 
            value={style} 
            onChange={setStyle} 
            cinematicReference={cinematicReference} 
            onCinematicReferenceChange={setCinematicReference} 
          />

          <DurationSelector value={duration} onChange={setDuration} />

          <AspectRatioSelector value={aspectRatio} onChange={setAspectRatio} />

        </div>
      </div>

      {/* Action Button */}
      <div className="flex justify-end">
        <button
          onClick={handleGenerate}
          disabled={createFromText.isPending || !textInput.trim()}
          className={cn(
            "group relative overflow-hidden flex items-center gap-3 px-8 py-4 rounded-2xl font-bold text-[var(--color-text-inverted)] shadow-none transition-all",
            "bg-[var(--color-bg-inverted)] hover:scale-[1.02]",
            "disabled:opacity-50 disabled:hover:scale-100 disabled:cursor-not-allowed"
          )}
        >
          {createFromText.isPending ? (
            <>
              <Loader2 size={20} className="animate-spin" />
              <span>Yapay Zeka Senaryoyu Yazıyor...</span>
            </>
          ) : (
            <>
              <Wand2 size={20} className="group-hover:rotate-12 transition-transform" />
              <span>Video Projesi Oluştur</span>
              <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
            </>
          )}
        </button>
      </div>
    </div>
  );
}
