'use client';

import React from 'react';
import { FiRefreshCw, FiPlus, FiUpload, FiWifi, FiWifiOff } from 'react-icons/fi';
import styles from '../commonstyle/dattabale.module.css';

interface Props {
  totalLeads?: number;
  onRefresh?: () => void;
  onNewLead?: () => void;
  onImport?: () => void;
  canCreate?: boolean;
  /** Live-connection state from useLeadRealtime. */
  realtime?: { connected: boolean; transport: 'socket' | 'poll' | 'off' };
}

export default function LeadsHeader({
  totalLeads,
  onRefresh,
  onNewLead,
  onImport,
  canCreate = true,
  realtime,
}: Props) {
  const ghostButton: React.CSSProperties = {
    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,
  };

  return (
    <div className={styles.header}>
      <div className={styles.headerLeft}>
        <h1 className={styles.title}>Leads</h1>
        <p className={styles.subtitle}>
          Prospects in your pipeline
          {typeof totalLeads === 'number' && totalLeads > 0
            ? ` · ${totalLeads.toLocaleString()} total`
            : ''}
        </p>
      </div>

      <div className={styles.headerRight}>
        {/* Live indicator — tells the user whether a handover will reach
            them instantly or on the next poll. Quiet by design: a dot and
            a word, not a banner. */}
        {realtime && (
          <span
            title={
              realtime.transport === 'socket'
                ? 'Connected — assignments arrive instantly'
                : 'Checking for new assignments periodically'
            }
            style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 5,
              marginRight: 12,
              fontSize: 11,
              fontWeight: 600,
              color: 'rgba(255,255,255,0.85)',
            }}
          >
            {realtime.transport === 'socket' ? (
              <FiWifi size={13} />
            ) : (
              <FiWifiOff size={13} />
            )}
            {realtime.transport === 'socket' ? 'Live' : 'Periodic'}
          </span>
        )}

        {onImport && (
          <button onClick={onImport} style={ghostButton} title="Import leads from CSV">
            <FiUpload size={14} /> Import
          </button>
        )}

        {onRefresh && (
          <button
            className={styles.btnSecondary}
            onClick={onRefresh}
            style={ghostButton}
            title="Refresh"
          >
            <FiRefreshCw size={14} /> Refresh
          </button>
        )}

        {canCreate && onNewLead && (
          <button
            onClick={onNewLead}
            style={{
              ...ghostButton,
              background: '#fff',
              color: '#0f766e',
              border: '1px solid #fff',
              marginRight: 0,
            }}
            title="Add a lead"
          >
            <FiPlus size={14} /> New lead
          </button>
        )}
      </div>
    </div>
  );
}