path: root/apps/web/src/components/editor/preview-panel.tsx

"use client";

import {
  useTimelineStore,
  type TimelineClip,
  type TimelineTrack,
} from "@/stores/timeline-store";
import { useMediaStore, type MediaItem } from "@/stores/media-store";
import { usePlaybackStore } from "@/stores/playback-store";
import { VideoPlayer } from "@/components/ui/video-player";
import { Button } from "@/components/ui/button";
import { Play, Pause, Volume2, VolumeX } from "lucide-react";
import { useState, useRef } from "react";

// Debug flag - set to false to hide active clips info
const SHOW_DEBUG_INFO = process.env.NODE_ENV === "development";

interface ActiveClip {
  clip: TimelineClip;
  track: TimelineTrack;
  mediaItem: MediaItem | null;
}

export function PreviewPanel() {
  const { tracks } = useTimelineStore();
  const { mediaItems } = useMediaStore();
  const { isPlaying, toggle, currentTime, muted, toggleMute, volume } =
    usePlaybackStore();
  const [canvasSize, setCanvasSize] = useState({ width: 1920, height: 1080 });
  const [showDebug, setShowDebug] = useState(SHOW_DEBUG_INFO);
  const previewRef = useRef<HTMLDivElement>(null);

  // Get active clips at current time
  const getActiveClips = (): ActiveClip[] => {
    const activeClips: ActiveClip[] = [];

    tracks.forEach((track) => {
      track.clips.forEach((clip) => {
        const clipStart = clip.startTime;
        const clipEnd =
          clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);

        if (currentTime >= clipStart && currentTime < clipEnd) {
          const mediaItem =
            clip.mediaId === "test"
              ? null // Test clips don't have a real media item
              : mediaItems.find((item) => item.id === clip.mediaId) || null;

          activeClips.push({ clip, track, mediaItem });
        }
      });
    });

    return activeClips;
  };

  const activeClips = getActiveClips();
  const aspectRatio = canvasSize.width / canvasSize.height;

  // Render a clip
  const renderClip = (clipData: ActiveClip, index: number) => {
    const { clip, mediaItem } = clipData;

    // Test clips
    if (!mediaItem || clip.mediaId === "test") {
      return (
        <div
          key={clip.id}
          className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"
        >
          <div className="text-center">
            <div className="text-2xl mb-2">🎬</div>
            <p className="text-xs text-white">{clip.name}</p>
          </div>
        </div>
      );
    }

    // Video clips
    if (mediaItem.type === "video") {
      return (
        <div key={clip.id} className="absolute inset-0">
          <VideoPlayer
            src={mediaItem.url}
            poster={mediaItem.thumbnailUrl}
            clipStartTime={clip.startTime}
            trimStart={clip.trimStart}
            trimEnd={clip.trimEnd}
            clipDuration={clip.duration}
          />
        </div>
      );
    }

    // Image clips
    if (mediaItem.type === "image") {
      return (
        <div key={clip.id} className="absolute inset-0">
          <img
            src={mediaItem.url}
            alt={mediaItem.name}
            className="w-full h-full object-cover"
            draggable={false}
          />
        </div>
      );
    }

    // Audio clips (visual representation)
    if (mediaItem.type === "audio") {
      return (
        <div
          key={clip.id}
          className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center"
        >
          <div className="text-center">
            <div className="text-2xl mb-2">🎵</div>
            <p className="text-xs text-white">{mediaItem.name}</p>
          </div>
        </div>
      );
    }

    return null;
  };

  // Canvas presets
  const canvasPresets = [
    { name: "16:9 HD", width: 1920, height: 1080 },
    { name: "16:9 4K", width: 3840, height: 2160 },
    { name: "9:16 Mobile", width: 1080, height: 1920 },
    { name: "1:1 Square", width: 1080, height: 1080 },
    { name: "4:3 Standard", width: 1440, height: 1080 },
  ];

  return (
    <div className="h-full w-full flex flex-col min-h-0 min-w-0">
      {/* Controls */}
      <div className="border-b p-2 flex items-center gap-2 text-xs flex-shrink-0">
        <span className="text-muted-foreground">Canvas:</span>
        <select
          value={`${canvasSize.width}x${canvasSize.height}`}
          onChange={(e) => {
            const preset = canvasPresets.find(
              (p) => `${p.width}x${p.height}` === e.target.value
            );
            if (preset)
              setCanvasSize({ width: preset.width, height: preset.height });
          }}
          className="bg-background border rounded px-2 py-1 text-xs"
        >
          {canvasPresets.map((preset) => (
            <option
              key={preset.name}
              value={`${preset.width}x${preset.height}`}
            >
              {preset.name} ({preset.width}×{preset.height})
            </option>
          ))}
        </select>

        {/* Debug Toggle - Only show in development */}
        {SHOW_DEBUG_INFO && (
          <Button
            variant="text"
            size="sm"
            onClick={() => setShowDebug(!showDebug)}
            className="text-xs"
          >
            Debug {showDebug ? "ON" : "OFF"}
          </Button>
        )}

        <Button
          variant="outline"
          size="sm"
          onClick={toggleMute}
          className="ml-auto"
        >
          {muted || volume === 0 ? (
            <VolumeX className="h-3 w-3 mr-1" />
          ) : (
            <Volume2 className="h-3 w-3 mr-1" />
          )}
          {muted || volume === 0 ? "Unmute" : "Mute"}
        </Button>

        <Button variant="outline" size="sm" onClick={toggle}>
          {isPlaying ? (
            <Pause className="h-3 w-3 mr-1" />
          ) : (
            <Play className="h-3 w-3 mr-1" />
          )}
          {isPlaying ? "Pause" : "Play"}
        </Button>
      </div>

      {/* Preview Area */}
      <div className="flex-1 flex items-center justify-center p-2 sm:p-4 bg-gray-900 min-h-0 min-w-0">
        <div
          ref={previewRef}
          className="relative overflow-hidden rounded-sm max-w-full max-h-full bg-black border border-gray-600"
          style={{
            aspectRatio: aspectRatio.toString(),
            width: "100%",
            height: "100%",
          }}
        >
          {activeClips.length === 0 ? (
            <div className="absolute inset-0 flex items-center justify-center text-white/50">
              {tracks.length === 0
                ? "Drop media to start editing"
                : "No clips at current time"}
            </div>
          ) : (
            activeClips.map((clipData, index) => renderClip(clipData, index))
          )}
        </div>
      </div>

      {/* Debug Info Panel - Conditionally rendered */}
      {showDebug && (
        <div className="border-t bg-background p-2 flex-shrink-0">
          <div className="text-xs font-medium mb-1">
            Debug: Active Clips ({activeClips.length})
          </div>
          <div className="flex gap-2 overflow-x-auto">
            {activeClips.map((clipData, index) => (
              <div
                key={clipData.clip.id}
                className="flex items-center gap-1 px-2 py-1 bg-muted rounded text-xs whitespace-nowrap"
              >
                <span className="w-4 h-4 bg-primary/20 rounded text-center text-xs leading-4">
                  {index + 1}
                </span>
                <span>{clipData.clip.name}</span>
                <span className="text-muted-foreground">
                  ({clipData.mediaItem?.type || "test"})
                </span>
              </div>
            ))}
            {activeClips.length === 0 && (
              <span className="text-muted-foreground">No active clips</span>
            )}
          </div>
        </div>
      )}
    </div>
  );
}