// Export-pipeline settings — quick preset picker (TikTok/Reels/YouTube/IG/Custom)
// + fine-grained width/height, fps, audio bitrate, plus the "strip silence at
// export time" master toggle.

'use client';

import { Settings2, Smartphone, Youtube, Instagram, Monitor } from 'lucide-react';
import { useEditor } from '@/store/editor';
import { Section, NumberField } from './FormFields';

interface ExportPreset {
  id: string;
  label: string;
  icon: React.ReactNode;
  width: number;
  height: number;
  fps: number;
  videoBitrate: string;
  hint: string;
}

const PRESETS: ExportPreset[] = [
  {
    id: 'tiktok',
    label: 'TikTok',
    icon: <Smartphone size={12} />,
    width: 1080,
    height: 1920,
    fps: 30,
    videoBitrate: '6M',
    hint: '9:16 · 1080×1920',
  },
  {
    id: 'reels',
    label: 'Reels',
    icon: <Instagram size={12} />,
    width: 1080,
    height: 1920,
    fps: 30,
    videoBitrate: '6M',
    hint: '9:16 · 1080×1920',
  },
  {
    id: 'youtube',
    label: 'YouTube',
    icon: <Youtube size={12} />,
    width: 1920,
    height: 1080,
    fps: 30,
    videoBitrate: '8M',
    hint: '16:9 · 1920×1080',
  },
  {
    id: 'youtube-shorts',
    label: 'YT Shorts',
    icon: <Youtube size={12} />,
    width: 1080,
    height: 1920,
    fps: 30,
    videoBitrate: '6M',
    hint: '9:16 · 1080×1920',
  },
  {
    id: 'ig-square',
    label: 'IG Square',
    icon: <Instagram size={12} />,
    width: 1080,
    height: 1080,
    fps: 30,
    videoBitrate: '5M',
    hint: '1:1 · 1080×1080',
  },
  {
    id: 'landscape-720',
    label: '720p',
    icon: <Monitor size={12} />,
    width: 1280,
    height: 720,
    fps: 30,
    videoBitrate: '4M',
    hint: '16:9 · 1280×720',
  },
];

function findMatchingPresetId(w: number, h: number): string | null {
  const m = PRESETS.find((p) => p.width === w && p.height === h);
  return m?.id ?? null;
}

export function ExportProperties() {
  const exportSettings = useEditor((s) => s.exportSettings);
  const setExportSettings = useEditor((s) => s.setExportSettings);

  const activePreset = findMatchingPresetId(exportSettings.width, exportSettings.height);

  return (
    <Section title="ตั้งค่าการส่งออก" icon={<Settings2 size={14} />}>
      <div className="space-y-3">
        {/* Preset grid */}
        <div className="space-y-1.5">
          <div className="text-[11px] text-capcut-muted">Preset</div>
          <div className="grid grid-cols-3 gap-1.5">
            {PRESETS.map((p) => {
              const isActive = activePreset === p.id;
              return (
                <button
                  key={p.id}
                  type="button"
                  onClick={() =>
                    setExportSettings({
                      width: p.width,
                      height: p.height,
                      fps: p.fps,
                      videoBitrate: p.videoBitrate,
                    })
                  }
                  className={`flex flex-col items-center justify-center gap-1 py-2 rounded-md border transition-colors text-center ${
                    isActive
                      ? 'bg-capcut-blue/20 border-capcut-blue text-capcut-text'
                      : 'bg-capcut-surface border-capcut-border hover:border-capcut-blue/50 text-capcut-text'
                  }`}
                  title={p.hint}
                >
                  <span className={isActive ? 'text-capcut-blue' : 'text-capcut-muted'}>{p.icon}</span>
                  <span className="text-[11px] font-medium leading-none">{p.label}</span>
                  <span className="text-[9px] text-capcut-muted leading-none">{p.hint}</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* Custom fine-tune */}
        <div className="space-y-1.5">
          <div className="text-[11px] text-capcut-muted">ปรับเอง</div>
          <div className="grid grid-cols-2 gap-2">
            <NumberField
              label="กว้าง"
              value={exportSettings.width}
              step={2}
              onChange={(v) => setExportSettings({ width: Math.max(64, Math.round(v)) })}
            />
            <NumberField
              label="สูง"
              value={exportSettings.height}
              step={2}
              onChange={(v) => setExportSettings({ height: Math.max(64, Math.round(v)) })}
            />
            <div className="flex flex-col gap-1">
              <label className="text-[11px] text-capcut-muted">FPS</label>
              <select
                value={exportSettings.fps}
                onChange={(e) => setExportSettings({ fps: Number(e.target.value) })}
                className="h-9 bg-capcut-surface border border-capcut-border rounded px-2 text-xs"
              >
                <option value={24}>24 fps</option>
                <option value={25}>25 fps</option>
                <option value={30}>30 fps</option>
                <option value={50}>50 fps</option>
                <option value={60}>60 fps</option>
              </select>
            </div>
            <div className="flex flex-col gap-1">
              <label className="text-[11px] text-capcut-muted">Bitrate เสียง</label>
              <select
                value={exportSettings.audioBitrate}
                onChange={(e) => setExportSettings({ audioBitrate: e.target.value })}
                className="h-9 bg-capcut-surface border border-capcut-border rounded px-2 text-xs"
              >
                <option value="96k">96 kbps</option>
                <option value="128k">128 kbps</option>
                <option value="192k">192 kbps</option>
                <option value="256k">256 kbps</option>
                <option value="320k">320 kbps</option>
              </select>
            </div>
          </div>
        </div>

        <label className="flex items-center gap-2 text-xs">
          <input
            type="checkbox"
            checked={exportSettings.removeSilence}
            onChange={(e) => setExportSettings({ removeSilence: e.target.checked })}
          />
          ตัดช่วงเงียบออกตอนส่งออก
        </label>
        <p className="text-[11px] text-capcut-muted">
          การส่งออกใช้ FFmpeg.wasm ประมวลผลในเบราว์เซอร์ — ไฟล์จะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์
        </p>
      </div>
    </Section>
  );
}