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

import React from 'react';
import { PlusCircle, X } from 'lucide-react';

interface AppModalsProps {
  showCreateTplModal: boolean;
  onCancelCreateTpl: () => void;
  newTplTitle: string;
  setNewTplTitle: (val: string) => void;
  newTplCategory: 'Kontrak' | 'Surat Keputusan' | 'Surat Keterangan' | 'Surat Teguran' | 'Lainnya';
  setNewTplCategory: (val: 'Kontrak' | 'Surat Keputusan' | 'Surat Keterangan' | 'Surat Teguran' | 'Lainnya') => void;
  newTplDesc: string;
  setNewTplDesc: (val: string) => void;
  onCreateNewTemplateProperty: () => void;
}

export default function AppModals({
  showCreateTplModal,
  onCancelCreateTpl,
  newTplTitle,
  setNewTplTitle,
  newTplCategory,
  setNewTplCategory,
  newTplDesc,
  setNewTplDesc,
  onCreateNewTemplateProperty,
}: AppModalsProps) {
  return (
    <>
      {/* MODAL overlay backdrop: Create Custom Template Properties */}
      {showCreateTplModal && (
        <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm flex items-center justify-center p-4 z-50 select-none">
          <div className="bg-white rounded-2xl shadow-2xl border border-slate-150 p-6 max-w-lg w-full animate-in zoom-in-95 duration-200">
            <div className="flex items-center justify-between border-b border-slate-100 pb-3 mb-5">
              <h3 className="text-lg font-bold text-slate-800 flex items-center space-x-2">
                <PlusCircle className="w-5 h-5 text-blue-600" />
                <span>Buat Master Templat Baru</span>
              </h3>
              <button 
                onClick={onCancelCreateTpl}
                className="p-1.5 hover:bg-slate-100 rounded-full text-slate-400 hover:text-slate-600 cursor-pointer"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-4">
              <div>
                <label className="block text-xs font-semibold text-slate-500 mb-1">Nama / Judul Templat (Wajib)</label>
                <input 
                  id="modal-tpl-title"
                  type="text" 
                  placeholder="cth: Surat Keputusan Promosi Jabatan"
                  value={newTplTitle}
                  onChange={(e) => setNewTplTitle(e.target.value)}
                  className="w-full border border-slate-300 rounded-lg p-2.5 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-500 mb-1">Kategori Dokumen</label>
                <select
                  id="modal-tpl-category"
                  value={newTplCategory}
                  onChange={(e) => setNewTplCategory(e.target.value as any)}
                  className="w-full border border-slate-300 rounded-lg p-2.5 text-sm bg-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
                >
                  <option value="Kontrak">Kontrak Kerja</option>
                  <option value="Surat Keputusan">Surat Keputusan (SK)</option>
                  <option value="Surat Keterangan">Surat Keterangan</option>
                  <option value="Surat Teguran">Surat Teguran / SP</option>
                  <option value="Lainnya">Lainnya</option>
                </select>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-500 mb-1">Keterangan / Deskripsi Ringkas</label>
                <textarea
                  id="modal-tpl-desc"
                  rows={2}
                  placeholder="cth: Digunakan saat pengangkatan atau kenaikan jenjang karir karyawan tetap."
                  value={newTplDesc}
                  onChange={(e) => setNewTplDesc(e.target.value)}
                  className="w-full border border-slate-300 rounded-lg p-2.5 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors resize-none"
                />
              </div>
            </div>

            <div className="flex space-x-3 justify-end mt-6 pt-3 border-t border-slate-100 text-sm">
              <button 
                id="modal-tpl-cancel"
                onClick={onCancelCreateTpl}
                className="px-4 py-2.5 text-slate-600 hover:bg-slate-100 rounded-lg font-bold cursor-pointer"
              >
                Batal
              </button>
              <button 
                id="modal-tpl-submit"
                type="button"
                onClick={onCreateNewTemplateProperty}
                className="px-4 py-2.5 bg-blue-600 hover:bg-blue-750 active:bg-blue-800 text-white font-bold rounded-lg cursor-pointer shadow-md shadow-blue-100"
              >
                Lanjutkan ke Editor Desain
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}