"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import DashboardLayout from "@/components/layout/DashboardLayout";
import AddEmployeeModal from "@/components/employees/AddEmployeeModal";
import { API_URL } from '@/lib/api';

interface Employee {
  id: number;
  employeeCode: string;
  fullName: string;
  department: string;
  designation: string;
  phone: string;
  email: string;
  employmentStatus: string;
}

export default function EmployeesPage() {
  const [employees, setEmployees] = useState<Employee[]>([]);
  const [showModal, setShowModal] = useState(false);

  function loadEmployees() {
    fetch(`${API_URL}/api/employees`)
      .then((res) => res.json())
      .then((data) => setEmployees(data))
      .catch((err) => console.error(err));
  }

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

  return (
    <DashboardLayout>
      {showModal && (
        <AddEmployeeModal
          onClose={() => setShowModal(false)}
          onEmployeeAdded={loadEmployees}
        />
      )}

      <div className="mb-8 flex items-center justify-between">
        <div>
          <h2 className="text-3xl font-bold">Employees</h2>
          <p className="mt-1 text-slate-500">Manage company employees</p>
        </div>

        <button
          onClick={() => setShowModal(true)}
          className="rounded-xl bg-[#EE302B] px-5 py-3 font-semibold text-white"
        >
          Add Employee
        </button>
      </div>

      <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white">
        <table className="w-full">
          <thead className="bg-slate-50">
            <tr>
              <th className="px-5 py-4 text-left">Code</th>
              <th className="px-5 py-4 text-left">Name</th>
              <th className="px-5 py-4 text-left">Department</th>
              <th className="px-5 py-4 text-left">Designation</th>
              <th className="px-5 py-4 text-left">Phone</th>
              <th className="px-5 py-4 text-left">Status</th>
              <th className="px-5 py-4 text-left">Actions</th>
            </tr>
          </thead>

          <tbody>
            {employees.map((employee) => (
              <tr key={employee.id} className="border-t border-slate-100">
                <td className="px-5 py-4">{employee.employeeCode}</td>
                <td className="px-5 py-4 font-medium">{employee.fullName}</td>
                <td className="px-5 py-4">{employee.department}</td>
                <td className="px-5 py-4">{employee.designation}</td>
                <td className="px-5 py-4">{employee.phone}</td>
                <td className="px-5 py-4">
                  <span className="rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700">
                    {employee.employmentStatus}
                  </span>
                </td>
                <td className="px-5 py-4">
                  <Link
                    href={`/employees/${employee.id}`}
                    className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50"
                  >
                    View
                  </Link>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </DashboardLayout>
  );
}