import { useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { AlertCircle, X } from 'lucide-react';

interface SkipApproverModalProps {
  open: boolean;
  onClose: () => void;
  onConfirm: (reason: string) => Promise<void> | void;
  approverName?: string;
  levelNumber?: number;
  requestIdDisplay?: string;
  requestTitle?: string;
}

export function SkipApproverModal({
  open,
  onClose,
  onConfirm,
  approverName,
  levelNumber,
  requestIdDisplay,
  requestTitle
}: SkipApproverModalProps) {
  const [reason, setReason] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleConfirm = async () => {
    if (!reason.trim()) {
      return;
    }

    try {
      setIsSubmitting(true);
      await onConfirm(reason.trim());
      setReason('');
      onClose();
    } catch (error) {
      console.error('Failed to skip approver:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleClose = () => {
    if (!isSubmitting) {
      setReason('');
      onClose();
    }
  };

  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent className="sm:max-w-md max-h-[90vh] flex flex-col p-0">
        <button
          onClick={handleClose}
          className="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 z-50"
          disabled={isSubmitting}
        >
          <X className="h-4 w-4" />
          <span className="sr-only">Close</span>
        </button>

        <DialogHeader className="px-6 pt-6 pb-4 flex-shrink-0">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
              <AlertCircle className="w-5 h-5 text-orange-600" />
            </div>
            <DialogTitle className="text-xl font-bold text-gray-900">Skip Approver</DialogTitle>
          </div>
        </DialogHeader>

        <div className="space-y-4 px-6 py-4 overflow-y-auto flex-1">
          {/* Warning Message */}
          <div className="bg-orange-50 border border-orange-200 rounded-lg p-4">
            <div className="flex items-start gap-3">
              <AlertCircle className="w-5 h-5 text-orange-600 flex-shrink-0 mt-0.5" />
              <div className="flex-1">
                <p className="text-sm font-semibold text-orange-900 mb-1">Important Notice</p>
                <p className="text-sm text-orange-800">
                  You are about to skip the current approver. The request will be moved to the next approval level.
                </p>
              </div>
            </div>
          </div>

          {/* Request Information */}
          {(requestIdDisplay || requestTitle) && (
            <div className="space-y-2">
              <Label className="text-sm font-semibold text-gray-700">Request Details</Label>
              <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 space-y-1">
                {requestIdDisplay && (
                  <p className="text-sm text-gray-900">
                    <span className="font-medium">Request ID:</span> {requestIdDisplay}
                  </p>
                )}
                {requestTitle && (
                  <p className="text-sm text-gray-700">
                    <span className="font-medium">Title:</span> {requestTitle}
                  </p>
                )}
              </div>
            </div>
          )}

          {/* Approver Information */}
          {(approverName || levelNumber) && (
            <div className="space-y-2">
              <Label className="text-sm font-semibold text-gray-700">Approver Being Skipped</Label>
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 space-y-1">
                {levelNumber && (
                  <p className="text-sm text-blue-900">
                    <span className="font-medium">Level:</span> {levelNumber}
                  </p>
                )}
                {approverName && (
                  <p className="text-sm text-blue-900">
                    <span className="font-medium">Approver:</span> {approverName}
                  </p>
                )}
              </div>
            </div>
          )}

          {/* Reason Input */}
          <div className="space-y-2">
            <Label htmlFor="skip-reason" className="text-sm font-semibold text-gray-700">
              Reason for Skipping *
            </Label>
            <Textarea
              id="skip-reason"
              placeholder="Please provide a detailed reason for skipping this approver (e.g., 'Approver is on leave until [date]', 'Approver unavailable - escalating to next level')"
              value={reason}
              onChange={(e) => setReason(e.target.value)}
              className="min-h-[100px] border-2 border-gray-300 focus:border-orange-500"
              disabled={isSubmitting}
              autoFocus
            />
            <p className="text-xs text-gray-500">
              This reason will be recorded in the activity log and all participants will be notified.
            </p>
          </div>
        </div>

        {/* Action Buttons */}
        <div className="flex items-center gap-3 px-6 py-4 border-t flex-shrink-0 bg-white">
          <Button
            type="button"
            variant="outline"
            onClick={handleClose}
            className="flex-1 h-11 border-gray-300"
            disabled={isSubmitting}
          >
            Cancel
          </Button>
          <Button
            type="button"
            onClick={handleConfirm}
            className="flex-1 h-11 bg-orange-600 hover:bg-orange-700 text-white"
            disabled={isSubmitting || !reason.trim()}
          >
            <AlertCircle className="w-4 h-4 mr-2" />
            {isSubmitting ? 'Skipping...' : 'Skip Approver'}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}

