import React from 'react';
import { createPortal } from 'react-dom';
import { Clock, AlertCircle } from 'lucide-react';
import { Button } from '@/components/ui/button';

interface CheckOutReminderDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onCheckOut: () => void;
  isLoading?: boolean;
  userName?: string;
  workDuration?: string;
}

const CheckOutReminderDialog: React.FC<CheckOutReminderDialogProps> = ({
  isOpen,
  onClose,
  onCheckOut,
  isLoading = false,
  userName = 'User',
  workDuration = '00:00:00',
}) => {
  if (!isOpen) return null;

  const dialogContent = (
    <div className="fixed inset-0 z-[9999] flex items-center justify-center overflow-y-auto p-4">
      <div 
        className="fixed inset-0 bg-black/60 backdrop-blur-sm"
        onClick={!isLoading ? onClose : undefined}
      />
      
      <div className="relative z-[10000] w-full max-w-md rounded-lg border bg-background p-6 shadow-lg">
        <div className="flex gap-4 items-start mb-4">
          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-amber-100 text-amber-600">
            <Clock className="h-6 w-6" />
          </div>
          <div className="flex-1">
            <h2 className="text-lg font-semibold">Time to Check Out!</h2>
            <p className="text-sm text-muted-foreground mt-2">
              Hi <span className="font-medium">{userName}</span>, it's past 6:30 PM.
            </p>
            <p className="text-sm text-muted-foreground mt-1">
              You've worked for <span className="font-semibold text-foreground">{workDuration}</span> today. Don't forget to check out!
            </p>
          </div>
        </div>
        
        <div className="mt-4 p-4 bg-amber-50 border border-amber-200 rounded-md">
          <div className="flex items-start gap-2">
            <AlertCircle className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
            <p className="text-xs text-amber-800">
              Checking out helps maintain accurate attendance records and ensures your working hours are properly tracked.
            </p>
          </div>
        </div>
        
        <div className="flex justify-end gap-2 mt-6">
          <Button
            variant="outline"
            onClick={onClose}
            disabled={isLoading}
          >
            Remind Me Later
          </Button>
          <Button
            onClick={onCheckOut}
            disabled={isLoading}
          >
            {isLoading ? 'Checking Out...' : 'Check Out Now'}
          </Button>
        </div>
      </div>
    </div>
  );

  return createPortal(dialogContent, document.body);
};

export default CheckOutReminderDialog;