'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { toast } from 'sonner';
import { documentNumberingService } from '@/lib/services/document-numbering.service';

export function BulkImportForm({ projectId = 1 }: { projectId?: number | string }) {
  const [file, setFile] = useState<File | null>(null);
  const [loading, setLoading] = useState(false);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      setFile(e.target.files[0]);
    }
  };

  const handleUpload = async () => {
    if (!file) return;
    setLoading(true);
    try {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('projectId', projectId.toString());

      await documentNumberingService.bulkImport(formData);
      toast.success('Bulk import initiated. Check audit logs for progress.');
      setFile(null);
    } catch (_error) {
      toast.error('Failed to import numbers.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="border p-4 rounded-md space-y-4">
      <h3 className="text-lg font-medium">Bulk Import Numbers</h3>
      <p className="text-sm text-gray-500">Import legacy numbers via CSV to reserve them in the system.</p>

      <div className="grid w-full max-w-sm items-center gap-1.5">
        <Label htmlFor="csv-file">CSV File</Label>
        <Input id="csv-file" type="file" accept=".csv,.xlsx" onChange={handleFileChange} />
      </div>

      <Button onClick={handleUpload} disabled={!file || loading}>
        {loading ? 'Importing...' : 'Upload & Import'}
      </Button>
    </div>
  );
}