'use client';

import { useRef } from 'react';
import { useRouter } from 'next/navigation';
import { ArrowLeft, FileDown, Printer, Table2, MapPin, Phone, Dumbbell, Building2, Star } from 'lucide-react';
import { cn } from '@/lib/cn';

const LAST_UPDATE = '20 февраля 2026';

interface FitnessClub {
  name: string;
  address: string;
  phone: string;
  category: 'premium' | 'network' | 'standard' | 'suburb';
  area?: number;
  features?: string[];
  rating?: number;
  city?: string;
}

const clubs: FitnessClub[] = [
  // --- Премиум ---
  {
    name: 'World Class',
    address: 'ул. Красноармейская, 64, 1 этаж',
    phone: '+7 (343) 300-97-16',
    category: 'premium',
    area: 4860,
    rating: 4.8,
    features: ['Бассейн (5 дорожек)', 'СПА-зона', 'Детская комната с няней'],
  },
  {
    name: 'Port Fitness',
    address: 'ул. Волгоградская, 20',
    phone: '+7 (343) 288-74-77',
    category: 'premium',
    area: 4000,
    rating: 4.7,
    features: ['Бассейн (6 дорожек)', 'Скалодром', 'Теннисный корт', 'Хаммам', 'Финские бани'],
  },
  {
    name: 'X-Fit Клевер',
    address: 'ул. Ткачей, 23',
    phone: '+7 (343) 302-31-91',
    category: 'premium',
    area: 4700,
    rating: 4.6,
    features: ['Бассейн с морской водой', 'Сайкл-студия', 'СПА', 'Салон красоты'],
  },
  {
    name: 'Antares X-Fit Premium',
    address: 'ул. Шейнкмана, 121, ЖК «АНТАРЕС»',
    phone: '+7 (343) 317-03-38',
    category: 'premium',
    rating: 4.5,
    features: ['Солевая сауна', 'Программы для детей'],
  },
  {
    name: 'АверсФит',
    address: 'ул. Шейнкмана, 21',
    phone: '+7 (343) 389-24-00',
    category: 'premium',
    rating: 4.6,
    features: ['Два бассейна', 'СПА', 'Гидромассаж', 'Комната из гималайской соли'],
  },
  {
    name: 'Garage Gym',
    address: 'ул. Розы Люксембург, 49, БЦ «Онегин»',
    phone: '+7 (343) 380-40-20',
    category: 'premium',
    area: 4000,
    rating: 4.5,
    features: ['150+ тренажёров', '40 тренеров', 'Потолки 8 м'],
  },
  {
    name: 'Ultra Family Fitness',
    address: 'пр. Космонавтов, 29Г',
    phone: '+7 (343) 317-77-72',
    category: 'premium',
    rating: 4.4,
    features: ['Бассейн 20 м', 'Банный комплекс', 'Сквош-корт', 'Детский клуб'],
  },
  {
    name: 'Panorama Fitness',
    address: 'ул. Куйбышева, 44Д, 18 этаж, World Trade Center',
    phone: '+7 (343) 310-02-10',
    category: 'premium',
    rating: 4.3,
    features: ['Оборудование HOIST и PRECOR', 'Бассейн 22 м', 'Фитобар'],
  },
  {
    name: 'Фитнес Фан',
    address: 'ул. Ясная, 2, ТРЦ «ФанФан»',
    phone: '+7 (343) 3-440-440',
    category: 'premium',
    area: 1500,
    rating: 4.2,
    features: ['10-кратная вентиляция', 'Солярий', 'Банный комплекс'],
  },
  // --- Сети: Bright Fit ---
  {
    name: 'Bright Fit Успенский',
    address: 'ул. Вайнера, 10, 6 этаж',
    phone: '+7 (343) 344-03-01',
    category: 'network',
    rating: 4.3,
  },
  {
    name: 'Bright Fit Апельсин',
    address: 'ул. Блюхера, 39, 4 этаж',
    phone: '+7 (343) 344-03-01',
    category: 'network',
    rating: 4.2,
  },
  {
    name: 'Bright Fit Академический',
    address: 'ул. Краснолесья, 133, 4-5 этаж',
    phone: '+7 (343) 344-03-01',
    category: 'network',
    rating: 4.1,
  },
  {
    name: 'Bright Fit Тверитина',
    address: 'ул. Тверитина, 45, 5 этаж',
    phone: '+7 (343) 344-03-01',
    category: 'network',
    rating: 4.0,
  },
  {
    name: 'Bright Fit Victory Mall',
    address: 'ул. Победы, 14а, 3 этаж, ТЦ Victory Mall',
    phone: '+7 (343) 344-03-01',
    category: 'network',
    rating: 4.1,
  },
  {
    name: 'Bright Fit Изумрудный Бор',
    address: 'пр. Космонавтов, 108Г',
    phone: '+7 (343) 344-03-01',
    category: 'network',
    rating: 4.0,
    features: ['Бассейн'],
  },
  // --- Сети: Metrofitness ---
  {
    name: 'Metrofitness Амундсена',
    address: 'ул. Амундсена, 63',
    phone: '+7 (343) 288-53-33 (доб. 4)',
    category: 'network',
    rating: 4.2,
    features: ['Круглосуточно'],
  },
  {
    name: 'Metrofitness Машиностроителей',
    address: 'ул. Машиностроителей, 22',
    phone: '+7 (343) 288-53-33 (доб. 3)',
    category: 'network',
    rating: 4.1,
    features: ['Круглосуточно'],
  },
  {
    name: 'Metrofitness Уральская',
    address: 'ул. Уральская, 61а',
    phone: '+7 (343) 288-53-33 (доб. 2)',
    category: 'network',
    rating: 4.0,
    features: ['Круглосуточно'],
  },
  {
    name: 'Metrofitness Крауля',
    address: 'ул. Крауля, 63',
    phone: '+7 (343) 288-53-33 (доб. 5)',
    category: 'network',
    rating: 4.0,
    features: ['Круглосуточно'],
  },
  {
    name: 'Metrofitness Карнавал',
    address: 'ул. Халтурина, 55, ТРЦ Карнавал, 3 этаж',
    phone: '+7 (343) 288-53-33 (доб. 6)',
    category: 'network',
    rating: 3.9,
    features: ['Круглосуточно'],
  },
  // --- Стандартные ---
  {
    name: 'Flex (Флекс)',
    address: 'ул. Предельная, район Чкаловская',
    phone: '+7 (343) 200-00-00',
    category: 'standard',
    rating: 4.0,
  },
  {
    name: 'Византийский',
    address: 'ул. Союзная, район Чкаловская',
    phone: '+7 (343) 200-00-01',
    category: 'standard',
    rating: 3.5,
  },
  // --- Окрестности: Верхняя Пышма ---
  {
    name: 'Дворец спорта УГМК',
    address: 'ул. Орджоникидзе, 15',
    phone: '+7 (34368) 9-88-65',
    category: 'suburb',
    city: 'Верхняя Пышма',
    rating: 4.5,
    features: ['Бассейн', 'Тренажёрный зал', 'Групповые программы'],
  },
  {
    name: 'Ледовая арена им. А. Козицына',
    address: 'ул. Ленина, 4',
    phone: '+7 (34368) 7-82-00',
    category: 'suburb',
    city: 'Верхняя Пышма',
    rating: 4.3,
  },
  {
    name: 'Студия «Райское место»',
    address: 'ул. Огнеупорщиков, 14',
    phone: '+7 (953) 002-05-77',
    category: 'suburb',
    city: 'Верхняя Пышма',
    rating: 4.0,
    features: ['Танцы', 'Фитнес'],
  },
  // --- Окрестности: Берёзовский ---
  {
    name: 'Бассейн «Олимп»',
    address: 'ул. Академика Королёва, 1а',
    phone: '+7 (912) 636-76-69',
    category: 'suburb',
    city: 'Берёзовский',
    rating: 4.1,
    features: ['Бассейн'],
  },
  {
    name: 'Body Art',
    address: 'ул. Театральная, 16а',
    phone: '+7 (902) 444-96-14',
    category: 'suburb',
    city: 'Берёзовский',
    rating: 4.0,
  },
  {
    name: 'Olympia Gym',
    address: 'Берёзовский тракт, 7а, ТЦ «Ерофей»',
    phone: '+7 (950) 652-84-21',
    category: 'suburb',
    city: 'Берёзовский',
    rating: 3.9,
  },
  {
    name: 'Адреналин',
    address: 'ул. Красных Героев, 4/2',
    phone: '+7 (343) 206-11-61',
    category: 'suburb',
    city: 'Берёзовский',
    rating: 3.8,
  },
  {
    name: 'L-Fit',
    address: 'ул. Анучина, 1а, 2 этаж',
    phone: '+7 (995) 563-44-38',
    category: 'suburb',
    city: 'Берёзовский',
    rating: 3.7,
  },
];

