import React, { useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Loader2 } from "lucide-react";

export function BulkExpenseEditDialog({ open, onOpenChange, onConfirm, count, existingCategories = [] }) {
  const [category, setCategory] = useState('');
  const [isCustom, setIsCustom] = useState(false);
  const [customCategory, setCustomCategory] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const finalCategory = isCustom ? customCategory : category;
    if (!finalCategory) return;

    setIsLoading(true);
    await onConfirm(finalCategory);
    setIsLoading(false);
    onOpenChange(false);
    setCategory('');
    setCustomCategory('');
    setIsCustom(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Bulk Edit Category</DialogTitle>
          <DialogDescription>
            Update category for <span className="font-semibold text-foreground">{count}</span> selected expense{count !== 1 ? 's' : ''}.
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4 py-4">
          <div className="space-y-2">
            <Label>Select Category</Label>
            <Select
              value={isCustom ? "custom" : category}
              onValueChange={(val) => {
                if (val === "custom") { setIsCustom(true); setCategory(""); }
                else { setIsCustom(false); setCategory(val); }
              }}
            >
              <SelectTrigger><SelectValue placeholder="Choose a category..." /></SelectTrigger>
              <SelectContent>
                {existingCategories.map((cat) => (
                  <SelectItem key={cat} value={cat}>{cat}</SelectItem>
                ))}
                <SelectItem value="custom">Create New Category...</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {isCustom && (
            <div className="space-y-2">
              <Label>New Category Name</Label>
              <Input value={customCategory} onChange={(e) => setCustomCategory(e.target.value)} placeholder="Enter category name" autoFocus />
            </div>
          )}

          <DialogFooter>
            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>Cancel</Button>
            <Button type="submit" disabled={isLoading || (isCustom ? !customCategory : !category)}>
              {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              Update Expenses
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}
