/**
 * Bidder home — welcome screen, quick nav cards, event status strip.
 * TODO: fetch active event details from /api/events/active.
 */
import { Link } from "react-router-dom";
import { useAuthStore, bidderName } from "../../store/auth.js";

// ── Quick-action cards ─────────────────────────────────────────────────────────
const QUICK_ACTIONS = [
  {
    to: "/live",
    label: "Live Auction",
    sub: "Bid in real time",
    bg: "bg-brand-700",
    text: "text-white",
    sub_text: "text-brand-200",
    icon: "🎙",
  },
  {
    to: "/silent",
    label: "Silent Auction",
    sub: "Browse & place bids",
    bg: "bg-gold-500",
    text: "text-white",
    sub_text: "text-gold-100",
    icon: "🏷️",
  },
  {
    to: "/my-bids",
    label: "My Bids",
    sub: "Track your activity",
    bg: "bg-white",
    text: "text-brand-800",
    sub_text: "text-gray-400",
    icon: "📋",
    border: true,
  },
  {
    to: "/checkout",
    label: "Checkout",
    sub: "Pay for won items",
    bg: "bg-white",
    text: "text-brand-800",
    sub_text: "text-gray-400",
    icon: "💳",
    border: true,
  },
] as const;

export default function HomePage() {
  const bidder = useAuthStore((s) => s.bidder);

  return (
    <div className="flex flex-col min-h-full">
      {/* ── Hero strip ── */}
      <div className="bg-brand-700 px-5 pt-6 pb-8">
        <p className="text-brand-200 text-xs font-semibold uppercase tracking-widest mb-1">
          Welcome back
        </p>
        <h1 className="text-white text-2xl font-black tracking-tight leading-tight">
          {bidderName(bidder)}
        </h1>
        {bidder?.paddleNumber && (
          <div className="inline-flex items-center gap-2 mt-3 bg-brand-800/60 rounded-xl px-3 py-1.5">
            <span className="text-gold-300 font-black text-lg">#{bidder.paddleNumber}</span>
            <span className="text-brand-200 text-xs">Your paddle number</span>
          </div>
        )}
      </div>

      {/* ── Cards grid (overlaps hero by 1rem) ── */}
      <div className="px-4 -mt-4 space-y-3">
        {/* Event status card */}
        <div className="card px-4 py-3 flex items-center gap-3 animate-fade-in">
          <span className="text-2xl">🌿</span>
          <div>
            <p className="font-semibold text-sm text-gray-800">Storybook Farm Charity Gala</p>
            <p className="text-xs text-gray-400 mt-0.5">Auction is live — good luck!</p>
          </div>
          <span className="ml-auto w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
        </div>

        {/* Quick-action grid */}
        <div className="grid grid-cols-2 gap-3 pb-4">
          {QUICK_ACTIONS.map(({ to, label, sub, bg, text, sub_text, icon, border }) => (
            <Link
              key={to}
              to={to}
              className={`rounded-2xl p-4 flex flex-col gap-1 shadow-card active:scale-[0.97] transition-transform ${bg} ${border ? "border border-gray-100" : ""}`}
            >
              <span className="text-2xl leading-none">{icon}</span>
              <p className={`font-bold text-sm mt-1 ${text}`}>{label}</p>
              <p className={`text-xs ${sub_text}`}>{sub}</p>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}