"use client";

import { useMemo, useState } from "react";
import { Button } from "@heroui/react";
import { useTranslations, useLocale } from "next-intl";
import { useMySales } from "@/lib/clientQueries";
import Money from "@/components/ui/Money";
import AtayaLoader from "@/components/loaders/AtayaLoader";
import {
  buildMarketTransactionInvoiceHtml,
  coerceMarketTransactionInvoiceInputFromResponse,
  openInvoiceWindow,
} from "@/lib/invoice";

function formatPurchaseDate(
  raw: string | undefined | null,
  locale: string,
): string {
  if (raw == null || !String(raw).trim()) return "—";
  const s = String(raw).trim();
  const d = new Date(s.includes("T") ? s : s.replace(" ", "T"));
  if (Number.isNaN(d.getTime())) return s;
  try {
    return new Intl.DateTimeFormat(locale, {
      dateStyle: "short",
      timeStyle: "short",
    }).format(d);
  } catch {
    return s;
  }
}

/** MySalesResource puts `paddle_number` on `buyer`; allow top-level fallback. */
function getSalePaddleNumber(sale: {
  buyer?: { paddle_number?: unknown };
  paddle_number?: unknown;
}) {
  const v = sale?.buyer?.paddle_number ?? sale?.paddle_number;
  return v != null && String(v).trim() !== "" ? String(v).trim() : null;
}

