import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Edit, CheckCircle, XCircle, Clock } from 'lucide-react';
import type { SubmissionItemWithDeps } from '@/lib/submissionItemsService';

interface ItemSelectorDialogProps {
  items: SubmissionItemWithDeps[];
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSelectItem: (item: SubmissionItemWithDeps) => void;
  onBulkEdit?: () => void;
}

export function ItemSelectorDialog({ 
  items, 
  open, 
  onOpenChange, 
  onSelectItem,
  onBulkEdit 
}: ItemSelectorDialogProps) {
  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'approved':
        return <CheckCircle className="h-4 w-4 text-green-600" />;
      case 'rejected':
        return <XCircle className="h-4 w-4 text-red-600" />;
      default:
        return <Clock className="h-4 w-4 text-yellow-600" />;
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'approved':
        return 'bg-green-100 text-green-800 border-green-200';
      case 'rejected':
        return 'bg-red-100 text-red-800 border-red-200';
      case 'pending':
        return 'bg-yellow-100 text-yellow-800 border-yellow-200';
      default:
        return 'bg-gray-100 text-gray-800 border-gray-200';
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Edit className="w-5 h-5" />
            Select Item to Edit
          </DialogTitle>
          <DialogDescription>
            This submission contains {items.length} items. Choose which one to edit, or edit all at once.
          </DialogDescription>
        </DialogHeader>
        
        <div className="space-y-3 mt-4">
          {/* Bulk Edit Option */}
          {onBulkEdit && items.length > 1 && (
            <Button
              variant="outline"
              className="w-full justify-start h-auto py-4 border-2 border-primary/20 hover:border-primary/40"
              onClick={onBulkEdit}
            >
              <Edit className="mr-3 h-5 w-5 text-primary" />
              <div className="flex flex-col items-start">
                <span className="font-semibold">Edit All Items ({items.length})</span>
                <span className="text-xs text-muted-foreground">Use tabbed interface to edit multiple items</span>
              </div>
            </Button>
          )}
          
          {/* Individual Items */}
          {items.map((item) => (
            <Button
              key={item.id}
              variant="outline"
              className="w-full justify-start h-auto py-4 hover:bg-accent"
              onClick={() => onSelectItem(item)}
            >
              <div className="flex items-center justify-between w-full">
                <div className="flex items-center gap-3">
                  <Edit className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                  <div className="flex flex-col items-start">
                    <span className="font-medium capitalize">
                      {item.item_type.replace('_', ' ')}
                    </span>
                    {typeof item.item_data === 'object' && item.item_data !== null && !Array.isArray(item.item_data) && 'name' in item.item_data && (
                      <span className="text-sm text-muted-foreground">
                        {String((item.item_data as Record<string, unknown>).name)}
                      </span>
                    )}
                    {item.dependencies && item.dependencies.length > 0 && (
                      <span className="text-xs text-muted-foreground mt-1">
                        Depends on {item.dependencies.length} item(s)
                      </span>
                    )}
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  {getStatusIcon(item.status)}
                  <Badge variant="outline" className={getStatusColor(item.status)}>
                    {item.status}
                  </Badge>
                </div>
              </div>
            </Button>
          ))}
        </div>
      </DialogContent>
    </Dialog>
  );
}