'use client';

import Link from 'next/link';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { Activity, AlertTriangle, ArrowUpRight, BarChart3, CalendarDays, CheckCircle2, ChevronDown, CircleAlert, Link as LinkIcon, Loader2, ShieldAlert, X } from 'lucide-react';
import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
import ProfileEmptyStateCard from '@/app/components/profile/ProfileEmptyStateCard';
import ProfileTabSkeleton from '@/app/components/profile/ProfileTabSkeleton';
import SafeResponsiveChart from '@/app/components/SafeResponsiveChart';
import type { OverviewPayload } from '@/app/profile/hooks/useProfileOverviewData';
import { useToast } from '@/app/components/ToastProvider';
import { usePersistedState } from '@/lib/use-persisted-state';

type AnalyticsPeriodOption = 7 | 30 | 90 | 180 | 365;
const OVERVIEW_PERIOD_OPTIONS: AnalyticsPeriodOption[] = [7, 30, 90, 180, 365];
const OVERVIEW_PERIOD_CACHE_TTL_MS = 10_000;
const overviewPeriodCache = new Map<AnalyticsPeriodOption, { payload: OverviewPayload; updatedAt: number }>();

function normalizeOverviewPeriod(value: number | undefined, fallback: AnalyticsPeriodOption): AnalyticsPeriodOption {
  const resolved = OVERVIEW_PERIOD_OPTIONS.find((period) => period === value);
  return resolved || fallback;
}

function readOverviewPeriodCache(period: AnalyticsPeriodOption) {
  const cacheEntry = overviewPeriodCache.get(period);
  if (!cacheEntry) return null;
  if (Date.now() - cacheEntry.updatedAt > OVERVIEW_PERIOD_CACHE_TTL_MS) return null;
  return cacheEntry.payload;
}

const PERIOD_LABELS: Record<AnalyticsPeriodOption, string> = {
  7: '7 дн',
  30: '30 дн',
  90: '90 дн',
  180: '180 дн',
  365: '365 дн',
};

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

type ProfileOverviewTabProps = {
  displayName: string;
  data: OverviewPayload;
  planState: PlanState;
  availableAnalyticsPeriods?: number[];
  isLoading: boolean;
  billingStatus?: string | null;
  onClearBillingStatus?: () => void;
  onGoToLinks: () => void;
  onGoToAnalytics: () => void;
};

type BillingBanner = {
  title: string;
  description: string;
  tone: 'success' | 'warning' | 'danger';
};

type UsageAlert = {
  id: string;
  label: string;
  used: number;
  limit: number;
  severity: 'warning' | 'critical';
};

type BillingSource = 'FREE' | 'PURCHASE' | 'ADMIN_OVERRIDE' | undefined;

function resolveBillingBanner(status?: string | null): BillingBanner | null {
  if (!status) return null;

  const normalized = status.toLowerCase();
  if (normalized === 'success' || normalized === 'paid') {
    return {
      title: 'Оплата подтверждена',
      description: 'Тариф активирован. Лимиты и доступ к функциям уже обновлены.',
      tone: 'success',
    };
  }

  if (normalized === 'cancel' || normalized === 'cancelled' || normalized === 'canceled') {
    return {
      title: 'Оплата отменена',
      description: 'Платеж не был завершен. Можно выбрать тариф и повторить оплату в любой момент.',
      tone: 'warning',
    };
  }

  if (normalized === 'failed' || normalized === 'error' || normalized === 'expired') {
    return {
      title: 'Платеж не прошел',
      description: 'Проверьте способ оплаты и попробуйте снова. Текущий тариф не изменился.',
      tone: 'danger',
    };
  }

  return {
    title: 'Статус оплаты обновлен',
    description: 'Проверьте текущее состояние тарифа и лимитов в блоке биллинга.',
    tone: 'warning',
  };
}

