'use client';

import { useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { Modal } from '../../ui/modal';
import { Button } from '../../ui/button';
import { Textarea } from '../../ui/textarea';
import api from '../../../lib/api-client';

interface BulkImportUsersModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess: (message: string) => void;
  onError: (message: string) => void;
}

export function BulkImportUsersModal({ isOpen, onClose, onSuccess, onError }: BulkImportUsersModalProps) {
  const queryClient = useQueryClient();
  const [jsonInput, setJsonInput] = useState('');
  const [error, setError] = useState<string | null>(null);

  const importMutation = useMutation({
    mutationFn: async (users: any[]) => {
      const response = await api.post('/users/bulk-import', { users });
      return response.data;
    },
    onSuccess: (data) => {
      queryClient.invalidateQueries({ queryKey: ['users'] });
      if (data.results.failed > 0) {
        onError(`Imported ${data.results.success} users. Failed: ${data.results.failed}`);
        // Could show detailed errors here
      } else {
        onSuccess(`Successfully imported ${data.results.success} users`);
        onClose();
        setJsonInput('');
      }
    },
    onError: (error: any) => {
      const msg = error?.response?.data?.debug_message 
        ? `${error.response.data.error}: ${error.response.data.debug_message}`
        : (error?.response?.data?.error ?? 'Failed to import users');
      onError(msg);
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    try {
      const parsed = JSON.parse(jsonInput);
      if (!Array.isArray(parsed)) {
        setError('Input must be a JSON array of user objects');
        return;
      }
      importMutation.mutate(parsed);
    } catch (e) {
      setError('Invalid JSON format');
    }
  };

  const exampleJson = `[
  {
    "name": "Alice Smith",
    "email": "alice@example.com",
    "password": "password123",
    "role": "FIELD_STAFF"
  },
  {
    "name": "Bob Jones",
    "email": "bob@example.com",
    "password": "password123",
    "role": "SUPER_ADMIN"
  }
]`;

  return (
    <Modal isOpen={isOpen} onClose={onClose} title="Bulk Import Users">
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700">
            Paste JSON Array
          </label>
          <p className="text-xs text-gray-500 mb-2">
            Format: Array of objects with name, email, password, role.
          </p>
          <Textarea
            rows={10}
            value={jsonInput}
            onChange={(e) => setJsonInput(e.target.value)}
            placeholder={exampleJson}
            className="font-mono text-xs"
          />
          {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
        </div>
        <div className="flex justify-end gap-2 pt-4">
          <Button type="button" variant="outline" onClick={onClose}>
            Cancel
          </Button>
          <Button type="submit" isLoading={importMutation.isPending}>
            Import Users
          </Button>
        </div>
      </form>
    </Modal>
  );
}