"use client";
import { useEffect, useState } from "react";
import { formatMoney } from "@/lib/format";
import { apiFetch, formatApiMsg } from "@/lib/api";
import { formatProfitRate } from "@/lib/profitRate";

export interface SettleableRide {
  id: number | string; // Assuming there is an ID or some unique identifier. If not, use ended_at/scooter_code
  scooter_code: string;
  ride_cost: number;
  share_amount: number;
  ended_at: string;
  start_address: string;
  end_address: string;
}

export interface SettleableSummary {
  total_revenue: number;
  total_share: number;
  profit_rate: number;
  currency: string;
}

export interface SettlementsPagination {
  current_page: number;
  last_page: number;
  per_page: number;
  total: number;
}

function buildPaginationPages(
  currentPage: number,
  lastPage: number,
): Array<{ key: string; page?: number }> {
  if (lastPage <= 7) {
    return Array.from({ length: lastPage }, (_, index) => ({
      key: `page-${index + 1}`,
      page: index + 1,
    }));
  }

  if (currentPage <= 4) {
    return [
      ...Array.from({ length: 5 }, (_, index) => ({
        key: `page-${index + 1}`,
        page: index + 1,
      })),
      { key: "ellipsis-before-last" },
      { key: `page-${lastPage}`, page: lastPage },
    ];
  }

  if (currentPage >= lastPage - 3) {
    return [
      { key: "page-1", page: 1 },
      { key: "ellipsis-after-first" },
      ...Array.from({ length: 5 }, (_, index) => ({
        key: `page-${lastPage - 4 + index}`,
        page: lastPage - 4 + index,
      })),
    ];
  }

  return [
    { key: "page-1", page: 1 },
    { key: "ellipsis-before-current" },
    { key: `page-${currentPage - 1}`, page: currentPage - 1 },
    { key: `page-${currentPage}`, page: currentPage },
    { key: `page-${currentPage + 1}`, page: currentPage + 1 },
    { key: "ellipsis-after-current" },
    { key: `page-${lastPage}`, page: lastPage },
  ];
}

interface SettleableRidesResponse {
  summary: SettleableSummary;
  rides: SettleableRide[];
  pagination: SettlementsPagination;
}

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

