'use client';

import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Heading from '@/components/ui/Heading';
import Image from 'next/image';
import Link from 'next/link';
import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
import {
  Activity,
  Award,
  BarChart3,
  Calendar,
  ChevronRight,
  Clock,
  Edit3,
  ExternalLink,
  Flag,
  Globe,
  History,
  MessageCircle,
  Percent,
  Settings,
  Shield,
  Star,
  Target,
  TrendingUp,
  Trophy,
  Twitch,
  Twitter,
  User,
  UserPlus,
  Users,
  Youtube,
  Zap,
  Medal,
  Crown,
} from 'lucide-react';
import { useEffect, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import ProfileSettings from '@/components/drivers/ProfileSettings';
import ProfileRaceHistory from '@/components/drivers/ProfileRaceHistory';
import CreateDriverForm from '@/components/drivers/CreateDriverForm';

type ProfileTab = 'overview' | 'history' | 'stats';

interface ProfileTemplateProps {
  viewData: ProfileViewData | null;
  mode: 'profile-exists' | 'needs-profile';
  onSaveSettings: (updates: { bio?: string; country?: string }) => Promise<void>;
}

function getAchievementIcon(icon: NonNullable<ProfileViewData['extendedProfile']>['achievements'][number]['icon']) {
  switch (icon) {
    case 'trophy':
      return Trophy;
    case 'medal':
      return Medal;
    case 'star':
      return Star;
    case 'crown':
      return Crown;
    case 'target':
      return Target;
    case 'zap':
      return Zap;
  }
}

function getSocialIcon(platformLabel: string) {
  switch (platformLabel) {
    case 'twitter':
      return Twitter;
    case 'youtube':
      return Youtube;
    case 'twitch':
      return Twitch;
    case 'discord':
      return MessageCircle;
    default:
      return Globe;
  }
}

export function ProfileTemplate({ viewData, mode, onSaveSettings }: ProfileTemplateProps) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const tabParam = searchParams.get('tab') as ProfileTab | null;

  const [editMode, setEditMode] = useState(false);
  const [activeTab, setActiveTab] = useState<ProfileTab>(tabParam || 'overview');
  const [friendRequestSent, setFriendRequestSent] = useState(false);

  useEffect(() => {
    if (searchParams.get('tab') !== activeTab) {
      const params = new URLSearchParams(searchParams.toString());
      if (activeTab === 'overview') {
        params.delete('tab');
      } else {
        params.set('tab', activeTab);
      }
      const query = params.toString();
      router.replace(`/profile${query ? `?${query}` : ''}`, { scroll: false });
    }
  }, [activeTab, searchParams, router]);

  useEffect(() => {
    const tab = searchParams.get('tab') as ProfileTab | null;
    if (tab && tab !== activeTab) {
      setActiveTab(tab);
    }
  }, [searchParams]);

  if (mode === 'needs-profile') {
    return (
      <div className="max-w-4xl mx-auto px-4">
        <div className="text-center mb-8">
          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
            <User className="w-8 h-8 text-primary-blue" />
          </div>
          <Heading level={1} className="mb-2">Create Your Driver Profile</Heading>
          <p className="text-gray-400">Join the GridPilot community and start your racing journey</p>
        </div>

        <Card className="max-w-2xl mx-auto">
          <div className="mb-6">
            <h2 className="text-xl font-semibold text-white mb-2">Get Started</h2>
            <p className="text-gray-400 text-sm">
              Create your driver profile to join leagues, compete in races, and connect with other drivers.
            </p>
          </div>
          <CreateDriverForm />
        </Card>
      </div>
    );
  }

  if (!viewData) {
    return (
      <div className="max-w-4xl mx-auto px-4">
        <Card className="text-center py-12">
          <User className="w-16 h-16 text-gray-600 mx-auto mb-4" />
          <p className="text-gray-400 mb-2">Unable to load profile</p>
        </Card>
      </div>
    );
  }

  if (editMode) {
    return (
      <div className="max-w-4xl mx-auto px-4 space-y-6">
        <div className="flex items-center justify-between mb-4">
          <Heading level={1}>Edit Profile</Heading>
          <Button variant="secondary" onClick={() => setEditMode(false)}>
            Cancel
          </Button>
        </div>

        {/* ProfileSettings expects a DriverProfileDriverSummaryViewModel; keep existing component usage by passing a minimal compatible shape */}
        <ProfileSettings
          driver={{
            id: viewData.driver.id,
            name: viewData.driver.name,
            country: viewData.driver.countryCode,
            avatarUrl: viewData.driver.avatarUrl,
            iracingId: viewData.driver.iracingId,
            joinedAt: new Date().toISOString(),
            rating: null,
            globalRank: null,
            consistency: null,
            bio: viewData.driver.bio,
            totalDrivers: null,
          }}
          onSave={async (updates) => {
            await onSaveSettings(updates);
            setEditMode(false);
          }}
        />
      </div>
    );
  }

  return (
    <div className="max-w-7xl mx-auto px-4 pb-12 space-y-6">
      {/* Hero */}
      <div className="relative rounded-2xl overflow-hidden bg-gradient-to-br from-iron-gray/80 via-iron-gray/60 to-deep-graphite border border-charcoal-outline">
        <div className="relative p-6 md:p-8">
          <div className="flex flex-col md:flex-row md:items-start gap-6">
            <div className="relative">
              <div className="w-28 h-28 md:w-36 md:h-36 rounded-2xl bg-gradient-to-br from-primary-blue to-purple-600 p-1 shadow-xl shadow-primary-blue/20">
                <div className="w-full h-full rounded-xl overflow-hidden bg-iron-gray">
                  <Image
                    src={viewData.driver.avatarUrl}
                    alt={viewData.driver.name}
                    width={144}
                    height={144}
                    className="w-full h-full object-cover"
                  />
                </div>
              </div>
              <div className="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-performance-green border-4 border-iron-gray" />
            </div>

            <div className="flex-1 min-w-0">
              <div className="flex flex-wrap items-center gap-3 mb-2">
                <h1 className="text-3xl md:text-4xl font-bold text-white">{viewData.driver.name}</h1>
                <span className="text-4xl" aria-label={`Country: ${viewData.driver.countryCode}`}>{viewData.driver.countryFlag}</span>
                {viewData.teamMemberships[0] && (
                  <span className="px-3 py-1 bg-purple-600/20 text-purple-400 rounded-full text-sm font-semibold border border-purple-600/30">
                    [{viewData.teamMemberships[0].teamTag || 'TEAM'}]
                  </span>
                )}
              </div>

              {viewData.stats && (
                <div className="flex flex-wrap items-center gap-4 mb-4">
                  <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-primary-blue/10 border border-primary-blue/30">
                    <Star className="w-4 h-4 text-primary-blue" />
                    <span className="font-mono font-bold text-primary-blue">{viewData.stats.ratingLabel}</span>
                    <span className="text-xs text-gray-400">Rating</span>
                  </div>
                  <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-yellow-400/10 border border-yellow-400/30">
                    <Trophy className="w-4 h-4 text-yellow-400" />
                    <span className="font-mono font-bold text-yellow-400">{viewData.stats.globalRankLabel}</span>
                    <span className="text-xs text-gray-400">Global</span>
                  </div>
                </div>
              )}

              <div className="flex flex-wrap items-center gap-4 text-sm text-gray-400">
                <span className="flex items-center gap-1.5">
                  <Globe className="w-4 h-4" />
                  iRacing: {viewData.driver.iracingId ?? '—'}
                </span>
                <span className="flex items-center gap-1.5">
                  <Calendar className="w-4 h-4" />
                  Joined {viewData.driver.joinedAtLabel}
                </span>
                {viewData.extendedProfile && (
                  <span className="flex items-center gap-1.5">
                    <Clock className="w-4 h-4" />
                    {viewData.extendedProfile.timezone}
                  </span>
                )}
              </div>
            </div>

            <div className="flex flex-col gap-2">
              <Button variant="primary" onClick={() => setEditMode(true)} className="flex items-center gap-2">
                <Edit3 className="w-4 h-4" />
                Edit Profile
              </Button>
              <Button
                variant="secondary"
                onClick={() => setFriendRequestSent(true)}
                disabled={friendRequestSent}
                className="w-full flex items-center gap-2"
              >
                <UserPlus className="w-4 h-4" />
                {friendRequestSent ? 'Request Sent' : 'Add Friend'}
              </Button>
              <Link href=routes.protected.profileLeagues>
                <Button variant="secondary" className="w-full flex items-center gap-2">
                  <Flag className="w-4 h-4" />
                  My Leagues
                </Button>
              </Link>
            </div>
          </div>

          {viewData.extendedProfile && viewData.extendedProfile.socialHandles.length > 0 && (
            <div className="mt-6 pt-6 border-t border-charcoal-outline/50">
              <div className="flex flex-wrap items-center gap-2">
                <span className="text-sm text-gray-500 mr-2">Connect:</span>
                {viewData.extendedProfile.socialHandles.map((social) => {
                  const Icon = getSocialIcon(social.platformLabel);
                  return (
                    <a
                      key={`${social.platformLabel}-${social.handle}`}
                      href={social.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-iron-gray/50 border border-charcoal-outline text-gray-400 transition-all hover:text-white"
                    >
                      <Icon className="w-4 h-4" />
                      <span className="text-sm">{social.handle}</span>
                      <ExternalLink className="w-3 h-3 opacity-50" />
                    </a>
                  );
                })}
              </div>
            </div>
          )}
        </div>
      </div>

      {viewData.driver.bio && (
        <Card>
          <h2 className="text-lg font-semibold text-white mb-3 flex items-center gap-2">
            <User className="w-5 h-5 text-primary-blue" />
            About
          </h2>
          <p className="text-gray-300 leading-relaxed">{viewData.driver.bio}</p>
        </Card>
      )}

      {viewData.teamMemberships.length > 0 && (
        <Card>
          <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
            <Shield className="w-5 h-5 text-purple-400" />
            Team Memberships
            <span className="text-sm text-gray-500 font-normal">({viewData.teamMemberships.length})</span>
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {viewData.teamMemberships.map((membership) => (
              <Link
                key={membership.teamId}
                href={membership.href}
                className="flex items-center gap-4 p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline hover:border-purple-400/30 hover:bg-iron-gray/50 transition-all group"
              >
                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-600/20 border border-purple-600/30">
                  <Users className="w-6 h-6 text-purple-400" />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-white font-semibold truncate group-hover:text-purple-400 transition-colors">{membership.teamName}</p>
                  <div className="flex items-center gap-2 text-xs text-gray-400">
                    <span className="px-2 py-0.5 rounded-full bg-purple-600/20 text-purple-400 capitalize">{membership.roleLabel}</span>
                    <span>Since {membership.joinedAtLabel}</span>
                  </div>
                </div>
                <ChevronRight className="w-4 h-4 text-gray-500 group-hover:text-purple-400 transition-colors" />
              </Link>
            ))}
          </div>
        </Card>
      )}

      {/* Tabs */}
      <div className="flex items-center gap-1 p-1.5 rounded-xl bg-iron-gray/50 border border-charcoal-outline w-fit relative z-10">
        <button
          type="button"
          onClick={() => setActiveTab('overview')}
          className={`flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium transition-all cursor-pointer select-none ${
            activeTab === 'overview'
              ? 'bg-primary-blue text-white shadow-lg shadow-primary-blue/25'
              : 'text-gray-400 hover:text-white hover:bg-iron-gray/80'
          }`}
        >
          <User className="w-4 h-4" />
          Overview
        </button>
        <button
          type="button"
          onClick={() => setActiveTab('history')}
          className={`flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium transition-all cursor-pointer select-none ${
            activeTab === 'history'
              ? 'bg-primary-blue text-white shadow-lg shadow-primary-blue/25'
              : 'text-gray-400 hover:text-white hover:bg-iron-gray/80'
          }`}
        >
          <History className="w-4 h-4" />
          Race History
        </button>
        <button
          type="button"
          onClick={() => setActiveTab('stats')}
          className={`flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium transition-all cursor-pointer select-none ${
            activeTab === 'stats'
              ? 'bg-primary-blue text-white shadow-lg shadow-primary-blue/25'
              : 'text-gray-400 hover:text-white hover:bg-iron-gray/80'
          }`}
        >
          <BarChart3 className="w-4 h-4" />
          Detailed Stats
        </button>
      </div>

      {activeTab === 'history' && (
        <Card>
          <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
            <History className="w-5 h-5 text-red-400" />
            Race History
          </h2>
          <ProfileRaceHistory driverId={viewData.driver.id} />
        </Card>
      )}

      {activeTab === 'stats' && viewData.stats && (
        <div className="space-y-6">
          <Card>
            <h2 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
              <Activity className="w-5 h-5 text-neon-aqua" />
              Performance Overview
            </h2>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline text-center">
                <div className="text-3xl font-bold text-white mb-1">{viewData.stats.totalRacesLabel}</div>
                <div className="text-xs text-gray-500 uppercase tracking-wider">Races</div>
              </div>
              <div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline text-center">
                <div className="text-3xl font-bold text-performance-green mb-1">{viewData.stats.winsLabel}</div>
                <div className="text-xs text-gray-500 uppercase tracking-wider">Wins</div>
              </div>
              <div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline text-center">
                <div className="text-3xl font-bold text-warning-amber mb-1">{viewData.stats.podiumsLabel}</div>
                <div className="text-xs text-gray-500 uppercase tracking-wider">Podiums</div>
              </div>
              <div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline text-center">
                <div className="text-3xl font-bold text-primary-blue mb-1">{viewData.stats.consistencyLabel}</div>
                <div className="text-xs text-gray-500 uppercase tracking-wider">Consistency</div>
              </div>
            </div>
          </Card>
        </div>
      )}

      {activeTab === 'overview' && viewData.extendedProfile && (
        <Card>
          <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
            <Award className="w-5 h-5 text-yellow-400" />
            Achievements
            <span className="ml-auto text-sm text-gray-500">{viewData.extendedProfile.achievements.length} earned</span>
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {viewData.extendedProfile.achievements.map((achievement) => {
              const Icon = getAchievementIcon(achievement.icon);
              return (
                <div key={achievement.id} className="p-4 rounded-xl border border-charcoal-outline bg-iron-gray/30">
                  <div className="flex items-start gap-3">
                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-iron-gray/50 border border-charcoal-outline">
                      <Icon className="w-5 h-5 text-yellow-400" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-white font-semibold text-sm">{achievement.title}</p>
                      <p className="text-gray-400 text-xs mt-0.5">{achievement.description}</p>
                      <p className="text-gray-500 text-xs mt-1">{achievement.earnedAtLabel}</p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
      )}
    </div>
  );
}