'use client';

// PropertiesPanel — composes the sub-panels keyed off the current selection.
// Each property component manages its own Panel/Section wrapper.

import { MousePointer } from 'lucide-react';
import { useEditor } from '@/store/editor';
import { ClipProperties } from './properties/ClipProperties';
import { TrackProperties } from './properties/TrackProperties';
import { SubtitleProperties } from './properties/SubtitleProperties';
import { ExportProperties } from './properties/ExportProperties';
import { AutoEditProperties } from './properties/AutoEditProperties';
import { TextOverlayProperties } from './properties/TextOverlayProperties';

export function PropertiesPanel() {
  const selection = useEditor((s) => s.selection);
  const clips = useEditor((s) => s.clips);
  const tracks = useEditor((s) => s.tracks);
  const textOverlays = useEditor((s) => s.textOverlays);

  const selectedClip = clips.find((c) => c.id === selection.clipId);
  const selectedTrack = tracks.find((t) => t.id === selection.trackId);
  const selectedTextOverlay = textOverlays.find((t) => t.id === selection.textOverlayId);

  return (
    <div className="p-3 space-y-3 text-sm overflow-y-auto h-full scroll-thin">
      {!selectedClip && !selectedTrack && !selectedTextOverlay && <EmptyState />}

      {selectedTextOverlay && <TextOverlayProperties overlay={selectedTextOverlay} />}
      {selectedClip && <ClipProperties clip={selectedClip} selectedAssetId={selectedClip.assetId} />}
      {selectedTrack && <TrackProperties track={selectedTrack} />}

      <SubtitleProperties />
      <ExportProperties />
      <AutoEditProperties />
    </div>
  );
}

function EmptyState() {
  return (
    <div className="bg-gradient-to-br from-capcut-panel/60 to-capcut-dark/60 border border-capcut-border/40 rounded-xl p-6 text-center animate-fade-in">
      <div className="mx-auto mb-3 w-12 h-12 rounded-full bg-capcut-surface flex items-center justify-center">
        <MousePointer size={20} className="text-capcut-muted" />
      </div>
      <p className="text-sm font-medium text-capcut-text">เลือกคลิปหรือแทร็ก</p>
      <p className="text-[11px] text-capcut-muted mt-1 leading-relaxed">
        คลิกบนคลิปในไทม์ไลน์เพื่อดูและแก้ไขคุณสมบัติ
      </p>
    </div>
  );
}
