'use client';

// Reusable Section/Card/Panel components with consistent styling.

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

interface PanelProps {
  title: string;
  icon?: ReactNode;
  children: ReactNode;
  defaultOpen?: boolean;
  collapsible?: boolean;
  badge?: ReactNode;
  className?: string;
}

export function Panel({
  title,
  icon,
  children,
  defaultOpen = true,
  collapsible = true,
  badge,
  className = '',
}: PanelProps) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div
      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 ${className}`}
    >
      <button
        type="button"
        onClick={() => collapsible && setOpen(!open)}
        className={`w-full flex items-center gap-2 px-3 py-2.5 text-left ${
          collapsible ? 'hover:bg-capcut-surface/40 cursor-pointer' : 'cursor-default'
        } transition-base`}
      >
        {icon && (
          <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>}
        {collapsible && (
          <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>
      )}
    </div>
  );
}

interface RowProps {
  label: string;
  value?: ReactNode;
  children?: ReactNode;
}

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

interface SliderProps {
  label: string;
  min: number;
  max: number;
  step: number;
  value: number;
  onChange: (v: number) => void;
  formatValue?: (v: number) => string;
}

export function Slider({ label, min, max, step, value, onChange }: SliderProps) {
  return (
    <label className="flex items-center gap-2 text-xs">
      <span className="text-capcut-muted shrink-0 w-24">{label}</span>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="flex-1"
      />
    </label>
  );
}

interface NumberFieldProps {
  label: string;
  value: number;
  step?: number;
  min?: number;
  max?: number;
  onChange: (v: number) => void;
}

export function NumberField({ label, value, step = 0.1, min, max, onChange }: NumberFieldProps) {
  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"
      />
    </label>
  );
}

interface ColorFieldProps {
  label?: string;
  value: string;
  onChange: (v: string) => void;
}

export function ColorField({ label, value, onChange }: ColorFieldProps) {
  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-[11px] font-mono text-capcut-muted">{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-2 py-1 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`}>
      {options.map((opt) => {
        const active = value === opt.value;
        const Icon = opt.icon;
        return (
          <button
            key={opt.value}
            type="button"
            onClick={() => onChange(opt.value)}
            className={`${btnPad} rounded-md font-medium flex items-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>
  );
}