import { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { AlertCircle } from 'lucide-react';

export const REJECTION_REASONS = [
  { value: 'incomplete', label: 'Incomplete Information', template: 'The submission is missing required information or details.' },
  { value: 'inaccurate', label: 'Inaccurate Data', template: 'The information provided appears to be inaccurate or incorrect.' },
  { value: 'duplicate', label: 'Duplicate Entry', template: 'This entry already exists in the database.' },
  { value: 'inappropriate', label: 'Inappropriate Content', template: 'The submission contains inappropriate or irrelevant content.' },
  { value: 'poor_quality', label: 'Poor Quality', template: 'The submission does not meet quality standards (e.g., blurry photos, unclear descriptions).' },
  { value: 'spam', label: 'Spam', template: 'This appears to be spam or a test submission.' },
  { value: 'custom', label: 'Other (Custom Reason)', template: '' },
];

interface RejectionDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  itemCount: number;
  hasDependents: boolean;
  onReject: (reason: string, cascade: boolean) => void;
}

export function RejectionDialog({
  open,
  onOpenChange,
  itemCount,
  hasDependents,
  onReject,
}: RejectionDialogProps) {
  const [selectedReason, setSelectedReason] = useState<string>('incomplete');
  const [customReason, setCustomReason] = useState('');
  const [cascade, setCascade] = useState(true);

  const handleSubmit = () => {
    const reasonTemplate = REJECTION_REASONS.find(r => r.value === selectedReason);
    const finalReason = selectedReason === 'custom' 
      ? customReason 
      : reasonTemplate?.template || '';

    if (!finalReason.trim()) {
      return;
    }

    onReject(finalReason, cascade);
    onOpenChange(false);
    
    // Reset state
    setSelectedReason('incomplete');
    setCustomReason('');
    setCascade(true);
  };

  const currentReason = selectedReason === 'custom' ? customReason : 
    REJECTION_REASONS.find(r => r.value === selectedReason)?.template || '';

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>Reject Submission Items</DialogTitle>
          <DialogDescription>
            You are about to reject {itemCount} item{itemCount !== 1 ? 's' : ''}. 
            Please provide a reason for rejection.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          {hasDependents && (
            <div className="flex items-start gap-2 p-4 bg-warning/10 border border-warning/20 rounded-lg">
              <AlertCircle className="h-5 w-5 text-warning flex-shrink-0 mt-0.5" />
              <div className="text-sm">
                <p className="font-medium text-warning">Dependency Warning</p>
                <p className="text-muted-foreground mt-1">
                  Some selected items have dependent items. You can choose to cascade the rejection to all dependents.
                </p>
              </div>
            </div>
          )}

          <div className="space-y-3">
            <Label>Rejection Reason</Label>
            <RadioGroup value={selectedReason} onValueChange={setSelectedReason}>
              {REJECTION_REASONS.map((reason) => (
                <div key={reason.value} className="flex items-start space-x-2">
                  <RadioGroupItem value={reason.value} id={reason.value} className="mt-1" />
                  <Label htmlFor={reason.value} className="font-normal cursor-pointer flex-1">
                    <span className="font-medium">{reason.label}</span>
                    {reason.template && (
                      <p className="text-sm text-muted-foreground mt-0.5">{reason.template}</p>
                    )}
                  </Label>
                </div>
              ))}
            </RadioGroup>
          </div>

          {selectedReason === 'custom' && (
            <div className="space-y-2">
              <Label htmlFor="custom-reason">Custom Reason *</Label>
              <Textarea
                id="custom-reason"
                placeholder="Provide a detailed reason for rejection..."
                value={customReason}
                onChange={(e) => setCustomReason(e.target.value)}
                rows={4}
                className="resize-none"
              />
            </div>
          )}

          {hasDependents && (
            <div className="space-y-2 pt-2 border-t">
              <Label className="text-base">Dependency Handling</Label>
              <RadioGroup value={cascade ? 'cascade' : 'orphan'} onValueChange={(v) => setCascade(v === 'cascade')}>
                <div className="flex items-start space-x-2">
                  <RadioGroupItem value="cascade" id="cascade" className="mt-1" />
                  <Label htmlFor="cascade" className="font-normal cursor-pointer">
                    <span className="font-medium">Cascade Rejection</span>
                    <p className="text-sm text-muted-foreground">Reject all dependent items as well</p>
                  </Label>
                </div>
                <div className="flex items-start space-x-2">
                  <RadioGroupItem value="orphan" id="orphan" className="mt-1" />
                  <Label htmlFor="orphan" className="font-normal cursor-pointer">
                    <span className="font-medium">Keep Dependents Pending</span>
                    <p className="text-sm text-muted-foreground">Leave dependent items in pending state</p>
                  </Label>
                </div>
              </RadioGroup>
            </div>
          )}
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button 
            variant="destructive" 
            onClick={handleSubmit}
            disabled={!currentReason.trim()}
          >
            Reject {itemCount} Item{itemCount !== 1 ? 's' : ''}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}