'use client';

import { useTranslations } from 'next-intl';
import { CreditCard } from 'lucide-react';
import { Link } from '@/i18n/navigation';
import { Card } from '@/components/ui/shared/Card';
import { TodayRadialGaugeChart } from '@/components/ui/today/TodayRadialGaugeChart';
import type { TodaySubscriptionSnapshot } from '@/types/today';

interface TodaySubscriptionKpiCardProps {
  subscription: TodaySubscriptionSnapshot;
}

const PERIOD_GAUGE_COLOR = '#e1bc72';

export function TodaySubscriptionKpiCard({ subscription }: TodaySubscriptionKpiCardProps) {
  const t = useTranslations('today');

  const seatsRatioTotal = subscription.seatsUnlimited
    ? 0
    : subscription.seatsLimit ?? 0;

  const seatsPercentLabel =
    subscription.seatsUnlimited || !subscription.hasActivePlan
      ? String(subscription.seatsUsed)
      : t('subscriptionSeatsPercent', { percent: subscription.seatsPercent });

  const seatsTasksLabel = subscription.seatsUnlimited
    ? t('subscriptionSeatsUnlimitedShort')
    : t('subscriptionSeatsLabel');

  const periodPercentLabel = subscription.hasActivePlan
    ? t('subscriptionPeriodPercent', { percent: subscription.periodPercent })
    : '—';

  return (
    <Link
      href="/settings/subscriptions"
      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">{t('widgetSubscription')}</p>
            {subscription.planName ? (
              <p className="mt-0.5 truncate text-xs capitalize text-text-muted">
                {subscription.planName}
              </p>
            ) : (
              <p className="mt-0.5 text-xs text-text-muted">{t('subscriptionNoPlan')}</p>
            )}
          </div>
          <CreditCard className="h-4 w-4 shrink-0 !text-current" aria-hidden />
        </div>

        <div className="mt-2 grid min-h-0 flex-1 grid-cols-2 gap-1 content-center">
          <TodayRadialGaugeChart
            size="sm"
            percent={
              subscription.seatsUnlimited || !subscription.hasActivePlan
                ? 0
                : subscription.seatsPercent
            }
            completed={subscription.seatsUsed}
            total={seatsRatioTotal}
            percentLabel={seatsPercentLabel}
            tasksLabel={seatsTasksLabel}
            showRatio={!subscription.seatsUnlimited && seatsRatioTotal > 0}
          />
          <TodayRadialGaugeChart
            size="sm"
            percent={subscription.hasActivePlan ? subscription.periodPercent : 0}
            completed={subscription.periodElapsedDays}
            total={subscription.hasActivePlan ? subscription.periodTotalDays : 0}
            percentLabel={periodPercentLabel}
            tasksLabel={t('subscriptionPeriodLabel')}
            fillColor={PERIOD_GAUGE_COLOR}
            showRatio={subscription.hasActivePlan}
          />
        </div>
      </Card>
    </Link>
  );
}
