'use client';

// Reusable form primitives used by PropertiesPanel sections.
// All Thai/UIs consistent via the `capcut-*` design tokens.

import { ChevronDown, type LucideIcon } from 'lucide-react';
import { useState, type ReactNode } from 'react';

export function Section({
  title,
  icon,
  children,
  defaultOpen = true,
  badge,
}: {
  title: string;
  icon: ReactNode;
  children: ReactNode;
  defaultOpen?: boolean;
  badge?: ReactNode;
}) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <section className="bg-gradient-to-b from-capcut-panel to-capcut-panel/95 border border-capcut-border/60 rounded-xl shadow-soft overflow-hidden animate-slide-up">
      <button
        type="button"
        onClick={() => setOpen(!open)}
        className="w-full flex items-center gap-2 px-3 py-2.5 hover:bg-capcut-surface/40 transition-base text-left"
      >
        <span className="w-6 h-6 rounded-md bg-capcut-surface flex items-center justify-center text-capcut-blue shrink-0">
          {icon}
        </span>
        <span className="text-[13px] font-semibold text-capcut-text flex-1 tracking-wide uppercase opacity-90">
          {title}
        </span>
        {badge && <span className="shrink-0">{badge}</span>}
        <ChevronDown
          size={14}
          className={`text-capcut-muted transition-transform ${open ? '' : '-rotate-90'}`}
        />
      </button>
      {open && (
        <div className="px-3 pb-3 pt-1 space-y-2 border-t border-capcut-border/30">
          {children}
        </div>
      )}
    </section>
  );
}

export function Row({ label, value }: { label: string; value: ReactNode }) {
  return (
    <div className="flex items-center justify-between text-xs gap-2 min-h-[24px]">
      <span className="text-capcut-muted shrink-0">{label}</span>
      <span className="font-mono text-[11px] text-capcut-text truncate text-right">{value}</span>
    </div>
  );
}

export function Slider({
  label,
  value,
  min,
  max,
  step,
  onChange,
}: {
  label: string;
  value: number;
  min: number;
  max: number;
  step: number;
  onChange: (v: number) => void;
}) {
  return (
    <div>
      <div className="flex items-center justify-between text-[11px] mb-1">
        <span className="text-capcut-muted">{label}</span>
        <span className="font-mono text-capcut-text text-[11px]">{value.toFixed(2)}</span>
      </div>
      <input
        type="range"
        value={value}
        min={min}
        max={max}
        step={step}
        onChange={(e) => onChange(Number(e.target.value))}
        className="w-full"
      />
    </div>
  );
}

export function NumberField({
  label,
  value,
  step,
  min,
  max,
  onChange,
}: {
  label: string;
  value: number;
  step?: number;
  min?: number;
  max?: number;
  onChange: (v: number) => void;
}) {
  return (
    <label className="block">
      <span className="text-[11px] text-capcut-muted block mb-1">{label}</span>
      <input
        type="number"
        value={Number.isFinite(value) ? Number(value.toFixed(2)) : 0}
        step={step}
        min={min}
        max={max}
        onChange={(e) => {
          const v = Number(e.target.value);
          if (Number.isFinite(v)) onChange(v);
        }}
        className="w-full h-8 px-2 bg-capcut-surface border border-capcut-border rounded-md text-xs font-mono transition-base focus:border-capcut-blue"
      />
    </label>
  );
}

export function ColorField({
  label,
  value,
  onChange,
}: {
  label?: string;
  value: string;
  onChange: (v: string) => void;
}) {
  return (
    <div className="flex items-center gap-2">
      {label && <span className="text-[11px] text-capcut-muted">{label}</span>}
      <input
        type="color"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="w-8 h-8"
      />
      <span className="text-[10px] font-mono text-capcut-muted uppercase">{value}</span>
    </div>
  );
}

interface SegmentedProps<T extends string> {
  options: { value: T; label: string; icon?: LucideIcon }[];
  value: T;
  onChange: (v: T) => void;
  size?: 'sm' | 'md';
}

export function Segmented<T extends string>({
  options,
  value,
  onChange,
  size = 'md',
}: SegmentedProps<T>) {
  const pad = size === 'sm' ? 'p-0.5' : 'p-1';
  const btnPad = size === 'sm' ? 'px-1.5 py-0.5 text-[10px]' : 'px-2.5 py-1.5 text-xs';
  return (
    <div className={`inline-flex ${pad} bg-capcut-surface rounded-lg gap-0.5 border border-capcut-border w-full`}>
      {options.map((opt) => {
        const active = value === opt.value;
        const Icon = opt.icon;
        return (
          <button
            key={opt.value}
            type="button"
            onClick={() => onChange(opt.value)}
            className={`flex-1 ${btnPad} rounded-md font-medium flex items-center justify-center gap-1 transition-base ${
              active
                ? 'bg-capcut-blue text-white shadow-soft'
                : 'text-capcut-muted hover:text-capcut-text'
            }`}
          >
            {Icon && <Icon size={size === 'sm' ? 10 : 12} />}
            {opt.label}
          </button>
        );
      })}
    </div>
  );
}

/** Format seconds → SRT-friendly "HH:MM:SS,mmm" */
export function formatSrtTime(seconds: number): string {
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  const s = Math.floor(seconds % 60);
  const ms = Math.floor((seconds - Math.floor(seconds)) * 1000);
  return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s
    .toString()
    .padStart(2, '0')},${ms.toString().padStart(3, '0')}`;
}