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

import React from 'react';
import { BookOpen, RefreshCw, Plus, Edit3, Copy, Trash2 } from 'lucide-react';
import { HRTemplate } from '../types';

interface DashboardTemplatesTabProps {
  filteredTemplates: HRTemplate[];
  onUseTemplate: (tpl: HRTemplate) => void;
  onEditTemplate: (tpl: HRTemplate) => void;
  onCloneTemplate: (tpl: HRTemplate) => void;
  onDeleteTemplate: (id: string, title: string) => void;
  onResetDefaults: () => void;
}

export default function DashboardTemplatesTab({
  filteredTemplates,
  onUseTemplate,
  onEditTemplate,
  onCloneTemplate,
  onDeleteTemplate,
  onResetDefaults
}: DashboardTemplatesTabProps) {
  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-sm font-bold text-slate-700">Kumpulan Templat Master SDM</h2>
        <button
          id="dash-btn-reset"
          onClick={onResetDefaults}
          className="text-xs text-blue-600 hover:text-blue-700 flex items-center space-x-1.5 transition-colors cursor-pointer font-semibold"
          title="Kembalikan semua templat bawaan pabrik"
        >
          <RefreshCw className="w-3.5 h-3.5" />
          <span>Pulihkan Templat Bawaan</span>
        </button>
      </div>

      {filteredTemplates.length === 0 ? (
        <div className="bg-white border border-slate-200 rounded-xl p-12 text-center shadow-sm">
          <BookOpen className="w-12 h-12 text-slate-300 mx-auto mb-4" />
          <h3 className="text-base font-bold text-slate-700">Belum Ada Templat Master</h3>
          <p className="text-slate-400 text-xs mt-2 max-w-sm mx-auto leading-relaxed">
            Tidak ada templat yang cocok dengan pencarian Anda. Klik "Pulihkan Templat Bawaan" atau buat master templat baru di atas.
          </p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredTemplates.map((tpl) => (
            <div 
              key={tpl.id}
              id={`template-card-${tpl.id}`}
              className="bg-white border border-slate-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-all flex flex-col justify-between group"
            >
              <div>
                <div className="flex items-center justify-between mb-3">
                  <span className="bg-slate-100 text-slate-700 text-[10px] font-bold px-2 py-0.5 rounded-full border border-slate-200 uppercase tracking-tight">
                    {tpl.category}
                  </span>
                  {tpl.isCustom ? (
                    <span className="bg-amber-50 text-amber-700 text-[9px] font-bold px-2 py-0.5 rounded-full border border-amber-100">
                      Kustom Anda
                    </span>
                  ) : (
                    <span className="text-[10px] text-slate-400 font-medium">Bawaan</span>
                  )}
                </div>

                <h3 className="font-bold text-slate-900 text-sm group-hover:text-blue-600 transition-colors line-clamp-1 mb-2">
                  {tpl.title}
                </h3>
                <p className="text-slate-500 text-[11px] leading-relaxed line-clamp-2 mb-4">
                  {tpl.description}
                </p>
              </div>

              <div className="border-t border-slate-100 pt-4 mt-2 flex items-center justify-between gap-3">
                <button
                  id={`btn-fill-template-${tpl.id}`}
                  onClick={() => onUseTemplate(tpl)}
                  className="px-3.5 py-2 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white text-xs font-bold rounded flex items-center space-x-1.5 transition-colors cursor-pointer shadow-sm shadow-blue-100"
                >
                  <Plus className="w-3.5 h-3.5" />
                  <span>Buat Surat</span>
                </button>

                <div className="flex space-x-1">
                  <button
                    id={`btn-edit-template-${tpl.id}`}
                    onClick={() => onEditTemplate(tpl)}
                    className="p-1.5 text-slate-500 hover:text-slate-800 hover:bg-slate-100 rounded-lg transition-colors cursor-pointer"
                    title="Edit Isi Templat Master"
                  >
                    <Edit3 className="w-3.5 h-3.5" />
                  </button>
                  <button
                    id={`btn-clone-template-${tpl.id}`}
                    onClick={() => onCloneTemplate(tpl)}
                    className="p-1.5 text-slate-500 hover:text-slate-800 hover:bg-slate-100 rounded-lg transition-colors cursor-pointer"
                    title="Gandakan Templat Master"
                  >
                    <Copy className="w-3.5 h-3.5" />
                  </button>
                  {tpl.isCustom && (
                    <button
                      id={`btn-delete-template-${tpl.id}`}
                      onClick={() => onDeleteTemplate(tpl.id, tpl.title)}
                      className="p-1.5 text-slate-400 hover:text-red-650 hover:bg-red-50 rounded-lg transition-colors cursor-pointer"
                      title="Hapus Templat Kustom"
                    >
                      <Trash2 className="w-3.5 h-3.5" />
                    </button>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}