import { useState } from 'react';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
import { Button } from '../ui/button';
import { Input } from '../ui/input';

interface CreateDocumentDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onCreate: (title: string, description: string) => void;
}

export function CreateDocumentDialog({ open, onOpenChange, onCreate }: CreateDocumentDialogProps) {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');

  const handleCreate = () => {
    if (!title.trim()) return;
    onCreate(title, description);
    // Reset form
    setTitle('');
    setDescription('');
  };

  const handleCancel = () => {
    onOpenChange(false);
    // Reset form
    setTitle('');
    setDescription('');
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Novi dokument</DialogTitle>
          <DialogDescription>
            Unesite naziv i opis novog dokumenta.
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div>
            <label className="text-sm font-medium text-gray-700 mb-1 block">
              Naslov <span className="text-red-500">*</span>
            </label>
            <Input
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="Novi dokument"
              maxLength={255}
              autoFocus
            />
            <p className="text-xs text-gray-500 mt-1">{title.length}/255 znakova</p>
          </div>
          <div>
            <label className="text-sm font-medium text-gray-700 mb-1 block">
              Opis
            </label>
            <textarea
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Dodajte opis dokumenta..."
              className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
            />
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={handleCancel}>
            Odustani
          </Button>
          <Button onClick={handleCreate} disabled={!title.trim()}>
            Kreiraj
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

