import React, { useState } from 'react';

const mockData = {
  overview: {
    totalMembers: 12847,
    membersChange: '+342',
    activeMembers: 3241,
    activeChange: '+12%',
    messagesPerDay: 8432,
    messagesChange: '-5%',
    joinRate: 89,
    retentionRate: 76,
  },
  growth: [
    { date: 'Jan 29', joins: 45, leaves: 12 },
    { date: 'Jan 30', joins: 52, leaves: 8 },
    { date: 'Jan 31', joins: 38, leaves: 15 },
    { date: 'Feb 1', joins: 67, leaves: 10 },
    { date: 'Feb 2', joins: 89, leaves: 7 },
    { date: 'Feb 3', joins: 72, leaves: 11 },
    { date: 'Feb 4', joins: 85, leaves: 9 },
  ],
  topChannels: [
    { name: 'general', messages: 2341, percentage: 28 },
    { name: 'gaming', messages: 1892, percentage: 22 },
    { name: 'off-topic', messages: 1456, percentage: 17 },
    { name: 'development', messages: 1234, percentage: 15 },
    { name: 'announcements', messages: 892, percentage: 11 },
  ],
  peakHours: [
    { hour: '12AM', activity: 15 },
    { hour: '4AM', activity: 8 },
    { hour: '8AM', activity: 25 },
    { hour: '12PM', activity: 65 },
    { hour: '4PM', activity: 85 },
    { hour: '8PM', activity: 100 },
  ],
  demographics: {
    regions: [
      { name: 'North America', percentage: 42 },
      { name: 'Europe', percentage: 31 },
      { name: 'Asia', percentage: 18 },
      { name: 'Other', percentage: 9 },
    ],
    platforms: [
      { name: 'Desktop', percentage: 58 },
      { name: 'Mobile', percentage: 35 },
      { name: 'Web', percentage: 7 },
    ],
  },
  invites: [
    { code: 'abc123', uses: 234, creator: 'Admin' },
    { code: 'def456', uses: 156, creator: 'Mod' },
    { code: 'ghi789', uses: 89, creator: 'Member' },
  ],
};

