brackt/app/components/league/DraftInfoCard.tsx

import { format } from "date-fns";
import { ChevronRight, ChessPawn, Hourglass, LayoutGrid } from "lucide-react";
import { Link } from "react-router";
import { formatClockTime } from "~/lib/draft-timer";
import { Button } from "~/components/ui/button";
import { Card, CardContent, CardHeader } from "~/components/ui/card";
import { GradientIcon } from "~/components/ui/GradientIcon";

// ─── Types ────────────────────────────────────────────────────────────────────

export interface DraftInfoCardProps {
  draftRounds: number;
  draftTimerMode: "standard" | "chess_clock";
  /** Per-pick time for standard; initial bank for chess clock (seconds) */
  draftInitialTime: number;
  /** Bonus seconds added after each pick (chess clock only; ignored in standard) */
  draftIncrementTime: number;
  sportsCount: number;
  isDraftOrderSet: boolean;
  /** true when season status is pre_draft or draft */
  isDraftOrPreDraft: boolean;
  draftDateTime?: string | Date | null;
  draftBoardHref: string;
  draftRoomHref: string;
  /** 1-based draft position for the current user; omit or undefined to hide the panel */
  userDraftPosition?: number;
}

// ─── Sub-components ───────────────────────────────────────────────────────────

function InfoPanel({ label, value, sub }: { label: string; value: React.ReactNode; sub?: React.ReactNode }) {
  return (
    <div className="flex flex-col rounded-lg bg-white/[0.04] px-3 py-3 gap-2">
      <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground leading-none">
        {label}
      </span>
      <span className="text-xl font-bold leading-none">{value}</span>
      {sub && <span className="text-xs text-muted-foreground leading-none">{sub}</span>}
    </div>
  );
}

// ─── Card variant (pre_draft / draft) ─────────────────────────────────────────

function DraftInfoCardVariant({
  draftRounds,
  draftTimerMode,
  draftInitialTime,
  draftIncrementTime,
  sportsCount,
  isDraftOrderSet,
  draftDateTime,
  draftRoomHref,
  userDraftPosition,
}: DraftInfoCardProps) {
  const flexSpots = Math.max(0, draftRounds - sportsCount);

  const timerLabel = draftTimerMode === "chess_clock" ? "Chess Clock" : "Standard Timer";
  const timerValue = formatClockTime(draftInitialTime);
  const timerSub = draftTimerMode === "chess_clock"
    ? `+${formatClockTime(draftIncrementTime)} per pick`
    : "per pick";

  const roundsSub = [
    `${sportsCount} sport${sportsCount !== 1 ? "s" : ""}`,
    flexSpots > 0 ? `${flexSpots} flex` : null,
  ].filter(Boolean).join(" + ");

  return (
    <Card>
      <CardHeader className="pb-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <GradientIcon icon={LayoutGrid} className="h-5 w-5 shrink-0" />
            <h2 className="text-xl font-bold leading-none tracking-tight">Draft Info</h2>
          </div>
          {isDraftOrderSet && (
            <Button asChild>
              <Link to={draftRoomHref}>Enter Draft Room</Link>
            </Button>
          )}
        </div>
      </CardHeader>

      <CardContent>
        <div className={`grid gap-2 ${userDraftPosition !== null && userDraftPosition !== undefined ? "grid-cols-2 sm:grid-cols-4" : "grid-cols-2 sm:grid-cols-3"}`}>
          {/* Draft Date */}
          <InfoPanel
            label="Draft Date"
            value={draftDateTime ? format(new Date(draftDateTime), "MMM d, yyyy") : "TBD"}
            sub={draftDateTime ? format(new Date(draftDateTime), "p") : undefined}
          />

          {/* Rounds */}
          <InfoPanel label="Rounds" value={draftRounds} sub={roundsSub} />

          {/* User's Draft Position (only when set) */}
          {userDraftPosition !== null && userDraftPosition !== undefined && (
            <InfoPanel label="Your Pick" value={`#${userDraftPosition}`} sub="round 1 position" />
          )}

          {/* Timer */}
          <InfoPanel
            label={timerLabel}
            value={
              <span className="flex items-center gap-1.5">
                {draftTimerMode === "chess_clock"
                  ? <ChessPawn className="h-4 w-4 shrink-0 text-muted-foreground" />
                  : <Hourglass className="h-4 w-4 shrink-0 text-muted-foreground" />}
                {timerValue}
              </span>
            }
            sub={timerSub}
          />
        </div>
      </CardContent>
    </Card>
  );
}

// ─── Helpers ──────────────────────────────────────────────────────────────────

/** Converts a seconds value to a short human-readable string, e.g. "1 minute", "10 seconds", "2 hours". */
function formatHumanTime(seconds: number): string {
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  const s = seconds % 60;
  const parts: string[] = [];
  if (h > 0) parts.push(`${h} hour${h !== 1 ? "s" : ""}`);
  if (m > 0) parts.push(`${m} minute${m !== 1 ? "s" : ""}`);
  if (s > 0) parts.push(`${s} second${s !== 1 ? "s" : ""}`);
  return parts.join(" ") || "0 seconds";
}

// ─── Bare variant (active / completed) ────────────────────────────────────────

function DraftInfoBareVariant({
  draftRounds,
  draftTimerMode,
  draftInitialTime,
  draftIncrementTime,
  sportsCount,
  draftDateTime,
  draftBoardHref,
}: DraftInfoCardProps) {
  const flexSpots = Math.max(0, draftRounds - sportsCount);

  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <GradientIcon icon={LayoutGrid} className="h-5 w-5 shrink-0" />
          <span className="text-xl font-bold leading-none tracking-tight">Draft</span>
        </div>
        <Link
          to={draftBoardHref}
          className="flex items-center gap-0.5 text-xs font-semibold uppercase tracking-wide text-electric hover:underline"
        >
          View Draft Board
          <ChevronRight className="h-3.5 w-3.5" />
        </Link>
      </div>

      <div className="flex gap-3">
        {/* Mode icon */}
        <div className="flex size-16 shrink-0 items-center justify-center bg-black">
          {draftTimerMode === "chess_clock"
            ? <ChessPawn className="h-6 w-6 text-white" />
            : <Hourglass className="h-6 w-6 text-white" />}
        </div>

        <div className="min-w-0">
          {draftDateTime && (
            <div className="flex items-center gap-2 mb-0.5" suppressHydrationWarning>
              <span className="text-xs font-semibold uppercase tracking-wide text-electric">
                {format(new Date(draftDateTime), "MMM d, yyyy")}
              </span>
              <span className="text-border">|</span>
              <span className="text-xs text-muted-foreground">
                {format(new Date(draftDateTime), "p")}
              </span>
            </div>
          )}

          <div className="text-sm font-bold uppercase tracking-wide leading-tight">
            {draftRounds} rounds ({sportsCount} sport{sportsCount !== 1 ? "s" : ""}
            {flexSpots > 0 && ` + ${flexSpots} flex`})
          </div>

          <div className="text-xs text-muted-foreground mt-0.5">
            {draftTimerMode === "standard"
              ? `Standard — ${formatHumanTime(draftInitialTime)}/pick`
              : `Chess Clock — ${formatHumanTime(draftInitialTime)} + ${formatHumanTime(draftIncrementTime)} increment`}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Public API ───────────────────────────────────────────────────────────────

export function DraftInfoCard(props: DraftInfoCardProps) {
  if (props.isDraftOrPreDraft) {
    return <DraftInfoCardVariant {...props} />;
  }
  return <DraftInfoBareVariant {...props} />;
}