Yaltopia-FIFA/components/manager/manager-competitions-table.tsx

"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { api } from "@/lib/api/client";
import { GlassCard } from "@/components/ui/glass-card";
import { PageHeader } from "@/components/dashboard/page-header";
import { TeamIcon } from "@/components/teams/TeamIcon";

type Row = {
  competition_id: string;
  competition_name: string;
  league_id: string;
  league_name: string;
  team_name: string;
  team_nickname: string | null;
  team_icon: string | null;
  points: number;
  goals_for: number;
  goals_against: number;
  goal_difference: number;
  played: number;
};

export function ManagerCompetitionsTable({
  title,
  description,
  mode,
}: {
  title: string;
  description: string;
  mode: "league" | "cup";
}) {
  const [rows, setRows] = useState<Row[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    api.manager
      .competitions(mode)
      .then((data) => setRows(data as Row[]))
      .catch((e) => setError(e.message))
      .finally(() => setLoading(false));
  }, [mode]);

  return (
    <div className="space-y-6">
      <PageHeader title={title} description={description} />

      {error && <p className="text-sm text-red-400">{error}</p>}

      <GlassCard title="Your competitions">
        {loading ? (
          <p className="text-sm text-[var(--color-muted)]">Loading…</p>
        ) : rows.length === 0 ? (
          <p className="text-sm text-[var(--color-muted)]">
            You are not assigned as manager to any {mode === "league" ? "league" : "cup"}{" "}
            yet. Ask your league master to link your account to a team.
          </p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-white/10 text-left text-[var(--color-muted)]">
                  <th className="pb-3 pr-4">Competition</th>
                  <th className="pb-3 pr-4">Team</th>
                  <th className="pb-3 pr-4 text-center">P</th>
                  <th className="pb-3 pr-4 text-center">Pts</th>
                  <th className="pb-3 pr-4 text-center">GS</th>
                  <th className="pb-3 pr-4 text-center">GA</th>
                  <th className="pb-3 pr-4 text-center">GD</th>
                  <th className="pb-3"> </th>
                </tr>
              </thead>
              <tbody>
                {rows.map((r) => (
                  <tr key={`${r.competition_id}-${r.team_name}`} className="border-b border-white/5">
                    <td className="py-3 pr-4">
                      <p className="font-medium">{r.competition_name}</p>
                      <p className="text-xs text-[var(--color-muted)]">{r.league_name}</p>
                    </td>
                    <td className="py-3 pr-4">
                      <div className="flex items-center gap-2">
                        <TeamIcon icon={r.team_icon} className="h-4 w-4 text-cyan-400" />
                        <span>{r.team_name}</span>
                        {r.team_nickname && (
                          <span className="text-xs text-[var(--color-muted)]">
                            ({r.team_nickname})
                          </span>
                        )}
                      </div>
                    </td>
                    <td className="py-3 pr-4 text-center">{r.played}</td>
                    <td className="py-3 pr-4 text-center font-semibold text-cyan-400">
                      {r.points}
                    </td>
                    <td className="py-3 pr-4 text-center">{r.goals_for}</td>
                    <td className="py-3 pr-4 text-center">{r.goals_against}</td>
                    <td className="py-3 pr-4 text-center">{r.goal_difference}</td>
                    <td className="py-3">
                      <Link
                        href={`/leagues/${r.league_id}/competitions/${r.competition_id}/my-team`}
                        className="text-cyan-400 hover:underline"
                      >
                        Open
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </GlassCard>
    </div>
  );
}