"use client";

import Link from "next/link";
import { AlertTriangle, CheckCircle2, Loader2, ShoppingCart } from "lucide-react";
import { Button } from "@/components/ui/button";
import { newOrderTexts as tx } from "@/lib/i18n/neworder";
import type { NewOrderSuccess } from "@/lib/actions/order";

export function ChargePanel({
  chargeLabel,
  pending,
  disabled,
  notEnoughFunds,
  hint,
  lastOrder,
}: {
  chargeLabel: string;
  pending: boolean;
  disabled: boolean;
  notEnoughFunds: boolean;
  hint?: string;
  lastOrder: NewOrderSuccess | null;
}) {
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-end justify-between gap-3 rounded-2xl border bg-muted/40 px-4 py-3.5">
        <div className="space-y-0.5">
          <p className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
            {tx.chargeLabel}
          </p>
          <p className="font-mono text-2xl font-semibold tracking-tight tabular-nums">
            {chargeLabel}
          </p>
        </div>
        <p className="max-w-[16rem] text-right text-xs text-muted-foreground">
          {hint ?? tx.chargeHint}
        </p>
      </div>

      {notEnoughFunds ? (
        <div className="flex items-start gap-2.5 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2.5 text-sm text-amber-900 dark:border-amber-500/25 dark:bg-amber-500/10 dark:text-amber-300">
          <AlertTriangle className="mt-0.5 size-4 shrink-0" />
          <span>
            {tx.notEnoughFunds}{" "}
            <Link
              href="/addfunds"
              className="font-medium underline underline-offset-2 transition-colors hover:text-amber-700 dark:hover:text-amber-200"
            >
              {tx.notEnoughFundsCta}
            </Link>
          </span>
        </div>
      ) : null}

      <Button
        type="submit"
        size="lg"
        className="h-11 w-full"
        disabled={disabled || pending}
        aria-busy={pending}
      >
        {pending ? (
          <>
            <Loader2 className="size-4 animate-spin" />
            {tx.submitting}
          </>
        ) : (
          <>
            <ShoppingCart className="size-4" />
            {tx.submit}
          </>
        )}
      </Button>

      {lastOrder ? (
        <div className="space-y-2 rounded-2xl border border-emerald-200 bg-emerald-50 p-4 dark:border-emerald-500/25 dark:bg-emerald-500/10">
          <p className="flex items-center gap-2 font-display text-sm font-semibold text-emerald-800 dark:text-emerald-300">
            <CheckCircle2 className="size-4" />
            {tx.successTitle}
          </p>
          <p className="text-xs text-emerald-800/90 dark:text-emerald-300/90">
            {tx.successBody(String(lastOrder.orderId))}
          </p>
          <dl className="grid grid-cols-2 gap-x-4 gap-y-1 pt-1 text-xs">
            <dt className="text-emerald-800/70 dark:text-emerald-300/70">
              {tx.serviceLabel}
            </dt>
            <dd className="truncate text-right font-medium text-emerald-900 dark:text-emerald-200">
              {lastOrder.serviceName}
            </dd>
            <dt className="text-emerald-800/70 dark:text-emerald-300/70">
              {tx.quantityLabel}
            </dt>
            <dd className="text-right font-mono tabular-nums text-emerald-900 dark:text-emerald-200">
              {lastOrder.quantity}
            </dd>
            <dt className="text-emerald-800/70 dark:text-emerald-300/70">{tx.chargeLabel}</dt>
            <dd className="text-right font-mono tabular-nums text-emerald-900 dark:text-emerald-200">
              {lastOrder.charge}
            </dd>
          </dl>
          <Link
            href="/orders"
            className="inline-flex text-xs font-medium text-emerald-800 underline underline-offset-2 transition-colors hover:text-emerald-900 dark:text-emerald-300"
          >
            {tx.viewOrders}
          </Link>
        </div>
      ) : null}
    </div>
  );
}

export default ChargePanel;