import { cn } from '@/lib/utils';
import {
  ClockIcon,
  ShieldCheckIcon,
  ShieldIcon,
  WarningCircleIcon,
  XCircleIcon,
} from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';

type Status =
  | 'success'
  | 'pending'
  | 'not-submited'
  | 'not submit'
  | 'failed'
  | 're-submit'
  | 'rejected';

type Props = {
  status: Status;
  className?: string;
};

const normalizeStatus = (status: Status) => {
  const s = status.toLowerCase().trim();

  if (s === 'not-submited' || s === 'not submit') return 'not_submit';
  if (s === 're-submit') return 'resubmit';
  if (s === 'failed') return 'rejected';

  return s; // success | pending | rejected
};

export default function KycStatusCard({ status, className }: Props) {
  const { t } = useTranslation();
  const s = normalizeStatus(status);

  const config = {
    not_submit: {
      title: t('Please Verify Your KYC Documents'),
      description: t(
        'Your account verification is not submitted yet. Please upload the required KYC documents to complete the verification process and unlock all features.',
      ),
      wrapper: 'bg-warning-light/10 border-white/10',
      iconClass: 'text-warning-light',
      Icon: ShieldIcon,
    },
    pending: {
      title: t('KYC Verification Pending'),
      description: t(
        'Your KYC documents have been successfully submitted and are currently under review. This process usually takes a short time. We will notify you once the verification is complete.',
      ),
      wrapper: 'bg-white/5 border-white/10',
      iconClass: '',
      iconStyle: { color: '#8C45FF' }, // exception color
      Icon: ClockIcon,
    },
    resubmit: {
      title: t('KYC Verification Rejected, Please Resubmit.'),
      description: t(
        'Some of your submitted documents did not meet the verification requirements. Please review the guidelines and resubmit clear and valid documents to proceed.',
      ),
      wrapper: 'bg-warning-light/10 border-white/10',
      iconClass: 'text-warning-light',
      Icon: WarningCircleIcon,
    },
    rejected: {
      title: t('KYC Verification Rejected'),
      description: t(
        'Your KYC verification has been rejected due to invalid or incomplete information. Please contact support or submit correct documents for another review.',
      ),
      wrapper: 'bg-destructive/10 border-white/10',
      iconClass: 'text-destructive',
      Icon: XCircleIcon,
    },
    success: {
      title: t('KYC Verified'),
      description: t(
        'Your identity has been successfully verified. You now have full access to all platform features and transactions without any restrictions.',
      ),
      wrapper: 'bg-success/10 border-white/10',
      iconClass: 'text-success',
      Icon: ShieldCheckIcon,
    },
  } as const;

  const current = config[s as keyof typeof config] ?? config.not_submit;

  const Icon = current.Icon;

  return (
    <div
      className={cn(
        'rounded-2xl border px-4 py-2.5',
        current.wrapper,
        className,
      )}
    >
      <div className="mb-2.5 flex items-center gap-2">
        <Icon
          weight="fill"
          className={cn('text-lg', current.iconClass)}
          style={'iconStyle' in current ? current.iconStyle : undefined}
        />
        <h3 className="font-medium">{current.title}</h3>
      </div>

      <p className="text-black/50 dark:text-white/50">{current.description}</p>
    </div>
  );
}