"use client";

import { Card, CardBody, Chip, Input, Button } from "@heroui/react";
import { useLocale, useTranslations } from "next-intl";
import { useMemo, useState } from "react";
import {
  ArrowLeftRight,
  BadgeCheck,
  BadgeX,
  CalendarDays,
  Clock,
  CreditCard,
  RotateCcw,
  ShieldAlert,
  Wallet,
} from "lucide-react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useFinancialTransactions } from "@/lib/clientQueries";
import Money from "@/components/ui/Money";
import { toMoneyNumber } from "@/lib/moneyParse";

type PaymentStatus = "approved" | "pending" | "rejected" | "refunded";

type PaymentMethod = "wallet" | "bank_transfer" | "cash" | "stcp" | string;

const renderAmount = (amount: number) => (
  <Money value={amount} minimumFractionDigits={2} maximumFractionDigits={2} />
);

const statusMeta = (
  status: PaymentStatus,
  t: ReturnType<typeof useTranslations>,
) => {
  switch (status) {
    case "approved":
      return {
        label: t("timeline.status_paid"),
        chipClass: "bg-emerald-50 text-emerald-700",
        dotClass: "bg-emerald-500",
        amountClass: "text-emerald-700",
        icon: BadgeCheck,
      };
    case "pending":
      return {
        label: t("timeline.status_pending"),
        chipClass: "bg-amber-50 text-amber-700",
        dotClass: "bg-amber-500",
        amountClass: "text-amber-700",
        icon: ShieldAlert,
      };
    case "refunded":
      return {
        label: t("timeline.status_refunded"),
        chipClass: "bg-slate-100 text-slate-700",
        dotClass: "bg-slate-500",
        amountClass: "text-slate-700",
        icon: RotateCcw,
      };
    case "rejected":
    default:
      return {
        label: t("timeline.status_rejected"),
        chipClass: "bg-rose-50 text-rose-700",
        dotClass: "bg-rose-500",
        amountClass: "text-rose-700",
        icon: BadgeX,
      };
  }
};

const methodMeta = (
  method: PaymentMethod,
  t: ReturnType<typeof useTranslations>,
) => {
  switch (method) {
    case "wallet":
      return { label: t("timeline.method_wallet"), icon: Wallet };
    case "seller_due":
      return { label: t("timeline.method_seller_due"), icon: ArrowLeftRight };
    case "electronic":
      return {
        label: t("payment_method.electronic"),
        icon: CreditCard,
      };
    case "bank_transfer":
      return {
        label: t("timeline.method_bank_transfer"),
        icon: ArrowLeftRight,
      };
    case "cash":
      return { label: t("timeline.method_cash"), icon: ArrowLeftRight };
    case "stcp":
      return { label: t("timeline.method_stcp"), icon: ArrowLeftRight };
    default:
      return {
        label: t("timeline.method_bank_transfer"),
        icon: ArrowLeftRight,
      };
  }
};

const directionMeta = (
  direction: string,
  t: ReturnType<typeof useTranslations>,
) => {
  switch (direction) {
    case "user_to_company":
      return t("direction.user_to_company");
    case "company_to_user":
      return t("direction.company_to_user");
    default:
      return direction;
  }
};

const createdByMeta = (
  createdBy: string,
  t: ReturnType<typeof useTranslations>,
) => {
  switch (createdBy) {
    case "user":
      return t("created_by.user");
    case "admin":
      return t("created_by.admin");
    case "system":
      return t("created_by.system");
    default:
      return createdBy;
  }
};

const parseApiDateTime = (value?: string | null) => {
  if (!value) return { date: "", time: "" };
  const s = String(value);
  const parts = s.split(" ");
  const date = parts[0] ?? "";
  const time = (parts[1] ?? "").slice(0, 5);
  return { date, time };
};

