"use client";

import { useRouter, useParams } from "next/navigation";
import DynamicButton from "@/components/button";
import { useSession } from "@/auth/session-provider";
import { useAppToast } from "@/app/[lang]/providers";
import React, { useEffect, useMemo, useState } from "react";
import { useLocale, useTranslations } from "next-intl";
import { useSetAtom } from "jotai";
import { loginModalAtom } from "@/components/state/loginAtom";
import { BaseModal } from "@/components/modal";

interface LiveBidPanelProps {
  horseTitle?: string;
  lotNumber?: number;
  lastPrice?: number;
  remainingLabel?: string;
}

type LiveBidder = {
  name: string;
  paddle: number;
  amount: number;
};

export default function LiveBidPanel({
  horseTitle,
  lotNumber = 101,
  lastPrice = 0,
  remainingLabel,
}: LiveBidPanelProps) {
  const t = useTranslations("ANNUAL_AUCTION_LIVE_PANEL");
  const locale = useLocale();
  const session = useSession();
  const setLoginModal = useSetAtom(loginModalAtom);
  const toast = useAppToast();
  const router = useRouter();
  const params = useParams<{ lang?: string }>();

  const currency = t("currency");
  const numberLocale = locale === "ar" ? "en-EN" : "en-US";
  const safeHorseTitle = horseTitle || t("horse_title_fallback");
  const safeRemainingLabel = remainingLabel || t("remaining_label");

  const [amount, setAmount] = useState<number>(0);
  const [currentPrice, setCurrentPrice] = useState<number>(lastPrice);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [paddleNumber] = useState<number | null>(null);

  const [timer, setTimer] = useState<string>("10:32");

  const [invoiceOpen, setInvoiceOpen] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [agree, setAgree] = useState(false);
  const [paymentMethod, setPaymentMethod] = useState<"wallet" | "card" | null>(
    null,
  );
  const [invoiceNo, setInvoiceNo] = useState<string>("");
  const [invoiceDate, setInvoiceDate] = useState<string>("");

  const [bidders, setBidders] = useState<LiveBidder[]>([
    { name: t("demo_bidder_1_name"), paddle: 125, amount: 332500 },
    { name: t("demo_bidder_2_name"), paddle: 126, amount: 331000 },
  ]);

  const adminNotices = [t("admin_notice_1"), t("admin_notice_2")];

  const quickValues = [500, 1500, 5000];

  const formattedLast =
    currentPrice > 0
      ? `${currentPrice.toLocaleString(numberLocale)} ${currency}`
      : "—";

  useEffect(() => {
    setCurrentPrice(lastPrice);
  }, [lastPrice]);

  useEffect(() => {
    // عدّ تنازلي تجريبي لمدة 10 دقائق من لحظة فتح الصفحة
    const end = Date.now() + 10 * 60 * 1000;

    const tick = () => {
      const remaining = Math.max(0, end - Date.now());
      const totalSeconds = Math.floor(remaining / 1000);
      const m = String(Math.floor(totalSeconds / 60)).padStart(2, "0");
      const s = String(totalSeconds % 60).padStart(2, "0");
      setTimer(`${m}:${s}`);
    };

    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  const requireLogin = () => {
    if (!session) {
      setLoginModal(true);
      return false;
    }
    return true;
  };

  const handleQuickAdd = (v: number) => {
    setAmount((prev) => (Number.isNaN(prev) ? v : prev + v));
  };

  const handleDownloadInvoicePdf = async () => {
    if (typeof window === "undefined") return;
    const el = document.getElementById("annual-invoice-section");
    if (!el) {
      toast.error(t("toast_print_invoice"));
      return;
    }

    try {
      const [{ default: html2canvas }, { jsPDF }] = await Promise.all([
        import("html2canvas"),
        import("jspdf"),
      ]);

      const canvas = await html2canvas(el as HTMLElement, {
        scale: 2,
        backgroundColor: "#ffffff",
        useCORS: true,
      });

      const imgData = canvas.toDataURL("image/png");
      const pdf = new jsPDF({ orientation: "p", unit: "pt", format: "a4" });

      const pageWidth = pdf.internal.pageSize.getWidth();
      const pageHeight = pdf.internal.pageSize.getHeight();

      const imgWidth = pageWidth;
      const imgHeight = (canvas.height * imgWidth) / canvas.width;

      let heightLeft = imgHeight;
      let position = 0;

      pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      while (heightLeft > 0) {
        position = heightLeft - imgHeight;
        pdf.addPage();
        pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }

      const fileName = `invoice-${invoiceNo || "annual-auction"}.pdf`;
      pdf.save(fileName);
    } catch (e) {
      toast.info(t("toast_print_invoice"));
    }
  };

  const handleChange = (v: string) => {
    const n = Number(v.replace(/[^0-9]/g, ""));
    setAmount(Number.isNaN(n) ? 0 : n);
  };

  const handleOpenConfirm = () => {
    if (!requireLogin()) return;

    if (!paddleNumber) {
      toast.info(t("paddle_purchase_disabled"));
      return;
    }

    if (!amount || amount <= 0) {
      toast.warning(t("toast_enter_bid_amount"));
      return;
    }

    setConfirmOpen(true);
  };

  const placeBid = async () => {
    if (!paddleNumber) return;

    try {
      setIsSubmitting(true);
      console.log("PLACE_BID", { lotNumber, amount, paddleNumber });
      toast.success(t("toast_bid_recorded"));
      const bidderName =
        (session as any)?.user?.name ||
        (session as any)?.user?.phone ||
        t("bidder_fallback_name");
      const finalAmount = amount;
      const nextPrice = currentPrice + finalAmount;
      setCurrentPrice(nextPrice);
      setBidders((prev) => [
        {
          name: bidderName,
          paddle: paddleNumber || (prev[prev.length - 1]?.paddle || 124) + 1,
          amount: nextPrice,
        },
        ...prev,
      ]);
      setAmount(0);
      setConfirmOpen(false);
    } finally {
      setIsSubmitting(false);
    }
  };

  const disabled = !amount || amount <= 0 || isSubmitting || !paddleNumber;

  const buyerName =
    (session as any)?.user?.name ||
    (session as any)?.user?.stable_name ||
    t("bidder_fallback_name");
  const buyerPhone = (session as any)?.user?.phone || "--";
  const buyerTaxNumber =
    (session as any)?.user?.tax_number ||
    (session as any)?.user?.vat_number ||
    "--";

  return (
    <>
      <section className="bg-white rounded-2xl p-5 shadow-md border">
        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
          <div className="w-full lg:w-auto flex flex-col items-start lg:items-start gap-2 text-start  ">
            <div className="flex items-center gap-2 text-red-600 font-bold text-sm">
              <span className="w-2 h-2 rounded-full bg-red-600 animate-pulse" />
              <span>{t("current_horse_now")}</span>
            </div>
            <div className="text-base md:text-lg font-extrabold text-slate-900">
              {t("horse_lot_line", { title: safeHorseTitle, lotNumber })}
            </div>
            <div className="text-md text-slate-500">{t("horse_meta_demo")}</div>
            <div className="text-md text-slate-600">
              {t("last_price_label")}
              <span className="mr-1 font-extrabold text-[#0F5132]">
                {formattedLast}
              </span>
            </div>
            <div className="text-md text-slate-500">
              {paddleNumber
                ? t("your_paddle", { paddleNumber })
                : t("no_paddle_yet")}
            </div>
            {!paddleNumber && (
              <div className="text-xs text-amber-700">
                {t("paddle_purchase_disabled")}
              </div>
            )}
            <DynamicButton
              className=""
              onClick={() => {
                const lang = (params?.lang as string) || "ar";
                const query = new URLSearchParams({
                  id: String(lotNumber),
                  title: safeHorseTitle,
                  age: "5", // demo static value for now
                  breed: "Egyptian", // demo static value for now
                  owner: t("demo_owner"), // demo static value for now
                }).toString();
                router.push(`/${lang}/horse-details?${query}`);
              }}
            >
              {t("view_horse_details")}
            </DynamicButton>
          </div>
          <div className="flex- flex flex-col gap-3">
            <div className="flex flex-col md:flex-row md:items-center gap-4">
              <div className="md:w-40 flex md:flex-col items-start gap-1">
                <div className="text-md font-bold text-slate-500">
                  {safeRemainingLabel}
                </div>
                <div className="text-2xl font-extrabold text-[#0F5132]">
                  {timer}
                </div>
              </div>

              <div className="flex-1">
                <label className="block text-sm text-slate-600 mb-1">
                  {t("amount_label")}
                </label>
                <input
                  type="number"
                  min={1}
                  value={amount || ""}
                  onChange={(e) => handleChange(e.target.value)}
                  placeholder={t("amount_placeholder")}
                  className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0F5132]"
                />
              </div>

              <div className="flex md:flex-col gap-2 md:w-56">
                {quickValues.map((v) => (
                  <button
                    key={v}
                    type="button"
                    onClick={() => handleQuickAdd(v)}
                    className="flex-1 px-3 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 text-sm"
                  >
                    {v.toLocaleString(numberLocale)} {currency}
                  </button>
                ))}
              </div>
            </div>

            <div className="text-xs text-slate-600">
              {amount > 0
                ? t("bid_amount_preview", {
                    amount: `${amount.toLocaleString(
                      numberLocale,
                    )} ${currency}`,
                  })
                : t("bid_amount_hint")}
            </div>

            <DynamicButton
              color="primary"
              className="mt-2 w-full md:w-auto"
              fullWidth
              isDisabled={disabled}
              onClick={handleOpenConfirm}
            >
              {isSubmitting ? t("bid_submitting") : t("bid_now")}
            </DynamicButton>
          </div>
        </div>
      </section>

      <BaseModal
        isOpen={confirmOpen}
        onOpenChange={(open) => {
          if (!open) setConfirmOpen(false);
        }}
        title={t("confirm_bid_modal_title")}
        contentClassName="w-full max-w-[460px]"
      >
        <div className="space-y-3 text-sm text-slate-700">
          <p>
            {t.rich("confirm_bid_text", {
              horseTitle: () => <b className="mx-2">{safeHorseTitle}</b>,
              lotNumber: () => <b className="mx-1">{lotNumber}</b>,
              amount: () => (
                <b className="mx-1">
                  {amount.toLocaleString(numberLocale)} {currency}
                </b>
              ),
              paddleNumber: () => (
                <b className="mx-1">{paddleNumber || "--"}</b>
              ),
            })}
          </p>
          <p className="text-xs text-slate-500">{t("confirm_bid_note")}</p>
          <div className="flex gap-2 mt-2">
            <button
              type="button"
              className="flex-1 px-4 py-2 rounded-lg bg-slate-100"
              onClick={() => setConfirmOpen(false)}
            >
              {t("cancel")}
            </button>
            <button
              type="button"
              className="flex-1 px-4 py-2 rounded-lg bg-[#0F5132] text-white"
              onClick={placeBid}
              disabled={isSubmitting}
            >
              {isSubmitting ? t("confirm_bid_submitting") : t("confirm_bid")}
            </button>
          </div>
        </div>
      </BaseModal>

      <BaseModal
        isOpen={invoiceOpen}
        onOpenChange={(open) => {
          if (!open) setInvoiceOpen(false);
        }}
        title={t("invoice_modal_title")}
        contentClassName="w-full max-w-[520px]"
      >
        <div
          className="space-y-4 text-sm text-slate-700"
          id="annual-invoice-section"
        >
          <div className="p-3 rounded-xl bg-slate-50 grid grid-cols-1 md:grid-cols-3 gap-3">
            <div>
              <div className="text-slate-500 text-xs">{t("buyer_name")}</div>
              <div className="font-bold truncate">{buyerName}</div>
            </div>
            <div>
              <div className="text-slate-500 text-xs">{t("buyer_phone")}</div>
              <div className="font-bold" dir="ltr">
                {buyerPhone}
              </div>
            </div>
            <div>
              <div className="text-slate-500 text-xs">{t("buyer_tax")}</div>
              <div className="font-bold">{buyerTaxNumber}</div>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div className="p-3 rounded-xl bg-slate-50">
              <div className="text-slate-500 text-xs">
                {t("payment_method")}
              </div>
              <div className="font-bold">
                {paymentMethod === "wallet"
                  ? t("wallet")
                  : paymentMethod === "card"
                    ? t("card")
                    : "--"}
              </div>
            </div>
            <div className="p-3 rounded-xl bg-slate-50">
              <div className="text-slate-500 text-xs">
                {t("invoice_number")}
              </div>
              <div className="font-bold">{invoiceNo || "—"}</div>
            </div>
            <div className="p-3 rounded-xl bg-slate-50">
              <div className="text-slate-500 text-xs">{t("description")}</div>
              <div className="font-bold">{t("invoice_description")}</div>
            </div>
            <div className="p-3 rounded-xl bg-slate-50">
              <div className="text-slate-500 text-xs">
                {t("auction_or_listing_number")}
              </div>
              <div className="font-bold">{lotNumber || "—"}</div>
            </div>
            <div className="p-3 rounded-xl bg-slate-50">
              <div className="text-slate-500 text-xs">{t("payment_date")}</div>
              <div className="font-bold">{invoiceDate || "--"}</div>
            </div>
            <div className="p-3 rounded-xl bg-slate-50">
              <div className="text-slate-500 text-xs">{t("amount")}</div>
              <div className="font-bold">1,500 {currency}</div>
            </div>
          </div>
          <div className="mt-3 flex gap-2">
            <button
              type="button"
              className="flex-1 px-4 py-2 rounded-lg bg-slate-100"
              onClick={handleDownloadInvoicePdf}
            >
              {t("download_invoice")}
            </button>
            <button
              type="button"
              className="flex-1 px-4 py-2 rounded-lg bg-[#0F5132] text-white"
              onClick={() => setInvoiceOpen(false)}
            >
              {t("back_to_bidding")}
            </button>
          </div>
        </div>
      </BaseModal>

      <section className=" p-5">
        <div className="mt-4 grid sm:grid-cols-2 gap-4 text-xs text-slate-600">
          <div className="p-3 rounded-2xl bg-slate-50 border flex flex-col gap-2 min-h-[140px]">
            <div className="font-bold text-sm mb-1">{t("admin_notices")}</div>
            <div className="flex-1 overflow-y-auto space-y-2 pr-1">
              {adminNotices.map((n, idx) => (
                <div
                  key={idx}
                  className="flex items-start gap-2 rounded-xl bg-white px-3 py-2"
                >
                  <span className="mt-1 text-[15px]">🔔</span>
                  <span className="text-[15px]">{n}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="p-3 rounded-2xl bg-slate-50 border flex flex-col gap-2 min-h-[140px]">
            <div className="font-bold text-sm mb-1">{t("live_bidders")}</div>
            <div className="rounded-xl overflow-hidden border border-slate-200 bg-white">
              <div className="grid grid-cols-[1.2fr,0.5fr,0.8fr] text-[12px] md:text-[13px] font-bold text-slate-500 bg-slate-50 border-b border-slate-200 px-3 py-2">
                <span>{t("col_name")}</span>
                <span className="text-center">{t("col_paddle")}</span>
                <span className="text-left">{t("col_amount")}</span>
              </div>
              <div className="max-h-44 overflow-y-auto divide-y divide-slate-100">
                {bidders.map((b, idx) => (
                  <div
                    key={idx}
                    className="grid grid-cols-[1.2fr,0.5fr,0.8fr] items-center text-[12px] md:text-[15px] px-3 py-2 hover:bg-slate-50 transition-colors"
                  >
                    <span className="truncate">{b.name}</span>
                    <span className="text-center font-bold">{b.paddle}</span>
                    <span className="text-left font-extrabold text-[#0F5132]">
                      {b.amount.toLocaleString(numberLocale)} {currency}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}