import React from 'react';

export default function ActivityStatus({ activity, size = 'normal' }) {
  if (!activity) return null;

  const activityTypes = {
    playing: { icon: '🎮', label: 'Playing' },
    streaming: { icon: '📺', label: 'Streaming' },
    listening: { icon: '🎧', label: 'Listening to' },
    watching: { icon: '📺', label: 'Watching' },
    competing: { icon: '🏆', label: 'Competing in' },
    custom: { icon: null, label: null },
    developing: { icon: '💻', label: 'Developing' },
    building: { icon: '🔨', label: 'Building' },
  };

  const typeInfo = activityTypes[activity.type] || activityTypes.custom;

  if (size === 'small') {
    return (
      <div className="activity-status-small">
        {typeInfo.icon && <span className="activity-icon-small">{typeInfo.icon}</span>}
        <span className="activity-text-small">
          {typeInfo.label ? `${typeInfo.label} ${activity.name}` : activity.name}
        </span>
      </div>
    );
  }

  if (size === 'mini') {
    return (
      <span className="activity-status-mini">
        {activity.name}
      </span>
    );
  }

  return (
    <div className="activity-status">
      <div className="activity-header">
        {typeInfo.icon && <span className="activity-type-icon">{typeInfo.icon}</span>}
        <span className="activity-type-label">{typeInfo.label || 'Activity'}</span>
      </div>
      
      <div className="activity-content">
        {activity.largeImage && (
          <div className="activity-image">
            <img src={activity.largeImage} alt="" />
            {activity.smallImage && (
              <img src={activity.smallImage} alt="" className="activity-image-small" />
            )}
          </div>
        )}
        
        <div className="activity-details">
          <div className="activity-name">{activity.name}</div>
          {activity.details && <div className="activity-detail">{activity.details}</div>}
          {activity.state && <div className="activity-state">{activity.state}</div>}
          {activity.startTime && (
            <div className="activity-time">
              <ActivityTimer startTime={activity.startTime} />
            </div>
          )}
        </div>
      </div>

      {activity.buttons && activity.buttons.length > 0 && (
        <div className="activity-buttons">
          {activity.buttons.map((btn, idx) => (
            <button key={idx} className="activity-btn">
              {btn.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function ActivityTimer({ startTime }) {
  const [elapsed, setElapsed] = React.useState('');

  React.useEffect(() => {
    const updateElapsed = () => {
      const now = Date.now();
      const diff = now - startTime;
      const hours = Math.floor(diff / 3600000);
      const minutes = Math.floor((diff % 3600000) / 60000);
      const seconds = Math.floor((diff % 60000) / 1000);
      
      if (hours > 0) {
        setElapsed(`${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')} elapsed`);
      } else {
        setElapsed(`${minutes}:${seconds.toString().padStart(2, '0')} elapsed`);
      }
    };

    updateElapsed();
    const interval = setInterval(updateElapsed, 1000);
    return () => clearInterval(interval);
  }, [startTime]);

  return <span>{elapsed}</span>;
}

// Rich Presence card for games
export function RichPresence({ game }) {
  if (!game) return null;

  return (
    <div className="rich-presence">
      <div className="rp-header">
        <span className="rp-icon">🎮</span>
        <span className="rp-label">Playing a game</span>
      </div>
      
      <div className="rp-content">
        <div className="rp-image">
          {game.icon ? (
            <img src={game.icon} alt={game.name} />
          ) : (
            <span className="rp-placeholder">🎮</span>
          )}
        </div>
        
        <div className="rp-info">
          <div className="rp-name">{game.name}</div>
          {game.details && <div className="rp-details">{game.details}</div>}
          {game.state && <div className="rp-state">{game.state}</div>}
          <div className="rp-elapsed">
            <ActivityTimer startTime={game.startTime || Date.now() - 3600000} />
          </div>
        </div>
      </div>
    </div>
  );
}

// Spotify-style listening activity
export function SpotifyActivity({ track }) {
  if (!track) return null;

  return (
    <div className="spotify-activity">
      <div className="spotify-header">
        <span className="spotify-icon">🎧</span>
        <span className="spotify-label">Listening to Spotify</span>
      </div>
      
      <div className="spotify-content">
        <div className="spotify-album">
          {track.albumArt ? (
            <img src={track.albumArt} alt={track.album} />
          ) : (
            <span className="spotify-placeholder">🎵</span>
          )}
        </div>
        
        <div className="spotify-info">
          <div className="spotify-song">{track.name}</div>
          <div className="spotify-artist">by {track.artist}</div>
          <div className="spotify-album-name">on {track.album}</div>
        </div>
      </div>

      <div className="spotify-progress">
        <div className="progress-bar">
          <div 
            className="progress-fill"
            style={{ width: `${(track.elapsed / track.duration) * 100}%` }}
          />
        </div>
        <div className="progress-times">
          <span>{formatTime(track.elapsed)}</span>
          <span>{formatTime(track.duration)}</span>
        </div>
      </div>
    </div>
  );
}

function formatTime(ms) {
  const minutes = Math.floor(ms / 60000);
  const seconds = Math.floor((ms % 60000) / 1000);
  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}
