import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { useInitials } from '@/hooks/use-initials';
import { getImageUrl } from '@/utils/getImageUrl';
import { ArrowUpRightIcon, ReceiptIcon, UserIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';
import DetailRow from './detail-row';
import { TYPE_LABEL, type Transaction } from './types';

export default function UserCard({
  transaction,
}: {
  transaction: Transaction;
}) {
  const getInitials = useInitials();
  const { t } = useTranslation();

  return (
    <div className="rounded-2xl border border-black/5 bg-white p-5">
      <h3 className="mb-1 text-xs font-semibold tracking-widest text-black/30 uppercase">
        {t('User')}
      </h3>
      <Separator className="mb-4" />

      <div className="mb-4 flex flex-col items-center text-center">
        <Avatar className="mb-3 size-16 overflow-hidden rounded-full">
          <AvatarImage
            src={getImageUrl(transaction.user.profile?.profile_photo)}
            alt={transaction.user.name}
          />
          <AvatarFallback className="text-lg font-semibold">
            {getInitials(transaction.user.name)}
          </AvatarFallback>
        </Avatar>
        <p className="font-semibold">{transaction.user.name}</p>
        <p className="text-sm text-black/50">{transaction.user.email}</p>
      </div>

      <Separator className="mb-4 opacity-50" />

      <DetailRow
        icon={<UserIcon weight="bold" className="size-4" />}
        label={t('User ID')}
        value={`#${transaction.user.id}`}
      />
      <Separator className="opacity-40" />
      <DetailRow
        icon={<ReceiptIcon weight="bold" className="size-4" />}
        label={t('Transaction')}
        value={t(TYPE_LABEL[transaction.type])}
      />

      <div className="mt-4">
        <Button
          variant="outline"
          className="w-full gap-2"
          onClick={() =>
            window.open(`/admin/users/${transaction.user.id}`, '_blank')
          }
        >
          <ArrowUpRightIcon weight="bold" className="size-4" />
          {t('View User Profile')}
        </Button>
      </div>
    </div>
  );
}