import React, { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight, Calendar, Download, Share2, Building2, CheckCircle2, TrendingUp, DollarSign, Scale, PartyPopper, Smile, Camera, ClipboardList, ArrowLeft, RefreshCw, Send, Link2, X, Lock, Receipt, Wrench, Zap, Users, Key, Eye } from 'lucide-react';
import { apiClient } from '../../services/apiClient';

// Базовый URL для загрузок (фото до/после), как в таблице «Фото отчёт» PR
const UPLOADS_BASE = (import.meta.env.VITE_API_BASE_URL || 'http://localhost:4000/api').replace(/\/api\/?$/, '') || 'http://localhost:4000';
const toPhotoUrl = (path: string | null | undefined) => {
  if (!path) return undefined;
  if (path.startsWith('http://') || path.startsWith('https://')) return path;
  const base = UPLOADS_BASE.endsWith('/') ? UPLOADS_BASE.slice(0, -1) : UPLOADS_BASE;
  const p = path.startsWith('/') ? path : `/${path}`;
  return base + p;
};

interface BuildingReportPageProps {
  buildingId?: string;
  buildingAddress?: string;
  month?: string;
  onBack?: () => void;
  mode?: 'portal' | 'published'; // Режим: портал (редактирование) или опубликованная версия
  reportId?: string | number;
  accessKey?: string; // Ключ доступа для опубликованной версии
}