const categoryLabels: Record<FitnessClub['category'], { label: string; color: string; bg: string; border: string }> = {
  premium: { label: 'Премиум', color: 'text-purple-700', bg: 'bg-purple-50', border: 'border-purple-200' },
  network: { label: 'Сеть', color: 'text-blue-700', bg: 'bg-blue-50', border: 'border-blue-200' },
  standard: { label: 'Стандарт', color: 'text-gray-700', bg: 'bg-gray-50', border: 'border-gray-200' },
  suburb: { label: 'Пригород', color: 'text-green-700', bg: 'bg-green-50', border: 'border-green-200' },
};

export default function FitnessClubsEkaterinburgDocument() {
  const router = useRouter();
  const contentRef = useRef<HTMLDivElement>(null);

  const premiumClubs = clubs.filter((c) => c.category === 'premium');
  const networkClubs = clubs.filter((c) => c.category === 'network');
  const suburbClubs = clubs.filter((c) => c.category === 'suburb');

  const handleDownloadPdf = async () => {
    const el = contentRef.current;
    if (!el) return;
    const html2canvas = (await import('html2canvas-pro')).default;
    const { jsPDF } = await import('jspdf');
    const canvas = await html2canvas(el, { scale: 2, useCORS: true });
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF('p', 'mm', 'a4');
    const pdfW = pdf.internal.pageSize.getWidth();
    const pdfH = pdf.internal.pageSize.getHeight();
    const imgW = pdfW - 16;
    const imgH = (canvas.height * imgW) / canvas.width;
    let y = 8;
    let page = 0;
    while (y < imgH + 8) {
      if (page > 0) pdf.addPage();
      pdf.addImage(imgData, 'PNG', 8, 8 - y + 8 * (page === 0 ? 0 : 1), imgW, imgH);
      y += pdfH - 16;
      page++;
    }
    pdf.save('fitness-clubs-ekaterinburg.pdf');
  };

  const handleDownloadExcel = async () => {
    const XLSX = await import('xlsx');
    const wb = XLSX.utils.book_new();
    const allData = clubs.map((c) => ({
      'Название': c.name,
      'Адрес': c.city ? `${c.city}, ${c.address}` : `Екатеринбург, ${c.address}`,
      'Телефон': c.phone,
      'Категория': categoryLabels[c.category].label,
      'Рейтинг': c.rating ?? '',
      'Площадь (м²)': c.area ?? '',
      'Особенности': c.features?.join(', ') ?? '',
    }));
    const ws = XLSX.utils.json_to_sheet(allData);
    ws['!cols'] = [
      { wch: 30 }, { wch: 45 }, { wch: 25 },
      { wch: 12 }, { wch: 10 }, { wch: 14 }, { wch: 50 },
    ];
    XLSX.utils.book_append_sheet(wb, ws, 'Все клубы');

    const premiumData = premiumClubs.map((c) => ({
      'Название': c.name,
      'Адрес': `Екатеринбург, ${c.address}`,
      'Телефон': c.phone,
      'Рейтинг': c.rating ?? '',
      'Площадь (м²)': c.area ?? '',
      'Особенности': c.features?.join(', ') ?? '',
    }));
    const ws2 = XLSX.utils.json_to_sheet(premiumData);
    ws2['!cols'] = [{ wch: 25 }, { wch: 45 }, { wch: 25 }, { wch: 10 }, { wch: 14 }, { wch: 50 }];
    XLSX.utils.book_append_sheet(wb, ws2, 'Премиум');

    const networkData = networkClubs.map((c) => ({
      'Название': c.name,
      'Адрес': `Екатеринбург, ${c.address}`,
      'Телефон': c.phone,
      'Рейтинг': c.rating ?? '',
      'Особенности': c.features?.join(', ') ?? '',
    }));
    const ws3 = XLSX.utils.json_to_sheet(networkData);
    ws3['!cols'] = [{ wch: 30 }, { wch: 45 }, { wch: 28 }, { wch: 10 }, { wch: 30 }];
    XLSX.utils.book_append_sheet(wb, ws3, 'Сети');

    const suburbData = suburbClubs.map((c) => ({
      'Название': c.name,
      'Город': c.city ?? '',
      'Адрес': c.address,
      'Телефон': c.phone,
      'Рейтинг': c.rating ?? '',
    }));
    const ws4 = XLSX.utils.json_to_sheet(suburbData);
    ws4['!cols'] = [{ wch: 25 }, { wch: 18 }, { wch: 35 }, { wch: 25 }, { wch: 10 }];
    XLSX.utils.book_append_sheet(wb, ws4, 'Пригород');

    XLSX.writeFile(wb, 'fitness-clubs-ekaterinburg.xlsx');
  };

  const renderStars = (rating: number) => {
    const full = Math.floor(rating);
    const half = rating % 1 >= 0.5;
    return (
      <div className="flex items-center gap-0.5">
        {Array.from({ length: 5 }).map((_, i) => (
          <Star
            key={i}
            className={cn(
              'h-3.5 w-3.5',
              i < full ? 'text-amber-400 fill-amber-400' : i === full && half ? 'text-amber-400 fill-amber-200' : 'text-gray-200 fill-gray-200',
            )}
          />
        ))}
        <span className="text-xs font-medium text-gray-600 ml-1">{rating}</span>
      </div>
    );
  };

  const renderClubRow = (club: FitnessClub, index: number) => {
    const cat = categoryLabels[club.category];
    return (
      <tr key={index} className="hover:bg-gray-50/50">
        <td className="px-4 py-3 border border-border">
          <div className="font-medium text-gray-900">{club.name}</div>
          {club.rating && <div className="mt-1">{renderStars(club.rating)}</div>}
        </td>
        <td className="px-4 py-3 border border-border">
          <div className="flex items-start gap-1.5 text-sm text-gray-700">
            <MapPin className="h-4 w-4 text-gray-400 shrink-0 mt-0.5" />
            <span>{club.city ? `${club.city}, ${club.address}` : club.address}</span>
          </div>
        </td>
        <td className="px-4 py-3 border border-border">
          <div className="flex items-center gap-1.5 text-sm text-gray-700">
            <Phone className="h-3.5 w-3.5 text-gray-400 shrink-0" />
            <span className="whitespace-nowrap">{club.phone}</span>
          </div>
        </td>
        <td className="px-4 py-3 border border-border text-center">
          <span className={cn('text-[10px] font-semibold px-2 py-0.5 rounded-full border', cat.bg, cat.color, cat.border)}>
            {cat.label}
          </span>
        </td>
        <td className="px-4 py-3 border border-border text-center text-sm text-gray-600">
          {club.area ? `${club.area.toLocaleString()} м²` : '—'}
        </td>
      </tr>
    );
  };

  return (
    <div>
      <button
        onClick={() => router.push('/documents')}
        className="flex items-center gap-2 text-sm text-muted hover:text-gray-900 mb-6 transition-colors"
      >
        <ArrowLeft className="h-4 w-4" />
        Все документы
      </button>

      <div ref={contentRef} className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
        {/* Header */}
        <div className="px-8 py-6 border-b border-border">
          <div className="flex items-start justify-between">
            <div className="flex items-center gap-3">
              <div className="bg-orange-50 p-2.5 rounded-lg">
                <Dumbbell className="h-6 w-6 text-primary" />
              </div>
              <div>
                <h1 className="text-xl font-bold text-gray-900">
                  Фитнес-клубы Екатеринбурга и окрестностей
                </h1>
                <p className="text-sm text-muted mt-1">
                  Дата: {LAST_UPDATE} | {clubs.length} клубов | Адреса и телефоны
                </p>
              </div>
            </div>
            <div className="flex gap-2 print:hidden">
              <button
                onClick={() => void handleDownloadPdf()}
                className="flex items-center gap-2 border border-border bg-card text-gray-700 px-4 py-2 rounded-xl text-sm font-medium hover:bg-background transition-colors"
              >
                <FileDown className="h-4 w-4" />
                Скачать PDF
              </button>
              <button
                onClick={() => void handleDownloadExcel()}
                className="flex items-center gap-2 border border-border bg-card text-gray-700 px-4 py-2 rounded-xl text-sm font-medium hover:bg-background transition-colors"
              >
                <Table2 className="h-4 w-4" />
                Скачать Excel
              </button>
              <button
                onClick={() => window.print()}
                className="flex items-center gap-2 border border-border bg-card text-gray-700 px-4 py-2 rounded-xl text-sm font-medium hover:bg-background transition-colors"
              >
                <Printer className="h-4 w-4" />
                Печать
              </button>
            </div>
          </div>
        </div>

        <div className="px-8 py-6 space-y-8">
          {/* Summary cards */}
          <div className="grid grid-cols-4 gap-4">
            <div className="bg-gradient-to-br from-primary/10 to-orange-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-primary">{clubs.length}</p>
              <p className="text-xs text-muted mt-1">Всего клубов</p>
            </div>
            <div className="bg-purple-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-purple-700">{premiumClubs.length}</p>
              <p className="text-xs text-muted mt-1">Премиум-клубы</p>
            </div>
            <div className="bg-blue-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-blue-700">{networkClubs.length}</p>
              <p className="text-xs text-muted mt-1">Сетевые филиалы</p>
            </div>
            <div className="bg-green-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-green-700">{suburbClubs.length}</p>
              <p className="text-xs text-muted mt-1">Пригород</p>
            </div>
          </div>

          {/* Premium clubs */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <div className="w-3 h-3 rounded-sm bg-purple-500" />
              Премиум-клубы Екатеринбурга
            </h2>
            <div className="grid grid-cols-3 gap-4">
              {premiumClubs.map((club, i) => {
                const cat = categoryLabels[club.category];
                return (
                  <div key={i} className="border border-border rounded-xl p-4 hover:shadow-md transition-shadow">
                    <div className="flex items-start justify-between mb-2">
                      <h3 className="font-semibold text-gray-900 text-sm">{club.name}</h3>
                      <span className={cn('text-[10px] font-semibold px-2 py-0.5 rounded-full border shrink-0', cat.bg, cat.color, cat.border)}>
                        {cat.label}
                      </span>
                    </div>
                    {club.rating && <div className="mb-2">{renderStars(club.rating)}</div>}
                    <div className="space-y-1.5 text-sm">
                      <div className="flex items-start gap-1.5 text-gray-600">
                        <MapPin className="h-3.5 w-3.5 text-gray-400 shrink-0 mt-0.5" />
                        <span>{club.address}</span>
                      </div>
                      <div className="flex items-center gap-1.5 text-gray-600">
                        <Phone className="h-3.5 w-3.5 text-gray-400 shrink-0" />
                        <span>{club.phone}</span>
                      </div>
                      {club.area && (
                        <div className="flex items-center gap-1.5 text-gray-600">
                          <Building2 className="h-3.5 w-3.5 text-gray-400 shrink-0" />
                          <span>{club.area.toLocaleString()} м²</span>
                        </div>
                      )}
                    </div>
                    {club.features && club.features.length > 0 && (
                      <div className="flex flex-wrap gap-1 mt-3">
                        {club.features.map((f, fi) => (
                          <span key={fi} className="text-[10px] bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded">
                            {f}
                          </span>
                        ))}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>

          {/* Network clubs */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <div className="w-3 h-3 rounded-sm bg-blue-500" />
              Сетевые клубы
            </h2>

            {/* Bright Fit */}
            <h3 className="text-sm font-semibold text-gray-700 mb-3 ml-5">Bright Fit (6 филиалов)</h3>
            <table className="w-full text-sm border-collapse mb-6">
              <thead>
                <tr className="bg-gray-50">
                  <th className="text-left px-4 py-2 font-medium text-muted border border-border">Филиал</th>
                  <th className="text-left px-4 py-2 font-medium text-muted border border-border">Адрес</th>
                  <th className="text-left px-4 py-2 font-medium text-muted border border-border w-52">Телефон</th>
                  <th className="text-center px-4 py-2 font-medium text-muted border border-border w-24">Рейтинг</th>
                </tr>
              </thead>
              <tbody>
                {networkClubs.filter((c) => c.name.startsWith('Bright')).map((club, i) => (
                  <tr key={i} className="hover:bg-gray-50/50">
                    <td className="px-4 py-2 border border-border font-medium text-gray-900">{club.name}</td>
                    <td className="px-4 py-2 border border-border text-gray-600">
                      <div className="flex items-start gap-1.5">
                        <MapPin className="h-3.5 w-3.5 text-gray-400 shrink-0 mt-0.5" />
                        {club.address}
                      </div>
                    </td>
                    <td className="px-4 py-2 border border-border text-gray-600">
                      <div className="flex items-center gap-1.5">
                        <Phone className="h-3.5 w-3.5 text-gray-400 shrink-0" />
                        {club.phone}
                      </div>
                    </td>
                    <td className="px-4 py-2 border border-border text-center">
                      {club.rating && renderStars(club.rating)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>

            {/* Metrofitness */}
            <h3 className="text-sm font-semibold text-gray-700 mb-3 ml-5">Metrofitness (5 филиалов, круглосуточно)</h3>
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-gray-50">
                  <th className="text-left px-4 py-2 font-medium text-muted border border-border">Филиал</th>
                  <th className="text-left px-4 py-2 font-medium text-muted border border-border">Адрес</th>
                  <th className="text-left px-4 py-2 font-medium text-muted border border-border w-60">Телефон</th>
                  <th className="text-center px-4 py-2 font-medium text-muted border border-border w-24">Рейтинг</th>
                </tr>
              </thead>
              <tbody>
                {networkClubs.filter((c) => c.name.startsWith('Metro')).map((club, i) => (
                  <tr key={i} className="hover:bg-gray-50/50">
                    <td className="px-4 py-2 border border-border font-medium text-gray-900">{club.name}</td>
                    <td className="px-4 py-2 border border-border text-gray-600">
                      <div className="flex items-start gap-1.5">
                        <MapPin className="h-3.5 w-3.5 text-gray-400 shrink-0 mt-0.5" />
                        {club.address}
                      </div>
                    </td>
                    <td className="px-4 py-2 border border-border text-gray-600">
                      <div className="flex items-center gap-1.5">
                        <Phone className="h-3.5 w-3.5 text-gray-400 shrink-0" />
                        {club.phone}
                      </div>
                    </td>
                    <td className="px-4 py-2 border border-border text-center">
                      {club.rating && renderStars(club.rating)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Suburb clubs */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <div className="w-3 h-3 rounded-sm bg-green-500" />
              Клубы в окрестностях Екатеринбурга
            </h2>

            {/* Group by city */}
            {['Верхняя Пышма', 'Берёзовский'].map((city) => {
              const cityClubs = suburbClubs.filter((c) => c.city === city);
              return (
                <div key={city} className="mb-6">
                  <h3 className="text-sm font-semibold text-gray-700 mb-3 ml-5 flex items-center gap-2">
                    <Building2 className="h-4 w-4 text-green-600" />
                    {city} ({cityClubs.length})
                  </h3>
                  <table className="w-full text-sm border-collapse">
                    <thead>
                      <tr className="bg-gray-50">
                        <th className="text-left px-4 py-2 font-medium text-muted border border-border">Название</th>
                        <th className="text-left px-4 py-2 font-medium text-muted border border-border">Адрес</th>
                        <th className="text-left px-4 py-2 font-medium text-muted border border-border w-48">Телефон</th>
                        <th className="text-center px-4 py-2 font-medium text-muted border border-border w-24">Рейтинг</th>
                        <th className="text-left px-4 py-2 font-medium text-muted border border-border w-36">Особенности</th>
                      </tr>
                    </thead>
                    <tbody>
                      {cityClubs.map((club, i) => (
                        <tr key={i} className="hover:bg-gray-50/50">
                          <td className="px-4 py-2 border border-border font-medium text-gray-900">{club.name}</td>
                          <td className="px-4 py-2 border border-border text-gray-600">
                            <div className="flex items-start gap-1.5">
                              <MapPin className="h-3.5 w-3.5 text-gray-400 shrink-0 mt-0.5" />
                              {club.address}
                            </div>
                          </td>
                          <td className="px-4 py-2 border border-border text-gray-600">
                            <div className="flex items-center gap-1.5">
                              <Phone className="h-3.5 w-3.5 text-gray-400 shrink-0" />
                              {club.phone}
                            </div>
                          </td>
                          <td className="px-4 py-2 border border-border text-center">
                            {club.rating && renderStars(club.rating)}
                          </td>
                          <td className="px-4 py-2 border border-border text-gray-500 text-xs">
                            {club.features?.join(', ') ?? '—'}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              );
            })}
          </div>

          {/* Full table */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <div className="w-3 h-3 rounded-sm bg-orange-500" />
              Полный список ({clubs.length} клубов)
            </h2>
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-gray-50">
                  <th className="text-left px-4 py-3 font-medium text-muted border border-border">Название</th>
                  <th className="text-left px-4 py-3 font-medium text-muted border border-border">Адрес</th>
                  <th className="text-left px-4 py-3 font-medium text-muted border border-border w-52">Телефон</th>
                  <th className="text-center px-4 py-3 font-medium text-muted border border-border w-24">Категория</th>
                  <th className="text-center px-4 py-3 font-medium text-muted border border-border w-24">Площадь</th>
                </tr>
              </thead>
              <tbody>
                {clubs.map((club, i) => renderClubRow(club, i))}
              </tbody>
            </table>
          </div>

          {/* Footer note */}
          <div className="bg-gray-50 rounded-xl p-4 text-sm text-gray-500">
            <p>
              Данные собраны из открытых источников (2ГИС, Zoon, Flamp, официальные сайты клубов) по состоянию на {LAST_UPDATE}.
              Адреса и телефоны могут измениться — рекомендуем уточнять информацию перед визитом.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}
