'use client';

// Floating text overlay editor — text content, font, position, opacity, animation.

import { Type, Trash2 } from 'lucide-react';
import { useEditor } from '@/store/editor';
import type { TextOverlay } from '@/types';
import { Section, Slider } from './FormFields';

interface Props {
  overlay: TextOverlay;
}

const FONT_FAMILIES = [
  { v: 'Arial', label: 'Arial' },
  { v: 'Helvetica', label: 'Helvetica' },
  { v: 'Inter', label: 'Inter' },
  { v: 'sans-serif', label: 'Sans Serif' },
];

export function TextOverlayProperties({ overlay }: Props) {
  const updateTextOverlay = useEditor((s) => s.updateTextOverlay);
  const removeTextOverlay = useEditor((s) => s.removeTextOverlay);
  const setCurrentTime = useEditor((s) => s.setCurrentTime);

  return (
    <Section title="ข้อความลอย (Text Overlay)" icon={<Type size={14} />}>
      <div className="space-y-2">
        <textarea
          value={overlay.text}
          onChange={(e) => updateTextOverlay(overlay.id, { text: e.target.value })}
          rows={2}
          className="w-full bg-capcut-surface border border-capcut-border rounded px-2 py-1 text-xs resize-none"
          placeholder="พิมพ์ข้อความที่นี่…"
        />

        <div className="grid grid-cols-2 gap-2">
          <div>
            <label className="text-[10px] text-capcut-muted block mb-0.5">เริ่ม (วินาที)</label>
            <input
              type="number"
              step={0.1}
              min={0}
              value={overlay.start.toFixed(2)}
              onChange={(e) => updateTextOverlay(overlay.id, { start: Math.max(0, Number(e.target.value)) })}
              className="w-full h-8 bg-capcut-surface border border-capcut-border rounded px-2 text-xs font-mono"
            />
          </div>
          <div>
            <label className="text-[10px] text-capcut-muted block mb-0.5">ความยาว</label>
            <input
              type="number"
              step={0.1}
              min={0.1}
              value={overlay.duration.toFixed(2)}
              onChange={(e) => updateTextOverlay(overlay.id, { duration: Math.max(0.1, Number(e.target.value)) })}
              className="w-full h-8 bg-capcut-surface border border-capcut-border rounded px-2 text-xs font-mono"
            />
          </div>
        </div>

        <Slider
          label={`ขนาดตัวอักษร ${overlay.fontSize}px`}
          min={12}
          max={128}
          step={2}
          value={overlay.fontSize}
          onChange={(v) => updateTextOverlay(overlay.id, { fontSize: v })}
        />

        <div className="grid grid-cols-2 gap-2">
          <div>
            <label className="text-[10px] text-capcut-muted block mb-0.5">สีตัวอักษร</label>
            <input
              type="color"
              value={overlay.color}
              onChange={(e) => updateTextOverlay(overlay.id, { color: e.target.value })}
              className="w-full h-8 rounded border border-capcut-border bg-transparent"
            />
          </div>
          <div>
            <label className="text-[10px] text-capcut-muted block mb-0.5">สีพื้นหลัง</label>
            <input
              type="color"
              value={overlay.backgroundColor}
              onChange={(e) => updateTextOverlay(overlay.id, { backgroundColor: e.target.value })}
              className="w-full h-8 rounded border border-capcut-border bg-transparent"
            />
          </div>
        </div>

        <Slider
          label={`ความโปร่งใส ${Math.round(overlay.opacity * 100)}%`}
          min={0}
          max={1}
          step={0.05}
          value={overlay.opacity}
          onChange={(v) => updateTextOverlay(overlay.id, { opacity: v })}
        />

        <div>
          <label className="text-[10px] text-capcut-muted block mb-0.5">ตำแหน่ง (X / Y %)</label>
          <div className="grid grid-cols-2 gap-2">
            <input
              type="range"
              min={0}
              max={1}
              step={0.02}
              value={overlay.xRatio}
              onChange={(e) => updateTextOverlay(overlay.id, { xRatio: Number(e.target.value) })}
              className="w-full"
            />
            <input
              type="range"
              min={0}
              max={1}
              step={0.02}
              value={overlay.yRatio}
              onChange={(e) => updateTextOverlay(overlay.id, { yRatio: Number(e.target.value) })}
              className="w-full"
            />
          </div>
          <div className="flex justify-between text-[9px] text-capcut-muted">
            <span>X: {Math.round(overlay.xRatio * 100)}%</span>
            <span>Y: {Math.round(overlay.yRatio * 100)}%</span>
          </div>
        </div>

        <div className="flex items-center gap-2 text-xs">
          <label className="flex items-center gap-1.5">
            <input
              type="checkbox"
              checked={overlay.bold}
              onChange={(e) => updateTextOverlay(overlay.id, { bold: e.target.checked })}
            />
            <span>ตัวหนา (Bold)</span>
          </label>
          <label className="flex items-center gap-1.5">
            <input
              type="checkbox"
              checked={overlay.italic}
              onChange={(e) => updateTextOverlay(overlay.id, { italic: e.target.checked })}
            />
            <span>ตัวเอียง (Italic)</span>
          </label>
        </div>

        <div>
          <label className="text-[10px] text-capcut-muted block mb-0.5">อนิเมชั่น</label>
          <div className="grid grid-cols-3 gap-1">
            {(['none', 'fade', 'pop'] as const).map((anim) => (
              <button
                key={anim}
                type="button"
                onClick={() => updateTextOverlay(overlay.id, { animation: anim })}
                className={`px-2 py-1 rounded text-[10px] border ${
                  overlay.animation === anim
                    ? 'bg-capcut-blue/20 border-capcut-blue text-white'
                    : 'bg-capcut-surface border-capcut-border text-capcut-muted hover:text-capcut-text'
                }`}
              >
                {anim === 'none' && 'ไม่มี'}
                {anim === 'fade' && 'เฟด'}
                {anim === 'pop' && 'ป๊อป'}
              </button>
            ))}
          </div>
        </div>

        <div className="grid grid-cols-2 gap-2 pt-2 border-t border-capcut-border">
          <button
            type="button"
            onClick={() => setCurrentTime(overlay.start)}
            className="h-8 rounded bg-capcut-surface hover:bg-capcut-border text-xs"
          >
            ไปที่จุดเริ่ม
          </button>
          <button
            type="button"
            onClick={() => removeTextOverlay(overlay.id)}
            className="h-8 rounded bg-capcut-red/20 hover:bg-capcut-red/30 text-capcut-red text-xs flex items-center justify-center gap-1"
          >
            <Trash2 size={11} /> ลบข้อความ
          </button>
        </div>
      </div>
    </Section>
  );
}
