'use client';

import { DriverIdentity } from '@/components/drivers/DriverIdentity';
import JoinLeagueButton from '@/components/leagues/JoinLeagueButton';
import LeagueActivityFeed from '@/components/leagues/LeagueActivityFeed';
import SponsorInsightsCard from '@/components/sponsors/SponsorInsightsCard';
import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import type { DriverSummaryData, LeagueDetailViewData, LeagueInfoData, LiveRaceData, SponsorInfo } from '@/lib/view-data/LeagueDetailViewData';
import { Calendar, ExternalLink, Star, Trophy, Users } from 'lucide-react';
import Image from 'next/image';
import { ReactNode } from 'react';

// ============================================================================
// TYPES
// ============================================================================

interface LeagueDetailTemplateProps {
  viewData: LeagueDetailViewData;
  leagueId: string;
  isSponsor: boolean;
  membership: { role: string } | null;
  onMembershipChange: () => void;
  onEndRaceModalOpen: (raceId: string) => void;
  onLiveRaceClick: (raceId: string) => void;
  children?: ReactNode;
}

interface LiveRaceCardProps {
  races: LiveRaceData[];
  membership: { role: string } | null;
  onLiveRaceClick: (raceId: string) => void;
  onEndRaceModalOpen: (raceId: string) => void;
}

interface LeagueInfoCardProps {
  info: LeagueInfoData;
}

interface SponsorsSectionProps {
  sponsors: SponsorInfo[];
}

interface ManagementSectionProps {
  ownerSummary: DriverSummaryData | null;
  adminSummaries: DriverSummaryData[];
  stewardSummaries: DriverSummaryData[];
}

// ============================================================================
// LIVE RACE CARD COMPONENT
// ============================================================================

