import { useParams, useNavigate, useLocation } from "react-router-dom";
import { useTranslation } from "react-i18next";
import LogDetail from "@/components/LogDetail";

export default function LogDetailPage() {
  const { contestId, roundId, logId } = useParams();
  const { t } = useTranslation("common");
  const navigate = useNavigate();
  const location = useLocation();
  const from = (location.state as { from?: string } | null)?.from;

  return (
    <div className="space-y-4">
      <div className="text-sm text-foreground-500 mb-2 flex gap-2">
        <button
          className="underline"
          onClick={() => {
            if (from) {
              navigate(from);
            } else if (contestId && roundId) {
              navigate(`/contests/${contestId}/rounds/${roundId}?tab=logs`);
            } else {
              navigate(-1);
            }
          }}
        >
          {t("back") ?? "Zpět"}
        </button>
        <span>/</span>
        {t("log") ?? "Log"}
      </div>

      <LogDetail logId={logId ? Number(logId) : null} />
    </div>
  );
}