import {useState} from 'react';
import {Upload} from 'lucide-react';
import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle} from '@/components/ui/dialog';
import {Input} from '@/components/ui/input';
import {Button} from '@/components/ui/button';
import type {Artwork} from '@/types';

interface AddArtworkDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onAdd: (artwork: Omit<Artwork, 'id'>) => void;
}

export const AddArtworkDialog = ({open, onOpenChange, onAdd}: AddArtworkDialogProps) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [imageUrl, setImageUrl] = useState('');
  const [year, setYear] = useState(new Date().getFullYear());
  const [medium, setMedium] = useState('');
  const [previewUrl, setPreviewUrl] = useState('');

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        const result = reader.result as string;
        setPreviewUrl(result);
        setImageUrl(result); // Use data URL for local storage
      };
      reader.readAsDataURL(file);
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    onAdd({
      title,
      description,
      imageUrl: imageUrl || previewUrl
    });

    // Reset form
    setTitle('');
    setDescription('');
    setImageUrl('');
    setYear(new Date().getFullYear());
    setMedium('');
    setPreviewUrl('');
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[525px] max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Add New Artwork</DialogTitle>
          <DialogDescription>Upload a new piece to your portfolio</DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4 mt-4">
          <div className="space-y-2">
            <label htmlFor="title" className="text-sm font-medium">
              Title *
            </label>
            <Input id="title" placeholder="Artwork title" value={title} onChange={e => setTitle(e.target.value)} required />
          </div>

          <div className="space-y-2">
            <label htmlFor="description" className="text-sm font-medium">
              Description *
            </label>
            <Input id="description" placeholder="Describe your artwork" value={description} onChange={e => setDescription(e.target.value)} required />
          </div>

          <div className="space-y-2">
            <label htmlFor="medium" className="text-sm font-medium">
              Medium *
            </label>
            <Input id="medium" placeholder="e.g., Oil on Canvas, Acrylic, Watercolor" value={medium} onChange={e => setMedium(e.target.value)} required />
          </div>

          <div className="space-y-2">
            <label htmlFor="year" className="text-sm font-medium">
              Year *
            </label>
            <Input
              id="year"
              type="number"
              min="1900"
              max={new Date().getFullYear() + 1}
              value={year}
              onChange={e => setYear(parseInt(e.target.value))}
              required
            />
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium">Image</label>
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <Input id="image-file" type="file" accept="image/*" onChange={handleFileChange} className="cursor-pointer" />
                <Upload className="h-4 w-4 text-muted-foreground" />
              </div>
              <div className="text-xs text-muted-foreground">or</div>
              <Input id="image-url" type="url" placeholder="https://example.com/image.jpg" value={imageUrl} onChange={e => setImageUrl(e.target.value)} />
            </div>
          </div>

          {(previewUrl || imageUrl) && (
            <div className="space-y-2">
              <label className="text-sm font-medium">Preview</label>
              <img src={previewUrl || imageUrl} alt="Preview" className="w-full h-48 object-cover rounded-md" />
            </div>
          )}

          <Button type="submit" className="w-full">
            Add Artwork
          </Button>
        </form>
      </DialogContent>
    </Dialog>
  );
};