function buildUsageAlerts(planState: PlanState): UsageAlert[] {
  const usage = planState?.usage;
  const limits = planState?.limits;
  if (!usage || !limits) return [];

  const candidates: Array<{ id: string; label: string; used?: number; limit?: number }> = [
    { id: 'active-links', label: 'Активные ссылки', used: usage.activeLinks, limit: limits.maxActiveLinks },
    { id: 'monthly-links', label: 'Новые ссылки за месяц', used: usage.newLinksThisMonth, limit: limits.maxMonthlyNewLinks },
    { id: 'folders', label: 'Папки', used: usage.folders, limit: limits.maxFolders },
    { id: 'tags', label: 'Теги', used: usage.tags, limit: limits.maxTags },
  ];

  const alerts: UsageAlert[] = [];

  candidates.forEach((candidate) => {
    const used = candidate.used ?? 0;
    const limit = candidate.limit ?? 0;
    if (limit <= 0) return;

    const ratio = used / limit;
    if (ratio >= 1) {
      alerts.push({ id: candidate.id, label: candidate.label, used, limit, severity: 'critical' });
      return;
    }
    if (ratio >= 0.8) {
      alerts.push({ id: candidate.id, label: candidate.label, used, limit, severity: 'warning' });
    }
  });

  return alerts;
}

function billingSourceLabel(source: BillingSource) {
  if (source === 'PURCHASE') return 'Оплачен';
  if (source === 'ADMIN_OVERRIDE') return 'Назначен вручную';
  return 'Бесплатный';
}

function billingStatusLabel(planState: PlanState) {
  if (!planState) return 'Статус неизвестен';
  if (planState.hasActiveOverride) return 'Активен (ручной режим)';
  if (planState.billingSource === 'PURCHASE') {
    if (!planState.expiresAt) return 'Активен';
    return new Date(planState.expiresAt).getTime() > Date.now() ? 'Активен' : 'Истек';
  }
  return 'Бесплатный';
}

function formatExpiryDate(value: string | null | undefined) {
  if (!value) return 'Без срока';
  return new Date(value).toLocaleDateString('ru-RU', {
    day: '2-digit',
    month: 'long',
    year: 'numeric',
  });
}

function OverviewUsageRow({ label, used, limit }: { label: string; used: number; limit: number }) {
  const percent = limit > 0 ? Math.min(100, Math.round((used / limit) * 100)) : 0;

  return (
    <div className="rounded-lg border border-white/10 bg-black/35 p-2.5">
      <div className="mb-1.5 flex items-center justify-between text-[11px]">
        <span className="text-gray-400">{label}</span>
        <span className="font-mono text-gray-200">
          {used}/{limit}
        </span>
      </div>
      <div className="h-1.5 overflow-hidden rounded-full bg-white/5">
        <div className="h-full rounded-full bg-gradient-to-r from-fuchsia-500 to-violet-500" style={{ width: `${percent}%` }} />
      </div>
    </div>
  );
}

function OverviewPlanCard({ planState }: { planState: PlanState }) {
  const planLabel = planState?.planMeta?.label || planState?.plan || 'FREE';
  const planAudience = planState?.planMeta?.audience || 'Тариф для вашего сценария';
  const sourceLabel = billingSourceLabel(planState?.billingSource);
  const statusLabel = billingStatusLabel(planState);
  const usage = planState?.usage;
  const limits = planState?.limits;

  return (
    <aside className="h-full rounded-2xl border border-white/10 bg-black/35 p-4 backdrop-blur-md flex flex-col">
      <div className="mb-3 flex items-center justify-between gap-2">
        <p className="text-xs font-semibold uppercase tracking-[0.15em] text-cyan-200/75">Текущий тариф</p>
        <span className="rounded-full border border-violet-500/25 bg-violet-500/10 px-2 py-0.5 text-[10px] font-medium text-violet-200">
          {planLabel}
        </span>
      </div>

      <p className="mb-3 text-xs leading-5 text-gray-400">{planAudience}</p>

      <div className="mb-3 grid grid-cols-1 gap-2">
        <div className="rounded-lg border border-white/10 bg-white/[0.03] px-3 py-2">
          <p className="text-[10px] uppercase tracking-[0.14em] text-gray-500">Действует до</p>
          <p className="mt-1 text-sm text-white">{formatExpiryDate(planState?.expiresAt)}</p>
        </div>
        <div className="rounded-lg border border-white/10 bg-white/[0.03] px-3 py-2">
          <p className="text-[10px] uppercase tracking-[0.14em] text-gray-500">Источник</p>
          <p className="mt-1 text-sm text-white">{sourceLabel}</p>
        </div>
      </div>

      <div className="mb-3 inline-flex rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-[11px] text-gray-200">
        {statusLabel}
      </div>

      {usage && limits ? (
        <div className="mb-3 space-y-2">
          <OverviewUsageRow label="Ссылки" used={usage.activeLinks || 0} limit={limits.maxActiveLinks || 0} />
          <OverviewUsageRow label="Папки" used={usage.folders || 0} limit={limits.maxFolders || 0} />
        </div>
      ) : null}

      <Link
        href="/profile/pricing"
        className="mt-auto inline-flex w-full items-center justify-center rounded-lg border border-violet-500/30 bg-violet-500/15 px-3 py-2 text-xs font-medium text-violet-100 transition-colors hover:bg-violet-500/25"
      >
        Управлять тарифом
      </Link>
    </aside>
  );
}

