/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React from 'react';
import { Edit3, Trash2, Users, ShieldAlert } from 'lucide-react';
import { HREmployee, HRSigner } from '../types';

interface EmployeeTableProps {
  employees: HREmployee[];
  onEdit: (emp: HREmployee) => void;
  onDelete: (id: string, name: string) => void;
}

export function EmployeeTable({ employees, onEdit, onDelete }: EmployeeTableProps) {
  if (employees.length === 0) {
    return (
      <div className="bg-slate-50 rounded-xl p-12 text-center border border-dashed border-slate-200">
        <Users className="w-10 h-10 text-slate-300 mx-auto mb-3" />
        <p className="text-xs text-slate-500 font-semibold">Tidak ada data karyawan</p>
        <p className="text-[11px] text-slate-400 mt-1 max-w-xs mx-auto">
          Ketik nama pencarian lain atau klik tombol "Tambah Karyawan Baru" di atas untuk memasukkan data.
        </p>
      </div>
    );
  }

  return (
    <div className="overflow-x-auto rounded-xl border border-slate-100 shadow-inner">
      <table className="w-full text-left text-xs bg-white">
        <thead className="bg-slate-50 text-slate-500 border-b border-slate-100">
          <tr>
            <th className="px-4 py-3 font-semibold">Nama Lengkap</th>
            <th className="px-4 py-3 font-semibold">NIK</th>
            <th className="px-4 py-3 font-semibold">Jabatan</th>
            <th className="px-4 py-3 font-semibold">Departemen</th>
            <th className="px-4 py-3 font-semibold">No. KTP</th>
            <th className="px-4 py-3 font-semibold text-right">Aksi</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-slate-100">
          {employees.map((emp) => (
            <tr key={emp.id} className="hover:bg-slate-55 transition-colors">
              <td className="px-4 py-3.5 font-bold text-slate-900">{emp.Nama_Karyawan}</td>
              <td className="px-4 py-3.5 font-semibold text-slate-500 font-mono text-[10px]">{emp.NIK}</td>
              <td className="px-4 py-3.5 text-slate-600 font-medium">{emp.Jabatan || '-'}</td>
              <td className="px-4 py-3.5 text-slate-600">{emp.Departemen || '-'}</td>
              <td className="px-4 py-3.5 text-slate-400 font-mono text-[10px]">{emp.No_Identitas_KTP || '-'}</td>
              <td className="px-4 py-3.5 text-right space-x-1.5 whitespace-nowrap">
                <button
                  type="button"
                  onClick={() => onEdit(emp)}
                  className="p-1.5 hover:bg-slate-100 text-slate-500 hover:text-blue-600 rounded transition-colors cursor-pointer"
                  title="Detil / Edit Karyawan"
                >
                  <Edit3 className="w-3.5 h-3.5" />
                </button>
                <button
                  type="button"
                  onClick={() => onDelete(emp.id, emp.Nama_Karyawan || 'Karyawan')}
                  className="p-1.5 hover:bg-red-50 text-slate-400 hover:text-red-600 rounded transition-colors cursor-pointer"
                  title="Hapus Karyawan"
                >
                  <Trash2 className="w-3.5 h-3.5" />
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

interface SignerTableProps {
  signers: HRSigner[];
  onEdit: (sig: HRSigner) => void;
  onDelete: (id: string, name: string) => void;
}

export function SignerTable({ signers, onEdit, onDelete }: SignerTableProps) {
  if (signers.length === 0) {
    return (
      <div className="bg-slate-50 rounded-xl p-12 text-center border border-dashed border-slate-200">
        <ShieldAlert className="w-10 h-10 text-slate-300 mx-auto mb-3" />
        <p className="text-xs text-slate-500 font-semibold">Tidak ada data penandatangan</p>
        <p className="text-[11px] text-slate-400 mt-1 max-w-xs mx-auto">
          Ketik kata kunci lain atau klik tombol "Tambah Penandatangan" untuk menginput data penandatangan dokumen.
        </p>
      </div>
    );
  }

  return (
    <div className="overflow-x-auto rounded-xl border border-slate-100 shadow-inner">
      <table className="w-full text-left text-xs bg-white">
        <thead className="bg-slate-50 text-slate-500 border-b border-slate-100">
          <tr>
            <th className="px-4 py-3 font-semibold">Nama Lengkap Atasan/Pimpinan</th>
            <th className="px-4 py-3 font-semibold">Jabatan Struktural</th>
            <th className="px-4 py-3 font-semibold">Kota Domisili Surat</th>
            <th className="px-4 py-3 font-semibold text-right">Aksi</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-slate-100">
          {signers.map((sig) => (
            <tr key={sig.id} className="hover:bg-slate-55 transition-colors">
              <td className="px-4 py-3.5 font-bold text-slate-900">{sig.Nama_Pimpinan}</td>
              <td className="px-4 py-3.5 font-semibold text-slate-600">{sig.Jabatan_Pimpinan}</td>
              <td className="px-4 py-3.5 text-slate-500">{sig.Kota_Tanda_Tangan || '-'}</td>
              <td className="px-4 py-3.5 text-right space-x-1.5 whitespace-nowrap">
                <button
                  type="button"
                  onClick={() => onEdit(sig)}
                  className="p-1.5 hover:bg-slate-100 text-slate-500 hover:text-blue-600 rounded transition-colors cursor-pointer"
                  title="Edit Penandatangan"
                >
                  <Edit3 className="w-3.5 h-3.5" />
                </button>
                <button
                  type="button"
                  onClick={() => onDelete(sig.id, sig.Nama_Pimpinan || 'Pejabat')}
                  className="p-1.5 hover:bg-red-50 text-slate-400 hover:text-red-600 rounded transition-colors cursor-pointer"
                  title="Hapus"
                >
                  <Trash2 className="w-3.5 h-3.5" />
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}