"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import axios from "axios";

interface Log {
  id: number;
  action: string;
  performed_by: string | null;
  created_on: string;
}

export default function LogsStep() {
  const params = useParams();
  const applicationId = params?.id;
  const [logs, setLogs] = useState<Log[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (applicationId) {
      fetchLogs();
    }
  }, [applicationId]);

  const fetchLogs = async () => {
    try {
      const response = await axios.get(
        `${process.env.NEXT_PUBLIC_EXPRESS_BACKEND_URL}/admin/logs/${applicationId}`,
        { withCredentials: true }
      );
      if (response.data.success) {
        setLogs(response.data.data);
      }
    } catch (error) {
      console.error("Error fetching logs:", error);
    } finally {
      setLoading(false);
    }
  };

  const formatDateTime = (dateString: string) => {
    return new Date(dateString).toLocaleString("en-US", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
      hour12: true,
    });
  };

  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center justify-between border-b pb-4">
        <h3 className="text-xl font-bold text-gray-800">Logs</h3>
      </div>

      <div className="overflow-x-auto bg-white">
        {loading ? (
          <div className="text-center py-8">Loading...</div>
        ) : logs.length === 0 ? (
          <div className="text-center py-8 text-gray-500">No logs available</div>
        ) : (
          <table className="w-full text-sm border-collapse">
            <thead className="bg-gray-100 text-gray-700">
              <tr>
                <th className="px-4 py-3 border border-gray-300 text-center w-16">
                  Sr No
                </th>
                <th className="px-4 py-3 border border-gray-300 text-left">
                  Action
                </th>
                <th className="px-4 py-3 border border-gray-300 text-left">
                  Performed By
                </th>
                <th className="px-4 py-3 border border-gray-300 text-center">
                  Date & Time
                </th>
              </tr>
            </thead>
            <tbody>
              {logs.map((log, index) => (
                <tr key={log.id} className="hover:bg-gray-50 transition">
                  <td className="px-4 py-3 border border-gray-300 text-center">
                    {index + 1}
                  </td>
                  <td className="px-4 py-3 border border-gray-300">
                    {log.action}
                  </td>
                  <td className="px-4 py-3 border border-gray-300">
                    {log.performed_by || "System"}
                  </td>
                  <td className="px-4 py-3 border border-gray-300 text-center">
                    {formatDateTime(log.created_on)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}