import type { RealtimeMetrics } from '../types';

export interface RealtimeWidgetProps {
  /** Realtime metrics data */
  data: RealtimeMetrics;
  /** Widget title */
  title?: string;
  /** Auto-refresh interval in ms (0 to disable) */
  refreshInterval?: number;
  /** Loading state */
  loading?: boolean;
  /** Custom CSS class */
  className?: string;
}

export function RealtimeWidget({
  data,
  title = 'Live',
  loading = false,
  className,
}: RealtimeWidgetProps) {
  if (loading) {
    return (
      <div
        className={className}
        style={{
          padding: '20px',
          backgroundColor: '#fff',
          borderRadius: '8px',
          boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
        }}
      >
        <div style={{ height: '200px', backgroundColor: '#f5f5f5', borderRadius: '4px' }} />
      </div>
    );
  }

  return (
    <div
      className={className}
      style={{
        padding: '20px',
        backgroundColor: '#fff',
        borderRadius: '8px',
        boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
      }}
    >
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
          marginBottom: '16px',
        }}
      >
        <div
          style={{
            width: '8px',
            height: '8px',
            backgroundColor: '#22c55e',
            borderRadius: '50%',
            animation: 'pulse 2s infinite',
          }}
        />
        <span
          style={{
            fontSize: '16px',
            fontWeight: 600,
            color: '#111827',
          }}
        >
          {title}
        </span>
        <span
          style={{
            fontSize: '12px',
            color: '#9ca3af',
            marginLeft: 'auto',
          }}
        >
          Updated {new Date(data.lastUpdated).toLocaleTimeString()}
        </span>
      </div>

      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: '16px',
          marginBottom: '20px',
        }}
      >
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: '28px', fontWeight: 700, color: '#111827' }}>
            {data.activeUsers}
          </div>
          <div style={{ fontSize: '12px', color: '#6b7280' }}>Active Users</div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: '28px', fontWeight: 700, color: '#111827' }}>
            {data.pageViewsPerMinute}
          </div>
          <div style={{ fontSize: '12px', color: '#6b7280' }}>Views/min</div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: '28px', fontWeight: 700, color: '#111827' }}>
            {data.eventsPerMinute}
          </div>
          <div style={{ fontSize: '12px', color: '#6b7280' }}>Events/min</div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
        <div>
          <div
            style={{
              fontSize: '12px',
              fontWeight: 500,
              color: '#6b7280',
              marginBottom: '8px',
              textTransform: 'uppercase',
            }}
          >
            Top Pages
          </div>
          {data.topPages.slice(0, 5).map((page, index) => (
            <div
              key={index}
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                padding: '4px 0',
                fontSize: '13px',
              }}
            >
              <span
                style={{
                  color: '#374151',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  maxWidth: '150px',
                }}
              >
                {page.path}
              </span>
              <span style={{ color: '#6b7280' }}>{page.count}</span>
            </div>
          ))}
        </div>
        <div>
          <div
            style={{
              fontSize: '12px',
              fontWeight: 500,
              color: '#6b7280',
              marginBottom: '8px',
              textTransform: 'uppercase',
            }}
          >
            Top Referrers
          </div>
          {data.topReferrers.slice(0, 5).map((referrer, index) => (
            <div
              key={index}
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                padding: '4px 0',
                fontSize: '13px',
              }}
            >
              <span
                style={{
                  color: '#374151',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  maxWidth: '150px',
                }}
              >
                {referrer.referrer || 'Direct'}
              </span>
              <span style={{ color: '#6b7280' }}>{referrer.count}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
