"use client";

import * as React from "react";
import { MessageSquare } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { DealNotesTab } from "./deal-notes-tab";
import { DealNote } from "./types";

interface DealNotesModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  dealId: string;
  notes: DealNote[];
  canEditNotes: boolean;
  apiBaseUrl: string;
  isFetching?: boolean;
  isLoading?: boolean;
}

export function DealNotesModal({
  open,
  onOpenChange,
  dealId,
  notes,
  canEditNotes,
  apiBaseUrl,
  isFetching,
  isLoading,
}: DealNotesModalProps) {
  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">
            <MessageSquare className="size-5 text-[#6C63FF]" />
            Notes
          </DialogTitle>
        </DialogHeader>

        <div className="flex min-h-0 flex-1 flex-col overflow-hidden px-6 py-4">
          <DealNotesTab
            dealId={dealId}
            notes={notes}
            canEditNotes={canEditNotes}
            apiBaseUrl={apiBaseUrl}
            isFetching={isFetching}
            isLoading={isLoading}
            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>
  );
}