import { describe, expect, it, vi } from "vitest";
import { render, screen, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import ScooterEarningsTable from "@/components/earnings/ScooterEarningsTable";
import type {
  EarningVehicle,
  TransactionsPagination,
} from "@/lib/transactions";

function buildVehicle(
  overrides: Partial<EarningVehicle> = {},
): EarningVehicle {
  return {
    scooter_id: 1,
    code: "SC-001",
    status: "active",
    status_label: "نشطة",
    area: "الرياض",
    daily_revenue: 100,
    monthly_revenue: 2000,
    monthly_share: 500,
    rides_today: 4,
    utilization_percent: 65,
    your_share_percent: 25,
    your_share_revenue: 500,
    ...overrides,
  };
}

const defaultPagination: TransactionsPagination = {
  current_page: 1,
  last_page: 1,
  per_page: 10,
  total: 1,
};

describe("ScooterEarningsTable", () => {
  it("renders loading skeleton rows while data is loading", () => {
    const { container } = render(
      <ScooterEarningsTable
        rows={[]}
        currency="SAR"
        pagination={null}
        loading
        page={1}
        sort="monthly_revenue"
        onPageChange={vi.fn()}
        onSortChange={vi.fn()}
      />,
    );

    expect(screen.getByText("أرباح كل مركبة")).toBeInTheDocument();
    const skeletonRows = container.querySelectorAll("tbody tr");
    expect(skeletonRows).toHaveLength(5);
    expect(container.querySelectorAll(".animate-pulse").length).toBeGreaterThan(0);
  });

  it("renders the empty state when there are no rows", () => {
    render(
      <ScooterEarningsTable
        rows={[]}
        currency="SAR"
        pagination={null}
        loading={false}
        page={1}
        sort="monthly_revenue"
        onPageChange={vi.fn()}
        onSortChange={vi.fn()}
      />,
    );

    expect(screen.getByText("لا توجد بيانات لعرضها")).toBeInTheDocument();
    expect(screen.queryByText("إجمالي نصيبك هذا الشهر")).not.toBeInTheDocument();
  });

  it("renders formatted values and dashes for zero metrics", () => {
    render(
      <ScooterEarningsTable
        rows={[
          buildVehicle({
            scooter_id: 10,
            code: "SC-010",
            monthly_share: 0,
            monthly_revenue: 0,
            daily_revenue: 0,
            rides_today: 0,
          }),
        ]}
        currency="SAR"
        pagination={defaultPagination}
        loading={false}
        page={1}
        sort="monthly_revenue"
        onPageChange={vi.fn()}
        onSortChange={vi.fn()}
      />,
    );

    const row = screen.getByText("SC-010").closest("tr")!;
    const cells = within(row).getAllByRole("cell");
    expect(cells[0]).toHaveTextContent("—");
    expect(cells[1]).toHaveTextContent("—");
    expect(cells[2]).toHaveTextContent("—");
    expect(cells[3]).toHaveTextContent("—");
    expect(within(row).getByText("65%")).toBeInTheDocument();
  });

  it("renders positive earnings values and status labels", () => {
    render(
      <ScooterEarningsTable
        rows={[
          buildVehicle({
            scooter_id: 2,
            code: "SC-002",
            status: "maintenance",
            status_label: "صيانة",
            monthly_share: 750,
            monthly_revenue: 3000,
            daily_revenue: 150,
            rides_today: 6,
            area: "جدة",
          }),
        ]}
        currency="SAR"
        pagination={defaultPagination}
        loading={false}
        page={1}
        sort="monthly_revenue"
        onPageChange={vi.fn()}
        onSortChange={vi.fn()}
      />,
    );

    const row = screen.getByText("SC-002").closest("tr")!;
    expect(within(row).getByText("750 ريال")).toBeInTheDocument();
    expect(within(row).getByText("3,000 ريال")).toBeInTheDocument();
    expect(within(row).getByText("150 ريال")).toBeInTheDocument();
    expect(within(row).getByText("6")).toBeInTheDocument();
    expect(within(row).getByText("جدة")).toBeInTheDocument();
    expect(within(row).getByText("صيانة")).toBeInTheDocument();
    expect(screen.getByText("750 ريال", { selector: ".font-black" })).toBeInTheDocument();
  });

  it("applies default status styling for unknown statuses", () => {
    render(
      <ScooterEarningsTable
        rows={[
          buildVehicle({
            status: "offline",
            status_label: "غير متصلة",
          }),
        ]}
        currency="SAR"
        pagination={defaultPagination}
        loading={false}
        page={1}
        sort="monthly_revenue"
        onPageChange={vi.fn()}
        onSortChange={vi.fn()}
      />,
    );

    const statusBadge = screen.getByText("غير متصلة");
    expect(statusBadge.className).toContain("text-gray-400");
  });

  it("forwards sort changes to the parent", async () => {
    const user = userEvent.setup();
    const onSortChange = vi.fn();

    render(
      <ScooterEarningsTable
        rows={[buildVehicle()]}
        currency="SAR"
        pagination={defaultPagination}
        loading={false}
        page={1}
        sort="monthly_revenue"
        onPageChange={vi.fn()}
        onSortChange={onSortChange}
      />,
    );

    await user.click(screen.getByRole("button", { name: "عدد الرحلات" }));
    expect(onSortChange).toHaveBeenCalledWith("rides_today");

    await user.click(screen.getByRole("button", { name: "نصيبك" }));
    expect(onSortChange).toHaveBeenCalledWith("your_share_revenue");
  });

  it("uses totalMonthlyShare from the API when provided", () => {
    render(
      <ScooterEarningsTable
        rows={[buildVehicle({ monthly_share: 500 })]}
        currency="SAR"
        pagination={defaultPagination}
        loading={false}
        page={1}
        sort="monthly_revenue"
        totalMonthlyShare={9000}
        onPageChange={vi.fn()}
        onSortChange={vi.fn()}
      />,
    );

    expect(screen.getByText("9,000 ريال", { selector: ".font-black" })).toBeInTheDocument();
  });

  it("renders pagination controls and forwards page changes", async () => {
    const onPageChange = vi.fn();
    const user = userEvent.setup();

    render(
      <ScooterEarningsTable
        rows={[buildVehicle()]}
        currency="SAR"
        pagination={{
          current_page: 2,
          last_page: 3,
          per_page: 10,
          total: 25,
        }}
        loading={false}
        page={2}
        sort="monthly_revenue"
        onPageChange={onPageChange}
        onSortChange={vi.fn()}
      />,
    );

    expect(screen.getByText("25 مركبة")).toBeInTheDocument();

    await user.click(screen.getByRole("button", { name: "الصفحة السابقة" }));
    expect(onPageChange).toHaveBeenCalledWith(1);

    await user.click(screen.getByRole("button", { name: "3" }));
    expect(onPageChange).toHaveBeenCalledWith(3);

    await user.click(screen.getByRole("button", { name: "الصفحة التالية" }));
    expect(onPageChange).toHaveBeenCalledWith(3);
  });

  it("disables pagination controls while loading", () => {
    render(
      <ScooterEarningsTable
        rows={[buildVehicle()]}
        currency="SAR"
        pagination={{
          current_page: 1,
          last_page: 2,
          per_page: 10,
          total: 20,
        }}
        loading
        page={1}
        sort="monthly_revenue"
        onPageChange={vi.fn()}
        onSortChange={vi.fn()}
      />,
    );

    expect(screen.getByRole("button", { name: "الصفحة السابقة" })).toBeDisabled();
    expect(screen.getByRole("button", { name: "2" })).toBeDisabled();
    expect(screen.getByRole("button", { name: "الصفحة التالية" })).toBeDisabled();
  });
});