export default function ServerInsights({ onClose }) {
  const [activeTab, setActiveTab] = useState('overview');
  const [timeRange, setTimeRange] = useState('7d');

  const tabs = [
    { id: 'overview', label: 'Overview', icon: '📊' },
    { id: 'growth', label: 'Growth', icon: '📈' },
    { id: 'engagement', label: 'Engagement', icon: '💬' },
    { id: 'audience', label: 'Audience', icon: '👥' },
  ];

  return (
    <div className="server-insights">
      <div className="insights-header">
        <h2>📊 Server Insights</h2>
        <div className="insights-controls">
          <select 
            className="time-range-select"
            value={timeRange}
            onChange={(e) => setTimeRange(e.target.value)}
          >
            <option value="24h">Last 24 hours</option>
            <option value="7d">Last 7 days</option>
            <option value="30d">Last 30 days</option>
            <option value="90d">Last 90 days</option>
          </select>
          <button className="insights-close" onClick={onClose}>✕</button>
        </div>
      </div>

      <div className="insights-tabs">
        {tabs.map(tab => (
          <button
            key={tab.id}
            className={`insights-tab ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.id)}
          >
            <span>{tab.icon}</span> {tab.label}
          </button>
        ))}
      </div>

      <div className="insights-content">
        {activeTab === 'overview' && (
          <div className="insights-overview">
            <div className="stat-cards">
              <div className="stat-card">
                <div className="stat-icon">👥</div>
                <div className="stat-info">
                  <span className="stat-value">{mockData.overview.totalMembers.toLocaleString()}</span>
                  <span className="stat-label">Total Members</span>
                  <span className="stat-change positive">{mockData.overview.membersChange}</span>
                </div>
              </div>
              <div className="stat-card">
                <div className="stat-icon">🟢</div>
                <div className="stat-info">
                  <span className="stat-value">{mockData.overview.activeMembers.toLocaleString()}</span>
                  <span className="stat-label">Active Members</span>
                  <span className="stat-change positive">{mockData.overview.activeChange}</span>
                </div>
              </div>
              <div className="stat-card">
                <div className="stat-icon">💬</div>
                <div className="stat-info">
                  <span className="stat-value">{mockData.overview.messagesPerDay.toLocaleString()}</span>
                  <span className="stat-label">Messages/Day</span>
                  <span className="stat-change negative">{mockData.overview.messagesChange}</span>
                </div>
              </div>
              <div className="stat-card">
                <div className="stat-icon">📥</div>
                <div className="stat-info">
                  <span className="stat-value">{mockData.overview.joinRate}%</span>
                  <span className="stat-label">Join Rate</span>
                </div>
              </div>
            </div>

            <div className="insights-chart">
              <h3>Member Growth</h3>
              <div className="simple-chart">
                {mockData.growth.map((day, idx) => (
                  <div key={idx} className="chart-bar-container">
                    <div className="chart-bar joins" style={{ height: `${day.joins}%` }} title={`+${day.joins} joins`} />
                    <div className="chart-bar leaves" style={{ height: `${day.leaves}%` }} title={`-${day.leaves} leaves`} />
                    <span className="chart-label">{day.date}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {activeTab === 'growth' && (
          <div className="insights-growth">
            <div className="growth-stats">
              <div className="growth-stat">
                <span className="growth-number positive">+{mockData.growth.reduce((a, d) => a + d.joins, 0)}</span>
                <span className="growth-label">New Members</span>
              </div>
              <div className="growth-stat">
                <span className="growth-number negative">-{mockData.growth.reduce((a, d) => a + d.leaves, 0)}</span>
                <span className="growth-label">Members Left</span>
              </div>
              <div className="growth-stat">
                <span className="growth-number">{mockData.overview.retentionRate}%</span>
                <span className="growth-label">Retention Rate</span>
              </div>
            </div>

            <div className="top-invites">
              <h3>Top Invite Links</h3>
              {mockData.invites.map((invite, idx) => (
                <div key={idx} className="invite-row">
                  <span className="invite-code">discord.gg/{invite.code}</span>
                  <span className="invite-uses">{invite.uses} uses</span>
                  <span className="invite-creator">by {invite.creator}</span>
                </div>
              ))}
            </div>
          </div>
        )}

        {activeTab === 'engagement' && (
          <div className="insights-engagement">
            <div className="top-channels">
              <h3>Most Active Channels</h3>
              {mockData.topChannels.map((channel, idx) => (
                <div key={idx} className="channel-stat">
                  <span className="channel-rank">#{idx + 1}</span>
                  <span className="channel-name">#{channel.name}</span>
                  <div className="channel-bar">
                    <div 
                      className="channel-bar-fill" 
                      style={{ width: `${channel.percentage}%` }}
                    />
                  </div>
                  <span className="channel-messages">{channel.messages.toLocaleString()}</span>
                </div>
              ))}
            </div>

            <div className="peak-hours">
              <h3>Peak Activity Hours</h3>
              <div className="hours-chart">
                {mockData.peakHours.map((hour, idx) => (
                  <div key={idx} className="hour-bar-container">
                    <div 
                      className="hour-bar" 
                      style={{ height: `${hour.activity}%` }}
                    />
                    <span className="hour-label">{hour.hour}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {activeTab === 'audience' && (
          <div className="insights-audience">
            <div className="audience-section">
              <h3>Top Regions</h3>
              {mockData.demographics.regions.map((region, idx) => (
                <div key={idx} className="demographic-row">
                  <span className="demo-name">{region.name}</span>
                  <div className="demo-bar">
                    <div 
                      className="demo-bar-fill" 
                      style={{ width: `${region.percentage}%` }}
                    />
                  </div>
                  <span className="demo-percentage">{region.percentage}%</span>
                </div>
              ))}
            </div>

            <div className="audience-section">
              <h3>Platforms</h3>
              {mockData.demographics.platforms.map((platform, idx) => (
                <div key={idx} className="demographic-row">
                  <span className="demo-name">{platform.name}</span>
                  <div className="demo-bar">
                    <div 
                      className="demo-bar-fill" 
                      style={{ width: `${platform.percentage}%` }}
                    />
                  </div>
                  <span className="demo-percentage">{platform.percentage}%</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
