"use client";

import { useState } from "react";
import styles from "../../modules/commonstyle/dattabale.module.css";
import TemplateForm from "./Form/TemplateForm";
import { useModulePermissions } from "@/lib/api/hooks/useModulePermissions";
import { useRouter } from "next/navigation";

interface Props {
  refreshData?: () => void;
}

export default function TemplateHeader({ refreshData }: Props) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const router = useRouter();
   const { canPerform, isReady } = useModulePermissions("templates");

  return (
    <>
      <div className={styles.header}>
        <div className={styles.headerLeft}>
          <h1 className={styles.title}>Templates Module</h1>
          <p className={styles.subtitle}>Manage PDF Document & Certificate Templates</p>
        </div>
        <div className={styles.headerRight}>
          {canPerform("export") && (
            <button
              className={styles.btnSecondary}
              onClick={() => router.push("/modules/templates/report")}
            >
              📊 Reports
            </button>
          )}
          {canPerform("create") && (
            <button
              className={styles.btnPrimary}
              onClick={() => setIsModalOpen(true)}
            >
              ＋ New Template
            </button>
          )}
        </div>
      </div>

      {isModalOpen && (
        <TemplateForm
          isOpen={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          refreshData={refreshData}
        />
      )}
    </>
  );
}