'use client';

import Card from '@/components/ui/Card';

// Mock data for highlights
const MOCK_HIGHLIGHTS = [
  {
    id: '1',
    type: 'race',
    title: 'Epic finish in GT3 Championship',
    description: 'Max Verstappen wins by 0.003 seconds',
    time: '2 hours ago',
  },
  {
    id: '2',
    type: 'league',
    title: 'New league created: Endurance Masters',
    description: '12 teams already registered',
    time: '5 hours ago',
  },
  {
    id: '3',
    type: 'achievement',
    title: 'Sarah Chen unlocked "Century Club"',
    description: '100 races completed',
    time: '1 day ago',
  },
];

const TRENDING_DRIVERS = [
  { id: '1', name: 'Max Verstappen', metric: '+156 rating this week' },
  { id: '2', name: 'Emma Thompson', metric: '5 wins in a row' },
  { id: '3', name: 'Lewis Hamilton', metric: 'Most laps led' },
];

const TRENDING_TEAMS = [
  { id: '1', name: 'Apex Racing', metric: '12 new members' },
  { id: '2', name: 'Speed Demons', metric: '3 championship wins' },
  { id: '3', name: 'Endurance Elite', metric: '24h race victory' },
];

export default function SocialPage() {
  return (
    <div className="max-w-6xl mx-auto">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-white mb-2">Social Hub</h1>
        <p className="text-gray-400">
          Stay updated with the racing community
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Activity Feed */}
        <div className="lg:col-span-2">
          <Card>
            <div className="space-y-6">
              <h2 className="text-xl font-semibold text-white">
                Activity Feed
              </h2>
              <div className="bg-primary-blue/10 border border-primary-blue/20 rounded-lg p-8 text-center">
                <div className="text-4xl mb-4">🚧</div>
                <h3 className="text-lg font-semibold text-white mb-2">
                  Coming Soon
                </h3>
                <p className="text-gray-400">
                  The activity feed will show real-time updates from your
                  friends, leagues, and teams. This feature is currently in
                  development for the alpha release.
                </p>
              </div>

              <div>
                <h3 className="text-sm font-semibold text-gray-400 mb-4">
                  Recent Highlights
                </h3>
                <div className="space-y-4">
                  {MOCK_HIGHLIGHTS.map((highlight) => (
                    <div
                      key={highlight.id}
                      className="border-l-4 border-primary-blue pl-4 py-2"
                    >
                      <h4 className="font-semibold text-white">
                        {highlight.title}
                      </h4>
                      <p className="text-sm text-gray-400">
                        {highlight.description}
                      </p>
                      <p className="text-xs text-gray-500 mt-1">
                        {highlight.time}
                      </p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </Card>
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          {/* Trending Drivers */}
          <Card>
            <div className="space-y-4">
              <h2 className="text-lg font-semibold text-white">
                🔥 Trending Drivers
              </h2>
              <div className="space-y-3">
                {TRENDING_DRIVERS.map((driver, index) => (
                  <div key={driver.id} className="flex items-center gap-3">
                    <div className="w-8 h-8 bg-charcoal-outline rounded-full flex items-center justify-center text-sm font-bold text-gray-400">
                      {index + 1}
                    </div>
                    <div className="flex-1">
                      <div className="font-medium text-white">
                        {driver.name}
                      </div>
                      <div className="text-xs text-gray-400">
                        {driver.metric}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </Card>

          {/* Trending Teams */}
          <Card>
            <div className="space-y-4">
              <h2 className="text-lg font-semibold text-white">
                ⭐ Trending Teams
              </h2>
              <div className="space-y-3">
                {TRENDING_TEAMS.map((team, index) => (
                  <div key={team.id} className="flex items-center gap-3">
                    <div className="w-8 h-8 bg-charcoal-outline rounded-lg flex items-center justify-center text-sm font-bold text-gray-400">
                      {index + 1}
                    </div>
                    <div className="flex-1">
                      <div className="font-medium text-white">
                        {team.name}
                      </div>
                      <div className="text-xs text-gray-400">
                        {team.metric}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </Card>

          {/* Friend Activity Placeholder */}
          <Card>
            <div className="space-y-4">
              <h2 className="text-lg font-semibold text-white">
                Friends
              </h2>
              <div className="bg-charcoal-outline rounded-lg p-4 text-center">
                <p className="text-sm text-gray-400">
                  Friend features coming soon in alpha
                </p>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}