export default function ProfileOverviewTab({
  displayName,
  data: initialData,
  planState,
  availableAnalyticsPeriods,
  isLoading,
  billingStatus,
  onClearBillingStatus,
  onGoToLinks,
  onGoToAnalytics,
}: ProfileOverviewTabProps) {
  const [overviewData, setOverviewData] = useState<OverviewPayload>(initialData);
  const [selectedPeriod, setSelectedPeriod] = usePersistedState<AnalyticsPeriodOption>(
    'profile.overview.period',
    7,
    (value): value is AnalyticsPeriodOption =>
      typeof value === 'number' && OVERVIEW_PERIOD_OPTIONS.includes(value as AnalyticsPeriodOption),
  );
  const [isPeriodMenuOpen, setIsPeriodMenuOpen] = useState(false);
  const [isPeriodLoading, setIsPeriodLoading] = useState(false);
  const periodRequestIdRef = useRef(0);
  const periodMenuRef = useRef<HTMLDivElement | null>(null);
  const toast = useToast();

  const allowedPeriodSet = useMemo(() => {
    const values = availableAnalyticsPeriods && availableAnalyticsPeriods.length > 0
      ? availableAnalyticsPeriods
      : [7];
    return new Set(values);
  }, [availableAnalyticsPeriods]);

  useEffect(() => {
    const initialPeriod = normalizeOverviewPeriod(initialData.period, 7);
    const normalizedData: OverviewPayload = {
      ...initialData,
      period: initialPeriod,
    };

    setOverviewData(normalizedData);
    overviewPeriodCache.set(initialPeriod, {
      payload: normalizedData,
      updatedAt: Date.now(),
    });
  }, [initialData]);

  useEffect(() => {
    if (allowedPeriodSet.has(selectedPeriod)) return;
    const fallback = OVERVIEW_PERIOD_OPTIONS.find((period) => allowedPeriodSet.has(period)) || 7;
    setSelectedPeriod(fallback);
  }, [allowedPeriodSet, selectedPeriod, setSelectedPeriod]);

  useEffect(() => {
    if (!isPeriodMenuOpen) return;

    const handlePointerDown = (event: PointerEvent) => {
      if (!periodMenuRef.current) return;
      if (periodMenuRef.current.contains(event.target as Node)) return;
      setIsPeriodMenuOpen(false);
    };

    window.addEventListener('pointerdown', handlePointerDown);
    return () => window.removeEventListener('pointerdown', handlePointerDown);
  }, [isPeriodMenuOpen]);

  const fetchPeriodData = useCallback(async (period: AnalyticsPeriodOption, options?: { force?: boolean; showLoader?: boolean }) => {
    const requestId = ++periodRequestIdRef.current;
    const force = options?.force ?? false;
    const showLoader = options?.showLoader ?? true;
    if (showLoader) {
      setIsPeriodLoading(true);
    }

    const cachedPayload = force ? null : readOverviewPeriodCache(period);
    if (cachedPayload) {
      setOverviewData(cachedPayload);
      if (showLoader) {
        setIsPeriodLoading(false);
      }
      return;
    }

    try {
      const response = await fetch(`/api/profile/overview?period=${period}`, { cache: 'no-store' });
      if (!response.ok) {
        throw new Error('Не удалось загрузить overview за выбранный период');
      }

      const payload = await response.json() as OverviewPayload;
      if (requestId !== periodRequestIdRef.current) return;
      const normalizedPayload: OverviewPayload = {
        ...payload,
        period: normalizeOverviewPeriod(payload.period, period),
      };
      setOverviewData(normalizedPayload);
      overviewPeriodCache.set(period, {
        payload: normalizedPayload,
        updatedAt: Date.now(),
      });
    } catch {
      if (requestId !== periodRequestIdRef.current) return;
    } finally {
      if (showLoader && requestId === periodRequestIdRef.current) {
        setIsPeriodLoading(false);
      }
    }
  }, []);

  useEffect(() => {
    if (overviewData.period === selectedPeriod) return;
    void fetchPeriodData(selectedPeriod);
  }, [fetchPeriodData, overviewData.period, selectedPeriod]);

  useEffect(() => {
    const refresh = () => {
      void fetchPeriodData(selectedPeriod, { force: true, showLoader: false });
    };
    const intervalId = window.setInterval(refresh, 15_000);
    window.addEventListener('focus', refresh);

    return () => {
      window.clearInterval(intervalId);
      window.removeEventListener('focus', refresh);
    };
  }, [fetchPeriodData, selectedPeriod]);

  const data = overviewData;
  const totalUnique = data.chart.reduce((sum, item) => sum + item.uniques, 0);
  const billingBanner = resolveBillingBanner(billingStatus);
  const usageAlerts = buildUsageAlerts(planState);
  const planLabel = (planState?.planMeta?.label || planState?.plan || 'FREE').toUpperCase();
  const isFreePlan = planLabel === 'FREE';
  const hasNoLinks = data.summary.totalLinks === 0;
  const hasNoClicks = !hasNoLinks && data.summary.totalClicks === 0;
  const shouldShowSkeleton = isLoading && hasNoLinks && data.chart.length === 0;

  if (shouldShowSkeleton) {
    return <ProfileTabSkeleton mode="overview" />;
  }

  return (
    <motion.section
      key="overview"
      initial={{ opacity: 0, y: 14 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -10 }}
      transition={{ duration: 0.24, ease: 'easeOut' }}
      className="mx-auto max-w-6xl space-y-5"
    >
      <div className="relative z-20 rounded-2xl border border-white/10 bg-white/[0.03] p-6 backdrop-blur-xl">
        <div className="pointer-events-none absolute -right-16 -top-16 h-56 w-56 rounded-full bg-violet-500/15 blur-3xl" />
        <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
          <div>
            <p className="mb-1 text-sm text-gray-400">Обзор аккаунта</p>
            <h1 className="mb-2 text-2xl font-bold tracking-tight text-white md:text-3xl">Добро пожаловать, {displayName}</h1>
            <p className="text-sm text-gray-400">Краткий обзор по ссылкам и эффективности за выбранный период.</p>
          </div>
          <div ref={periodMenuRef} className="relative z-[70]">
            <button
              type="button"
              onClick={() => setIsPeriodMenuOpen((prev) => !prev)}
              className="inline-flex min-h-[42px] items-center gap-2.5 rounded-xl border border-white/15 bg-white/[0.03] px-4 py-2.5 text-sm font-medium text-gray-200 transition-all duration-300 hover:border-white/30 hover:bg-white/[0.08] hover:text-white"
            >
              {isPeriodLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <CalendarDays className="h-4 w-4" />}
              Последние {PERIOD_LABELS[selectedPeriod]}
              <ChevronDown className={`h-4 w-4 transition-transform ${isPeriodMenuOpen ? 'rotate-180' : ''}`} />
            </button>

            <AnimatePresence>
              {isPeriodMenuOpen ? (
                <motion.div
                  initial={{ opacity: 0, y: 8, scale: 0.98 }}
                  animate={{ opacity: 1, y: 0, scale: 1 }}
                  exit={{ opacity: 0, y: 8, scale: 0.98 }}
                  transition={{ duration: 0.15 }}
                  className="absolute right-0 top-[calc(100%+6px)] z-[80] mt-1 w-56 rounded-xl border border-white/10 bg-[#0E0E0E]/95 p-2 shadow-[0_14px_44px_rgba(0,0,0,0.55)] backdrop-blur-md"
                >
                  {OVERVIEW_PERIOD_OPTIONS.map((period) => {
                    const active = selectedPeriod === period;
                    const isAllowed = allowedPeriodSet.has(period);

                    return (
                      <button
                        key={period}
                        type="button"
                        onClick={() => {
                          setIsPeriodMenuOpen(false);
                          if (!isAllowed) {
                            toast.info('На вашем тарифе этот период недоступен');
                            return;
                          }
                          setSelectedPeriod(period);
                        }}
                        className={`inline-flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-left text-sm transition-colors ${
                          active
                            ? 'bg-violet-500/18 text-violet-100'
                            : isAllowed
                              ? 'text-gray-300 hover:bg-white/5 hover:text-white'
                              : 'text-gray-500'
                        }`}
                      >
                        <span>{period} дн</span>
                        {!isAllowed ? <span className="text-[11px] text-gray-500">Недоступно</span> : null}
                      </button>
                    );
                  })}
                </motion.div>
              ) : null}
            </AnimatePresence>
          </div>
        </div>
      </div>

      {billingBanner ? (
        <motion.div
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.2 }}
          className={`flex flex-col gap-3 rounded-2xl border p-4 sm:flex-row sm:items-start sm:justify-between ${
            billingBanner.tone === 'success'
              ? 'border-emerald-500/25 bg-emerald-500/10'
              : billingBanner.tone === 'danger'
                ? 'border-red-500/25 bg-red-500/10'
                : 'border-amber-500/25 bg-amber-500/10'
          }`}
        >
          <div className="flex items-start gap-2.5">
            {billingBanner.tone === 'success' ? (
              <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-300" />
            ) : (
              <CircleAlert className={`mt-0.5 h-4 w-4 shrink-0 ${billingBanner.tone === 'danger' ? 'text-red-300' : 'text-amber-300'}`} />
            )}
            <div>
              <p className={`text-sm font-medium ${billingBanner.tone === 'success' ? 'text-emerald-100' : billingBanner.tone === 'danger' ? 'text-red-100' : 'text-amber-100'}`}>
                {billingBanner.title}
              </p>
              <p className={`mt-1 text-xs ${billingBanner.tone === 'success' ? 'text-emerald-200/85' : billingBanner.tone === 'danger' ? 'text-red-200/85' : 'text-amber-200/85'}`}>
                {billingBanner.description}
              </p>
            </div>
          </div>
          <div className="flex items-center gap-2 sm:ml-4">
            <Link
              href="/profile/pricing"
              className="inline-flex items-center rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs text-white transition-colors hover:bg-white/[0.1]"
            >
              Тарифы
            </Link>
            {onClearBillingStatus ? (
              <button
                type="button"
                onClick={onClearBillingStatus}
                className="inline-flex items-center gap-1 rounded-lg border border-white/10 bg-white/[0.02] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/[0.08] hover:text-white"
              >
                <X className="h-3.5 w-3.5" />
                Скрыть
              </button>
            ) : null}
          </div>
        </motion.div>
      ) : null}

      {isFreePlan || usageAlerts.length > 0 ? (
        <motion.div
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.2, delay: billingBanner ? 0.04 : 0 }}
          className="grid grid-cols-1 gap-3 rounded-2xl border border-white/10 bg-black/35 p-4 backdrop-blur-md md:grid-cols-2"
        >
          {isFreePlan ? (
            <div className="rounded-xl border border-violet-500/25 bg-violet-500/10 p-3">
              <p className="text-sm font-medium text-violet-100">Free-план активен</p>
              <p className="mt-1 text-xs text-violet-200/80">Для массовых действий, расширенной аналитики и лимитов выше текущих перейдите на платный тариф.</p>
            </div>
          ) : null}
          {usageAlerts.map((alert) => (
            <div
              key={alert.id}
              className={`rounded-xl border p-3 ${
                alert.severity === 'critical'
                  ? 'border-red-500/25 bg-red-500/10'
                  : 'border-amber-500/25 bg-amber-500/10'
              }`}
            >
              <p className={`text-sm font-medium ${alert.severity === 'critical' ? 'text-red-100' : 'text-amber-100'}`}>{alert.label}</p>
              <p className={`mt-1 text-xs ${alert.severity === 'critical' ? 'text-red-200/85' : 'text-amber-200/85'}`}>
                Использовано {alert.used} из {alert.limit}
              </p>
            </div>
          ))}
        </motion.div>
      ) : null}

      {hasNoLinks ? (
        <ProfileEmptyStateCard
          title="Пока нет ссылок"
          description="Создайте первую короткую ссылку, чтобы здесь появились графики, метрики и полный обзор активности."
          actionLabel="Перейти к ссылкам"
          onAction={onGoToLinks}
        />
      ) : hasNoClicks ? (
        <ProfileEmptyStateCard
          title="Данные еще не накопились"
          description="Ссылки уже созданы, но переходов пока нет. Как только появятся первые клики, обзор заполнится автоматически."
          actionLabel="Открыть ссылки"
          onAction={onGoToLinks}
        />
      ) : (
        <>
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.2 }}
              whileHover={{ y: -2 }}
              className="rounded-2xl border border-white/10 bg-black/40 p-5 backdrop-blur-md transition-colors hover:bg-white/[0.02]"
            >
              <div className="mb-3 flex items-center justify-between">
                <span className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-violet-500/20 bg-violet-500/20 text-violet-300">
                  <Activity className="h-5 w-5" />
                </span>
                <span className="inline-flex items-center gap-1 rounded-lg border border-emerald-500/20 bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-300">
                  <ArrowUpRight className="h-3 w-3" />
                  +12%
                </span>
              </div>
              <p className="mb-1 text-xs text-gray-500">Всего кликов</p>
              <p className="font-mono text-3xl tracking-tight text-white">{data.summary.totalClicks.toLocaleString('ru-RU')}</p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.2, delay: 0.05 }}
              whileHover={{ y: -2 }}
              className="rounded-2xl border border-white/10 bg-black/40 p-5 backdrop-blur-md transition-colors hover:bg-white/[0.02]"
            >
              <div className="mb-3 flex items-center justify-between">
                <span className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-blue-500/20 bg-blue-500/20 text-blue-300">
                  <BarChart3 className="h-5 w-5" />
                </span>
                <span className="inline-flex items-center gap-1 rounded-lg border border-emerald-500/20 bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-300">
                  <ArrowUpRight className="h-3 w-3" />
                  +8%
                </span>
              </div>
              <p className="mb-1 text-xs text-gray-500">Уникальные переходы</p>
              <p className="font-mono text-3xl tracking-tight text-white">{totalUnique.toLocaleString('ru-RU')}</p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.2, delay: 0.1 }}
              whileHover={{ y: -2 }}
              className="rounded-2xl border border-white/10 bg-black/40 p-5 backdrop-blur-md transition-colors hover:bg-white/[0.02]"
            >
              <div className="mb-3 flex items-center justify-between">
                <span className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-fuchsia-500/20 bg-fuchsia-500/20 text-fuchsia-300">
                  <LinkIcon className="h-5 w-5" />
                </span>
                <span className="text-[11px] text-gray-500">Всего</span>
              </div>
              <p className="mb-1 text-xs text-gray-500">Ссылок в системе</p>
              <p className="font-mono text-3xl tracking-tight text-white">{data.summary.totalLinks.toLocaleString('ru-RU')}</p>
            </motion.div>
          </div>

          <div className="grid grid-cols-1 gap-4 xl:grid-cols-[minmax(0,1fr)_20rem] xl:items-stretch">
            <div className="h-full rounded-2xl border border-white/10 bg-black/35 p-5 backdrop-blur-md transition-colors duration-300 hover:border-white/20 flex flex-col">
              <div className="mb-4 flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-300">Динамика переходов</p>
                  <p className="text-xs text-gray-500">Клики и уникальные переходы за последние 7 дней</p>
                </div>
                <button
                  type="button"
                  onClick={onGoToAnalytics}
                  className="rounded-lg border border-white/10 bg-white/[0.03] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/[0.06] hover:text-white"
                >
                  Детальная аналитика
                </button>
              </div>

              {data.chart.length > 0 ? (
                <div className="h-64 min-w-0 flex-1">
                  <SafeResponsiveChart>
                    <AreaChart data={data.chart} margin={{ top: 10, right: 8, left: -20, bottom: 0 }}>
                      <defs>
                        <linearGradient id="overviewClicksGradient" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="0%" stopColor="#8b5cf6" stopOpacity={0.35} />
                          <stop offset="100%" stopColor="#8b5cf6" stopOpacity={0.02} />
                        </linearGradient>
                        <linearGradient id="overviewUniqueGradient" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="0%" stopColor="#3b82f6" stopOpacity={0.35} />
                          <stop offset="100%" stopColor="#3b82f6" stopOpacity={0.02} />
                        </linearGradient>
                      </defs>
                      <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
                      <XAxis dataKey="label" tick={{ fill: '#94a3b8', fontSize: 12 }} axisLine={false} tickLine={false} />
                      <YAxis tick={{ fill: '#94a3b8', fontSize: 12 }} axisLine={false} tickLine={false} allowDecimals={false} />
                      <Tooltip
                        cursor={{ stroke: 'rgba(255,255,255,0.18)' }}
                        contentStyle={{
                          background: 'rgba(8,8,8,0.95)',
                          border: '1px solid rgba(255,255,255,0.12)',
                          borderRadius: 10,
                          color: '#fff',
                        }}
                      />
                      <Area type="monotone" dataKey="clicks" name="Клики" stroke="#8b5cf6" strokeWidth={2.5} fillOpacity={1} fill="url(#overviewClicksGradient)" />
                      <Area type="monotone" dataKey="uniques" name="Уникальные" stroke="#3b82f6" strokeWidth={2.5} fillOpacity={1} fill="url(#overviewUniqueGradient)" />
                    </AreaChart>
                  </SafeResponsiveChart>
                </div>
              ) : (
                <div className="flex h-64 items-center justify-center rounded-xl border border-white/10 bg-white/[0.02]">
                  <p className="text-sm text-gray-500">Нет данных по переходам за выбранный период</p>
                </div>
              )}
            </div>

            <OverviewPlanCard planState={planState} />
          </div>

          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.24, delay: 0.08 }}
            className="relative overflow-hidden rounded-2xl border border-white/10 bg-black/35 p-4 backdrop-blur-md"
          >
            <div className="pointer-events-none absolute -right-14 -bottom-16 h-48 w-48 rounded-full bg-violet-500/10 blur-3xl" />

            <div className="grid gap-3 xl:grid-cols-[1.8fr_1fr]">
              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                <div className="rounded-xl border border-white/10 bg-white/[0.03] p-4 transition-all duration-300 hover:border-white/20 hover:bg-white/[0.05]">
                  <div className="mb-3 flex items-center justify-between">
                    <span className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-violet-500/25 bg-violet-500/15 text-violet-300">
                      <ShieldAlert className="h-4 w-4" />
                    </span>
                    <span className="text-[11px] text-gray-500">За 7 дней</span>
                  </div>
                  <p className="mb-1 text-xs text-gray-400">Фильтрованный трафик</p>
                  <p className="font-mono text-2xl text-white">{data.summary.filteredClicks.toLocaleString('ru-RU')}</p>
                </div>

                <div className="rounded-xl border border-white/10 bg-white/[0.03] p-4 transition-all duration-300 hover:border-white/20 hover:bg-white/[0.05]">
                  <div className="mb-3 flex items-center justify-between">
                    <span className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-fuchsia-500/25 bg-fuchsia-500/15 text-fuchsia-300">
                      <Activity className="h-4 w-4" />
                    </span>
                    <span className="inline-flex items-center gap-1 rounded-full border border-white/10 bg-white/[0.04] px-2 py-0.5 text-[10px] text-gray-400">
                      <ArrowUpRight className="h-3 w-3" />
                      Live
                    </span>
                  </div>
                  <p className="mb-1 text-xs text-gray-400">Bot-события</p>
                  <p className="font-mono text-2xl text-white">{data.summary.botClicks.toLocaleString('ru-RU')}</p>
                </div>
              </div>

              <div className="rounded-xl border border-white/10 bg-gradient-to-br from-white/[0.06] to-white/[0.02] p-4">
                <p className="mb-1 text-sm font-medium text-white">Быстрые действия</p>
                <p className="mb-4 text-xs text-gray-400">Откройте детальную статистику или перейдите к управлению ссылками.</p>

                <div className="grid gap-2">
                  <button
                    type="button"
                    onClick={onGoToAnalytics}
                    className="inline-flex h-10 items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-fuchsia-500 to-violet-600 px-3 text-sm font-medium text-white transition-all duration-300 hover:opacity-95"
                  >
                    <BarChart3 className="h-4 w-4" />
                    Открыть аналитику
                  </button>
                  <button
                    type="button"
                    onClick={onGoToLinks}
                    className="inline-flex h-10 items-center justify-center rounded-lg border border-white/10 bg-white/[0.03] px-3 text-sm text-gray-200 transition-colors hover:bg-white/[0.08] hover:text-white"
                  >
                    К ссылкам
                  </button>
                </div>
              </div>
            </div>
          </motion.div>

          {data.summary.filteredClicks > 0 || data.summary.botClicks > 0 ? (
            <div className="flex items-start gap-2 rounded-2xl border border-fuchsia-500/20 bg-fuchsia-500/10 p-4">
              <ShieldAlert className="mt-0.5 h-4 w-4 shrink-0 text-fuchsia-300" />
              <p className="text-sm text-fuchsia-100">
                Зафиксирован подозрительный трафик: фильтрованных событий {data.summary.filteredClicks}, bot-событий{' '}
                {data.summary.botClicks}.
              </p>
            </div>
          ) : null}
        </>
      )}

    </motion.section>
  );
}