'use client';

import React from 'react';
import { FiRefreshCw, FiPlus } from 'react-icons/fi';
import styles from '../commonstyle/dattabale.module.css';
import { useModulePermissions } from '@/lib/api/hooks/useModulePermissions';

interface Props {
  totalTemplates?: number;
  onRefresh?: () => void;
  onNewTemplate?: () => void;
}

// ─────────────────────────────────────────────────────────────────
// Mirrors MyAuditsHeader exactly: purple gradient bar from
// dattabale.module.css (styles.header), white translucent action
// buttons on the right. "New Template" sits where "Schedule Master"
// sits on My Audits (always visible — permission is enforced in the
// page container, same as handleOpen/handleMarkComplete gating).
// ─────────────────────────────────────────────────────────────────
export default function ChecklistTemplatesHeader({
  totalTemplates,
  onRefresh,
  onNewTemplate,
}: Props) {
  const { isReady } = useModulePermissions('checklist-templates');

  return (
    <div className={styles.header}>
      <div className={styles.headerLeft}>
        <h1 className={styles.title}>Checklist Templates</h1>
        <p className={styles.subtitle}>
          Manage the generic and standard-specific document checklists auditors can assign
          {typeof totalTemplates === 'number' && totalTemplates > 0
            ? ` · ${totalTemplates.toLocaleString()} total`
            : ''}
        </p>
      </div>

      <div className={styles.headerRight}>
        {/* Primary action — same slot & styling as "Schedule Master" */}
        {onNewTemplate && (
          <button
            onClick={onNewTemplate}
            title="Create a new checklist template"
            style={{
              background: 'rgba(255,255,255,0.15)',
              color: '#fff',
              border: '1px solid rgba(255,255,255,0.3)',
              display: 'inline-flex',
              alignItems: 'center',
              gap: 6,
              padding: '8px 16px',
              borderRadius: 8,
              fontSize: '0.875rem',
              fontWeight: 600,
              cursor: 'pointer',
              marginRight: 8,
            }}
          >
            <FiPlus size={14} /> New Template
          </button>
        )}

        {!isReady ? (
          <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)' }}>
            Loading...
          </span>
        ) : (
          <>
            {onRefresh && (
              <button
                className={styles.btnSecondary}
                onClick={onRefresh}
                style={{
                  background: 'rgba(255,255,255,0.15)',
                  color: '#fff',
                  border: '1px solid rgba(255,255,255,0.3)',
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 6,
                }}
                title="Refresh"
              >
                <FiRefreshCw size={14} /> Refresh
              </button>
            )}
          </>
        )}
      </div>
    </div>
  );
}