import * as React from "react";
import Link from "next/link";
import { ArrowRight, Package, Sparkles, Wallet } from "lucide-react";
import { formatNumber } from "@/lib/format";
import { newOrderTexts as tx } from "@/lib/i18n/neworder";
import { cn } from "@/lib/utils";

function Tile({
  icon,
  tone,
  label,
  children,
  footer,
}: {
  icon: React.ReactNode;
  tone: string;
  label: string;
  children: React.ReactNode;
  footer?: React.ReactNode;
}) {
  return (
    <div className="rounded-2xl border bg-card p-5 shadow-sm">
      <div className="flex items-start gap-3">
        <div
          className={cn(
            "flex size-10 shrink-0 items-center justify-center rounded-xl",
            tone,
          )}
        >
          {icon}
        </div>
        <div className="min-w-0 flex-1 space-y-1">
          <p className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
            {label}
          </p>
          {children}
        </div>
      </div>
      {footer ? <div className="mt-3">{footer}</div> : null}
    </div>
  );
}

export function WelcomeCards({
  username,
  balanceLabel,
  totalOrders,
}: {
  username: string;
  balanceLabel: string;
  totalOrders: number;
}) {
  return (
    <div className="grid gap-4 md:grid-cols-3">
      <Tile
        icon={<Sparkles className="size-5" />}
        tone="bg-blue-100 text-blue-600 dark:bg-blue-500/15 dark:text-blue-400"
        label={tx.welcomeTitle}
      >
        <p className="truncate font-display text-lg font-semibold tracking-tight">
          {username}
        </p>
        <p className="text-xs leading-relaxed text-muted-foreground">{tx.welcomeTip}</p>
      </Tile>

      <Tile
        icon={<Package className="size-5" />}
        tone="bg-cyan-100 text-cyan-600 dark:bg-cyan-500/15 dark:text-cyan-400"
        label={tx.totalOrdersTitle}
      >
        <p className="font-mono text-2xl font-semibold tracking-tight tabular-nums">
          {formatNumber(totalOrders, 0)}
        </p>
        <p className="text-xs text-muted-foreground">{tx.totalOrdersHint}</p>
      </Tile>

      <Tile
        icon={<Wallet className="size-5" />}
        tone="bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400"
        label={tx.balanceTitle}
        footer={
          <Link
            href="/addfunds"
            className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
          >
            {tx.addFunds}
            <ArrowRight className="size-3.5" />
          </Link>
        }
      >
        <p className="font-mono text-2xl font-semibold tracking-tight tabular-nums">
          {balanceLabel}
        </p>
        <p className="text-xs text-muted-foreground">{tx.addFundsHint}</p>
      </Tile>
    </div>
  );
}

export default WelcomeCards;