import { DashboardPage } from "@/components/layout/dashboard-page";
import { getDashboardRole } from "@/lib/auth/dashboard-role";
import { PageHeader } from "@/components/shared/page";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { PaymentConfiguration } from "@/features/payment-channel/configuration";
import { PayoutConfiguration } from "@/features/payment-channel/payout-configuration";

export const metadata = { title: "Payment Channel Integration" };

type PaymentMode = "payin" | "payout";

function Page({
  previewState,
  mode,
  payinHref,
  payoutHref,
}: {
  previewState: "populated" | "empty" | "error";
  mode: PaymentMode;
  payinHref: string;
  payoutHref: string;
}) {
  return (
    <div className="space-y-5">
      <PageHeader title="Payment Channel Integration" />
      <nav aria-label="Payment direction" className="flex flex-wrap gap-2">
        <Button asChild variant={mode === "payin" ? "default" : "outline"}>
          <Link
            href={payinHref}
            aria-current={mode === "payin" ? "page" : undefined}
          >
            Pay-in
          </Link>
        </Button>
        <Button asChild variant={mode === "payout" ? "default" : "outline"}>
          <Link
            href={payoutHref}
            aria-current={mode === "payout" ? "page" : undefined}
          >
            Payout
          </Link>
        </Button>
      </nav>
      <div>
        {mode === "payin" ? (
          <PaymentConfiguration previewState={previewState} />
        ) : (
          <PayoutConfiguration />
        )}
      </div>
    </div>
  );
}

export default async function DashboardRoute(props: {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}) {
  const query = await props.searchParams;
  const role = await getDashboardRole(
    Array.isArray(query.role) ? query.role[0] : query.role,
  );
  const requestedState = Array.isArray(query.state)
    ? query.state[0]
    : query.state;
  const previewState =
    requestedState === "empty" || requestedState === "error"
      ? requestedState
      : "populated";
  const requestedMode = Array.isArray(query.mode) ? query.mode[0] : query.mode;
  const mode: PaymentMode = requestedMode === "payout" ? "payout" : "payin";
  const preservedParams = new URLSearchParams();
  const requestedRole = Array.isArray(query.role) ? query.role[0] : query.role;
  if (typeof requestedRole === "string")
    preservedParams.set("role", requestedRole);
  if (requestedState === "empty" || requestedState === "error")
    preservedParams.set("state", requestedState);
  const hrefForMode = (nextMode: PaymentMode) => {
    const params = new URLSearchParams(preservedParams);
    params.set("mode", nextMode);
    return `/payment-channel?${params.toString()}`;
  };
  return (
    <DashboardPage role={role}>
      <Page
        previewState={previewState}
        mode={mode}
        payinHref={hrefForMode("payin")}
        payoutHref={hrefForMode("payout")}
      />
    </DashboardPage>
  );
}