import React, { useState } from "react";
import { 
  FiX, 
  FiCheckCircle, 
  FiXCircle, 
  FiClock, 
  FiUser, 
  FiCalendar,
  FiFileText,
  FiAlertTriangle,
  FiTruck,
  FiUserCheck,
  FiUserX,
  FiPackage,
  FiMapPin,
  FiEye,
  FiRotateCcw
} from "react-icons/fi";

interface AuditModalProps {
  closeModal: () => void;
}

const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
  const [activeTab, setActiveTab] = useState<'status' | 'audit'>('status');

  const statusHistory = [
    {
      id: 1,
      title: "The Accrual status has been successfully changed to Approved.",
      author: "Alexander Turner",
      role: "Analyst Perspective on Transaction",
      time: "34m ago",
      fromStatus: "Ready to Review",
      toStatus: "Approved",
      icon: <FiCheckCircle className="w-4 h-4" />,
      statusColor: "text-green-600"
    },
    {
      id: 2,
      title: "The Accrual has been updated to reflect a status of Reject.",
      author: "Alexander Turner",
      time: "3h ago",
      fromStatus: "Ready to Review",
      toStatus: "Rejected",
      icon: <FiXCircle className="w-4 h-4" />,
      statusColor: "text-red-600"
    },
    {
      id: 3,
      title: "The Accrual has been revised for accuracy.",
      author: "Alex Turner",
      role: "Manager View Transaction State",
      time: "7d ago",
      fromStatus: "Rejected",
      toStatus: "Reviewed",
      icon: <FiRotateCcw className="w-4 h-4" />,
      statusColor: "text-yellow-600"
    },
    {
      id: 4,
      title: "The Accrual state has been updated from 'ready' to 'under review'.",
      author: "Alexander Turner",
      role: "Analyst Perspective on Transaction",
      time: "34m ago",
      fromStatus: "Ready to Review",
      toStatus: "Reviewed",
      icon: <FiEye className="w-4 h-4" />,
      statusColor: "text-blue-600"
    },
    {
      id: 5,
      title: "The Accrual has been updated from rejected to reviewed.",
      author: "Alex Turner",
      role: "Analyst View Transaction",
      time: "34m ago",
      fromStatus: "Rejected",
      toStatus: "Reviewed",
      icon: <FiRotateCcw className="w-4 h-4" />,
      statusColor: "text-blue-600"
    }
  ];

  const auditTrail = [
    {
      id: 1,
      title: "Batch 11317 Pickup Request Created",
      author: "Sandra Darlington",
      location: "Lagos General Hospital Gbagada",
      time: "11 Aug, 2023 09:23 AM",
      icon: <FiPackage className="w-4 h-4" />,
      type: "created"
    },
    {
      id: 2,
      title: "Batch 11317 Pickup Request",
      author: "Oladejo Israel",
      location: "Institute of Human Virology H3Africa BioRepository",
      time: "12 Aug, 2023 11:19 AM",
      status: "Approved",
      icon: <FiCheckCircle className="w-4 h-4" />,
      type: "approved"
    },
    {
      id: 3,
      title: "Batch 11317 was Initiated",
      author: "Sandra Darlington",
      location: "Lagos General Hospital Gbagada",
      time: "12 Aug, 2023 11:19 AM",
      icon: <FiFileText className="w-4 h-4" />,
      type: "initiated"
    },
    {
      id: 4,
      title: "Sandra Darlington Assigned batch 11317",
      assignee: "Yusuf Ahmed",
      time: "12 Aug, 2023 11:20 AM",
      icon: <FiUserCheck className="w-4 h-4" />,
      type: "assigned"
    },
    {
      id: 5,
      title: "Batch 11317 was rejected by Yusuf Ahmed",
      reason: "due to faulty vehicle",
      time: "12 Aug, 2023 11:20 AM",
      icon: <FiXCircle className="w-4 h-4" />,
      type: "rejected"
    },
    {
      id: 6,
      title: "Sandra Darlington Assigned batch 11317",
      assignee: "Kolado Jolade",
      time: "12 Aug, 2023 11:20 AM",
      icon: <FiUserCheck className="w-4 h-4" />,
      type: "assigned"
    },
    {
      id: 7,
      title: "Logger Synced",
      deviceId: "ID: LGR-0421",
      status: "95% remaining",
      time: "12 Aug, 2023 11:25 AM",
      icon: <FiCheckCircle className="w-4 h-4" />,
      type: "synced"
    },
    {
      id: 8,
      title: "Logger Disconnected",
      deviceId: "ID: LGR-0421",
      time: "12 Aug, 2023 11:25 AM",
      icon: <FiAlertTriangle className="w-4 h-4" />,
      type: "disconnected"
    }
  ];

  const getStatusBadge = (status: string) => {
    const statusClasses = {
      'Approved': 'bg-green-100 text-green-800',
      'Rejected': 'bg-red-100 text-red-800',
      'Reviewed': 'bg-yellow-100 text-yellow-800',
      'Ready to Review': 'bg-blue-100 text-blue-800'
    };
    return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800';
  };

  const getAuditTypeColor = (type: string) => {
    const colors = {
      'created': 'text-blue-600',
      'approved': 'text-green-600',
      'initiated': 'text-purple-600',
      'assigned': 'text-indigo-600',
      'rejected': 'text-red-600',
      'synced': 'text-green-600',
      'disconnected': 'text-orange-600'
    };
    return colors[type as keyof typeof colors] || 'text-gray-600';
  };

  return (
    <div className="fixed inset-0 flex items-center justify-center backdrop-blur-sm bg-white/10 z-50">
      <div className="bg-white rounded-md shadow-md w-full max-w-[75vw] max-h-[95vh] min-h-[85vh]  flex flex-col">
        {/* Header */}
        <div className="flex items-center justify-between p-3 border-b border-gray-200 bg-[var(--primary)] rounded-t-md">
          <div className="flex items-center">
            <h2 className="text-xl font-semibold text-white">
              Audit Status
            </h2>
          </div>
          <button
            onClick={closeModal}
            className="text-white cursor-pointer transition-colors"
          >
            <FiX className="w-5 h-5" />
          </button>
        </div>

        {/* Content */}
        <div className="flex-1 overflow-y-auto p-4">
          
            <div className="space-y-1.5">
              <div className="text-sm text-gray-500 font-medium mb-2">TODAY</div>
              
              {statusHistory.slice(0, 2).map((item) => (
                <div key={item.id} className="flex items-start space-x-4 pb-2 border-b border-gray-100 last:border-b-0">
                  <div className={`${item.statusColor} mt-1`}>
                    {item.icon}
                  </div>
                  <div className="flex-1">
                    <p className="text-gray-800 font-medium text-sm mb-0.5">{item.title}</p>
                    <div className="flex items-center space-x-2 text-xs text-gray-600 mb-1">
                      <span>By {item.author}</span>
                      {item.role && (
                        <>
                          <span>•</span>
                          <span className="text-blue-600 text-xs">({item.role})</span>
                        </>
                      )}
                    </div>
                    <div className="flex items-center space-x-3">
                      <span className="text-xs text-gray-500">{item.time}</span>
                      <div className="flex items-center space-x-2">
                        <span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.fromStatus)}`}>
                          {item.fromStatus}
                        </span>
                        <span className="text-gray-400">→</span>
                        <span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.toStatus)}`}>
                          {item.toStatus}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              ))}

              
            </div>
          
        </div>

        {/* Footer */}
        <div className="flex justify-end p-2 border-t border-gray-200">
          <button
            onClick={closeModal}
            className="cursor-pointer px-4 py-1.5 bg-[var(--sendForSignBgCol)] text-white rounded-lg hover:bg-red-700 transition-colors font-medium"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
};

export default AuditModal;