"use client";

import type { ComponentType } from "react";
import { Clock, ShieldAlert, ShieldX } from "lucide-react";
import { Container } from "@/components/common/Container";
import { Card, CardContent } from "@/components/common/Card";
import { ButtonLink } from "@/components/common/Button";
import { useTranslation } from "@/hooks/useTranslation";
import { cn } from "@/lib/utils";
import type { KycStatus } from "@/types";

interface GateInfo {
  icon: ComponentType<{ className?: string }>;
  cls: string;
  iconBg: string;
  iconCls: string;
  titleKey: string;
  messageKey: string;
  ctaKey?: string;
}

const GATE_INFO: Record<Exclude<KycStatus, "verified">, GateInfo> = {
  unverified: {
    icon: ShieldAlert,
    cls: "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300",
    iconBg: "bg-amber-100 dark:bg-amber-500/20",
    iconCls: "text-amber-600 dark:text-amber-400",
    titleKey: "agent.kycGate.unverifiedTitle",
    messageKey: "agent.kycGate.unverifiedMessage",
    ctaKey: "agent.kycGate.cta",
  },
  pending: {
    icon: Clock,
    cls: "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-500/20 dark:bg-blue-500/10 dark:text-blue-300",
    iconBg: "bg-blue-100 dark:bg-blue-500/20",
    iconCls: "text-blue-600 dark:text-blue-400",
    titleKey: "agent.kycGate.pendingTitle",
    messageKey: "agent.kycGate.pendingMessage",
  },
  rejected: {
    icon: ShieldX,
    cls: "border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-500/20 dark:bg-rose-500/10 dark:text-rose-300",
    iconBg: "bg-rose-100 dark:bg-rose-500/20",
    iconCls: "text-rose-600 dark:text-rose-400",
    titleKey: "agent.kycGate.rejectedTitle",
    messageKey: "agent.kycGate.rejectedMessage",
    ctaKey: "agent.kycGate.resubmitCta",
  },
};

interface AgentKycGateProps {
  status: Exclude<KycStatus, "verified">;
}

/** Full-page block for agent money-movement routes that require a verified KYC status. */
export function AgentKycGate({ status }: AgentKycGateProps) {
  const { t } = useTranslation();
  const info = GATE_INFO[status];
  const Icon = info.icon;

  return (
    <Container className="max-w-2xl">
      <Card className={cn("border", info.cls)}>
        <CardContent className="flex flex-col items-center gap-4 py-10 text-center">
          <span className={cn("grid h-16 w-16 place-items-center rounded-2xl", info.iconBg)}>
            <Icon className={cn("h-8 w-8", info.iconCls)} />
          </span>
          <div>
            <h1 className="text-lg font-bold">{t(info.titleKey)}</h1>
            <p className="mt-1.5 text-sm opacity-80">{t(info.messageKey)}</p>
          </div>
          {info.ctaKey && (
            <ButtonLink
              href="/agent/kyc"
              size="md"
              variant="outline"
              className="border-current bg-white/60 dark:bg-slate-950/20"
            >
              {t(info.ctaKey)}
            </ButtonLink>
          )}
        </CardContent>
      </Card>
    </Container>
  );
}