import React, { useState, useEffect } from 'react';

const VerificationQueue = ({ showToast, autoSelectPending }) => {
  const [queue, setQueue] = useState([]);
  const [selectedDoc, setSelectedDoc] = useState(null);

  const fetchPendingVerifications = async () => {
    try {
      const res = await fetch(`/api/users`);
      if (res.ok) {
        const users = await res.json();
        const pendingDrivers = users.filter(u => u.role === 'Pool Host' && u.has_vehicle_pass === 0);
        setQueue(pendingDrivers.map(u => ({
          id: `V-${u.id}`,
          db_id: u.id,
          name: u.name,
          type: 'Vehicle Pass',
          status: 'Pending',
          time: new Date(u.created_at).toLocaleDateString(),
          vehicle_no: u.vehicle_no,
          vehicle_make: u.vehicle_make,
          vehicle_model: u.vehicle_model,
          emp_id: u.emp_id,
          confidence: 'Manual'
        })));
      }
    } catch (err) {
      console.error(err);
      if (showToast) showToast('Failed to load verification queue.', 'danger');
    }
  };

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

  useEffect(() => {
    if (autoSelectPending && queue.length > 0) {
      const firstPending = queue.find(item => item.status === 'Pending');
      if (firstPending) {
        setSelectedDoc(firstPending);
      }
    }
  }, [autoSelectPending, queue.length]);

  const handleAction = async (db_id, action) => {
    if (action === 'approve') {
      try {
        const res = await fetch(`/api/users/${db_id}/verify`, { method: 'POST' });
        if (res.ok) {
          if (showToast) showToast(`User successfully verified.`, 'success');
          fetchPendingVerifications();
          setSelectedDoc(null);
        } else {
          if (showToast) showToast(`Failed to verify user.`, 'danger');
        }
      } catch (err) {
        if (showToast) showToast(`Network error validating user.`, 'danger');
      }
    } else {
      setQueue(queue.filter(q => q.db_id !== db_id));
      setSelectedDoc(null);
      if (showToast) showToast(`Verification rejected.`, 'danger');
    }
  };

  const pendingCount = queue.filter(q => q.status === 'Pending').length;

  return (
    <div className="flex flex-col lg:flex-row gap-6 animate-slide-in">
      
      {/* Queue List */}
      <div className="glass-panel flex-1 p-6 flex flex-col">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-xl font-bold text-white">Verification Backlog</h2>
          <span className="bg-warning-orange/20 text-warning-orange px-3 py-1 rounded-full text-xs font-semibold border border-warning-orange/30">{pendingCount} Pending</span>
        </div>

        {queue.length === 0 ? (
          <div className="text-on-surface-variant italic text-center py-10">
            No pending verifications at this time.
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-left">
              <thead>
                <tr className="border-b border-white/10 text-on-surface-variant text-sm">
                  <th className="pb-3 font-semibold">Req ID</th>
                  <th className="pb-3 font-semibold">Employee Name</th>
                  <th className="pb-3 font-semibold">Doc Type</th>
                  <th className="pb-3 font-semibold">Vehicle No</th>
                  <th className="pb-3 font-semibold">Status</th>
                  <th className="pb-3 font-semibold">Action</th>
                </tr>
              </thead>
              <tbody>
                {queue.map(item => (
                  <tr key={item.id} className={`border-b border-white/5 hover:bg-white/5 cursor-pointer ${selectedDoc?.id === item.id ? 'bg-white/5' : ''}`} onClick={() => setSelectedDoc(item)}>
                    <td className="py-3 font-bold text-white"><strong>{item.id}</strong></td>
                    <td className="py-3 text-white">{item.name}</td>
                    <td className="py-3 text-on-surface-variant">{item.type}</td>
                    <td className="py-3 text-on-surface-variant uppercase">{item.vehicle_no || 'N/A'}</td>
                    <td className="py-3">
                      <span className={`px-2 py-0.5 rounded text-xs ${item.status === 'Approved' ? 'bg-primary/20 text-primary border border-primary/30' : item.status === 'Rejected' ? 'bg-error-red/20 text-error-red border border-error-red/30' : 'bg-warning-orange/20 text-warning-orange border border-warning-orange/30'}`}>
                        {item.status === 'Pending' ? `Waiting` : item.status}
                      </span>
                    </td>
                    <td className="py-3">
                      <button 
                        className="border border-white/10 hover:bg-white/10 text-white px-3 py-1 rounded text-xs transition-colors"
                        onClick={(e) => {
                          e.stopPropagation();
                          setSelectedDoc(item);
                        }}
                      >
                        Review
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* Review Panel */}
      {selectedDoc ? (
        <div className="glass-panel w-full lg:w-[400px] p-6 flex flex-col gap-5 animate-slide-in shrink-0">
          <h3 className="text-lg font-bold text-white border-b border-white/10 pb-3">Review Document</h3>
          
          <div className="bg-surface-container/50 border border-white/5 rounded-xl p-5 flex flex-col gap-4">
            <div>
              <div className="text-xs font-semibold uppercase tracking-wider text-on-surface-variant mb-1">Applicant</div>
              <div className="text-body-lg text-white font-medium">{selectedDoc.name}</div>
            </div>
            
            <div>
              <div className="text-xs font-semibold uppercase tracking-wider text-on-surface-variant mb-1">Employee ID</div>
              <div className="text-body-md text-white">{selectedDoc.emp_id}</div>
            </div>

            <div>
              <div className="text-xs font-semibold uppercase tracking-wider text-on-surface-variant mb-1">Vehicle Plate</div>
              <div className="text-body-md text-white uppercase">{selectedDoc.vehicle_no || 'Not Provided'}</div>
            </div>
          </div>

          <div className="flex-1 bg-surface-base rounded-xl border border-dashed border-white/10 flex flex-col items-center justify-center min-h-[200px] p-5 gap-2">
            <span className="text-4xl">🚗</span>
            <span className="text-white font-bold text-lg">{selectedDoc.vehicle_make} {selectedDoc.vehicle_model}</span>
            <span className="text-on-surface-variant text-xs">[ Vehicle Verification ]</span>
          </div>

          {selectedDoc.status === 'Pending' ? (
             <div className="flex gap-3 mt-4">
                <button className="flex-1 border border-error-red/30 text-error-red hover:bg-error-red/10 font-bold py-2.5 rounded-lg transition-all" onClick={() => handleAction(selectedDoc.db_id, 'reject')}>Reject</button>
                <button className="flex-1 bg-primary text-on-primary-fixed font-bold py-2.5 rounded-lg hover:shadow-[0_0_15px_rgba(103,218,182,0.4)] hover:scale-[1.02] transition-all" onClick={() => handleAction(selectedDoc.db_id, 'approve')}>Approve</button>
             </div>
          ) : (
            <div className={`text-center py-3 rounded-lg border ${selectedDoc.status === 'Approved' ? 'bg-primary/10 text-primary border-primary/30' : 'bg-error-red/10 text-error-red border-error-red/30'}`}>
              Document has been {selectedDoc.status.toLowerCase()}.
            </div>
          )}
        </div>
      ) : (
        <div className="glass-panel w-full lg:w-[400px] p-6 flex items-center justify-center text-center">
          <div className="text-on-surface-variant">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" className="mx-auto mb-4 opacity-50">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
              <polyline points="14 2 14 8 20 8"/>
              <line x1="16" y1="13" x2="8" y2="13"/>
              <line x1="16" y1="17" x2="8" y2="17"/>
              <polyline points="10 9 9 9 8 9"/>
            </svg>
            Select a document from the backlog to review.
          </div>
        </div>
      )}

    </div>
  );
};

export default VerificationQueue;