'use client';

import Link from 'next/link';
import { Crown, FolderOpen, Link as LinkIcon, Plus } from 'lucide-react';

type PlanState = {
  plan?: string;
  planMeta?: {
    label?: string;
    audience?: string;
    price?: {
      monthlyUsdCents?: number;
      yearlyUsdCents?: number;
      yearlyDiscountPercent?: number;
    };
  };
  billingSource?: 'FREE' | 'PURCHASE' | 'ADMIN_OVERRIDE';
  expiresAt?: string | null;
  hasActiveOverride?: boolean;
  limits?: {
    maxActiveLinks?: number;
    maxMonthlyNewLinks?: number;
    maxFolders?: number;
    maxTags?: number;
    maxUtmTemplates?: number;
  };
  usage?: {
    activeLinks?: number;
    newLinksThisMonth?: number;
    folders?: number;
    tags?: number;
    utmTemplates?: number;
  };
} | null;

type ProfileCurrentPlanStripProps = {
  planState: PlanState;
};

function formatNumber(value: number | undefined) {
  if (typeof value !== 'number' || Number.isNaN(value)) {
    return '0';
  }
  return value.toLocaleString('ru-RU');
}

function formatDate(value: string | null | undefined) {
  if (!value) return 'без ограничения по дате';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return 'без ограничения по дате';

  return date.toLocaleDateString('ru-RU', {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
  });
}

function normalizePlanId(value: string | undefined) {
  const normalized = (value ?? 'FREE').toUpperCase();
  if (normalized === 'MINIMAL' || normalized === 'MEDIUM' || normalized === 'EXTENDED') {
    return normalized;
  }
  return 'FREE';
}

function getRenewHref() {
  return '#pricing';
}

function formatLimit(value: number | undefined) {
  if (typeof value !== 'number' || value <= 0) {
    return '∞';
  }
  return value.toLocaleString('ru-RU');
}

function resolveUsageWidth(used: number | undefined, limit: number | undefined) {
  if (typeof used !== 'number' || used <= 0) return '0%';
  if (typeof limit !== 'number' || limit <= 0) return '12%';
  const raw = Math.round((used / limit) * 100);
  const bounded = Math.max(5, Math.min(100, raw));
  return `${bounded}%`;
}

function resolveSummaryText(planState: PlanState, formattedDate: string) {
  if (planState?.billingSource === 'PURCHASE') {
    return (
      <>
        Ваш тариф активен и оплачен до <strong className="text-gray-200">{formattedDate}</strong>. Вы используете
        возможности по подписке. Для расширения лимитов переключитесь на тариф выше.
      </>
    );
  }

  if (planState?.billingSource === 'ADMIN_OVERRIDE') {
    return (
      <>
        Тариф назначен вручную и действует до <strong className="text-gray-200">{formattedDate}</strong>. Если нужно
        оформить обычную подписку и автопродление, выберите тариф ниже.
      </>
    );
  }

  return (
    <>
      У вас бесплатный план без оплаты. Для увеличения лимитов по ссылкам, папкам и тегам выберите платный тариф
      ниже.
    </>
  );
}

