'use client';

import { useState, useEffect } from 'react';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useToast } from '@/hooks/use-toast';
import { updateImport } from '@/app/actions/imports';

interface Import {
  id: number;
  name: string;
  importDate: string;
  layoutId: number;
  layout: {
    id: number;
    name: string;
  };
}

interface EditImportDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  importRecord: Import | null;
  onSuccess?: () => void;
}

export function EditImportDialog({ open, onOpenChange, importRecord, onSuccess }: EditImportDialogProps) {
  const [name, setName] = useState('');
  const [loading, setLoading] = useState(false);
  const { toast } = useToast();

  useEffect(() => {
    if (importRecord) {
      setName(importRecord.name);
    }
  }, [importRecord]);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    
    if (!importRecord || !name.trim()) {
      toast({
        title: 'Error',
        description: 'Please enter a valid import name',
        variant: 'destructive',
      });
      return;
    }

    setLoading(true);

    try {
      const result = await updateImport({
        id: importRecord.id,
        name: name.trim(),
      });

      if (result.success) {
        toast({
          title: 'Success',
          description: 'Import updated successfully',
        });
        onOpenChange(false);
        onSuccess?.();
      } else {
        toast({
          title: 'Error',
          description: result.error || 'Failed to update import',
          variant: 'destructive',
        });
      }
    } catch {
      toast({
        title: 'Error',
        description: 'Failed to update import',
        variant: 'destructive',
      });
    } finally {
      setLoading(false);
    }
  }

  if (!importRecord) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Edit Import</DialogTitle>
          <DialogDescription>
            Update the name of the import record.
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit}>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="edit-name">Import Name</Label>
              <Input
                id="edit-name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Enter import name"
                disabled={loading}
              />
            </div>
          </div>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={loading}>
              Cancel
            </Button>
            <Button type="submit" disabled={loading || !name.trim()}>
              {loading ? 'Updating...' : 'Update Import'}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}