src/components/study-chat/InlineVideoRender.tsx

"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { AlertCircle, Cloud, Download, LoaderCircle, Play, Sparkles } from "lucide-react";
import { useJobPolling } from "@/hooks/useJobPolling";
import { generateBrainVideoPlan } from "@/lib/api/brain";
import { resolveMediaUrl, normalizeApiError } from "@/lib/api/client";
import { createVideoRenderJob, createVideoScenePlan, getVideoRenderJob } from "@/lib/api/video";
import type {
  BrainVideoPlanResponse,
  VideoFormat,
  VideoPlanDurationType,
  VideoRenderJob,
  VideoScenePlanResponse,
} from "@/lib/api/types";
import { prepareScenePlanForRender } from "@/lib/video/durations";

type RenderStage = "planning" | "voice" | "building" | "ready" | "failed";

type Props = {
  topic: string;
  sourceId: string | null;
  minutes: number;
  format?: "16:9" | "9:16";
};

function modeForMinutes(minutes: number): VideoPlanDurationType {
  if (minutes <= 1) return "quick_concept";
  if (minutes <= 5) return "quick_concept";
  if (minutes >= 30) return "deep_masterclass";
  return "exam_focus";
}

function stageLabel(stage: RenderStage, job: VideoRenderJob | null): string {
  if (stage === "ready") return "Ready";
  if (stage === "failed") return "Failed";
  if (stage === "planning") return "Planning lesson";
  if (stage === "voice") return "Generating voice";
  if (stage === "building") {
    const step = job?.current_step ?? "";
    if (step === "rendering_video") return "Rendering video";
    if (step === "validating_output") return "Validating output";
    if (step === "uploading_or_saving") return "Saving file";
    return "Building video";
  }
  return "Working";
}

function scenePlanFromBrainPlan(
  plan: BrainVideoPlanResponse,
  language: string,
  visualStyle: string,
  format: VideoFormat,
): VideoScenePlanResponse {
  const scenes = plan.scenes.map((scene, index) => {
    const durationSeconds = Number(scene.duration_seconds) || 30;
    const subtitleText = Array.isArray(scene.subtitle_segments)
      ? scene.subtitle_segments.join(" ")
      : scene.narration;
    return {
      scene_id: index + 1,
      type: scene.scene_type || "explain",
      duration_seconds: durationSeconds,
      screen_text: scene.on_screen_text || scene.title,
      voice_text: scene.narration,
      subtitle_text: subtitleText,
      subtitle_segments: [{ start: 0, end: durationSeconds, text: subtitleText }],
      keywords: plan.revision_keywords.slice(0, 5),
      visual_hint: scene.visual_direction || visualStyle,
      purpose: scene.exam_tip || scene.title,
    };
  });
  const totalDuration = scenes.reduce((sum, scene) => sum + scene.duration_seconds, 0);
  return {
    title: plan.title,
    duration_minutes: Math.max(0.1, Math.round((totalDuration / 60) * 10) / 10),
    total_duration_seconds: totalDuration,
    language,
    style: plan.narration_style,
    visual_style: visualStyle,
    video_format: format,
    learning_goal: plan.exam_focus ? "Exam-focused lesson" : "Concept lesson",
    voice_mode: "english_soft",
    scenes,
    recap: plan.revision_keywords,
    quick_test: plan.quiz_moments,
    evidence_label: plan.evidence_label,
  };
}

