vkv/resources/js/components/ContestsTable.tsx

import { useEffect, useState } from "react";
import axios from "axios";
import { useTranslation } from "react-i18next";
import { useLanguageStore } from "@/stores/languageStore";
import { useContestRefreshStore } from "@/stores/contestRefreshStore";
import {
  Table,
  TableHeader,
  TableColumn,
  TableBody,
  TableRow,
  TableCell,
  type Selection,
} from "@heroui/react";

export type Contest = {
  id: number;
  name: string;
  description?: string | null;
  bands?: { id: number; name: string }[];
  categories?: { id: number; name: string }[];
  power_categories?: { id: number; name: string }[];

  evaluator?: string | null;
  email?: string | null;
  email2?: string | null;

  is_mcr: boolean;
  is_sixhr: boolean;
  is_active: boolean;
  is_test: boolean;

  start_time: string | null; // "HH:MM:SS"
  duration: number;          // hodiny
  logs_deadline_days: number;
};

type PaginatedResponse<T> = {
  data: T[];
};

type ContestsTableProps = {
  /** Handler vybraného řádku (klik/označení). */
  onRowSelect?: (contest: Contest) => void;
  /** Handler pro klik na ikonu editace (tužka). */
  onEditContest?: (contest: Contest) => void;

  /** Show/hide the edit (pencil) actions column. Default: true */
  enableEdit?: boolean;

  /** Při kliknutí/označení řádku zavolat onSelectContest. Default: false */
  selectOnRowClick?: boolean;

  /** Filter the list to only active contests (is_active === true). Default: false */
  onlyActive?: boolean;

  /** Show/hide the is_active column. Default: true */
  showActiveColumn?: boolean;

  /** Zahrnout testovací závody. Default: false */
  showTests?: boolean;
};

export default function ContestsTable({
  onRowSelect,
  onEditContest,
  enableEdit = true,
  onlyActive = false,
  showActiveColumn = true,
  selectOnRowClick = false,
  showTests = false,
}: ContestsTableProps) {
  const { t } = useTranslation("common");
  const locale = useLanguageStore((s) => s.locale);
  const refreshKey = useContestRefreshStore((s) => s.refreshKey);

  const [items, setItems] = useState<Contest[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));

  useEffect(() => {
    let active = true;

    (async () => {
      try {
        setLoading(true);
        setError(null);

        const res = await axios.get<PaginatedResponse<Contest> | Contest[]>(
          "/api/contests",
          {
            withCredentials: true,
            headers: { Accept: "application/json" },
            params: {
              lang: locale,
              include_tests: showTests ? 1 : 0,
              only_active: onlyActive ? 1 : 0,
            },
          }
        );

        if (!active) return;

        const data = Array.isArray(res.data)
          ? res.data
          : (res.data as PaginatedResponse<Contest>).data;

        setItems(data);
      } catch {
        if (!active) return;
        setError(t("unable_to_load_contests") ?? "Nepodařilo se načíst seznam závodů.");
      } finally {
        if (active) setLoading(false);
      }
    })();

    return () => { active = false; };
  }, [locale, t, refreshKey, showTests, onlyActive]);

  const handleEdit = onEditContest ?? onRowSelect;
  const handleRowSelect = onRowSelect;

  const canEdit = Boolean(enableEdit && handleEdit);
  const visibleItems = onlyActive ? items.filter((c) => c.is_active) : items;

  if (loading) return <div>{t("contests_loading") ?? "Načítám závody…"}</div>;
  if (error) return <div className="text-sm text-red-600">{error}</div>;
  if (visibleItems.length === 0) {
    return (
      <div>
        {t("contests_empty") ?? "Žádné závody nejsou k dispozici."}
      </div>
    );
  }

  const columns = [
    { key: "name", label: t("contest_name") },
    { key: "description", label: t("contest_description") },
    { key: "bands", label: t("bands") ?? "Pásma" },
    { key: "categories", label: t("categories") ?? "Kategorie" },
    { key: "power_categories", label: t("power_categories") ?? "Výkonové kategorie" },
    ...(showActiveColumn ? [{ key: "is_active", label: t("contest_active") }] : []),
    ...(canEdit ? [{ key: "actions", label: "" }] : []),
  ];

  const handleSelectionChange = (keys: Selection) => {
    setSelectedKeys(keys);
    if (!selectOnRowClick || !handleRowSelect) return;
    if (keys === "all") return;
    const id = Array.from(keys)[0];
    if (!id) return;
    const selected = visibleItems.find((c) => String(c.id) === String(id));
    if (selected) handleRowSelect(selected);
  };

  return (
    <Table
      aria-label="Contests table"
      selectionMode="single"
      selectedKeys={selectedKeys}
      onSelectionChange={handleSelectionChange}
    >
      <TableHeader columns={columns}>
        {(column) => (
          <TableColumn key={column.key} className="text-left">
            {column.label}
          </TableColumn>
        )}
      </TableHeader>
      <TableBody items={visibleItems}>
        {(item) => (
          <TableRow key={item.id}>
            {(columnKey) => {
              switch (columnKey) {
                case "name":
                  return (
                    <TableCell>
                      <span className="font-medium">{item.name}</span>
                    </TableCell>
                  );
                case "description":
                  return (
                    <TableCell>
                      <span className="text-xs text-foreground-500 line-clamp-2">
                        {item.description || "—"}
                      </span>
                    </TableCell>
                  );
                case "bands": {
                  const names = item.bands?.map((b) => b.name).join(", ");
                  return (
                    <TableCell>
                      <span className="text-xs text-foreground-500 line-clamp-2">
                        {names || "—"}
                      </span>
                    </TableCell>
                  );
                }
                case "categories": {
                  const names = item.categories?.map((c) => c.name).join(", ");
                  return (
                    <TableCell>
                      <span className="text-xs text-foreground-500 line-clamp-2">
                        {names || "—"}
                      </span>
                    </TableCell>
                  );
                }
                case "power_categories": {
                  const names = item.power_categories?.map((p) => p.name).join(", ");
                  return (
                    <TableCell>
                      <span className="text-xs text-foreground-500 line-clamp-2">
                        {names || "—"}
                      </span>
                    </TableCell>
                  );
                }
                case "is_active":
                  return (
                    <TableCell>
                      {item.is_active
                        ? t("yes") ?? "Ano"
                        : t("no") ?? "Ne"}
                    </TableCell>
                  );
                case "actions":
                  return (
                    <TableCell>
                      {canEdit && (
                        <button
                          type="button"
                          onClick={() => handleEdit?.(item)}
                          className="inline-flex items-center p-1 rounded hover:bg-default-100 text-default-500 hover:text-default-700"
                          aria-label={t("edit_contest") ?? "Edit contest"}
                        >
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 20 20"
                            fill="currentColor"
                            className="h-4 w-4"
                          >
                            <path d="M13.586 3.586a2 2 0 0 1 2.828 2.828l-8.25 8.25a2 2 0 0 1-.878.518l-3.122.89a.75.75 0 0 1-.926-.926l.89-3.122a2 2 0 0 1 .518-.878l8.25-8.25Z" />
                            <path d="M12.475 4.697 4.75 12.422l-.69 2.422 2.422-.69 7.725-7.725-1.732-1.732Z" />
                          </svg>
                        </button>
                      )}
                    </TableCell>
                  );
                default:
                  return <TableCell />;
              }
            }}
          </TableRow>
        )}
      </TableBody>
    </Table>
  );
}