export default function SalesTable() {
  const t = useTranslations("DASHBOARD.SALES");
  const locale = useLocale();

  const [search, setSearch] = useState("");
  const [filterType, setFilterType] = useState<"" | "auction" | "offer">("");
  const [filterDateFrom, setFilterDateFrom] = useState("");
  const [filterDateTo, setFilterDateTo] = useState("");

  const openSaleInvoice = (sale: any) => {
    try {
      const input = coerceMarketTransactionInvoiceInputFromResponse({
        marketTransaction: sale,
        direction: "sale",
        fallback: {
          title: sale?.title ?? "—",
          buyerName: sale?.buyer?.name ?? "—",
          buyerMobile: sale?.buyer?.phone ?? "—",
          sellerName: "—",
          sellerMobile: "—",
          baseAmount: Number(sale?.base_amount ?? 0),
          commissionAmount: Number(sale?.commission_amount ?? 0),
          commissionPercentage: Number(sale?.commission_percentage ?? NaN),
          taxAmount: Number(sale?.tax_amount ?? 0),
          taxPercentage: Number(sale?.tax_percentage ?? NaN),
          paidAmount: Number(sale?.paid_amount ?? 0),
          remainingAmount: Number(sale?.remaining_amount ?? 0),
          totalAmount: Number(sale?.total_amount ?? sale?.amount ?? 0),
        },
      });

      const html = buildMarketTransactionInvoiceHtml(input);
      openInvoiceWindow(html);
    } catch {}
  };

  const {
    data,
    isLoading,
    error,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useMySales({
    perPage: 100,
    type: filterType || undefined,
    dateFrom: filterDateFrom || undefined,
    dateTo: filterDateTo || undefined,
  });

  const sales = data?.pages.flatMap((page) => page.data) ?? [];

  const anyPaddleInList = useMemo(
    () => sales.some((s) => getSalePaddleNumber(s) != null),
    [sales],
  );

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

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

  const filteredSales =
    normalizedSearch.length === 0
      ? sales
      : sales.filter((sale: any) => {
          const title = (sale.title || "").toString();
          const buyer = (
            sale.buyer?.name ||
            sale.buyer?.phone ||
            ""
          ).toString();
          const type = (sale.type || "").toString();
          const status = (sale.process_status || "").toString();
          const createdAt = (sale.created_at || "").toString();
          const paddle = (getSalePaddleNumber(sale) || "").toString();

          const haystack =
            `${title} ${buyer} ${type} ${status} ${createdAt} ${paddle}`.toLowerCase();
          return haystack.includes(normalizedSearch);
        });

  const getTypeLabel = (value: string | null | undefined) => {
    const key = (value || "").toString().toLowerCase();
    if (!key) return "-";

    const isAr = (locale as string) === "ar";

    if (key === "offer") return isAr ? "عرض" : "Offer";
    if (key === "auction") return isAr ? "مزاد" : "Auction";

    return value as string;
  };

  const getStatusMeta = (sale: any) => {
    const raw = (sale?.process_status || "").toString();
    const key = raw.toLowerCase();

    let label = raw || "-";
    let color = "bg-slate-100 text-slate-700";

    const isCompletedState =
      key.includes("completed") ||
      key.includes("done") ||
      key.includes("success");
    const isWaitingState =
      key.includes("pending") ||
      key.includes("waiting") ||
      key.includes("inspection") ||
      key.includes("transfer") ||
      key.includes("transport");

    if (isCompletedState) {
      label = t("status.completed");
      color = "bg-emerald-50 text-emerald-700";
    } else if (key.includes("cancel") || key.includes("failed")) {
      label = t("status.cancelled");
      color = "bg-red-50 text-red-700";
    } else if (isWaitingState) {
      if (key.includes("inspection")) {
        label = t("status.pending_inspection");
      } else if (key.includes("transfer") || key.includes("transport")) {
        label = t("status.pending_transport");
      } else {
        label = t("status.pending");
      }
      color = "bg-amber-50 text-amber-700";
    } else {
      if (key === "pending_transfer") {
        label = t("status.pending_transport");
        color = "bg-amber-50 text-amber-700";
      }
    }

    return { label, color };
  };

  const handleExportCsv = () => {
    if (!filteredSales || filteredSales.length === 0) return;

    const header = [
      "unique_id",
      "title",
      ...(anyPaddleInList ? (["paddle_number"] as const) : []),
      "buyer",
      "type",
      "created_at",
      "status",
      "paid_amount",
      "remaining_amount",
      "total_amount",
    ];

    const rows = filteredSales.map((sale: any) => {
      const uniqueId = sale.unique_id || "";
      const title = sale.title || "";
      const paddle = getSalePaddleNumber(sale) || "";
      const buyer = sale.buyer?.name || sale.buyer?.phone || "";
      const type = sale.type || "";
      const createdAt = sale.created_at || "";
      const status = getStatusMeta(sale).label || "";
      const paidAmount = sale.paid_amount ?? 0;
      const remainingAmount = sale.remaining_amount ?? 0;
      const totalAmount = sale.total_amount ?? sale.amount ?? 0;

      const base = [uniqueId, title];
      if (anyPaddleInList) base.push(paddle);
      base.push(
        buyer,
        type,
        createdAt,
        status,
        paidAmount,
        remainingAmount,
        totalAmount,
      );
      return base;
    });

    const escapeCsv = (value: string | number) => {
      if (value == null) return "";
      const v = value.toString().replace(/"/g, '""');
      if (/[",\n]/.test(v)) {
        return `"${v}"`;
      }
      return v;
    };

    const csvContent = [header, ...rows]
      .map((row) => row.map((cell) => escapeCsv(cell)).join(","))
      .join("\n");

    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "sales-table.csv";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  if (error) {
    return (
      <div className="space-y-4">
        <div>
          <div className="text-center p-8">
            <div className="text-red-500 text-6xl mb-4">⚠️</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>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div>
        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between mb-3">
          <div>
            <h2 className="text-xl font-extrabold text-primary">
              {t("title")}
            </h2>
            <div className="text-sm text-slate-500">
              {t("subtitle", { count: filteredSales.length })}
            </div>
          </div>

          <div className="flex flex-col sm:flex-row gap-2 items-stretch sm:items-center justify-end">
            <div className="relative w-full sm:w-64">
              <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>
            <button
              type="button"
              onClick={handleExportCsv}
              className="inline-flex items-center justify-center px-3 py-1.5 rounded-full text-xs md:text-sm font-semibold bg-emerald-50 text-emerald-700 hover:bg-emerald-100 border border-emerald-100 whitespace-nowrap"
            >
              {t("export_excel")}
            </button>
          </div>
        </div>

        <div className="flex flex-wrap items-end gap-3 mb-4 rounded-2xl border border-slate-100 bg-slate-50/80 p-3">
          <label className="flex flex-col gap-1 text-xs font-semibold text-slate-600 min-w-[140px]">
            <span>{t("filters.type_label")}</span>
            <select
              value={filterType}
              onChange={(e) =>
                setFilterType(e.target.value as "" | "auction" | "offer")
              }
              className="rounded-xl border border-slate-200 bg-white px-2 py-1.5 text-sm text-slate-800"
            >
              <option value="">{t("filters.type_all")}</option>
              <option value="auction">{t("filters.type_auction")}</option>
              <option value="offer">{t("filters.type_offer")}</option>
            </select>
          </label>
          <label className="flex flex-col gap-1 text-xs font-semibold text-slate-600 min-w-[150px]">
            <span>{t("filters.date_from")}</span>
            <input
              type="date"
              value={filterDateFrom}
              onChange={(e) => setFilterDateFrom(e.target.value)}
              className="rounded-xl border border-slate-200 bg-white px-2 py-1.5 text-sm text-slate-800"
            />
          </label>
          <label className="flex flex-col gap-1 text-xs font-semibold text-slate-600 min-w-[150px]">
            <span>{t("filters.date_to")}</span>
            <input
              type="date"
              value={filterDateTo}
              onChange={(e) => setFilterDateTo(e.target.value)}
              min={filterDateFrom || undefined}
              className="rounded-xl border border-slate-200 bg-white px-2 py-1.5 text-sm text-slate-800"
            />
          </label>
        </div>

        {filteredSales.length === 0 ? (
          <div className="text-center p-8">
            <div className="text-gray-400 text-6xl mb-4">💼</div>
            <h3 className="text-lg font-bold text-gray-600 mb-2">
              {t("no_sales")}
            </h3>
            <p className="text-gray-500">{t("no_sales_description")}</p>
          </div>
        ) : (
          <>
            <div className="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.unique_id")}</th>
                    <th className="p-3 border">{t("columns.title")}</th>
                    <th className="p-3 border">{t("columns.buyer")}</th>
                    <th className="p-3 border">{t("columns.type")}</th>
                    <th className="p-3 border">{t("columns.purchase_date")}</th>
                    <th className="p-3 border">{t("columns.status")}</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.amount")}</th>
                    <th className="p-3 border">{t("columns.actions")}</th>
                  </tr>
                </thead>
                <tbody>
                  {filteredSales.map((sale: any) => {
                    const paddle = getSalePaddleNumber(sale);
                    return (
                      <tr
                        key={sale.id}
                        className="border-b text-center hover:bg-slate-50"
                      >
                        <td className="p-3 border text-xs md:text-sm whitespace-nowrap">
                          {sale.unique_id || "-"}
                        </td>
                        <td className="p-3 border text-xs md:text-sm max-w-xs text-start align-top">
                          <div className="min-w-0">
                            <div className="font-semibold text-slate-900 truncate">
                              {sale.title || "—"}
                            </div>
                            {paddle ? (
                              <div className="mt-1 text-[11px] text-slate-600">
                                <span className="text-slate-500">
                                  {t("columns.paddle_number")}:{" "}
                                </span>
                                <span className="font-bold tabular-nums">
                                  {paddle}
                                </span>
                              </div>
                            ) : null}
                          </div>
                        </td>
                        <td className="p-3 border text-xs md:text-sm " dir="ltr">
                          {sale.buyer?.name || sale.buyer?.phone || "-"}
                        </td>
                        <td className="p-3 border text-xs md:text-sm">
                          {getTypeLabel(sale.type)}
                        </td>
                        <td className="p-3 border text-xs md:text-sm whitespace-nowrap">
                          {formatPurchaseDate(sale.created_at, locale)}
                        </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 ${
                              getStatusMeta(sale).color
                            }`}
                          >
                            {getStatusMeta(sale).label}
                          </span>
                        </td>
                        <td className="p-3 border text-xs md:text-sm">
                          <Money value={sale.paid_amount ?? 0} />
                        </td>
                        <td className="p-3 border text-xs md:text-sm">
                          <Money value={sale.remaining_amount ?? 0} />
                        </td>
                        <td className="p-3 border text-xs md:text-sm font-semibold">
                          <Money value={sale.total_amount ?? 0} />
                        </td>
                        <td className="p-3 border">
                          <button
                            className="px-3 py-1 rounded-lg bg-blue-500 text-white text-xs cursor-pointer hover:bg-blue-600"
                            onClick={() => openSaleInvoice(sale)}
                          >
                            {t("actions.download_invoice")}
                          </button>
                        </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>
    </div>
  );
}