import React from 'react';

export default function ServerBanner({ server, isCollapsed }) {
  const serverData = server || {
    name: 'AeThex Foundation',
    icon: 'F',
    gradient: 'linear-gradient(135deg, #ff0000, #990000)',
    banner: 'linear-gradient(180deg, #ff0000 0%, transparent 100%)',
    description: 'Official AeThex Foundation server',
    boostLevel: 3,
    boostCount: 14,
    memberCount: 128,
    onlineCount: 47,
    features: ['ANIMATED_BANNER', 'ANIMATED_ICON', 'BANNER', 'INVITE_SPLASH', 'VANITY_URL', 'VIP_REGIONS'],
    vanityUrl: 'aethex',
  };

  const boostFeatures = [
    { level: 1, features: ['50 Emoji Slots', '128 Kbps Audio', 'Custom Invite Background', 'Animated Server Icon'] },
    { level: 2, features: ['100 Emoji Slots', '256 Kbps Audio', 'Server Banner', '50 MB Uploads', 'Custom Role Icons'] },
    { level: 3, features: ['250 Emoji Slots', '384 Kbps Audio', 'Vanity URL', '100 MB Uploads', 'Animated Banner'] },
  ];

  if (isCollapsed) {
    return (
      <div className="server-banner-mini">
        <div className="banner-gradient" style={{ background: serverData.banner }}></div>
        <span className="server-name-mini">{serverData.name}</span>
      </div>
    );
  }

  return (
    <div className="server-banner">
      <div className="banner-image" style={{ background: serverData.banner }}>
        <div className="banner-overlay">
          <div className="banner-content">
            <h2 className="banner-title">{serverData.name}</h2>
            <p className="banner-description">{serverData.description}</p>
          </div>
        </div>
      </div>

      <div className="server-info-bar">
        <div className="server-stats">
          <div className="stat">
            <span className="stat-icon">👥</span>
            <span className="stat-value">{serverData.memberCount}</span>
            <span className="stat-label">Members</span>
          </div>
          <div className="stat">
            <span className="stat-indicator online"></span>
            <span className="stat-value">{serverData.onlineCount}</span>
            <span className="stat-label">Online</span>
          </div>
        </div>

        <div className="boost-status">
          <span className="boost-icon">🚀</span>
          <span className="boost-level">Level {serverData.boostLevel}</span>
          <span className="boost-count">{serverData.boostCount} Boosts</span>
        </div>
      </div>

      {serverData.boostLevel > 0 && (
        <div className="boost-perks">
          <div className="perks-header">
            <span className="perks-icon">✨</span>
            <span>Server Boost Perks</span>
          </div>
          <div className="perks-list">
            {boostFeatures.slice(0, serverData.boostLevel).map((tier) => (
              tier.features.map((feature, idx) => (
                <div key={`${tier.level}-${idx}`} className="perk-item">
                  <span className="perk-check">✓</span>
                  <span className="perk-name">{feature}</span>
                </div>
              ))
            ))}
          </div>
        </div>
      )}

      {serverData.vanityUrl && (
        <div className="vanity-url">
          <span className="vanity-label">Vanity URL</span>
          <span className="vanity-link">aethex.gg/{serverData.vanityUrl}</span>
        </div>
      )}
    </div>
  );
}

// Progress bar for boost goals
export function BoostProgress({ currentBoosts, currentLevel }) {
  const levels = [
    { level: 1, required: 2 },
    { level: 2, required: 7 },
    { level: 3, required: 14 },
  ];

  const nextLevel = levels.find((l) => l.level > currentLevel);
  const prevLevel = levels.find((l) => l.level === currentLevel) || { required: 0 };

  if (!nextLevel) {
    return (
      <div className="boost-progress max-level">
        <span className="boost-label">Maximum Level Reached!</span>
        <div className="boost-bar">
          <div className="boost-fill" style={{ width: '100%' }}></div>
        </div>
        <span className="boost-count">{currentBoosts} Boosts</span>
      </div>
    );
  }

  const progress = ((currentBoosts - prevLevel.required) / (nextLevel.required - prevLevel.required)) * 100;

  return (
    <div className="boost-progress">
      <div className="boost-header">
        <span className="current-level">Level {currentLevel}</span>
        <span className="next-level">Level {nextLevel.level}</span>
      </div>
      <div className="boost-bar">
        <div className="boost-fill" style={{ width: `${Math.min(progress, 100)}%` }}></div>
      </div>
      <span className="boost-count">
        {currentBoosts} / {nextLevel.required} Boosts
      </span>
    </div>
  );
}
