'use client';

import React from 'react';
import { FiRefreshCw, FiVideo, FiPlus } from 'react-icons/fi';

interface Props {
  totalMeetings?: number;
  liveCount?: number;
  onRefresh?: () => void;
  onNew?: () => void;
}

export default function MeetingsHeader({
  totalMeetings,
  liveCount = 0,
  onRefresh,
  onNew,
}: Props) {
  return (
    <div
      style={{
        position: 'relative',
        overflow: 'hidden',
        background:
          'linear-gradient(135deg, #4a0080 0%, #6b1fb3 45%, #8b14d4 100%)',
        borderRadius: 16,
        padding: '26px 30px',
        marginBottom: 20,
        boxShadow: '0 20px 45px -20px rgba(74, 0, 128, 0.55)',
      }}
    >
      {/* Decorative circles */}
      <div
        aria-hidden
        style={{
          position: 'absolute',
          top: -80,
          right: -60,
          width: 220,
          height: 220,
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%)',
        }}
      />
      <div
        aria-hidden
        style={{
          position: 'absolute',
          bottom: -100,
          left: '30%',
          width: 260,
          height: 260,
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%)',
        }}
      />

      <div
        style={{
          position: 'relative',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: 16,
        }}
      >
        {/* LEFT — title + subtitle */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <div
            style={{
              width: 52,
              height: 52,
              borderRadius: 14,
              background: 'rgba(255,255,255,0.18)',
              backdropFilter: 'blur(10px)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              border: '1px solid rgba(255,255,255,0.25)',
            }}
          >
            <FiVideo size={24} color="#fff" />
          </div>
          <div>
            <h1
              style={{
                margin: 0,
                color: '#fff',
                fontSize: 24,
                fontWeight: 800,
                letterSpacing: '-0.01em',
                lineHeight: 1.1,
              }}
            >
              Meetings
            </h1>
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 12,
                marginTop: 6,
                fontSize: 13,
                color: 'rgba(255,255,255,0.85)',
              }}
            >
              <span>Live audit meetings — video, chat &amp; attendance</span>
              {typeof totalMeetings === 'number' && (
                <>
                  <span style={{ opacity: 0.4 }}>·</span>
                  <span style={{ fontWeight: 600 }}>
                    {totalMeetings.toLocaleString()} total
                  </span>
                </>
              )}
              {liveCount > 0 && (
                <>
                  <span style={{ opacity: 0.4 }}>·</span>
                  <span
                    style={{
                      display: 'inline-flex',
                      alignItems: 'center',
                      gap: 6,
                      padding: '3px 10px',
                      borderRadius: 99,
                      background: 'rgba(34,197,94,0.25)',
                      border: '1px solid rgba(134,239,172,0.5)',
                      fontWeight: 700,
                      fontSize: 12,
                    }}
                  >
                    <PulseDot />
                    {liveCount} live
                  </span>
                </>
              )}
            </div>
          </div>
        </div>

        {/* RIGHT — actions */}
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          {onNew && (
            <button
              onClick={onNew}
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 7,
                padding: '11px 20px',
                borderRadius: 11,
                border: 'none',
                background: '#fff',
                color: '#4a0080',
                fontSize: 13.5,
                fontWeight: 700,
                cursor: 'pointer',
                boxShadow: '0 8px 16px -4px rgba(0,0,0,0.15)',
                transition: 'transform 0.12s',
              }}
              onMouseEnter={(e) =>
                (e.currentTarget.style.transform = 'translateY(-1px)')
              }
              onMouseLeave={(e) =>
                (e.currentTarget.style.transform = 'translateY(0)')
              }
            >
              <FiPlus size={15} /> New Meeting
            </button>
          )}
          {onRefresh && (
            <button
              onClick={onRefresh}
              title="Refresh"
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 7,
                padding: '11px 16px',
                borderRadius: 11,
                border: '1px solid rgba(255,255,255,0.28)',
                background: 'rgba(255,255,255,0.14)',
                color: '#fff',
                fontSize: 13.5,
                fontWeight: 600,
                cursor: 'pointer',
                backdropFilter: 'blur(10px)',
              }}
            >
              <FiRefreshCw size={14} /> Refresh
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

// Pulsing dot for live indicator
function PulseDot() {
  return (
    <span style={{ position: 'relative', display: 'inline-block', width: 8, height: 8 }}>
      <span
        style={{
          position: 'absolute',
          inset: 0,
          borderRadius: '50%',
          background: '#4ade80',
          animation: 'meetings-pulse 1.8s ease-in-out infinite',
        }}
      />
      <span
        style={{
          position: 'absolute',
          inset: 0,
          borderRadius: '50%',
          background: '#4ade80',
        }}
      />
      <style>{`
        @keyframes meetings-pulse {
          0%   { transform: scale(1);   opacity: 0.9; }
          70%  { transform: scale(2.2); opacity: 0;   }
          100% { transform: scale(2.2); opacity: 0;   }
        }
      `}</style>
    </span>
  );
}