import DataTable from '@/components/common/data-table';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { useTableData } from '@/data/useTableData';
import { useInitials } from '@/hooks/use-initials';
import { getImageUrl } from '@/utils/getImageUrl';
import { router } from '@inertiajs/react';
import { UserPlusIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';
import DashboardCard from './dashboard-card';

export default function LatestUsers() {
  const getInitials = useInitials();
  const { t } = useTranslation();
  const { items, isLoading } = useTableData(
    '/admin/dashboard/latest-users?limit=10',
  );

  return (
    <DashboardCard
      icon={UserPlusIcon}
      title={t('Latest Users')}
      link="/admin/users"
    >
      <DataTable
        data={items}
        isLoading={isLoading}
        rounded
        shadow={false}
        onRowClick={(row) => router.visit(`/admin/users/${row.id}`)}
        structure={[
          {
            accessorKey: 'id',
            header: t('ID'),
            meta: { className: 'w-16' },
            cell: ({ row }) => (
              <p className="text-black/50">#{row.original.id}</p>
            ),
          },
          {
            accessorKey: 'first_name',
            header: t('Full Name'),
            cell: ({ row }) => {
              const fullName =
                [row.original.first_name, row.original.last_name]
                  .filter(Boolean)
                  .join(' ') || '-';
              return (
                <div className="flex items-center gap-2">
                  <Avatar className="size-8 overflow-hidden rounded-full">
                    <AvatarImage
                      src={getImageUrl(row.original?.profile?.profile_photo)}
                      alt={fullName}
                    />
                    <AvatarFallback className="rounded-lg bg-neutral-200 font-medium text-black dark:bg-neutral-700 dark:text-white">
                      {getInitials(fullName)}
                    </AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-medium">{fullName}</p>
                    <p className="text-sm text-black/50">
                      {row.original.email}
                    </p>
                  </div>
                </div>
              );
            },
          },
        ]}
      />
    </DashboardCard>
  );
}