"use client";

import React from "react";
import { Modal, ModalContent, ModalHeader, ModalTitle } from "./Modal";
import { Button } from "./Button";

interface ConfirmationDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: string;
  description: string;
  confirmText?: string;
  cancelText?: string;
  variant?: "default" | "destructive" | "warning";
  onConfirm: () => void;
  onCancel?: () => void;
  loading?: boolean;
}

export function ConfirmationDialog({
  open,
  onOpenChange,
  title,
  description,
  confirmText = "확인",
  cancelText = "취소",
  variant = "default",
  onConfirm,
  onCancel,
  loading = false,
}: ConfirmationDialogProps) {
  const handleConfirm = () => {
    onConfirm();
  };

  const handleCancel = () => {
    if (onCancel) {
      onCancel();
    } else {
      onOpenChange(false);
    }
  };

  const getVariantStyles = () => {
    switch (variant) {
      case "destructive":
        return {
          titleColor: "text-red-600",
          descriptionColor: "text-red-800",
          confirmButton: "bg-red-600 hover:bg-red-700 text-white",
          icon: "⚠️",
        };
      case "warning":
        return {
          titleColor: "text-orange-600",
          descriptionColor: "text-orange-800",
          confirmButton: "bg-orange-600 hover:bg-orange-700 text-white",
          icon: "⚠️",
        };
      default:
        return {
          titleColor: "text-gray-900",
          descriptionColor: "text-gray-700",
          confirmButton: "bg-blue-600 hover:bg-blue-700 text-white",
          icon: "❓",
        };
    }
  };

  const styles = getVariantStyles();

  return (
    <Modal open={open} onOpenChange={onOpenChange}>
      <ModalContent className="max-w-md">
        <ModalHeader>
          <ModalTitle
            className={`flex items-center gap-2 ${styles.titleColor}`}
          >
            <span className="text-lg">{styles.icon}</span>
            {title}
          </ModalTitle>
        </ModalHeader>

        <div className="p-6 space-y-4">
          <p className={styles.descriptionColor}>{description}</p>

          <div className="flex gap-3 justify-end">
            <Button variant="outline" onClick={handleCancel} disabled={loading}>
              {cancelText}
            </Button>
            <Button
              className={styles.confirmButton}
              onClick={handleConfirm}
              disabled={loading}
            >
              {loading ? "처리중..." : confirmText}
            </Button>
          </div>
        </div>
      </ModalContent>
    </Modal>
  );
}

// Hook for easier usage
export function useConfirmationDialog() {
  const [dialogState, setDialogState] = React.useState<{
    open: boolean;
    title: string;
    description: string;
    confirmText?: string;
    cancelText?: string;
    variant?: "default" | "destructive" | "warning";
    onConfirm: () => void;
    onCancel?: () => void;
    loading?: boolean;
  }>({
    open: false,
    title: "",
    description: "",
    onConfirm: () => {},
  });

  const showConfirmation = React.useCallback(
    (options: {
      title: string;
      description: string;
      confirmText?: string;
      cancelText?: string;
      variant?: "default" | "destructive" | "warning";
      onConfirm: () => void;
      onCancel?: () => void;
    }) => {
      setDialogState({
        ...options,
        open: true,
        loading: false,
      });
    },
    []
  );

  const hideConfirmation = React.useCallback(() => {
    setDialogState((prev) => ({ ...prev, open: false }));
  }, []);

  const setLoading = React.useCallback((loading: boolean) => {
    setDialogState((prev) => ({ ...prev, loading }));
  }, []);

  const ConfirmationDialogComponent = React.useCallback(
    () => (
      <ConfirmationDialog {...dialogState} onOpenChange={hideConfirmation} />
    ),
    [dialogState, hideConfirmation]
  );

  return {
    showConfirmation,
    hideConfirmation,
    setLoading,
    ConfirmationDialog: ConfirmationDialogComponent,
  };
}

// Helper functions for common confirmation patterns
export const confirmDelete = (
  showConfirmation: (options: any) => void,
  itemName: string,
  onConfirm: () => void
) => {
  showConfirmation({
    title: "삭제 확인",
    description: `"${itemName}"을(를) 정말 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.`,
    confirmText: "삭제",
    variant: "destructive",
    onConfirm,
  });
};

export const confirmAction = (
  showConfirmation: (options: any) => void,
  title: string,
  description: string,
  onConfirm: () => void,
  confirmText: string = "확인"
) => {
  showConfirmation({
    title,
    description,
    confirmText,
    onConfirm,
  });
};

export const confirmDestructiveAction = (
  showConfirmation: (options: any) => void,
  title: string,
  description: string,
  onConfirm: () => void,
  confirmText: string = "실행"
) => {
  showConfirmation({
    title,
    description,
    confirmText,
    variant: "destructive",
    onConfirm,
  });
};