// Toolbar above the timeline — track management, snap toggle, dead-air detection,
// silence removal, zoom.

'use client';

import { Plus, Split, Magnet, FileSearch, Scissors, ZoomOut, ZoomIn } from 'lucide-react';
import { useEditor } from '@/store/editor';
import type { SilenceSegment } from '@/types';

interface Props {
  snapping: boolean;
  onToggleSnap: () => void;
  detecting: boolean;
  onDetect: () => void;
  onDetectAndCut: () => void;
}

export function TimelineToolbar({ snapping, onToggleSnap, detecting, onDetect, onDetectAndCut }: Props) {
  const addTrack = useEditor((s) => s.addTrack);
  const splitClipAtCurrent = useEditor((s) => s.splitClipAtCurrent);
  const zoom = useEditor((s) => s.zoom);
  const setZoom = useEditor((s) => s.setZoom);
  const silenceSegments = useEditor((s) => s.silenceSegments);
  const exportSettings = useEditor((s) => s.exportSettings);
  const setExportSettings = useEditor((s) => s.setExportSettings);
  const applySilenceRemoval = useEditor((s) => s.applySilenceRemoval);
  const clearSilence = useEditor((s) => s.clearSilence);
  const segCount: number = (silenceSegments as SilenceSegment[]).length;

  return (
    <div className="h-12 border-b border-capcut-border px-3 flex items-center gap-1.5 shrink-0 bg-capcut-dark/50 backdrop-blur">
      <div className="flex items-center gap-1 mr-2">
        <button
          type="button"
          onClick={() => addTrack('video')}
          className="tip h-8 px-2.5 rounded-lg text-xs bg-capcut-surface hover:bg-capcut-surfaceHover text-capcut-blue border border-capcut-blue/30 hover:border-capcut-blue/60 flex items-center gap-1.5 font-medium transition-base"
          data-tip="เพิ่มแทร็กวิดีโอ"
        >
          <Plus size={12} /> วิดีโอ
        </button>
        <button
          type="button"
          onClick={() => addTrack('audio')}
          className="tip h-8 px-2.5 rounded-lg text-xs bg-capcut-surface hover:bg-capcut-surfaceHover text-capcut-orange border border-capcut-orange/30 hover:border-capcut-orange/60 flex items-center gap-1.5 font-medium transition-base"
          data-tip="เพิ่มแทร็กเสียง"
        >
          <Plus size={12} /> เสียง
        </button>
      </div>

      <div className="w-px h-5 bg-capcut-border mx-1" />

      <button
        type="button"
        onClick={splitClipAtCurrent}
        className="tip h-8 px-2.5 rounded-lg text-xs bg-capcut-surface hover:bg-capcut-surfaceHover text-capcut-text border border-capcut-border/60 hover:border-capcut-borderLight flex items-center gap-1.5 font-medium transition-base"
        data-tip="แยกคลิปที่ตำแหน่ง playhead (S)"
      >
        <Split size={12} /> แยกคลิป
      </button>

      <button
        type="button"
        onClick={onToggleSnap}
        className={`tip h-8 px-2.5 rounded-lg text-xs flex items-center gap-1.5 font-medium transition-base ${
          snapping
            ? 'bg-capcut-blue/20 text-capcut-blue border border-capcut-blue/40 shadow-glow-blue'
            : 'bg-capcut-surface hover:bg-capcut-surfaceHover text-capcut-muted hover:text-capcut-text border border-capcut-border/60'
        }`}
        data-tip="เปิด/ปิด snap"
      >
        <Magnet size={12} /> snap
      </button>

      <div className="w-px h-5 bg-capcut-border mx-1" />

      <button
        type="button"
        onClick={onDetect}
        disabled={detecting}
        className="tip h-8 px-2.5 rounded-lg text-xs bg-capcut-orange/15 hover:bg-capcut-orange/25 text-capcut-orange border border-capcut-orange/30 hover:border-capcut-orange/60 flex items-center gap-1.5 font-medium transition-base disabled:opacity-40"
        data-tip="ตรวจจับช่วงเงียบในแทร็กเสียงทั้งหมด · หลังจบจะมีปุ่ม ลบทั้งหมด ให้กดอีกที"
      >
        <FileSearch size={12} /> {detecting ? 'กำลังตรวจจับ…' : 'ตรวจจับช่วงเงียบ'}
      </button>
      <button
        type="button"
        onClick={onDetectAndCut}
        disabled={detecting}
        className="tip h-8 px-2.5 rounded-lg text-xs bg-capcut-red/15 hover:bg-capcut-red/25 text-capcut-red border border-capcut-red/30 hover:border-capcut-red/60 flex items-center gap-1.5 font-medium transition-base shadow-glow-red disabled:opacity-40"
        data-tip="ตรวจจับช่วงเงียบและลบอัตโนมัติ (1 คลิกจบ)"
      >
        <Scissors size={12} /> ตัดทั้งหมด
      </button>

      <div className="flex items-center gap-1 text-xs text-capcut-muted" title="ค่า threshold (dB)">
        <span>เกณฑ์</span>
        <input
          type="number"
          value={exportSettings.silenceThresholdDb}
          onChange={(e) => setExportSettings({ silenceThresholdDb: Number(e.target.value) })}
          className="w-14 h-7 bg-capcut-surface border border-capcut-border rounded px-2 text-xs"
          step={1}
        />
        <span>dB</span>
      </div>
      <div className="flex items-center gap-1 text-xs text-capcut-muted" title="ระยะเวลาขั้นต่ำ (ms)">
        <span>ขั้นต่ำ</span>
        <input
          type="number"
          value={exportSettings.silenceMinDurationMs}
          onChange={(e) => setExportSettings({ silenceMinDurationMs: Number(e.target.value) })}
          className="w-16 h-7 bg-capcut-surface border border-capcut-border rounded px-2 text-xs"
          step={50}
        />
        <span>ms</span>
      </div>

      {segCount > 0 && (
        <>
          <button
            type="button"
            onClick={applySilenceRemoval}
            className="tip h-8 px-2.5 rounded-lg text-xs bg-capcut-red/15 hover:bg-capcut-red/25 text-capcut-red border border-capcut-red/30 hover:border-capcut-red/60 flex items-center gap-1.5 font-medium transition-base shadow-glow-red"
            data-tip="ลบช่วงเงียบทั้งหมดออกจากไทม์ไลน์"
          >
            <Scissors size={12} /> ลบทั้งหมด
          </button>
          <button
            type="button"
            onClick={clearSilence}
            className="tip h-8 px-2.5 rounded-lg text-xs bg-transparent hover:bg-capcut-surface text-capcut-muted hover:text-capcut-text transition-base"
            data-tip="ล้างการตรวจจับ"
          >
            ล้าง
          </button>
          <span className="text-[11px] font-mono px-2 py-0.5 bg-capcut-red/15 text-capcut-red rounded-full border border-capcut-red/30">
            {segCount} ช่วง
          </span>
        </>
      )}

      <div className="flex-1" />

      <div className="flex items-center gap-1 ml-auto bg-capcut-surface rounded-lg p-0.5 border border-capcut-border/60">
        <button
          type="button"
          onClick={() => setZoom(zoom * 0.8)}
          className="tip w-7 h-7 rounded-md hover:bg-capcut-surfaceHover text-capcut-muted hover:text-capcut-text flex items-center justify-center transition-base"
          data-tip="ซูมออก"
        >
          <ZoomOut size={14} />
        </button>
        <span className="text-[11px] text-capcut-text font-mono w-14 text-center select-none">{Math.round(zoom)}px/s</span>
        <button
          type="button"
          onClick={() => setZoom(zoom * 1.25)}
          className="tip w-7 h-7 rounded-md hover:bg-capcut-surfaceHover text-capcut-muted hover:text-capcut-text flex items-center justify-center transition-base"
          data-tip="ซูมเข้า"
        >
          <ZoomIn size={14} />
        </button>
      </div>
    </div>
  );
}