"use client";
import { useEffect, useState } from "react";
import DynamicButton from "../button";
import Link from "next/link";
import Money from "@/components/ui/Money";
import { useTranslations } from "next-intl";
type Horse = {
  lot: number;
  title: string;
  breed: string;
  age: string;
  owner: string;
  start: Date;
  end: Date;
};

export default function LiveAuction() {
  const t = useTranslations("ANNUAL_AUCTIONS_SHARING");
  const [current, setCurrent] = useState<Horse | null>(null);
  const [lastPrice, setLastPrice] = useState(10000);
  const [timer, setTimer] = useState("00:00");

  useEffect(() => {
    const lot = 101;
    const now = new Date();
    const S = new Date(now.getTime());
    const E = new Date(S.getTime() + 15 * 60000);

    const horse: Horse = {
      lot,
      title: t("live.current_horse_fallback", { lot }),
      breed: "Egyptian",
      age: t("live.demo_age"),
      owner: t("live.demo_owner"),
      start: S,
      end: E,
    };

    setCurrent(horse);

    const interval = setInterval(() => {
      if (!horse) return;
      const base = 10000 + (horse.lot % 7) * 500;
      const mod = Math.floor(new Date().getSeconds() % 10) * 250;
      setLastPrice(base + mod);

      const remaining = Math.max(
        0,
        Math.floor((E.getTime() - Date.now()) / 1000),
      );
      const mm = String(Math.floor(remaining / 60)).padStart(2, "0");
      const ss = String(remaining % 60).padStart(2, "0");
      setTimer(`${mm}:${ss}`);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  if (!current) return null;

  return (
    <section className="py-6">
      <div className="max-w-7xl mx-auto px-6">
        <div className="bg-white rounded-xl border p-5 shadow-md">
          <div className="flex items-center justify-between flex-wrap gap-3">
            <div>
              <div className="flex items-center gap-2 text-red-600 font-bold">
                <span className="w-2 h-2 rounded-full bg-red-600 animate-pulse"></span>
                {t("live.live_now_label")}
              </div>
              <div className="text-2xl font-extrabold mt-1">
                {t("live.current_horse_title", {
                  title: current.title,
                  lot: current.lot,
                })}
              </div>
              <div className="text-sm text-slate-600">
                {t("live.age_and_breed", {
                  age: current.age,
                  breed: current.breed,
                })}
              </div>
              <div className="mt-2 text-sm">
                <b>{t("live.last_price_label")}</b>{" "}
                <span className="text-green-800 font-extrabold">
                  <Money value={lastPrice} />
                </span>
              </div>
              <div className="mt-2">
                <Link
                  href={`/annual-auctions/horses/${
                    current.lot
                  }?title=${encodeURIComponent(
                    current.title,
                  )}&breed=${encodeURIComponent(
                    current.breed,
                  )}&age=${encodeURIComponent(
                    current.age,
                  )}&owner=${encodeURIComponent(current.owner)}`}
                >
                  <DynamicButton>
                    {t("live.enter_auction_button")}
                  </DynamicButton>
                </Link>{" "}
              </div>
            </div>
            <div className="text-right">
              <div className="text-sm text-slate-500">
                {t("live.remaining_time_label")}
              </div>
              <div className="text-3xl font-extrabold text-green-800">
                {timer}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}