'use client';

import DriverIdentity from '@/components/drivers/DriverIdentity';
import JoinLeagueButton from '@/components/leagues/JoinLeagueButton';
import LeagueActivityFeed from '@/components/leagues/LeagueActivityFeed';
import SponsorInsightsCard, {
  MetricBuilders,
  SlotTemplates,
  type SponsorMetric,
} from '@/components/sponsors/SponsorInsightsCard';
import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import { LeagueRoleDisplay } from '@/lib/display-objects/LeagueRoleDisplay';
import type { LeagueDetailPageViewModel, DriverSummary } from '@/lib/view-models/LeagueDetailPageViewModel';
import type { RaceViewModel } from '@/lib/view-models/RaceViewModel';
import { Calendar, ExternalLink, Star, Trophy, Users } from 'lucide-react';
import { ReactNode } from 'react';

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

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

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

interface LeagueInfoCardProps {
  viewModel: LeagueDetailPageViewModel;
}

interface SponsorsSectionProps {
  sponsors: Array<{
    id: string;
    name: string;
    tier: 'main' | 'secondary';
    logoUrl?: string;
    tagline?: string;
    websiteUrl?: string;
  }>;
}

interface ManagementSectionProps {
  ownerSummary?: DriverSummary | null;
  adminSummaries: DriverSummary[];
  stewardSummaries: DriverSummary[];
  leagueId: string;
}

// ============================================================================
// 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({ viewModel }: 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">{viewModel.memberships.length}</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">{viewModel.completedRacesCount}</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">{viewModel.averageSOF ?? '—'}</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">Solo • {viewModel.settings.maxDrivers ?? 32} max</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">{viewModel.scoringConfig?.scoringPresetName ?? 'Standard'}</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(viewModel.createdAt).toLocaleDateString('en-US', {
              month: 'short',
              year: 'numeric'
            })}
          </span>
        </div>
      </div>

      {viewModel.socialLinks && (
        <div className="mt-4 pt-4 border-t border-charcoal-outline">
          <div className="flex flex-wrap gap-2">
            {viewModel.socialLinks.discordUrl && (
              <a
                href={viewModel.socialLinks.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>
            )}
            {viewModel.socialLinks.youtubeUrl && (
              <a
                href={viewModel.socialLinks.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>
            )}
            {viewModel.socialLinks.websiteUrl && (
              <a
                href={viewModel.socialLinks.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">
                  <img
                    src={sponsor.logoUrl}
                    alt={sponsor.name}
                    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">
                      <img
                        src={sponsor.logoUrl}
                        alt={sponsor.name}
                        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, leagueId }: 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 && (() => {
          const summary = ownerSummary;
          const roleDisplay = LeagueRoleDisplay.getLeagueRoleDisplay('owner');
          const meta = summary.rating !== null
            ? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
            : null;

          return (
            <div className="flex items-center gap-2">
              <div className="flex-1">
                <DriverIdentity
                  driver={summary.driver}
                  href={`/drivers/${summary.driver.id}?from=league-management&leagueId=${leagueId}`}
                  meta={meta}
                  size="sm"
                />
              </div>
              <span className={`px-2 py-1 text-xs font-medium rounded border ${roleDisplay.badgeClasses}`}>
                {roleDisplay.text}
              </span>
            </div>
          );
        })()}

        {adminSummaries.map((summary) => {
          const roleDisplay = LeagueRoleDisplay.getLeagueRoleDisplay('admin');
          const meta = summary.rating !== null
            ? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
            : null;

          return (
            <div key={summary.driver.id} className="flex items-center gap-2">
              <div className="flex-1">
                <DriverIdentity
                  driver={summary.driver}
                  href={`/drivers/${summary.driver.id}?from=league-management&leagueId=${leagueId}`}
                  meta={meta}
                  size="sm"
                />
              </div>
              <span className={`px-2 py-1 text-xs font-medium rounded border ${roleDisplay.badgeClasses}`}>
                {roleDisplay.text}
              </span>
            </div>
          );
        })}

        {stewardSummaries.map((summary) => {
          const roleDisplay = LeagueRoleDisplay.getLeagueRoleDisplay('steward');
          const meta = summary.rating !== null
            ? `Rating ${summary.rating}${summary.rank ? ` • Rank ${summary.rank}` : ''}`
            : null;

          return (
            <div key={summary.driver.id} className="flex items-center gap-2">
              <div className="flex-1">
                <DriverIdentity
                  driver={summary.driver}
                  href={`/drivers/${summary.driver.id}?from=league-management&leagueId=${leagueId}`}
                  meta={meta}
                  size="sm"
                />
              </div>
              <span className={`px-2 py-1 text-xs font-medium rounded border ${roleDisplay.badgeClasses}`}>
                {roleDisplay.text}
              </span>
            </div>
          );
        })}
      </div>
    </Card>
  );
}

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

export function LeagueDetailTemplate({
  viewModel,
  leagueId,
  isSponsor,
  membership,
  currentDriverId,
  onMembershipChange,
  onEndRaceModalOpen,
  onLiveRaceClick,
  onBackToLeagues,
  children,
}: LeagueDetailTemplateProps) {
  // Build metrics for SponsorInsightsCard
  const leagueMetrics: SponsorMetric[] = [
    MetricBuilders.views(viewModel.sponsorInsights.avgViewsPerRace, 'Avg Views/Race'),
    MetricBuilders.engagement(viewModel.sponsorInsights.engagementRate),
    MetricBuilders.reach(viewModel.sponsorInsights.estimatedReach),
    MetricBuilders.sof(viewModel.averageSOF ?? '—'),
  ];

  return (
    <>
      {/* Sponsor Insights Card - Only shown to sponsors, at top of page */}
      {isSponsor && viewModel && (
        <SponsorInsightsCard
          entityType="league"
          entityId={leagueId}
          entityName={viewModel.name}
          tier={viewModel.sponsorInsights.tier}
          metrics={leagueMetrics}
          slots={SlotTemplates.league(
            viewModel.sponsorInsights.mainSponsorAvailable,
            viewModel.sponsorInsights.secondarySlotsAvailable,
            viewModel.sponsorInsights.mainSponsorPrice,
            viewModel.sponsorInsights.secondaryPrice
          )}
          trustScore={viewModel.sponsorInsights.trustScore}
          discordMembers={viewModel.sponsorInsights.discordMembers}
          monthlyActivity={viewModel.sponsorInsights.monthlyActivity}
          additionalStats={{
            label: 'League Stats',
            items: [
              { label: 'Total Races', value: viewModel.completedRacesCount },
              { label: 'Active Members', value: viewModel.memberships.length },
              { label: 'Total Impressions', value: viewModel.sponsorInsights.totalImpressions },
            ],
          }}
        />
      )}

      {/* Live Race Card - Prominently show running races */}
      {viewModel && viewModel.runningRaces.length > 0 && (
        <LiveRaceCard
          races={viewModel.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 viewModel={viewModel} />

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

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

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