export const BuildingReportPage: React.FC<BuildingReportPageProps> = (props) => {
  const {
    buildingId: buildingIdProp,
    buildingAddress = 'Кавказская, 12',
    month = 'Январь 2025',
    onBack,
    mode = 'portal',
    reportId,
    accessKey
  } = props || {};
  const [currentMonth, setCurrentMonth] = useState(month);
  const [showArchive, setShowArchive] = useState(false);
  const [showArchiveCalendar, setShowArchiveCalendar] = useState(false);
  const [selectedYear, setSelectedYear] = useState<number | null>(null);
  const [companySettings, setCompanySettings] = useState<any | null>(null);
  const [isAuthorized, setIsAuthorized] = useState(false);
  const [accessKeyInput, setAccessKeyInput] = useState('');
  const [showAccessKeyModal, setShowAccessKeyModal] = useState(false);
  
  // Данные отчета
  const [reportData, setReportData] = useState<any>(null);
  const [isLoadingData, setIsLoadingData] = useState(false);
  
  // Для published режима: загружаем отчет по ID, чтобы получить buildingId
  const [loadedBuildingId, setLoadedBuildingId] = useState<string | undefined>(buildingIdProp);
  const [loadedBuildingAddress, setLoadedBuildingAddress] = useState<string>(buildingAddress);
  const [loadedMonth, setLoadedMonth] = useState<string>(month);

  const effectiveReportId = reportId ?? 'demo';
  
  // Определяем buildingId: используем пропс, загруженный из отчета, или reportId (если это buildingId)
  const buildingId = buildingIdProp ?? loadedBuildingId ?? (reportId && reportId !== 'demo' && !/^\d+$/.test(String(reportId)) ? String(reportId) : undefined);
  // Уникальный ключ для каждого отчёта (демо-реализация)
  const expectedAccessKey = `mkd-${String(effectiveReportId)}-key`;

  // Проверка ключа доступа для опубликованной версии
  useEffect(() => {
    if (mode === 'published') {
      // Получаем ключ из URL параметров или пропсов
      const urlParams = new URLSearchParams(window.location.search);
      const keyFromUrl = urlParams.get('key') || accessKey;

      if (keyFromUrl === expectedAccessKey) {
        setIsAuthorized(true);
      } else if (!keyFromUrl) {
        // Если ключа нет, показываем форму ввода
        setIsAuthorized(false);
      } else {
        // Неверный ключ
        alert('Неверный ключ доступа');
        setIsAuthorized(false);
      }
    } else {
      setIsAuthorized(true);
    }
  }, [mode, accessKey, expectedAccessKey]);

  const months = [
    'Январь', 'Февраль', 'Март', 'Апрель',
    'Май', 'Июнь', 'Июль', 'Август',
    'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
  ];

  // Надёжный разбор месяца: поддерживаем "Январь 2025", "января 2025", "January 2025" и т.д.
  const currentYear = parseInt(currentMonth.replace(/\D/g, ' ').trim().split(/\s+/).pop() || String(new Date().getFullYear()), 10) || new Date().getFullYear();
  const currentMonthName = currentMonth.split(/\s+/)[0] || '';
  let currentMonthIndex = months.findIndex(m => m.toLowerCase() === currentMonthName.toLowerCase());
  if (currentMonthIndex === -1) {
    const monthLower = currentMonthName.toLowerCase();
    const genitiveMap: Record<string, number> = { январ: 0, феврал: 1, март: 2, апрел: 3, май: 4, июн: 5, июл: 6, август: 7, сентябр: 8, октябр: 9, ноябр: 10, декабр: 11 };
    for (const [key, idx] of Object.entries(genitiveMap)) {
      if (monthLower.startsWith(key) || monthLower.includes(key)) { currentMonthIndex = idx; break; }
    }
  }
  if (currentMonthIndex === -1) currentMonthIndex = new Date().getMonth();

  // Для published режима: загружаем отчет по ID, чтобы получить buildingId и адрес
  useEffect(() => {
    if (mode === 'published' && effectiveReportId && effectiveReportId !== 'demo') {
      const loadReportInfo = async () => {
        try {
          // Проверяем, является ли reportId числом (ID отчета) или строкой (buildingId)
          const isNumericId = /^\d+$/.test(String(effectiveReportId));
          
          if (isNumericId) {
            // reportId - это ID отчета, загружаем отчет по ID
            const report = await apiClient.get<any>(`/pr/reports/${effectiveReportId}`);
            if (report?.buildingId || report?.building_id) {
              setLoadedBuildingId(report.buildingId || report.building_id);
            }
            // Извлекаем адрес из разных возможных мест (приоритет: content.building.address)
            const address = (report?.content?.building?.address) ||
                           report?.address || 
                           (report?.building_data?.passport?.address) ||
                           (report?.building_data?.passport?.general?.address);
            if (address) {
              console.log('[BuildingReportPage] Установлен адрес из отчета:', address);
              setLoadedBuildingAddress(address);
            } else {
              console.warn('[BuildingReportPage] Адрес не найден в отчете');
            }
            if (report?.month) {
              setLoadedMonth(report.month);
              setCurrentMonth(report.month);
            }
          } else {
            // reportId - это buildingId, используем его напрямую
            setLoadedBuildingId(String(effectiveReportId));
          }
        } catch (err) {
          console.error('Error loading report info:', err);
        }
      };
      
      loadReportInfo();
    }
  }, [mode, effectiveReportId]);

  // Загрузка данных отчета
  useEffect(() => {
    if (effectiveReportId && effectiveReportId !== 'demo') {
      loadReportData();
    } else if (effectiveReportId === 'demo') {
      // Для демо используем мок данные
      setReportData({
        building: { address: buildingAddress, imageUrl: '' },
        company: null,
        stats: {
          appsQuality: 98,
          appsTotal: 156,
          appsCompleted: 153,
          tasksTotal: 25,
          tasksCompleted: 24,
          fundsCollected: 2400000,
          fundsSpent: 1890000,
          fundsBalance: 560000,
          debtCasesWon: 12,
          debtCollected: 450000
        },
        expenses: {
          total: 1890000,
          byCategory: {
            utilities: 850000,
            maintenance: 720000,
            management: 220000,
            other: 100000
          }
        },
        events: [],
        nps: { score: 72, totalResponses: 0, promoters: 0, passives: 0, detractors: 0 },
        workPhotos: [],
        planItems: []
      });
    }
  }, [effectiveReportId, currentMonth, currentYear, buildingId, loadedBuildingAddress]);

  // Загрузка настроек управляющей компании (для блока информации о компании в отчете)
  useEffect(() => {
    const loadCompanySettings = async () => {
      try {
        const data = await apiClient.get('/settings/company');
        setCompanySettings(data);
      } catch (err) {
        console.error('Error loading company settings:', err);
      }
    };

    loadCompanySettings();
  }, []);

  const loadReportData = async (forceRefresh = false) => {
    try {
      setIsLoadingData(true);
      const monthNum = currentMonthIndex + 1;
      
      // Добавляем timestamp для предотвращения кэширования; при нажатии «Обновить данные» — force_refresh, чтобы пересчитать из таблиц
      const timestamp = new Date().getTime();
      const forceParam = forceRefresh ? '&force_refresh=1' : '';
      // Используем buildingId из пропсов, загруженный из отчета, или из reportData
      const effectiveBuildingId = buildingId ?? loadedBuildingId ?? reportData?.building?.id ?? (effectiveReportId !== 'demo' && !/^\d+$/.test(String(effectiveReportId)) ? effectiveReportId : undefined);

      let data;
      // Проверяем, является ли reportId числом (ID отчета) или строкой (buildingId)
      const isNumericReportId = /^\d+$/.test(String(effectiveReportId));
      
      // Для published режима: используем сохраненный контент отчета
      if (mode === 'published' && isNumericReportId && !forceRefresh) {
        try {
          // Загружаем сохраненный отчет с content
          const savedReport = await apiClient.get<any>(`/pr/reports/${effectiveReportId}`);
          // Проверяем, что content существует и содержит данные
          const hasValidContent = savedReport?.content && 
                                 typeof savedReport.content === 'object' &&
                                 Object.keys(savedReport.content).length > 0 &&
                                 (savedReport.content.stats || savedReport.content.expenses || savedReport.content.nps);
          
          console.log('[BuildingReportPage] Загружен сохраненный отчет:', {
            hasContent: !!savedReport?.content,
            contentType: typeof savedReport?.content,
            contentKeys: savedReport?.content ? Object.keys(savedReport.content) : [],
            hasStats: !!savedReport?.content?.stats,
            hasExpenses: !!savedReport?.content?.expenses,
            buildingAddress: savedReport?.content?.building?.address,
            hasValidContent: hasValidContent
          });
          
          if (hasValidContent) {
            console.log('[BuildingReportPage] Используем сохраненный контент отчета для published режима');
            // Преобразуем сохраненный контент в формат данных отчета
            const content = savedReport.content as any;
            
            // Обновляем адрес из сохраненного контента ПЕРЕД загрузкой данных
            if (content.building?.address) {
              console.log('[BuildingReportPage] Обновляем адрес из content:', content.building.address);
              setLoadedBuildingAddress(content.building.address);
            }
            
            // Загружаем базовую информацию о доме и компании (для building и company объектов)
            const reportDataResponse = await apiClient.get<any>(`/pr/reports/${effectiveReportId}/data?month=${monthNum}&year=${currentYear}&building_id=${effectiveBuildingId || savedReport.buildingId || savedReport.building_id || ''}&_t=${timestamp}`).catch(() => ({}));
            
            // Используем данные из сохраненного content (структура: content.stats, content.expenses, content.nps и т.д.)
            const baseData = reportDataResponse || {};
            data = {
              ...baseData,
              // Используем данные из сохраненного content (приоритет content над baseData)
              building: content.building || baseData.building || {},
              company: content.company || baseData.company || null,
              stats: content.stats || baseData.stats || {},
              expenses: content.expenses || baseData.expenses || {},
              nps: content.nps || baseData.nps || {},
              events: content.events || baseData.events || [],
              workPhotos: content.workPhotos || baseData.workPhotos || [],
              planItems: content.planItems || baseData.planItems || []
            };
            
            console.log('[BuildingReportPage] Данные из content:', {
              hasStats: !!data.stats,
              statsKeys: data.stats ? Object.keys(data.stats) : [],
              appsQuality: data.stats?.appsQuality,
              appsTotal: data.stats?.appsTotal,
              fundsCollected: data.stats?.fundsCollected,
              buildingAddress: data.building?.address
            });
            
            setReportData(data);
            return;
          } else {
            console.warn('[BuildingReportPage] Сохраненный отчет не содержит content или content пустой, загружаем данные из /data');
            // Если content пустой, все равно загружаем данные из /data endpoint
            // Но сначала обновляем адрес из savedReport, если он есть
            if (savedReport?.address) {
              setLoadedBuildingAddress(savedReport.address);
            }
          }
        } catch (e) {
          console.error('[BuildingReportPage] Ошибка загрузки сохраненного отчета, загружаем данные заново:', e);
        }
      }
      
      // Если reportId это buildingId (строка) или у нас есть effectiveBuildingId, используем buildingId напрямую
      if (effectiveBuildingId && (!isNumericReportId || effectiveReportId === 'demo')) {
        // Загружаем данные напрямую по buildingId и месяцу
        data = await apiClient.get(`/pr/reports/${effectiveBuildingId}/data?month=${monthNum}&year=${currentYear}&building_id=${effectiveBuildingId}&_t=${timestamp}${forceParam}`);
      } else {
        // reportId - это ID отчета (число), загружаем данные по ID отчета
        // Для published режима уже попытались загрузить content выше, теперь загружаем актуальные данные
        data = await apiClient.get(`/pr/reports/${effectiveReportId}/data?month=${monthNum}&year=${currentYear}&building_id=${effectiveBuildingId || ''}&_t=${timestamp}${forceParam}`);
        
        // Если это published режим и данные загружены, обновляем адрес из данных
        if (mode === 'published' && data?.building?.address) {
          setLoadedBuildingAddress(data.building.address);
        }
      }
      
      // Обновляем адрес из загруженных данных, если он есть
      if (data?.building?.address) {
        console.log('[BuildingReportPage] Обновляем адрес из загруженных данных:', data.building.address);
        setLoadedBuildingAddress(data.building.address);
      }
      
      // Если данные приходят в формате с content (из сохраненного отчета), извлекаем их
      if (data?.content) {
        console.log('[BuildingReportPage] Данные пришли в формате content, извлекаем...');
        // Объединяем данные из content с основными данными
        const content = data.content;
        
        // NPS из content
        if (content.nps) {
          data.nps = {
            score: content.nps.score || 0,
            totalResponses: content.nps.totalResponses || 0,
            promoters: content.nps.promoters || 0,
            passives: content.nps.passives || 0,
            detractors: content.nps.detractors || 0,
            avgScore: content.nps.avgScore || 0
          };
        }
        
        // Stats из content.applications
        if (content.applications) {
          if (!data.stats) data.stats = {};
          data.stats.appsQuality = content.applications.quality || data.stats.appsQuality || 0;
          data.stats.appsTotal = content.applications.total || data.stats.appsTotal || 0;
          data.stats.appsCompleted = content.applications.completed || data.stats.appsCompleted || 0;
        }
        
        // Finances из content.finances
        if (content.finances) {
          if (!data.stats) data.stats = {};
          data.stats.fundsCollected = content.finances.collected || data.stats.fundsCollected || 0;
          data.stats.fundsSpent = content.finances.expenses || data.stats.fundsSpent || 0;
          data.stats.fundsBalance = content.finances.balance || data.stats.fundsBalance || 0;
          
          if (!data.expenses) data.expenses = {};
          data.expenses.total = content.finances.expenses || data.expenses.total || 0;
        }
      }
      
      // Логируем данные для отладки
      console.log('[BuildingReportPage] Загруженные данные:', {
        hasNps: !!data?.nps,
        npsScore: data?.nps?.score,
        npsTotalResponses: data?.nps?.totalResponses,
        hasStats: !!data?.stats,
        statsKeys: data?.stats ? Object.keys(data.stats) : [],
        appsQuality: data?.stats?.appsQuality,
        appsTotal: data?.stats?.appsTotal,
        fundsCollected: data?.stats?.fundsCollected,
        hasContent: !!data?.content,
        buildingAddress: data?.building?.address,
        period: `${currentMonth} ${currentYear}`
      });
      
      setReportData(data);
    } catch (err) {
      console.error('Error loading report data:', err);
      // Используем мок данные при ошибке
      setReportData(null);
    } finally {
      setIsLoadingData(false);
    }
  };

  // Показываем индикатор загрузки
  if (isLoadingData && !reportData) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-primary-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-slate-600">Загрузка данных отчета...</p>
        </div>
      </div>
    );
  }

  const handlePrevMonth = () => {
    let newIndex = currentMonthIndex - 1;
    let newYear = currentYear;
    if (newIndex < 0) {
      newIndex = 11;
      newYear--;
    }
    setCurrentMonth(`${months[newIndex]} ${newYear}`);
  };

  const handleNextMonth = () => {
    let newIndex = currentMonthIndex + 1;
    let newYear = currentYear;
    if (newIndex > 11) {
      newIndex = 0;
      newYear++;
    }
    setCurrentMonth(`${months[newIndex]} ${newYear}`);
  };

  const handlePublish = async () => {
    if (!reportId || reportId === 'demo') {
      alert('Это демо-отчет. Создайте реальный отчет для публикации.');
      return;
    }
    try {
      // При публикации отчет обновляется актуальными данными
      await apiClient.post(`/pr/reports/${reportId}/publish`);
      alert('Отчет обновлен актуальными данными и опубликован!');
      // Перезагружаем данные отчета
      await loadReportData();
    } catch (err: any) {
      console.error('Error publishing report:', err);
      alert(`Ошибка публикации отчета: ${err.message || 'Неизвестная ошибка'}`);
    }
  };

  const handleGetLink = () => {
    if (!reportId) return;
    setShowAccessKeyModal(true);
  };

  // Генерируем список годов для архива (текущий год и 5 лет назад)
  const currentYearNum = new Date().getFullYear();
  const archiveYears = Array.from({ length: 6 }, (_, i) => currentYearNum - i);

  // Для опубликованной версии - проверка доступа
  if (mode === 'published' && !isAuthorized) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50 flex items-center justify-center">
        <div className="max-w-md w-full bg-white rounded-3xl p-8 shadow-2xl border border-slate-200">
          <div className="text-center mb-6">
            <div className="inline-flex items-center justify-center w-16 h-16 bg-indigo-100 rounded-full mb-4">
              <Lock className="w-8 h-8 text-indigo-600" />
            </div>
            <h2 className="text-2xl font-black text-slate-800 mb-2">Доступ к отчету</h2>
            <p className="text-sm text-slate-600">Введите ключ доступа для просмотра отчета</p>
          </div>
          
          <div className="space-y-4">
            <div>
              <label className="block text-xs font-bold text-slate-700 mb-2 uppercase tracking-wider">
                Ключ доступа
              </label>
              <input
                type="password"
                value={accessKeyInput}
                onChange={(e) => setAccessKeyInput(e.target.value)}
                placeholder="Введите ключ доступа"
                className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                onKeyPress={(e) => {
                  if (e.key === 'Enter') {
                    if (accessKeyInput === expectedAccessKey) {
                      setIsAuthorized(true);
                      // Обновляем URL с ключом
                      const url = new URL(window.location.href);
                      url.searchParams.set('key', accessKeyInput);
                      window.history.pushState({}, '', url.toString());
                    } else {
                      alert('Неверный ключ доступа');
                      setAccessKeyInput('');
                    }
                  }
                }}
              />
            </div>
            
            <button
              onClick={() => {
                if (accessKeyInput === expectedAccessKey) {
                  setIsAuthorized(true);
                  const url = new URL(window.location.href);
                  url.searchParams.set('key', accessKeyInput);
                  window.history.pushState({}, '', url.toString());
                } else {
                  alert('Неверный ключ доступа');
                  setAccessKeyInput('');
                }
              }}
              className="w-full px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-sm font-bold transition-colors"
            >
              Войти
            </button>
          </div>
          
          <p className="text-xs text-slate-400 text-center mt-6">
            Ключ доступа выдается управляющей компанией
          </p>
        </div>
      </div>
    );
  }

  // Для опубликованной версии - убираем верхнее меню и все элементы управления
  if (mode === 'published') {
    return (
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Hero Section - Building Photo */}
        <div className="relative mb-8 rounded-3xl overflow-hidden shadow-2xl">
          <div className="relative h-96 bg-gradient-to-br from-primary-600 via-primary-500 to-indigo-600">
            <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM0ZjQ2ZjYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2MzY2ZjEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgZmlsbD0idXJsKCNhKSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSI0OCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIiBvcGFjaXR5PSIwLjMiPkJ1aWxkaW5nIEltYWdlPC90ZXh0Pjwvc3ZnPg==')] bg-cover bg-center opacity-20"></div>
            
            <div className="absolute inset-0 flex items-end">
              <div className="w-full bg-gradient-to-t from-black/80 via-black/40 to-transparent p-8 md:p-12">
                <h1 className="text-4xl md:text-6xl font-black text-white mb-2 drop-shadow-2xl">
                  {loadedBuildingAddress || buildingAddress}
                </h1>
                <p className="text-lg md:text-xl text-white/90 font-bold">
                  Ежемесячный отчет для собственников
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Month Navigation - только для опубликованной версии */}
        <div className="mb-8 flex flex-col sm:flex-row items-center justify-between gap-4 bg-white rounded-2xl p-6 shadow-lg border border-slate-200">
          <div className="flex items-center gap-4">
            <button
              onClick={handlePrevMonth}
              className="p-3 rounded-xl bg-primary-50 text-primary-600 hover:bg-primary-100 active:scale-95 transition-all"
            >
              <ChevronLeft className="w-6 h-6" />
            </button>
            
            <div className="flex items-center gap-3">
              <Calendar className="w-5 h-5 text-primary-600" />
              <h2 className="text-2xl font-black text-slate-800">{currentMonth}</h2>
            </div>
            
            <button
              onClick={handleNextMonth}
              className="p-3 rounded-xl bg-primary-50 text-primary-600 hover:bg-primary-100 active:scale-95 transition-all"
            >
              <ChevronRight className="w-6 h-6" />
            </button>
          </div>

          <div className="relative">
            <button
              onClick={() => setShowArchiveCalendar(!showArchiveCalendar)}
              className="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-sm font-bold transition-colors"
            >
              Архив
            </button>

            {/* Archive Calendar Dropdown */}
            {showArchiveCalendar && (
              <>
                <div 
                  className="fixed inset-0 z-40" 
                  onClick={() => {
                    setShowArchiveCalendar(false);
                    setSelectedYear(null);
                  }}
                />
                <div className="absolute right-0 top-full mt-2 bg-white rounded-2xl shadow-2xl border border-slate-200 p-6 z-50 min-w-[300px]">
                <div className="flex justify-between items-center mb-4">
                  <h3 className="font-black text-slate-800">Выберите период</h3>
                  <button
                    onClick={() => {
                      setShowArchiveCalendar(false);
                      setSelectedYear(null);
                    }}
                    className="p-1 hover:bg-slate-100 rounded-lg"
                  >
                    <X className="w-4 h-4 text-slate-500" />
                  </button>
                </div>

                {selectedYear === null ? (
                  <div className="space-y-2">
                    <p className="text-xs font-bold text-slate-500 uppercase mb-3">Выберите год</p>
                    {archiveYears.map(year => (
                      <button
                        key={year}
                        onClick={() => setSelectedYear(year)}
                        className="w-full px-4 py-3 bg-slate-50 hover:bg-primary-50 hover:text-primary-600 rounded-xl text-left font-bold transition-colors"
                      >
                        {year}
                      </button>
                    ))}
                  </div>
                ) : (
                  <div>
                    <button
                      onClick={() => setSelectedYear(null)}
                      className="mb-4 text-sm text-primary-600 hover:text-primary-700 font-bold flex items-center gap-2"
                    >
                      <ChevronLeft className="w-4 h-4" />
                      Назад к годам
                    </button>
                    <p className="text-xs font-bold text-slate-500 uppercase mb-3">Выберите месяц {selectedYear}</p>
                    <div className="grid grid-cols-3 gap-2">
                      {months.map((monthName, index) => (
                        <button
                          key={index}
                          onClick={() => {
                            setCurrentMonth(`${monthName} ${selectedYear}`);
                            setShowArchiveCalendar(false);
                            setSelectedYear(null);
                          }}
                          className="px-3 py-2 bg-slate-50 hover:bg-primary-50 hover:text-primary-600 rounded-lg text-sm font-bold transition-colors"
                        >
                          {monthName}
                        </button>
                      ))}
                    </div>
                  </div>
                )}
                </div>
              </>
            )}
          </div>
        </div>

        {/* Rest of content - same as portal version */}
        {renderContent()}
      </div>
    );
  }

  // Версия для портала (редактирование)
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50">
      {/* Header with back button and action buttons */}
      {onBack && (
        <div className="sticky top-[64px] z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <div className="flex items-center justify-between">
              <button
                onClick={onBack}
                className="flex items-center gap-2 text-slate-600 hover:text-slate-900 transition-colors group"
              >
                <ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
                <span className="text-sm font-bold">Вернуться к списку отчетов</span>
              </button>
              
              <div className="flex items-center gap-3">
                <button
                  onClick={() => loadReportData(true)}
                  disabled={isLoadingData}
                  className="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-sm font-bold flex items-center gap-2 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
                >
                  <RefreshCw className={`w-4 h-4 ${isLoadingData ? 'animate-spin' : ''}`} />
                  {isLoadingData ? 'Обновление…' : 'Обновить данные'}
                </button>
                <button
                  onClick={handlePublish}
                  className="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-xl text-sm font-bold flex items-center gap-2 transition-colors"
                >
                  <Send className="w-4 h-4" />
                  Опубликовать
                </button>
                <button
                  onClick={handleGetLink}
                  className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-sm font-bold flex items-center gap-2 transition-colors"
                >
                  <Key className="w-4 h-4" />
                  Получить ключ доступа
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Модальное окно с ключом доступа */}
        {showAccessKeyModal && (
          <AccessKeyModal
            onClose={() => setShowAccessKeyModal(false)}
            reportId={reportId || 'demo'}
          />
        )}

        {/* Hero Section - Building Photo */}
        <div className="relative mb-8 rounded-3xl overflow-hidden shadow-2xl">
          <div className="relative h-96 bg-gradient-to-br from-primary-600 via-primary-500 to-indigo-600">
            <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM0ZjQ2ZjYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2MzY2ZjEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgZmlsbD0idXJsKCNhKSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSI0OCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIiBvcGFjaXR5PSIwLjMiPkJ1aWxkaW5nIEltYWdlPC90ZXh0Pjwvc3ZnPg==')] bg-cover bg-center opacity-20"></div>
            
            <div className="absolute inset-0 flex items-end">
              <div className="w-full bg-gradient-to-t from-black/80 via-black/40 to-transparent p-8 md:p-12">
                <h1 className="text-4xl md:text-6xl font-black text-white mb-2 drop-shadow-2xl">
                  {loadedBuildingAddress || buildingAddress}
                </h1>
                <p className="text-lg md:text-xl text-white/90 font-bold">
                  Ежемесячный отчет для собственников
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Month Navigation - для портала */}
        <div className="mb-8 flex flex-col sm:flex-row items-center justify-between gap-4 bg-white rounded-2xl p-6 shadow-lg border border-slate-200">
          <div className="flex items-center gap-4">
            <button
              onClick={handlePrevMonth}
              className="p-3 rounded-xl bg-primary-50 text-primary-600 hover:bg-primary-100 active:scale-95 transition-all"
            >
              <ChevronLeft className="w-6 h-6" />
            </button>
            
            <div className="flex items-center gap-3">
              <Calendar className="w-5 h-5 text-primary-600" />
              <h2 className="text-2xl font-black text-slate-800">{currentMonth}</h2>
            </div>
            
            <button
              onClick={handleNextMonth}
              className="p-3 rounded-xl bg-primary-50 text-primary-600 hover:bg-primary-100 active:scale-95 transition-all"
            >
              <ChevronRight className="w-6 h-6" />
            </button>
          </div>

          <div className="flex items-center gap-3">
            <button
              onClick={() => setShowArchive(!showArchive)}
              className="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-sm font-bold transition-colors"
            >
              Архив
            </button>
          </div>
        </div>

        {/* Render main content */}
        {renderContent()}
      </div>
    </div>
  );

  // Функция для рендеринга основного контента (используется в обеих версиях)
  function renderContent() {
    const company = companySettings || reportData?.company;

    return (
      <>
        {/* Company Info & Logo Section */}
        {company && (
          <div className="mb-8 bg-white rounded-2xl p-6 shadow-lg border border-slate-200">
            <div className="flex flex-col md:flex-row items-center justify-between gap-6">
              <div className="flex items-center gap-4">
                {company.logoUrl ? (
                  <img src={company.logoUrl} alt={company.name} className="w-16 h-16 rounded-2xl object-cover shadow-lg" />
                ) : (
                  <div className="w-16 h-16 bg-gradient-to-br from-primary-600 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg">
                    <Building2 className="w-8 h-8 text-white" />
                  </div>
                )}
                <div>
                  <h3 className="text-xl font-black text-slate-800">{company.name}</h3>
                  {company.address && (
                    <p className="text-sm text-slate-600 mt-1">{company.address}</p>
                  )}
                  <p className="text-xs text-slate-500 mt-1">
                    {company.phone && `Телефон: ${company.phone}`}
                    {company.phone && company.email && ' • '}
                    {company.email && `Email: ${company.email}`}
                  </p>
                </div>
              </div>
              {company.licenseNumber && (
                <div className="text-right">
                  <p className="text-xs text-slate-500 font-bold uppercase tracking-wider">{company.licenseNumber}</p>
                  {company.licenseValidUntil && (
                    <p className="text-xs text-slate-400 mt-1">Действительна до {new Date(company.licenseValidUntil).toLocaleDateString('ru-RU')}</p>
                  )}
                </div>
              )}
            </div>
          </div>
        )}

        {/* Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          {/* 1. Качество отработок по заявкам */}
          <StatCard
            icon={CheckCircle2}
            title="Качество отработок"
            value={reportData?.stats?.appsQuality ? `${reportData.stats.appsQuality}%` : '0%'}
            subtitle="Заявок выполнено"
            trend={reportData?.stats?.appsTotal ? `+${Math.round((reportData.stats.appsCompleted / reportData.stats.appsTotal) * 100)}%` : '0%'}
            color="emerald"
            details={reportData?.stats ? `Из ${reportData.stats.appsTotal} заявок выполнено ${reportData.stats.appsCompleted} в срок` : 'Нет данных'}
          />

          {/* 2. Количество задач из календарного плана */}
          <StatCard
            icon={ClipboardList}
            title="Задачи выполнены"
            value={reportData?.stats?.tasksCompleted?.toString() || '0'}
            subtitle={`из ${reportData?.stats?.tasksTotal || 0} запланированных`}
            trend={reportData?.stats?.tasksTotal ? `${Math.round((reportData.stats.tasksCompleted / reportData.stats.tasksTotal) * 100)}%` : '0%'}
            color="blue"
            details={reportData?.stats?.tasksTotal ? 'Календарный план выполнен' : 'Нет данных'}
          />

          {/* 3. Количество собранных денег */}
          <StatCard
            icon={DollarSign}
            title="Собрано средств"
            value={reportData?.stats?.fundsCollected ? `${(reportData.stats.fundsCollected / 1000000).toFixed(1)}M ₽` : '0 ₽'}
            subtitle="за отчетный период"
            trend={reportData?.stats?.fundsCollected ? '+5.2%' : '0%'}
            color="amber"
            details="Платежная дисциплина: 94%"
          />

          {/* 4. Количество долгов и выигранных дел */}
          <StatCard
            icon={Scale}
            title="Работа с долгами"
            value={reportData?.stats?.debtCasesWon?.toString() || '0'}
            subtitle="дел выиграно"
            trend={reportData?.stats?.debtCollected ? `Взыскано ${(reportData.stats.debtCollected / 1000).toFixed(0)}K ₽` : '0 ₽'}
            color="purple"
            details={reportData?.stats?.debtCollected ? `Взыскано ${reportData.stats.debtCollected.toLocaleString('ru-RU')} ₽` : 'Нет данных'}
          />
        </div>

        {/* Расходы по дому */}
        <div className="mb-8">
          <ContentCard
            icon={Receipt}
            title="Расходы по дому за отчетный период"
            color="teal"
            fullWidth
          >
            <div className="space-y-6">
              {/* Общая информация */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-6 bg-gradient-to-br from-teal-50 to-cyan-50 rounded-2xl border border-teal-100">
                <div className="text-center">
                  <p className="text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Собрано средств</p>
                  <p className="text-2xl font-black text-slate-800">
                    {reportData?.stats?.fundsCollected ? reportData.stats.fundsCollected.toLocaleString('ru-RU') : '0'} ₽
                  </p>
                </div>
                <div className="text-center border-x border-teal-200">
                  <p className="text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Потрачено</p>
                  <p className="text-2xl font-black text-slate-800">
                    {reportData?.expenses?.total ? reportData.expenses.total.toLocaleString('ru-RU') : '0'} ₽
                  </p>
                </div>
                <div className="text-center">
                  <p className="text-xs font-bold text-slate-600 uppercase tracking-wider mb-2">Остаток</p>
                  <p className="text-2xl font-black text-emerald-600">
                    {reportData?.stats?.fundsBalance ? reportData.stats.fundsBalance.toLocaleString('ru-RU') : '0'} ₽
                  </p>
                </div>
              </div>

              {/* Расходы по категориям */}
              <div className="space-y-4">
                <h4 className="text-lg font-black text-slate-800 mb-4">Распределение расходов</h4>
                
                {reportData?.expenses?.byCategory && (
                  <>
                    {reportData.expenses.byCategory.utilities > 0 && (
                      <ExpenseCategory
                        icon={Zap}
                        category="Коммунальные услуги"
                        amount={reportData.expenses.byCategory.utilities}
                        total={reportData.expenses.total || 1}
                        items={Object.entries(reportData.expenses.details || {})
                          .filter(([name]) => ['электроэнергия', 'электричество', 'водоснабжение', 'водоотведение', 'отопление', 'газ'].some(kw => name.toLowerCase().includes(kw)))
                          .map(([name, amount]: [string, any]) => ({ name, amount: parseFloat(amount) || 0 }))}
                        color="blue"
                      />
                    )}
                    
                    {reportData.expenses.byCategory.maintenance > 0 && (
                      <ExpenseCategory
                        icon={Wrench}
                        category="Содержание и ремонт"
                        amount={reportData.expenses.byCategory.maintenance}
                        total={reportData.expenses.total || 1}
                        items={Object.entries(reportData.expenses.details || {})
                          .filter(([name]) => ['ремонт', 'содержание', 'лифт', 'уборка', 'мусор', 'материалы'].some(kw => name.toLowerCase().includes(kw)))
                          .map(([name, amount]: [string, any]) => ({ name, amount: parseFloat(amount) || 0 }))}
                        color="amber"
                      />
                    )}
                    
                    {reportData.expenses.byCategory.management > 0 && (
                      <ExpenseCategory
                        icon={Users}
                        category="Управление и обслуживание"
                        amount={reportData.expenses.byCategory.management}
                        total={reportData.expenses.total || 1}
                        items={Object.entries(reportData.expenses.details || {})
                          .filter(([name]) => ['зарплата', 'персонал', 'административные', 'страхование', 'управление'].some(kw => name.toLowerCase().includes(kw)))
                          .map(([name, amount]: [string, any]) => ({ name, amount: parseFloat(amount) || 0 }))}
                        color="purple"
                      />
                    )}
                    
                    {reportData.expenses.byCategory.other > 0 && (
                      <ExpenseCategory
                        icon={Receipt}
                        category="Прочие расходы"
                        amount={reportData.expenses.byCategory.other}
                        total={reportData.expenses.total || 1}
                        items={Object.entries(reportData.expenses.details || {})
                          .filter(([name]) => !['электроэнергия', 'электричество', 'водоснабжение', 'водоотведение', 'отопление', 'газ', 'ремонт', 'содержание', 'лифт', 'уборка', 'мусор', 'материалы', 'зарплата', 'персонал', 'административные', 'страхование', 'управление'].some(kw => name.toLowerCase().includes(kw)))
                          .map(([name, amount]: [string, any]) => ({ name, amount: parseFloat(amount) || 0 }))}
                        color="slate"
                      />
                    )}
                  </>
                )}
                
                {(!reportData?.expenses?.byCategory || reportData.expenses.total === 0) && (
                  <div className="text-center py-8 text-slate-500">
                    <p>Нет данных о расходах за этот период</p>
                  </div>
                )}
              </div>

              {/* Примечание */}
              <div className="mt-6 p-4 bg-slate-50 rounded-xl border border-slate-200">
                <p className="text-xs text-slate-600 leading-relaxed">
                  <strong className="font-black text-slate-800">Важно:</strong> Все расходы подтверждены документами и соответствуют 
                  тарифам, утвержденным на общем собрании собственников. Детальная информация по каждой статье расходов 
                  доступна в управляющей компании по предварительной записи.
                </p>
              </div>
            </div>
          </ContentCard>
        </div>

        {/* Main Content Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
          {/* 5. Мероприятия */}
          <ContentCard
            icon={PartyPopper}
            title="Мероприятия"
            color="pink"
          >
            <div className="space-y-4">
              {reportData?.events && reportData.events.length > 0 ? (
                reportData.events.map((event: any, idx: number) => (
                  <EventItem
                    key={event.id || idx}
                    date={event.date ? new Date(event.date).toLocaleDateString('ru-RU', { day: 'numeric', month: 'long' }) : ''}
                    title={event.title}
                    description={event.description || (event.attendeesCount ? `Присутствовало ${event.attendeesCount} человек` : '')}
                  />
                ))
              ) : (
                <p className="text-center text-slate-500 py-4">Нет мероприятий за этот период</p>
              )}
            </div>
          </ContentCard>

          {/* 6. NPS */}
          <ContentCard
            icon={Smile}
            title="Индекс удовлетворенности (NPS)"
            color="indigo"
          >
            <div className="space-y-6">
              <div className="text-center">
                <div className={`inline-flex items-center justify-center w-32 h-32 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 text-white mb-4 shadow-xl ${reportData?.nps?.score === undefined ? 'opacity-50' : ''}`}>
                  <div className="text-center">
                    <div className="text-5xl font-black">{reportData?.nps?.score ?? 0}</div>
                    <div className="text-sm font-bold opacity-90">NPS</div>
                  </div>
                </div>
                <p className="text-lg font-bold text-slate-800">
                  {reportData?.nps?.score !== undefined 
                    ? reportData.nps.score >= 50 ? 'Отличный показатель' 
                      : reportData.nps.score >= 0 ? 'Хороший показатель' 
                      : 'Требует внимания'
                    : 'Нет данных'}
                </p>
                {reportData?.nps?.totalResponses ? (
                  <p className="text-sm text-slate-600 mt-1">Всего ответов: {reportData.nps.totalResponses}</p>
                ) : (
                  <p className="text-sm text-slate-600 mt-1">Нет ответов за этот период</p>
                )}
              </div>
              
              {reportData?.nps && reportData.nps.totalResponses > 0 && (
                <div className="space-y-3 pt-4 border-t border-slate-200">
                  <NPSBar 
                    label="Промоутеры" 
                    value={Math.round((reportData.nps.promoters / reportData.nps.totalResponses) * 100)} 
                    color="emerald" 
                  />
                  <NPSBar 
                    label="Нейтральные" 
                    value={Math.round((reportData.nps.passives / reportData.nps.totalResponses) * 100)} 
                    color="amber" 
                  />
                  <NPSBar 
                    label="Критики" 
                    value={Math.round((reportData.nps.detractors / reportData.nps.totalResponses) * 100)} 
                    color="red" 
                  />
                </div>
              )}
            </div>
          </ContentCard>
        </div>

        {/* 7. Фото отчет задач до/после */}
        <div className="mb-8">
          <ContentCard
            icon={Camera}
            title="Фото отчет выполненных работ"
            color="cyan"
            fullWidth
          >
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {reportData?.workPhotos && reportData.workPhotos.length > 0 ? (
                reportData.workPhotos.map((photo: any) => (
                  <PhotoComparison
                    key={photo.id}
                    title={photo.workName}
                    date={photo.workDate ? new Date(photo.workDate).toLocaleDateString('ru-RU', { day: 'numeric', month: 'long' }) : ''}
                    beforeColor="from-slate-400 to-slate-600"
                    afterColor="from-emerald-400 to-emerald-600"
                    beforeUrl={toPhotoUrl(photo.photoBeforeUrl ?? photo.photo_before_url)}
                    afterUrl={toPhotoUrl(photo.photoAfterUrl ?? photo.photo_after_url)}
                    description={photo.description}
                    taskLabel={photo.taskTitle || (photo.taskId ? `#${photo.taskId}` : undefined)}
                  />
                ))
              ) : (
                <p className="col-span-full text-center text-slate-500 py-8">Нет фото отчетов за этот период</p>
              )}
            </div>
          </ContentCard>
        </div>

        {/* 8. План на следующий месяц */}
        <ContentCard
          icon={TrendingUp}
          title="План работ на следующий месяц"
          color="orange"
          fullWidth
        >
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {reportData?.planItems && reportData.planItems.length > 0 ? (
              reportData.planItems.map((item: any) => (
                <PlanItem
                  key={item.id}
                  title={item.title}
                  date={item.deadline ? new Date(item.deadline).toLocaleDateString('ru-RU', { month: 'long', year: 'numeric' }) : ''}
                  status={item.status === 'in_progress' ? 'in-progress' : 'planned'}
                />
              ))
            ) : (
              <p className="col-span-full text-center text-slate-500 py-8">Нет запланированных работ</p>
            )}
          </div>
        </ContentCard>
      </>
    );
  }
};

