"use client";

import * as React from "react";
import { Check, Copy, Link2, Percent, Wallet } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { affiliatesTexts } from "@/lib/i18n/affiliates";

export function ReferralLinkCard({
  url,
  code,
  commissionPercent,
  minPayout,
}: {
  url: string;
  code: string;
  commissionPercent: string;
  minPayout: string;
}) {
  const [copied, setCopied] = React.useState(false);
  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);

  React.useEffect(
    () => () => {
      if (timer.current) clearTimeout(timer.current);
    },
    [],
  );

  async function copy() {
    try {
      await navigator.clipboard.writeText(url);
      setCopied(true);
      toast.success(affiliatesTexts.linkCopied);
      if (timer.current) clearTimeout(timer.current);
      timer.current = setTimeout(() => setCopied(false), 1800);
    } catch {
      toast.error(affiliatesTexts.copyFailed);
    }
  }

  return (
    <div className="overflow-hidden rounded-2xl border bg-card shadow-sm">
      <div className="relative border-b bg-gradient-to-br from-blue-600 to-blue-700 px-5 py-6 text-white sm:px-6 dark:from-[#132347] dark:to-[#0e1a3a]">
        <div className="pointer-events-none absolute -top-16 -right-10 size-52 rounded-full bg-cyan-400/20 blur-3xl" />
        <div className="relative space-y-4">
          <div className="flex items-center gap-2 text-[11px] font-semibold tracking-wider text-white/60 uppercase">
            <Link2 className="size-3.5" />
            {affiliatesTexts.referralLinkTitle}
          </div>

          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
            <div className="min-w-0 flex-1 rounded-xl border border-white/15 bg-white/10 px-3.5 py-2.5">
              <p className="truncate font-mono text-sm text-white" title={url}>
                {url}
              </p>
            </div>
            <Button
              type="button"
              onClick={copy}
              className="shrink-0 bg-white text-blue-700 hover:bg-white/90"
            >
              {copied ? <Check className="size-4" /> : <Copy className="size-4" />}
              {affiliatesTexts.copyLink}
            </Button>
          </div>

          <p className="max-w-2xl text-sm text-white/70">
            {affiliatesTexts.referralLinkHint}
          </p>
        </div>
      </div>

      <dl className="grid gap-px bg-border sm:grid-cols-3">
        <div className="flex items-start gap-3 bg-card px-5 py-4 sm:px-6">
          <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
            <Link2 className="size-4" />
          </div>
          <div className="min-w-0">
            <dt className="text-[11px] font-semibold tracking-wider text-muted-foreground uppercase">
              {affiliatesTexts.referralCode}
            </dt>
            <dd className="mt-0.5 truncate font-mono text-sm font-medium">{code}</dd>
          </div>
        </div>

        <div className="flex items-start gap-3 bg-card px-5 py-4 sm:px-6">
          <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-cyan-500/10 text-cyan-600 dark:text-cyan-400">
            <Percent className="size-4" />
          </div>
          <div className="min-w-0">
            <dt className="text-[11px] font-semibold tracking-wider text-muted-foreground uppercase">
              {affiliatesTexts.commission}
            </dt>
            <dd className="mt-0.5 font-mono text-sm font-medium">{commissionPercent}%</dd>
            <p className="text-xs text-muted-foreground">
              {affiliatesTexts.commissionHint}
            </p>
          </div>
        </div>

        <div className="flex items-start gap-3 bg-card px-5 py-4 sm:px-6">
          <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
            <Wallet className="size-4" />
          </div>
          <div className="min-w-0">
            <dt className="text-[11px] font-semibold tracking-wider text-muted-foreground uppercase">
              {affiliatesTexts.minimumPayout}
            </dt>
            <dd className="mt-0.5 font-mono text-sm font-medium">{minPayout}</dd>
            <p className="text-xs text-muted-foreground">
              {affiliatesTexts.minimumPayoutHint}
            </p>
          </div>
        </div>
      </dl>
    </div>
  );
}

export default ReferralLinkCard;