import React, { useState, useEffect } from "react";
import axios from "../../app/api";
import Table from "../../components/common/Table";
import Pagination from "../../components/common/Pagination";
import { FiEdit, FiTrash2, FiEye } from "react-icons/fi";
import { useNavigate } from "react-router-dom";

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const navigate = useNavigate();

  // Pagination
  const [currentPage, setCurrentPage] = useState(1);
  const perPage = 10;

  useEffect(() => {
    axios
      .get("/admin/users")
      .then((res) => {
        setUsers(res.data.data.users);
        setLoading(false);
      })
      .catch((err) => {
        console.error(err);
        setLoading(false);
      });
  }, []);

  const totalPages = Math.ceil(users.length / perPage);
  const paginatedData = users.slice(
    (currentPage - 1) * perPage,
    currentPage * perPage
  );

  // Table columns
  const columns = [
    {
      key: "sr",
      label: "Sr. No.",
      render: (_, __, index) => index + 1, // index passed from Table
    },
    // { key: "name", label: "Name" },
    {
      key: "name",
      label: "Name",
      render: (_, row) => `${row.firstName} ${row.lastName}`,
    },

    { key: "email", label: "Email" },
    { key: "username", label: "Username" },
    { key: "role", label: "Role" },
    {
      key: "verified",
      label: "Verified",
      render: (value) =>
        value ? (
          <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-700">
            Yes
          </span>
        ) : (
          <span className="px-2 py-1 text-xs rounded-full bg-red-100 text-red-700">
            No
          </span>
        ),
    },
    {
      key: "active",
      label: "Active",
      render: (value) =>
        value ? (
          <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-700">
            Active
          </span>
        ) : (
          <span className="px-2 py-1 text-xs rounded-full bg-red-100 text-red-700">
            Inactive
          </span>
        ),
    },
    // {
    //   key: "lastLogin",
    //   label: "Last Login",
    //   render: (_, row) =>
    //     row.lastLoginAt ? new Date(row.lastLoginAt).toLocaleString() : "--",
    // },
  ];

  // Row actions
  const rowActions = (row) => (
    <div className="flex items-center gap-2 justify-center">
      <button
        onClick={() => navigate(`/users/${row.id}`)}
        className="p-2 bg-blue-100 text-blue-600 rounded hover:bg-blue-200"
      >
        <FiEye size={16} />
      </button>
      <button className="p-2 bg-green-100 text-green-600 rounded hover:bg-green-200">
        <FiEdit size={16} />
      </button>
      <button className="p-2 bg-red-100 text-red-600 rounded hover:bg-red-200">
        <FiTrash2 size={16} />
      </button>
    </div>
  );

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold text-gray-600">Users</h2>
        <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
          + Add User
        </button>
      </div>

      {/* Table */}
      <Table
        columns={columns}
        data={loading ? [] : paginatedData}
        actions={rowActions}
        center // optional prop if your Table supports center alignment
      />

      {/* Pagination */}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={(pg) => setCurrentPage(pg)}
      />
    </div>
  );
};

export default UserList;
