'use client';

import { useState, useEffect } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { Modal } from '../../ui/modal';
import { Button } from '../../ui/button';
import { Input } from '../../ui/input';
import { Select } from '../../ui/select';
import api from '../../../lib/api-client';
import { X } from 'lucide-react';

interface UserModalProps {
  isOpen: boolean;
  onClose: () => void;
  user?: any; // If provided, we constitute an Edit
  onSuccess: (message: string) => void;
  onError: (message: string) => void;
}

const GHANA_REGIONS = [
  'Ashanti', 'Greater Accra', 'Central', 'Western', 
  'Western North', 'Eastern', 'Volta', 'Oti', 
  'Northern', 'Savannah', 'North East', 'Upper East', 
  'Upper West', 'Bono', 'Bono East', 'Ahafo'
];

export function UserModal({ isOpen, onClose, user, onSuccess, onError }: UserModalProps) {
  const queryClient = useQueryClient();
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    role: 'FIELD_STAFF',
    monitored_regions: [] as string[]
  });

  useEffect(() => {
    if (user) {
      setFormData({
        name: user.name || '',
        email: user.email || '',
        password: '', // Leave empty to keep unchanged
        role: user.role || 'FIELD_STAFF',
        monitored_regions: user.monitored_regions || []
      });
    } else {
      setFormData({
        name: '',
        email: '',
        password: '',
        role: 'FIELD_STAFF',
        monitored_regions: []
      });
    }
  }, [user, isOpen]);

  const mutation = useMutation({
    mutationFn: async (data: typeof formData) => {
      const payload: any = { ...data };
      if (user) {
        // Edit mode
        if (!payload.password) delete payload.password; // Don't send empty password
        await api.put(`/users/${user.id}`, payload);
      } else {
        // Create mode
        await api.post('/users', payload);
      }
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] });
      onSuccess(user ? 'User updated successfully' : 'User created successfully');
      onClose();
    },
    onError: (error: any) => {
      const msg = error?.response?.data?.debug_message 
        ? `${error.response.data.error}: ${error.response.data.debug_message}`
        : (error?.response?.data?.error ?? (user ? 'Failed to update user' : 'Failed to create user'));
      onError(msg);
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    mutation.mutate(formData);
  };

  const toggleRegion = (region: string) => {
    setFormData(prev => {
      const current = prev.monitored_regions || [];
      if (current.includes(region)) {
        return { ...prev, monitored_regions: current.filter(r => r !== region) };
      } else {
        return { ...prev, monitored_regions: [...current, region] };
      }
    });
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} title={user ? "Edit User" : "Invite User"}>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700">Name</label>
          <Input
            required
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            placeholder="John Doe"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700">Email</label>
          <Input
            required
            type="email"
            value={formData.email}
            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
            placeholder="john@example.com"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700">
            {user ? 'Password (leave blank to keep current)' : 'Password'}
          </label>
          <Input
            required={!user}
            type="password"
            value={formData.password}
            onChange={(e) => setFormData({ ...formData, password: e.target.value })}
            placeholder={user ? "••••••••" : "••••••••"}
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700">Role</label>
          <Select
            value={formData.role}
            onChange={(e) => setFormData({ ...formData, role: e.target.value })}
          >
            <option value="FIELD_STAFF">Field Staff</option>
            <option value="SUPER_ADMIN">Super Admin</option>
          </Select>
        </div>
        
        {formData.role === 'FIELD_STAFF' && (
             <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Monitored Regions</label>
                <div className="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto p-2 border rounded-lg bg-slate-50">
                    {GHANA_REGIONS.map(region => (
                        <label key={region} className="flex items-center space-x-2 cursor-pointer bg-white p-2 rounded border border-slate-100 hover:border-slate-300">
                            <input
                                type="checkbox"
                                checked={(formData.monitored_regions || []).includes(region)}
                                onChange={() => toggleRegion(region)}
                                className="rounded border-gray-300 text-brand focus:ring-brand"
                            />
                            <span className="text-sm text-slate-700">{region}</span>
                        </label>
                    ))}
                </div>
                <p className="text-xs text-slate-500 mt-1">Select the regions this field staff is responsible for.</p>
             </div>
        )}

        <div className="flex justify-end gap-2 pt-4">
          <Button type="button" variant="outline" onClick={onClose}>
            Cancel
          </Button>
          <Button type="submit" isLoading={mutation.isPending}>
            {user ? 'Update User' : 'Create User'}
          </Button>
        </div>
      </form>
    </Modal>
  );
}