zapishis-client/apps/web/components/profile/subscription-bar.tsx

/* eslint-disable canonical/id-match */
'use client';

import { useCustomerQuery } from '@/hooks/api/customers';
import { useSubscriptionQuery, useSubscriptionSettingQuery } from '@/hooks/api/subscriptions';
import { Enum_Customer_Role } from '@repo/graphql/types';
import { cn } from '@repo/ui/lib/utils';
import { ChevronRight } from 'lucide-react';
import Link from 'next/link';

export function SubscriptionInfoBar() {
  const { data: { subscriptionSetting } = {}, isLoading: isLoadingSubscriptionSetting } =
    useSubscriptionSettingQuery();
  const { data, isLoading: isLoadingSubscription } = useSubscriptionQuery();

  const { data: { customer } = {}, isLoading: isLoadingCustomer } = useCustomerQuery();

  if (customer?.role === Enum_Customer_Role.Client) return null;

  const isLoading = isLoadingCustomer || isLoadingSubscription || isLoadingSubscriptionSetting;

  const isActive = data?.hasActiveSubscription;
  const remainingOrdersCount = data?.remainingOrdersCount;
  const remainingDays = data?.remainingDays;
  const maxOrdersPerMonth = data?.maxOrdersPerMonth;

  const title = isActive ? 'Pro доступ активен' : 'Pro доступ неактивен';

  let description = 'Попробуйте бесплатно';

  if (!isLoading && remainingOrdersCount && maxOrdersPerMonth) {
    description = `Доступно ${remainingOrdersCount} из ${maxOrdersPerMonth} записей в этом месяце`;
  }

  if (isActive) {
    description = `Осталось ${remainingDays} дней`;
  }

  if (!subscriptionSetting?.proEnabled) return null;

  return (
    <Link href="/pro" rel="noopener noreferrer">
      <div className={cn('px-4', isLoading && 'animate-pulse')}>
        <div
          className={cn(
            'flex w-full flex-col justify-center rounded-2xl p-4 px-6 shadow-lg backdrop-blur-2xl',
            isActive
              ? 'bg-gradient-to-r from-purple-600 to-blue-600 dark:from-purple-700 dark:to-blue-700 text-white'
              : 'bg-background dark:bg-primary/5',
          )}
        >
          <div className="flex items-center justify-between">
            <div>
              <h2
                className={cn(
                  'font-bold tracking-wider',
                  isActive ? 'text-white' : 'text-foreground',
                )}
              >
                {title}
              </h2>
              <span
                className={cn('mt-1 text-xs', isActive ? 'text-white/80' : 'text-muted-foreground')}
              >
                {description}
              </span>
            </div>
            <div
              aria-hidden="true"
              className={cn(
                'rounded-full p-1.5',
                isActive ? 'bg-white/20 text-white' : 'bg-primary/10 text-primary',
              )}
            >
              <ChevronRight className="size-4" />
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
}