"use client";

import * as React from "react";
import { Bell } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { DealRemindersTab } from "./deal-reminders-tab";
import { DealReminder } from "./types";

interface DealRemindersModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  dealId: string;
  reminders: DealReminder[];
  allUsers: { id: string; name?: string; email?: string }[];
}

export function DealRemindersModal({
  open,
  onOpenChange,
  dealId,
  reminders,
  allUsers,
}: DealRemindersModalProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="flex max-h-[85vh] flex-col gap-0 overflow-hidden rounded-2xl border border-gray-100 p-0 sm:max-w-2xl">
        <DialogHeader className="shrink-0 border-b border-gray-100 px-6 py-4 text-left">
          <DialogTitle className="flex items-center gap-2 text-lg font-semibold text-gray-900">
            <Bell className="size-5 text-[#6C63FF]" />
            Reminders
          </DialogTitle>
        </DialogHeader>

        <div className="min-h-0 flex-1 overflow-y-auto px-6 py-4 custom-scrollbar">
          <DealRemindersTab
            dealId={dealId}
            reminders={reminders}
            allUsers={allUsers}
            layout="modal"
          />
        </div>

        <div className="shrink-0 border-t border-gray-100 bg-gray-50/80 px-6 py-3">
          <Button
            variant="outline"
            className="rounded-lg"
            onClick={() => onOpenChange(false)}
          >
            Close
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}