'use client';

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

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

export default function PreviousNcHeader({ totalNcs, onRefresh }: Props) {
  const { isReady } = useModulePermissions('previous-nc');
  const router = useRouter();

  return (
    <div className={styles.header}>
      <div className={styles.headerLeft}>
        <h1 className={styles.title}>NC(Non-conformities)</h1>
        <p className={styles.subtitle}>
          Legacy non-conformities from QRS &amp; TQS
          {typeof totalNcs === 'number' && totalNcs > 0
            ? ` · ${totalNcs.toLocaleString()} total`
            : ''}
        </p>
      </div>

      <div className={styles.headerRight}>
        {!isReady ? (
          <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)' }}>
            Loading...
          </span>
        ) : (
          <>
            <button
              className={styles.btnSecondary}
              onClick={() => router.push('/modules/previous-nc/audit-assign-report')}
              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="Audit Assign Report"
            >
              <FiBarChart2 size={14} /> Audit Report
            </button>

            <button
              className={styles.btnSecondary}
              onClick={() => router.push('/modules/final-closure')}
              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="Audit Detail Report"
            >
              <FiList size={14} /> Final Closure Report
            </button>

            {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>
  );
}