"use client";

import { Hourglass, Landmark, TimerReset } from "lucide-react";
import { useTranslation } from "react-i18next";

import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import {
  drawStatusHud,
  isHallAwaitingDrawProcessing,
  isHallBlockedForBetting,
  isHallSealedCountdownUi,
} from "@/features/draw/draw-status-meta";
import type { HallDrawLiveSnapshot } from "@/features/hall/use-hall-draw-live";
import { formatSecondsClock } from "@/lib/format-gmt";
import { formatPlayerInstant } from "@/lib/player-datetime";
import { cn } from "@/lib/utils";
import type { DrawCurrentPayload } from "@/types/api/draw-current";

function ScheduleAnchorTime({ payload }: { payload: DrawCurrentPayload }) {
  const { t } = useTranslation("player");
  const isPending = payload.status === "pending";
  const isOpen = payload.status === "open";
  const source = isPending
    ? payload.start_time ?? payload.close_time ?? payload.draw_time
    : payload.close_time ?? payload.draw_time ?? payload.start_time;
  const labelKey = isPending
    ? "draw.scheduledStart"
    : isOpen
      ? "draw.scheduledEnd"
      : "draw.scheduledClose";
  const formatted = source ? formatPlayerInstant(source) : null;
  if (!formatted) {
    return (
      <>
        <span className="text-lg font-black tabular-nums text-[#0b3f96]">--:--:--</span>
        <span className="mt-1 text-[11px] text-slate-500">{t(labelKey)}</span>
      </>
    );
  }

  const parts = formatted.split(" ");
  const date = parts.slice(0, -1).join(" ");
  const time = parts.at(-1);

  return (
    <>
      <span className="text-lg font-black tabular-nums text-[#0b3f96]">{time}</span>
      <span className="mt-1 text-[11px] text-slate-500">{date}</span>
      <span className="mt-0.5 text-[11px] text-slate-400">{t(labelKey)}</span>
    </>
  );
}

function CloseTime({
  nowMs,
  hud,
  payload,
}: {
  nowMs: number;
  hud: ReturnType<typeof drawStatusHud>;
  payload: DrawCurrentPayload;
}) {
  const { t } = useTranslation("player");
  const sealedCountdown = isHallSealedCountdownUi(payload.status);
  const awaitingDraw = isHallAwaitingDrawProcessing(
    payload.status,
    payload.draw_time,
    payload.seconds_to_draw,
    nowMs,
  );

  let seconds = 0;
  let label = t("draw.closesIn");
  let showClock = true;

  if (awaitingDraw) {
    label = t("draw.drawProcessing");
    showClock = false;
  } else if (hud.countdownKind === "none") {
    label = t(hud.labelKey, { defaultValue: hud.labelKey });
    showClock = false;
  } else if (hud.countdownKind === "start") {
    seconds =
      payload.seconds_to_start != null
        ? Math.max(0, payload.seconds_to_start)
        : Math.max(
            0,
            Math.ceil(((payload.start_time ? Date.parse(payload.start_time) : 0) - nowMs) / 1000),
          );
    label = t("draw.startsIn");
  } else if (hud.countdownKind === "close") {
    seconds =
      payload.seconds_to_close != null
        ? Math.max(0, payload.seconds_to_close)
        : Math.max(
            0,
            Math.ceil(((payload.close_time ? Date.parse(payload.close_time) : 0) - nowMs) / 1000),
          );
  } else if (hud.countdownKind === "draw") {
    seconds =
      payload.seconds_to_draw != null
        ? Math.max(0, payload.seconds_to_draw)
        : Math.max(
            0,
            Math.ceil(((payload.draw_time ? Date.parse(payload.draw_time) : 0) - nowMs) / 1000),
          );
    label = sealedCountdown ? t("draw.drawsIn") : t("draw.closesIn");
  } else if (hud.countdownKind === "cooldown") {
    seconds =
      payload.seconds_remaining_in_cooldown != null
        ? Math.max(0, payload.seconds_remaining_in_cooldown)
        : Math.max(
            0,
            Math.ceil(
              ((payload.cooling_end_time ? Date.parse(payload.cooling_end_time) : 0) - nowMs) / 1000,
            ),
          );
    label = t("draw.coolDown");
  }

  return (
    <>
      <span className="text-lg font-black tabular-nums text-[#ff143d]">
        {showClock ? formatSecondsClock(seconds) : "--:--"}
      </span>
      <span className="mt-1 text-[11px] text-slate-500">{label}</span>
    </>
  );
}

