"use client";
import React, { useState } from "react";
import { FormButton } from "@/app/components/form/forms";

interface CoCreationChoiceModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (choice: string) => void;
  subCategoryName?: string;
  isCoordCompatible?: boolean;
  isSuitCompatible?: boolean;
}

export default function CoCreationChoiceModal({
  isOpen,
  onClose,
  onSubmit,
  subCategoryName = "item",
  isCoordCompatible = false,
  isSuitCompatible = false,
}: CoCreationChoiceModalProps) {
  const [selectedChoice, setSelectedChoice] = useState<string>("");

  if (!isOpen) return null;

  const handleSubmit = () => {
    if (selectedChoice) {
      onSubmit(selectedChoice);
      setSelectedChoice("");
      onClose();
    }
  };

  const handleClose = () => {
    setSelectedChoice("");
    onClose();
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={handleClose}
      />

      {/* Modal Content */}
      <div className="relative z-10 mx-4 w-full max-w-lg bg-gray-100 p-4 shadow-xl md:p-12">
        <div className="absolute top-2 right-2">
          <button
            onClick={handleClose}
            className="flex h-12 w-12 items-center justify-center align-middle text-gray-950/50 transition-colors hover:text-gray-950"
          >
            <i className="icon-[iconamoon--close-duotone] text-2xl"></i>
          </button>
        </div>
        <div className="p-6">
          {/* Header */}
          <div className="flex items-center justify-between">
            <h3>Choose your Co-creation</h3>
          </div>

          {/* Content */}
          <div className="">
            <p className="text-sm">
              {isCoordCompatible && isSuitCompatible
                ? `Would you like to create just the ${subCategoryName} or a Full Suit or Co-ord Set?`
                : `Would you like to create just the ${subCategoryName} or a ${
                    isCoordCompatible ? "Co-ord Set" : "Full Suit"
                  }?`}
            </p>

            {/* Radio Options */}
            <div className="my-4 space-y-2">
              {/* Single Item Option - Always Available */}
              <label
                className={`group flex cursor-pointer items-start space-x-2 border border-dashed p-4 transition-all ${
                  selectedChoice === "single"
                    ? "border-gray-950"
                    : "border-gray-950/50 hover:border-gray-950"
                }`}
              >
                <div className="relative">
                  <input
                    type="radio"
                    name="coCreationChoice"
                    value="single"
                    checked={selectedChoice === "single"}
                    onChange={(e) => setSelectedChoice(e.target.value)}
                    className="mt-1 h-5 w-5 border-1 border-gray-950 text-gray-950 checked:bg-gray-950"
                  />
                  {selectedChoice === "single" && (
                    <div className="absolute top-0.5 left-0 text-xl text-white">
                      <i className="icon-[material-symbols--check-rounded]"></i>
                    </div>
                  )}
                </div>
                <div className="flex-1">
                  <div className="font-bogart text-lg">
                    Just the {subCategoryName}
                  </div>
                  <div className="text-xs">
                    Create a single piece based on this silhouette
                  </div>
                </div>
              </label>

              {/* Full Suit Option - Show if suit compatible */}
              {isSuitCompatible && (
                <label
                  className={`group flex cursor-pointer items-start space-x-2 border border-dashed p-4 transition-all ${
                    selectedChoice === "suit"
                      ? "border-gray-950"
                      : "border-gray-950/50 hover:border-gray-950"
                  }`}
                >
                  <div className="relative">
                    <input
                      type="radio"
                      name="coCreationChoice"
                      value="suit"
                      checked={selectedChoice === "suit"}
                      onChange={(e) => setSelectedChoice(e.target.value)}
                      className="mt-1 h-5 w-5 border-1 border-gray-950 text-gray-950 checked:bg-gray-950"
                    />
                    {selectedChoice === "suit" && (
                      <div className="absolute top-0.5 left-0 text-xl text-white">
                        <i className="icon-[material-symbols--check-rounded]"></i>
                      </div>
                    )}
                  </div>
                  <div className="flex-1">
                    <div className="font-bogart text-lg">Full Suit</div>
                    <div className="text-xs">Create a complete formal suit</div>
                  </div>
                </label>
              )}

              {/* Co-ord Set Option - Show if coord compatible */}
              {isCoordCompatible && (
                <label
                  className={`group flex cursor-pointer items-start space-x-2 border border-dashed p-4 transition-all ${
                    selectedChoice === "coord"
                      ? "border-gray-950"
                      : "border-gray-950/50 hover:border-gray-950"
                  }`}
                >
                  <div className="relative">
                    <input
                      type="radio"
                      name="coCreationChoice"
                      value="coord"
                      checked={selectedChoice === "coord"}
                      onChange={(e) => setSelectedChoice(e.target.value)}
                      className="mt-1 h-5 w-5 border-1 border-gray-950 text-gray-950 checked:bg-gray-950"
                    />
                    {selectedChoice === "coord" && (
                      <div className="absolute top-0.5 left-0 text-xl text-white">
                        <i className="icon-[material-symbols--check-rounded]"></i>
                      </div>
                    )}
                  </div>
                  <div className="flex-1">
                    <div className="font-bogart text-lg">Co-ord Set</div>
                    <div className="text-xs">
                      Create a coordinated outfit set
                    </div>
                  </div>
                </label>
              )}
            </div>
          </div>

          {/* Actions */}
          <div className="w-full">
            <FormButton
              id="btn_proceed_cocreation"
              label="Proceed"
              type="button"
              color="amber"
              onClick={handleSubmit}
              disabled={!selectedChoice}
            />
          </div>
        </div>
      </div>
    </div>
  );
}