// Stat Card Component
interface StatCardProps {
  icon: React.ElementType;
  title: string;
  value: string;
  subtitle: string;
  trend: string;
  color: 'emerald' | 'blue' | 'amber' | 'purple';
  details: string;
}

const StatCard: React.FC<StatCardProps> = ({ icon: Icon, title, value, subtitle, trend, color, details }) => {
  const colorClasses = {
    emerald: 'from-emerald-500 to-emerald-600 bg-emerald-50 text-emerald-600',
    blue: 'from-blue-500 to-blue-600 bg-blue-50 text-blue-600',
    amber: 'from-amber-500 to-amber-600 bg-amber-50 text-amber-600',
    purple: 'from-purple-500 to-purple-600 bg-purple-50 text-purple-600',
  };

  return (
    <div className="bg-white rounded-2xl p-6 shadow-lg border border-slate-200 hover:shadow-xl transition-shadow">
      <div className="flex items-start justify-between mb-4">
        <div className={`p-3 rounded-xl bg-gradient-to-br ${colorClasses[color]}`}>
          <Icon className="w-6 h-6" />
        </div>
        <span className={`text-xs font-black px-2 py-1 rounded-lg ${
          color === 'emerald' ? 'bg-emerald-100 text-emerald-700' :
          color === 'blue' ? 'bg-blue-100 text-blue-700' :
          color === 'amber' ? 'bg-amber-100 text-amber-700' :
          'bg-purple-100 text-purple-700'
        }`}>
          {trend}
        </span>
      </div>
      <h3 className="text-sm font-bold text-slate-600 mb-2">{title}</h3>
      <p className="text-3xl font-black text-slate-800 mb-1">{value}</p>
      <p className="text-xs text-slate-500 mb-3">{subtitle}</p>
      <p className="text-xs text-slate-400">{details}</p>
    </div>
  );
};

