TalkEdit/frontend/src/components/SilenceTrimmerPanel.tsx

import { useState } from 'react';
import { useEditorStore } from '../store/editorStore';
import { Loader2, Scissors } from 'lucide-react';

type SilenceRange = {
  start: number;
  end: number;
  duration: number;
};

export default function SilenceTrimmerPanel() {
  const { videoPath, backendUrl, addCutRange, duration } = useEditorStore();
  const [minSilenceMs, setMinSilenceMs] = useState(500);
  const [silenceDb, setSilenceDb] = useState(-35);
  const [preBufferMs, setPreBufferMs] = useState(80);
  const [postBufferMs, setPostBufferMs] = useState(120);
  const [isDetecting, setIsDetecting] = useState(false);
  const [ranges, setRanges] = useState<SilenceRange[]>([]);

  const detectSilence = async () => {
    if (!videoPath) return;
    setIsDetecting(true);
    setRanges([]);
    try {
      const res = await fetch(`${backendUrl}/audio/detect-silence`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          input_path: videoPath,
          min_silence_ms: minSilenceMs,
          silence_db: silenceDb,
        }),
      });

      if (!res.ok) {
        let detail = `HTTP ${res.status} ${res.statusText}`;
        try {
          const err = await res.json();
          if (err?.detail) detail += ` - ${String(err.detail)}`;
        } catch {
          // ignore JSON parse errors for non-JSON error responses
        }
        if (res.status === 404) {
          detail += ' (endpoint missing: restart backend to load /audio/detect-silence)';
        }
        throw new Error(detail);
      }

      const data = await res.json();
      setRanges(data.ranges || []);
    } catch (err) {
      console.error(err);
      const message = err instanceof Error ? err.message : 'Unknown error';
      alert(`Silence detection failed: ${message}`);
    } finally {
      setIsDetecting(false);
    }
  };

  const applyAsCuts = () => {
    const preBufferSeconds = preBufferMs / 1000;
    const postBufferSeconds = postBufferMs / 1000;
    const maxEnd = duration > 0 ? duration : Number.POSITIVE_INFINITY;

    for (const r of ranges) {
      // Positive buffers shrink the cut, negative buffers expand it.
      const start = Math.max(0, r.start + preBufferSeconds);
      const end = Math.min(maxEnd, r.end - postBufferSeconds);
      if (end - start >= 0.01) {
        addCutRange(start, end);
      }
    }
  };

  return (
    <div className="p-4 space-y-4">
      <div className="space-y-1">
        <h3 className="text-sm font-semibold">Silence / Pause Trimmer</h3>
        <p className="text-xs text-editor-text-muted">
          Detect pauses and convert them into cut ranges.
        </p>
      </div>

      <div className="space-y-3">
        <div className="space-y-1.5">
          <label className="text-[11px] text-editor-text-muted font-medium">
            Minimum pause length (ms)
          </label>
          <input
            type="number"
            min={100}
            step={50}
            value={minSilenceMs}
            onChange={(e) => setMinSilenceMs(Number(e.target.value) || 500)}
            className="w-full px-2.5 py-1.5 text-xs bg-editor-surface border border-editor-border rounded focus:border-editor-accent focus:outline-none"
          />
        </div>

        <div className="space-y-1.5">
          <label className="text-[11px] text-editor-text-muted font-medium">
            Silence threshold (dB)
          </label>
          <input
            type="number"
            min={-80}
            max={0}
            step={1}
            value={silenceDb}
            onChange={(e) => setSilenceDb(Number(e.target.value) || -35)}
            className="w-full px-2.5 py-1.5 text-xs bg-editor-surface border border-editor-border rounded focus:border-editor-accent focus:outline-none"
          />
        </div>

        <div className="grid grid-cols-2 gap-2">
          <div className="space-y-1.5">
            <label className="text-[11px] text-editor-text-muted font-medium">
              Buffer before (ms, +shrink / -expand)
            </label>
            <input
              type="number"
              min={-5000}
              max={5000}
              step={10}
              value={preBufferMs}
              onChange={(e) => setPreBufferMs(Number(e.target.value) || 0)}
              className="w-full px-2.5 py-1.5 text-xs bg-editor-surface border border-editor-border rounded focus:border-editor-accent focus:outline-none"
            />
          </div>
          <div className="space-y-1.5">
            <label className="text-[11px] text-editor-text-muted font-medium">
              Buffer after (ms, +shrink / -expand)
            </label>
            <input
              type="number"
              min={-5000}
              max={5000}
              step={10}
              value={postBufferMs}
              onChange={(e) => setPostBufferMs(Number(e.target.value) || 0)}
              className="w-full px-2.5 py-1.5 text-xs bg-editor-surface border border-editor-border rounded focus:border-editor-accent focus:outline-none"
            />
          </div>
        </div>

        <button
          onClick={detectSilence}
          disabled={isDetecting || !videoPath}
          className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-editor-accent hover:bg-editor-accent-hover disabled:opacity-50 rounded-lg text-sm font-medium transition-colors"
        >
          {isDetecting ? (
            <>
              <Loader2 className="w-4 h-4 animate-spin" />
              Detecting pauses...
            </>
          ) : (
            'Detect Pauses'
          )}
        </button>
      </div>

      {ranges.length > 0 && (
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <span className="text-xs font-medium">Detected {ranges.length} pause ranges</span>
            <button
              onClick={applyAsCuts}
              className="flex items-center gap-1 px-2 py-1 text-xs bg-editor-accent/20 text-editor-accent rounded hover:bg-editor-accent/30"
            >
              <Scissors className="w-3 h-3" />
              Apply As Cuts
            </button>
          </div>
          <div className="max-h-56 overflow-y-auto space-y-1 pr-1">
            {ranges.slice(0, 50).map((r, i) => (
              <div key={`${r.start}-${r.end}-${i}`} className="px-2 py-1.5 rounded bg-editor-surface border border-editor-border text-xs">
                {r.start.toFixed(2)}s - {r.end.toFixed(2)}s ({r.duration.toFixed(2)}s)
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}