'use client';

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

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

export default function MyAuditsHeader({ totalAudits, onRefresh }: Props) {
  const { canPerform, isReady } = useModulePermissions('my-audits');
  const router = useRouter();

  return (
    <div className={styles.header}>
      <div className={styles.headerLeft}>
        <h1 className={styles.title}>My Audits</h1>
        <p className={styles.subtitle}>
          Audits assigned to you as lead auditor
          {typeof totalAudits === 'number' && totalAudits > 0
            ? ` · ${totalAudits.toLocaleString()} total`
            : ''}
        </p>
      </div>

      <div className={styles.headerRight}>
        {/* 🆕 Audit Schedule Master */}
        <button
          onClick={() => router.push('/modules/my-audits/master')}
          title="My audit schedule master (auditor + submitter) with Excel/PDF"
          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,
          }}
        >
          <FiGrid size={14} /> Schedule Master
        </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>
  );
}