import React, { useState, useEffect } from "react";
import { Button } from "./ui/button";

interface PrintOrderDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: (model: "A" | "B" | "P") => void;
  orderId: number;
  includeModelP?: boolean;
}

/**
 * PrintOrderDialog Component
 * Diálogo para seleção do modelo de impressão do pedido
 * Segue o padrão de estilização do ConfirmDialog
 */
const PrintOrderDialog: React.FC<PrintOrderDialogProps> = ({
  isOpen,
  onClose,
  onConfirm,
  orderId,
  includeModelP = false,
}) => {
  const [isAnimating, setIsAnimating] = useState(false);
  const [shouldRender, setShouldRender] = useState(false);
  const [selectedModel, setSelectedModel] = useState<"A" | "B" | "P">("A");

  useEffect(() => {
    if (isOpen) {
      setShouldRender(true);
      setTimeout(() => setIsAnimating(true), 10);
    } else {
      setIsAnimating(false);
      const timer = setTimeout(() => setShouldRender(false), 300);
      return () => clearTimeout(timer);
    }
  }, [isOpen]);

  if (!shouldRender) return null;

  const handleConfirm = () => {
    setIsAnimating(false);
    setTimeout(() => {
      onConfirm(selectedModel);
      onClose();
    }, 300);
  };

  const handleCancel = () => {
    setIsAnimating(false);
    setTimeout(() => {
      onClose();
    }, 300);
  };

  return (
    <div className="fixed inset-0 z-[200] flex items-center justify-center">
      {/* Overlay */}
      <div
        className={`absolute inset-0 bg-[#001f3f]/60 backdrop-blur-sm transition-opacity duration-300 ${
          isAnimating ? "opacity-100" : "opacity-0"
        }`}
        onClick={handleCancel}
      ></div>

      {/* Dialog */}
      <div
        className={`relative bg-white rounded-3xl shadow-2xl max-w-md w-full mx-4 transform transition-all duration-300 ${
          isAnimating ? "scale-100 opacity-100" : "scale-95 opacity-0"
        }`}
      >
        {/* Header */}
        <div className="p-6 bg-[#002147] text-white rounded-t-3xl relative overflow-hidden">
          <div className="relative z-10">
            <div className="flex items-center gap-3 mb-2">
              <div className="w-12 h-12 bg-blue-500/20 rounded-2xl flex items-center justify-center">
                <svg
                  className="w-6 h-6 text-blue-400"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2.5"
                    d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"
                  />
                </svg>
              </div>
              <div className="flex-1">
                <h3 className="text-xl font-black">
                  {includeModelP ? "Selecione o modelo de orçamento" : "Selecione o modelo de pedido"}
                </h3>
                <p className="text-xs text-blue-400 font-bold uppercase tracking-wider mt-0.5">
                  Impressão
                </p>
              </div>
              <button
                onClick={handleCancel}
                className="p-2 text-white/70 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
              >
                <svg
                  className="w-6 h-6"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
              </button>
            </div>
          </div>
          <div className="absolute right-[-10%] top-[-10%] w-32 h-32 bg-blue-400/10 rounded-full blur-2xl"></div>
        </div>

        {/* Content */}
        <div className="p-6">
          <div className="space-y-4">
            <label className="block text-sm font-bold text-slate-700 mb-4">
              {includeModelP ? "Selecione o modelo de orçamento" : "Selecione o modelo de pedido"}
            </label>
            <div className="space-y-3">
              <label
                className={`flex items-center p-4 border-2 rounded-xl cursor-pointer transition-all ${
                  selectedModel === "B"
                    ? "bg-blue-50 border-[#002147]"
                    : "border-slate-300 hover:bg-slate-50 hover:border-[#002147]"
                }`}
              >
                <input
                  type="radio"
                  name="printModel"
                  value="B"
                  checked={selectedModel === "B"}
                  onChange={() => setSelectedModel("B")}
                  className="w-5 h-5 text-[#002147] border-2 border-slate-300 focus:ring-2 focus:ring-[#002147] focus:ring-offset-2 cursor-pointer"
                />
                <span className="ml-3 text-sm font-medium text-slate-700">
                  Bobina
                </span>
              </label>
              {includeModelP && (
                <label
                  className={`flex items-center p-4 border-2 rounded-xl cursor-pointer transition-all ${
                    selectedModel === "P"
                      ? "bg-blue-50 border-[#002147]"
                      : "border-slate-300 hover:bg-slate-50 hover:border-[#002147]"
                  }`}
                >
                  <input
                    type="radio"
                    name="printModel"
                    value="P"
                    checked={selectedModel === "P"}
                    onChange={() => setSelectedModel("P")}
                    className="w-5 h-5 text-[#002147] border-2 border-slate-300 focus:ring-2 focus:ring-[#002147] focus:ring-offset-2 cursor-pointer"
                  />
                  <span className="ml-3 text-sm font-medium text-slate-700">
                    Bobina sem Preço
                  </span>
                </label>
              )}
              <label
                className={`flex items-center p-4 border-2 rounded-xl cursor-pointer transition-all ${
                  selectedModel === "A"
                    ? "bg-blue-50 border-[#002147]"
                    : "border-slate-300 hover:bg-slate-50 hover:border-[#002147]"
                }`}
              >
                <input
                  type="radio"
                  name="printModel"
                  value="A"
                  checked={selectedModel === "A"}
                  onChange={() => setSelectedModel("A")}
                  className="w-5 h-5 text-[#002147] border-2 border-slate-300 focus:ring-2 focus:ring-[#002147] focus:ring-offset-2 cursor-pointer"
                />
                <span className="ml-3 text-sm font-medium text-slate-700">
                  Formulário A4
                </span>
              </label>
            </div>
          </div>
        </div>

        {/* Actions */}
        <div className="p-6 pt-0 flex gap-3">
          <Button
            onClick={handleCancel}
            variant="outline"
            className="flex-1"
          >
            Cancelar
          </Button>
          <Button
            onClick={handleConfirm}
            className="flex-1"
          >
            Imprimir
          </Button>
        </div>
      </div>
    </div>
  );
};

export default PrintOrderDialog;