"use client";
import { useAtom } from "jotai";
import { Section } from "../section";
import { formAtom } from "@/components/state/autionAtoms";
import { DatePicker, TimeInput, Card, CardBody } from "@heroui/react";
import { parseDate, parseTime, parseDateTime } from "@internationalized/date";
import { useEffect, useMemo } from "react";
import { useLocale, useTranslations } from "next-intl";
import { useSession } from "@/auth/session-provider";
import axios from "axios";
import { API_BASE_URL } from "@/lib/axios";
import { useAppToast } from "@/app/[lang]/providers";

export function Step3({ showErrors = false }: { showErrors?: boolean }) {
  const t = useTranslations("ADD_LISTING.STEP3");
  const [form, setForm] = useAtom(formAtom);
  const lang = useLocale();
  const session = useSession();
  const toast = useAppToast();

  // أقل موعد: بعد 3 أيام
  const minStartDate = useMemo(() => {
    const d = new Date();
    d.setDate(d.getDate() + 3);
    return parseDate(d.toISOString().slice(0, 10));
  }, []);

  // للمزاد المباشر فقط: رينج 3 أيام من أقل موعد
  const maxLiveStartDate = useMemo(() => {
    const d = new Date();
    d.setDate(d.getDate() + 3 + 3); // بعد أقل موعد بثلاثة أيام
    return parseDate(d.toISOString().slice(0, 10));
  }, []);

  const API_URL = API_BASE_URL;

  const isAuction = form.offer === "auction";
  const isElectronic = isAuction && form.auction_type === "live";
  const isLive = isAuction && form.auction_type === "electronic";

  useEffect(() => {
    if (!isElectronic) {
      setForm((p) => ({ ...p, unavailableTimes: [] }));
      return;
    }
    if (!form.startDate) {
      setForm((p) => ({ ...p, unavailableTimes: [] }));
      return;
    }

    const fetchUnavailable = async () => {
      try {
        const token = session?.access_token;
        const res = await axios.get(
          `${API_URL}/user/dashboard/auctions/unavailable-times`,
          {
            params: { date: form.startDate },
            headers: {
              Authorization: token ? `Bearer ${token}` : "",
              Accept: "application/json",
              lang,
            },
          }
        );
        const data = res.data?.data ?? [];
        setForm((p) => ({
          ...p,
          unavailableTimes: Array.isArray(data) ? data : [],
        }));
      } catch {
        setForm((p) => ({ ...p, unavailableTimes: [] }));
      }
    };

    fetchUnavailable();
  }, [
    form.offer,
    form.auction_type,
    form.startDate,
    lang,
    session?.access_token,
    setForm,
  ]);

  const updateAuctionStartTime = (date?: string, time?: string) => {
    const finalDate = date || form.startDate;
    const finalTime = time || form.startTime;

    if (finalDate && finalTime) {
      const formattedDate = finalDate;
      const formattedTime =
        finalTime.length === 5 ? `${finalTime}:00` : finalTime;

      setForm((p) => ({
        ...p,
        startDate: finalDate,
        startTime: finalTime,
        auction_start_time: `${formattedDate} ${formattedTime}`,
      }));
    } else {
      setForm((p) => ({
        ...p,
        startDate: date || p.startDate,
        startTime: time || p.startTime,
      }));
    }
  };

  const updateAuctionEndTime = (date?: string, time?: string) => {
    const finalDate = date || form.endDate;
    const finalTime = time || form.endTime;

    if (finalDate && finalTime) {
      const formattedDate = finalDate;
      const formattedTime =
        finalTime.length === 5 ? `${finalTime}:00` : finalTime;

      setForm((p) => ({
        ...p,
        endDate: finalDate,
        endTime: finalTime,
        auction_end_time: `${formattedDate} ${formattedTime}`,
      }));
    } else {
      setForm((p) => ({
        ...p,
        endDate: date || p.endDate,
        endTime: time || p.endTime,
      }));
    }
  };

  const isTimeUnavailable = (time?: string) => {
    if (!time) return false;
    if (!form.unavailableTimes || form.unavailableTimes.length === 0)
      return false;

    const [h, m] = time.split(":").map((v) => Number(v));
    if (Number.isNaN(h) || Number.isNaN(m)) return false;
    const selectedMinutes = h * 60 + m;

    return form.unavailableTimes.some((t) => {
      const [bh, bm] = String(t)
        .split(":")
        .map((v) => Number(v));
      if (Number.isNaN(bh) || Number.isNaN(bm)) return false;
      const blockedStart = bh * 60 + bm;
      const blockedEnd = blockedStart + 15;
      return selectedMinutes >= blockedStart && selectedMinutes < blockedEnd;
    });
  };

  return (
    <Section title={t("title")}>
      <div className="space-y-4">
        <div className="grid sm:grid-cols-2 gap-4">
          <DatePicker
            label={t("start_date")}
            variant="bordered"
            granularity="day"
            dir="ltr"
            isInvalid={showErrors && !form.startDate}
            errorMessage={showErrors && !form.startDate ? t("date_required") : undefined}
            minValue={minStartDate}
            maxValue={
              form.offer === "auction" && form.auction_type === "live"
                ? maxLiveStartDate
                : undefined
            }
            value={form.startDate ? parseDate(form.startDate) : null}
            onChange={(v) => {
              const str = v ? v.toString() : undefined;
              if (!str) {
                updateAuctionStartTime(undefined, form.startTime);
                return;
              }

              updateAuctionStartTime(str, form.startTime);
            }}
          />

          <div className="flex flex-col gap-1 text-start">
            <label className="text-xs font-medium">{t("start_time")}</label>
            <div className="relative">
              <input
                type="time"
                dir="ltr"
                className={`w-full rounded-xl border px-3 py-2 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary/60 ${showErrors && !form.startTime ? "border-red-500" : ""}`}
                value={form.startTime ?? ""}
                onChange={(e) => {
                  let timeHHMM = e.target.value || undefined; // HH:MM

                  if (!timeHHMM) {
                    updateAuctionStartTime(form.startDate, undefined);
                    return;
                  }

                  if (
                    form.offer === "auction" &&
                    form.auction_type === "electronic"
                  ) {
                    const toMinutes = (t: string) => {
                      const [h, m] = t.split(":").map((v) => Number(v));
                      if (Number.isNaN(h) || Number.isNaN(m)) return NaN;
                      return h * 60 + m;
                    };

                    let selected = toMinutes(timeHHMM);
                    if (
                      !Number.isNaN(selected) &&
                      form.unavailableTimes?.length
                    ) {
                      let moved = false;

                      for (let i = 0; i < 48; i++) {
                        const inBlocked = form.unavailableTimes.some((t) => {
                          const [bh, bm] = String(t)
                            .split(":")
                            .map((v) => Number(v));
                          if (Number.isNaN(bh) || Number.isNaN(bm))
                            return false;
                          const blockedStart = bh * 60 + bm;
                          const blockedEnd = blockedStart + 15;
                          return (
                            selected >= blockedStart && selected < blockedEnd
                          );
                        });

                        if (!inBlocked) break;

                        selected += 15;
                        moved = true;
                        if (selected >= 24 * 60) break; // تجاوز اليوم
                      }

                      if (selected >= 24 * 60) {
                        toast.error(t("no_available_time"));
                        return;
                      }

                      if (moved) {
                        const hh = String(Math.floor(selected / 60)).padStart(
                          2,
                          "0"
                        );
                        const mm = String(selected % 60).padStart(2, "0");
                        timeHHMM = `${hh}:${mm}`;
                      }
                    }
                  }

                  updateAuctionStartTime(form.startDate, timeHHMM);
                }}
              />
              <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-400 text-sm">
                ⏰
              </span>
            </div>
            {showErrors && !form.startTime && (
              <p className="text-red-500 text-xs mt-1">{t("time_required")}</p>
            )}
          </div>
        </div>

        {/* صف نهاية المزاد: تاريخ + وقت (لغير المزاد الإلكتروني) */}
        {!isElectronic && (
          <div className="grid sm:grid-cols-2 gap-4">
            <DatePicker
              label={t("end_date")}
              variant="bordered"
              granularity="day"
              dir="ltr"
              minValue={
                form.startDate ? parseDate(form.startDate) : minStartDate
              }
              value={form.endDate ? parseDate(form.endDate) : null}
              onChange={(v) => {
                const str = v ? v.toString() : undefined;
                if (!str) {
                  updateAuctionEndTime(undefined, form.endTime);
                  return;
                }

                updateAuctionEndTime(str, form.endTime);
              }}
            />

            <div className="flex flex-col gap-1 text-start">
              <label className="text-xs font-medium">{t("end_time")}</label>
              <div className="relative">
                <input
                  type="time"
                  dir="ltr"
                  className="w-full rounded-xl border px-3 py-2 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary/60"
                  value={form.endTime ?? ""}
                  onChange={(e) => {
                    const timeHHMM = e.target.value || undefined; // HH:MM

                    if (!timeHHMM) {
                      updateAuctionEndTime(form.endDate, undefined);
                      return;
                    }

                    updateAuctionEndTime(form.endDate, timeHHMM);
                  }}
                />
                <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-400 text-sm">
                  ⏰
                </span>
              </div>
            </div>
          </div>
        )}
      </div>

      {form.offer === "auction" &&
        form.auction_type === "electronic" &&
        form.unavailableTimes &&
        form.unavailableTimes.length > 0 && (
          <div className="mt-3">
            <Card className="bg-[#F4F6F8] border border-gray-200 rounded-2xl shadow-none">
              <CardBody className="space-y-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div className="h-8 w-8 rounded-full bg-red-100 flex items-center justify-center text-red-500 text-lg">
                      ⏰
                    </div>
                    <div className="flex flex-col">
                      <span className="font-semibold text-sm text-gray-900">
                        {t("unavailable_times_title")}
                      </span>
                      <span className="text-[11px] text-gray-500">
                        {t("unavailable_times_description")}
                      </span>
                    </div>
                  </div>
                  <span className="inline-flex items-center rounded-full bg-red-100 text-red-600 px-3 py-1 text-[11px] font-medium">
                    {t("unavailable_times_badge")}
                  </span>
                </div>

                <div className="flex flex-wrap gap-2 text-xs mt-1">
                  {form.unavailableTimes.map((time) => (
                    <span
                      key={String(time)}
                      className="inline-flex items-center gap-1 rounded-full bg-white text-gray-800 px-3 py-1 shadow-sm border border-gray-200"
                    >
                      <span className="h-1.5 w-1.5 rounded-full bg-red-500" />
                      {String(time)}
                    </span>
                  ))}
                </div>
              </CardBody>
            </Card>
          </div>
        )}

      <p className="text-xs text-amber-700 bg-amber-50 p-3 rounded-xl text-start border mt-3">
        {t.rich("note", {
          bold: (chunk) => <b>{chunk}</b>,
        })}
      </p>
    </Section>
  );
}