import React from 'react';
import { AlertCircle } from 'lucide-react';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';

interface DeleteConfirmDialogProps {
  show: boolean;
  selectedCount: number;
  onConfirm: () => Promise<void>;
  onCancel: () => void;
}

export function DeleteConfirmDialog({
  show,
  selectedCount,
  onConfirm,
  onCancel
}: DeleteConfirmDialogProps) {
  return (
    <AlertDialog open={show} onOpenChange={(open) => !open && onCancel()}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete {selectedCount} email{selectedCount !== 1 ? 's' : ''}?</AlertDialogTitle>
          <AlertDialogDescription>
            This will move the selected email{selectedCount !== 1 ? 's' : ''} to the trash folder.
            You can restore them later from the trash folder if needed.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel onClick={onCancel}>Cancel</AlertDialogCancel>
          <AlertDialogAction onClick={onConfirm}>Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

interface LoginNeededAlertProps {
  show: boolean;
  onLogin: () => void;
  onClose: () => void;
}

export function LoginNeededAlert({
  show,
  onLogin,
  onClose
}: LoginNeededAlertProps) {
  if (!show) return null;
  
  return (
    <Alert className="mb-4">
      <AlertCircle className="h-4 w-4" />
      <AlertTitle>Please log in to your email account</AlertTitle>
      <AlertDescription>
        You need to connect your email account before you can access your emails.
      </AlertDescription>
      <div className="mt-2 flex gap-2">
        <Button size="sm" onClick={onLogin}>Go to Login</Button>
        <Button size="sm" variant="outline" onClick={onClose}>Dismiss</Button>
      </div>
    </Alert>
  );
}