import { useEffect, useState } from "react";
import { Link } from "@tanstack/react-router";
import { Gavel } from "lucide-react";
import { Button } from "@/components/ui/button";
import { getStadiumAuction, type AuctionLot, type AuctionMine } from "@/lib/server/api-stadium";
import { useRoleStore } from "@/lib/role-store";
import { moneyCents } from "@/lib/utils";

const MINE_LABEL: Record<AuctionMine, string> = {
  none: "",
  leading: "You’re leading",
  outbid: "You’re in · outbid",
  won: "You won",
  lost: "You bid · didn’t win",
};

export function AuctionPaddle({ compact = false }: { compact?: boolean }) {
  const email = useRoleStore((s) => s.email);
  const signedIn = useRoleStore((s) => s.signedIn);
  const [lots, setLots] = useState<AuctionLot[]>([]);
  const [meta, setMeta] = useState({ inAuction: false, leading: 0, won: 0 });

  useEffect(() => {
    void getStadiumAuction({ data: { email: signedIn ? email : "" } }).then((data) => {
      setLots(data.lots);
      setMeta({ inAuction: data.inAuction, leading: data.leading, won: data.won });
    });
  }, [email, signedIn]);

  const mine = lots.filter((l) => l.mine !== "none");
  const show = compact ? (mine.length ? mine : lots.filter((l) => l.status === "live").slice(0, 2)) : lots;

  if (compact && !show.length) return null;

  return (
    <div className={compact ? "seat-auction" : "auction-board"}>
      <div className="seat-auction-head">
        <p>
          <Gavel className="inline size-3.5" /> Sports memorabilia auction
          {meta.inAuction ? ` · ${meta.leading} leading · ${meta.won} won` : " · pick up a paddle"}
        </p>
        {compact ? (
          <Link to="/public/auction" className="text-[11px] font-semibold text-primary">
            Full block
          </Link>
        ) : null}
      </div>
      <ul className={compact ? "seat-auction-list" : "auction-grid"}>
        {show.map((lot) => (
          <li key={lot.id} data-status={lot.status} data-mine={lot.mine}>
            <p className="auction-status">
              {lot.status === "live" ? "Live" : lot.status === "closed" ? "Hammered" : "Opens later"}
              {lot.mine !== "none" ? ` · ${MINE_LABEL[lot.mine]}` : ""}
            </p>
            <h3>{lot.title}</h3>
            {compact ? null : <p className="auction-blurb">{lot.blurb}</p>}
            <div className="auction-meter" aria-hidden>
              <span style={{ width: `${Math.min(100, (lot.high_cents / Math.max(lot.next_cents, 1)) * 100)}%` }} />
            </div>
            <p className="auction-high tabular">
              {lot.high_cents ? `High ${moneyCents(lot.high_cents)}` : "No bids yet"}
              {lot.my_bid_cents ? ` · your paddle ${moneyCents(lot.my_bid_cents)}` : ""}
              {` · ${lot.bid_count} bid${lot.bid_count === 1 ? "" : "s"}`}
            </p>
            {lot.status === "live" ? (
              <Button size="sm" asChild>
                <Link to="/public/auction/$lot" params={{ lot: lot.id }}>
                  {lot.mine === "leading" ? "Hold lead" : "Open lot"} · {moneyCents(lot.next_cents)}
                </Link>
              </Button>
            ) : lot.mine === "won" ? (
              <p className="auction-won">We’ll email you from the CFL shop to settle.</p>
            ) : null}
          </li>
        ))}
      </ul>
      {compact && !signedIn ? (
        <p className="seat-wrap-note">Sign in to see your paddle and bid from this chair.</p>
      ) : null}
    </div>
  );
}