function LiveRaceCard({ races, membership, onLiveRaceClick, onEndRaceModalOpen }: LiveRaceCardProps) {
  if (races.length === 0) return null;

  return (
    <Card className="border-2 border-performance-green/50 bg-gradient-to-r from-performance-green/10 to-performance-green/5 mb-6">
      <div className="flex items-center gap-3 mb-4">
        <div className="w-3 h-3 bg-performance-green rounded-full animate-pulse"></div>
        <h2 className="text-xl font-bold text-white">🏁 Live Race in Progress</h2>
      </div>

      <div className="space-y-3">
        {races.map((race) => (
          <div
            key={race.id}
            className="p-4 rounded-lg bg-deep-graphite border border-performance-green/30"
          >
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-3">
              <div className="flex items-center gap-3">
                <div className="px-3 py-1 bg-performance-green/20 border border-performance-green/40 rounded-full">
                  <span className="text-sm font-semibold text-performance-green">LIVE</span>
                </div>
                <h3 className="text-lg font-semibold text-white">
                  {race.name}
                </h3>
              </div>
              <div className="flex flex-col sm:flex-row gap-2">
                <Button
                  variant="primary"
                  onClick={() => onLiveRaceClick(race.id)}
                  className="bg-performance-green hover:bg-performance-green/80 text-white"
                >
                  View Live Race
                </Button>
                {membership?.role === 'admin' && (
                  <Button
                    variant="secondary"
                    onClick={() => onEndRaceModalOpen(race.id)}
                    className="border-performance-green/50 text-performance-green hover:bg-performance-green/10"
                  >
                    End Race & Process Results
                  </Button>
                )}
              </div>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm text-gray-400">
              <div className="flex items-center gap-2">
                <Calendar className="w-4 h-4" />
                <span>Started {new Date(race.date).toLocaleDateString()}</span>
              </div>
              {race.registeredCount && (
                <div className="flex items-center gap-2">
                  <Users className="w-4 h-4" />
                  <span>{race.registeredCount} drivers registered</span>
                </div>
              )}
              {race.strengthOfField && (
                <div className="flex items-center gap-2">
                  <Trophy className="w-4 h-4" />
                  <span>SOF: {race.strengthOfField}</span>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </Card>
  );
}

// ============================================================================
// LEAGUE INFO CARD COMPONENT
// ============================================================================

function LeagueInfoCard({ info }: LeagueInfoCardProps) {
  return (
    <Card>
      <h3 className="text-lg font-semibold text-white mb-4">About</h3>
      
      {/* Stats Grid */}
      <div className="grid grid-cols-3 gap-3 mb-4">
        <div className="bg-deep-graphite rounded-lg p-3 text-center border border-charcoal-outline">
          <div className="text-xl font-bold text-white">{info.membersCount}</div>
          <div className="text-xs text-gray-500">Members</div>
        </div>
        <div className="bg-deep-graphite rounded-lg p-3 text-center border border-charcoal-outline">
          <div className="text-xl font-bold text-white">{info.racesCount}</div>
          <div className="text-xs text-gray-500">Races</div>
        </div>
        <div className="bg-deep-graphite rounded-lg p-3 text-center border border-charcoal-outline">
          <div className="text-xl font-bold text-warning-amber">{info.avgSOF ?? '—'}</div>
          <div className="text-xs text-gray-500">Avg SOF</div>
        </div>
      </div>

      {/* Details */}
      <div className="space-y-2 text-sm">
        <div className="flex items-center justify-between py-1.5 border-b border-charcoal-outline/50">
          <span className="text-gray-500">Structure</span>
          <span className="text-white">{info.structure}</span>
        </div>
        <div className="flex items-center justify-between py-1.5 border-b border-charcoal-outline/50">
          <span className="text-gray-500">Scoring</span>
          <span className="text-white">{info.scoring}</span>
        </div>
        <div className="flex items-center justify-between py-1.5">
          <span className="text-gray-500">Created</span>
          <span className="text-white">
            {new Date(info.createdAt).toLocaleDateString('en-US', {
              month: 'short',
              year: 'numeric'
            })}
          </span>
        </div>
      </div>

      {(info.discordUrl || info.youtubeUrl || info.websiteUrl) && (
        <div className="mt-4 pt-4 border-t border-charcoal-outline">
          <div className="flex flex-wrap gap-2">
            {info.discordUrl && (
              <a
                href={info.discordUrl}
                target="_blank"
                rel="noreferrer"
                className="inline-flex items-center gap-1 rounded-full border border-primary-blue/40 bg-primary-blue/10 px-2 py-1 text-xs text-primary-blue hover:bg-primary-blue/20 transition-colors"
              >
                Discord
              </a>
            )}
            {info.youtubeUrl && (
              <a
                href={info.youtubeUrl}
                target="_blank"
                rel="noreferrer"
                className="inline-flex items-center gap-1 rounded-full border border-red-500/40 bg-red-500/10 px-2 py-1 text-xs text-red-400 hover:bg-red-500/20 transition-colors"
              >
                YouTube
              </a>
            )}
            {info.websiteUrl && (
              <a
                href={info.websiteUrl}
                target="_blank"
                rel="noreferrer"
                className="inline-flex items-center gap-1 rounded-full border border-charcoal-outline bg-iron-gray/70 px-2 py-1 text-xs text-gray-100 hover:bg-iron-gray transition-colors"
              >
                Website
              </a>
            )}
          </div>
        </div>
      )}
    </Card>
  );
}

// ============================================================================
// SPONSORS SECTION COMPONENT
// ============================================================================

function SponsorsSection({ sponsors }: SponsorsSectionProps) {
  if (sponsors.length === 0) return null;

  return (
    <Card>
      <h3 className="text-lg font-semibold text-white mb-4">
        {sponsors.find(s => s.tier === 'main') ? 'Presented by' : 'Sponsors'}
      </h3>
      <div className="space-y-3">
        {/* Main Sponsor - Featured prominently */}
        {sponsors.filter(s => s.tier === 'main').map(sponsor => (
          <div
            key={sponsor.id}
            className="p-3 rounded-lg bg-gradient-to-r from-yellow-500/10 to-transparent border border-yellow-500/30"
          >
            <div className="flex items-center gap-3">
              {sponsor.logoUrl ? (
                <div className="w-12 h-12 rounded-lg bg-white flex items-center justify-center overflow-hidden">
                  <Image
                    src={sponsor.logoUrl}
                    alt={sponsor.name}
                    width={40}
                    height={40}
                    className="w-10 h-10 object-contain"
                  />
                </div>
              ) : (
                <div className="w-12 h-12 rounded-lg bg-yellow-500/20 flex items-center justify-center">
                  <Trophy className="w-6 h-6 text-yellow-400" />
                </div>
              )}
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <span className="font-semibold text-white truncate">{sponsor.name}</span>
                  <span className="px-1.5 py-0.5 rounded text-[10px] bg-yellow-500/20 text-yellow-400 border border-yellow-500/30">
                    Main
                  </span>
                </div>
                {sponsor.tagline && (
                  <p className="text-xs text-gray-400 truncate mt-0.5">{sponsor.tagline}</p>
                )}
              </div>
              {sponsor.websiteUrl && (
                <a
                  href={sponsor.websiteUrl}
                  target="_blank"
                  rel="noreferrer"
                  className="p-1.5 rounded-lg bg-iron-gray hover:bg-charcoal-outline transition-colors"
                >
                  <ExternalLink className="w-4 h-4 text-gray-400" />
                </a>
              )}
            </div>
          </div>
        ))}

        {/* Secondary Sponsors - Smaller display */}
        {sponsors.filter(s => s.tier === 'secondary').length > 0 && (
          <div className="grid grid-cols-2 gap-2">
            {sponsors.filter(s => s.tier === 'secondary').map(sponsor => (
              <div
                key={sponsor.id}
                className="p-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline"
              >
                <div className="flex items-center gap-2">
                  {sponsor.logoUrl ? (
                    <div className="w-8 h-8 rounded bg-white flex items-center justify-center overflow-hidden flex-shrink-0">
                      <Image
                        src={sponsor.logoUrl}
                        alt={sponsor.name}
                        width={24}
                        height={24}
                        className="w-6 h-6 object-contain"
                      />
                    </div>
                  ) : (
                    <div className="w-8 h-8 rounded bg-purple-500/20 flex items-center justify-center flex-shrink-0">
                      <Star className="w-4 h-4 text-purple-400" />
                    </div>
                  )}
                  <div className="flex-1 min-w-0">
                    <span className="text-sm text-white truncate block">{sponsor.name}</span>
                  </div>
                  {sponsor.websiteUrl && (
                    <a
                      href={sponsor.websiteUrl}
                      target="_blank"
                      rel="noreferrer"
                      className="p-1 rounded hover:bg-charcoal-outline transition-colors"
                    >
                      <ExternalLink className="w-3 h-3 text-gray-500" />
                    </a>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </Card>
  );
}

// ============================================================================
// MANAGEMENT SECTION COMPONENT
// ============================================================================

function ManagementSection({ ownerSummary, adminSummaries, stewardSummaries }: ManagementSectionProps) {
  if (!ownerSummary && adminSummaries.length === 0 && stewardSummaries.length === 0) return null;

  return (
    <Card>
      <h3 className="text-lg font-semibold text-white mb-4">Management</h3>
      <div className="space-y-2">
        {ownerSummary && (
          <div className="flex items-center gap-2">
            <div className="flex-1">
              <DriverIdentity
                driver={{
                  id: ownerSummary.driverId,
                  name: ownerSummary.driverName,
                  avatarUrl: ownerSummary.avatarUrl,
                }}
                href={ownerSummary.profileUrl}
                meta={ownerSummary.rating !== null
                  ? `Rating ${ownerSummary.rating}${ownerSummary.rank ? ` • Rank ${ownerSummary.rank}` : ''}`
                  : undefined}
                size="sm"
              />
            </div>
            <span className={`px-2 py-1 text-xs font-medium rounded border ${ownerSummary.roleBadgeClasses}`}>
              {ownerSummary.roleBadgeText}
            </span>
          </div>
        )}

        {adminSummaries.map((summary) => (
          <div key={summary.driverId} className="flex items-center gap-2">
            <div className="flex-1">
              <DriverIdentity
                driver={{
                  id: summary.driverId,
                  name: summary.driverName,
                  avatarUrl: summary.avatarUrl,
                }}
                href={summary.profileUrl}
                meta={summary.rating !== null
                  ? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
                  : undefined}
                size="sm"
              />
            </div>
            <span className={`px-2 py-1 text-xs font-medium rounded border ${summary.roleBadgeClasses}`}>
              {summary.roleBadgeText}
            </span>
          </div>
        ))}

        {stewardSummaries.map((summary) => (
          <div key={summary.driverId} className="flex items-center gap-2">
            <div className="flex-1">
              <DriverIdentity
                driver={{
                  id: summary.driverId,
                  name: summary.driverName,
                  avatarUrl: summary.avatarUrl,
                }}
                href={summary.profileUrl}
                meta={summary.rating !== null
                  ? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
                  : undefined}
                size="sm"
              />
            </div>
            <span className={`px-2 py-1 text-xs font-medium rounded border ${summary.roleBadgeClasses}`}>
              {summary.roleBadgeText}
            </span>
          </div>
        ))}
      </div>
    </Card>
  );
}

// ============================================================================
// MAIN TEMPLATE COMPONENT
// ============================================================================

export function LeagueDetailTemplate({
  viewData,
  leagueId,
  isSponsor,
  membership,
  onMembershipChange,
  onEndRaceModalOpen,
  onLiveRaceClick,
  children,
}: LeagueDetailTemplateProps) {
  return (
    <>
      {/* Sponsor Insights Card - Only shown to sponsors, at top of page */}
      {isSponsor && viewData.sponsorInsights && (
        <SponsorInsightsCard
          entityType="league"
          entityId={leagueId}
          entityName={viewData.name}
          tier={viewData.sponsorInsights.tier}
          metrics={viewData.sponsorInsights.metrics}
          slots={viewData.sponsorInsights.slots}
          trustScore={viewData.sponsorInsights.trustScore}
          discordMembers={viewData.sponsorInsights.discordMembers}
          monthlyActivity={viewData.sponsorInsights.monthlyActivity}
          additionalStats={{
            label: 'League Stats',
            items: [
              { label: 'Total Races', value: viewData.info.racesCount },
              { label: 'Active Members', value: viewData.info.membersCount },
              { label: 'Total Impressions', value: viewData.sponsorInsights.totalImpressions },
            ],
          }}
        />
      )}

      {/* Live Race Card - Prominently show running races */}
      {viewData.runningRaces.length > 0 && (
        <LiveRaceCard
          races={viewData.runningRaces}
          membership={membership}
          onLiveRaceClick={onLiveRaceClick}
          onEndRaceModalOpen={onEndRaceModalOpen}
        />
      )}

      {/* Action Card */}
      {!membership && !isSponsor && (
        <Card className="mb-6">
          <div className="flex items-center justify-between">
            <div>
              <h3 className="text-lg font-semibold text-white mb-2">Join This League</h3>
              <p className="text-gray-400 text-sm">Become a member to participate in races and track your progress</p>
            </div>
            <div className="w-48">
              <JoinLeagueButton
                leagueId={leagueId}
                onMembershipChange={onMembershipChange}
              />
            </div>
          </div>
        </Card>
      )}

      {/* League Overview - Activity Center with Info Sidebar */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Center - Activity Feed */}
        <div className="lg:col-span-2 space-y-6">
          <Card>
            <h2 className="text-xl font-semibold text-white mb-6">Recent Activity</h2>
            <LeagueActivityFeed leagueId={leagueId} limit={20} />
          </Card>
        </div>

        {/* Right Sidebar - League Info */}
        <div className="space-y-6">
          {/* League Info - Combined */}
          <LeagueInfoCard info={viewData.info} />

          {/* Sponsors Section - Show sponsor logos */}
          {viewData.sponsors.length > 0 && (
            <SponsorsSection sponsors={viewData.sponsors} />
          )}

          {/* Management */}
          <ManagementSection
            ownerSummary={viewData.ownerSummary}
            adminSummaries={viewData.adminSummaries}
            stewardSummaries={viewData.stewardSummaries}
          />
        </div>
      </div>

      {/* Children (for modals, etc.) */}
      {children}
    </>
  );
}