import React from 'react';
import { Users, Search } from 'lucide-react';
import ChatterOrbit from './ChatterOrbit';

export default function ChattersTab({
  chatters,
  chattersSearch,
  setChattersSearch,
  TWITCH_CHANNEL
}) {
  return (
    <div className="grid-2col tab-content" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))', gap: '1.5rem', alignItems: 'start' }}>
      <div className="panel">
        <div className="panel-header">
          <h3 className="panel-title"><Users size={20} /> Орбита зрителей</h3>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', padding: '1rem 0' }}>
          <ChatterOrbit chatters={chatters} />
        </div>
      </div>

      <div className="panel">
        <div className="panel-header">
          <h3 className="panel-title"><Users size={20} /> Лидеры чата по активности</h3>
          <div className="search-container">
            <Search size={16} className="search-icon" />
            <input 
              type="text" 
              className="search-input" 
              placeholder="Поиск зрителя..."
              value={chattersSearch}
              onChange={(e) => setChattersSearch(e.target.value)}
            />
          </div>
        </div>

        {chatters.length === 0 ? (
          <div className="status-msg">
            <Users size={40} className="status-msg-icon" />
            <p>Нет данных о зрителях для этого периода</p>
          </div>
        ) : (
          <div className="table-wrapper">
            <table className="data-table">
              <thead>
                <tr>
                  <th>Место</th>
                  <th>Никнейм</th>
                  <th>Роли</th>
                  <th>Сообщений</th>
                </tr>
              </thead>
              <tbody>
                {chatters
                  .filter(c => {
                    const disp = c.display_name || c.username || '';
                    const user = c.username || '';
                    return disp.toLowerCase().includes(chattersSearch.toLowerCase()) || 
                           user.toLowerCase().includes(chattersSearch.toLowerCase());
                  })
                  .map((c, idx) => (
                    <tr key={idx} className="chatter-row">
                      <td style={{ fontWeight: 700, width: '80px', color: idx < 3 ? 'var(--color-brand)' : 'var(--color-text-muted)' }}>
                        #{idx + 1}
                      </td>
                      <td style={{ fontWeight: 600 }}>{c.display_name || c.username || '—'}</td>
                      <td>
                        <div style={{ display: 'flex', gap: '0.4rem' }}>
                          {(c.username || '').toLowerCase() === TWITCH_CHANNEL && (
                            <span className="badge badge-streamer">Стример</span>
                          )}
                          {c.is_mod ? <span className="badge badge-mod">Мод</span> : null}
                          {c.is_vip && !c.is_mod ? <span className="badge badge-vip">VIP</span> : null}
                          {c.is_sub && !c.is_mod && !c.is_vip ? <span className="badge badge-sub">Саб</span> : null}
                        </div>
                      </td>
                      <td style={{ fontWeight: 700, color: 'var(--color-text-accent)' }}>
                        {c.message_count.toLocaleString()}
                      </td>
                    </tr>
                  ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}