// Content Card Component
interface ContentCardProps {
  icon: React.ElementType;
  title: string;
  color: string;
  fullWidth?: boolean;
  children: React.ReactNode;
}

const ContentCard: React.FC<ContentCardProps> = ({ icon: Icon, title, color, fullWidth, children }) => {
  const colorClasses: Record<string, string> = {
    pink: 'from-pink-500 to-rose-600 bg-pink-50 text-pink-600',
    indigo: 'from-indigo-500 to-purple-600 bg-indigo-50 text-indigo-600',
    cyan: 'from-cyan-500 to-blue-600 bg-cyan-50 text-cyan-600',
    orange: 'from-orange-500 to-red-600 bg-orange-50 text-orange-600',
  };

  return (
    <div className={`bg-white rounded-2xl p-6 shadow-lg border border-slate-200 ${fullWidth ? 'col-span-1 lg:col-span-2' : ''}`}>
      <div className="flex items-center gap-3 mb-6">
        <div className={`p-3 rounded-xl bg-gradient-to-br ${colorClasses[color] || colorClasses.pink}`}>
          <Icon className="w-6 h-6" />
        </div>
        <h3 className="text-xl font-black text-slate-800">{title}</h3>
      </div>
      {children}
    </div>
  );
};

// Event Item Component
const EventItem: React.FC<{ date: string; title: string; description: string }> = ({ date, title, description }) => (
  <div className="flex gap-4 p-4 bg-slate-50 rounded-xl hover:bg-slate-100 transition-colors">
    <div className="flex-shrink-0">
      <div className="w-12 h-12 bg-gradient-to-br from-pink-500 to-rose-600 rounded-xl flex items-center justify-center text-white font-black text-xs">
        {date.split(' ')[0]}
      </div>
    </div>
    <div className="flex-1">
      <h4 className="font-bold text-slate-800 mb-1">{title}</h4>
      <p className="text-sm text-slate-600">{description}</p>
    </div>
  </div>
);

