'use client';

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

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

export default function DocumentsHeader({
  totalDocs,
  onRefresh,
  onUpload,
}: Props) {
  const { canPerform, isReady } = useModulePermissions('documents');

  // 'create' is the standard upload/create action key across modules
  // Also check for 'upload' permission if 'create' doesn't exist
  const canUpload = canPerform('create') || canPerform('upload');

  // Debug log to help identify permission issues
  console.log('[DocumentsHeader] canUpload:', canUpload, 'isReady:', isReady);

  return (
    <div className={styles.header}>
      <div className={styles.headerLeft}>
        <h1 className={styles.title}>Document Portal</h1>
        <p className={styles.subtitle}>
          Role-based document sharing with OTP-secured access
          {typeof totalDocs === 'number' && totalDocs > 0
            ? ` · ${totalDocs.toLocaleString()} document${totalDocs === 1 ? '' : 's'}`
            : ''}
        </p>
      </div>

      <div className={styles.headerRight}>
        {!isReady ? (
          <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)' }}>
            Loading...
          </span>
        ) : (
          <>
            {onUpload && canUpload && (
              <button
                onClick={onUpload}
                title="Upload a new document"
                style={{
                  background: '#fff',
                  color: '#4a0080',
                  border: 'none',
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 6,
                  padding: '8px 16px',
                  borderRadius: 8,
                  fontSize: '0.875rem',
                  fontWeight: 700,
                  cursor: 'pointer',
                  marginRight: 8,
                  boxShadow: '0 4px 12px -4px rgba(0,0,0,0.2)',
                  transition: 'transform 0.15s, box-shadow 0.15s',
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform = 'translateY(-1px)';
                  e.currentTarget.style.boxShadow = '0 6px 16px -4px rgba(0,0,0,0.25)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = '0 4px 12px -4px rgba(0,0,0,0.2)';
                }}
              >
                <FiUpload size={14} /> Upload &amp; Assign
              </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,
                  padding: '8px 16px',
                  borderRadius: 8,
                  fontSize: '0.875rem',
                  fontWeight: 600,
                  cursor: 'pointer',
                  transition: 'all 0.15s',
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.background = 'rgba(255,255,255,0.25)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.background = 'rgba(255,255,255,0.15)';
                }}
                title="Refresh"
              >
                <FiRefreshCw size={14} /> Refresh
              </button>
            )}
          </>
        )}
      </div>
    </div>
  );
}