function Pagination({
  pagination,
  onPageChange,
  loading,
}: Readonly<{
  pagination: SettlementsPagination;
  onPageChange: (p: number) => void;
  loading: boolean;
}>) {
  const { current_page, last_page, total } = pagination;

  const pages = buildPaginationPages(current_page, last_page);

  return (
    <div
      className="flex items-center justify-between px-6 py-4 border-t border-white/5"
      dir="rtl"
    >
      <p className="text-gray-500 text-xs">{total} رحلة</p>
      <div className="flex items-center gap-1" dir="ltr">
        <button
          onClick={() => onPageChange(Math.max(1, current_page - 1))}
          disabled={current_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 cursor-pointer"
          aria-label="الصفحة السابقة"
        >
          <i className="ri-arrow-left-s-line text-lg" />
        </button>
        {pages.map((item) =>
          item.page === undefined ? (
            <span
              key={item.key}
              className="w-8 h-8 flex items-center justify-center text-gray-500 text-sm"
            >
              ...
            </span>
          ) : (
            <button
              key={item.key}
              onClick={() => onPageChange(item.page!)}
              disabled={loading}
              className={`w-8 h-8 flex items-center justify-center rounded-lg text-sm font-medium transition-colors cursor-pointer disabled:cursor-not-allowed ${
                item.page === current_page
                  ? "bg-[#FCD704] text-[#13151A]"
                  : "text-gray-400 hover:bg-white/5 hover:text-white"
              }`}
            >
              {item.page}
            </button>
          ),
        )}
        <button
          onClick={() => onPageChange(Math.min(last_page, current_page + 1))}
          disabled={current_page >= 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 cursor-pointer"
          aria-label="الصفحة التالية"
        >
          <i className="ri-arrow-right-s-line text-lg" />
        </button>
      </div>
    </div>
  );
}

function TableSkeleton() {
  return (
    <div className="animate-pulse">
      {/* Summary Skeleton */}
      <div className="grid grid-cols-3 gap-5 p-6 border-b border-white/5">
        <div className="h-16 bg-white/5 rounded-xl" />
        <div className="h-16 bg-white/5 rounded-xl" />
        <div className="h-16 bg-white/5 rounded-xl" />
      </div>
      {/* Rows Skeleton */}
      {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 SettleableRidesTable({
  onSettlementRequested,
  onProfitRateChange,
}: Readonly<{
  onSettlementRequested?: () => void;
  onProfitRateChange?: (profitRate: number | string) => void;
}>) {
  const [data, setData] = useState<SettleableRidesResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [page, setPage] = useState(1);
  const [refreshKey, setRefreshKey] = useState(0);
  const [submitting, setSubmitting] = useState(false);
  const [requestError, setRequestError] = useState("");
  const [requestSuccess, setRequestSuccess] = useState("");

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

    apiFetch<SettleableRidesResponse>(
      `/provider/settlements/settleable?perPage=15&paginate=true&page=${page}`,
      {
        method: "GET",
        successCase: (res) => {
          if (active && res.data) {
            setData(res.data);
            if (res.data.summary?.profit_rate !== undefined) {
              onProfitRateChange?.(res.data.summary.profit_rate);
            }
          }
        },
        errorCase: (res) => {
          if (active)
            setError(
              formatApiMsg(res.msg) || "تعذّر تحميل الرحلات القابلة للتسوية",
            );
        },
      },
    ).finally(() => {
      if (active) setLoading(false);
    });

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

  const canRequestSettlement =
    Boolean(data?.summary?.total_share) &&
    Boolean(data?.pagination?.total && data.pagination.total > 0);

  const handleRequestSettlement = async () => {
    if (!canRequestSettlement || submitting) {
      return;
    }

    setRequestError("");
    setRequestSuccess("");
    setSubmitting(true);

    await apiFetch("/provider/settlements", {
      method: "POST",
      getSuccess: true,
      successCase: (res) => {
        setRequestSuccess(
          formatApiMsg(res.msg) || "تم إرسال طلب التسوية بنجاح",
        );
        setRefreshKey((current) => current + 1);
        onSettlementRequested?.();
      },
      errorCase: (res) => {
        setRequestError(
          formatApiMsg(res.msg) || "تعذّر إرسال طلب التسوية، حاول مرة أخرى",
        );
      },
    });

    setSubmitting(false);
  };

  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 { summary, rides, pagination } = data || {};

  return (
    <div className="bg-[#1E2128] rounded-2xl overflow-hidden mb-6">
      <div className="px-6 py-4 border-b border-white/5 flex items-center justify-between gap-4">
        <div className="flex items-center gap-2">
          <i className="ri-e-bike-line text-gray-500 text-xl" />
          <h2 className="text-white font-bold text-lg">
            الرحلات القابلة للتسوية
          </h2>
        </div>
        <button
          type="button"
          onClick={handleRequestSettlement}
          disabled={!canRequestSettlement || submitting || loading}
          className="bg-[#FCD704] text-[#13151A] font-bold text-sm px-5 py-2.5 rounded-xl cursor-pointer whitespace-nowrap transition-all hover:bg-[#FCD704]/90 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
        >
          {submitting ? (
            <>
              <i className="ri-loader-4-line animate-spin text-base" />
              <span>جاري الإرسال...</span>
            </>
          ) : (
            <>
              <i className="ri-send-plane-fill text-base" />
              <span>طلب تسوية</span>
            </>
          )}
        </button>
      </div>

      {requestError && (
        <div className="mx-6 mt-4 bg-red-500/10 border border-red-500/30 rounded-xl p-3 text-center">
          <p className="text-red-400 text-sm">{requestError}</p>
        </div>
      )}
      {requestSuccess && (
        <div className="mx-6 mt-4 bg-green-500/10 border border-green-500/30 rounded-xl p-3 text-center">
          <p className="text-green-400 text-sm">{requestSuccess}</p>
        </div>
      )}

      {loading && !data ? (
        <TableSkeleton />
      ) : (
        <>
          {summary && (
            <div className="grid grid-cols-3 gap-5 p-6 border-b border-white/5">
              <div className="bg-[#13151A] rounded-xl p-4 flex flex-col justify-center">
                <p className="text-gray-400 text-xs mb-1">إجمالي الإيرادات</p>
                <p className="text-white font-black text-xl">
                  {formatMoney(summary.total_revenue, summary.currency)}
                </p>
              </div>
              <div className="bg-[#FCD704]/10 border border-[#FCD704]/20 rounded-xl p-4 flex flex-col justify-center">
                <p className="text-[#FCD704] text-xs font-bold mb-1">
                  إجمالي نصيبك ({formatProfitRate(summary.profit_rate, "")})
                </p>
                <p className="text-[#FCD704] font-black text-xl">
                  {formatMoney(summary.total_share, summary.currency)}
                </p>
              </div>
              <div className="bg-[#13151A] rounded-xl p-4 flex flex-col justify-center">
                <p className="text-gray-400 text-xs mb-1">نسبة الأرباح</p>
                <p className="text-white font-black text-xl">
                  {formatProfitRate(summary.profit_rate)}
                </p>
              </div>
            </div>
          )}

          <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">
                    المركبة
                  </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>
                {!rides || rides.length === 0 ? (
                  <tr>
                    <td colSpan={6} className="py-12 text-center">
                      <i className="ri-file-list-3-line text-gray-600 text-4xl mb-3 block" />
                      <p className="text-gray-500 text-sm">
                        لا توجد رحلات قابلة للتسوية حالياً
                      </p>
                    </td>
                  </tr>
                ) : (
                  rides.map((ride, i) => (
                    <tr
                      key={ride.id || `${ride.scooter_code}-${i}`}
                      className="border-b border-white/5 last:border-0 hover:bg-white/2 transition-colors"
                    >
                      <td className="py-4 px-6">
                        <span className="text-white font-semibold text-sm">
                          # {ride.id}
                        </span>
                      </td>
                      <td className="py-4 px-6">
                        <span className="text-white font-semibold text-sm">
                          {ride.scooter_code}
                        </span>
                      </td>
                      <td className="py-4 px-6">
                        <span className="text-gray-300 text-sm">
                          {formatMoney(ride.ride_cost, summary?.currency || "")}
                        </span>
                      </td>
                      <td className="py-4 px-6">
                        <span className="text-[#FCD704] font-bold text-sm">
                          {formatMoney(
                            ride.share_amount,
                            summary?.currency || "",
                          )}
                        </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(ride.ended_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 text-xs text-gray-400 w-64 max-w-xs">
                        <div className="flex flex-col gap-0.5">
                          <div className="flex items-center gap-1">
                            <span className="text-green-500 font-bold">•</span>
                            <span
                              className="truncate"
                              title={ride.start_address}
                            >
                              {ride.start_address || "—"}
                            </span>
                          </div>
                          <span className="h-3 w-0.5 ms-0.5 bg-gray-600 rounded-full"></span>
                          <div className="flex items-center gap-1">
                            <span className="text-green-500 font-bold">•</span>
                            <span className="truncate" title={ride.end_address}>
                              {ride.end_address || "—"}
                            </span>
                          </div>
                        </div>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>

          {pagination && pagination.last_page > 1 && (
            <Pagination
              pagination={pagination}
              loading={loading}
              onPageChange={setPage}
            />
          )}
        </>
      )}
    </div>
  );
}