// NPS Bar Component
const NPSBar: React.FC<{ label: string; value: number; color: 'emerald' | 'amber' | 'red' }> = ({ label, value, color }) => {
  const colorClasses = {
    emerald: 'bg-emerald-500',
    amber: 'bg-amber-500',
    red: 'bg-red-500',
  };

  return (
    <div>
      <div className="flex justify-between items-center mb-2">
        <span className="text-sm font-bold text-slate-700">{label}</span>
        <span className="text-sm font-black text-slate-800">{value}%</span>
      </div>
      <div className="w-full bg-slate-200 rounded-full h-3 overflow-hidden">
        <div
          className={`h-full ${colorClasses[color]} rounded-full transition-all duration-500`}
          style={{ width: `${value}%` }}
        />
      </div>
    </div>
  );
};

// Photo Comparison Component
const PhotoComparison: React.FC<{ 
  title: string; 
  date: string; 
  beforeColor: string; 
  afterColor: string;
  beforeUrl?: string;
  afterUrl?: string;
  description?: string;
  taskLabel?: string;
}> = ({
  title,
  date,
  beforeColor,
  afterColor,
  beforeUrl,
  afterUrl,
  description,
  taskLabel
}) => (
  <div className="bg-slate-50 rounded-xl p-4 hover:shadow-lg transition-shadow">
    <h4 className="font-bold text-slate-800 mb-2">{title}</h4>
    <p className="text-xs text-slate-500 mb-1">{date}</p>
    {taskLabel && (
      <p className="text-xs text-slate-500 mb-4">Задача: {taskLabel}</p>
    )}
    {!taskLabel && <div className="mb-4" />}
    <div className="space-y-3">
      <div className={`h-32 rounded-lg overflow-hidden flex items-center justify-center ${beforeUrl ? '' : `bg-gradient-to-br ${beforeColor}`}`}>
        {beforeUrl ? (
          <img src={beforeUrl} alt={`${title} - До`} className="w-full h-full object-cover" />
        ) : (
          <span className="text-white text-xs font-bold">ДО</span>
        )}
      </div>
      <div className={`h-32 rounded-lg overflow-hidden flex items-center justify-center ${afterUrl ? '' : `bg-gradient-to-br ${afterColor}`}`}>
        {afterUrl ? (
          <img src={afterUrl} alt={`${title} - После`} className="w-full h-full object-cover" />
        ) : (
          <span className="text-white text-xs font-bold">ПОСЛЕ</span>
        )}
      </div>
    </div>
    {description && (
      <p className="text-xs text-slate-600 mt-2">{description}</p>
    )}
  </div>
);

