main

src/app/[locale]/(dashboard)/dashboard/projects/[id]/page.tsx

@@ -0,0 +1,451 @@
+'use client';
+
+import { useParams, useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
+import {
+  ArrowLeft,
+  Play,
+  Sparkles,
+  RefreshCw,
+  Clock,
+  CheckCircle2,
+  AlertCircle,
+  Loader2,
+  FileText,
+  Film,
+  Trash2,
+  MoreVertical,
+} from 'lucide-react';
+import Link from 'next/link';
+import { useState } from 'react';
+import { useProject, useGenerateScript, useApproveAndQueue, useUpdateProject, useDeleteProject } from '@/hooks/use-api';
+import { useRenderProgress } from '@/hooks/use-render-progress';
+import { SceneCard } from '@/components/project/scene-card';
+import { RenderProgress } from '@/components/project/render-progress';
+import { VideoPlayer } from '@/components/project/video-player';
+import { projectsApi } from '@/lib/api/api-service';
+
+// X (Twitter) ikonunu burada da tanımlıyoruz
+const XIcon = ({ size = 16 }: { size?: number }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+  </svg>
+);
+
+const STATUS_MAP: Record<string, { label: string; color: string; icon: React.ElementType; bgClass: string }> = {
+  DRAFT: { label: 'Taslak', color: 'text-slate-400', icon: FileText, bgClass: 'bg-slate-500/10 border-slate-500/20' },
+  GENERATING_SCRIPT: { label: 'Senaryo Üretiliyor', color: 'text-violet-400', icon: Sparkles, bgClass: 'bg-violet-500/10 border-violet-500/20' },
+  PENDING: { label: 'Kuyrukta', color: 'text-amber-400', icon: Clock, bgClass: 'bg-amber-500/10 border-amber-500/20' },
+  GENERATING_MEDIA: { label: 'Medya Üretiliyor', color: 'text-cyan-400', icon: Sparkles, bgClass: 'bg-cyan-500/10 border-cyan-500/20' },
+  RENDERING: { label: 'Video İşleniyor', color: 'text-blue-400', icon: Film, bgClass: 'bg-blue-500/10 border-blue-500/20' },
+  COMPLETED: { label: 'Tamamlandı', color: 'text-emerald-400', icon: CheckCircle2, bgClass: 'bg-emerald-500/10 border-emerald-500/20' },
+  FAILED: { label: 'Başarısız', color: 'text-red-400', icon: AlertCircle, bgClass: 'bg-red-500/10 border-red-500/20' },
+};
+
+const STYLE_LABELS: Record<string, string> = {
+  CINEMATIC: '🎬 Sinematik',
+  DOCUMENTARY: '📹 Belgesel',
+  EDUCATIONAL: '📚 Eğitici',
+  STORYTELLING: '📖 Hikaye',
+  NEWS: '📰 Haber',
+  PROMOTIONAL: '📢 Tanıtım',
+  ARTISTIC: '🎨 Sanatsal',
+  MINIMALIST: '✨ Minimalist',
+};
+
+const stagger = {
+  hidden: { opacity: 0 },
+  show: { opacity: 1, transition: { staggerChildren: 0.06 } },
+};
+
+const fadeUp = {
+  hidden: { opacity: 0, y: 12 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.4, ease: [0.16, 1, 0.3, 1] as const } },
+};
+
+export default function ProjectDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const router = useRouter();
+  const [showMenu, setShowMenu] = useState(false);
+  const [regeneratingSceneId, setRegeneratingSceneId] = useState<string | null>(null);
+
+  // Veri hook'ları
+  const { data: project, isLoading, error, refetch } = useProject(id);
+  const generateScriptMutation = useGenerateScript();
+  const approveMutation = useApproveAndQueue();
+  const deleteMutation = useDeleteProject();
+
+  // WebSocket progress
+  const renderState = useRenderProgress(
+    project?.status && ['PENDING', 'GENERATING_MEDIA', 'RENDERING'].includes(project.status) ? id : undefined,
+  );
+
+  // Sahne güncelleme
+  const handleSceneUpdate = async (sceneId: string, data: { narrationText?: string; visualPrompt?: string; subtitleText?: string }) => {
+    try {
+      await projectsApi.update(`${id}/scenes/${sceneId}` as unknown as string, data as any);
+      refetch();
+    } catch (err) {
+      console.error('Sahne güncelleme hatası:', err);
+    }
+  };
+
+  // Sahne yeniden üretim
+  const handleSceneRegenerate = async (sceneId: string) => {
+    setRegeneratingSceneId(sceneId);
+    try {
+      await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000/api'}/projects/${id}/scenes/${sceneId}/regenerate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      });
+      refetch();
+    } catch (err) {
+      console.error('Sahne yeniden üretim hatası:', err);
+    } finally {
+      setRegeneratingSceneId(null);
+    }
+  };
+
+  // Senaryo üret
+  const handleGenerateScript = () => {
+    generateScriptMutation.mutate(id, {
+      onSuccess: () => refetch(),
+    });
+  };
+
+  // Onayla ve gönder
+  const handleApprove = () => {
+    approveMutation.mutate(id, {
+      onSuccess: () => refetch(),
+    });
+  };
+
+  // Sil
+  const handleDelete = () => {
+    if (confirm('Bu projeyi silmek istediğinize emin misiniz?')) {
+      deleteMutation.mutate(id, {
+        onSuccess: () => router.push('/dashboard/projects'),
+      });
+    }
+  };
+
+  // ── Loading ──
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="flex flex-col items-center gap-3">
+          <Loader2 size={32} className="animate-spin text-violet-400" />
+          <p className="text-sm text-[var(--color-text-muted)]">Proje yükleniyor...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // ── Error ──
+  if (error || !project) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="card-surface p-8 text-center max-w-md">
+          <AlertCircle size={40} className="text-red-400 mx-auto mb-3" />
+          <h2 className="text-lg font-semibold mb-2">Proje Bulunamadı</h2>
+          <p className="text-sm text-[var(--color-text-muted)] mb-4">
+            Bu proje silinmiş veya erişim izniniz yok.
+          </p>
+          <Link href="/dashboard/projects" className="btn-primary text-sm">
+            Projelere Dön
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  const statusInfo = STATUS_MAP[project.status] || STATUS_MAP.DRAFT;
+  const StatusIcon = statusInfo.icon;
+  const isEditable = project.status === 'DRAFT' || project.status === 'FAILED';
+  const hasScript = project.scenes && project.scenes.length > 0;
+  const isRendering = ['PENDING', 'GENERATING_MEDIA', 'RENDERING'].includes(project.status);
+  const isCompleted = project.status === 'COMPLETED';
+  const tweetData = project.sourceTweetData as Record<string, any> | undefined;
+
+  return (
+    <motion.div
+      variants={stagger}
+      initial="hidden"
+      animate="show"
+      className="space-y-5 max-w-4xl mx-auto pb-8"
+    >
+      {/* ── Üst Bar — Geri + Aksiyonlar ── */}
+      <motion.div variants={fadeUp} className="flex items-center justify-between">
+        <Link
+          href="/dashboard/projects"
+          className="flex items-center gap-2 text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors"
+        >
+          <ArrowLeft size={16} />
+          Projeler
+        </Link>
+
+        <div className="relative">
+          <button
+            onClick={() => setShowMenu(!showMenu)}
+            className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:bg-[var(--color-bg-elevated)] transition-colors"
+          >
+            <MoreVertical size={16} />
+          </button>
+
+          {showMenu && (
+            <div className="absolute right-0 top-10 card-surface p-1.5 min-w-[160px] z-50 shadow-xl">
+              <button
+                onClick={() => { refetch(); setShowMenu(false); }}
+                className="w-full flex items-center gap-2 px-3 py-2 text-sm text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-elevated)] rounded-lg transition-colors"
+              >
+                <RefreshCw size={14} /> Yenile
+              </button>
+              <button
+                onClick={() => { handleDelete(); setShowMenu(false); }}
+                className="w-full flex items-center gap-2 px-3 py-2 text-sm text-red-400 hover:bg-red-500/10 rounded-lg transition-colors"
+              >
+                <Trash2 size={14} /> Sil
+              </button>
+            </div>
+          )}
+        </div>
+      </motion.div>
+
+      {/* ── Proje Header ── */}
+      <motion.div variants={fadeUp} className="card-surface p-5 md:p-6">
+        <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-2">
+              {/* Durum badge */}
+              <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium border ${statusInfo.bgClass} ${statusInfo.color}`}>
+                <StatusIcon size={12} />
+                {statusInfo.label}
+              </span>
+
+              {/* Tweet kaynak badge */}
+              {project.sourceType === 'X_TWEET' && (
+                <span className="inline-flex items-center gap-1 px-2 py-1 rounded-lg text-[10px] font-medium bg-sky-500/10 border border-sky-500/20 text-sky-400">
+                  <XIcon size={10} /> Tweet
+                </span>
+              )}
+            </div>
+
+            <h1 className="font-[family-name:var(--font-display)] text-xl md:text-2xl font-bold tracking-tight text-[var(--color-text-primary)] truncate">
+              {project.title}
+            </h1>
+
+            {project.description && (
+              <p className="text-sm text-[var(--color-text-muted)] mt-1.5 line-clamp-2">
+                {project.description}
+              </p>
+            )}
+          </div>
+
+          {/* Meta bilgiler */}
+          <div className="flex flex-wrap items-center gap-3 text-xs text-[var(--color-text-ghost)] shrink-0">
+            <span className="flex items-center gap-1">
+              <Clock size={12} /> {project.targetDuration}s
+            </span>
+            <span>{STYLE_LABELS[project.videoStyle] || project.videoStyle}</span>
+            <span className="uppercase text-[10px] tracking-wider">{project.language}</span>
+            <span className="text-[10px]">
+              {new Date(project.createdAt).toLocaleDateString('tr-TR', {
+                day: 'numeric', month: 'short', year: 'numeric',
+              })}
+            </span>
+          </div>
+        </div>
+
+        {/* Tweet kaynak bilgisi */}
+        {tweetData && (
+          <div className="mt-4 p-3 rounded-xl bg-sky-500/5 border border-sky-500/10">
+            <div className="flex items-center gap-2 mb-1">
+              <XIcon size={14} />
+              <span className="text-xs font-medium text-sky-400">
+                @{tweetData.authorUsername as string}
+              </span>
+              {tweetData.viralScore && (
+                <span className="text-[10px] px-1.5 py-0.5 rounded-md bg-amber-500/15 text-amber-400 font-medium">
+                  🔥 {String(tweetData.viralScore)}/100
+                </span>
+              )}
+            </div>
+            <p className="text-xs text-[var(--color-text-muted)] line-clamp-2">
+              {tweetData.text as string}
+            </p>
+          </div>
+        )}
+
+        {/* Aksiyon butonları */}
+        <div className="flex flex-wrap items-center gap-2 mt-4 pt-4 border-t border-[var(--color-border-faint)]">
+          {/* Senaryo üret (draft, senaryo yok) */}
+          {isEditable && !hasScript && (
+            <button
+              onClick={handleGenerateScript}
+              disabled={generateScriptMutation.isPending}
+              className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-gradient-to-r from-violet-500 to-violet-600 text-white text-sm font-medium shadow-lg shadow-violet-500/20 hover:shadow-violet-500/30 transition-shadow disabled:opacity-50"
+            >
+              {generateScriptMutation.isPending ? (
+                <Loader2 size={15} className="animate-spin" />
+              ) : (
+                <Sparkles size={15} />
+              )}
+              AI ile Senaryo Üret
+            </button>
+          )}
+
+          {/* Senaryo yeniden üret (draft/failed, senaryo var) */}
+          {isEditable && hasScript && (
+            <button
+              onClick={handleGenerateScript}
+              disabled={generateScriptMutation.isPending}
+              className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-[var(--color-bg-elevated)] text-[var(--color-text-secondary)] text-sm font-medium hover:bg-[var(--color-bg-surface)] transition-colors disabled:opacity-50"
+            >
+              {generateScriptMutation.isPending ? (
+                <Loader2 size={15} className="animate-spin" />
+              ) : (
+                <RefreshCw size={15} />
+              )}
+              Yeniden Üret
+            </button>
+          )}
+
+          {/* Onayla ve video üretimini başlat */}
+          {isEditable && hasScript && (
+            <button
+              onClick={handleApprove}
+              disabled={approveMutation.isPending}
+              className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-gradient-to-r from-emerald-500 to-emerald-600 text-white text-sm font-medium shadow-lg shadow-emerald-500/20 hover:shadow-emerald-500/30 transition-shadow disabled:opacity-50"
+            >
+              {approveMutation.isPending ? (
+                <Loader2 size={15} className="animate-spin" />
+              ) : (
+                <Play size={15} />
+              )}
+              Onayla & Video Üret
+            </button>
+          )}
+        </div>
+
+        {/* Hata mesajı */}
+        {project.errorMessage && (
+          <div className="mt-3 p-3 rounded-lg bg-red-500/10 border border-red-500/20">
+            <div className="flex items-center gap-2 mb-1">
+              <AlertCircle size={14} className="text-red-400" />
+              <span className="text-xs font-medium text-red-400">Hata</span>
+            </div>
+            <p className="text-xs text-red-400/80">{project.errorMessage}</p>
+          </div>
+        )}
+      </motion.div>
+
+      {/* ── Render Progress (WebSocket) ── */}
+      {isRendering && (
+        <motion.div variants={fadeUp}>
+          <RenderProgress renderState={renderState} />
+        </motion.div>
+      )}
+
+      {/* ── Video Player (tamamlandıysa) ── */}
+      {isCompleted && project.finalVideoUrl && (
+        <motion.div variants={fadeUp}>
+          <VideoPlayer
+            videoUrl={project.finalVideoUrl}
+            thumbnailUrl={project.thumbnailUrl}
+            title={project.title}
+          />
+        </motion.div>
+      )}
+
+      {/* ── Sahneler ── */}
+      {hasScript && (
+        <motion.div variants={fadeUp}>
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-sm font-semibold text-[var(--color-text-primary)] flex items-center gap-2">
+              <Film size={15} className="text-violet-400" />
+              Senaryo — {project.scenes!.length} sahne
+            </h2>
+            <span className="text-[10px] text-[var(--color-text-ghost)]">
+              Toplam: {project.scenes!.reduce((sum, s) => sum + s.duration, 0)}s
+            </span>
+          </div>
+
+          <div className="space-y-3">
+            {project.scenes!.map((scene) => (
+              <SceneCard
+                key={scene.id}
+                scene={scene}
+                isEditable={isEditable}
+                onUpdate={handleSceneUpdate}
+                onRegenerate={handleSceneRegenerate}
+                isRegenerating={regeneratingSceneId === scene.id}
+              />
+            ))}
+          </div>
+        </motion.div>
+      )}
+
+      {/* ── Boş durum (senaryo yok) ── */}
+      {!hasScript && isEditable && (
+        <motion.div variants={fadeUp} className="card-surface p-8 text-center">
+          <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-violet-500/15 to-cyan-400/10 mx-auto mb-4 flex items-center justify-center">
+            <Sparkles size={28} className="text-violet-400" />
+          </div>
+          <h3 className="text-base font-semibold mb-1.5">Henüz senaryo üretilmedi</h3>
+          <p className="text-sm text-[var(--color-text-muted)] mb-4 max-w-sm mx-auto">
+            AI'ın projeniz için etkileyici bir video senaryosu oluşturmasını sağlayın.
+          </p>
+          <button
+            onClick={handleGenerateScript}
+            disabled={generateScriptMutation.isPending}
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-gradient-to-r from-violet-500 to-violet-600 text-white text-sm font-medium shadow-lg shadow-violet-500/20 hover:shadow-violet-500/30 transition-shadow disabled:opacity-50"
+          >
+            {generateScriptMutation.isPending ? (
+              <Loader2 size={15} className="animate-spin" />
+            ) : (
+              <Sparkles size={15} />
+            )}
+            Senaryo Üret
+          </button>
+        </motion.div>
+      )}
+
+      {/* ── Render Geçmişi ── */}
+      {project.renderJobs && project.renderJobs.length > 0 && (
+        <motion.div variants={fadeUp}>
+          <h2 className="text-sm font-semibold text-[var(--color-text-primary)] mb-3 flex items-center gap-2">
+            <Clock size={15} className="text-cyan-400" />
+            Render Geçmişi
+          </h2>
+          <div className="space-y-2">
+            {project.renderJobs.map((job) => (
+              <div key={job.id} className="card-surface p-3 flex items-center justify-between">
+                <div className="flex items-center gap-2.5">
+                  <div className={`w-2 h-2 rounded-full ${
+                    job.status === 'COMPLETED' ? 'bg-emerald-400' :
+                    job.status === 'FAILED' ? 'bg-red-400' :
+                    'bg-amber-400 animate-pulse'
+                  }`} />
+                  <span className="text-xs text-[var(--color-text-secondary)]">
+                    Deneme #{job.attemptNumber}
+                  </span>
+                  <span className="text-[10px] text-[var(--color-text-ghost)]">
+                    {job.status}
+                  </span>
+                </div>
+                <div className="flex items-center gap-3 text-[10px] text-[var(--color-text-ghost)]">
+                  {job.processingTimeMs && (
+                    <span>{(job.processingTimeMs / 1000).toFixed(1)}s</span>
+                  )}
+                  <span>
+                    {new Date(job.createdAt).toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' })}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </motion.div>
+      )}
+    </motion.div>
+  );
+}