'use client';

import { cn } from '@/lib/cn';
import { useT } from '@/lib/i18n/react';
import type { CategoriesOverviewStats } from '@/server/admin/resources/categories/overview';
import { Icon } from '@/components/ui/icons/Icon';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/overlays/Tooltip/Tooltip';

type Props = CategoriesOverviewStats;

function StatCard({
  label,
  value,
  href,
  urgent,
  tooltip,
}: {
  label: string;
  value: number | string;
  href?: string;
  urgent?: boolean;
  tooltip?: string;
}) {
  const inner = (
    <div
      className={[
        'rounded-lg border p-4',
        urgent
          ? 'border-warning-500 bg-warning-50'
          : 'border-[var(--color-neutral-200)] bg-[var(--color-surface-base)]',
      ].join(' ')}
    >
      <div className="flex items-start justify-between gap-2">
        <p className="text-sm text-[var(--color-text-secondary)]">{label}</p>
        {urgent ? (
          <Icon name="AlertTriangle" size="sm" className="text-warning-700 shrink-0" aria-hidden />
        ) : null}
      </div>
      <p className="mt-1 text-2xl font-bold text-[var(--color-text-primary)]">{value}</p>
    </div>
  );

  const card = href ? (
    <a
      href={href}
      className={cn(
        'block rounded-lg',
        'focus-visible:ring-brand-primary-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
      )}
    >
      {inner}
    </a>
  ) : (
    inner
  );

  if (!tooltip) return card;

  return (
    <Tooltip>
      <TooltipTrigger asChild>{card}</TooltipTrigger>
      <TooltipContent side="bottom" className="max-w-xs text-wrap">
        {tooltip}
      </TooltipContent>
    </Tooltip>
  );
}

export function CategoriesOverview({
  totalCategories,
  activeCategories,
  totalTags,
  activeTags,
}: Props) {
  const t = useT('admin_categories');
  const inactiveCategories = totalCategories - activeCategories;
  const inactiveTags = totalTags - activeTags;

  return (
    <TooltipProvider delayDuration={200}>
      <div className="grid grid-cols-2 gap-4 p-4 lg:grid-cols-4">
        <StatCard
          label={t('overview_total_categories')}
          value={totalCategories}
          tooltip={t('overview_total_categories_tooltip')}
        />
        <StatCard
          label={t('overview_empty_categories')}
          value={inactiveCategories}
          urgent={inactiveCategories > 0}
          tooltip={t('overview_inactive_categories_tooltip')}
        />
        <StatCard
          label={t('overview_total_tags')}
          value={totalTags}
          tooltip={t('overview_total_tags_tooltip')}
        />
        <StatCard
          label={t('overview_unused_tags')}
          value={inactiveTags}
          urgent={inactiveTags > 0}
          tooltip={t('overview_inactive_tags_tooltip')}
        />
      </div>
    </TooltipProvider>
  );
}