'use client';

import { useSubscriptionQuery } from '@/hooks/api/subscriptions';
import { getRemainingDays } from '@repo/utils/datetime-format';
import { ChevronRight } from 'lucide-react';
import Link from 'next/link';

export function SubscriptionInfoBar() {
  const { data, error, isLoading } = useSubscriptionQuery();

  const isActive = data?.subscription?.isActive;
  const remainingOrdersCount = data?.remainingOrdersCount;
  const maxOrdersPerMonth = data?.maxOrdersPerMonth;
  const expiresAt = data?.subscription?.expiresAt;

  if (error) return null;

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

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

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

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

  return (
    <Link href="/pro" rel="noopener noreferrer">
      <div className="px-4">
        <div className="flex w-full flex-col justify-center rounded-2xl bg-background p-4 px-6 shadow-lg backdrop-blur-2xl dark:bg-primary/5">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="font-bold tracking-wider text-foreground">{title}</h2>
              <span className="mt-1 text-xs text-muted-foreground">{description}</span>
            </div>
            <div aria-hidden="true" className="rounded-full bg-primary/10 p-1.5">
              <ChevronRight className="size-4 text-primary" />
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
}