export default function ProfileCurrentPlanStrip({ planState }: ProfileCurrentPlanStripProps) {
  const currentPlanId = normalizePlanId(planState?.plan);
  const planLabel = planState?.planMeta?.label ?? currentPlanId;
  const formattedExpiry = formatDate(planState?.expiresAt);
  const usage = planState?.usage;
  const limits = planState?.limits;

  return (
    <section className="bg-gradient-to-br from-[#120D1D] to-[#0A0A0A] border border-violet-500/20 rounded-[2rem] p-8 md:p-10 mb-8 shadow-2xl relative overflow-hidden group">
      <div className="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity duration-1000">
        <Crown className="w-48 h-48 text-violet-400" />
      </div>

      <div className="relative z-10">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 mb-10">
          <div>
            <div className="flex items-center gap-3 mb-3">
              <span className="bg-violet-500 text-white text-[10px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-md shadow-[0_0_15px_rgba(139,92,246,0.5)]">
                Текущий тариф
              </span>
              <h2 className="text-3xl font-bold text-white uppercase tracking-wider">{planLabel}</h2>
            </div>
            <p className="text-gray-400 text-base max-w-xl leading-relaxed">{resolveSummaryText(planState, formattedExpiry)}</p>
          </div>

          {currentPlanId === 'FREE' ? (
            <div className="flex flex-col sm:flex-row shadow-2xl items-stretch sm:items-center gap-3 w-full md:w-auto shrink-0">
              <Link
                href={getRenewHref()}
                className="px-8 py-3.5 bg-violet-600 hover:bg-violet-500 text-white rounded-xl font-medium shadow-[0_0_20px_rgba(139,92,246,0.3)] transition-all hover:-translate-y-0.5 whitespace-nowrap text-center"
              >
                Выбрать тариф
              </Link>
            </div>
          ) : null}
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 pt-8 border-t border-white/5">
          <div className="bg-black/40 border border-white/5 rounded-2xl p-6 relative overflow-hidden group/stat hover:border-white/10 transition-colors">
            <div className="flex justify-between items-center mb-4 relative z-10">
              <span className="text-gray-400 text-sm font-medium flex items-center gap-2">
                <LinkIcon className="w-4 h-4 text-violet-400/70" />
                Активные ссылки
              </span>
              <span className="text-white font-mono font-medium text-sm">
                {formatNumber(usage?.activeLinks)} / {formatLimit(limits?.maxActiveLinks)}
              </span>
            </div>
            <div className="w-full bg-white/5 rounded-full h-2 relative z-10">
              <div
                className="bg-gradient-to-r from-violet-600 to-violet-400 h-2 rounded-full shadow-[0_0_10px_rgba(139,92,246,0.5)]"
                style={{ width: resolveUsageWidth(usage?.activeLinks, limits?.maxActiveLinks) }}
              />
            </div>
          </div>

          <div className="bg-black/40 border border-white/5 rounded-2xl p-6 relative overflow-hidden group/stat hover:border-white/10 transition-colors">
            <div className="flex justify-between items-center mb-4 relative z-10">
              <span className="text-gray-400 text-sm font-medium flex items-center gap-2">
                <Plus className="w-4 h-4 text-fuchsia-400/70" />
                Новых в месяц
              </span>
              <span className="text-white font-mono font-medium text-sm">
                {formatNumber(usage?.newLinksThisMonth)} / {formatLimit(limits?.maxMonthlyNewLinks)}
              </span>
            </div>
            <div className="w-full bg-white/5 rounded-full h-2 relative z-10">
              <div
                className="bg-gradient-to-r from-fuchsia-600 to-fuchsia-400 h-2 rounded-full shadow-[0_0_10px_rgba(217,70,239,0.5)]"
                style={{ width: resolveUsageWidth(usage?.newLinksThisMonth, limits?.maxMonthlyNewLinks) }}
              />
            </div>
          </div>

          <div className="bg-black/40 border border-white/5 rounded-2xl p-6 relative overflow-hidden group/stat hover:border-white/10 transition-colors">
            <div className="flex justify-between items-center mb-4 relative z-10">
              <span className="text-gray-400 text-sm font-medium flex items-center gap-2">
                <FolderOpen className="w-4 h-4 text-blue-400/70" />
                Папки
              </span>
              <span className="text-white font-mono font-medium text-sm">
                {formatNumber(usage?.folders)} / {formatLimit(limits?.maxFolders)}
              </span>
            </div>
            <div className="w-full bg-white/5 rounded-full h-2 relative z-10">
              <div
                className="bg-gradient-to-r from-blue-600 to-blue-400 h-2 rounded-full shadow-[0_0_10px_rgba(59,130,246,0.5)]"
                style={{ width: resolveUsageWidth(usage?.folders, limits?.maxFolders) }}
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}