'use client';

import { Users, Trophy, Target } from 'lucide-react';
import Link from 'next/link';

import TeamLeaderboardPreview from '@/components/teams/TeamLeaderboardPreview';
import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import type { TeamsViewData, TeamSummaryData } from './view-data/TeamsViewData';

interface TeamsTemplateProps extends TeamsViewData {
  searchQuery?: string;
  showCreateForm?: boolean;
  onSearchChange?: (query: string) => void;
  onShowCreateForm?: () => void;
  onHideCreateForm?: () => void;
  onTeamClick?: (teamId: string) => void;
  onCreateSuccess?: (teamId: string) => void;
  onBrowseTeams?: () => void;
  onSkillLevelClick?: (level: string) => void;
}

export function TeamsTemplate({ teams, searchQuery, onSearchChange, onShowCreateForm, onTeamClick }: TeamsTemplateProps) {
  return (
    <main className="min-h-screen bg-deep-graphite py-8">
      <div className="max-w-7xl mx-auto px-6">
        {/* Header */}
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-3xl font-bold text-white mb-2">Teams</h1>
            <p className="text-gray-400">Browse and manage your racing teams</p>
          </div>
          <Link href="/teams/create">
            <Button variant="primary">Create Team</Button>
          </Link>
        </div>

        {/* Teams Grid */}
        {teams.length > 0 ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {teams.map((team: TeamSummaryData) => (
              <Card key={team.teamId} className="hover:border-primary-blue/50 transition-colors">
                <div className="flex items-start justify-between mb-4">
                  <div className="flex items-center gap-3">
                    {team.logoUrl ? (
                      <img 
                        src={team.logoUrl} 
                        alt={team.teamName}
                        className="w-12 h-12 rounded-lg object-cover bg-iron-gray"
                      />
                    ) : (
                      <div className="w-12 h-12 rounded-lg bg-iron-gray flex items-center justify-center">
                        <Users className="w-6 h-6 text-gray-500" />
                      </div>
                    )}
                    <div>
                      <h3 className="font-semibold text-white">{team.teamName}</h3>
                      <p className="text-sm text-gray-400">{team.leagueName}</p>
                    </div>
                  </div>
                </div>
                
                <div className="flex items-center gap-4 text-sm text-gray-400 mb-4">
                  <span className="flex items-center gap-1">
                    <Users className="w-4 h-4" />
                    {team.memberCount} members
                  </span>
                </div>

                <div className="flex gap-2">
                  <Link href={`/teams/${team.teamId}`} className="flex-1">
                    <Button variant="secondary" className="w-full text-sm">
                      View Team
                    </Button>
                  </Link>
                </div>
              </Card>
            ))}
          </div>
        ) : (
          <div className="text-center py-16">
            <Users className="w-16 h-16 text-gray-600 mx-auto mb-4" />
            <h3 className="text-xl font-semibold text-white mb-2">No teams yet</h3>
            <p className="text-gray-400 mb-4">Get started by creating your first racing team</p>
            <Link href="/teams/create">
              <Button variant="primary">Create Team</Button>
            </Link>
          </div>
        )}

        {/* Team Leaderboard Preview */}
        <div className="mt-12">
          <h2 className="text-2xl font-bold text-white mb-6 flex items-center gap-2">
            <Trophy className="w-6 h-6 text-yellow-400" />
            Top Teams
          </h2>
          <TeamLeaderboardPreview topTeams={[]} onTeamClick={() => {}} />
        </div>
      </div>
    </main>
  );
}