main

src/app/[locale]/(dashboard)/dashboard/x-to-video/page.tsx

@@ -0,0 +1,418 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  AtSign,
+  Link2,
+  Loader2,
+  ArrowRight,
+  Clock,
+  Palette,
+  Monitor,
+  Smartphone,
+  Square,
+  Sparkles,
+  Wand2,
+  MessageSquare,
+  Heart,
+  Repeat2,
+  Eye,
+  Image as ImageIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useTweetPreview, useCreateFromTweet } 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 XToVideoPage() {
+  const router = useRouter();
+  const toast = useToast();
+  const tweetPreview = useTweetPreview();
+  const createFromTweet = useCreateFromTweet();
+
+  const [tweetUrl, setTweetUrl] = useState("");
+  const [style, setStyle] = useState("CINEMATIC");
+  const [duration, setDuration] = useState(60);
+  const [aspectRatio, setAspectRatio] = useState("PORTRAIT_9_16");
+  const [language, setLanguage] = useState("tr");
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [previewData, setPreviewData] = useState<any>(null);
+
+  const isValidUrl = /https?:\/\/(x\.com|twitter\.com)\/\w+\/status\/\d+/.test(tweetUrl);
+
+  const handlePreview = async () => {
+    if (!isValidUrl) {
+      toast.error("Geçerli bir X/Twitter URL'si girin (https://x.com/...)");
+      return;
+    }
+    try {
+      const result = await tweetPreview.mutateAsync(tweetUrl);
+      setPreviewData(result);
+      toast.success("Tweet başarıyla yüklendi!");
+    } catch {
+      toast.error("Tweet yüklenemedi. URL'yi kontrol edin.");
+    }
+  };
+
+  const handleGenerate = async () => {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const result: any = await createFromTweet.mutateAsync({
+        tweetUrl,
+        language,
+        aspectRatio,
+        videoStyle: style,
+        targetDuration: duration,
+      });
+      toast.success("Tweet → Video projesi oluşturuldu!");
+      const projectId = result?.id ?? result?.data?.id;
+      if (projectId) {
+        router.push(`/dashboard/projects/${projectId}`);
+      } else {
+        router.push("/dashboard/projects");
+      }
+    } catch {
+      toast.error("Proje oluşturulurken bir hata oluştu.");
+    }
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto space-y-6">
+      {/* Header */}
+      <div>
+        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-violet-500/10 border border-violet-500/20 text-violet-300 text-xs font-medium mb-3">
+          <AtSign size={12} />
+          X → Video
+        </div>
+        <h1 className="font-[family-name:var(--font-display)] text-2xl md:text-3xl font-bold">
+          Tweet'ten Video Oluştur
+        </h1>
+        <p className="text-sm text-[var(--color-text-muted)] mt-1">
+          X/Twitter yazılarını AI ile kısa videolara dönüştürün
+        </p>
+      </div>
+
+      {/* URL Input */}
+      <div className="card p-5 space-y-4">
+        <label className="text-sm font-medium text-[var(--color-text-secondary)] block">
+          <Link2 size={14} className="inline mr-1.5 text-cyan-400" />
+          Tweet URL
+        </label>
+        <div className="flex gap-2">
+          <input
+            type="url"
+            value={tweetUrl}
+            onChange={(e) => {
+              setTweetUrl(e.target.value);
+              setPreviewData(null);
+            }}
+            placeholder="https://x.com/username/status/123456..."
+            className="flex-1 px-4 py-2.5 rounded-xl bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-ghost)] focus:outline-none focus:border-violet-500/40 focus:ring-1 focus:ring-violet-500/20 transition-all"
+          />
+          <button
+            onClick={handlePreview}
+            disabled={!isValidUrl || tweetPreview.isPending}
+            className={cn(
+              "px-4 py-2.5 rounded-xl text-sm font-semibold flex items-center gap-2 transition-all shrink-0",
+              isValidUrl
+                ? "btn-primary"
+                : "bg-[var(--color-bg-elevated)] text-[var(--color-text-ghost)] cursor-not-allowed",
+            )}
+          >
+            {tweetPreview.isPending ? (
+              <Loader2 size={16} className="animate-spin" />
+            ) : (
+              <>
+                <Eye size={16} />
+                Önizle
+              </>
+            )}
+          </button>
+        </div>
+        <p className="text-[11px] text-[var(--color-text-ghost)]">
+          Thread desteği: Çoklu tweet zincirleri de otomatik olarak algılanır
+        </p>
+      </div>
+
+      {/* Tweet Preview */}
+      <AnimatePresence>
+        {previewData && (
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            className="card p-5 space-y-3"
+          >
+            <h3 className="text-sm font-semibold text-[var(--color-text-secondary)]">
+              <MessageSquare
+                size={14}
+                className="inline mr-1.5 text-violet-400"
+              />
+              Tweet Önizleme
+            </h3>
+
+            <div className="p-4 rounded-xl bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] space-y-3">
+              {/* Author */}
+              <div className="flex items-center gap-3">
+                <div className="w-9 h-9 rounded-full bg-gradient-to-br from-violet-500/20 to-cyan-500/20 flex items-center justify-center text-sm font-bold text-violet-300">
+                  {(previewData.author?.name ?? previewData.authorName ?? "X")?.[0]}
+                </div>
+                <div>
+                  <p className="text-sm font-bold text-[var(--color-text-primary)]">
+                    {previewData.author?.name ?? previewData.authorName ?? "Kullanıcı"}
+                  </p>
+                  <p className="text-[11px] text-[var(--color-text-ghost)]">
+                    @{previewData.author?.handle ?? previewData.authorHandle ?? "handle"}
+                  </p>
+                </div>
+              </div>
+
+              {/* Content */}
+              <p className="text-sm text-[var(--color-text-secondary)] whitespace-pre-line">
+                {previewData.text ?? previewData.content ?? ""}
+              </p>
+
+              {/* Images */}
+              {(previewData.images?.length > 0 || previewData.mediaUrls?.length > 0) && (
+                <div className="flex gap-2 overflow-x-auto">
+                  {(previewData.images ?? previewData.mediaUrls ?? []).map(
+                    (url: string, i: number) => (
+                      <div
+                        key={i}
+                        className="w-20 h-20 rounded-lg bg-[var(--color-bg-elevated)] overflow-hidden shrink-0"
+                      >
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img
+                          src={url}
+                          alt={`Media ${i + 1}`}
+                          className="w-full h-full object-cover"
+                        />
+                      </div>
+                    ),
+                  )}
+                </div>
+              )}
+
+              {/* Stats */}
+              <div className="flex items-center gap-4 text-[11px] text-[var(--color-text-ghost)]">
+                <span className="flex items-center gap-1">
+                  <Heart size={12} />
+                  {previewData.likes ?? previewData.stats?.likes ?? 0}
+                </span>
+                <span className="flex items-center gap-1">
+                  <Repeat2 size={12} />
+                  {previewData.retweets ?? previewData.stats?.retweets ?? 0}
+                </span>
+                <span className="flex items-center gap-1">
+                  <Eye size={12} />
+                  {previewData.views ?? previewData.stats?.views ?? 0}
+                </span>
+                {previewData.threadLength > 1 && (
+                  <span className="flex items-center gap-1 text-violet-400">
+                    <MessageSquare size={12} />
+                    {previewData.threadLength} tweet thread
+                  </span>
+                )}
+              </div>
+            </div>
+
+            {/* Images tag */}
+            {(previewData.images?.length > 0 || previewData.mediaUrls?.length > 0) && (
+              <div className="flex items-center gap-1.5 text-[11px] text-cyan-400">
+                <ImageIcon size={12} />
+                {(previewData.images ?? previewData.mediaUrls ?? []).length} görsel referans olarak kullanılacak + AI görsel üretilecek
+              </div>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Video Settings */}
+      <AnimatePresence>
+        {previewData && (
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="space-y-6"
+          >
+            {/* Language */}
+            <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-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)]",
+                    )}
+                  >
+                    <span>{l.flag}</span>
+                    {l.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Style */}
+            <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-violet-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-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)]",
+                    )}
+                  >
+                    <span>{s.emoji}</span>
+                    {s.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Duration + Aspect Ratio */}
+            <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-violet-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-violet-500
+                    [&::-webkit-slider-thumb]:shadow-[0_0_12px_rgba(139,92,246,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-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)]",
+                        )}
+                      >
+                        <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>
+
+            {/* Generate Button */}
+            <button
+              onClick={handleGenerate}
+              disabled={createFromTweet.isPending}
+              className={cn(
+                "w-full py-4 rounded-xl font-semibold text-base flex items-center justify-center gap-2 transition-all",
+                createFromTweet.isPending
+                  ? "bg-violet-500/20 text-violet-300 cursor-wait"
+                  : "btn-primary text-lg",
+              )}
+            >
+              {createFromTweet.isPending ? (
+                <>
+                  <Loader2 size={20} className="animate-spin" />
+                  <span>Video Projesi Oluşturuluyor...</span>
+                </>
+              ) : (
+                <>
+                  <Wand2 size={20} />
+                  <span>Tweet → 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>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Info Box */}
+      {!previewData && (
+        <div className="card p-5 bg-gradient-to-br from-violet-500/5 to-cyan-500/5">
+          <div className="flex items-start gap-3">
+            <Sparkles size={20} className="text-violet-400 shrink-0 mt-0.5" />
+            <div className="space-y-2">
+              <h3 className="text-sm font-semibold text-[var(--color-text-primary)]">
+                Nasıl Çalışır?
+              </h3>
+              <ol className="text-xs text-[var(--color-text-muted)] space-y-1.5 list-decimal list-inside">
+                <li>X/Twitter URL'sini yapıştırın ve "Önizle" butonuna tıklayın</li>
+                <li>Tweet içeriği otomatik olarak çekilir (thread desteği dahil)</li>
+                <li>Video stilini, süresini ve dilini seçin</li>
+                <li>AI otomatik olarak senaryo yazar ve görseller üretir</li>
+                <li>Video render edilir ve indirilmeye hazır hale gelir</li>
+              </ol>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}