import React, { useState } from 'react';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { Label } from '../ui/label';
import { User, Eye, AtSign, Plus } from 'lucide-react';
import { toast } from 'sonner@2.0.3';

interface AddUserModalProps {
  isOpen: boolean;
  onClose: () => void;
  type: 'approver' | 'spectator';
  requestId: string;
  requestTitle: string;
}

export function AddUserModal({ isOpen, onClose, type, requestId, requestTitle }: AddUserModalProps) {
  const [email, setEmail] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!email.trim()) {
      toast.error('Email Required', {
        description: 'Please enter an email address.',
      });
      return;
    }

    // Basic email validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
      toast.error('Invalid Email', {
        description: 'Please enter a valid email address.',
      });
      return;
    }

    setIsSubmitting(true);

    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      toast.success(`${type === 'approver' ? 'Approver' : 'Spectator'} Added`, {
        description: `${email} has been added as ${type === 'approver' ? 'an approver' : 'a spectator'} to "${requestTitle}".`,
        duration: 5000,
      });
      
      setEmail('');
      onClose();
    } catch (error) {
      toast.error('Failed to Add User', {
        description: 'Something went wrong. Please try again.',
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleClose = () => {
    setEmail('');
    onClose();
  };

  const Icon = type === 'approver' ? User : Eye;
  const title = type === 'approver' ? 'Add Approver' : 'Add Spectator';
  const description = type === 'approver' 
    ? 'Add a new approver to this request. They will be notified and can approve or reject the request.'
    : 'Add a spectator to this request. They will receive notifications but cannot approve or reject.';

  return (
    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Icon className="w-5 h-5 text-re-green" />
            {title}
          </DialogTitle>
          <DialogDescription>
            {description}
          </DialogDescription>
        </DialogHeader>
        
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email" className="flex items-center gap-2">
              <AtSign className="w-4 h-4 text-gray-500" />
              Email Address
            </Label>
            <Input
              id="email"
              type="email"
              placeholder="user@example.com (use @ to add user)"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="bg-input-background border-border focus:ring-re-green focus:border-re-green"
              disabled={isSubmitting}
            />
            <p className="text-xs text-muted-foreground">
              Use the @ sign to mention and add a user to this request.
            </p>
          </div>

          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              type="button"
              variant="outline"
              onClick={handleClose}
              disabled={isSubmitting}
            >
              Cancel
            </Button>
            <Button
              type="submit"
              disabled={isSubmitting || !email.trim()}
              className="bg-re-green hover:bg-re-green/90 text-white"
            >
              {isSubmitting ? (
                <>
                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
                  Adding...
                </>
              ) : (
                <>
                  <Plus className="w-4 h-4 mr-2" />
                  Add {type === 'approver' ? 'Approver' : 'Spectator'}
                </>
              )}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}