'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { getDriverRepository } from '@/lib/di-container';
import { Driver } from '@gridpilot/racing/domain/entities/Driver';
import { EntityMappers, DriverDTO } from '@gridpilot/racing/application/mappers/EntityMappers';
import CreateDriverForm from '@/components/drivers/CreateDriverForm';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import ProfileHeader from '@/components/profile/ProfileHeader';
import ProfileStats from '@/components/drivers/ProfileStats';
import ProfileRaceHistory from '@/components/drivers/ProfileRaceHistory';
import ProfileSettings from '@/components/drivers/ProfileSettings';
import CareerHighlights from '@/components/drivers/CareerHighlights';
import RatingBreakdown from '@/components/drivers/RatingBreakdown';
import { getDriverTeam, getCurrentDriverId } from '@gridpilot/racing/application';

type Tab = 'overview' | 'statistics' | 'history' | 'settings';

export default function ProfilePage() {
  const router = useRouter();
  const [driver, setDriver] = useState<DriverDTO | null>(null);
  const [activeTab, setActiveTab] = useState<Tab>('overview');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadDriver = async () => {
      const driverRepo = getDriverRepository();
      const drivers = await driverRepo.findAll();
      const driverData = EntityMappers.toDriverDTO(drivers[0] || null);
      setDriver(driverData);
      setLoading(false);
    };
    loadDriver();
  }, []);

  const handleSaveSettings = async (updates: Partial<DriverDTO>) => {
    if (!driver) return;
    
    const driverRepo = getDriverRepository();
    const drivers = await driverRepo.findAll();
    const currentDriver = drivers[0];
    
    if (currentDriver) {
      const updatedDriver: Driver = currentDriver.update({
        bio: updates.bio ?? currentDriver.bio,
        country: updates.country ?? currentDriver.country,
      });
      const persistedDriver = await driverRepo.update(updatedDriver);
      
      const updatedDto = EntityMappers.toDriverDTO(persistedDriver);
      setDriver(updatedDto);
    }
  };

  if (loading) {
    return (
      <div className="max-w-6xl mx-auto">
        <div className="text-center text-gray-400">Loading profile...</div>
      </div>
    );
  }

  if (!driver) {
    return (
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-white mb-2">Driver Profile</h1>
          <p className="text-gray-400">
            Create your GridPilot profile to get started
          </p>
        </div>

        <Card className="max-w-2xl mx-auto">
          <div className="mb-6">
            <h2 className="text-xl font-semibold text-white mb-2">Create Your Profile</h2>
            <p className="text-gray-400 text-sm">
              Create your driver profile. Alpha data resets on reload, so test freely.
            </p>
          </div>
          <CreateDriverForm />
        </Card>
      </div>
    );
  }

  const tabs: { id: Tab; label: string }[] = [
    { id: 'overview', label: 'Overview' },
    { id: 'statistics', label: 'Statistics' },
    { id: 'history', label: 'Race History' },
    { id: 'settings', label: 'Settings' }
  ];

  return (
    <div className="max-w-6xl mx-auto">
      <Card className="mb-6">
        <ProfileHeader 
          driver={driver} 
          isOwnProfile 
          onEditClick={() => setActiveTab('settings')}
        />
      </Card>

      <div className="mb-6">
        <div className="flex items-center gap-2 border-b border-charcoal-outline">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`
                px-4 py-3 font-medium transition-all relative
                ${activeTab === tab.id 
                  ? 'text-primary-blue' 
                  : 'text-gray-400 hover:text-white'
                }
              `}
            >
              {tab.label}
              {activeTab === tab.id && (
                <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary-blue" />
              )}
            </button>
          ))}
        </div>
      </div>

      <div>
        {activeTab === 'overview' && (
          <div className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <Card className="lg:col-span-2">
                <h3 className="text-lg font-semibold text-white mb-4">About</h3>
                {driver.bio ? (
                  <p className="text-gray-300 leading-relaxed">{driver.bio}</p>
                ) : (
                  <p className="text-gray-500 italic">No bio yet. Add one in settings!</p>
                )}
              </Card>

              <Card>
                <h3 className="text-lg font-semibold text-white mb-4">Quick Stats</h3>
                <div className="space-y-3">
                  <StatItem label="Rating" value="1450" color="text-primary-blue" />
                  <StatItem label="Safety" value="92%" color="text-green-400" />
                  <StatItem label="Sportsmanship" value="4.8/5" color="text-warning-amber" />
                  <StatItem label="Total Races" value="147" color="text-white" />
                </div>
              </Card>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card>
                <h3 className="text-lg font-semibold text-white mb-4">Preferences</h3>
                <div className="space-y-3">
                  <PreferenceItem icon="🏎️" label="Favorite Car" value="Porsche 911 GT3 R" />
                  <PreferenceItem icon="🏁" label="Favorite Series" value="Endurance" />
                  <PreferenceItem icon="⚔️" label="Competitive Level" value="Competitive" />
                  <PreferenceItem icon="🌍" label="Regions" value="EU, NA" />
                </div>
              </Card>

              <Card>
                <h3 className="text-lg font-semibold text-white mb-4">Team</h3>
                {(() => {
                  const currentDriverId = getCurrentDriverId();
                  const teamData = getDriverTeam(currentDriverId);
                  
                  if (teamData) {
                    const { team, membership } = teamData;
                    return (
                      <div
                        className="flex items-center gap-4 p-4 rounded-lg bg-deep-graphite border border-charcoal-outline hover:border-charcoal-outline/60 transition-colors cursor-pointer"
                        onClick={() => router.push(`/teams/${team.id}`)}
                      >
                        <div className="w-12 h-12 rounded-lg bg-primary-blue/20 flex items-center justify-center text-xl font-bold text-white">
                          {team.tag}
                        </div>
                        <div className="flex-1">
                          <div className="text-white font-medium">{team.name}</div>
                          <div className="text-sm text-gray-400">
                            {membership.role.charAt(0).toUpperCase() + membership.role.slice(1)} • Joined {new Date(membership.joinedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
                          </div>
                        </div>
                      </div>
                    );
                  }
                  
                  return (
                    <div className="text-center py-8">
                      <p className="text-gray-400 mb-4">You're not on a team yet</p>
                      <Button
                        variant="primary"
                        onClick={() => router.push('/teams')}
                      >
                        Browse Teams
                      </Button>
                    </div>
                  );
                })()}
              </Card>
            </div>

            <CareerHighlights />
          </div>
        )}

        {activeTab === 'statistics' && (
          <div className="space-y-6">
            <ProfileStats driverId={driver.id} />
            <RatingBreakdown />
          </div>
        )}

        {activeTab === 'history' && (
          <ProfileRaceHistory />
        )}

        {activeTab === 'settings' && (
          <ProfileSettings driver={driver} onSave={handleSaveSettings} />
        )}
      </div>
    </div>
  );
}

function StatItem({ label, value, color }: { label: string; value: string; color: string }) {
  return (
    <div className="flex items-center justify-between">
      <span className="text-gray-400 text-sm">{label}</span>
      <span className={`font-semibold ${color}`}>{value}</span>
    </div>
  );
}

function PreferenceItem({ icon, label, value }: { icon: string; label: string; value: string }) {
  return (
    <div className="flex items-center gap-3">
      <span className="text-xl">{icon}</span>
      <div className="flex-1">
        <div className="text-xs text-gray-500">{label}</div>
        <div className="text-white text-sm">{value}</div>
      </div>
    </div>
  );
}