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

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

export const EMPLOYEE_FIELDS = [
  { 
    section: 'Informasi Pribadi', 
    fields: [
      { key: 'Nama_Karyawan', label: 'Nama Lengkap Karyawan *', placeholder: 'cth: Budi Santoso' },
      { key: 'NIK', label: 'Nomor Induk Karyawan (NIK) *', placeholder: 'cth: EMP20261012' },
      { key: 'Tempat_Lahir', label: 'Tempat Lahir', placeholder: 'cth: Jakarta' },
      { key: 'Tanggal_Lahir', label: 'Tanggal Lahir (DD-MM-YYYY)', placeholder: 'cth: 15-08-1995' },
      { key: 'Alamat_Karyawan', label: 'Alamat Tinggal', placeholder: 'cth: Jl. Raya Tebet No. 4' },
      { key: 'No_Identitas_KTP', label: 'Nomor KTP (16 Digit)', placeholder: 'cth: 31740xxxxx' },
      { key: 'No_Telepon_Karyawan', label: 'Nomor Telepon Seluler', placeholder: 'cth: 0812xxxxx' },
      { key: 'Email_Karyawan', label: 'Email Karyawan', placeholder: 'cth: budi@mail.com' },
    ]
  },
  { 
    section: 'Struktur Kerja & Departemen', 
    fields: [
      { key: 'Jabatan', label: 'Jabatan Karyawan', placeholder: 'cth: Senior Software Engineer' },
      { key: 'Departemen', label: 'Divisi / Departemen', placeholder: 'cth: Teknologi Informasi' },
      { key: 'Seksi_Unit_Kerja', label: 'Unit / Seksi Kerja', placeholder: 'cth: Core Engineering' },
      { key: 'Nama_Atasan', label: 'Nama Atasan Langsung', placeholder: 'cth: Agus Taryana' },
    ]
  },
  { 
    section: 'Durasi Kontrak & Masa Kerja', 
    fields: [
      { key: 'Tanggal_Mulai_Kerja', label: 'Mulai Bekerja', placeholder: 'cth: 01-02-2023' },
      { key: 'Tanggal_Selesai_Kerja', label: 'Selesai Bekerja', placeholder: 'cth: 31-01-2026' },
      { key: 'Durasi_Kontrak', label: 'Durasi Kontrak PKWT', placeholder: 'cth: 3 Tahun, 12 Bulan' },
      { key: 'Masa_Percobaan', label: 'Masa Probation (Bulan)', placeholder: 'cth: 3 Bulan (Ketik 0 jika tdk ada)' },
      { key: 'Jam_Kerja_Mingguan', label: 'Jumlah Jam Kerja / Pekan', placeholder: 'cth: 40 Jam' },
    ]
  },
  { 
    section: 'Gaji Pokok & Tunjangan Operasional', 
    fields: [
      { key: 'Gaji_Pokok', label: 'Gaji Pokok Rupiah', placeholder: 'cth: 18.500.000' },
      { key: 'Tunjangan_Makan', label: 'Tunjangan Uang Makan', placeholder: 'cth: 50.000' },
      { key: 'Tunjangan_Transport', label: 'Tunjangan Transportasi', placeholder: 'cth: 30.000' },
      { key: 'Tunjangan_Kesehatan', label: 'Tunjangan BPJS / Kesehatan', placeholder: 'cth: BPJS Ketenagakerjaan' },
      { key: 'Bonus_Kinerja', label: 'Bonus / Komisi Sasaran Kerja', placeholder: 'cth: Insentif s/d 2x Gaji' },
    ]
  }
];

export const SIGNER_FIELDS = [
  { key: 'Nama_Pimpinan', label: 'Nama Lengkap Pimpinan *', placeholder: 'cth: Agus Taryana' },
  { key: 'Jabatan_Pimpinan', label: 'Jabatan Pimpinan *', placeholder: 'cth: HR Director' },
  { key: 'Kota_Tanda_Tangan', label: 'Kota Penerbitan / Penetapan Surat', placeholder: 'cth: Jakarta' },
];

interface EmployeeModalProps {
  isOpen: boolean;
  editingEmployee: Partial<HREmployee> | null;
  onClose: () => void;
  setEditingEmployee: (val: Partial<HREmployee> | null) => void;
  onSave: (e: React.FormEvent) => void;
}

