"use client";

import { useAudit } from "@/hooks/useAudit";
import ActionBadge from "./ActionBadge";
import { Trash2 } from "lucide-react";

import Button from "@/components/ui/Button";

export default function AuditTable() {

  const {
    logs,
    loading,
    removeLog,
    removeAllLogs,
  } = useAudit();

  if (loading) {
    return (
      <div className="rounded-2xl bg-white p-10 shadow">
        Loading audit logs...
      </div>
    );
  }

  return (

    <div className="rounded-2xl bg-white shadow">

      <div className="flex justify-between items-center p-6">

        <h2 className="text-2xl font-bold">
          Audit Logs
        </h2>

        <button
          onClick={removeAllLogs}
          className="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 transition"
        >
          Clear All Logs
        </button>

      </div>

      <div className="overflow-x-auto">

        <table className="min-w-full">

          <thead>

            <tr className="bg-gray-50">

              <th className="px-6 py-4 text-center">
                Time
              </th>

              <th className="px-6 py-4 text-center">
                Action
              </th>

              <th className="px-10 py-4 text-center">
                Performed By
              </th>

              <th className="px-10 py-4 text-center">
                Target Admin
              </th>

              <th className="px-6 py-4 text-center">
                Details
              </th>

              <th className="px-6 py-4 text-center">
                Email
              </th>

              <th className="px-6 py-4 text-center">
                Delete
              </th>

            </tr>

          </thead>

          <tbody>

            {logs.length === 0 ? (

              <tr>

                <td
                  colSpan={5}
                  className="py-10 text-center text-gray-500"
                >
                  No audit logs found.
                </td>

              </tr>

            ) : (

              logs.map((log) => (

                <tr
                  key={log._id}
                  className="hover:bg-gray-50"
                >

                  <td className="text-center border-t px-6 py-5">

                    {new Date(
                      log.createdAt
                    ).toLocaleString()}

                  </td>

                  <td className="text-center border-t px-6 py-5">

                    <ActionBadge
                      action={log.action}
                    />

                  </td>

                  <td className="text-center border-t px-6 py-5">

                    {log.performedBy?.name || "-"}

                  </td>

                  <td className="text-center border-t px-6 py-5">

                    {log.targetAdmin?.name || "-"}

                  </td>

                  <td className="text-center border-t px-6 py-5 text-gray-600">

                    {log.details || "-"}

                  </td>

                  <td className="text-center border-t px-6 py-5">

                    {log.targetAdmin?.email || "-"}

                  </td>

                  <td className="px-6 py-5 text-center border-t">

                    <button

                    onClick={() => {

                    const ok = window.confirm(
                    "Delete this log?"
                    );

                    if(ok){

                    removeLog(log._id);

                    }

                    }}

                    className="text-red-500 hover:text-red-700"

                    >

                    <Trash2 size={18}/>

                    </button>

                    </td>

                </tr>

              ))

            )}

          </tbody>

        </table>

      </div>

    </div>

  );

}