export function InlineVideoRender({ topic, sourceId, minutes, format = "16:9" }: Props) {
  const [stage, setStage] = useState<RenderStage>("planning");
  const [job, setJob] = useState<VideoRenderJob | null>(null);
  const [scenePlan, setScenePlan] = useState<VideoScenePlanResponse | null>(null);
  const [error, setError] = useState<string | null>(null);
  const startedRef = useRef(false);

  const pollFetcher = useCallback(async () => {
    if (!job) throw new Error("No job");
    return getVideoRenderJob(job.id);
  }, [job]);

  useJobPolling({
    enabled: Boolean(job && (job.status === "queued" || job.status === "running")),
    fetcher: pollFetcher,
    shouldContinue: (next) => next.status === "queued" || next.status === "running",
    onData: (next) => {
      setJob(next);
      if (next.status === "ready") setStage("ready");
      else if (next.status === "failed") {
        setStage("failed");
        setError("Render failed. Try a different source or topic.");
      } else if (next.current_step?.startsWith("generating_audio")) setStage("voice");
      else setStage("building");
    },
    onError: () => setError("Connection lost. Refresh to check status."),
  });

  const run = useCallback(async () => {
    try {
      setStage("planning");
      setError(null);
      const mode = modeForMinutes(minutes);
      const language = "English";
      const visualStyle = "clean_explainer";

      const brainPlan = await generateBrainVideoPlan({
        topic,
        video_mode: mode,
        teaching_style: "visual_tutor",
        language_preference: language,
        format,
        source_id: sourceId,
        source_ids: sourceId ? [sourceId] : [],
        level: "intermediate",
        goal: "good marks",
      });

      const targetSeconds = minutes * 60;
      let plan: VideoScenePlanResponse;
      if (sourceId) {
        try {
          const generated = await createVideoScenePlan({
            document_id: sourceId,
            title: brainPlan.title,
            language,
            duration_minutes: minutes,
            visual_style: visualStyle,
            video_format: format,
          });
          plan = prepareScenePlanForRender(generated, targetSeconds);
        } catch {
          plan = prepareScenePlanForRender(
            scenePlanFromBrainPlan(brainPlan, language, visualStyle, format),
            targetSeconds,
          );
        }
      } else {
        plan = prepareScenePlanForRender(
          scenePlanFromBrainPlan(brainPlan, language, visualStyle, format),
          targetSeconds,
        );
      }
      setScenePlan(plan);
      setStage("voice");

      const nextJob = await createVideoRenderJob({
        scene_plan: plan,
        title: plan.title,
        allow_mock_audio: process.env.NODE_ENV !== "production",
        voice_mode: "english_soft",
        voice: "calm_teacher",
        language: plan.language,
      });
      setJob(nextJob);
      setStage(nextJob.status === "ready" ? "ready" : "building");
    } catch (caught) {
      setError(`Could not build video. ${normalizeApiError(caught)}`);
      setStage("failed");
    }
  }, [format, minutes, sourceId, topic]);

  useEffect(() => {
    if (startedRef.current) return;
    startedRef.current = true;
    void run();
  }, [run]);

  const progress = job?.progress ?? (stage === "planning" ? 20 : stage === "voice" ? 45 : stage === "building" ? 70 : 0);
  const finalUrl = resolveMediaUrl(job?.public_url || job?.download_url);
  const isWorking = stage === "planning" || stage === "voice" || stage === "building";

  return (
    <article className="animate-msg-assistant rounded-xl border border-white/[0.06] bg-[#080809] p-5">
      <div className="mb-3 flex items-center gap-2.5">
        <Play className="size-4 shrink-0 text-white/35" />
        <div className="min-w-0 flex-1">
          <span className="text-[10px] font-medium uppercase tracking-[0.08em] text-white/22">Study video</span>
          <h2 className="truncate text-[15px] font-semibold tracking-[-0.01em] text-white/95">{scenePlan?.title || topic}</h2>
        </div>
        <span className="shrink-0 rounded-md border border-white/[0.06] px-2 py-0.5 text-[10px] font-medium text-white/40">
          {minutes}min · {format}
        </span>
      </div>

      {finalUrl && stage === "ready" ? (
        <div className="space-y-3">
          <div className="overflow-hidden rounded-lg border border-white/[0.06] bg-black">
            <video
              src={finalUrl}
              controls
              playsInline
              className="aspect-video w-full"
            />
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <a
              href={finalUrl}
              download
              className="inline-flex items-center gap-1.5 rounded-md border border-white/[0.08] px-3 py-1.5 text-[12px] font-medium text-white/65 transition hover:border-white/[0.14] hover:text-white"
            >
              <Download className="size-3" />
              Download MP4
            </a>
            {job?.storage_provider === "cloudinary" || /res\.cloudinary\.com/i.test(finalUrl) ? (
              <span className="inline-flex items-center gap-1 rounded-md border border-emerald-400/15 bg-emerald-500/[0.04] px-2 py-1 text-[10.5px] font-medium text-emerald-300/80">
                <Cloud className="size-2.5" />
                Saved to cloud
              </span>
            ) : null}
            {job?.duration_seconds ? (
              <span className="inline-flex items-center text-[11px] text-white/35">
                {Math.round(job.duration_seconds)}s · {job.scene_count} scenes
              </span>
            ) : null}
          </div>
        </div>
      ) : null}

      {isWorking ? (
        <div className="space-y-3">
          <div className="flex items-center gap-2.5">
            <LoaderCircle className="size-3.5 shrink-0 animate-spin text-white/50" />
            <p className="text-[13px] text-white/65">{stageLabel(stage, job)}</p>
            <span className="ml-auto text-[11px] font-medium text-white/35">{Math.round(progress)}%</span>
          </div>
          <div className="h-1 overflow-hidden rounded-full bg-white/[0.04]">
            <div
              className="h-full bg-white/60 transition-all duration-500"
              style={{ width: `${Math.max(3, Math.min(progress, 100))}%` }}
            />
          </div>
          {scenePlan ? (
            <p className="text-[11px] text-white/30">
              {scenePlan.scenes.length} scenes · {Math.round(scenePlan.total_duration_seconds ?? 0)}s lesson
            </p>
          ) : (
            <p className="text-[11px] text-white/30">
              {sourceId ? "Reading source" : "Working from topic"} · this can take a few minutes
            </p>
          )}
        </div>
      ) : null}

      {stage === "failed" || error ? (
        <div className="mt-2 flex items-start gap-2 rounded-md border border-rose-400/15 bg-rose-500/[0.04] p-3">
          <AlertCircle className="mt-0.5 size-3.5 shrink-0 text-rose-300/70" />
          <p className="text-[12px] leading-5 text-rose-200/80">{error || "Render failed."}</p>
        </div>
      ) : null}

      {stage === "ready" && !finalUrl ? (
        <div className="flex items-start gap-2 rounded-md border border-white/[0.06] bg-white/[0.02] p-3 text-[12px] text-white/55">
          <Sparkles className="mt-0.5 size-3.5 shrink-0 text-white/40" />
          Lesson plan built. Video render unavailable — try again later.
        </div>
      ) : null}
    </article>
  );
}