'use client';

import { useState } from 'react';
import type { ButtonConfig } from '@/types/invyone-component';

interface FcButtonProps {
  config: ButtonConfig;
  onClick?: () => void;
  disabled?: boolean;
}

const VARIANT_CLASSES: Record<string, string> = {
  primary: 'bg-[var(--v5-primary)] text-white hover:opacity-90 shadow-[var(--v5-glow-sm)]',
  default: 'bg-[var(--v5-surface)] text-[var(--v5-text)] border border-[var(--v5-border)] hover:border-[var(--v5-primary)]',
  destructive: 'bg-[var(--v5-red)] text-white hover:opacity-90',
  outline: 'bg-transparent text-[var(--v5-text)] border border-[var(--v5-border)] hover:bg-[var(--v5-surface-hover)]',
  ghost: 'bg-transparent text-[var(--v5-text-sec)] hover:bg-[var(--v5-surface-hover)]',
};

export function FcButton({ config, onClick, disabled }: FcButtonProps) {
  const [confirming, setConfirming] = useState(false);

  const handleClick = () => {
    if (config.confirm && !confirming) {
      setConfirming(true);
      return;
    }
    setConfirming(false);
    onClick?.();
  };

  const handleCancel = () => setConfirming(false);

  const variantClass = VARIANT_CLASSES[config.variant] ?? VARIANT_CLASSES.default;

  if (confirming) {
    return (
      <div className="inline-flex items-center gap-1">
        <span className="text-[0.65rem] text-[var(--v5-red)]">{config.confirm}</span>
        <button
          type="button"
          onClick={handleClick}
          className="px-2 py-0.5 rounded text-[0.65rem] bg-[var(--v5-red)] text-white"
        >
          확인
        </button>
        <button
          type="button"
          onClick={handleCancel}
          className="px-2 py-0.5 rounded text-[0.65rem] border border-[var(--v5-border)] text-[var(--v5-text-sec)]"
        >
          취소
        </button>
      </div>
    );
  }

  return (
    <button
      type="button"
      onClick={handleClick}
      disabled={disabled}
      className={`px-3 py-1 rounded text-xs font-medium transition-all
        disabled:opacity-40 disabled:cursor-not-allowed ${variantClass}`}
    >
      {config.text}
    </button>
  );
}
