"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import { formatMoney } from "@/lib/format";
import { apiFetch, formatApiMsg } from "@/lib/api";
import {
  formatAmountWithProfitRateHeader,
  normalizeProfitRate,
  resolveProfitRateFromRecord,
  type ProfitRateValue,
} from "@/lib/profitRate";
import { SettlementsPagination } from "./SettleableRidesTable"; // Reuse the pagination type

export interface Settlement {
  id: number | string;
  status: "pending" | "rejected" | "accepted";
  status_label: string;
  rides_count: number;
  total_revenue: number;
  total_amount: number;
  profit_rate: number;
  requested_at: string;
  reviewed_at: string | null;
  rejection_reason?: string;
  transfer_proof_url?: string;
}

interface SettlementsResponse {
  profit_rate?: number | string;
  summary?: {
    profit_rate?: number | string;
  };
  settlements: Settlement[];
  pagination: SettlementsPagination;
}

function resolveProfitRate(
  data: SettlementsResponse | null | undefined,
  profitRate?: ProfitRateValue,
): number | string | null {
  const explicit = normalizeProfitRate(profitRate);
  if (explicit !== null) {
    return explicit;
  }

  return resolveProfitRateFromRecord(data?.summary ?? null) ??
    resolveProfitRateFromRecord(
      (data ?? null) as unknown as Record<string, unknown> | null,
    );
}

function formatAmountColumnHeader(
  data: SettlementsResponse | null | undefined,
  profitRate?: ProfitRateValue,
): string {
  return formatAmountWithProfitRateHeader(resolveProfitRate(data, profitRate));
}

const STATUS_FILTERS = [
  { label: "الكل", value: "" },
  { label: "قيد المراجعة", value: "pending" },
  { label: "تم التحويل", value: "accepted" },
  { label: "مرفوض", value: "rejected" },
] as const;

const TABLE_SKELETON_KEYS = [
  "settlement-skeleton-1",
  "settlement-skeleton-2",
  "settlement-skeleton-3",
  "settlement-skeleton-4",
  "settlement-skeleton-5",
] as const;

function getSettlementStatusClass(status: Settlement["status"]): string {
  if (status === "pending") {
    return "text-blue-400 bg-blue-400/15";
  }
  if (status === "accepted") {
    return "text-green-400 bg-green-400/15";
  }
  if (status === "rejected") {
    return "text-red-400 bg-red-400/15";
  }
  return "text-gray-400 bg-white/5";
}

function TableSkeleton() {
  return (
    <div className="animate-pulse">
      {TABLE_SKELETON_KEYS.map((key) => (
        <div
          key={key}
          className="flex justify-between items-center py-4 px-6 border-b border-white/5"
        >
          <div className="h-4 w-24 bg-white/10 rounded" />
          <div className="h-4 w-16 bg-white/5 rounded" />
          <div className="h-4 w-20 bg-white/5 rounded" />
          <div className="h-4 w-24 bg-white/5 rounded" />
          <div className="h-4 w-32 bg-white/5 rounded" />
        </div>
      ))}
    </div>
  );
}

