'use client';

import { useState } from 'react';
import styles from '../commonstyle/dattabale.module.css';
import InquiryForm from './Form/InquiryForm';
import { useModulePermissions } from "@/lib/api/hooks/useModulePermissions";

interface Props {
  refreshData?: () => void;
  onOpenBatch?: () => void;   // ✅ NEW
}

export default function InquiryHeader({ refreshData, onOpenBatch }: Props) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const { canPerform, isReady } = useModulePermissions("inquiries");

  return (
    <>
      <div className={styles.header}>
        <div className={styles.headerLeft}>
          <h1 className={styles.title}>Inquiries Module</h1>
          <p className={styles.subtitle}>
            Manage Certification Inquiries — Marketing submits, Scheme reviews &amp; issues
          </p>
        </div>
        <div className={styles.headerRight}>
          {!isReady ? (
            <span style={{ fontSize: 12, color: '#9ca3af' }}>Loading...</span>
          ) : (
            canPerform('create') && (
              <>
                <button className={styles.btnPrimary} onClick={() => setIsModalOpen(true)}>
                  ＋ New Inquiry
                </button>
                <button className={styles.btnPrimary} onClick={() => onOpenBatch?.()}>
                  ⧉ Batch Inquiry
                </button>
              </>
            )
          )}
        </div>
      </div>

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