// Plan Item Component
const PlanItem: React.FC<{ title: string; date: string; status: 'planned' | 'in-progress' }> = ({ title, date, status }) => (
  <div className="flex items-start gap-4 p-4 bg-slate-50 rounded-xl hover:bg-slate-100 transition-colors">
    <div className={`flex-shrink-0 w-3 h-3 rounded-full mt-2 ${
      status === 'in-progress' ? 'bg-blue-500' : 'bg-slate-300'
    }`} />
    <div className="flex-1">
      <h4 className="font-bold text-slate-800 mb-1">{title}</h4>
      <p className="text-sm text-slate-600">{date}</p>
      {status === 'in-progress' && (
        <span className="inline-block mt-2 px-2 py-1 bg-blue-100 text-blue-700 text-xs font-bold rounded">
          В работе
        </span>
      )}
    </div>
  </div>
);

// Expense Category Component
interface ExpenseCategoryProps {
  icon: React.ElementType;
  category: string;
  amount: number;
  total: number;
  items: Array<{ name: string; amount: number }>;
  color: 'blue' | 'amber' | 'purple' | 'slate';
}

const ExpenseCategory: React.FC<ExpenseCategoryProps> = ({ icon: Icon, category, amount, total, items, color }) => {
  const percentage = Math.round((amount / total) * 100);
  
  const colorClasses = {
    blue: {
      bg: 'bg-blue-50',
      icon: 'from-blue-500 to-blue-600 bg-blue-50 text-blue-600',
      bar: 'bg-blue-500',
      text: 'text-blue-700'
    },
    amber: {
      bg: 'bg-amber-50',
      icon: 'from-amber-500 to-amber-600 bg-amber-50 text-amber-600',
      bar: 'bg-amber-500',
      text: 'text-amber-700'
    },
    purple: {
      bg: 'bg-purple-50',
      icon: 'from-purple-500 to-purple-600 bg-purple-50 text-purple-600',
      bar: 'bg-purple-500',
      text: 'text-purple-700'
    },
    slate: {
      bg: 'bg-slate-50',
      icon: 'from-slate-500 to-slate-600 bg-slate-50 text-slate-600',
      bar: 'bg-slate-500',
      text: 'text-slate-700'
    }
  };

  const colors = colorClasses[color];

  return (
    <div className={`${colors.bg} rounded-xl p-5 border border-slate-200 hover:shadow-md transition-shadow`}>
      <div className="flex items-start justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className={`p-2.5 rounded-lg bg-gradient-to-br ${colors.icon}`}>
            <Icon className="w-5 h-5" />
          </div>
          <div>
            <h5 className="font-black text-slate-800 text-base">{category}</h5>
            <p className="text-xs text-slate-500 mt-0.5">{percentage}% от общих расходов</p>
          </div>
        </div>
        <div className="text-right">
          <p className="text-xl font-black text-slate-800">{amount.toLocaleString('ru-RU')} ₽</p>
        </div>
      </div>

      {/* Progress bar */}
      <div className="mb-4">
        <div className="w-full bg-slate-200 rounded-full h-2 overflow-hidden">
          <div
            className={`h-full ${colors.bar} rounded-full transition-all duration-500`}
            style={{ width: `${percentage}%` }}
          />
        </div>
      </div>

      {/* Items breakdown */}
      <div className="space-y-2 pt-3 border-t border-slate-200">
        {items.map((item, index) => {
          const itemPercentage = Math.round((item.amount / amount) * 100);
          return (
            <div key={index} className="flex items-center justify-between text-sm">
              <span className="text-slate-700 font-medium">{item.name}</span>
              <div className="flex items-center gap-3">
                <span className="text-xs text-slate-500">{itemPercentage}%</span>
                <span className="font-bold text-slate-800 min-w-[100px] text-right">
                  {item.amount.toLocaleString('ru-RU')} ₽
                </span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

// Модальное окно с ключом доступа
interface AccessKeyModalProps {
  onClose: () => void;
  reportId: string | number;
}

const AccessKeyModal: React.FC<AccessKeyModalProps> = ({ onClose, reportId }) => {
  const accessKey = `mkd-${String(reportId)}-key`; // Уникальный ключ на каждый отчёт (демо)
  const link = `${window.location.origin}/reports/${reportId}?mode=published&key=${accessKey}`;
  const [copied, setCopied] = useState(false);
  const [showKey, setShowKey] = useState(false);

  const handleCopyLink = () => {
    navigator.clipboard.writeText(link);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleCopyKey = () => {
    navigator.clipboard.writeText(accessKey);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-3xl p-6 max-w-lg w-full shadow-2xl">
        <div className="flex justify-between items-center mb-6">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-indigo-100 rounded-xl">
              <Key className="w-6 h-6 text-indigo-600" />
            </div>
            <h3 className="text-xl font-black text-slate-800">Ключ доступа к отчету</h3>
          </div>
          <button 
            onClick={onClose}
            className="p-2 hover:bg-slate-100 rounded-xl transition-colors"
          >
            <X className="w-5 h-5 text-slate-400" />
          </button>
        </div>

        <div className="space-y-4">
          <div>
            <label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
              Ключ доступа
            </label>
            <div className="flex gap-2">
              <div className="flex-1 relative">
                <input
                  type={showKey ? "text" : "password"}
                  value={accessKey}
                  readOnly
                  className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-indigo-500 pr-12"
                />
                <button
                  onClick={() => setShowKey(!showKey)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
                  type="button"
                >
                  {showKey ? <X className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                </button>
              </div>
              <button
                onClick={handleCopyKey}
                className="px-4 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-sm font-bold transition-colors"
              >
                {copied ? '✓' : 'Копировать'}
              </button>
            </div>
          </div>

          <div>
            <label className="block text-xs font-black text-slate-600 uppercase tracking-wider mb-2">
              Ссылка на опубликованную версию
            </label>
            <div className="flex gap-2">
              <input
                type="text"
                value={link}
                readOnly
                className="flex-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm font-mono text-xs focus:outline-none focus:ring-2 focus:ring-indigo-500"
              />
              <button
                onClick={handleCopyLink}
                className="px-4 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-sm font-bold transition-colors"
              >
                {copied ? '✓' : 'Копировать'}
              </button>
            </div>
          </div>

          <div className="p-4 bg-amber-50 border border-amber-200 rounded-xl">
            <p className="text-xs text-amber-800 leading-relaxed">
              <strong className="font-black">Важно:</strong> Сохраните ключ доступа в безопасном месте. 
              Он потребуется для просмотра опубликованной версии отчета.
            </p>
          </div>

          <div className="flex gap-3 pt-2">
            <button
              onClick={() => {
                window.open(link, '_blank');
                onClose();
              }}
              className="flex-1 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-sm font-bold transition-colors"
            >
              Открыть опубликованную версию
            </button>
            <button
              onClick={onClose}
              className="px-6 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-sm font-bold transition-colors"
            >
              Закрыть
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};