"use client";

import { useMemo, useState } from "react";
import { Button } from "@heroui/react";
import { useLocale, useTranslations } from "next-intl";
import AtayaLoader from "@/components/loaders/AtayaLoader";
import Money from "@/components/ui/Money";
import { type InstallmentRecord, useInstallments } from "@/lib/clientQueries";
import { AlertTriangle, CalendarDays } from "lucide-react";

const toNumber = (value: unknown) => {
  const parsed = Number(value ?? 0);
  return Number.isFinite(parsed) ? parsed : 0;
};

const toDateLabel = (locale: string, value: string | null | undefined) => {
  if (!value) return "-";
  const parsed = new Date(value);
  if (Number.isNaN(parsed.getTime())) return value;
  return new Intl.DateTimeFormat(locale === "ar" ? "ar-SA" : "en-US", {
    dateStyle: "medium",
  }).format(parsed);
};

export default function InstallmentsTable() {
  const t = useTranslations("DASHBOARD.INSTALLMENTS");
  const locale = useLocale();
  const [search, setSearch] = useState("");

  const {
    data,
    isLoading,
    error,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useInstallments();

  const installments = useMemo(
    () => data?.pages.flatMap((page) => page.data) ?? [],
    [data],
  );

  const normalizedSearch = search.trim().toLowerCase();

  const filteredInstallments = useMemo(() => {
    if (!normalizedSearch) return installments;
    return installments.filter((item: InstallmentRecord) => {
      const clientName = item.bill?.client?.name || "";
      const clientPhone = item.bill?.client?.phone || "";
      const billNo = item.bill?.no || "";
      const productNames =
        item.bill?.details?.map((d) => d.product_name || "").join(" ") || "";
      const status = item.status || "";
      const haystack =
        `${item.id} ${item.installment_no} ${billNo} ${clientName} ${clientPhone} ${productNames} ${status}`.toLowerCase();
      return haystack.includes(normalizedSearch);
    });
  }, [installments, normalizedSearch]);

  const getStatusMeta = (status: string | null | undefined) => {
    const key = (status || "").toLowerCase();
    if (key === "paid") {
      return { label: t("status.paid"), color: "bg-emerald-50 text-emerald-700" };
    }
    if (key === "partial" || key === "partially_paid") {
      return { label: t("status.partial"), color: "bg-amber-50 text-amber-700" };
    }
    if (key === "overdue") {
      return { label: t("status.overdue"), color: "bg-rose-50 text-rose-700" };
    }
    return { label: t("status.unpaid"), color: "bg-slate-100 text-slate-700" };
  };

  if (isLoading) {
    return <AtayaLoader />;
  }

  if (error) {
    return (
      <div className="space-y-4">
        <div className="text-center p-8">
          <div className="mb-4 flex justify-center text-red-500">
            <AlertTriangle className="h-14 w-14" strokeWidth={1.8} />
          </div>
          <h3 className="text-lg font-bold text-red-600 mb-2">
            {t("error_loading")}
          </h3>
          <p className="text-gray-600 mb-4">{error.message}</p>
          <Button variant="solid" color="primary" onPress={() => window.location.reload()}>
            {t("retry")}
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <div>
          <h2 className="text-xl font-extrabold text-primary">{t("title")}</h2>
          <div className="text-sm text-slate-500">
            {t("subtitle", { count: filteredInstallments.length })}
          </div>
        </div>
        <div className="relative w-full md:w-72">
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full rounded-full border border-slate-200 px-3 py-1.5 text-xs md:text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/60 focus:border-emerald-500 placeholder:text-slate-400 text-slate-700 bg-white"
            placeholder={t("search_placeholder")}
          />
        </div>
      </div>

      {filteredInstallments.length === 0 ? (
        <div className="text-center p-8">
          <div className="mb-4 flex justify-center text-gray-400">
            <CalendarDays className="h-14 w-14" strokeWidth={1.8} />
          </div>
          <h3 className="text-lg font-bold text-gray-600 mb-2">
            {t("no_installments")}
          </h3>
          <p className="text-gray-500">{t("no_installments_description")}</p>
        </div>
      ) : (
        <>
          <div className="space-y-3 md:hidden">
            {filteredInstallments.map((item: InstallmentRecord) => {
              const amount = toNumber(item.amount);
              const paid = toNumber(item.total_paid_amount);
              const remaining = Math.max(amount - paid, 0);
              const statusMeta = getStatusMeta(item.status);
              const productNames =
                item.bill?.details?.map((d) => d.product_name || "-").join("، ") || "-";

              return (
                <div key={item.id} className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                  <div className="mb-3 flex items-center justify-between gap-2">
                    <div className="text-sm font-semibold text-slate-800">
                      {t("columns.bill_no")}: {item.bill?.no || "-"}
                    </div>
                    <span
                      className={`inline-flex items-center justify-center px-2 py-0.5 rounded-full text-[11px] font-semibold ${statusMeta.color}`}
                    >
                      {statusMeta.label}
                    </span>
                  </div>

                  <div className="grid grid-cols-2 gap-2 text-xs text-slate-700">
                    <div>
                      <span className="text-slate-500">{t("columns.installment_no")}: </span>
                      {item.installment_no}
                    </div>
                    <div>
                      <span className="text-slate-500">{t("columns.kind")}: </span>
                      {item.is_down_payment ? t("kind_down_payment") : t("kind_regular")}
                    </div>
                    <div>
                      <span className="text-slate-500">{t("columns.client")}: </span>
                      {item.bill?.client?.name || "-"}
                    </div>
                    <div dir="ltr">
                      <span className="text-slate-500">{t("columns.phone")}: </span>
                      {item.bill?.client?.phone || "-"}
                    </div>
                    <div className="col-span-2">
                      <span className="text-slate-500">{t("columns.product")}: </span>
                      {productNames}
                    </div>
                    <div>
                      <span className="text-slate-500">{t("columns.due_date")}: </span>
                      {toDateLabel(locale, item.due_date)}
                    </div>
                    <div>
                      <span className="text-slate-500">{t("columns.amount")}: </span>
                      <Money value={amount} className="inline-flex items-center gap-1" />
                    </div>
                    <div>
                      <span className="text-slate-500">{t("columns.paid_amount")}: </span>
                      <Money value={paid} className="inline-flex items-center gap-1" />
                    </div>
                    <div>
                      <span className="text-slate-500">{t("columns.remaining_amount")}: </span>
                      <Money value={remaining} className="inline-flex items-center gap-1" />
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          <div className="hidden md:block overflow-auto">
            <table className="w-full text-sm border rounded-2xl overflow-hidden">
              <thead>
                <tr className="text-center bg-slate-50">
                  <th className="p-3 border">{t("columns.bill_no")}</th>
                  <th className="p-3 border">{t("columns.installment_no")}</th>
                  <th className="p-3 border">{t("columns.kind")}</th>
                  <th className="p-3 border">{t("columns.client")}</th>
                  <th className="p-3 border">{t("columns.phone")}</th>
                  <th className="p-3 border">{t("columns.product")}</th>
                  <th className="p-3 border">{t("columns.due_date")}</th>
                  <th className="p-3 border">{t("columns.amount")}</th>
                  <th className="p-3 border">{t("columns.paid_amount")}</th>
                  <th className="p-3 border">{t("columns.remaining_amount")}</th>
                  <th className="p-3 border">{t("columns.status")}</th>
                </tr>
              </thead>
              <tbody>
                {filteredInstallments.map((item: InstallmentRecord) => {
                  const amount = toNumber(item.amount);
                  const paid = toNumber(item.total_paid_amount);
                  const remaining = Math.max(amount - paid, 0);
                  const statusMeta = getStatusMeta(item.status);
                  const productNames =
                    item.bill?.details?.map((d) => d.product_name || "-").join("، ") || "-";

                  return (
                    <tr key={item.id} className="border-b text-center hover:bg-slate-50">
                      <td className="p-3 border text-xs md:text-sm whitespace-nowrap">
                        {item.bill?.no || "-"}
                      </td>
                      <td className="p-3 border text-xs md:text-sm">{item.installment_no}</td>
                      <td className="p-3 border text-xs md:text-sm">
                        {item.is_down_payment ? t("kind_down_payment") : t("kind_regular")}
                      </td>
                      <td className="p-3 border text-xs md:text-sm">
                        {item.bill?.client?.name || "-"}
                      </td>
                      <td className="p-3 border text-xs md:text-sm" dir="ltr">
                        {item.bill?.client?.phone || "-"}
                      </td>
                      <td className="p-3 border text-xs md:text-sm max-w-[220px] truncate" title={productNames}>
                        {productNames}
                      </td>
                      <td className="p-3 border text-xs md:text-sm">
                        {toDateLabel(locale, item.due_date)}
                      </td>
                      <td className="p-3 border text-xs md:text-sm">
                        <Money value={amount} />
                      </td>
                      <td className="p-3 border text-xs md:text-sm">
                        <Money value={paid} />
                      </td>
                      <td className="p-3 border text-xs md:text-sm font-semibold">
                        <Money value={remaining} />
                      </td>
                      <td className="p-3 border text-xs md:text-sm">
                        <span
                          className={`inline-flex items-center justify-center px-2 py-0.5 rounded-full text-[11px] font-semibold ${statusMeta.color}`}
                        >
                          {statusMeta.label}
                        </span>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          {hasNextPage && (
            <div className="flex justify-center mt-4">
              <Button
                variant="solid"
                color="primary"
                onPress={() => fetchNextPage()}
                isLoading={isFetchingNextPage}
              >
                {isFetchingNextPage ? t("loading_more") : t("load_more")}
              </Button>
            </div>
          )}
        </>
      )}
    </div>
  );
}