'use client';

import React from 'react';
import { FiRefreshCw, FiShield } from 'react-icons/fi';
import styles from '../commonstyle/dattabale.module.css';
import type { ClientScope } from '@/lib/api/types/clients.types';

interface Props {
  totalClients?: number;
  scope?: ClientScope | null;
  onRefresh?: () => void;
  isReady?: boolean;
}

export default function ClientsHeader({
  totalClients,
  scope,
  onRefresh,
  isReady = true,
}: Props) {
  const scopeLabel = !scope
    ? null
    : scope.can_view_all
      ? 'All records'
      : 'Your records only';

  return (
    <div className={styles.header}>
      <div className={styles.headerLeft}>
        <h1 className={styles.title}>Clients</h1>
        <p className={styles.subtitle}>
          {scope?.can_view_all
            ? 'All QRS & TQS clients and surveillance records'
            : 'Clients and surveillance records assigned to you'}
          {typeof totalClients === 'number' && totalClients > 0
            ? ` · ${totalClients.toLocaleString()} total`
            : ''}
        </p>
      </div>

      <div className={styles.headerRight}>
        {scopeLabel && (
          <span
            title={
              scope?.can_view_all
                ? 'Your role bypasses ownership filtering'
                : `Mapped to QRS #${scope?.qrs_user_id ?? '—'} / TQS #${scope?.tqs_user_id ?? '—'}`
            }
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 6,
              padding: '6px 12px',
              borderRadius: 8,
              background: 'rgba(255,255,255,0.15)',
              border: '1px solid rgba(255,255,255,0.3)',
              color: '#fff',
              fontSize: 12,
              fontWeight: 600,
              marginRight: 8,
              whiteSpace: 'nowrap',
            }}
          >
            <FiShield size={13} /> {scopeLabel}
          </span>
        )}

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