// AI Editor: 1-click highlight reel generator.
//
// Runs scene detection via canvas frame hashing + audio loudness analysis
// from the audio buffer. Scores segments and packs the top K into a fresh
// timeline.

'use client';

import { useState } from 'react';
import { Sparkles, Loader2, Wand2 } from 'lucide-react';
import { useEditor } from '@/store/editor';
import { uid } from '@/store/editor/types';
import { Section, NumberField } from './FormFields';
import {
  scoreHighlights,
  detectScenesViaCanvas,
  computeLoudness,
  segmentsToClips,
} from '@/lib/ai/score-segments';

type Phase = 'idle' | 'scenes' | 'loudness' | 'scoring' | 'done';

export function AutoEditProperties() {
  const assets = useEditor((s) => s.assets);
  const tracks = useEditor((s) => s.tracks);
  const pushHistory = useEditor((s) => s.pushHistory);
  const setToast = useEditor((s) => s.setToast);

  const [busy, setBusy] = useState(false);
  const [phase, setPhase] = useState<Phase>('idle');
  const [progress, setProgress] = useState(0);
  const [targetSec, setTargetSec] = useState(30);
  const [maxSegment, setMaxSegment] = useState(6);

  async function run() {
    if (busy) return;
    const videoAsset = assets.find((a) => a.kind === 'video');
    if (!videoAsset) {
      setToast({ message: 'ต้องมีวิดีโอในไลบรารีก่อน', level: 'error' });
      return;
    }
    setBusy(true);
    setProgress(0);
    setPhase('scenes');
    try {
      // Step 1: scene detection via canvas
      setToast({ message: 'กำลังตรวจจับฉากตัดต่อ...', level: 'info' });
      const sceneChanges = await detectScenesViaCanvas(videoAsset, 0.15, 60);
      setProgress(30);

      // Step 2: audio loudness — prefer a separate audio asset, fall back
      // to the video's built-in audio (decode via Web Audio first, extract
      // via FFmpeg.wasm if that fails).
      setPhase('loudness');
      setToast({ message: 'กำลังวิเคราะห์ระดับเสียง...', level: 'info' });
      let audioBuffer: AudioBuffer | undefined;
      const audioAsset = assets.find((a) => a.kind === 'audio');
      if (audioAsset?.audioBuffer) {
        audioBuffer = audioAsset.audioBuffer;
      } else if (videoAsset.audioBuffer) {
        audioBuffer = videoAsset.audioBuffer;
      } else if (videoAsset.kind === 'video') {
        try {
          const { extractAudioFromVideo } = await import('@/lib/ffmpeg');
          const resp = await fetch(videoAsset.url);
          const blob = await resp.blob();
          const file = new File([blob], videoAsset.name, { type: blob.type || 'video/mp4' });
          const extracted = await extractAudioFromVideo(file);
          audioBuffer = extracted.audioBuffer;
        } catch {
          audioBuffer = undefined;
        }
      }
      const { loudnessDb, windowStarts } = computeLoudness(audioBuffer, 0.5);
      setProgress(60);

      // Step 3: scoring + selection
      setPhase('scoring');
      setToast({ message: 'AI กำลังเลือกช่วงไฮไลต์...', level: 'info' });
      const result = scoreHighlights(
        { asset: videoAsset, sceneChanges, loudnessDb, rmsWindowsStart: windowStarts },
        {
          targetDurationSec: targetSec,
          maxSegmentSec: maxSegment,
          minSegmentSec: 1.5,
        },
      );
      setProgress(90);

      if (result.segments.length === 0) {
        setToast({ message: 'ไม่พบช่วงที่น่าสนใจ — ลองเพิ่ม target duration', level: 'info' });
        return;
      }

      // Step 4: build new timeline (keep current tracks; add clips to a fresh pair).
      pushHistory('AI ตัดต่อ');
      const newVideoTrackId = uid();
      const newAudioTrackId = uid();
      const newVideoTrack = {
        id: newVideoTrackId,
        kind: 'video' as const,
        name: 'วิดีโอ AI',
        volume: 1,
        muted: false,
        background: { color: '#000000', blur: false },
      };
      const newAudioTrack = {
        id: newAudioTrackId,
        kind: 'audio' as const,
        name: 'เสียง AI',
        volume: 1,
        muted: false,
        noiseReduction: { enabled: false, amount: 0.5 },
      };
      const newClips = segmentsToClips(
        result.segments,
        videoAsset.id,
        newVideoTrackId,
        newAudioTrackId,
      ).map((c) => ({ ...c, id: uid() }));

      useEditor.setState((s) => ({
        tracks: [...s.tracks, newVideoTrack, newAudioTrack],
        clips: [...s.clips, ...newClips],
      }));

      setPhase('done');
      setProgress(100);
      setToast({
        message: `AI ตัดให้แล้ว ${result.segments.length} ช่วง · ${result.totalDuration.toFixed(1)}s จาก ${videoAsset.duration.toFixed(1)}s`,
        level: 'success',
      });
    } catch (err) {
      const msg = err instanceof Error ? err.message : 'AI ตัดล้มเหลว';
      setToast({ message: `AI ตัดล้มเหลว: ${msg}`, level: 'error' });
    } finally {
      setBusy(false);
      setTimeout(() => {
        setPhase('idle');
        setProgress(0);
      }, 1500);
    }
  }

  return (
    <Section title="AI ตัดต่ออัตโนมัติ" icon={<Wand2 size={14} />}>
      <div className="space-y-2">
        <div className="rounded-md border border-capcut-purple/30 bg-capcut-purple/5 p-2 space-y-2">
          <div className="flex items-center gap-1.5 text-[11px] font-semibold text-capcut-purple">
            <Sparkles size={12} /> ตัดไฮไลต์ให้อัตโนมัติ
          </div>
          <p className="text-[10px] text-capcut-muted leading-snug">
            AI จะวิเคราะห์ฉาก + ระดับเสียง แล้วเลือกช่วงที่น่าสนใจที่สุดมาต่อกัน
          </p>
          <NumberField
            label="เป้าความยาว (วินาที)"
            value={targetSec}
            step={5}
            min={10}
            max={300}
            onChange={(v) => setTargetSec(Math.max(10, Math.min(300, Math.round(v))))}
          />
          <NumberField
            label="ความยาวต่อช่วงสูงสุด (วินาที)"
            value={maxSegment}
            step={1}
            min={2}
            max={20}
            onChange={(v) => setMaxSegment(Math.max(2, Math.min(20, Math.round(v))))}
          />
          <button
            type="button"
            onClick={run}
            disabled={busy || assets.length === 0}
            className="w-full h-9 rounded-md bg-gradient-to-r from-capcut-purple to-capcut-blue hover:opacity-90 text-white text-xs font-medium flex items-center justify-center gap-1.5 disabled:opacity-60"
          >
            {busy ? (
              <>
                <Loader2 size={12} className="animate-spin" /> {phaseLabel(phase)}
              </>
            ) : (
              <>
                <Wand2 size={12} /> 🪄 AI ตัดให้
              </>
            )}
          </button>
          {busy && (
            <div className="space-y-1">
              <div className="h-1 bg-capcut-surface rounded overflow-hidden">
                <div
                  className="h-full bg-gradient-to-r from-capcut-purple to-capcut-blue transition-all"
                  style={{ width: `${progress}%` }}
                />
              </div>
              <div className="text-[10px] text-capcut-muted text-center">{phaseLabel(phase)} · {progress}%</div>
            </div>
          )}
        </div>
      </div>
    </Section>
  );
}

function phaseLabel(p: Phase): string {
  switch (p) {
    case 'scenes':
      return 'ตรวจจับฉาก';
    case 'loudness':
      return 'วิเคราะห์เสียง';
    case 'scoring':
      return 'ให้คะแนน';
    case 'done':
      return 'เสร็จสิ้น';
    default:
      return 'พร้อม';
  }
}