src/components/AddItemModal.tsx

import { zodResolver } from '@hookform/resolvers/zod';
import { Camera, Search, Upload, X } from 'lucide-react';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import { z } from 'zod';

import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { useCreateClosetItem } from '@/hooks/useClosetQueries';
import { UPLOAD_CONFIG } from '@/lib/config';
import { CLOTHING_CATEGORIES } from '@/types';

const addItemSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  brand: z.string().min(1, 'Brand is required'),
  category: z.string().min(1, 'Category is required'),
});

type AddItemFormData = z.infer<typeof addItemSchema>;

interface AddItemModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export default function AddItemModal({ isOpen, onClose }: AddItemModalProps) {
  const [mode, setMode] = useState<'choice' | 'manual' | 'search'>('choice');
  const [imageFile, setImageFile] = useState<File | null>(null);
  const [imagePreview, setImagePreview] = useState<string | null>(null);
  const createItemMutation = useCreateClosetItem();

  const form = useForm<AddItemFormData>({
    resolver: zodResolver(addItemSchema),
    defaultValues: {
      name: '',
      brand: '',
      category: '',
    },
  });

  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      if (file.size > UPLOAD_CONFIG.MAX_FILE_SIZE) {
        toast.error(
          `Image size must be less than ${UPLOAD_CONFIG.MAX_FILE_SIZE_MB}MB`
        );
        return;
      }

      if (!file.type.startsWith('image/')) {
        toast.error('Please select a valid image file');
        return;
      }

      setImageFile(file);
      const reader = new FileReader();
      reader.onloadend = () => {
        setImagePreview(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  const removeImage = () => {
    setImageFile(null);
    setImagePreview(null);
    const fileInput = document.getElementById(
      'image-upload'
    ) as HTMLInputElement;
    if (fileInput) fileInput.value = '';
  };

  const onSubmit = (data: AddItemFormData) => {
    createItemMutation.mutate(
      {
        ...data,
        imageFile: imageFile ?? undefined,
      },
      {
        onSuccess: () => {
          onClose();
          form.reset();
          setImageFile(null);
          setImagePreview(null);
        },
      }
    );
  };

  const handleClose = () => {
    onClose();
    setMode('choice');
    form.reset();
    setImageFile(null);
    setImagePreview(null);
  };

  const handleSearchProducts = () => {
    window.location.href = '/search';
    handleClose();
  };

  return (
    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogContent className="max-h-[90vh] max-w-md overflow-y-auto">
        <DialogHeader>
          <DialogTitle>
            {mode === 'choice'
              ? 'Add to Closet'
              : mode === 'manual'
                ? 'Add with Photos'
                : 'Search Products'}
          </DialogTitle>
        </DialogHeader>

        {mode === 'choice' ? (
          <div className="space-y-4">
            <div
              className="flex cursor-pointer items-center gap-4 rounded-lg border-2 border-dashed border-gray-300 p-6 transition-colors hover:border-gray-400"
              onClick={() => setMode('manual')}
            >
              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50">
                <Camera className="h-6 w-6 text-blue-600" />
              </div>
              <div>
                <h3 className="font-semibold text-gray-900">Add with Photos</h3>
                <p className="text-sm text-gray-600">
                  Upload photos of items you own
                </p>
              </div>
            </div>

            <div
              className="flex cursor-pointer items-center gap-4 rounded-lg border-2 border-dashed border-gray-300 p-6 transition-colors hover:border-gray-400"
              onClick={handleSearchProducts}
            >
              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
                <Search className="h-6 w-6 text-green-600" />
              </div>
              <div>
                <h3 className="font-semibold text-gray-900">Search Items</h3>
                <p className="text-sm text-gray-600">
                  Find items from brand catalogs
                </p>
              </div>
            </div>
          </div>
        ) : mode === 'manual' ? (
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">Photo (Optional)</label>
                {imagePreview ? (
                  <div className="relative">
                    <img
                      src={imagePreview}
                      alt="Preview"
                      className="h-48 w-full rounded-lg border object-cover"
                    />
                    <button
                      type="button"
                      onClick={removeImage}
                      className="absolute right-2 top-2 rounded-full bg-red-500 p-1 text-white transition-colors hover:bg-red-600"
                    >
                      <X className="h-4 w-4" />
                    </button>
                  </div>
                ) : (
                  <div className="relative rounded-lg border-2 border-dashed border-gray-300 p-6 text-center transition-colors hover:border-gray-400">
                    <Upload className="mx-auto mb-2 h-8 w-8 text-gray-400" />
                    <p className="mb-2 text-sm text-gray-600">
                      Click to upload or drag and drop
                    </p>
                    <p className="text-xs text-gray-500">
                      PNG, JPG, HEIC up to {UPLOAD_CONFIG.MAX_FILE_SIZE_MB}MB
                    </p>
                    <input
                      id="image-upload"
                      type="file"
                      accept="image/*"
                      onChange={handleImageChange}
                      className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
                    />
                  </div>
                )}
              </div>

              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Name</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="e.g., Classic White Shirt"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="brand"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Brand</FormLabel>
                    <FormControl>
                      <Input placeholder="e.g., Uniqlo" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="category"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Category</FormLabel>
                    <Select
                      onValueChange={field.onChange}
                      defaultValue={field.value}
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Select a category" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {CLOTHING_CATEGORIES.map((category) => (
                          <SelectItem key={category} value={category}>
                            {category}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <DialogFooter className="gap-2">
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => setMode('choice')}
                  disabled={createItemMutation.isPending}
                >
                  Back
                </Button>
                <Button
                  type="submit"
                  disabled={createItemMutation.isPending}
                >
                  {createItemMutation.isPending ? 'Adding...' : 'Add to Closet'}
                </Button>
              </DialogFooter>
            </form>
          </Form>
        ) : null}

        {mode === 'choice' && (
          <DialogFooter>
            <Button variant="outline" onClick={handleClose}>
              Cancel
            </Button>
          </DialogFooter>
        )}
      </DialogContent>
    </Dialog>
  );
}