import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
} from '../../basic/alert-dialog'

export interface FolderPermissionDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  projectName: string
  onAllowOnce: () => void
  onAllowAlways: () => void
}

export function FolderPermissionDialog({
  open,
  onOpenChange,
  projectName,
  onAllowOnce,
  onAllowAlways,
}: FolderPermissionDialogProps) {
  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent className="p-6">
        <AlertDialogHeader>
          <AlertDialogTitle className="text-xl leading-xl font-semibold text-text">
            Allow Spark Design to access and modify files in &quot;{projectName}&quot;?
          </AlertDialogTitle>
          <AlertDialogDescription className="mt-2 text-sm leading-sm text-text-tertiary">
            This permission applies to all files and subfolders in this directory. Spark Design may read, update, and
            permanently delete files here, and may share relevant file contents with connected tools when needed.
            Only allow access to folders you trust.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter className="mt-6 flex flex-row justify-end gap-2">
          <AlertDialogCancel className="h-9 rounded-full px-4">Cancel</AlertDialogCancel>
          <button
            type="button"
            className="inline-flex h-9 items-center justify-center rounded-full px-4 text-sm leading-sm font-medium border border-border bg-bg-base text-text transition-colors hover:bg-fill-tertiary active:bg-fill-secondary focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base"
            onClick={onAllowAlways}
          >
            Always Allow
          </button>
          <button
            type="button"
            className="inline-flex h-9 items-center justify-center rounded-full px-4 text-sm leading-sm font-medium bg-text text-text-on-primary transition-opacity hover:opacity-90 active:opacity-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base"
            onClick={onAllowOnce}
          >
            Allow
          </button>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

FolderPermissionDialog.displayName = 'FolderPermissionDialog'