export default function SettlementsTable({
  refreshKey = 0,
  profitRate = null,
}: Readonly<{
  refreshKey?: number;
  profitRate?: number | string | null;
}>) {
  const [data, setData] = useState<SettlementsResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [page, setPage] = useState(1);
  const [status, setStatus] = useState("");

  useEffect(() => {
    let active = true;
    setLoading(true);
    setError("");

    const queryParams = new URLSearchParams();
    queryParams.set("perPage", "15");
    queryParams.set("page", page.toString());
    if (status) queryParams.set("status", status);

    apiFetch<SettlementsResponse>(
      `/provider/settlements?${queryParams.toString()}`,
      {
        method: "GET",
        successCase: (res) => {
          if (active && res.data) setData(res.data);
        },
        errorCase: (res) => {
          if (active)
            setError(formatApiMsg(res.msg) || "تعذّر تحميل طلبات التسوية");
        },
      },
    ).finally(() => {
      if (active) setLoading(false);
    });

    return () => {
      active = false;
    };
  }, [page, status, refreshKey]);

  if (error) {
    return (
      <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-8 text-center mb-6">
        <i className="ri-error-warning-line text-red-400 text-3xl mb-3 block" />
        <p className="text-red-400 text-sm">{error}</p>
      </div>
    );
  }

  const { settlements, pagination } = data || {};

  return (
    <div className="bg-[#1E2128] rounded-2xl overflow-hidden">
      <div className="px-6 py-4 border-b border-white/5 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <i className="ri-history-line text-gray-500 text-xl" />
          <h2 className="text-white font-bold text-lg">سجل التسويات</h2>
        </div>

        <div className="flex items-center gap-2">
          {STATUS_FILTERS.map((f) => (
            <button
              key={f.value}
              onClick={() => {
                setStatus(f.value);
                setPage(1); // Reset page on filter change
              }}
              disabled={loading}
              className={`px-3 py-1.5 rounded-lg text-xs font-semibold cursor-pointer transition-all disabled:opacity-50 disabled:cursor-not-allowed ${
                status === f.value
                  ? "bg-[#FCD704] text-[#13151A]"
                  : "bg-[#13151A] text-gray-400 hover:text-white"
              }`}
            >
              {f.label}
            </button>
          ))}
        </div>
      </div>

      {loading && !data ? (
        <TableSkeleton />
      ) : (
        <>
          <div className="overflow-x-auto relative">
            {loading && data && (
              <div className="absolute inset-0 bg-[#1E2128]/50 backdrop-blur-[1px] flex items-center justify-center z-10">
                <i className="ri-loader-4-line animate-spin text-[#FCD704] text-3xl" />
              </div>
            )}
            <table className="w-full text-right">
              <thead>
                <tr className="border-b border-white/5">
                  <th className="text-gray-400 text-xs font-medium py-3 px-6">
                    رقم الطلب
                  </th>
                  <th className="text-gray-400 text-xs font-medium py-3 px-6">
                    {formatAmountColumnHeader(data, profitRate)}
                  </th>
                  <th className="text-gray-400 text-xs font-medium py-3 px-6">
                    عدد الرحلات
                  </th>
                  <th className="text-gray-400 text-xs font-medium py-3 px-6">
                    تاريخ الطلب
                  </th>
                  <th className="text-gray-400 text-xs font-medium py-3 px-6">
                    تاريخ المراجعة
                  </th>
                  <th className="text-gray-400 text-xs font-medium py-3 px-6">
                    الحالة
                  </th>
                  <th className="text-gray-400 text-xs font-medium py-3 px-6"></th>
                </tr>
              </thead>
              <tbody>
                {!settlements || settlements.length === 0 ? (
                  <tr>
                    <td colSpan={7} className="py-12 text-center">
                      <i className="ri-folder-open-line text-gray-600 text-4xl mb-3 block" />
                      <p className="text-gray-500 text-sm">
                        لا توجد تسويات تطابق الفلتر
                      </p>
                    </td>
                  </tr>
                ) : (
                  settlements.map((settlement) => (
                    <Link
                      href={`/settlements/details?id=${settlement.id}`}
                      key={settlement.id}
                      className="table-row border-b border-white/5 last:border-0 hover:bg-white/5 transition-colors cursor-pointer group"
                    >
                      <td className="py-4 px-6">
                        <span className="text-white font-semibold text-sm">
                          # {settlement.id}
                        </span>
                      </td>
                      <td className="py-4 px-6">
                        <span className="text-[#FCD704] font-bold text-sm">
                          {formatMoney(settlement.total_amount, "SAR")}
                        </span>
                        <div className="text-gray-500 text-[10px]">
                          من أصل {formatMoney(settlement.total_revenue, "SAR")}
                        </div>
                      </td>
                      <td className="py-4 px-6">
                        <span className="text-gray-300 text-sm">
                          {settlement.rides_count}
                        </span>
                      </td>
                      <td className="py-4 px-6">
                        <div className="flex items-center gap-1.5">
                          <i className="ri-time-line text-gray-500 text-xs" />
                          <span className="text-gray-400 text-sm" dir="ltr">
                            {new Date(settlement.requested_at).toLocaleString(
                              "en-GB",
                              {
                                day: "numeric",
                                month: "short",
                                year: "numeric",
                                hour: "2-digit",
                                minute: "2-digit",
                              },
                            )}
                          </span>
                        </div>
                      </td>
                      <td className="py-4 px-6">
                        <div className="flex items-center gap-1.5">
                          <i className="ri-time-line text-gray-500 text-xs" />
                          <span className="text-gray-400 text-sm" dir="ltr">
                            {new Date(settlement.requested_at).toLocaleString(
                              "en-GB",
                              {
                                day: "numeric",
                                month: "short",
                                year: "numeric",
                                hour: "2-digit",
                                minute: "2-digit",
                              },
                            )}
                          </span>
                        </div>
                      </td>
                      <td className="py-4 px-6">
                        <span
                          className={`text-xs font-semibold px-2.5 py-1 rounded-full whitespace-nowrap ${getSettlementStatusClass(settlement.status)}`}
                        >
                          ● {settlement.status_label}
                        </span>
                      </td>
                      <td className="py-4 px-6 text-left">
                        <div className="flex justify-end opacity-0 group-hover:opacity-100 transition-opacity">
                          <i className="ri-arrow-left-line text-gray-400 text-lg" />
                        </div>
                      </td>
                    </Link>
                  ))
                )}
              </tbody>
            </table>
          </div>

          {pagination && pagination.last_page > 1 && (
            <div className="flex items-center justify-between px-6 py-4 border-t border-white/5">
              <p className="text-gray-500 text-xs">{pagination.total} تسوية</p>
              <div className="flex items-center gap-1" dir="ltr">
                <button
                  onClick={() => setPage(Math.max(1, page - 1))}
                  disabled={page <= 1 || loading}
                  className="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:bg-white/5 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                >
                  <i className="ri-arrow-left-s-line text-lg" />
                </button>
                {Array.from(
                  { length: pagination.last_page },
                  (_, i) => i + 1,
                ).map((p) => (
                  <button
                    key={p}
                    onClick={() => setPage(p)}
                    disabled={loading}
                    className={`w-8 h-8 flex items-center justify-center rounded-lg text-sm font-medium transition-colors disabled:cursor-not-allowed ${
                      p === page
                        ? "bg-[#FCD704] text-[#13151A]"
                        : "text-gray-400 hover:bg-white/5 hover:text-white"
                    }`}
                  >
                    {p}
                  </button>
                ))}
                <button
                  onClick={() =>
                    setPage(Math.min(pagination.last_page, page + 1))
                  }
                  disabled={page >= pagination.last_page || loading}
                  className="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:bg-white/5 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                >
                  <i className="ri-arrow-right-s-line text-lg" />
                </button>
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}