"use client";

import Link from "next/link";
import { useTranslation } from "react-i18next";

import { AdminLoadingInline } from "@/components/admin/admin-loading-state";
import { drawStatusLabel, hallPreviewDiffersFromDbStatus } from "@/modules/draws/draw-display";
import { useDrawDetail } from "@/modules/draws/draw-detail-context";
import { DrawStatusBadge } from "@/modules/draws/draw-status-badge";

export function DrawDetailHeader(): React.ReactElement {
  const { t } = useTranslation("draws");
  const { draw, loading, error } = useDrawDetail();

  if (error) {
    return <p className="mb-4 text-sm text-destructive">{error}</p>;
  }

  if (loading && !draw) {
    return <AdminLoadingInline className="mb-4 py-2" />;
  }

  if (!draw) {
    return <div className="mb-4" />;
  }

  return (
    <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
      <div className="flex min-w-0 flex-wrap items-center gap-3">
        <Link
          href="/admin/draws"
          className="shrink-0 text-sm text-muted-foreground hover:text-foreground hover:underline"
        >
          ← {t("backToList")}
        </Link>
        <h1 className="font-mono text-lg font-semibold tracking-tight">{draw.draw_no}</h1>
        <div className="flex flex-wrap items-center gap-2">
          <DrawStatusBadge status={draw.status} label={drawStatusLabel(draw.status, t)} />
          {hallPreviewDiffersFromDbStatus(draw.status, draw.hall_preview_status) ? (
            <DrawStatusBadge
              status={draw.hall_preview_status}
              label={drawStatusLabel(draw.hall_preview_status, t)}
            />
          ) : null}
        </div>
      </div>
      <p className="text-sm text-muted-foreground">
        {t("detailSubtitle", { date: draw.business_date, seq: draw.sequence_no })}
      </p>
    </div>
  );
}