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

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

const STATUS_INFO: Record<Exclude<KycStatus, "verified">, StatusInfo> = {
  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: "app.dashboard.kyc.unverifiedTitle",
    messageKey: "app.dashboard.kyc.unverifiedMessage",
    ctaKey: "app.dashboard.kyc.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: "app.dashboard.kyc.pendingTitle",
    messageKey: "app.dashboard.kyc.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: "app.dashboard.kyc.rejectedTitle",
    messageKey: "app.dashboard.kyc.rejectedMessage",
    ctaKey: "app.dashboard.kyc.resubmitCta",
  },
};

export function KycStatusBanner() {
  const { user } = useAuth();
  const { t } = useTranslation();

  if (!user || user.kycStatus === "verified") return null;

  const info = STATUS_INFO[user.kycStatus];
  const Icon = info.icon;

  return (
    <div className={cn("flex flex-col gap-4 rounded-2xl border px-5 py-4 sm:flex-row sm:items-center sm:justify-between", info.cls)}>
      <div className="flex items-center gap-4">
        <span className={cn("grid h-12 w-12 shrink-0 place-items-center rounded-xl", info.iconBg)}>
          <Icon className={cn("h-6 w-6", info.iconCls)} />
        </span>
        <div>
          <p className="text-sm font-bold">{t(info.titleKey)}</p>
          <p className="mt-0.5 text-xs opacity-80">{t(info.messageKey)}</p>
        </div>
      </div>
      {info.ctaKey && (
        <ButtonLink href="/settings?tab=kyc" size="sm" variant="outline" className={cn("shrink-0 self-start border-current bg-white/60 sm:self-center dark:bg-slate-950/20", info.iconCls)}>
          {t(info.ctaKey)}
        </ButtonLink>
      )}
    </div>
  );
}