import { useNavigate } from "@remix-run/react";
import { CheckCircle2, ArrowLeft } from "lucide-react";
import { Dialog, DialogContent, DialogOverlay } from "~/components/ui/dialog";
import { Button } from "~/components/ui/button";
import { UserCollection } from "src/api/types";

interface SetSuccessModalProps {
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
  collection: UserCollection | null;
}

export const SetSuccessModal = ({
  isOpen,
  onOpenChange,
  collection,
}: SetSuccessModalProps) => {
  const navigate = useNavigate();

  const handleViewSet = () => {
    if (collection?.id) {
      navigate(`/profile/sets/${collection.id}`);
      onOpenChange(false);
    }
  };

  const handleClose = () => {
    onOpenChange(false);
  };

  return (
    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogOverlay />
      <DialogContent className="p-4 bg-WHITE rounded-[15px] w-[calc(100%-40px)]">
        <div className="flex flex-col gap-6">
          <div className="flex flex-col gap-3 items-center w-full">
            <div className="w-16 h-16 rounded-full bg-GREEN/10 flex items-center justify-center">
              <CheckCircle2 size={32} className="text-GREEN" />
            </div>
            <p className="text-B14 font-bold mt-1">ست با موفقیت ایجاد شد!</p>
            <p className="text-R12 text-GRAY text-center">
              ست "{collection?.title}" ایجاد شد و محصول به آن اضافه شد.
            </p>
          </div>

          <div className="flex flex-row gap-4 w-full">
            <Button
              className="w-[100%]"
              size="sm"
              variant="dark"
              onClick={handleClose}
            >
              بستن
            </Button>
            <Button
              className="w-[100%] gap-2"
              variant="primary"
              size="sm"
              onClick={handleViewSet}
            >
              مشاهده ست
              <ArrowLeft size={16} />
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};