import type { ProfileLeaguesViewData } from './ProfileLeaguesViewData';

interface ProfileLeaguesTemplateProps {
  viewData: ProfileLeaguesViewData;
}

export function ProfileLeaguesTemplate({ viewData }: ProfileLeaguesTemplateProps) {
  return (
    <div className="max-w-6xl mx-auto space-y-8">
      <div>
        <h1 className="text-3xl font-bold text-white mb-2">Manage leagues</h1>
        <p className="text-gray-400 text-sm">
          View leagues you own and participate in, and jump into league admin tools.
        </p>
      </div>

      {/* Leagues You Own */}
      <div className="bg-charcoal rounded-lg border border-charcoal-outline p-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-semibold text-white">Leagues you own</h2>
          {viewData.ownedLeagues.length > 0 && (
            <span className="text-xs text-gray-400">
              {viewData.ownedLeagues.length} {viewData.ownedLeagues.length === 1 ? 'league' : 'leagues'}
            </span>
          )}
        </div>

        {viewData.ownedLeagues.length === 0 ? (
          <p className="text-sm text-gray-400">
            You don't own any leagues yet in this session.
          </p>
        ) : (
          <div className="space-y-3">
            {viewData.ownedLeagues.map((league) => (
              <div
                key={league.leagueId}
                className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
              >
                <div>
                  <h3 className="text-white font-medium">{league.name}</h3>
                  <p className="text-xs text-gray-400 mt-1 line-clamp-2">
                    {league.description}
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  <a
                    href={`/leagues/${league.leagueId}`}
                    className="text-sm text-gray-300 hover:text-white underline-offset-2 hover:underline"
                  >
                    View
                  </a>
                  <a href={`/leagues/${league.leagueId}?tab=admin`}>
                    <button className="bg-primary hover:bg-primary/90 text-white text-xs px-3 py-1.5 rounded transition-colors">
                      Manage
                    </button>
                  </a>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Leagues You're In */}
      <div className="bg-charcoal rounded-lg border border-charcoal-outline p-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-semibold text-white">Leagues you're in</h2>
          {viewData.memberLeagues.length > 0 && (
            <span className="text-xs text-gray-400">
              {viewData.memberLeagues.length} {viewData.memberLeagues.length === 1 ? 'league' : 'leagues'}
            </span>
          )}
        </div>

        {viewData.memberLeagues.length === 0 ? (
          <p className="text-sm text-gray-400">
            You're not a member of any other leagues yet.
          </p>
        ) : (
          <div className="space-y-3">
            {viewData.memberLeagues.map((league) => (
              <div
                key={league.leagueId}
                className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
              >
                <div>
                  <h3 className="text-white font-medium">{league.name}</h3>
                  <p className="text-xs text-gray-400 mt-1 line-clamp-2">
                    {league.description}
                  </p>
                  <p className="text-xs text-gray-500 mt-1">
                    Your role:{' '}
                    {league.membershipRole.charAt(0).toUpperCase() + league.membershipRole.slice(1)}
                  </p>
                </div>
                <a
                  href={`/leagues/${league.leagueId}`}
                  className="text-sm text-gray-300 hover:text-white underline-offset-2 hover:underline"
                >
                  View league
                </a>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}