export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot }) {
  const { raw, display, error, reload } = drawLive;
  const { t } = useTranslation("player");

  if (error) {
    return (
      <section className="mb-3 rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
        <p>{t(error, { defaultValue: error })}</p>
        <Button
          type="button"
          variant="outline"
          size="sm"
          className="mt-2 border-red-200 bg-white text-red-700"
          onClick={() => void reload()}
        >
          {t("actions.retry")}
        </Button>
      </section>
    );
  }

  if (raw === undefined || display === undefined) {
    return (
      <section className="mb-3 rounded-xl border border-[#e3ebf6] bg-white p-3 shadow-sm">
        <div className="grid grid-cols-3 gap-2">
          <Skeleton className="h-14 rounded-lg" />
          <Skeleton className="h-14 rounded-lg" />
          <Skeleton className="h-14 rounded-lg" />
        </div>
      </section>
    );
  }

  if (raw === null || display === null) {
    return (
      <section className="mb-3 rounded-xl border border-[#e3ebf6] bg-white px-3 py-3 text-center text-sm text-slate-500 shadow-sm">
        {t("draw.noIssue")}
      </section>
    );
  }

  const hud = drawStatusHud(display.status);
  const sealedUi = isHallSealedCountdownUi(display.status);
  const blockedUi = isHallBlockedForBetting(display.status);
  return (
    <section
      className={cn(
        "mb-3 overflow-hidden rounded-xl border border-[#e1e9f5] bg-white shadow-[0_6px_20px_rgba(15,23,42,0.06)]",
        sealedUi && "border-red-200 bg-red-50/30",
      )}
      aria-label={t("draw.currentIssue")}
    >
      <div className="grid grid-cols-[1fr_1.05fr_1fr] divide-x divide-[#e7edf6]">
        <div className="flex min-w-0 flex-col items-center justify-center px-2 py-3 text-center">
          <div className="min-w-0 max-w-full overflow-x-auto">
            <p className="text-[11px] font-semibold text-slate-500">{t("draw.issueNo")}</p>
            <p className="whitespace-nowrap text-xs font-black tabular-nums text-[#ff143d] sm:text-sm">
              {display.draw_no}
            </p>
          </div>
        </div>
        <div className="flex min-w-0 flex-col items-center justify-center px-2 py-3 text-center">
          <ScheduleAnchorTime payload={display} />
        </div>
        <div className="relative flex min-w-0 flex-col items-center justify-center px-2 py-3 text-center">
          <CloseTime
            key={`${display.draw_no}-${display.status}-${display.seconds_to_draw ?? ""}-${display.seconds_remaining_in_cooldown ?? ""}`}
            nowMs={drawLive.nowMs}
            hud={hud}
            payload={display}
          />
          <Hourglass
            className={cn(
              "absolute right-0.5 top-1/2 size-4 -translate-y-1/2 opacity-80",
              sealedUi ? "text-[#ff143d]" : "text-red-300",
            )}
            aria-hidden
          />
        </div>
      </div>
      {blockedUi ? (
        <div className="flex items-center gap-2 border-t border-red-100 bg-red-50 px-3 py-2 text-xs font-medium text-red-600">
          <TimerReset className="size-4 shrink-0" aria-hidden />
          {display.status === "review"
            ? t("draw.reviewNotice")
            : sealedUi
              ? t("draw.sealedNotice")
              : t("draw.notBettableNotice")}
        </div>
      ) : (
        <div className="flex items-center justify-between border-t border-[#eef3f9] bg-[#fbfdff] px-3 py-1.5 text-[11px] text-slate-500">
          <span className="inline-flex items-center gap-1.5">
            <span className={cn("size-2 rounded-full", hud.dotClass)} />
            {t(hud.labelKey, { defaultValue: hud.labelKey })}
          </span>
          <span className="inline-flex items-center gap-1">
            <Landmark className="size-3.5" aria-hidden />
            {t("draw.hall")}
          </span>
        </div>
      )}
    </section>
  );
}
