"use client";

import * as React from "react";
import { ArrowLeftRight } from "lucide-react";
import { toast } from "sonner";

import { ListPageCard } from "@/app/dashboard/_components";

import type { PaymentGatewaysResult } from "../_lib/payment-gateways-server-api";
import { fetchPaymentGateways } from "./api/payment-gateways.api";
import { PaymentGatewaysHeaderActions } from "./list-header-actions";
import { PaymentGatewaysTable } from "./payment-gateways-table";

type PaymentGatewaysViewProps = {
  initialResult: PaymentGatewaysResult;
};

export function PaymentGatewaysView({ initialResult }: PaymentGatewaysViewProps) {
  const [data, setData] = React.useState(initialResult.items);
  const [errorMessage, setErrorMessage] = React.useState(initialResult.errorMessage);
  const [isRefreshing, setIsRefreshing] = React.useState(false);

  const refresh = React.useCallback(async (showToast = false) => {
    setIsRefreshing(true);
    try {
      const result = await fetchPaymentGateways();
      setData(result.items);
      setErrorMessage(null);
      if (showToast) toast.success("Payment gateways refreshed");
    } catch (error) {
      const message =
        error instanceof Error ? error.message : "Failed to load payment gateways";
      setErrorMessage(message);
      toast.error(message);
    } finally {
      setIsRefreshing(false);
    }
  }, []);

  return (
    <ListPageCard
      icon={ArrowLeftRight}
      title="Payment gateways"
      breadcrumb={[{ label: "Plans & Orders" }, { label: "Payment gateways" }]}
      description="Gateways are provided as extensions. Use each gateway's detail page to configure credentials, status, and display order."
      actions={
        <PaymentGatewaysHeaderActions
          isRefreshing={isRefreshing}
          onRefresh={() => void refresh(true)}
        />
      }
    >
      <PaymentGatewaysTable data={data} errorMessage={errorMessage} />
    </ListPageCard>
  );
}