"use client";
import { X } from "lucide-react";
import { cn } from "../../lib/utils";
import type { Organization } from "../../types/organization";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "../ui/dialog";
import {
  OrganizationCreator,
  type OrganizationCreatorClassNames,
} from "./organization-create";

export type CreateOrganizationModalClassNames = {
  base?: string;
  header?: string;
  title?: string;
  description?: string;
  closeButton?: string;
  creator?: OrganizationCreatorClassNames;
};

export interface CreateOrganizationModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  classNames?: CreateOrganizationModalClassNames;
  logoSize?: number;
  logoExtension?: string;
  title?: string;
  description?: string;
  organization?: Organization;
  mode?: "create" | "update";
}

export function CreateOrganizationModal({
  open,
  onOpenChange,
  classNames,
  logoSize,
  logoExtension,
  mode,
  title = "New Organization",
  description = "Create a new organization to collaborate with your team.",
  organization,
}: CreateOrganizationModalProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className={cn("sm:max-w-[425px]", classNames?.base)}
        onInteractOutside={(e) => {
          e.preventDefault();
        }}
      >
        <DialogHeader className={classNames?.header}>
          <DialogTitle
            className={cn("text-xl font-semibold", classNames?.title)}
          >
            {title}
          </DialogTitle>
          <DialogDescription className={classNames?.description}>
            {description}
          </DialogDescription>
        </DialogHeader>

        <OrganizationCreator
          organization={organization}
          onSuccess={() => onOpenChange(false)}
          logoSize={logoSize}
          mode={mode}
          logoExtension={logoExtension}
          classNames={classNames?.creator}
        />

        <DialogClose
          className={cn(
            "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
            classNames?.closeButton
          )}
        >
          <X className="h-4 w-4" />
          <span className="sr-only">Close</span>
        </DialogClose>
      </DialogContent>
    </Dialog>
  );
}