export default function PaymentsSection() {
  const t = useTranslations("DASHBOARD.PAYMENTS");
  const locale = useLocale();
  const isRtl = locale === "ar";

  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const [search, setSearch] = useState(searchParams.get("search") ?? "");
  const [status, setStatus] = useState(searchParams.get("status") ?? "");
  const [paymentMethod, setPaymentMethod] = useState(
    searchParams.get("payment_method") ?? "",
  );
  const [createdBy, setCreatedBy] = useState(
    searchParams.get("created_by") ?? "",
  );
  const [direction, setDirection] = useState(
    searchParams.get("direction") ?? "",
  );
  const [dateFilterType, setDateFilterType] = useState(
    searchParams.get("date_filter_type") ?? "transaction_date",
  );
  const [fromDate, setFromDate] = useState(searchParams.get("from_date") ?? "");
  const [toDate, setToDate] = useState(searchParams.get("to_date") ?? "");

  const filters = useMemo(
    () => ({
      per_page: 15,
      search: search || undefined,
      status: status || undefined,
      payment_method: paymentMethod || undefined,
      created_by: createdBy || undefined,
      direction: direction || undefined,
      date_filter_type: dateFilterType || undefined,
      from_date: fromDate || undefined,
      to_date: toDate || undefined,
      cursor: searchParams.get("cursor") || undefined,
    }),
    [
      createdBy,
      dateFilterType,
      direction,
      fromDate,
      paymentMethod,
      search,
      status,
      toDate,
      searchParams,
    ],
  );

  const {
    data: transactions,
    isLoading,
    isError,
  } = useFinancialTransactions(filters);

  const applyFiltersToUrl = () => {
    const params = new URLSearchParams(searchParams.toString());
    const setOrDelete = (key: string, value: string) => {
      if (value) params.set(key, value);
      else params.delete(key);
    };

    setOrDelete("search", search.trim());
    setOrDelete("status", status);
    setOrDelete("payment_method", paymentMethod);
    setOrDelete("created_by", createdBy);
    setOrDelete("direction", direction);
    setOrDelete("date_filter_type", dateFilterType);
    setOrDelete("from_date", fromDate);
    setOrDelete("to_date", toDate);
    params.delete("cursor"); // Reset cursor when applying new filters

    router.replace(`${pathname}?${params.toString()}`);
  };

  const resetFilters = () => {
    setSearch("");
    setStatus("");
    setPaymentMethod("");
    setCreatedBy("");
    setDirection("");
    setDateFilterType("transaction_date");
    setFromDate("");
    setToDate("");
    const params = new URLSearchParams();
    params.set("tab", "payments");
    router.replace(`${pathname}?${params.toString()}`);
  };

  const items = transactions?.data ?? [];

  const totals = useMemo(() => {
    return items.reduce(
      (acc, p) => {
        // API returns formatted strings like "10,000.00"; Number() yields NaN.
        const amount = toMoneyNumber(p.amount, 0);
        const s = (p.status ?? "") as PaymentStatus;
        if (s === "approved") acc.approved += amount;
        else if (s === "pending") acc.pending += amount;
        else if (s === "rejected") acc.rejected += amount;
        else if (s === "refunded") acc.refunded += amount;
        acc.count += 1;
        return acc;
      },
      { approved: 0, pending: 0, rejected: 0, refunded: 0, count: 0 },
    );
  }, [items]);

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between gap-3">
        <h3 className="font-bold text-green-800 text-lg">{t("title")}</h3>
      </div>

      <Card className="border-none">
        <CardBody className="p-0">
          <div className="rounded-2xl bg-linear-to-br from-emerald-900 via-emerald-800 to-emerald-700 p-5 text-white">
            <div className="flex items-start justify-between gap-3">
              <div className="space-y-1">
                <div className="text-base font-extrabold text-start">
                  {t("quick_overview")}
                </div>
                <div className="text-white/80 text-sm">
                  {t("quick_subtitle")}
                </div>
              </div>
              <div className="text-xs bg-white/10 border border-white/15 rounded-full px-3 py-1">
                {t("total_operations", { count: String(totals.count) })}
              </div>
            </div>

            <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
              <div className="bg-white rounded-2xl p-4 text-slate-900">
                <div className="text-xs text-slate-500 text-start">
                  {t("card_paid")}
                </div>
                <div className="mt-1 text-lg font-extrabold text-emerald-700 text-start">
                  {renderAmount(totals.approved)}
                </div>
              </div>

              <div className="bg-white rounded-2xl p-4 text-slate-900">
                <div className="text-xs text-slate-500 text-start">
                  {t("card_pending")}
                </div>
                <div className="mt-1 text-lg font-extrabold text-amber-700 text-start">
                  {renderAmount(totals.pending)}
                </div>
              </div>

              <div className="bg-white rounded-2xl p-4 text-slate-900 text-start">
                <div className="text-xs text-slate-500 text-start">
                  {t("card_refunded")}
                </div>
                <div className="mt-1 text-lg font-extrabold text-slate-700">
                  {renderAmount(totals.refunded)}
                </div>
              </div>
            </div>
          </div>
        </CardBody>
      </Card>

      <Card className="border rounded-2xl shadow-sm">
        <CardBody className="p-5">
          <div className="flex flex-wrap gap-3 items-end">
            <div className="flex-1 min-w-48">
              <Input
                labelPlacement="outside"
                label={t("search")}
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                classNames={{
                  inputWrapper: "h-10",
                  input: "text-sm",
                }}
              />
            </div>

            <div className="flex-1 min-w-40">
              <div className="flex flex-col gap-1">
                <span className="text-xs text-slate-600 font-medium">
                  {t("status_label")}
                </span>
                <select
                  className="h-10 border border-slate-200 rounded-lg px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
                  value={status}
                  onChange={(e) => setStatus(e.target.value)}
                >
                  <option value="">{t("all")}</option>
                  <option value="pending">{t("status.pending")}</option>
                  <option value="approved">{t("status.approved")}</option>
                  <option value="rejected">{t("status.rejected")}</option>
                </select>
              </div>
            </div>

            <div className="flex-1 min-w-40">
              <div className="flex flex-col gap-1">
                <span className="text-xs text-slate-600 font-medium">
                  {t("payment_method_label")}
                </span>
                <select
                  className="h-10 border border-slate-200 rounded-lg px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
                  value={paymentMethod}
                  onChange={(e) => setPaymentMethod(e.target.value)}
                >
                  <option value="">{t("all")}</option>
                  <option value="wallet">{t("payment_method.wallet")}</option>
                  <option value="bank_transfer">
                    {t("payment_method.bank_transfer")}
                  </option>
                  <option value="cash">{t("payment_method.cash")}</option>
                  <option value="stcp">{t("payment_method.stcp")}</option>
                  <option value="electronic">
                    {t("payment_method.electronic")}
                  </option>
                </select>
              </div>
            </div>

            <div className="flex-1 min-w-40">
              <div className="flex flex-col gap-1">
                <span className="text-xs text-slate-600 font-medium">
                  {t("direction_label")}
                </span>
                <select
                  className="h-10 border border-slate-200 rounded-lg px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
                  value={direction}
                  onChange={(e) => setDirection(e.target.value)}
                >
                  <option value="">{t("all")}</option>
                  <option value="user_to_company">
                    {t("direction.user_to_company")}
                  </option>
                  <option value="company_to_user">
                    {t("direction.company_to_user")}
                  </option>
                </select>
              </div>
            </div>

            <div className="flex-1 min-w-40">
              <div className="flex flex-col gap-1">
                <span className="text-xs text-slate-600 font-medium">
                  {t("created_by_label")}
                </span>
                <select
                  className="h-10 border border-slate-200 rounded-lg px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
                  value={createdBy}
                  onChange={(e) => setCreatedBy(e.target.value)}
                >
                  <option value="">{t("all")}</option>
                  <option value="user">{t("created_by.user")}</option>
                  <option value="admin">{t("created_by.admin")}</option>
                  <option value="system">{t("created_by.system")}</option>
                </select>
              </div>
            </div>

            <div className="flex-1 min-w-40">
              <div className="flex flex-col gap-1">
                <span className="text-xs text-slate-600 font-medium">
                  {t("date_type_label")}
                </span>
                <select
                  className="h-10 border border-slate-200 rounded-lg px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
                  value={dateFilterType}
                  onChange={(e) => setDateFilterType(e.target.value)}
                >
                  <option value="transaction_date">
                    {t("date_type.transaction_date")}
                  </option>
                  <option value="created_at">
                    {t("date_type.created_at")}
                  </option>
                </select>
              </div>
            </div>

            <div className="flex-1 min-w-36">
              <div className="flex flex-col gap-1">
                <span className="text-xs text-slate-600 font-medium">
                  {t("from_date")}
                </span>
                <input
                  type="date"
                  className="h-10 border border-slate-200 rounded-lg px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
                  value={fromDate}
                  onChange={(e) => setFromDate(e.target.value)}
                />
              </div>
            </div>

            <div className="flex-1 min-w-36">
              <div className="flex flex-col gap-1">
                <span className="text-xs text-slate-600 font-medium">
                  {t("to_date")}
                </span>
                <input
                  type="date"
                  className="h-10 border border-slate-200 rounded-lg px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
                  value={toDate}
                  onChange={(e) => setToDate(e.target.value)}
                />
              </div>
            </div>

            <div className="flex gap-2 ml-auto">
              <Button
                className="bg-emerald-600 text-white h-10 px-4 text-sm font-medium"
                onPress={applyFiltersToUrl}
              >
                {t("apply")}
              </Button>
              <Button
                variant="flat"
                className="bg-slate-100 text-slate-700 h-10 px-4 text-sm font-medium"
                onPress={resetFilters}
              >
                {t("clear")}
              </Button>
            </div>
          </div>
        </CardBody>
      </Card>

      <Card className="border rounded-2xl shadow-sm">
        <CardBody className="p-5">
          <div className="flex items-center justify-between gap-3 mb-4">
            <h4 className="font-bold text-slate-800">{t("timeline_title")}</h4>
          </div>

          <div className="relative">
            <div
              className={`absolute top-0 bottom-0 w-0.5 bg-slate-100 ${
                isRtl ? "right-2.5" : "left-2.5"
              }`}
            />

            <div className="space-y-3">
              {isLoading && (
                <div className="text-sm text-slate-500">{t("loading")}</div>
              )}
              {isError && !isLoading && (
                <div className="text-sm text-rose-700">
                  {t("error_loading")}
                </div>
              )}
              {!isLoading && !isError && items.length === 0 && (
                <div className="text-sm text-slate-500">
                  {t("no_operations")}
                </div>
              )}
              {!isLoading &&
                !isError &&
                items.map((p) => {
                  const txStatus = (p.status ?? "rejected") as PaymentStatus;
                  const s = statusMeta(txStatus, t);
                  const m = methodMeta(p.payment_method as PaymentMethod, t);
                  const dt = parseApiDateTime(p.transaction_date);
                  const StatusIcon = s.icon;
                  const MethodIcon = m.icon;

                  return (
                    <div key={p.id} className="relative">
                      <div
                        className={`absolute top-6 h-3 w-3 rounded-full ${
                          s.dotClass
                        } ${isRtl ? "right-1.25" : "left-1.25"}`}
                      />

                      <div
                        className={`rounded-2xl border bg-white p-4 shadow-sm ${
                          isRtl ? "pr-8" : "pl-8"
                        }`}
                      >
                        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                          <div className="min-w-0">
                            <div
                              className={`text-sm font-extrabold ${s.amountClass}`}
                            >
                              {renderAmount(toMoneyNumber(p.amount, 0))}
                            </div>
                            <div className="text-xs text-slate-500 mt-1">
                              {p.unique_id}
                            </div>
                          </div>

                          <div className="flex flex-wrap items-center gap-2">
                            <Chip className={`${s.chipClass} border-0`}>
                              <span className="inline-flex items-center gap-1">
                                <StatusIcon className="h-4 w-4" />
                                {s.label}
                              </span>
                            </Chip>

                            <Chip className="bg-slate-50 text-slate-700 border-0">
                              <span className="inline-flex items-center gap-1">
                                <MethodIcon className="h-4 w-4" />
                                {m.label}
                              </span>
                            </Chip>

                            {p.direction && (
                              <Chip className="bg-slate-50 text-slate-700 border-0">
                                <span className="inline-flex items-center gap-1">
                                  <ArrowLeftRight className="h-4 w-4" />
                                  {directionMeta(p.direction, t)}
                                </span>
                              </Chip>
                            )}

                            <Chip className="bg-slate-50 text-slate-700 border-0">
                              <span className="inline-flex items-center gap-1">
                                <Clock className="h-4 w-4" />
                                {dt.time}
                              </span>
                            </Chip>

                            <Chip className="bg-slate-50 text-black border-0">
                              <span className="inline-flex items-center gap-1">
                                <CalendarDays className="h-4 w-4" />
                                {dt.date}
                              </span>
                            </Chip>
                          </div>
                        </div>

                        {p.detail && (
                          <div className="text-xs text-black font-bold mt-2">
                            {p.detail}
                          </div>
                        )}
                      </div>
                    </div>
                  );
                })}
            </div>
          </div>
        </CardBody>
      </Card>

      {/* Pagination */}
      {transactions?.links && (
        <div className="flex justify-center items-center gap-2 mt-4">
          <Button
            size="sm"
            variant="flat"
            isDisabled={!transactions.links.prev}
            onPress={() => {
              if (transactions.links.prev) {
                const url = new URL(transactions.links.prev);
                const cursor = url.searchParams.get("cursor");
                const params = new URLSearchParams(searchParams.toString());
                if (cursor) {
                  params.set("cursor", cursor);
                } else {
                  params.delete("cursor");
                }
                router.replace(`${pathname}?${params.toString()}`);
              }
            }}
          >
            السابق
          </Button>
          <span className="text-sm text-slate-600">
            صفحة{" "}
            {transactions.meta?.per_page
              ? `(${transactions.meta.per_page} عنصر)`
              : ""}
          </span>
          <Button
            size="sm"
            variant="flat"
            isDisabled={!transactions.links.next}
            onPress={() => {
              if (transactions.links.next) {
                const url = new URL(transactions.links.next);
                const cursor = url.searchParams.get("cursor");
                const params = new URLSearchParams(searchParams.toString());
                if (cursor) {
                  params.set("cursor", cursor);
                } else {
                  params.delete("cursor");
                }
                router.replace(`${pathname}?${params.toString()}`);
              }
            }}
          >
            التالي
          </Button>
        </div>
      )}
    </div>
  );
}