import React, { useEffect, useState } from 'react';
import { useAuth } from '../../contexts/AuthContext';
import Stats from '../../components/Admin/Stats';
const baseUrl = import.meta.env.VITE_API_URL;

function Farmers() {
  const { token } = useAuth();
  const [farmers, setFarmers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [actionLoading, setActionLoading] = useState({});

  useEffect(() => {
    fetchPendingFarmers();
  }, []);

  const fetchPendingFarmers = async () => {
    try {
      setLoading(true);
      const response = await fetch(`${baseUrl}/admin/pending-farmers`, {
        headers: {
          Authorization: `Bearer ${token}`,
          'Content-Type': 'application/json',
        },
      });

      const data = await response.json();

      if (data.success) {
        setFarmers(data.farmers);
        setError('');
      } else {
        setError('Failed to fetch pending farmers.');
      }
    } catch (err) {
      setError('Error fetching pending farmers.');
      console.error('Error:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleFarmerAction = async (farmerId, action) => {
    try {
      setActionLoading(prev => ({ ...prev, [farmerId]: action }));
      
      const response = await fetch(`${baseUrl}/admin/verify-farmer/${farmerId}`, {
        method: 'PUT',
        headers: {
          Authorization: `Bearer ${token}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ action }),
      });

      const data = await response.json();

      if (data.success || response.ok) {
        // Remove the farmer from the list after successful action
        setFarmers(prev => prev.filter(farmer => farmer._id !== farmerId));
        
        // Show success message (you can replace this with a toast notification)
        alert(`Farmer ${action === 'approve' ? 'approved' : 'rejected'} successfully!`);
      } else {
        setError(`Failed to ${action} farmer.`);
      }
    } catch (err) {
      setError(`Error ${action}ing farmer.`);
      console.error('Error:', err);
    } finally {
      setActionLoading(prev => ({ ...prev, [farmerId]: null }));
    }
  };

  const formatDate = (dateString) => {
    return new Date(dateString).toLocaleDateString('en-IN', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    });
  };

  if (loading) {
    return (
      <div className="w-full p-4">
        <Stats />
        <div className="mt-6 bg-white rounded-lg shadow">
          <div className="p-6 text-center">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
            <p className="mt-2 text-gray-600">Loading pending farmers...</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="w-full p-4">
      <Stats />
      
      <div className="mt-6">
        <div className="bg-white rounded-lg shadow overflow-hidden">
          <div className="px-6 py-4 border-b border-gray-200">
            <div className="flex justify-between items-center">
              <h2 className="text-xl font-semibold text-gray-800">Pending Farmers</h2>
              <div className="flex items-center space-x-2">
                <span className="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-medium">
                  {farmers.length} Pending
                </span>
                <button
                  onClick={fetchPendingFarmers}
                  className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors"
                >
                  Refresh
                </button>
              </div>
            </div>
          </div>

          {error && (
            <div className="px-6 py-4 bg-red-50 border-l-4 border-red-400">
              <p className="text-red-700">{error}</p>
            </div>
          )}

          {farmers.length === 0 ? (
            <div className="px-6 py-12 text-center">
              <div className="text-gray-400 text-6xl mb-4">🌾</div>
              <h3 className="text-lg font-medium text-gray-900 mb-2">No Pending Farmers</h3>
              <p className="text-gray-500">All farmer applications have been processed.</p>
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Farmer Details
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Contact Info
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Farm Details
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Location
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Applied Date
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {farmers.map((farmer) => (
                    <tr key={farmer._id} className="hover:bg-gray-50 transition-colors">
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex items-center">
                          <div className="flex-shrink-0 h-12 w-12">
                            <div className="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center">
                              <span className="text-green-600 font-semibold text-lg">
                                {farmer.name.charAt(0).toUpperCase()}
                              </span>
                            </div>
                          </div>
                          <div className="ml-4">
                            <div className="text-sm font-medium text-gray-900">{farmer.name}</div>
                            <div className="text-sm text-gray-500">ID: {farmer._id.slice(-8)}</div>
                          </div>
                        </div>
                      </td>
                      
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-gray-900">{farmer.email}</div>
                        <div className="text-sm text-gray-500">{farmer.phone}</div>
                      </td>
                      
                      <td className="px-6 py-4">
                        <div className="text-sm font-medium text-gray-900">{farmer.farmDetails.farmName}</div>
                        <div className="text-sm text-gray-500">Size: {farmer.farmDetails.farmSize}</div>
                        {farmer.farmDetails.certifications.length > 0 && (
                          <div className="mt-1 flex flex-wrap gap-1">
                            {farmer.farmDetails.certifications.map((cert, index) => (
                              <span
                                key={index}
                                className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800"
                              >
                                {cert}
                              </span>
                            ))}
                          </div>
                        )}
                      </td>
                      
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-gray-900">{farmer.address.city}, {farmer.address.state}</div>
                        <div className="text-sm text-gray-500">{farmer.address.street}</div>
                        <div className="text-sm text-gray-500">{farmer.address.zipCode}</div>
                      </td>
                      
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {formatDate(farmer.createdAt)}
                      </td>
                      
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium space-y-2">
                        <div className="flex space-x-2">
                          <button
                            onClick={() => handleFarmerAction(farmer._id, 'approve')}
                            disabled={actionLoading[farmer._id]}
                            className="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                          >
                            {actionLoading[farmer._id] === 'approve' ? (
                              <>
                                <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-white mr-1"></div>
                                Approving...
                              </>
                            ) : (
                              '✓ Approve'
                            )}
                          </button>
                          
                          <button
                            onClick={() => handleFarmerAction(farmer._id, 'reject')}
                            disabled={actionLoading[farmer._id]}
                            className="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                          >
                            {actionLoading[farmer._id] === 'reject' ? (
                              <>
                                <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-white mr-1"></div>
                                Rejecting...
                              </>
                            ) : (
                              '✗ Reject'
                            )}
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default Farmers;