'use client';

import type { LucideIcon } from 'lucide-react';
import { Link } from '@/i18n/navigation';
import { Card } from '@/components/ui/shared/Card';
import { TODAY_CHART_COMPLETED_COLOR } from '@/components/today/chart-theme';
import { TodayRadialGaugeChart } from '@/components/ui/today/TodayRadialGaugeChart';
import type { TodayCompletionGauge } from '@/types/today';

export interface TodayCompletionGaugeKpiCardProps extends TodayCompletionGauge {
  title: string;
  subtitle: string;
  percentLabel: string;
  ratioLabel: string;
  href: string;
  icon: LucideIcon;
}

export function TodayCompletionGaugeKpiCard({
  completed,
  total,
  percent,
  title,
  subtitle,
  percentLabel,
  ratioLabel,
  href,
  icon: Icon,
}: TodayCompletionGaugeKpiCardProps) {
  return (
    <Link
      href={href}
      className="block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 rounded-[var(--radius-lg)]"
    >
      <Card className="flex h-full min-h-0 flex-col transition-opacity hover:opacity-90">
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0">
            <p className="text-sm font-medium">{title}</p>
            <p className="mt-0.5 truncate text-xs text-text-muted">{subtitle}</p>
          </div>
          <Icon className="h-4 w-4 shrink-0 !text-current" aria-hidden />
        </div>

        <div className="mt-2 flex min-h-0 flex-1 items-center justify-center">
          <div className="w-[58%] min-w-0">
            <TodayRadialGaugeChart
              size="sm"
              compactClassName="h-[120px]"
              innerRadius="72%"
              compactBarSize={8}
              percent={total > 0 ? percent : 0}
              completed={completed}
              total={total}
              percentLabel={total > 0 ? percentLabel : '—'}
              tasksLabel={ratioLabel}
              fillColor={TODAY_CHART_COMPLETED_COLOR}
              showRatio={total > 0}
            />
          </div>
        </div>
      </Card>
    </Link>
  );
}