export function EmployeeModal({
  isOpen,
  editingEmployee,
  onClose,
  setEditingEmployee,
  onSave,
}: EmployeeModalProps) {
  if (!isOpen || !editingEmployee) return null;

  return (
    <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-2xl shadow-2xl border border-slate-200 max-w-3xl w-full max-h-[85vh] flex flex-col overflow-hidden animate-in zoom-in-95 duration-200">
        {/* Header */}
        <div className="p-5 border-b border-slate-100 bg-slate-50 flex items-center justify-between shrink-0">
          <div className="flex items-center space-x-2">
            <Users className="w-5 h-5 text-blue-600" />
            <h3 className="text-base font-bold text-slate-800">
              {editingEmployee.id ? 'Edit Data Detil Karyawan' : 'Tambah Database Karyawan Baru'}
            </h3>
          </div>
          <button 
            type="button"
            onClick={onClose}
            className="p-1.5 hover:bg-slate-200 rounded-full text-slate-400 hover:text-slate-600 transition-all cursor-pointer"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Form Fields body */}
        <form onSubmit={onSave} className="flex-1 overflow-y-auto p-6 space-y-6">
          {EMPLOYEE_FIELDS.map((group) => (
            <div key={group.section} className="space-y-3">
              <h4 className="text-xs font-bold text-blue-800 border-b border-blue-50 pb-1.5 uppercase tracking-wider">
                {group.section}
              </h4>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {group.fields.map((field) => (
                  <div key={field.key} className="space-y-1">
                    <label className="block text-[11px] font-bold text-slate-500">
                      {field.label}
                    </label>
                    <input
                      type="text"
                      placeholder={field.placeholder}
                      value={editingEmployee[field.key] || ''}
                      onChange={(e) => setEditingEmployee({
                        ...editingEmployee,
                        [field.key]: e.target.value
                      })}
                      className="w-full border border-slate-200 rounded-lg p-2 text-xs focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 font-semibold text-slate-700 bg-slate-50"
                    />
                  </div>
                ))}
              </div>
            </div>
          ))}

          {/* Sticky bottom submit line inside scrollable container */}
          <div className="flex space-x-3 justify-end pt-5 border-t border-slate-100 text-xs shadow-inner">
            <button 
              type="button"
              onClick={onClose}
              className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg font-bold transition-all cursor-pointer"
            >
              Batal
            </button>
            <button 
              type="submit"
              className="px-5 py-2.5 bg-blue-600 hover:bg-blue-500 active:bg-blue-700 text-white font-bold rounded-lg transition-all cursor-pointer shadow-md shadow-blue-100"
            >
              {editingEmployee.id ? '✓ Simpan Pembaruan' : '✓ Tambah ke Database'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

interface SignerModalProps {
  isOpen: boolean;
  editingSigner: Partial<HRSigner> | null;
  onClose: () => void;
  setEditingSigner: (val: Partial<HRSigner> | null) => void;
  onSave: (e: React.FormEvent) => void;
}

export function SignerModal({
  isOpen,
  editingSigner,
  onClose,
  setEditingSigner,
  onSave,
}: SignerModalProps) {
  if (!isOpen || !editingSigner) return null;

  return (
    <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-2xl shadow-2xl border border-slate-200 max-w-md w-full animate-in zoom-in-95 duration-200">
        {/* Header */}
        <div className="p-5 border-b border-slate-100 bg-slate-50 flex items-center justify-between shrink-0">
          <div className="flex items-center space-x-2">
            <ShieldAlert className="w-5 h-5 text-blue-600" />
            <h3 className="text-base font-bold text-slate-800">
              {editingSigner.id ? 'Edit Penandatangan' : 'Tambah Penandatangan Baru'}
            </h3>
          </div>
          <button 
            type="button"
            onClick={onClose}
            className="p-1.5 hover:bg-slate-200 rounded-full text-slate-400 hover:text-slate-600 transition-all cursor-pointer"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        <form onSubmit={onSave} className="p-6 space-y-4">
          {SIGNER_FIELDS.map((field) => (
            <div key={field.key} className="space-y-1">
              <label className="block text-[11px] font-bold text-slate-500">
                {field.label}
              </label>
              <input
                type="text"
                placeholder={field.placeholder}
                value={editingSigner[field.key] || ''}
                onChange={(e) => setEditingSigner({
                  ...editingSigner,
                  [field.key]: e.target.value
                })}
                className="w-full border border-slate-200 rounded-lg p-2.5 text-xs font-semibold text-slate-700 bg-slate-50 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
              />
            </div>
          ))}

          <div className="flex space-x-3 justify-end pt-4 border-t border-slate-100 text-xs">
            <button 
              type="button"
              onClick={onClose}
              className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg font-bold cursor-pointer"
            >
              Batal
            </button>
            <button 
              type="submit"
              className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white font-bold rounded-lg cursor-pointer shadow"
            >
              {editingSigner.id ? '✓ Simpan' : '✓ Tambahkan'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}