import { useState, useEffect } from 'react';

export function AttendantOpsPanel({ activeChatsCount }) {
  const [isPaused, setIsPaused] = useState(false);
  const [secondsOnline, setSecondsOnline] = useState(0);

  useEffect(() => {
    let interval;
    if (!isPaused) {
      interval = setInterval(() => {
        setSecondsOnline((s) => s + 1);
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [isPaused]);

  const formatTime = (totalSeconds) => {
    const h = Math.floor(totalSeconds / 3600);
    const m = Math.floor((totalSeconds % 3600) / 60);
    const s = totalSeconds % 60;
    return [h, m, s]
      .map(v => v.toString().padStart(2, '0'))
      .filter((v, i) => v !== '00' || i > 0)
      .join(':');
  };

  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
        gap: '1rem',
      }}
    >
      <article
        style={{
          padding: '1.25rem',
          borderRadius: '24px',
          border: '1px solid var(--color-border)',
          background: 'linear-gradient(145deg, #ffffff, #f8fafc)',
          boxShadow: 'var(--shadow-sm)',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <div>
          <span style={{ color: 'var(--color-text-soft)', fontSize: '0.9rem', fontWeight: 600 }}>
            Tempo Online
          </span>
          <strong style={{ display: 'block', fontSize: '1.6rem', marginTop: '0.2rem', color: 'var(--color-text)' }}>
            {formatTime(secondsOnline)}
          </strong>
        </div>
        <div style={{
          width: '12px',
          height: '12px',
          borderRadius: '50%',
          background: isPaused ? '#ef4444' : '#10b981',
          boxShadow: `0 0 10px ${isPaused ? '#ef4444' : '#10b981'}`,
          animation: !isPaused ? 'pulse 2s infinite' : 'none'
        }} />
      </article>

      <article
        style={{
          padding: '1.25rem',
          borderRadius: '24px',
          border: '1px solid var(--color-border)',
          background: 'linear-gradient(145deg, #ffffff, #f8fafc)',
          boxShadow: 'var(--shadow-sm)',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <div>
          <span style={{ color: 'var(--color-text-soft)', fontSize: '0.9rem', fontWeight: 600 }}>
            Atendimentos Abertos
          </span>
          <strong style={{ display: 'block', fontSize: '1.6rem', marginTop: '0.2rem', color: 'var(--color-text)' }}>
            {activeChatsCount}
          </strong>
        </div>
      </article>

      <article
        style={{
          padding: '1.25rem',
          borderRadius: '24px',
          border: '1px solid var(--color-border)',
          background: 'linear-gradient(145deg, #ffffff, #f8fafc)',
          boxShadow: 'var(--shadow-sm)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }}
      >
        <button
          onClick={() => setIsPaused(!isPaused)}
          style={{
            width: '100%',
            height: '100%',
            padding: '1rem',
            borderRadius: '16px',
            border: 'none',
            background: isPaused ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)',
            color: isPaused ? '#10b981' : '#ef4444',
            fontSize: '1rem',
            fontWeight: 700,
            cursor: 'pointer',
            transition: 'all 0.2s ease',
          }}
        >
          {isPaused ? '▶ Retomar Atendimento' : '⏸ Pausar'}
        </button>
      </article>
    </div>
  );
}