import { Fragment, type CSSProperties, type ChangeEvent as ReactChangeEvent, type ClipboardEvent as ReactClipboardEvent, type Dispatch, type DragEvent as ReactDragEvent, type FormEvent as ReactFormEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode, type SetStateAction, type WheelEvent as ReactWheelEvent, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import './styles.css';
import { Link, NavLink, Navigate, Outlet, Route, Routes, useLocation, useNavigate, useNavigationType, useParams, useSearchParams } from 'react-router-dom';
import { ROUTES, GUIDE_TOPICS, guideTopicBySlug, guideTopicListPath, articlePath, guideAddPath, listingPath, publicProfilePath, conversationPath, newConversationPath, ADMIN_CONVERSATION_SLUG, publicProfileNickPath, listingEditPath, mapPath, buyCityPath, negotiationPath, priceHistoryPath, VALUATION_STEP_PATHS, companiesPath, advertisingPath, adminTabPath, ADMIN_PATH_TO_TAB, type AdminTabKey } from './routes';
import { guideContents, type GuideContent, type GuideBlock } from './guides-data';
import { ProtectedRoute } from './ProtectedRoute';
import { Avatar, initialsFrom } from './Avatar';
import { apiFetch, useAuth } from './auth';
import type { AccountType, AreaUnit, AuthUser, ContactPreference, Currency, PreferredLanguage, ProfileVisibility, RegisterPending, SearchPreferences, UserSettings, UserSettingsPatch } from './auth';
import { useDisplay } from './display';
import { useNotifications, toDisplayNotifications } from './notifications';
import type { ServerNotification, DisplayNotification } from './notifications';
import { getManualTranslation } from './i18nOverrides';
import { AdminLeadsView, AdminCampaignsView, AdminSmtpConfigView, AdminSmsConfigView } from './admin/marketing';
import { AdminArticleRequestsView } from './admin/articleRequests';
import { RichTextEditor, SafeHtml, stripHtml, isRichTextEmpty } from './RichText';
import { compressImageFile } from './media';
import { BannerSlot } from './Banners';
import { AdminBannersView } from './admin/banners';
import { AdminPromotionView } from './admin/promotion';
import { AdminSettingsView } from './admin/settings';
import { TermsPage, PrivacyPolicyPage, CookieBanner } from './legal';
import { SiteFooter } from './Footer';
import { ActivationPage, PasswordResetPage, PaymentRedirectPage, PhoneOtpModal } from './AuthPages';

const heroImage = new URL('./assets/hero-interior.png', import.meta.url).href;
const cityImage = new URL('./assets/city-panorama.png', import.meta.url).href;
const loginRoomImage = new URL('./assets/login-room.png', import.meta.url).href;
const plLogoLight = new URL('./assets/pl_logo_light.png', import.meta.url).href;
const plLogoDark = new URL('./assets/pl_logo_dark.png', import.meta.url).href;

// Podswietlenie aktywnej pozycji menu wyznacza NavLink na podstawie adresu.
const navLinkClass = ({ isActive }: { isActive: boolean }) => (isActive ? 'active' : '');

type MessageThreadListing = {
  listingId: number;
  title: string;
  price: number;
  city: string;
  district: string | null;
  area: number;
  rooms: number;
  floor: string | null;
  buildingFloors: string | null;
  thumbnail: string | null;
};

type MessageThreadTarget = {
  id: string;
  name: string;
  status: string;
  // Konto rozmowcy (wlasciciel ogloszenia) - dzieki niemu zgloszenie z rozmowy
  // wiaze sie z realnym kontem, a nie tylko z nazwa wyswietlana.
  contactEmail: string | null;
  contactUserId: number | null;
  listing: MessageThreadListing;
};

// Rozmowy o ogloszeniach z /api/conversations. Pola ogloszenia sa null, gdy zostalo usuniete.
type ApiConversationListing = {
  listingId: number;
  title: string;
  available: boolean;
  price: number | null;
  city: string | null;
  district: string | null;
  area: number | null;
  rooms: number | null;
  floor: string | null;
  buildingFloors: string | null;
  thumbnail: string | null;
};

type ApiConversationBase = {
  id: number;
  listing: ApiConversationListing;
  otherUserId: number;
  otherUserName: string;
  otherUserExists: boolean;
  selling: boolean;
};

type ApiConversationSummary = ApiConversationBase & {
  lastMessage: string;
  lastMessageMine: boolean;
  unreadCount: number;
  lastMessageAt: string;
};

type ApiConversationDetail = ApiConversationBase & {
  blockedByMe: boolean;
  blocked: boolean;
  messages: { id: number; content: string; mine: boolean; read: boolean; createdAt: string }[];
};

// Wspolne pola watku w widoku wiadomosci dla rozmowy z serwera.
function conversationThreadBase(conversation: ApiConversationBase) {
  const { listing } = conversation;
  const status = !conversation.otherUserExists
    ? 'Konto rozmówcy zostało usunięte'
    : conversation.selling ? 'Pyta o Twoje ogłoszenie' : 'Sprzedający';
  return {
    id: `conv-${conversation.id}`,
    conversationId: conversation.id,
    name: conversation.otherUserName,
    avatarImage: listing.thumbnail || heroImage,
    status: listing.available ? status : `${status} • ogłoszenie nieaktywne`,
    contactUserId: conversation.otherUserExists ? conversation.otherUserId : null,
    selling: conversation.selling,
    listing: listing.price == null || listing.area == null || listing.rooms == null
      ? null
      : {
          listingId: listing.listingId,
          title: listing.title,
          price: listing.price,
          city: listing.city ?? '',
          district: listing.district,
          area: listing.area,
          rooms: listing.rooms,
          floor: listing.floor,
          buildingFloors: listing.buildingFloors,
          thumbnail: listing.thumbnail,
        },
  };
}

export type ApiOfferType = 'SALE' | 'RENT';
export type ApiPropertyType = 'APARTMENT' | 'HOUSE';
export type ApiListingStatus = 'PENDING' | 'APPROVED' | 'REJECTED' | 'PAUSED';

// Lekka reprezentacja z list (Kupuje/Wynajmuje, moje ogloszenia) - bez pelnej galerii.
export type ApiListingSummary = {
  id: number;
  title: string;
  description: string;
  offerType: ApiOfferType;
  propertyType: ApiPropertyType;
  city: string;
  district: string | null;
  address: string | null;
  price: number;
  area: number;
  rooms: number;
  floor: string | null;
  buildingFloors: string | null;
  market: string | null;
  yearBuilt: number | null;
  coverPhoto: string | null;
  ownerEmail: string | null;
  status: ApiListingStatus;
  viewsCount: number;
  promotedUntil: string | null;
  createdAt: string;
};

// Pelne ogloszenie dla widoku szczegolow.
export type ApiListingDetail = {
  id: number;
  title: string;
  description: string;
  offerType: ApiOfferType;
  propertyType: ApiPropertyType;
  city: string;
  district: string | null;
  street: string | null;
  building: string | null;
  address: string | null;
  price: number;
  area: number;
  rooms: number;
  floor: string | null;
  buildingFloors: string | null;
  market: string | null;
  yearBuilt: number | null;
  condition: string | null;
  ownership: string | null;
  contactName: string | null;
  contactPhone: string | null;
  contactEmail: string | null;
  rentExtra: number | null;
  availableFrom: string | null;
  furnishing: string | null;
  buildingType: string | null;
  buildingMaterial: string | null;
  windows: string | null;
  exposure: string | null;
  roomHeight: string | null;
  lat: number | null;
  lng: number | null;
  media: string[];
  amenities: string[];
  photos: string[];
  virtualTourUrl: string | null;
  ownerEmail: string | null;
  ownerId: number | null;
  // Zdjecie profilowe wlasciciela - null, gdy go nie ustawil albo ogloszenie nie ma konta w serwisie.
  ownerAvatar: string | null;
  // Typ konta wlasciciela - po nim rozrozniamy oferte prywatna od firmowej. null = brak konta w serwisie.
  ownerAccountType: AccountType | null;
  // Nazwa wlasciciela - uzywana jako etykieta oferty firmowej.
  ownerName: string | null;
  // Data zalozenia konta wlasciciela ("Na Polska Lokalnie od...") - null, gdy ogloszenie nie ma konta.
  ownerCreatedAt: string | null;
  // Ostatnia aktywnosc wlasciciela ("Ostatnio aktywny/a...") - null, gdy ogloszenie nie ma konta.
  ownerLastActiveAt: string | null;
  status: ApiListingStatus;
  createdAt: string;
  viewsCount?: number;
  promotedUntil?: string | null;
  // true = wlasciciel publikuje tylko przyblizona lokalizacje (mapa rysuje obszar zamiast punktu).
  approximateLocation?: boolean;
};

// Ostatnio przegladane oferty - trzymane lokalnie (per urzadzenie) do slajdera na stronie glownej.
type RecentlyViewedItem = {
  id: number;
  title: string;
  city: string;
  district: string | null;
  price: number;
  offerType: ApiOfferType;
  area: number;
  rooms: number;
  photo: string | null;
};

// Historia ogladania jest osobna dla kazdego konta - na wspolnym komputerze jedna osoba
// nie moze zobaczyc, czego szukala druga.
const RECENTLY_VIEWED_SUFFIX = 'recently-viewed';
// Ile ostatnio otwartych ofert pokazuje panel "Ostatnio przeglądane".
const RECENTLY_VIEWED_PANEL_LIMIT = 5;

function readRecentlyViewed(user: AuthUser | null): RecentlyViewedItem[] {
  if (typeof window === 'undefined') {
    return [];
  }
  try {
    const raw = window.localStorage.getItem(accountStorageKey(RECENTLY_VIEWED_SUFFIX, user));
    const parsed = raw ? JSON.parse(raw) : [];
    return Array.isArray(parsed) ? parsed : [];
  } catch {
    return [];
  }
}

function pushRecentlyViewed(item: RecentlyViewedItem, user: AuthUser | null): void {
  if (typeof window === 'undefined') {
    return;
  }
  try {
    const list = readRecentlyViewed(user).filter((entry) => entry.id !== item.id);
    list.unshift(item);
    window.localStorage.setItem(accountStorageKey(RECENTLY_VIEWED_SUFFIX, user), JSON.stringify(list.slice(0, 12)));
  } catch {
    /* brak dostepu do localStorage - pomijamy */
  }
}

type LiveListingSummary = ApiListingSummary & {
  lat: number | null;
  lng: number | null;
  // Pelna galeria z detalu - pobierana i tak dla lat/lng, wiec karta moze pokazac slider zdjec
  // bez wchodzenia w oferte (jak na Otodom).
  photos: string[];
  // Typ konta wlasciciela i jego nazwa - do etykiety "Oferta prywatna" / oferty firmowej na karcie.
  ownerAccountType: AccountType | null;
  ownerName: string | null;
  // Konto wlasciciela - etykieta oferty firmowej linkuje do jego profilu publicznego (/profil/:id).
  ownerId: number | null;
};

const LIVE_LISTINGS_REFRESH_MS = 15000;

type NotificationCategory = 'listing' | 'messages' | 'system';

type FavoriteTab = 'buy' | 'rent';

type FavoriteListing = {
  id: string;
  listingId: number;
  mode: FavoriteTab;
  image: string;
  price: string;
  /** Wartosci zrodlowe (PLN, m²) - po nich sortujemy i z nich budujemy etykiety w wybranej walucie. */
  priceValue: number;
  areaValue: number;
  isRent: boolean;
  title: string;
  location: string;
  area: string;
  rooms: string;
  floor: string;
  year: string;
  added: string;
  photos: number;
  badge: string;
};

type FavoritePriceAlertEvent = {
  id: string;
  listingId: number;
  title: string;
  location: string;
  area: string;
  offerType?: ApiOfferType;
  previousPrice: number;
  currentPrice: number;
  changedAt: string;
};

type CityPriceAlertSnapshot = {
  dayKey: string;
  perM2: number;
  updatedAt: string;
};

type CityPriceAlertEvent = {
  id: string;
  subscriptionKey: string;
  label: string;
  city: string;
  region: string;
  propertyType: HistoryPropertyType;
  marketType: HistoryMarketType;
  previousPerM2: number;
  currentPerM2: number;
  changedAt: string;
};

type CityPriceAlertSubscription = {
  key: string;
  label: string;
  city: string;
  region: string;
  propertyType: HistoryPropertyType;
  marketType: HistoryMarketType;
  createdAt: string;
  // Przelacznik powiadomien dla alertu. Pole opcjonalne - subskrypcje zapisane przed jego
  // dodaniem nie maja go w localStorage, a brak wartosci traktujemy jako "wlaczone".
  notificationsEnabled?: boolean;
};

type ListingPriceAlertSubscription = {
  listingId: number;
  title: string;
  location: string;
  offerType: ApiOfferType;
  createdAt: string;
  // Jak w alertach lokalizacji: brak wartosci traktujemy jako "powiadomienia wlaczone".
  notificationsEnabled?: boolean;
};

type SavedSearchMode = 'buy' | 'rent';

type SavedSearchRecord = {
  id: string;
  mode: SavedSearchMode;
  city: string;
  propertyType: string;
  priceMin: number | null;
  priceMax: number | null;
  areaMin: number | null;
  areaMax: number | null;
  rooms: number | null;
  wtorny: boolean;
  pierwotny: boolean;
  noFeeOnly: boolean;
  more: Record<string, string>;
  createdAt: string;
  updatedAt: string;
};

const FAVORITE_PRICE_ALERTS_STORAGE_SUFFIX = 'favorite-price-alert-events';
const FAVORITE_PRICE_SNAPSHOTS_STORAGE_SUFFIX = 'favorite-price-snapshots';
const FAVORITE_LISTINGS_STORAGE_SUFFIX = 'favorite-listings';
const FAVORITES_PREFERRED_TAB_STORAGE_SUFFIX = 'favorites-preferred-tab';
const CITY_PRICE_ALERTS_STORAGE_SUFFIX = 'city-price-alert-subscriptions';
const LISTING_PRICE_ALERTS_STORAGE_SUFFIX = 'listing-price-alert-subscriptions';
const CITY_PRICE_ALERT_SNAPSHOTS_STORAGE_SUFFIX = 'city-price-alert-snapshots';
const CITY_PRICE_ALERT_EVENTS_STORAGE_SUFFIX = 'city-price-alert-events';
// Klucz zostaje tylko po to, zeby raz przeniesc na konto wyszukiwania zapisane w przegladarce
// przed przeniesieniem tej funkcji na serwer.
const SAVED_SEARCHES_STORAGE_SUFFIX = 'saved-searches';

// Zapisane wyszukiwanie w postaci z API - id nadaje serwer.
type ApiSavedSearch = {
  id: number;
  mode: SavedSearchMode;
  city: string | null;
  propertyType: string | null;
  priceMin: number | null;
  priceMax: number | null;
  areaMin: number | null;
  areaMax: number | null;
  rooms: number | null;
  wtorny: boolean;
  pierwotny: boolean;
  noFeeOnly: boolean;
  more: string | null;
  createdAt: string;
  updatedAt: string;
};

function fromApiSavedSearch(item: ApiSavedSearch): SavedSearchRecord {
  let more: Record<string, string> = {};
  try {
    more = item.more ? JSON.parse(item.more) as Record<string, string> : {};
  } catch {
    more = {};
  }
  return {
    id: String(item.id),
    mode: item.mode,
    city: item.city ?? '',
    propertyType: item.propertyType ?? '',
    priceMin: item.priceMin,
    priceMax: item.priceMax,
    areaMin: item.areaMin,
    areaMax: item.areaMax,
    rooms: item.rooms,
    wtorny: item.wtorny,
    pierwotny: item.pierwotny,
    noFeeOnly: item.noFeeOnly,
    more,
    createdAt: item.createdAt,
    updatedAt: item.updatedAt,
  };
}

function toSavedSearchPayload(search: SavedSearchRecord | SavedSearchDraft) {
  return {
    mode: search.mode,
    city: search.city,
    propertyType: search.propertyType,
    priceMin: search.priceMin,
    priceMax: search.priceMax,
    areaMin: search.areaMin,
    areaMax: search.areaMax,
    rooms: search.rooms,
    wtorny: search.wtorny,
    pierwotny: search.pierwotny,
    noFeeOnly: search.noFeeOnly,
    more: JSON.stringify(search.more ?? {}),
  };
}
// Lokalizacje, ktorych cene za m2 sprawdzil uzytkownik - najnowsza pierwsza, przechowywane per konto.
// Klucz zostaje tylko po to, zeby raz przeniesc na konto lokalizacje zapisane w przegladarce
// przed przeniesieniem tej listy na serwer.
const PRICE_HISTORY_MARKETS_SUFFIX = 'price-history-markets';

function parsePriceHistoryMarkets(raw: string | null): PriceHistoryMarket[] {
  if (!raw) {
    return [];
  }
  try {
    const parsed = JSON.parse(raw);
    return Array.isArray(parsed) ? parsed.filter((item) => item && typeof item.key === 'string') : [];
  } catch {
    return [];
  }
}

/** Lista lokalizacji z Historii cen jest ustawieniem konta - zapisujemy ja przy kazdej zmianie. */
function savePriceHistoryMarkets(markets: PriceHistoryMarket[]): void {
  apiFetch<unknown>('/me/settings', { method: 'PUT', body: JSON.stringify({ priceHistoryMarkets: JSON.stringify(markets) }) })
    .catch(() => { /* brak sieci - lista wroci do stanu z konta przy nastepnym wejsciu */ });
}
const PRICE_HISTORY_MARKETS_LIMIT = 5;
const PRICE_ALERT_EVENTS_LIMIT = 40;
const SAVED_SEARCHES_LIMIT = 60;

function readUserJsonStorage<T>(user: AuthUser | null, suffix: string, fallback: T): T {
  if (typeof window === 'undefined') {
    return fallback;
  }
  try {
    const raw = window.localStorage.getItem(accountStorageKey(suffix, user));
    if (!raw) {
      return fallback;
    }
    return JSON.parse(raw) as T;
  } catch {
    return fallback;
  }
}

function writeUserJsonStorage<T>(user: AuthUser | null, suffix: string, value: T): void {
  if (typeof window === 'undefined') {
    return;
  }
  window.localStorage.setItem(accountStorageKey(suffix, user), JSON.stringify(value));
}

function mergePriceAlertEvents(
  incoming: FavoritePriceAlertEvent[],
  existing: FavoritePriceAlertEvent[],
): FavoritePriceAlertEvent[] {
  if (incoming.length === 0) {
    return existing;
  }

  const known = new Set(existing.map((item) => item.id));
  const uniqueIncoming = incoming.filter((item) => !known.has(item.id));
  if (uniqueIncoming.length === 0) {
    return existing;
  }

  return [...uniqueIncoming, ...existing]
    .sort((left, right) => new Date(right.changedAt).getTime() - new Date(left.changedAt).getTime())
    .slice(0, PRICE_ALERT_EVENTS_LIMIT);
}

function currentLocalDayKey(date = new Date()): string {
  const year = date.getFullYear();
  const month = `${date.getMonth() + 1}`.padStart(2, '0');
  const day = `${date.getDate()}`.padStart(2, '0');
  return `${year}-${month}-${day}`;
}

function cityAlertStorageKey(subscription: CityPriceAlertSubscription): string {
  return `${subscription.key}|${subscription.propertyType}|${subscription.marketType}`;
}

function cityAlertPropertyTypeToApi(propertyType: HistoryPropertyType): ApiPropertyType | null {
  if (propertyType === 'Mieszkanie') {
    return 'APARTMENT';
  }
  if (propertyType === 'Dom') {
    return 'HOUSE';
  }
  return null;
}

function cityAlertMarketFilter(marketType: HistoryMarketType): 'wtorny' | 'pierwotny' | null {
  if (marketType === 'Wtórny') {
    return 'wtorny';
  }
  if (marketType === 'Pierwotny') {
    return 'pierwotny';
  }
  return null;
}

// Ogloszenia pasujace do kryteriow alertu (miasto + typ nieruchomosci + rynek).
// Wspolne dla sredniej ceny za m² i dla wyboru najlepszej biezacej oferty.
function filterCityAlertListings(
  subscription: CityPriceAlertSubscription,
  listings: ApiListingSummary[],
): ApiListingSummary[] {
  const targetPropertyType = cityAlertPropertyTypeToApi(subscription.propertyType);
  const targetMarket = cityAlertMarketFilter(subscription.marketType);
  const cityQuery = subscription.city.trim() || subscription.label.split(',')[0]?.trim() || '';

  return listings.filter((item) => {
    if (cityQuery && !cityStartsWith(item.city, cityQuery)) {
      return false;
    }
    if (targetPropertyType && item.propertyType !== targetPropertyType) {
      return false;
    }
    if (targetMarket && item.market !== targetMarket) {
      return false;
    }
    return item.area > 0 && item.price > 0;
  });
}

// Najlepsza oferta dla alertu: najnizsza cena za m² sposrod pasujacych ogloszen.
function findBestCityAlertOffer(
  subscription: CityPriceAlertSubscription,
  listings: ApiListingSummary[],
): ApiListingSummary | null {
  const filtered = filterCityAlertListings(subscription, listings);
  if (filtered.length === 0) {
    return null;
  }
  return filtered.reduce((best, item) => (
    (item.price / item.area) < (best.price / best.area) ? item : best
  ));
}

// null = brak pasujacych ogloszen, wiec nie ma z czego policzyc sredniej. Wczesniej podstawiana
// byla szacunkowa stawka z tabeli, przez co znikniecie ogloszen wygladalo jak zmiana ceny.
function calculateCityAlertPerM2(subscription: CityPriceAlertSubscription, listings: ApiListingSummary[]): number | null {
  const filtered = filterCityAlertListings(subscription, listings);

  if (filtered.length === 0) {
    return null;
  }

  const averagePerM2 = filtered.reduce((sum, item) => sum + (item.price / item.area), 0) / filtered.length;
  return Math.max(1, Math.round(averagePerM2));
}

function mergeCityPriceAlertEvents(
  incoming: CityPriceAlertEvent[],
  existing: CityPriceAlertEvent[],
): CityPriceAlertEvent[] {
  if (incoming.length === 0) {
    return existing;
  }

  const known = new Set(existing.map((item) => item.id));
  const uniqueIncoming = incoming.filter((item) => !known.has(item.id));
  if (uniqueIncoming.length === 0) {
    return existing;
  }

  return [...uniqueIncoming, ...existing]
    .sort((left, right) => new Date(right.changedAt).getTime() - new Date(left.changedAt).getTime())
    .slice(0, PRICE_ALERT_EVENTS_LIMIT);
}

const favoriteListings: FavoriteListing[] = [];

function favoriteListingKey(listingId: number): string {
  return `listing-${listingId}`;
}

function favoriteTabFromOfferType(offerType: ApiOfferType): FavoriteTab {
  return offerType === 'RENT' ? 'rent' : 'buy';
}

function toFavoriteListingFromSummary(listing: ApiListingSummary): FavoriteListing {
  const mode = favoriteTabFromOfferType(listing.offerType);
  const price = listing.offerType === 'RENT' ? `${formatPln(listing.price)} / mies.` : formatPln(listing.price);
  const location = [listing.city, listing.district].filter(Boolean).join(', ');
  const floor = listingFloorText(listing.floor, listing.buildingFloors);

  return {
    id: favoriteListingKey(listing.id),
    listingId: listing.id,
    mode,
    image: listing.coverPhoto ?? heroImage,
    priceValue: listing.price,
    areaValue: listing.area,
    isRent: mode === 'rent',
    price,
    title: listing.title,
    location: location || listing.city,
    area: `${`${listing.area}`.replace('.', ',')} m²`,
    rooms: listingRoomsText(listing.rooms),
    floor: floor ? `${floor} piętro` : 'Brak danych o piętrze',
    year: listing.yearBuilt ? `${listing.yearBuilt} rok` : 'Brak danych o roku budowy',
    added: listingRelativeDate(listing.createdAt) || 'Dodane niedawno',
    photos: 1,
    badge: mode === 'rent' ? 'Na wynajem' : 'Na sprzedaż',
  };
}

function toFavoriteListing(listing: ApiListingDetail): FavoriteListing {
  const mode = favoriteTabFromOfferType(listing.offerType);
  const price = listing.offerType === 'RENT' ? `${formatPln(listing.price)} / mies.` : formatPln(listing.price);
  const location = [listing.city, listing.district].filter(Boolean).join(', ');
  const floor = listingFloorText(listing.floor, listing.buildingFloors);

  return {
    id: favoriteListingKey(listing.id),
    listingId: listing.id,
    mode,
    image: listing.photos[0] ?? heroImage,
    priceValue: listing.price,
    areaValue: listing.area,
    isRent: mode === 'rent',
    price,
    title: listing.title,
    location: location || listing.city,
    area: `${`${listing.area}`.replace('.', ',')} m²`,
    rooms: listingRoomsText(listing.rooms),
    floor: floor ? `${floor} piętro` : 'Brak danych o piętrze',
    year: listing.yearBuilt ? `${listing.yearBuilt} rok` : 'Brak danych o roku budowy',
    added: listingRelativeDate(listing.createdAt) || 'Dodane niedawno',
    photos: Math.max(listing.photos.length, 1),
    badge: mode === 'rent' ? 'Na wynajem' : 'Na sprzedaż',
  };
}

function buildMessageThreadTargetFromListing(listing: ApiListingDetail, user: AuthUser | null): MessageThreadTarget {
  const sellerName = listing.contactName?.trim() || 'Administracja Polska Lokalnie';
  const isOwner = Boolean(user && listing.ownerEmail && user.email.toLowerCase() === listing.ownerEmail.toLowerCase());
  const sellerRole = isOwner ? 'To Twoje ogłoszenie' : 'Oficjalny kontakt zespołem serwisu Polska Lokalnie';
  const threadIdBase = listing.ownerEmail?.trim() || sellerName;
  const threadId = `listing-${listing.id}-${threadIdBase.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`;

  return {
    id: threadId,
    name: sellerName,
    status: sellerRole,
    contactEmail: listing.ownerEmail ?? null,
    contactUserId: listing.ownerId ?? null,
    listing: {
      listingId: listing.id,
      title: listing.title,
      price: listing.price,
      city: listing.city,
      district: listing.district,
      area: listing.area,
      rooms: listing.rooms,
      floor: listing.floor,
      buildingFloors: listing.buildingFloors,
      thumbnail: listing.photos[0] ?? heroImage,
    },
  };
}

const benefits = [
  {
    icon: 'coin',
    title: '0 zł',
    text: 'za ogłoszenie',
  },
  {
    icon: 'chart',
    title: 'Kupujący bez pośredników',
    text: 'piszą prosto do Ciebie',
  },
  {
    icon: 'shuffle',
    title: 'Dopasowani',
    text: 'kupujący',
  },
  {
    icon: 'shield',
    title: 'Pełna widoczność',
    text: 'w całej Polsce',
  },
];

const buyQuickFilters = [
  {
    icon: 'flame',
    title: 'Okazje cenowe',
    text: 'Najlepsze oferty',
  },
  {
    icon: 'shield',
    title: 'Bez pośredników',
    text: 'Oferty prywatne',
  },
  {
    icon: 'spark',
    title: 'Nowe dzisiaj',
    text: 'Dodane w ciągu 24h',
  },
];

const insightCards = [
  {
    icon: 'gear',
    title: 'Wycena mieszkania',
    text: 'Sprawdź ile warte jest Twoje mieszkanie w 2 minuty',
    action: 'Wycena za darmo',
    path: ROUTES.valuation,
  },
  {
    icon: 'trend',
    title: 'Historia cen',
    text: 'Sprawdź jak zmieniały się ceny w okolicy',
    action: 'Zobacz wykresy',
    path: ROUTES.priceHistory,
  },
  {
    icon: 'house',
    title: 'Ranking dzielnic',
    text: 'Porównaj dzielnice pod kątem życia i inwestycji',
    action: 'Zobacz ranking',
    path: ROUTES.districtRanking,
  },
  {
    icon: 'percent',
    title: 'Zdolność kredytowa',
    text: 'Sprawdź na jaki kredyt Cię stać',
    action: 'Sprawdź teraz',
    path: ROUTES.creditCalculator,
  },
];

// Ranking obszarow liczony przez backend z opublikowanych ogloszen (/api/listings/areas).
type AreaStats = {
  city: string;
  district: string | null;
  listingsCount: number;
  avgPricePerM2: number;
  minPricePerM2: number;
  maxPricePerM2: number;
  avgArea: number;
  totalViews: number;
  totalSaves: number;
  newLast30Days: number;
  trendPercent: number | null;
  lat: number | null;
  lng: number | null;
};

type AreaRanking = {
  generatedAt: string;
  totalListings: number;
  cities: AreaStats[];
  districts: AreaStats[];
};

type RankingLevel = 'districts' | 'cities';
type RankingMetric = 'price' | 'popularity' | 'offers' | 'trend';

const RANKING_METRIC_LABELS: Record<RankingMetric, string> = {
  price: 'Najwyższa cena za m²',
  popularity: 'Największe zainteresowanie',
  offers: 'Najwięcej ofert',
  trend: 'Największy wzrost cen',
};

const cities = [
  { name: 'Warszawa', position: '48% 55%' },
  { name: 'Kraków', position: '54% 54%' },
  { name: 'Wrocław', position: '42% 58%' },
  { name: 'Gdańsk', position: '62% 52%' },
];

// Normalizacja nazwy miasta jak w backendzie (ListingService.normalizeCity): trim, lower, ł->l, bez znakow diakrytycznych.
// Dzieki temu liczenie ogloszen po miescie dopasowuje sie tak samo jak filtr na serwerze.
function normalizeCityName(value: string | null | undefined): string {
  if (!value) {
    return '';
  }
  return value.trim().toLowerCase().replace(/ł/g, 'l').normalize('NFD').replace(/\p{Diacritic}/gu, '');
}

// Polska odmiana rzeczownika "ogloszenie" przez liczbe.
function formatListingCountLabel(count: number): string {
  const formatted = count.toLocaleString('pl-PL');
  const mod10 = count % 10;
  const mod100 = count % 100;
  if (count === 1) {
    return `${formatted} ogłoszenie`;
  }
  if (mod10 >= 2 && mod10 <= 4 && !(mod100 >= 12 && mod100 <= 14)) {
    return `${formatted} ogłoszenia`;
  }
  return `${formatted} ogłoszeń`;
}

const rentQuickFilters = [
  {
    icon: 'sun',
    title: 'Nowe dzisiaj',
    text: 'Dodane w ciągu 24h',
  },
  {
    icon: 'student',
    title: 'Dla studentów',
    text: 'Blisko uczelni',
  },
  {
    icon: 'paw',
    title: 'Zwierzęta mile widziane',
    text: 'Przyjazne zwierzętom',
  },
  {
    icon: 'car',
    title: 'Z miejscem parkingowym',
    text: 'Parking dostępny',
  },
];

type PropertySearchType = 'Mieszkanie' | 'Dom' | 'Działka' | 'Lokal użytkowy' | 'Pokój';

const POLISH_CITIES = [
  'Warszawa', 'Kraków', 'Łódź', 'Wrocław', 'Poznań', 'Gdańsk', 'Szczecin', 'Bydgoszcz',
  'Lublin', 'Białystok', 'Katowice', 'Gdynia', 'Częstochowa', 'Radom', 'Sosnowiec',
  'Toruń', 'Kielce', 'Rzeszów', 'Gliwice', 'Zabrze', 'Olsztyn', 'Bielsko-Biała',
  'Bytom', 'Zielona Góra', 'Rybnik', 'Ruda Śląska', 'Opole', 'Tychy', 'Gorzów Wielkopolski',
  'Dąbrowa Górnicza', 'Elbląg', 'Płock', 'Wałbrzych', 'Włocławek', 'Tarnów', 'Chorzów',
  'Koszalin', 'Kalisz', 'Legnica', 'Grudziądz', 'Słupsk', 'Jaworzno', 'Jastrzębie-Zdrój',
  'Nowy Sącz', 'Jelenia Góra', 'Siedlce', 'Mysłowice', 'Konin', 'Piła', 'Piotrków Trybunalski',
  'Inowrocław', 'Lubin', 'Ostrów Wielkopolski', 'Suwałki', 'Stargard', 'Gniezno', 'Ostrowiec Świętokrzyski',
  'Siemianowice Śląskie', 'Głogów', 'Pabianice', 'Leszno', 'Żory', 'Zamość', 'Pruszków',
  'Łomża', 'Ełk', 'Tomaszów Mazowiecki', 'Chełm', 'Mielec', 'Kędzierzyn-Koźle', 'Przemyśl',
  'Stalowa Wola', 'Tczew', 'Biała Podlaska', 'Bełchatów', 'Świdnica', 'Będzin', 'Zgierz',
  'Piekary Śląskie', 'Racibórz', 'Legionowo', 'Ostrołęka', 'Świnoujście', 'Starachowice',
  'Zawiercie', 'Wejherowo', 'Puławy', 'Wodzisław Śląski', 'Skierniewice', 'Tarnowskie Góry',
  'Starogard Gdański', 'Rumia', 'Kutno', 'Nysa', 'Sieradz', 'Radomsko', 'Otwock', 'Skarżysko-Kamienna',
  'Dębica', 'Ciechanów', 'Kalisz', 'Mińsk Mazowiecki', 'Krosno', 'Piaseczno', 'Sopot',
  'Świętochłowice', 'Nowy Targ', 'Zakopane', 'Oświęcim', 'Bochnia', 'Brzeg', 'Malbork',
  'Kołobrzeg', 'Sanok', 'Jarosław', 'Lubliniec', 'Augustów', 'Władysławowo', 'Gostyń',
  'Wągrowiec', 'Żywiec', 'Cieszyn', 'Mława', 'Kraśnik', 'Świdnik', 'Grójec', 'Wieliczka',
  'Józefów', 'Marki', 'Ząbki', 'Łuków', 'Hrubieszów', 'Biłgoraj', 'Sandomierz', 'Police',
  'Knurów', 'Czeladź', 'Bolesławiec', 'Oleśnica', 'Kłodzko', 'Dzierżoniów', 'Nowa Sól',
  'Żary', 'Kościerzyna', 'Chojnice', 'Kwidzyn', 'Lębork', 'Iława', 'Giżycko', 'Działdowo',
  'Szczecinek', 'Wałcz', 'Białogard', 'Goleniów', 'Gryfino', 'Międzyrzecz', 'Krotoszyn',
  'Jarocin', 'Środa Wielkopolska', 'Turek', 'Koło', 'Września', 'Śrem', 'Rawicz', 'Kościan',
];

const ROOM_WORDS: Record<number, string> = { 1: 'pokój', 2: 'pokoje', 3: 'pokoje', 4: 'pokoje', 5: 'pokoi' };

const POPULAR_CITIES = ['Warszawa', 'Kraków', 'Wrocław', 'Gdańsk', 'Poznań', 'Łódź'];

type SortKey = 'default' | 'new' | 'old' | 'cheap' | 'expensive' | 'small' | 'big';

const SORT_OPTIONS: { value: SortKey; label: string }[] = [
  { value: 'default', label: 'Domyślnie' },
  { value: 'new', label: 'Data dodania: najnowsze' },
  { value: 'old', label: 'Data dodania: najstarsze' },
  { value: 'cheap', label: 'Cena: od najniższej' },
  { value: 'expensive', label: 'Cena: od najwyższej' },
  { value: 'small', label: 'Powierzchnia: od najmniejszej' },
  { value: 'big', label: 'Powierzchnia: od największej' },
];

const PRICE_PRESETS: { label: string; value: number }[] = [
  { label: 'do 500k', value: 500000 },
  { label: 'do 700k', value: 700000 },
  { label: 'do 1 mln', value: 1000000 },
  { label: 'do 1,5 mln', value: 1500000 },
  { label: 'do 2 mln', value: 2000000 },
];

const RENT_PRICE_PRESETS: { label: string; value: number }[] = [
  { label: 'do 2 tys.', value: 2000 },
  { label: 'do 3 tys.', value: 3000 },
  { label: 'do 4 tys.', value: 4000 },
  { label: 'do 6 tys.', value: 6000 },
  { label: 'do 8 tys.', value: 8000 },
];

const MORE_FILTERS: { key: string; label: string; options: string[] }[] = [
  { key: 'pietro', label: 'Piętro', options: ['Dowolne', 'Parter', '1-3 piętro', '4-10 piętro', 'Powyżej 10'] },
  { key: 'balkon', label: 'Balkon / Taras', options: ['Dowolne', 'Balkon', 'Taras', 'Loggia', 'Ogródek'] },
  { key: 'stan', label: 'Stan mieszkania', options: ['Dowolne', 'Do wykończenia', 'Do odświeżenia', 'Dobry', 'Po remoncie', 'Wysoki standard'] },
  { key: 'winda', label: 'Winda', options: ['Dowolne', 'Tak', 'Nie'] },
  { key: 'ogrzewanie', label: 'Ogrzewanie', options: ['Dowolne', 'Miejskie', 'Gazowe', 'Elektryczne', 'Pompa ciepła'] },
  { key: 'parking', label: 'Miejsce parkingowe', options: ['Dowolne', 'Garaż', 'Hala garażowa', 'Miejsce naziemne', 'Brak'] },
  { key: 'czynsz', label: 'Czynsz', options: ['Dowolny', 'do 400 zł', 'do 600 zł', 'do 800 zł', 'do 1000 zł'] },
  { key: 'rok', label: 'Rok budowy', options: ['Dowolny', 'Do 1970', '1971-2000', '2001-2015', 'Po 2015'] },
];

const PRICE_SLIDER_MAX = 2000000;
const PRICE_SLIDER_STEP = 25000;
const RENT_PRICE_SLIDER_MAX = 15000;
const RENT_PRICE_SLIDER_STEP = 100;

const AREA_PRESETS: { label: string; min: number; max: number }[] = [
  { label: 'do 35 m²', min: 0, max: 35 },
  { label: '35-50 m²', min: 35, max: 50 },
  { label: '50-70 m²', min: 50, max: 70 },
  { label: '70-90 m²', min: 70, max: 90 },
  { label: 'pow. 90 m²', min: 90, max: 0 },
];

const AREA_SLIDER_MAX = 150;
const AREA_SLIDER_STEP = 5;

const ROOM_OPTIONS = [1, 2, 3, 4, 5];

function roomsLabel(rooms: number): string {
  return `${rooms} ${ROOM_WORDS[rooms] ?? 'pokoi'}`;
}

/**
 * Cena w wartosci bazowej, czyli w zlotowkach.
 *
 * Uzywaj tam, gdzie kwota ma NIE isc za ustawieniem waluty uzytkownika: platnosci za promowanie
 * (AutoPay pobiera zlotowki), panel administratora oraz pola, w ktorych wlasciciel wpisuje cene
 * oferty. W pozostalych miejscach formatuj przez useDisplay().
 */
function formatPln(value: number): string {
  return `${value.toLocaleString('pl-PL').replace(/\u00a0/g, ' ')} zł`;
}

/** Cena za metr w wartosci bazowej - odpowiednik formatPln dla stawek za powierzchnie. */
function basePricePerMeter(plnPerSquareMeter: number): string {
  return `${formatPln(Math.round(plnPerSquareMeter))}/m²`;
}

/**
 * Formatery przekazywane funkcjom spoza komponentow - one same nie moga siegnac po useDisplay(),
 * wiec dostaja gotowe funkcje od komponentu, ktory je wywoluje.
 */
type PriceFormatters = {
  formatPrice: (pln: number) => string;
  formatArea: (squareMeters: number) => string;
  formatPricePerArea: (plnPerSquareMeter: number) => string;
};

/**
 * Konwertuje ulotny blob/URL zdjecia na skompresowany data URL (JPEG), przeskalowany do maks.
 * `maxDim` px po dluzszym boku - dzieki temu zdjecia da sie utrwalic w bazie bez rozdmuchiwania jej.
 */
async function imageUrlToDataUrl(url: string, maxDim = 1280, quality = 0.72): Promise<string | null> {
  // Zdjecie juz zapisane w ogloszeniu (skompresowany JPEG) zostaje bez zmian. Ponowne kodowanie przy
  // kazdej edycji pogarszalo jakosc i zmienialo bajty - serwer uznawal to za podmiane zdjec.
  if (url.startsWith('data:image/jpeg;base64,')) {
    return url;
  }
  try {
    const blob = await (await fetch(url)).blob();
    const bitmap = await createImageBitmap(blob);
    const scale = Math.min(1, maxDim / Math.max(bitmap.width, bitmap.height));
    const width = Math.max(1, Math.round(bitmap.width * scale));
    const height = Math.max(1, Math.round(bitmap.height * scale));
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    if (!ctx) {
      return null;
    }
    ctx.drawImage(bitmap, 0, 0, width, height);
    bitmap.close();
    return canvas.toDataURL('image/jpeg', quality);
  } catch {
    return null;
  }
}

/**
 * Bezpieczny generator ID. crypto.randomUUID istnieje tylko w bezpiecznym kontekscie (HTTPS/localhost);
 * przy dostepie po IP w sieci lokalnej jest undefined i rzucalby wyjatek, wywalajac apke do bialego ekranu.
 */
function safeRandomId(): string {
  const webCrypto = typeof crypto !== 'undefined' ? crypto : undefined;
  if (webCrypto && typeof webCrypto.randomUUID === 'function') {
    return webCrypto.randomUUID();
  }
  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
}

// slug trafia do adresu listy firm: /firmy?kategoria=remonty
const serviceCategories = [
  {
    slug: 'finanse',
    icon: 'credit-card',
    title: 'Finanse',
    text: 'Kredyty hipoteczne, doradcy, ubezpieczenia',
  },
  {
    slug: 'prawo',
    icon: 'scale',
    title: 'Prawo i dokumenty',
    text: 'Notariusze, prawnicy, rzeczoznawcy',
  },
  {
    slug: 'remonty',
    icon: 'paint',
    title: 'Remont i wykończenie',
    text: 'Firmy remontowe, fachowcy, projekty wnętrz',
  },
  {
    slug: 'przeprowadzka',
    icon: 'truck',
    title: 'Przeprowadzka',
    text: 'Firmy przeprowadzkowe, magazyny, transport',
  },
  {
    slug: 'wyposazenie',
    icon: 'sofa',
    title: 'Wyposażenie wnętrz',
    text: 'Meble, AGD, kuchnie na wymiar, oświetlenie',
  },
  {
    slug: 'sprzedaz',
    icon: 'camera',
    title: 'Sprzedaż nieruchomości',
    text: 'Fotografia, home staging, wirtualne spacery 3D',
  },
  {
    slug: 'deweloperzy',
    icon: 'city',
    title: 'Deweloperzy i inwestycje',
    text: 'Nowe inwestycje, deweloperzy, biura sprzedaży',
  },
  {
    slug: 'inne',
    icon: 'dots',
    title: 'Inne usługi',
    text: 'Usługi dodatkowe związane z nieruchomościami',
  },
];

type ServiceCategorySlug = (typeof serviceCategories)[number]['slug'];

/**
 * Polecane firmy na /firmy-i-uslugi.
 *
 * Pusto, bo w serwisie nie ma jeszcze ani jednej firmy - zamiast wymyslonych wizytowek z ocenami
 * i liczba opinii pokazujemy zaproszenie "Szukamy specjalistow". Gdy pojawi sie zrodlo prawdziwych
 * firm, wystarczy je tu podstawic - karty renderuja sie same, bez zmian w widoku.
 */
const serviceCompanies: Array<{
  icon: string;
  title: string;
  rating: string;
  text: string;
  city: string;
}> = [];

/** Tyle wolnych miejsc pokazujemy, gdy nie ma firm - jedno na kazda kolumne siatki. */
const EMPTY_COMPANY_SLOTS = [1, 2, 3, 4];

/**
 * Baza firm dla listy /firmy.
 *
 * Pusta - do serwisu nie dolaczyla jeszcze zadna firma. Zamiast wymyslonych wizytowek z ocenami
 * i opiniami lista pokazuje wtedy zaproszenie (patrz CompaniesEmptyState). Po podpieciu prawdziwego
 * zrodla wystarczy je tu podstawic, a filtrowanie po ?kategoria= zadziala bez zmian w widoku.
 */
const companyDirectory: Array<{
  title: string;
  category: ServiceCategorySlug;
  rating: string;
  text: string;
  city: string;
  image: string;
  position: string;
}> = [];

const serviceSteps = [
  {
    icon: 'group',
    title: 'Wybierz usługę',
    text: 'Wybierz kategorię, która Cię interesuje',
  },
  {
    icon: 'search',
    title: 'Porównaj firmy',
    text: 'Sprawdź opinie, ceny i portfolio firm',
  },
  {
    icon: 'message',
    title: 'Skontaktuj się',
    text: 'Napisz lub zadzwoń bezpośrednio do firmy',
  },
  {
    icon: 'paint',
    title: 'Zrealizuj usługę',
    text: 'Ciesz się profesjonalnie wykonaną usługą',
  },
];

const sellSteps = [
  {
    icon: 'document',
    title: 'Dodaj ogłoszenie',
    text: 'Wypełnij formularz i dodaj zdjęcia',
  },
  {
    icon: 'calculator',
    title: 'My wycenimy się resztą',
    text: 'Twoje ogłoszenie trafia na listę ofert i mapę',
  },
  {
    icon: 'message',
    title: 'Otrzymujesz zapytania',
    text: 'Kupujący kontaktują się bezpośrednio z Tobą',
  },
  {
    icon: 'scale',
    title: 'Negocjujesz warunki',
    text: 'Rozmawiasz i ustalasz szczegóły sprzedaży',
  },
  {
    icon: 'money',
    title: 'Sprzedajesz',
    text: 'Finalizujesz transakcję i odbierasz pieniądze',
  },
];

const sellReasons = [
  {
    icon: 'check',
    title: 'Całkowicie za darmo',
    text: '0 zł prowizji, 0 zł opłat',
  },
  {
    icon: 'target',
    title: 'Kupujący z całej Polski',
    text: 'Ogłoszenie widoczne dla każdego, kto szuka w Twojej okolicy',
  },
  {
    icon: 'spark',
    title: 'Bezpośredni kontakt',
    text: 'Kupujący pisze i dzwoni prosto do Ciebie, bez pośrednika',
  },
  {
    icon: 'shield',
    title: 'Pełna kontrola',
    text: 'To Ty decydujesz z kim rozmawiasz i na jakich warunkach',
  },
  {
    icon: 'warning',
    title: 'Wsparcie na każdym etapie',
    text: 'Poradniki, wycena i kontakt z obsługą serwisu',
  },
];

// Tylko to, co serwis naprawde robi z ogloszeniem - bez integracji, ktorych nie ma.
const sellChannels = [
  {
    icon: 'logo',
    title: 'Lista ofert',
    text: 'Wyszukiwarka i filtry',
  },
  {
    icon: 'pin',
    title: 'Mapa ofert',
    text: 'Widoczne w okolicy',
  },
  {
    icon: 'message',
    title: 'Podgląd linku',
    text: 'Zdjęcie i cena w komunikatorach',
  },
  {
    icon: 'star',
    title: 'Wyróżnienie',
    text: 'Płatne miejsce na górze listy',
  },
];

const sellFeatures = [
  {
    icon: 'star',
    title: 'Wyróżnione ogłoszenie',
    text: 'Twoje ogłoszenie na szczycie listy',
  },
  {
    icon: 'camera',
    title: 'Galeria zdjęć',
    text: 'Dodaj do 8 zdjęć nieruchomości',
  },
  {
    icon: 'tour',
    title: 'Wirtualny spacer 360°',
    text: 'Pokaż mieszkanie w 3D',
  },
  {
    icon: 'chart',
    title: 'Statystyki oglądalności',
    text: 'Sprawdzaj zainteresowanie',
  },
  {
    icon: 'bell',
    title: 'Powiadomienia o nowych',
    text: 'Bądź pierwszy w kontaktach',
  },
];

const sellTestimonials = [
  {
    name: 'Anna, Kraków',
    result: 'Sprzedane w 6 dni',
    text: 'Dodałam ogłoszenie w poniedziałek, w sobotę miałam już kupca! Zero prowizji, świetny kontakt.',
  },
  {
    name: 'Marek, Warszawa',
    result: 'Sprzedane w 4 dni',
    text: 'Najlepszy portal do sprzedaży mieszkań. Dużo zapytań i poważnych kupujących.',
  },
  {
    name: 'Kasia, Wrocław',
    result: 'Sprzedane w 7 dni',
    text: 'Prosty formularz, szybka publikacja i bardzo wszystkie zero kosztów. Polecam!',
  },
];

const addProgressSteps = ['Szczegóły', 'Lokalizacja', 'Zdjęcia', 'Dodatkowe informacje', 'Podgląd ogłoszenia'];

// Minimalna dlugosc opisu ogloszenia w znakach - warunek przejscia z kroku "Szczegóły" dalej.
const MIN_DESCRIPTION_CHARS = 30;

const listingTips = [
  {
    icon: 'document',
    title: 'Napisz szczegółowy opis',
    text: 'Im więcej informacji, tym większe zainteresowanie.',
  },
  {
    icon: 'money',
    title: 'Ustal dokładną cenę',
    text: 'Sprawdź ceny podobnych mieszkań w okolicy.',
  },
  {
    icon: 'lock',
    title: 'Bądź w kontakcie',
    text: 'Szybkie odpowiedzi zwiększają szanse na sprzedaż.',
  },
];

const extraInfoTips = [
  {
    icon: 'document',
    title: 'Im więcej informacji, tym lepiej',
    text: 'Szczegółowy opis zwiększa zaufanie i zainteresowanie ofertą.',
  },
  {
    icon: 'shield',
    title: 'Sprawdź dokładnie dane',
    text: 'Upewnij się, że wszystkie informacje są poprawne.',
  },
  {
    icon: 'star',
    title: 'Wyróżnij atuty nieruchomości',
    text: 'Dodatkowe udogodnienia mogą przyciągnąć kupujących.',
  },
];

const mediaOptions = [
  { icon: 'flame', label: 'Ogrzewanie miejskie', checked: true },
  { icon: 'flame', label: 'Ogrzewanie gazowe' },
  { icon: 'house', label: 'Ogrzewanie elektryczne' },
  { icon: 'building', label: 'Ogrzewanie podłogowe' },
  { icon: 'sun', label: 'Woda miejska', checked: true },
  { icon: 'link', label: 'Kanalizacja', checked: true },
  { icon: 'link', label: 'Gospodarka ściekowa' },
  { icon: 'spark', label: 'Prąd', checked: true },
  { icon: 'flame', label: 'Gaz' },
  { icon: 'wifi', label: 'Internet', checked: true },
  { icon: 'wifi', label: 'Światłowód' },
  { icon: 'screen', label: 'Telewizja kablowa' },
  { icon: 'shield', label: 'Alarm' },
  { icon: 'phone', label: 'Domofon' },
  { icon: 'screen', label: 'Wideodomofon' },
  { icon: 'spark', label: 'Smart Home' },
  { icon: 'sun', label: 'Fotowoltaika' },
  { icon: 'snow', label: 'Pompa ciepła' },
  { icon: 'building', label: 'Rekuperacja' },
  { icon: 'snow', label: 'Klimatyzacja' },
];

const RENT_BILLING_OPTIONS_HEATING = ['Wliczone w cenę', 'Według zużycia', 'Stała opłata'];
const RENT_BILLING_OPTIONS_WATER = ['Wliczona w cenę', 'Według zużycia', 'Stała opłata'];
const RENT_BILLING_OPTIONS_ENERGY = ['Wliczony w cenę', 'Według zużycia', 'Stała opłata'];
const RENT_BILLING_OPTIONS_INTERNET = ['Wliczony w cenę', 'Dodatkowo płatny (kwota)'];
const RENT_BILLING_OPTIONS_TV = ['Wliczona w cenę', 'Dodatkowo płatna (kwota)'];
const RENT_BILLING_OPTIONS_PARKING = ['W cenie', 'Dodatkowo płatny (kwota/mies.)'];

function billingRequiresAmount(mode: string): boolean {
  return mode === 'Stała opłata' || mode.includes('(kwota');
}

function getRentBillingOptions(label: string): string[] | null {
  if (label.startsWith('Ogrzewanie')) {
    return RENT_BILLING_OPTIONS_HEATING;
  }
  if (label === 'Woda miejska') {
    return RENT_BILLING_OPTIONS_WATER;
  }
  if (label === 'Prąd' || label === 'Gaz') {
    return RENT_BILLING_OPTIONS_ENERGY;
  }
  if (label === 'Internet') {
    return RENT_BILLING_OPTIONS_INTERNET;
  }
  if (label === 'Telewizja kablowa') {
    return RENT_BILLING_OPTIONS_TV;
  }
  return null;
}

const amenityOptions = [
  { icon: 'building', label: 'Balkon', checked: true },
  { icon: 'building', label: 'Taras' },
  { icon: 'wifi', label: 'Ogródek' },
  { icon: 'city', label: 'Winda', checked: true },
  { icon: 'car', label: 'Parking', checked: true },
  { icon: 'car', label: 'Garaż' },
  { icon: 'building', label: 'Strych' },
  { icon: 'shield', label: 'Ogrodzenie' },
  { icon: 'student', label: 'Dla studentów' },
  { icon: 'paw', label: 'Zwierzęta mile widziane' },
  { icon: 'building', label: 'Piwnica', checked: true },
  { icon: 'building', label: 'Komórka lokatorska' },
  { icon: 'document', label: 'Dostęp dla niepełnosprawnych' },
  { icon: 'eye', label: 'Monitoring' },
  { icon: 'shield', label: 'Ochrona' },
];

const houseAmenityOptions = [
  { icon: 'flame', label: 'Kominek' },
  { icon: 'sun', label: 'Basen' },
  { icon: 'sun', label: 'Jacuzzi' },
  { icon: 'snow', label: 'Sauna' },
  { icon: 'sun', label: 'Ogród zimowy' },
  { icon: 'house', label: 'Altana' },
  { icon: 'car', label: 'Automatyczna brama' },
  { icon: 'shield', label: 'Rolety zewnętrzne' },
  { icon: 'eye', label: 'Monitoring zewnętrzny' },
  { icon: 'shield', label: 'System alarmowy' },
  { icon: 'sun', label: 'Panele fotowoltaiczne' },
  { icon: 'snow', label: 'Pompa ciepła' },
  { icon: 'spark', label: 'Magazynek energii' },
  { icon: 'car', label: 'Ładowarka do samochodu elektrycznego' },
  { icon: 'flame', label: 'Grill murowany' },
  { icon: 'sun', label: 'Oczko wodne' },
  { icon: 'student', label: 'Plac zabaw' },
  { icon: 'target', label: 'Boisko' },
];

const extraInfoSelectOptions = {
  rentalPeriod: ['Wybierz', 'Krótkoterminowy', 'Długoterminowy', 'Bez określonego czasu'],
  furnishing: ['Wybierz', 'Tak', 'Częściowo', 'Nie'],
  buildingType: ['Wybierz', 'Blok', 'Kamienica', 'Apartamentowiec', 'Dom wielorodzinny', 'Loft'],
  houseType: ['Wybierz', 'Wolnostojący', 'Bliźniak', 'Szeregowy', 'Segment skrajny', 'Segment środkowy', 'Dworek', 'Rezydencja'],
  buildingMaterial: ['Wybierz', 'Cegła', 'Pustak', 'Beton', 'Drewno', 'Keramzyt', 'Silikat', 'Prefabrykat', 'Inny'],
  windows: ['Wybierz', 'PCV', 'Drewniane', 'Aluminiowe'],
  exposure: ['Wybierz', 'Północ', 'Południe', 'Wschód', 'Zachód', 'Północ-południe', 'Wschód-zachód', 'Wielostronna'],
  houseFloors: ['Wybierz', 'Parterowy', '1', '2', '3+'],
  roofType: ['Wybierz', 'Dwuspadowy', 'Czterospadowy', 'Płaski', 'Wielospadowy'],
  roofCover: ['Wybierz', 'Dachówka', 'Blachodachówka', 'Blacha', 'Papa', 'Gont', 'Inne'],
  garageDetails: ['Wybierz', '1 stanowisko', '2 stanowiska', '3+', 'W bryle budynku', 'Wolnostojący'],
  basement: ['Wybierz', 'Tak', 'Częściowe', 'Nie'],
  attic: ['Wybierz', 'Użytkowy', 'Nieużytkowy', 'Brak'],
  fencing: ['Wybierz', 'Tak', 'Częściowe', 'Nie'],
  accessRoad: ['Wybierz', 'Asfalt', 'Kostka', 'Utwardzony', 'Szutrowy', 'Polny'],
  sewageType: ['Wybierz', 'Kanalizacja', 'Szambo', 'Przydomowa oczyszczalnia'],
  // Nowe slowniki dla dynamicznej sekcji "Dodatkowe informacje" (per kategoria).
  landType: ['Wybierz', 'Budowlana', 'Rolna', 'Rekreacyjna', 'Leśna', 'Inwestycyjna', 'Siedliskowa', 'Rolno-budowlana'],
  landPurpose: ['Wybierz', 'Mieszkaniowa', 'Usługowa', 'Przemysłowa', 'Rolnicza', 'Rekreacyjna', 'Mieszana'],
  planningStatus: ['Wybierz', 'MPZP', 'Warunki zabudowy (WZ)', 'Brak / w trakcie'],
  plotShape: ['Wybierz', 'Prostokąt', 'Kwadrat', 'Trapez', 'Wąska i długa', 'Nieregularny'],
  localPurpose: ['Wybierz', 'Handlowy', 'Usługowy', 'Biurowy', 'Gastronomiczny', 'Magazynowy', 'Medyczny', 'Produkcyjny', 'Inny'],
  buildingKind: ['Wybierz', 'Biurowy', 'Handlowy', 'Magazynowy', 'Produkcyjny', 'Usługowy', 'Magazynowo-biurowy', 'Hotelowy'],
  garageType: ['Wybierz', 'Garaż murowany', 'Hala garażowa', 'Miejsce postojowe', 'Blaszak', 'Podziemny'],
  garageLevel: ['Wybierz', 'Naziemny', 'Podziemny (-1)', 'Podziemny (-2)', 'Wielopoziomowy'],
  legalStatus: ['Wybierz', 'Uregulowany', 'Do uregulowania', 'Z obciążeniem hipotecznym'],
  landRegister: ['Wybierz', 'Tak', 'Nie', 'W trakcie zakładania'],
  roommates: ['Wybierz', 'Brak', '1', '2', '3', '4+'],
  roommatePreference: ['Wybierz', 'Bez znaczenia', 'Kobiety', 'Mężczyźni', 'Studenci', 'Osoby pracujące'],
};

// ---------------------------------------------------------------------------------------------
// Dynamiczna sekcja "Dodatkowe informacje" (krok 4 kreatora).
// Dla kazdej kategorii pokazujemy tylko pola, ktore realnie maja sens dla kupujacego/najemcy.
// Kafelki (checkboxy) zapisuja sie przez tablice media[]/amenities[] i sa widoczne na ogloszeniu.
// Selecty/pola tekstowe zapisuja sie tam, gdzie istnieje kolumna w bazie (furnishing, buildingType,
// buildingMaterial, windows, exposure, roomHeight, availableFrom); pozostale zyja w podgladzie kreatora.
// ---------------------------------------------------------------------------------------------

// Ikony kafelkow: najpierw z istniejacych list opcji, potem uzupelnienie dla nowych etykiet.
const EXTRA_TILE_ICONS: Record<string, string> = {
  ...Object.fromEntries([...mediaOptions, ...amenityOptions, ...houseAmenityOptions].map((option) => [option.label, option.icon])),
  Klimatyzacja: 'snow',
  'Wentylacja mechaniczna': 'snow',
  'Wejście z ulicy': 'pin',
  Witryna: 'screen',
  'Zaplecze socjalne': 'sofa',
  'Dostęp 24/7': 'gear',
  'Plac manewrowy': 'truck',
  'Rampa rozładunkowa': 'truck',
  'Brama automatyczna': 'car',
  Oświetlenie: 'sun',
  'Kanał samochodowy': 'car',
  'Media przy granicy': 'link',
  'Dostęp do drogi publicznej': 'pin',
  'Widok na las/wodę': 'tree',
  'Dostęp do kuchni': 'flame',
  'Dostęp do łazienki': 'sun',
  'Osobna łazienka': 'shield',
  Pralka: 'snow',
  Ogród: 'tree',
};
const tileIcon = (label: string): string => EXTRA_TILE_ICONS[label] ?? 'spark';

type ExtraStore = 'extra' | 'details';
type ExtraFieldDef = {
  kind: 'select' | 'input' | 'date';
  store: ExtraStore;
  key: string;
  label: string;
  options?: string[];
  suffix?: string;
  placeholder?: string;
  numeric?: 'integer' | 'decimal';
};
const O = extraInfoSelectOptions;
const sel = (key: string, label: string, options: string[]): ExtraFieldDef => ({ kind: 'select', store: 'extra', key, label, options });
const numField = (key: string, label: string, suffix?: string, placeholder?: string, numeric: 'integer' | 'decimal' = 'decimal'): ExtraFieldDef => ({ kind: 'input', store: 'extra', key, label, suffix, placeholder, numeric });
const txtField = (key: string, label: string, placeholder?: string): ExtraFieldDef => ({ kind: 'input', store: 'extra', key, label, placeholder });
const dateField = (key: string, label: string): ExtraFieldDef => ({ kind: 'date', store: 'extra', key, label });

// Pola najmu wspolne dla wiekszosci kategorii (prepend przy transakcji "Wynajem").
const RENT_LEAD_FIELDS: ExtraFieldDef[] = [
  sel('rentalPeriod', 'Okres najmu', O.rentalPeriod),
  numField('deposit', 'Kaucja', 'zł', 'Np. 6000'),
  dateField('availableFrom', 'Dostępne od'),
];
// Pola prawne wazne przy zakupie (append przy transakcji "Sprzedaż").
const SALE_LEGAL_FIELDS: ExtraFieldDef[] = [
  sel('legalStatus', 'Stan prawny', O.legalStatus),
  sel('landRegister', 'Księga wieczysta', O.landRegister),
];

type CategoryExtra = {
  fields: ExtraFieldDef[];
  media: string[];
  amenities: string[];
  rentAmenities?: string[];
  legal?: boolean; // dolacz pola prawne przy sprzedazy
  rentLead?: boolean; // dolacz pola najmu przy wynajmie (domyslnie true)
};

const CATEGORY_EXTRA: Record<string, CategoryExtra> = {
  Mieszkanie: {
    legal: true,
    fields: [
      sel('buildingType', 'Typ zabudowy', O.buildingType),
      sel('furnishing', 'Umeblowanie', O.furnishing),
      sel('buildingMaterial', 'Materiał budynku', O.buildingMaterial),
      sel('windows', 'Okna', O.windows),
      sel('exposure', 'Ekspozycja okien', O.exposure),
      numField('roomHeight', 'Wysokość pomieszczeń', 'cm', 'Np. 270', 'integer'),
    ],
    media: ['Ogrzewanie miejskie', 'Ogrzewanie gazowe', 'Ogrzewanie elektryczne', 'Ogrzewanie podłogowe', 'Woda miejska', 'Prąd', 'Gaz', 'Internet', 'Światłowód', 'Telewizja kablowa', 'Klimatyzacja'],
    amenities: ['Balkon', 'Taras', 'Winda', 'Parking', 'Garaż', 'Piwnica', 'Komórka lokatorska', 'Monitoring', 'Ochrona', 'Dostęp dla niepełnosprawnych'],
    rentAmenities: ['Dla studentów', 'Zwierzęta mile widziane'],
  },
  Dom: {
    legal: true,
    fields: [
      numField('plotArea', 'Powierzchnia działki', 'm²', 'Np. 650'),
      sel('buildingMaterial', 'Materiał', O.buildingMaterial),
      sel('roofType', 'Dach', O.roofType),
      sel('roofCover', 'Pokrycie dachu', O.roofCover),
      sel('furnishing', 'Umeblowanie', O.furnishing),
      sel('windows', 'Okna', O.windows),
      sel('exposure', 'Ekspozycja', O.exposure),
      sel('accessRoad', 'Dojazd', O.accessRoad),
      sel('fencing', 'Ogrodzenie', O.fencing),
      sel('sewageType', 'Kanalizacja / szambo', O.sewageType),
    ],
    media: ['Ogrzewanie gazowe', 'Ogrzewanie elektryczne', 'Ogrzewanie podłogowe', 'Woda miejska', 'Prąd', 'Gaz', 'Internet', 'Światłowód', 'Pompa ciepła', 'Fotowoltaika', 'Rekuperacja', 'Klimatyzacja'],
    amenities: ['Ogród', 'Kominek', 'Basen', 'Sauna', 'Ogród zimowy', 'Altana', 'Automatyczna brama', 'Rolety zewnętrzne', 'Monitoring zewnętrzny', 'System alarmowy', 'Ładowarka do samochodu elektrycznego', 'Grill murowany', 'Plac zabaw'],
    rentAmenities: ['Dla studentów', 'Zwierzęta mile widziane'],
  },
  Działka: {
    legal: true,
    fields: [
      sel('landType', 'Typ działki', O.landType),
      sel('landPurpose', 'Przeznaczenie', O.landPurpose),
      sel('planningStatus', 'Plan / warunki zabudowy', O.planningStatus),
      sel('plotShape', 'Kształt działki', O.plotShape),
      txtField('plotDimensions', 'Wymiary', 'Np. 20 × 40 m'),
      sel('accessRoad', 'Dojazd', O.accessRoad),
      sel('fencing', 'Ogrodzenie', O.fencing),
    ],
    media: ['Prąd', 'Woda miejska', 'Gaz', 'Kanalizacja'],
    amenities: ['Media przy granicy', 'Dostęp do drogi publicznej', 'Widok na las/wodę'],
  },
  'Lokal użytkowy': {
    legal: true,
    fields: [
      sel('localPurpose', 'Przeznaczenie lokalu', O.localPurpose),
      numField('roomHeight', 'Wysokość pomieszczeń', 'cm', 'Np. 320', 'integer'),
      sel('furnishing', 'Wyposażenie', O.furnishing),
    ],
    media: ['Ogrzewanie miejskie', 'Ogrzewanie gazowe', 'Ogrzewanie elektryczne', 'Woda miejska', 'Prąd', 'Gaz', 'Internet', 'Światłowód', 'Klimatyzacja', 'Wentylacja mechaniczna', 'Alarm'],
    amenities: ['Wejście z ulicy', 'Witryna', 'Zaplecze socjalne', 'Parking', 'Dostęp 24/7', 'Monitoring', 'Ochrona', 'Dostęp dla niepełnosprawnych'],
  },
  'Budynek użytkowy': {
    legal: true,
    fields: [
      sel('buildingKind', 'Rodzaj obiektu', O.buildingKind),
      numField('plotArea', 'Powierzchnia działki', 'm²', 'Np. 1500'),
      numField('roomHeight', 'Wysokość', 'cm', 'Np. 450', 'integer'),
    ],
    media: ['Ogrzewanie gazowe', 'Ogrzewanie elektryczne', 'Woda miejska', 'Prąd', 'Gaz', 'Kanalizacja', 'Internet', 'Światłowód', 'Klimatyzacja', 'Wentylacja mechaniczna'],
    amenities: ['Plac manewrowy', 'Rampa rozładunkowa', 'Parking', 'Brama automatyczna', 'Monitoring', 'Ochrona', 'Dostęp 24/7'],
  },
  Garaż: {
    legal: true,
    fields: [
      sel('garageType', 'Typ garażu', O.garageType),
      sel('garageLevel', 'Poziom', O.garageLevel),
    ],
    media: ['Prąd'],
    amenities: ['Oświetlenie', 'Brama automatyczna', 'Monitoring', 'Ochrona', 'Dostęp 24/7', 'Kanał samochodowy'],
  },
  Pokój: {
    rentLead: true,
    fields: [
      sel('roommates', 'Liczba współlokatorów', O.roommates),
      sel('roommatePreference', 'Preferencje współlokatorów', O.roommatePreference),
      sel('furnishing', 'Umeblowanie', O.furnishing),
    ],
    media: ['Internet', 'Światłowód', 'Telewizja kablowa'],
    amenities: ['Dostęp do kuchni', 'Dostęp do łazienki', 'Osobna łazienka', 'Balkon', 'Pralka', 'Parking', 'Dla studentów', 'Zwierzęta mile widziane'],
  },
};

// Zbiera pola/kafelki dla wybranej kategorii i transakcji. Nieznana kategoria -> jak mieszkanie.
function resolveCategoryExtra(category: string, isRent: boolean): { fields: ExtraFieldDef[]; mediaTiles: string[]; amenityTiles: string[] } {
  const cfg = CATEGORY_EXTRA[category] ?? CATEGORY_EXTRA.Mieszkanie;
  const fields: ExtraFieldDef[] = [
    ...(isRent && cfg.rentLead !== false ? RENT_LEAD_FIELDS : []),
    ...cfg.fields,
    ...(!isRent && cfg.legal ? SALE_LEGAL_FIELDS : []),
  ];
  const amenityTiles = [...cfg.amenities, ...(isRent ? (cfg.rentAmenities ?? []) : [])];
  return { fields, mediaTiles: cfg.media, amenityTiles };
}

// Klucze extraInfo z wlasna kolumna w bazie - tylko te czyscimy przy zmianie kategorii, bo tylko
// one moglyby wyciec do zapisanego ogloszenia (reszta pol zyje wylacznie w podgladzie kreatora).
const PERSISTED_EXTRA_SELECTS = ['furnishing', 'buildingType', 'buildingMaterial', 'windows', 'exposure', 'roomHeight'] as const;

// Ekran startowy dodawania oferty: dwie karty (sprzedaż/wynajem) z listą kategorii. Wybór ustawia
// transakcje i rodzaj nieruchomosci w formularzu. Rodzaje spoza "Mieszkanie"/"Dom" backend zapisuje
// jako APARTMENT (enum ma tylko APARTMENT/HOUSE) - etykieta zyje w formularzu, logika sie zgadza.
type AddCategoryItem = { label: string; icon: string };
type AddIntentCard = { key: 'sell' | 'rent'; transaction: string; title: string; subtitle: string; icon: string; items: AddCategoryItem[] };

const ADD_CATEGORY_ICONS: Record<string, string> = {
  Mieszkanie: 'apartment',
  Dom: 'house',
  Działka: 'tree',
  'Lokal użytkowy': 'building-plus',
  'Budynek użytkowy': 'city',
  Pokój: 'sofa',
  Garaż: 'car',
};

// Przykladowy tytul dopasowany do wybranej kategorii - dla kazdego rodzaju nieruchomosci inny,
// zeby podpowiedz mialai sens (np. dla dzialki nie sugerujemy "3-pokojowego mieszkania").
const LISTING_TITLE_HINTS: Record<string, string> = {
  Mieszkanie: 'Np. 3-pokojowe mieszkanie po remoncie, gotowe do wprowadzenia',
  Dom: 'Np. Dom wolnostojący z ogrodem w spokojnej okolicy',
  Działka: 'Np. Działka budowlana 800 m² z dostępem do mediów',
  'Lokal użytkowy': 'Np. Lokal handlowy w centrum, witryna od ulicy',
  'Budynek użytkowy': 'Np. Budynek usługowo-magazynowy z parkingiem',
  Pokój: 'Np. Umeblowany pokój w mieszkaniu, blisko centrum',
  Garaż: 'Np. Garaż murowany z prądem, miejsce dla 1 auta',
};
const DEFAULT_LISTING_TITLE_HINT = 'Np. Krótki, konkretny tytuł Twojej oferty';

const ADD_INTENT_CARDS: AddIntentCard[] = [
  {
    key: 'sell',
    transaction: 'Sprzedaż',
    title: 'Chcę sprzedać',
    subtitle: 'Wybierz kategorię nieruchomości, którą chcesz sprzedać.',
    icon: 'tag',
    items: ['Mieszkanie', 'Dom', 'Działka', 'Lokal użytkowy', 'Budynek użytkowy', 'Garaż'].map((label) => ({ label, icon: ADD_CATEGORY_ICONS[label] })),
  },
  {
    key: 'rent',
    transaction: 'Wynajem',
    title: 'Chcę wynająć',
    subtitle: 'Wybierz kategorię nieruchomości, którą chcesz wynająć.',
    icon: 'key',
    items: ['Mieszkanie', 'Pokój', 'Dom', 'Działka', 'Lokal użytkowy', 'Budynek użytkowy', 'Garaż'].map((label) => ({ label, icon: ADD_CATEGORY_ICONS[label] })),
  },
];

// Ozdobna scenka (budynek + dom + drzewo + chmurki) w naglowku karty wyboru. Rysowana
// currentColor, wiec dziedziczy kolor karty (zielony dla sprzedazy, fioletowy dla wynajmu).
// Grafika pustego stanu galerii zdjec: dwie przezroczyste ramki zdjec z tlem, a na wierzchu domek.
function PhotosEmptyIllustration() {
  return (
    <svg className="empty-photos-graphic" viewBox="0 0 152 104" fill="none" aria-hidden="true">
      <g opacity="0.6">
        <g transform="rotate(-8 50 50)">
          <rect x="26" y="28" width="48" height="44" rx="7" fill="#eef2f7" stroke="#d9e2ec" strokeWidth="1.6" />
          <circle cx="39" cy="41" r="3.6" fill="#ccd8e5" />
          <path d="M31 64l11-13 7 8 6-7 12 12" stroke="#ccd8e5" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
        </g>
        <g transform="rotate(8 102 50)">
          <rect x="78" y="28" width="48" height="44" rx="7" fill="#eef2f7" stroke="#d9e2ec" strokeWidth="1.6" />
          <circle cx="91" cy="41" r="3.6" fill="#ccd8e5" />
          <path d="M83 64l11-13 7 8 6-7 12 12" stroke="#ccd8e5" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
        </g>
      </g>
      <path d="M60 80V56l16-12 16 12v24Z" fill="#e6f8ef" stroke="#12a764" strokeWidth="2.6" strokeLinejoin="round" />
      <path d="M55 58 76 42 97 58" stroke="#12a764" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
      <rect x="70" y="66" width="12" height="14" rx="1" stroke="#12a764" strokeWidth="2.2" />
    </svg>
  );
}

function AddSceneIllustration() {
  return (
    <svg className="add-chooser-scene" viewBox="0 0 170 96" fill="none" aria-hidden="true">
      <g opacity="0.65" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M110 22c1.5-6 11-6 13 0 6 0 6 8 0 8h-15c-5 0-4.5-8 2-8Z" />
        <path d="M136 34c1-4 7.5-4 8.5 0 4 0 4 6 0 6h-10.5c-4 0-3-6 2-6Z" />
      </g>
      <g stroke="currentColor" strokeWidth="2" strokeLinejoin="round">
        <circle cx="21" cy="57" r="11" fill="currentColor" fillOpacity="0.12" />
        <line x1="21" y1="66" x2="21" y2="85" />
      </g>
      <g stroke="currentColor" strokeWidth="2" strokeLinejoin="round">
        <rect x="45" y="31" width="40" height="54" rx="2" fill="currentColor" fillOpacity="0.1" />
        <g strokeWidth="1.6" opacity="0.75">
          <rect x="53" y="39" width="8" height="8" />
          <rect x="69" y="39" width="8" height="8" />
          <rect x="53" y="53" width="8" height="8" />
          <rect x="69" y="53" width="8" height="8" />
          <rect x="53" y="67" width="8" height="8" />
          <rect x="69" y="67" width="8" height="8" />
        </g>
      </g>
      <g stroke="currentColor" strokeWidth="2" strokeLinejoin="round">
        <path d="M97 85V55l22-14 22 14v30Z" fill="currentColor" fillOpacity="0.1" />
        <path d="M93 57l26-17 26 17" />
        <rect x="111" y="67" width="15" height="18" />
      </g>
      <line x1="7" y1="85" x2="163" y2="85" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

// Naglowek ekranu wyboru: wyśrodkowany tytul z podkresleniem i "iskierka", podtytul, trzy plakietki
// zaufania oraz ozdobne przerywane strzalki po bokach (zielona i fioletowa).
function AddChooserHero() {
  return (
    <div className="add-hero">
      <svg className="add-hero-arrow left" viewBox="0 0 120 96" fill="none" aria-hidden="true">
        <path d="M104 12C52 8 16 30 30 82" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeDasharray="7 9" />
        <path d="M18 66l12 18 16-8" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
      <svg className="add-hero-arrow right" viewBox="0 0 120 96" fill="none" aria-hidden="true">
        <path d="M16 12c52-4 88 18 74 70" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeDasharray="7 9" />
        <path d="M102 66l-12 18-16-8" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
      </svg>

      <h1 className="add-hero-title">
        Dodaj ogłoszenie{' '}
        <span className="add-hero-hl">
          za darmo
          <svg className="add-hero-underline" viewBox="0 0 240 22" fill="none" aria-hidden="true">
            <path d="M6 14C60 4 176 4 234 12" stroke="currentColor" strokeWidth="5" strokeLinecap="round" />
          </svg>
          <svg className="add-hero-spark" viewBox="0 0 44 40" fill="none" aria-hidden="true">
            <path d="M22 4v13M13 10l5 7M31 10l-5 7" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
          </svg>
        </span>
      </h1>
      <p className="add-hero-sub">Wystaw swoje ogłoszenie w kilka chwil – bez opłat i ukrytych kosztów.</p>

      <div className="add-hero-badges">
        <div className="add-hero-badge">
          <span className="add-hero-badge-ic">
            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <circle cx="12" cy="12" r="11" fill="#12a764" />
              <path d="M7 12.4l3.3 3.3L17.2 9" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </span>
          <div><strong>100% darmowe</strong><small>Bez prowizji i opłat</small></div>
        </div>
        <div className="add-hero-badge">
          <span className="add-hero-badge-ic">
            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M12 2.5l8 3v6c0 5-3.4 8.3-8 10-4.6-1.7-8-5-8-10v-6l8-3Z" fill="#12a764" />
              <path d="M8.4 12.2l2.6 2.6 4.6-5" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </span>
          <div><strong>Bezpiecznie</strong><small>Twoje dane są chronione</small></div>
        </div>
        <div className="add-hero-badge">
          <span className="add-hero-badge-ic">
            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z" fill="#12a764" />
            </svg>
          </span>
          <div><strong>Szybko i łatwo</strong><small>Tylko kilka kroków</small></div>
        </div>
      </div>
    </div>
  );
}

// Karty wyboru na wejsciu do dodawania oferty. Klik w kategorie ustawia transakcje + rodzaj
// i wchodzi w kreator (onPick).
function AddCategoryChooser({ onPick }: { onPick: (transaction: string, propertyType: string) => void }) {
  return (
    <div className="add-chooser" aria-label="Wybierz, co chcesz zrobić">
      {ADD_INTENT_CARDS.map((card) => (
        <section className={`add-chooser-card ${card.key}`} key={card.key} aria-label={card.title}>
          <header className="add-chooser-head">
            <span className="add-chooser-badge"><Icon name={card.icon} /></span>
            <div>
              <h2>{card.title}</h2>
              <p>{card.subtitle}</p>
            </div>
            <AddSceneIllustration />
          </header>
          <div className="add-chooser-list">
            {card.items.map((item) => (
              <button
                type="button"
                key={item.label}
                className="add-chooser-item"
                onClick={() => onPick(card.transaction, item.label)}
              >
                <span className="add-chooser-item-icon"><Icon name={item.icon} /></span>
                <span className="add-chooser-item-label">{item.label}</span>
                <Icon name="chevron" />
              </button>
            ))}
          </div>
        </section>
      ))}
    </div>
  );
}

// Kroki kreatora dodawania w lewym pionowym stepperze. Wezel 0 = "Kategoria" (ekran wyboru, juz
// ukonczony), wezly 1..5 odpowiadaja krokom formularza (currentStep 0..4).
const ADD_STEP_META = [
  { title: 'Kategoria', desc: 'Wybierz, co chcesz sprzedać lub wynająć' },
  { title: 'Szczegóły oferty', desc: 'Podaj informacje o nieruchomości' },
  { title: 'Lokalizacja', desc: 'Określ adres i lokalizację' },
  { title: 'Zdjęcia', desc: 'Dodaj zdjęcia nieruchomości' },
  { title: 'Dodatkowe informacje', desc: 'Uzupełnij pozostałe szczegóły' },
  { title: 'Podgląd', desc: 'Sprawdź i opublikuj ogłoszenie' },
];

function AddWizardSteps({ currentStep, onGoStep, onBackToCategory }: {
  currentStep: number;
  onGoStep: (step: number) => void;
  onBackToCategory: () => void;
}) {
  const activeNode = currentStep + 1; // przesuniecie o "Kategorie" na poczatku
  return (
    <aside className="add-steps" aria-label="Kroki dodawania ogłoszenia">
      <ol className="add-steps-list">
        {ADD_STEP_META.map((step, index) => {
          const done = index < activeNode;
          const active = index === activeNode;
          const clickable = index <= activeNode;
          const handle = () => (index === 0 ? onBackToCategory() : onGoStep(index - 1));
          return (
            <li key={step.title} className={`add-steps-item ${done ? 'done' : ''} ${active ? 'active' : ''}`}>
              <button
                type="button"
                className="add-steps-btn"
                onClick={clickable ? handle : undefined}
                disabled={!clickable}
                aria-current={active ? 'step' : undefined}
              >
                <span className="add-steps-marker">{done ? <Icon name="check" /> : index + 1}</span>
                <span className="add-steps-text">
                  <strong>{index + 1}. {step.title}</strong>
                  <small>{step.desc}</small>
                </span>
              </button>
            </li>
          );
        })}
      </ol>
    </aside>
  );
}

const listingDetailsSelectOptions = {
  transaction: ['Sprzedaż', 'Wynajem'],
  propertyType: ['Mieszkanie', 'Dom', 'Działka', 'Lokal użytkowy', 'Pokój', 'Budynek użytkowy', 'Garaż'],
  market: ['Wtórny', 'Pierwotny'],
  houseType: ['Wybierz', 'Wolnostojący', 'Bliźniak', 'Szeregowy', 'Segment skrajny', 'Segment środkowy', 'Rezydencja', 'Dworek'],
  houseFloors: ['Wybierz', 'Parterowy', '1', '2', '3+'],
  houseGarage: ['Wybierz', 'Brak', 'Jednostanowiskowy', 'Dwustanowiskowy', 'Trzystanowiskowy+', 'W bryle budynku', 'Wolnostojący'],
  houseBasement: ['Wybierz', 'Tak', 'Nie', 'Częściowe'],
  houseAttic: ['Wybierz', 'Użytkowy', 'Nieużytkowy', 'Brak'],
  rooms: ['Wybierz', '1', '2', '3', '4', '5', '6+'],
  floor: ['Wybierz', 'Parter', '1', '2', '3', '4', '5', '6', '7', '8+', 'Poddasze'],
  buildingFloors: ['Wybierz', '1', '2', '3', '4', '5', '6', '7', '8+'],
  condition: ['Wybierz', 'Do wprowadzenia', 'Po remoncie', 'Do odświeżenia', 'Do remontu', 'Deweloperski'],
  ownership: ['Wybierz', 'Pełna własność', 'Spółdzielcze własnościowe', 'Użytkowanie wieczyste', 'Udział'],
};

const INITIAL_LISTING_DETAILS = {
  transaction: 'Sprzedaż',
  propertyType: 'Mieszkanie',
  market: 'Wtórny',
  title: '',
  description: '',
  price: '',
  area: '',
  rooms: 'Wybierz',
  houseType: 'Wybierz',
  houseGarage: 'Wybierz',
  houseBasement: 'Wybierz',
  houseAttic: 'Wybierz',
  floor: 'Wybierz',
  buildingFloors: 'Wybierz',
  houseFloors: 'Wybierz',
  yearBuilt: '',
  condition: 'Wybierz',
  ownership: 'Wybierz',
  contactName: '',
  // Prefiks kraju trzymamy osobno od numeru krajowego - razem trafiaja do pola contactPhone oferty.
  contactPhoneCountry: 'PL',
  contactPhone: '',
  contactEmail: '',
};

/**
 * Prefiksy telefoniczne dostepne przy ogloszeniu - Polska i kraje najczestsze na naszym rynku.
 * Liczba cyfr dotyczy numeru komorkowego bez prefiksu (dla Polski 9, np. +48 600 123 456).
 */
const PHONE_COUNTRIES = [
  { code: 'PL', dial: '+48', label: 'Polska', minDigits: 9, maxDigits: 9, example: '600 123 456' },
  { code: 'AL', dial: '+355', label: 'Albania', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'AT', dial: '+43', label: 'Austria', minDigits: 10, maxDigits: 10, example: '123 456 789 0' },
  { code: 'BE', dial: '+32', label: 'Belgia', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'BG', dial: '+359', label: 'Bułgaria', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'HR', dial: '+385', label: 'Chorwacja', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'CY', dial: '+357', label: 'Cypr', minDigits: 8, maxDigits: 8, example: '123 456 78' },
  { code: 'CZ', dial: '+420', label: 'Czechy', minDigits: 9, maxDigits: 9, example: '601 123 456' },
  { code: 'DK', dial: '+45', label: 'Dania', minDigits: 8, maxDigits: 8, example: '123 456 78' },
  { code: 'EE', dial: '+372', label: 'Estonia', minDigits: 8, maxDigits: 8, example: '123 456 78' },
  { code: 'FI', dial: '+358', label: 'Finlandia', minDigits: 10, maxDigits: 10, example: '123 456 789 0' },
  { code: 'FR', dial: '+33', label: 'Francja', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'DE', dial: '+49', label: 'Niemcy', minDigits: 10, maxDigits: 11, example: '1512 3456789' },
  { code: 'GR', dial: '+30', label: 'Grecja', minDigits: 10, maxDigits: 10, example: '123 456 789 0' },
  { code: 'HU', dial: '+36', label: 'Węgry', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'IS', dial: '+354', label: 'Islandia', minDigits: 7, maxDigits: 7, example: '123 456 7' },
  { code: 'IE', dial: '+353', label: 'Irlandia', minDigits: 9, maxDigits: 9, example: '851 234 567' },
  { code: 'IT', dial: '+39', label: 'Włochy', minDigits: 9, maxDigits: 10, example: '312 345 6789' },
  { code: 'LV', dial: '+371', label: 'Łotwa', minDigits: 8, maxDigits: 8, example: '123 456 78' },
  { code: 'LT', dial: '+370', label: 'Litwa', minDigits: 8, maxDigits: 8, example: '612 34567' },
  { code: 'LU', dial: '+352', label: 'Luksemburg', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'MT', dial: '+356', label: 'Malta', minDigits: 8, maxDigits: 8, example: '123 456 78' },
  { code: 'NL', dial: '+31', label: 'Holandia', minDigits: 9, maxDigits: 9, example: '612 345 678' },
  { code: 'NO', dial: '+47', label: 'Norwegia', minDigits: 8, maxDigits: 8, example: '123 456 78' },
  { code: 'PT', dial: '+351', label: 'Portugalia', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'RO', dial: '+40', label: 'Rumunia', minDigits: 9, maxDigits: 9, example: '712 345 678' },
  { code: 'RS', dial: '+381', label: 'Serbia', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'SK', dial: '+421', label: 'Słowacja', minDigits: 9, maxDigits: 9, example: '901 123 456' },
  { code: 'SI', dial: '+386', label: 'Słowenia', minDigits: 8, maxDigits: 8, example: '123 456 78' },
  { code: 'ES', dial: '+34', label: 'Hiszpania', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'SE', dial: '+46', label: 'Szwecja', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'CH', dial: '+41', label: 'Szwajcaria', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'UA', dial: '+380', label: 'Ukraina', minDigits: 9, maxDigits: 9, example: '501 234 567' },
  { code: 'GB', dial: '+44', label: 'Wielka Brytania', minDigits: 10, maxDigits: 10, example: '7700 900123' },
  { code: 'TR', dial: '+90', label: 'Turcja', minDigits: 10, maxDigits: 10, example: '123 456 789 0' },
  { code: 'US', dial: '+1', label: 'USA/Kanada', minDigits: 10, maxDigits: 10, example: '123 456 789 0' },
  { code: 'MX', dial: '+52', label: 'Meksyk', minDigits: 10, maxDigits: 10, example: '123 456 789 0' },
  { code: 'BR', dial: '+55', label: 'Brazylia', minDigits: 11, maxDigits: 11, example: '123 456 789 01' },
  { code: 'AR', dial: '+54', label: 'Argentyna', minDigits: 10, maxDigits: 10, example: '123 456 789 0' },
  { code: 'CL', dial: '+56', label: 'Chile', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'CO', dial: '+57', label: 'Kolumbia', minDigits: 10, maxDigits: 10, example: '123 456 789 0' },
  { code: 'AU', dial: '+61', label: 'Australia', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'NZ', dial: '+64', label: 'Nowa Zelandia', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'JP', dial: '+81', label: 'Japonia', minDigits: 10, maxDigits: 10, example: '123 456 789 0' },
  { code: 'KR', dial: '+82', label: 'Korea Południowa', minDigits: 10, maxDigits: 10, example: '123 456 789 0' },
  { code: 'CN', dial: '+86', label: 'Chiny', minDigits: 11, maxDigits: 11, example: '123 456 789 01' },
  { code: 'IN', dial: '+91', label: 'Indie', minDigits: 10, maxDigits: 10, example: '123 456 789 0' },
  { code: 'PK', dial: '+92', label: 'Pakistan', minDigits: 10, maxDigits: 10, example: '123 456 789 0' },
  { code: 'ID', dial: '+62', label: 'Indonezja', minDigits: 10, maxDigits: 10, example: '123 456 789 0' },
  { code: 'TH', dial: '+66', label: 'Tajlandia', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'VN', dial: '+84', label: 'Wietnam', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'SG', dial: '+65', label: 'Singapur', minDigits: 8, maxDigits: 8, example: '123 456 78' },
  { code: 'MY', dial: '+60', label: 'Malezja', minDigits: 10, maxDigits: 10, example: '123 456 789 0' },
  { code: 'ZA', dial: '+27', label: 'RPA', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'EG', dial: '+20', label: 'Egipt', minDigits: 10, maxDigits: 10, example: '123 456 789 0' },
  { code: 'MA', dial: '+212', label: 'Maroko', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'NG', dial: '+234', label: 'Nigeria', minDigits: 10, maxDigits: 10, example: '123 456 789 0' },
  { code: 'KE', dial: '+254', label: 'Kenia', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'AE', dial: '+971', label: 'ZEA', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'SA', dial: '+966', label: 'Arabia Saudyjska', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'IL', dial: '+972', label: 'Izrael', minDigits: 9, maxDigits: 9, example: '123 456 789' },
  { code: 'QA', dial: '+974', label: 'Katar', minDigits: 8, maxDigits: 8, example: '123 456 78' },
] as const;

const phoneCountryOf = (code: string) => PHONE_COUNTRIES.find((country) => country.code === code) ?? PHONE_COUNTRIES[0];

// Numer telefonu z konta ("+48 500100200") rozbity na kraj (kod PHONE_COUNTRIES) i same cyfry -
// do wstepnego wypelnienia danych kontaktowych w formularzu dodawania oferty.
function contactPhoneFromUser(stored: string | null | undefined): { country: string; number: string } {
  const compact = (stored ?? '').replace(/\s/g, '');
  if (!compact) {
    return { country: 'PL', number: '' };
  }
  const match = [...PHONE_COUNTRIES]
    .sort((a, b) => b.dial.length - a.dial.length)
    .find((country) => compact.startsWith(country.dial));
  if (!match) {
    return { country: 'PL', number: compact.replace(/\D/g, '') };
  }
  return { country: match.code, number: compact.slice(match.dial.length).replace(/\D/g, '') };
}

// Komunikat bledu albo null, gdy numer jest poprawny. Puste pole jest dozwolone - telefon jest opcjonalny.
function validateContactPhone(countryCode: string, value: string): string | null {
  const country = phoneCountryOf(countryCode);
  const digits = value.replace(/\D/g, '');
  if (!digits) {
    return null;
  }
  if (digits.length < country.minDigits || digits.length > country.maxDigits) {
    const expected = country.minDigits === country.maxDigits
      ? `${country.minDigits} cyfr`
      : `od ${country.minDigits} do ${country.maxDigits} cyfr`;
    return `Numer komórkowy dla kraju ${country.label} (${country.dial}) ma ${expected}. Podano ${digits.length}.`;
  }
  return null;
}

// Zapis do oferty: "+48 600 123 456". Dziewieciocyfrowe numery grupujemy po trzy dla czytelnosci.
function composeContactPhone(countryCode: string, value: string): string | undefined {
  const country = phoneCountryOf(countryCode);
  const digits = value.replace(/\D/g, '');
  if (!digits) {
    return undefined;
  }
  const grouped = digits.length === 9 ? digits.replace(/(\d{3})(\d{3})(\d{3})/, '$1 $2 $3') : digits;
  return `${country.dial} ${grouped}`;
}

// Odwrotnosc composeContactPhone przy wczytywaniu oferty do edycji (najdluzszy pasujacy prefiks wygrywa).
function splitContactPhone(stored: string | null | undefined): { country: string; number: string } {
  const raw = (stored ?? '').replace(/[\s-]/g, '');
  const match = [...PHONE_COUNTRIES]
    .sort((a, b) => b.dial.length - a.dial.length)
    .find((country) => raw.startsWith(country.dial));
  if (match) {
    return { country: match.code, number: match.dial === '+48' ? formatPolishPhone(raw.slice(match.dial.length)) : raw.slice(match.dial.length) };
  }
  return { country: 'PL', number: formatPolishPhone(raw.replace(/^\+/, '')) };
}

const formatPolishPhone = (digits: string) => (digits.length === 9 ? digits.replace(/(\d{3})(\d{3})(\d{3})/, '$1 $2 $3') : digits);

const INITIAL_EXTRA_INFO = {
  rent: '',
  deposit: '',
  rentalPeriod: 'Wybierz',
  mediaBilling: {} as Record<string, string>,
  mediaBillingAmounts: {} as Record<string, string>,
  availableFrom: '',
  plotArea: '',
  furnishing: 'Wybierz',
  buildingType: 'Wybierz',
  buildingMaterial: 'Wybierz',
  roofType: 'Wybierz',
  roofCover: 'Wybierz',
  garageDetails: 'Wybierz',
  basement: 'Wybierz',
  attic: 'Wybierz',
  fencing: 'Wybierz',
  accessRoad: 'Wybierz',
  sewageType: 'Wybierz',
  windows: 'Wybierz',
  exposure: 'Wybierz',
  roomHeight: '',
  // Pola kategorii-specyficzne dodane do dynamicznej sekcji "Dodatkowe informacje". Trzymane na
  // froncie (podglad kreatora); do bazy trafiaja tylko te, ktore maja swoja kolumne (furnishing,
  // buildingType, buildingMaterial, windows, exposure, roomHeight, availableFrom) oraz tagi media/amenities.
  landType: 'Wybierz',
  landPurpose: 'Wybierz',
  planningStatus: 'Wybierz',
  plotShape: 'Wybierz',
  plotDimensions: '',
  localPurpose: 'Wybierz',
  buildingKind: 'Wybierz',
  garageType: 'Wybierz',
  garageLevel: 'Wybierz',
  legalStatus: 'Wybierz',
  landRegister: 'Wybierz',
  roommates: 'Wybierz',
  roommatePreference: 'Wybierz',
  virtualTourUrl: '',
};

type VirtualTourEmbedInfo = {
  embedUrl: string;
  providerLabel: string;
};

function normalizeVirtualTourInput(rawValue: string): string {
  const trimmed = rawValue.trim();
  if (!trimmed) {
    throw new Error('Wklej pełny link do wirtualnego spaceru.');
  }

  let parsed: URL;
  try {
    parsed = new URL(trimmed);
  } catch {
    throw new Error('Podaj poprawny adres URL spaceru (http:// lub https://).');
  }

  if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
    throw new Error('Link do spaceru musi zaczynać się od http:// lub https://.');
  }

  return parsed.toString();
}

function getVirtualTourEmbed(url: string): VirtualTourEmbedInfo | null {
  let parsed: URL;
  try {
    parsed = new URL(url);
  } catch {
    return null;
  }

  const host = parsed.hostname.toLowerCase();
  const pathParts = parsed.pathname.split('/').filter(Boolean);

  if (host === 'youtu.be' || host.endsWith('.youtu.be')) {
    const id = pathParts[0];
    if (id) {
      return {
        embedUrl: `https://www.youtube.com/embed/${encodeURIComponent(id)}`,
        providerLabel: 'YouTube',
      };
    }
  }

  if (host === 'youtube.com' || host.endsWith('.youtube.com')) {
    const videoId = parsed.searchParams.get('v')
      || (pathParts[0] === 'embed' ? pathParts[1] : null)
      || (pathParts[0] === 'shorts' ? pathParts[1] : null);
    if (videoId) {
      return {
        embedUrl: `https://www.youtube.com/embed/${encodeURIComponent(videoId)}`,
        providerLabel: 'YouTube',
      };
    }
  }

  if (host.endsWith('matterport.com')) {
    const modelId = parsed.searchParams.get('m');
    if (modelId) {
      return {
        embedUrl: `https://my.matterport.com/show/?m=${encodeURIComponent(modelId)}`,
        providerLabel: 'Matterport',
      };
    }
    if (pathParts[0] === 'show') {
      return {
        embedUrl: parsed.toString(),
        providerLabel: 'Matterport',
      };
    }
  }

  if (host.endsWith('kuula.co')) {
    if (pathParts[0] === 'post' && pathParts[1]) {
      return {
        embedUrl: `https://kuula.co/share/${encodeURIComponent(pathParts[1])}?fs=1&vr=1&thumbs=1&info=1&logo=1`,
        providerLabel: 'Kuula',
      };
    }
    if (pathParts[0] === 'share' && pathParts[1]) {
      return {
        embedUrl: parsed.toString(),
        providerLabel: 'Kuula',
      };
    }
  }

  return null;
}

const addFooterBenefits = [
  {
    icon: 'lock',
    title: 'Szyfrowane dane',
    text: 'Zabezpieczamy 100% przesyłanych informacji.',
  },
  {
    icon: 'group',
    title: 'Bez pośredników',
    text: 'Kupujący kontaktuje się z Tobą wprost.',
  },
  {
    icon: 'clock',
    title: 'Prosta obsługa',
    text: 'Dodaj ogłoszenie w mniej niż 5 minut.',
  },
  {
    icon: 'shield',
    title: 'Zero kosztów',
    text: 'Jesteśmy za darmo. Od początku do końca.',
  },
];

// Krótkie opisy tematów na kafelkach /poradniki. Ikona, tytuł i slug pochodzą z GUIDE_TOPICS
// (jedno źródło prawdy), a licznik artykułów liczymy dynamicznie z API.
const GUIDE_TOPIC_TEXTS: Record<string, string> = {
  'kupno-mieszkania': 'Poradniki dla kupujących',
  'kredyty-hipoteczne': 'Finansowanie zakupu',
  'wynajem': 'Porady dla najemców i wynajmujących',
  'inwestowanie': 'Analizy i strategie inwestycyjne',
  'remont-i-wykonczenie': 'Praktyczne porady i inspiracje',
  'prawo-i-podatki': 'Prawo nieruchomości i podatki',
};

const guideTopics = GUIDE_TOPICS.map((topic) => ({
  slug: topic.slug,
  icon: topic.icon,
  title: topic.title,
  guide: topic.guide,
  text: GUIDE_TOPIC_TEXTS[topic.slug] ?? '',
}));

// Odmiana słowa "artykuł" po liczbie (1 artykuł, 2 artykuły, 5 artykułów).
function articleCountLabel(count: number): string {
  const mod10 = count % 10;
  const mod100 = count % 100;
  if (count === 1) {
    return '1 artykuł';
  }
  if (mod10 >= 2 && mod10 <= 4 && (mod100 < 10 || mod100 >= 20)) {
    return `${count} artykuły`;
  }
  return `${count} artykułów`;
}

// Skroty do wbudowanych poradnikow - kazdy prowadzi do rozdzialu, ktory opisuje dany temat.
const quickGuides = [
  {
    icon: 'scale',
    title: 'Jak sprawdzić księgę wieczystą?',
    text: 'Poradnik krok po kroku',
    to: ROUTES.guideLaw,
  },
  {
    icon: 'percent',
    title: 'Podatek od sprzedaży mieszkania',
    text: 'Kiedy trzeba zapłacić?',
    to: ROUTES.guideLaw,
  },
  {
    icon: 'paint',
    title: 'Ile kosztuje remont mieszkania?',
    text: 'Aktualne koszty robocizny i materiałów',
    to: ROUTES.guideRenovation,
  },
  {
    icon: 'shield',
    title: 'Jak bezpiecznie wynająć mieszkanie?',
    text: 'Porady dla wynajmujących',
    to: ROUTES.guideRent,
  },
  {
    icon: 'chart',
    title: 'PCC przy zakupie mieszkania',
    text: 'Stawki i zwolnienia w 2026 roku',
    to: ROUTES.guideLaw,
  },
];

// Skroty do list ofert - kazdy prowadzi do wyniku, ktory faktycznie odpowiada nazwie kafelka.
const guideRelatedOffers = [
  {
    title: 'Mieszkania w Krakowie',
    to: buyCityPath('Kraków'),
    image: cityImage,
    position: '88% 56%',
  },
  {
    title: 'Mieszkania w Warszawie',
    to: buyCityPath('Warszawa'),
    image: cityImage,
    position: '18% 48%',
  },
  {
    title: 'Wszystkie oferty sprzedaży',
    to: ROUTES.buy,
    image: cityImage,
    position: '74% 52%',
  },
  {
    title: 'Oferty wynajmu',
    to: ROUTES.rent,
    image: heroImage,
    position: '47% 58%',
  },
];

type LatLng = { lat: number; lng: number };

const POLAND_CENTER: LatLng = { lat: 52.1, lng: 19.3 };

const CITY_COORDS: Record<string, LatLng> = {
  Warszawa: { lat: 52.2297, lng: 21.0122 },
  Kraków: { lat: 50.0647, lng: 19.945 },
  Łódź: { lat: 51.7592, lng: 19.456 },
  Wrocław: { lat: 51.1079, lng: 17.0385 },
  Poznań: { lat: 52.4064, lng: 16.9252 },
  Gdańsk: { lat: 54.352, lng: 18.6466 },
  Szczecin: { lat: 53.4285, lng: 14.5528 },
  Bydgoszcz: { lat: 53.1235, lng: 18.0084 },
  Lublin: { lat: 51.2465, lng: 22.5684 },
  Białystok: { lat: 53.1325, lng: 23.1688 },
  Katowice: { lat: 50.2649, lng: 19.0238 },
  Gdynia: { lat: 54.5189, lng: 18.5305 },
  Częstochowa: { lat: 50.7971, lng: 19.12 },
  Radom: { lat: 51.4027, lng: 21.1471 },
  Sosnowiec: { lat: 50.2862, lng: 19.104 },
  Toruń: { lat: 53.0138, lng: 18.5984 },
  Kielce: { lat: 50.8661, lng: 20.6286 },
  Rzeszów: { lat: 50.0413, lng: 21.999 },
  Gliwice: { lat: 50.2945, lng: 18.6714 },
  Zabrze: { lat: 50.3249, lng: 18.7857 },
  Olsztyn: { lat: 53.7784, lng: 20.4801 },
  'Bielsko-Biała': { lat: 49.8224, lng: 19.0444 },
  Bytom: { lat: 50.3483, lng: 18.9157 },
  'Zielona Góra': { lat: 51.9356, lng: 15.5062 },
  Rybnik: { lat: 50.0971, lng: 18.5416 },
  Opole: { lat: 50.6751, lng: 17.9213 },
  Tychy: { lat: 50.131, lng: 18.9866 },
  'Gorzów Wielkopolski': { lat: 52.7368, lng: 15.2288 },
  Płock: { lat: 52.5468, lng: 19.7064 },
  Tarnów: { lat: 50.0121, lng: 20.9858 },
  Koszalin: { lat: 54.1943, lng: 16.1714 },
  Kalisz: { lat: 51.7611, lng: 18.0911 },
  Legnica: { lat: 51.207, lng: 16.1619 },
  Słupsk: { lat: 54.4641, lng: 17.0287 },
  Elbląg: { lat: 54.1561, lng: 19.4045 },
  Wałbrzych: { lat: 50.7714, lng: 16.2845 },
  'Nowy Sącz': { lat: 49.6175, lng: 20.7153 },
  'Jelenia Góra': { lat: 50.9044, lng: 15.7197 },
  Sopot: { lat: 54.4418, lng: 18.5601 },
  Zakopane: { lat: 49.2992, lng: 19.9496 },
  Przemyśl: { lat: 49.7838, lng: 22.7677 },
};

const POLAND_BOUNDS = { minLat: 48.8, maxLat: 54.9, minLng: 14.0, maxLng: 24.2 };

function projectToWorld(lat: number, lng: number, zoom: number) {
  const scale = 256 * 2 ** zoom;
  const x = ((lng + 180) / 360) * scale;
  const sinLat = Math.sin((lat * Math.PI) / 180);
  const y = (0.5 - Math.log((1 + sinLat) / (1 - sinLat)) / (4 * Math.PI)) * scale;
  return { x, y };
}

function unprojectFromWorld(x: number, y: number, zoom: number): LatLng {
  const scale = 256 * 2 ** zoom;
  const lng = (x / scale) * 360 - 180;
  const n = Math.PI - (2 * Math.PI * y) / scale;
  const lat = (180 / Math.PI) * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
  return { lat, lng };
}

function clampCenter(center: LatLng): LatLng {
  return {
    lat: Math.min(POLAND_BOUNDS.maxLat, Math.max(POLAND_BOUNDS.minLat, center.lat)),
    lng: Math.min(POLAND_BOUNDS.maxLng, Math.max(POLAND_BOUNDS.minLng, center.lng)),
  };
}

function normalizeSearchText(value: string): string {
  return value
    .trim()
    .toLowerCase()
    // "ł" to osobna litera, a nie "l" ze znakiem diakrytycznym - NFD jej nie rozklada, wiec bez
    // tej podmiany "Łódź" zostaje jako "łodz" i wpisane "lodz" nigdy w nie nie trafia.
    .replace(/ł/g, 'l')
    .normalize('NFD')
    .replace(/\p{Diacritic}/gu, '');
}

/**
 * Odleglosc edycyjna: ile pojedynczych poprawek dzieli dwa napisy. Liczymy dodanie, usuniecie,
 * zamiane litery oraz przestawienie dwoch sasiednich liter ("wrocwal" zamiast "wroclaw") - to
 * ostatnie jest jedna z najczestszych literowek przy szybkim pisaniu, a zwykly Levenshtein
 * liczylby je jako dwie osobne poprawki i taka nazwa nie zmiescilaby sie w tolerancji.
 */
function editDistance(a: string, b: string): number {
  if (a === b) {
    return 0;
  }
  const rows: number[][] = [Array.from({ length: b.length + 1 }, (_, index) => index)];
  for (let i = 1; i <= a.length; i += 1) {
    const current = [i];
    for (let j = 1; j <= b.length; j += 1) {
      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
      let best = Math.min(current[j - 1] + 1, rows[i - 1][j] + 1, rows[i - 1][j - 1] + cost);
      if (i > 1 && j > 1 && a[i - 1] === b[j - 2] && a[i - 2] === b[j - 1]) {
        best = Math.min(best, rows[i - 2][j - 2] + 1);
      }
      current[j] = best;
    }
    rows.push(current);
  }
  return rows[a.length][b.length];
}

/**
 * Ile literowek wybaczamy przy zapytaniu danej dlugosci. Krotkich nie ruszamy: "gda" pasuje
 * do zbyt wielu nazw, zeby jeszcze zgadywac, co uzytkownik mial na mysli.
 *
 * Progi dobrane pomiarem na liscie 55 polskich miast. Dopuszczenie dwoch poprawek juz przy
 * siedmiu znakach zaczyna mylic prawdziwe nazwy: "krakow" trafia w Katowice, a "kielce"
 * w Siedlce - a to gorszy blad niz nieznalezienie miasta wpisanego z dwiema literowkami.
 * Przy obecnych progach jedyne kolizje to pary nierozroznialne takze dla czlowieka
 * (Lublin i Lubin, Wrocław i Włocławek).
 */
function cityTypoTolerance(length: number): number {
  if (length < 4) {
    return 0;
  }
  return length < 8 ? 1 : 2;
}

/**
 * Czy nazwa miasta pasuje do tego, co wpisano. Najpierw zwykle dopasowanie poczatku nazwy,
 * a gdy ono zawiedzie - z marginesem na literowki ("warszwa" trafia w "Warszawa").
 */
function cityStartsWith(cityName: string, query: string): boolean {
  const normalizedQuery = normalizeSearchText(query);
  if (!normalizedQuery) {
    return true;
  }
  const normalizedName = normalizeSearchText(cityName);
  if (normalizedName.startsWith(normalizedQuery)) {
    return true;
  }

  const tolerance = cityTypoTolerance(normalizedQuery.length);
  if (tolerance === 0) {
    return false;
  }

  // Porownujemy z poczatkiem nazwy, nie z cala - inaczej "gdansk" przegralby z dluzszymi nazwami.
  // Dlugosc okna zmieniamy w zakresie tolerancji, zeby zlapac tez brakujaca albo nadmiarowa litere.
  const from = Math.max(1, normalizedQuery.length - tolerance);
  const to = Math.min(normalizedName.length, normalizedQuery.length + tolerance);
  for (let length = from; length <= to; length += 1) {
    if (editDistance(normalizedQuery, normalizedName.slice(0, length)) <= tolerance) {
      return true;
    }
  }
  return false;
}

function findKnownCityKey(name: string): string | null {
  const normalized = normalizeSearchText(name);
  if (!normalized) {
    return null;
  }
  return Object.keys(CITY_COORDS).find((cityName) => normalizeSearchText(cityName) === normalized) ?? null;
}

function useResolvedCityCenter(cityName: string, fallbackCenter: LatLng): LatLng {
  const [center, setCenter] = useState<LatLng>(fallbackCenter);

  useEffect(() => {
    const trimmed = cityName.trim();
    if (!trimmed) {
      setCenter(fallbackCenter);
      return;
    }

    const knownCity = findKnownCityKey(trimmed);
    if (knownCity) {
      setCenter(CITY_COORDS[knownCity]);
      return;
    }

    let cancelled = false;
    const controller = new AbortController();
    fetchPlaceSuggestions(trimmed, controller.signal)
      .then((places) => {
        if (cancelled || places.length === 0) {
          return;
        }
        setCenter(clampCenter({ lat: places[0].lat, lng: places[0].lng }));
      })
      .catch(() => undefined);

    return () => {
      cancelled = true;
      controller.abort();
    };
  }, [cityName, fallbackCenter.lat, fallbackCenter.lng]);

  return center;
}

function listingLatLng(offer: { city: string }, index: number): LatLng {
  const base = CITY_COORDS[offer.city] ?? POLAND_CENTER;
  const radius = 0.035;
  return {
    lat: base.lat + Math.sin(index * 1.7) * radius,
    lng: base.lng + Math.cos(index * 2.3) * radius * 1.4,
  };
}

type PlaceSuggestion = {
  id: number;
  label: string;
  sublabel: string;
  lat: number;
  lng: number;
};

const PLACE_TYPE_LABELS: Record<string, string> = {
  city: 'miasto',
  town: 'miasto',
  village: 'wieś',
  hamlet: 'przysiółek',
  administrative: 'gmina',
  municipality: 'gmina',
  suburb: 'dzielnica',
  neighbourhood: 'osiedle',
  quarter: 'dzielnica',
  county: 'powiat',
  state: 'województwo',
  locality: 'miejscowość',
};

type NominatimResult = {
  place_id: number;
  lat: string;
  lon: string;
  display_name: string;
  type: string;
  class: string;
  address?: Record<string, string>;
};

function describePlace(item: NominatimResult): PlaceSuggestion {
  const address = item.address ?? {};
  const label =
    address.city ?? address.town ?? address.village ?? address.hamlet
    ?? address.municipality ?? item.display_name.split(',')[0];
  const typeLabel = PLACE_TYPE_LABELS[item.type] ?? PLACE_TYPE_LABELS[item.class] ?? 'miejscowość';
  const county = address.county ? address.county.replace(/^powiat\s+/i, '') : '';
  const state = address.state ? address.state.replace(/^województwo\s+/i, '') : '';
  const sublabel = [typeLabel, county, state].filter(Boolean).join(', ');
  return {
    id: item.place_id,
    label,
    sublabel,
    lat: Number(item.lat),
    lng: Number(item.lon),
  };
}

async function fetchPlaceSuggestions(query: string, signal: AbortSignal): Promise<PlaceSuggestion[]> {
  const url = new URL('https://nominatim.openstreetmap.org/search');
  url.searchParams.set('q', query);
  url.searchParams.set('format', 'jsonv2');
  url.searchParams.set('countrycodes', 'pl');
  url.searchParams.set('addressdetails', '1');
  url.searchParams.set('accept-language', 'pl');
  url.searchParams.set('limit', '8');
  const response = await fetch(url.toString(), {
    signal,
    headers: { Accept: 'application/json' },
  });
  if (!response.ok) {
    throw new Error('Nie udało się pobrać podpowiedzi');
  }
  const data = (await response.json()) as NominatimResult[];
  const seen = new Set<string>();
  const places: PlaceSuggestion[] = [];
  for (const item of data) {
    const place = describePlace(item);
    const key = `${place.label}|${place.sublabel}`;
    if (seen.has(key)) {
      continue;
    }
    seen.add(key);
    places.push(place);
  }
  return places;
}

type ListingLocation = {
  city: string;
  district: string;
  estate: string;
  street: string;
  building: string;
  unit: string;
  // Zaznaczone = na mapie pokazujemy przyblizony obszar zamiast dokladnego punktu.
  approximateLocation: boolean;
};

type ListingPhoto = {
  id: string;
  name: string;
  url: string;
};

const INITIAL_LISTING_LOCATION: ListingLocation = {
  city: '',
  district: '',
  estate: '',
  street: '',
  building: '',
  unit: '',
  approximateLocation: false,
};

// Promien obszaru pokazywanego zamiast dokladnego punktu (zgodny z rozrzutem wspolrzednych z API).
const APPROXIMATE_LOCATION_RADIUS_M = 1000;
// Zoom mapy w kroku Lokalizacja: dokladny (pinezka) vs przyblizony (mapa sie oddala, widac obszar).
const EXACT_LOCATION_ZOOM = 17;
const APPROXIMATE_LOCATION_ZOOM = 14;

const INITIAL_LISTING_COORDS: LatLng = { lat: 50.0491, lng: 19.9617 };

function locationSearchQuery(location: ListingLocation) {
  return [location.street, location.building, location.estate, location.district, location.city, 'Polska']
    .filter((part) => part.trim())
    .join(', ');
}

function locationZoom(location: ListingLocation) {
  if (location.street && location.building) {
    return 17;
  }
  if (location.street || location.district || location.estate) {
    return 15;
  }
  return 12;
}

// Wynik geokodowania adresu: pozycja pinezki plus informacja, czy trafilismy w konkretny budynek
// (Nominatim zwrocil numer domu). Ta precyzja decyduje, czy da sie pominac reczne pola ulicy i numeru.
type GeocodeResult = { point: LatLng; precise: boolean };

async function geocodeListingLocation(location: ListingLocation, signal: AbortSignal): Promise<GeocodeResult | null> {
  const query = locationSearchQuery(location);
  if (!location.city.trim() || query.length < 4) {
    return null;
  }
  const url = new URL('https://nominatim.openstreetmap.org/search');
  url.searchParams.set('q', query);
  url.searchParams.set('format', 'jsonv2');
  url.searchParams.set('countrycodes', 'pl');
  url.searchParams.set('addressdetails', '1');
  url.searchParams.set('accept-language', 'pl');
  url.searchParams.set('limit', '1');
  const response = await fetch(url.toString(), { signal, headers: { Accept: 'application/json' } });
  if (!response.ok) {
    throw new Error('Nie udało się odszukać adresu');
  }
  const [result] = (await response.json()) as NominatimResult[];
  if (!result) {
    return null;
  }
  return {
    point: { lat: Number(result.lat), lng: Number(result.lon) },
    precise: Boolean(result.address?.house_number),
  };
}

async function reverseGeocodeListingLocation(point: LatLng, signal: AbortSignal): Promise<Partial<ListingLocation>> {
  const url = new URL('https://nominatim.openstreetmap.org/reverse');
  url.searchParams.set('lat', String(point.lat));
  url.searchParams.set('lon', String(point.lng));
  url.searchParams.set('format', 'jsonv2');
  url.searchParams.set('addressdetails', '1');
  url.searchParams.set('accept-language', 'pl');
  url.searchParams.set('zoom', '18');
  const response = await fetch(url.toString(), { signal, headers: { Accept: 'application/json' } });
  if (!response.ok) {
    throw new Error('Nie udało się pobrać lokalizacji z mapy');
  }
  const data = (await response.json()) as NominatimResult;
  const address = data.address ?? {};
  const road = address.road ?? address.pedestrian ?? address.footway ?? address.path ?? address.cycleway ?? address.street ?? '';
  const locality = address.village ?? address.hamlet ?? address.locality ?? '';
  const street = road && !/^\d+[a-z]?$/i.test(road) ? road : locality;
  return {
    city: address.city ?? address.town ?? address.municipality ?? address.county?.replace(/^powiat\s+/i, '') ?? address.village ?? '',
    district: address.city_district ?? address.suburb ?? address.quarter ?? address.borough ?? address.district ?? '',
    estate: address.neighbourhood ?? address.residential ?? address.hamlet ?? '',
    street,
    building: address.house_number ?? '',
  };
}

const avatars = ['A', 'M', 'K', 'P', 'J'];

function getDisplayName(user: AuthUser | null): string {
  return user?.fullName?.trim() || user?.email || 'Użytkownik';
}

function getFirstName(fullName: string): string {
  const trimmed = fullName.trim();
  return trimmed.split(/\s+/)[0] || trimmed;
}

function getLastName(fullName: string): string {
  const parts = fullName.trim().split(/\s+/).filter(Boolean);
  return parts.slice(1).join(' ');
}

// Inicjaly liczy komponent awatara - to ta sama regula w kazdym miejscu aplikacji.
const getInitials = initialsFrom;

function contactPreferenceLabel(preference: ContactPreference | null | undefined): string {
  if (preference === 'EMAIL') {
    return 'E-mail';
  }
  if (preference === 'PHONE') {
    return 'Telefon';
  }
  return 'E-mail, Telefon';
}

function preferredLanguageLabel(language: PreferredLanguage | null | undefined): string {
  if (language === 'EN') {
    return 'Angielski';
  }
  if (language === 'UK') {
    return 'Ukraiński';
  }
  if (language === 'DE') {
    return 'Niemiecki';
  }
  return 'Polski';
}

function App() {
  const { user, logout, loadSearchPreferences } = useAuth();
  const { formatPrice, formatPricePerArea, areaSuffix } = useDisplay();
  const navigate = useNavigate();
  const location = useLocation();
  const navigationType = useNavigationType();
  const [favoriteListingsState, setFavoriteListingsState] = useState<FavoriteListing[]>(favoriteListings);
  const [favoritesPreferredTab, setFavoritesPreferredTab] = useState<FavoriteTab>('buy');
  const [listingPriceAlertSubscriptionsState, setListingPriceAlertSubscriptionsState] = useState<ListingPriceAlertSubscription[]>([]);
  const [unreadFavoriteIds, setUnreadFavoriteIds] = useState<Set<string>>(new Set());
  const hydratedFavoriteIdsRef = useRef<Set<number>>(new Set());
  const favoriteListingIdList = useMemo(
    () => Array.from(new Set(favoriteListingsState.map((item) => item.listingId))).sort((left, right) => left - right),
    [favoriteListingsState],
  );
  const favoriteListingIdsSignature = useMemo(() => favoriteListingIdList.join(','), [favoriteListingIdList]);
  const listingPriceAlertIdList = useMemo(
    () => Array.from(new Set(listingPriceAlertSubscriptionsState.map((item) => item.listingId))).sort((left, right) => left - right),
    [listingPriceAlertSubscriptionsState],
  );
  const listingPriceAlertIdsSignature = useMemo(() => listingPriceAlertIdList.join(','), [listingPriceAlertIdList]);
  const monitoredListingIdList = useMemo(
    () => Array.from(new Set([...favoriteListingIdList, ...listingPriceAlertIdList])).sort((left, right) => left - right),
    [favoriteListingIdList, listingPriceAlertIdList],
  );
  const monitoredListingIdsSignature = useMemo(() => monitoredListingIdList.join(','), [monitoredListingIdList]);
  const translatedOriginalTextRef = useRef<Map<Text, string>>(new Map());
  const translatedOriginalAttrRef = useRef<Map<Element, Record<string, string>>>(new Map());
  const translationObserverRef = useRef<MutationObserver | null>(null);
  const translationTimerRef = useRef<number | null>(null);
  const translationInFlightRef = useRef(false);
  const filters = useFilterState();
  const notificationsCenter = useNotifications();
  const [savedSearchesState, setSavedSearchesState] = useState<SavedSearchRecord[]>([]);

  /**
   * Preferencje wyszukiwania z ustawien konta wypelniaja filtry raz - po zalogowaniu. Pozniej
   * nic ich nie nadpisuje, wiec zmiana filtrow przez uzytkownika jest ostateczna az do wylogowania.
   * Gosc nie ma preferencji i widzi puste filtry, tak jak dotad.
   */
  const { applyPreferences } = filters;
  useEffect(() => {
    if (!user) {
      return;
    }
    let cancelled = false;
    loadSearchPreferences()
      .then((prefs) => { if (!cancelled) { applyPreferences(prefs); } })
      .catch(() => { /* brak preferencji nie moze psuc wyszukiwarki - zostaja puste filtry */ });
    return () => { cancelled = true; };
  }, [user, loadSearchPreferences, applyPreferences]);

  // Po udanym logowaniu wracamy tam, gdzie uzytkownik zmierzal (ProtectedRoute zapisuje cel
  // w location.state.from). Gdy wszedl na logowanie wprost - admin do panelu, uzytkownik do konta.
  const handleAuthenticated = (loggedUser: AuthUser) => {
    const from = (location.state as { from?: string } | null)?.from;
    const fallback = loggedUser.role === 'ADMIN' ? ROUTES.admin : ROUTES.account;
    navigate(from && from !== ROUTES.login ? from : fallback, { replace: true });
  };

  const handleLogout = () => {
    logout();
    navigate(ROUTES.home);
  };

  // Z kalkulatora zdolności: ustaw maksymalną cenę ofert na obliczony budżet i przejdź do wyszukiwarki.
  const handleSearchWithBudget = (maxPrice: number) => {
    if (maxPrice > 0) {
      filters.setCity('');
      filters.setCityInput('');
      filters.setPriceMin('');
      filters.setPriceMax(String(Math.round(maxPrice)));
    }
    navigate(ROUTES.buy);
  };

  // Zapisane wyszukiwania trzyma serwer (/api/saved-searches), wiec sa te same na kazdym
  // urzadzeniu. Wpisy zapisane wczesniej w przegladarce przenosimy raz przy pierwszym wejsciu.
  useEffect(() => {
    if (!user) {
      setSavedSearchesState([]);
      return;
    }
    let cancelled = false;
    const local = readUserJsonStorage<SavedSearchRecord[]>(user, SAVED_SEARCHES_STORAGE_SUFFIX, []);
    const load = local.length > 0
      ? apiFetch<ApiSavedSearch[]>('/saved-searches/import', { method: 'POST', body: JSON.stringify(local.map(toSavedSearchPayload)) })
        .then((items) => {
          writeUserJsonStorage<SavedSearchRecord[]>(user, SAVED_SEARCHES_STORAGE_SUFFIX, []);
          return items;
        })
      : apiFetch<ApiSavedSearch[]>('/saved-searches');
    load
      .then((items) => { if (!cancelled) { setSavedSearchesState(items.map(fromApiSavedSearch)); } })
      .catch(() => { if (!cancelled) { setSavedSearchesState([]); } });
    return () => { cancelled = true; };
  }, [user]);

  useEffect(() => {
    setFavoritesPreferredTab(readUserJsonStorage<FavoriteTab>(user, FAVORITES_PREFERRED_TAB_STORAGE_SUFFIX, 'buy'));
    setListingPriceAlertSubscriptionsState(readUserJsonStorage<ListingPriceAlertSubscription[]>(user, LISTING_PRICE_ALERTS_STORAGE_SUFFIX, []));
  }, [user]);

  // Ulubione trzyma konto (/api/listings/favorites), wiec sa te same na kazdym urzadzeniu.
  // Wpisy zapisane wczesniej w przegladarce dopisujemy raz przy pierwszym wejsciu.
  useEffect(() => {
    if (!user) {
      setFavoriteListingsState([]);
      return;
    }
    let cancelled = false;
    const local = readUserJsonStorage<FavoriteListing[]>(user, FAVORITE_LISTINGS_STORAGE_SUFFIX, []);
    const localIds = local.map((item) => item.listingId).filter((id): id is number => typeof id === 'number');
    const load = localIds.length > 0
      ? apiFetch<ApiListingSummary[]>('/listings/favorites/import', { method: 'POST', body: JSON.stringify({ listingIds: localIds }) })
        .then((items) => {
          writeUserJsonStorage<FavoriteListing[]>(user, FAVORITE_LISTINGS_STORAGE_SUFFIX, []);
          return items;
        })
      : apiFetch<ApiListingSummary[]>('/listings/favorites');
    load
      .then((items) => { if (!cancelled) { setFavoriteListingsState(items.map(toFavoriteListingFromSummary)); } })
      .catch(() => { if (!cancelled) { setFavoriteListingsState([]); } });
    return () => { cancelled = true; };
  }, [user]);


  // Zapis i usuniecie ulubionego ida na serwer pojedynczo - stan przegladarki nigdy nie
  // dyktuje serwerowi calej listy, wiec wejscie z nowego urzadzenia niczego nie kasuje.
  const saveFavoriteOnServer = (listingId: number, add: boolean) => {
    apiFetch<void>(`/listings/${listingId}/favorite`, { method: add ? 'POST' : 'DELETE' })
      .catch(() => { /* brak sieci - zmiana wroci przy nastepnym wejsciu na konto */ });
  };

  useEffect(() => {
    writeUserJsonStorage(user, FAVORITES_PREFERRED_TAB_STORAGE_SUFFIX, favoritesPreferredTab);
  }, [favoritesPreferredTab, user]);

  useEffect(() => {
    writeUserJsonStorage(user, LISTING_PRICE_ALERTS_STORAGE_SUFFIX, listingPriceAlertSubscriptionsState);
  }, [listingPriceAlertSubscriptionsState, user]);

  useEffect(() => {
    if (!user) {
      return;
    }

    let cancelled = false;
    let running = false;

    // Sprawdzanie stawki za m² dla obserwowanych lokalizacji. Wczesniej bylo zamkniete
    // bramka "raz na dobe" (lastRunKey === todayKey), przez co po zapisaniu pierwszego
    // punktu odniesienia zadna zmiana ceny tego samego dnia nie byla juz wykrywana -
    // alerty lokalizacji praktycznie nie dzialaly. Teraz chodzi cyklicznie, tak jak
    // monitoring cen pojedynczych ogloszen. Zdarzenie i tak powstaje wylacznie wtedy,
    // gdy srednia faktycznie sie zmieni, wiec czestsze sprawdzanie nie generuje szumu.
    const runCityAlertsUpdate = async () => {
      if (cancelled || running) {
        return;
      }

      const todayKey = currentLocalDayKey();
      running = true;
      try {
        const subscriptions = readUserJsonStorage<CityPriceAlertSubscription[]>(user, CITY_PRICE_ALERTS_STORAGE_SUFFIX, []);
        if (subscriptions.length === 0) {
          return;
        }

        const saleListings = await apiFetch<ApiListingSummary[]>('/listings?offerType=SALE');
        const previousSnapshots = readUserJsonStorage<Record<string, CityPriceAlertSnapshot>>(user, CITY_PRICE_ALERT_SNAPSHOTS_STORAGE_SUFFIX, {});
        const previousEvents = readUserJsonStorage<CityPriceAlertEvent[]>(user, CITY_PRICE_ALERT_EVENTS_STORAGE_SUFFIX, []);

        const nowIso = new Date().toISOString();
        const nextSnapshots: Record<string, CityPriceAlertSnapshot> = { ...previousSnapshots };
        const incomingEvents: CityPriceAlertEvent[] = [];

        subscriptions.forEach((subscription) => {
          const storageKey = cityAlertStorageKey(subscription);
          const currentPerM2 = calculateCityAlertPerM2(subscription, saleListings);
          if (currentPerM2 === null) {
            // Bez ogloszen nie ma sredniej - zostawiamy ostatni pomiar do porownania pozniej.
            return;
          }
          const previousPerM2 = previousSnapshots[storageKey]?.perM2;

          if (Number.isFinite(previousPerM2) && previousPerM2 !== currentPerM2) {
            incomingEvents.push({
              id: `${storageKey}:${todayKey}:${previousPerM2}->${currentPerM2}`,
              subscriptionKey: subscription.key,
              label: subscription.label,
              city: subscription.city,
              region: subscription.region,
              propertyType: subscription.propertyType,
              marketType: subscription.marketType,
              previousPerM2,
              currentPerM2,
              changedAt: nowIso,
            });
          }

          nextSnapshots[storageKey] = {
            dayKey: todayKey,
            perM2: currentPerM2,
            updatedAt: nowIso,
          };
        });

        writeUserJsonStorage(user, CITY_PRICE_ALERT_SNAPSHOTS_STORAGE_SUFFIX, nextSnapshots);
        if (incomingEvents.length > 0) {
          const mergedEvents = mergeCityPriceAlertEvents(incomingEvents, previousEvents);
          writeUserJsonStorage(user, CITY_PRICE_ALERT_EVENTS_STORAGE_SUFFIX, mergedEvents);

          // Powiadomienie tylko o spadku sredniej stawki - tak samo jak przy obserwowanym
          // ogloszeniu. Klucz ma prefiks "city-price-<klucz alertu>-", dzieki czemu
          // usuniecie alertu potrafi posprzatac powiazane powiadomienia.
          incomingEvents.forEach((event) => {
            if (event.currentPerM2 < event.previousPerM2) {
              const diff = event.previousPerM2 - event.currentPerM2;
              notificationsCenter.notify({
                category: 'listing',
                icon: 'coin',
                title: 'Spadek cen w lokalizacji',
                body: `Średnia cena za ${areaSuffix} w „${event.label}” spadła o ${formatPricePerArea(diff)}.`,
                link: 'priceAlerts',
                dedupeKey: `city-price-${event.subscriptionKey}-${event.currentPerM2}`,
              });
            }
          });
        }
      } catch {
        // Keep silent; updater retries on next interval.
      } finally {
        running = false;
      }
    };

    void runCityAlertsUpdate();
    const intervalId = window.setInterval(() => {
      void runCityAlertsUpdate();
    }, 60000);

    return () => {
      cancelled = true;
      window.clearInterval(intervalId);
    };
  }, [user]);

  useEffect(() => {
    if (location.pathname === ROUTES.favorites) {
      setUnreadFavoriteIds(new Set());
    }
  }, [location.pathname]);

  useEffect(() => {
    const preferred = user?.preferredLanguage ?? 'PL';
    const htmlLang = preferred === 'EN' ? 'en' : preferred === 'UK' ? 'uk' : preferred === 'DE' ? 'de' : 'pl';
    document.documentElement.lang = htmlLang;
  }, [user?.preferredLanguage]);

  useEffect(() => {
    const targetLanguage = user?.preferredLanguage ?? 'PL';
    const textNodeSources = translatedOriginalTextRef.current;
    const attrSources = translatedOriginalAttrRef.current;

    const restorePolish = () => {
      textNodeSources.forEach((source, node) => {
        if (node.isConnected) {
          node.textContent = source;
        }
      });
      attrSources.forEach((sourceAttrs, element) => {
        if (!element.isConnected) {
          return;
        }
        Object.entries(sourceAttrs).forEach(([attr, value]) => {
          element.setAttribute(attr, value);
        });
      });
    };

    const shouldTranslateSource = (value: string) => {
      const trimmed = value.trim();
      if (!trimmed) {
        return false;
      }
      // Skip pure numbers and separators.
      if (!/[a-zA-Z\u00C0-\u024F\u0400-\u04FF\u0104\u0105\u0106\u0107\u0118\u0119\u0141\u0142\u0143\u0144\u00D3\u00F3\u015A\u015B\u0179\u017A\u017B\u017C]/.test(trimmed)) {
        return false;
      }
      return true;
    };

    const collectTargets = () => {
      const textTargets: Array<{ node: Text; source: string }> = [];
      const attrTargets: Array<{ element: Element; attr: string; source: string }> = [];

      const root = document.querySelector('.site-shell') ?? document.body;
      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
      let current = walker.nextNode();
      while (current) {
        const textNode = current as Text;
        const parent = textNode.parentElement;
        if (parent && !['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA'].includes(parent.tagName)) {
          const source = textNodeSources.get(textNode) ?? textNode.textContent ?? '';
          if (!textNodeSources.has(textNode)) {
            textNodeSources.set(textNode, source);
          }
          if (shouldTranslateSource(source)) {
            textTargets.push({ node: textNode, source });
          }
        }
        current = walker.nextNode();
      }

      root.querySelectorAll('[placeholder], [title], [aria-label]').forEach((element) => {
        const tracked = attrSources.get(element) ?? {};
        ['placeholder', 'title', 'aria-label'].forEach((attr) => {
          const raw = element.getAttribute(attr);
          if (!raw) {
            return;
          }
          const source = tracked[attr] ?? raw;
          if (!tracked[attr]) {
            tracked[attr] = source;
          }
          if (shouldTranslateSource(source)) {
            attrTargets.push({ element, attr, source });
          }
        });
        if (Object.keys(tracked).length > 0) {
          attrSources.set(element, tracked);
        }
      });

      return { textTargets, attrTargets };
    };

    const translateVisibleContent = async () => {
      if (targetLanguage === 'PL') {
        restorePolish();
        return;
      }
      if (translationInFlightRef.current) {
        return;
      }

      const { textTargets, attrTargets } = collectTargets();
      const sources = Array.from(new Set([
        ...textTargets.map((item) => item.source),
        ...attrTargets.map((item) => item.source),
      ]));

      if (sources.length === 0) {
        return;
      }

      translationInFlightRef.current = true;
      try {
        const mergedTranslations: Record<string, string> = {};
        const missingForApi: string[] = [];

        sources.forEach((source) => {
          const manual = getManualTranslation(targetLanguage, source);
          if (manual != null) {
            mergedTranslations[source] = manual;
          } else if (source.length <= 380) {
            missingForApi.push(source);
          } else {
            mergedTranslations[source] = source;
          }
        });

        if (missingForApi.length > 0) {
          const fallbackChunks: string[][] = [];
          for (let index = 0; index < missingForApi.length; index += 150) {
            fallbackChunks.push(missingForApi.slice(index, index + 150));
          }

          for (const chunk of fallbackChunks) {
            const response = await apiFetch<{ language: PreferredLanguage; translations: Record<string, string> }>('/i18n/translate', {
              method: 'POST',
              body: JSON.stringify({ language: targetLanguage, texts: chunk }),
            });
            Object.assign(mergedTranslations, response.translations);
          }
        }

        textTargets.forEach(({ node, source }) => {
          if (!node.isConnected) {
            return;
          }
          const translated = mergedTranslations[source];
          if (translated && node.textContent !== translated) {
            node.textContent = translated;
          }
        });

        attrTargets.forEach(({ element, attr, source }) => {
          if (!element.isConnected) {
            return;
          }
          const translated = mergedTranslations[source];
          if (translated) {
            element.setAttribute(attr, translated);
          }
        });
      } catch {
        // If translation fails, leave original text untouched.
      } finally {
        translationInFlightRef.current = false;
      }
    };

    const queueTranslate = () => {
      if (translationTimerRef.current != null) {
        window.clearTimeout(translationTimerRef.current);
      }
      translationTimerRef.current = window.setTimeout(() => {
        void translateVisibleContent();
      }, 80);
    };

    translationObserverRef.current?.disconnect();
    if (targetLanguage === 'PL') {
      restorePolish();
      return;
    }

    queueTranslate();
    const observer = new MutationObserver(() => {
      queueTranslate();
    });
    observer.observe(document.body, {
      childList: true,
      subtree: true,
      characterData: true,
      attributes: true,
      attributeFilter: ['placeholder', 'title', 'aria-label'],
    });
    translationObserverRef.current = observer;

    return () => {
      observer.disconnect();
      translationObserverRef.current = null;
      if (translationTimerRef.current != null) {
        window.clearTimeout(translationTimerRef.current);
        translationTimerRef.current = null;
      }
    };
  }, [user?.preferredLanguage, location.pathname]);

  // Miasto i typ oferty trafiaja do query stringa - wynik na mapie da sie udostepnic linkiem.
  const openMap = (name: string, source: 'buy' | 'rent' = 'buy') => {
    navigate(mapPath(name, source === 'rent' ? 'RENT' : 'SALE'));
  };

  const openListing = (id: number) => {
    navigate(listingPath(id));
  };

  // Rozmowa o ogloszeniu ma wlasny adres - identyfikator ogloszenia w URL, nie w stanie nawigacji.
  const openMessagesWithTarget = (target: MessageThreadTarget) => {
    navigate(newConversationPath(target.listing.listingId));
  };

  // Klik w powiadomienie: oznacz jako przeczytane (znika z dzwonka, licznik -1) i przejdź do właściwego miejsca.
  const handleOpenNotification = (notification: ServerNotification | DisplayNotification) => {
    notificationsCenter.markRead(notification.id);
    const link = notification.link;
    if (!link) {
      navigate(ROUTES.notifications);
      return;
    }
    if (link.startsWith('listing:')) {
      const id = Number(link.slice('listing:'.length));
      if (Number.isFinite(id) && id > 0) {
        openListing(id);
        return;
      }
    }
    if (link.startsWith('messages:conversation:')) {
      const id = Number(link.slice('messages:conversation:'.length));
      navigate(Number.isFinite(id) && id > 0 ? conversationPath(id) : ROUTES.messages);
      return;
    }
    if (link === 'messages:admin') {
      navigate(conversationPath(ADMIN_CONVERSATION_SLUG));
      return;
    }
    if (link.startsWith('messages')) {
      navigate(ROUTES.messages);
      return;
    }
    if (link === 'priceAlerts') {
      navigate(ROUTES.accountPriceAlerts);
      return;
    }
    if (link === 'meetings') {
      navigate(ROUTES.accountMeetings);
      return;
    }
    if (link === 'savedSearches') {
      navigate(ROUTES.accountSearches);
      return;
    }
    if (link === 'favorites') {
      navigate(ROUTES.favorites);
      return;
    }
    // Powiadomienia sprzed scalenia stron moga wskazywac na accountSecurity - to teraz sekcja ustawien.
    if (link === 'accountSecurity') {
      navigate(ROUTES.accountSettings);
      return;
    }
    if (link === 'accountSettings' || link === 'account' || link === 'accountListings') {
      navigate(ROUTES[link]);
      return;
    }
    navigate(ROUTES.notifications);
  };

  const toggleSavedSearch = (mode: SavedSearchMode) => {
    if (!user) {
      navigate(ROUTES.login);
      return;
    }

    const draft = buildSavedSearchDraft(mode, filters);
    const existing = savedSearchesState.find((item) => sameSavedSearchCriteria(item, draft));
    if (existing) {
      removeSavedSearch(existing.id);
      return;
    }
    apiFetch<ApiSavedSearch>('/saved-searches', { method: 'POST', body: JSON.stringify(toSavedSearchPayload(draft)) })
      .then((saved) => {
        const record = fromApiSavedSearch(saved);
        setSavedSearchesState((current) => (
          current.some((item) => item.id === record.id) ? current : [record, ...current].slice(0, SAVED_SEARCHES_LIMIT)
        ));
      })
      .catch(() => { /* brak sieci - lista zostaje bez zmian, uzytkownik moze sprobowac ponownie */ });
  };

  const openSavedSearch = (savedSearch: SavedSearchRecord) => {
    applySavedSearchToFilters(filters, savedSearch);
    navigate(savedSearch.mode === 'rent' ? ROUTES.rent : ROUTES.buy);
  };

  const removeSavedSearch = (savedSearchId: string) => {
    setSavedSearchesState((current) => current.filter((item) => item.id !== savedSearchId));
    apiFetch<void>(`/saved-searches/${encodeURIComponent(savedSearchId)}`, { method: 'DELETE' })
      .catch(() => { /* usuniecie na serwerze nie wyszlo - wroci przy nastepnym wejsciu */ });
  };

  const buySearchSaved = savedSearchesState.some((item) => sameSavedSearchCriteria(item, buildSavedSearchDraft('buy', filters)));
  const rentSearchSaved = savedSearchesState.some((item) => sameSavedSearchCriteria(item, buildSavedSearchDraft('rent', filters)));

  const isListingFavorite = (listingId: number) => (
    favoriteListingsState.some((item) => item.id === favoriteListingKey(listingId))
  );

  const toggleListingFavorite = (listing: ApiListingDetail) => {
    const listingKey = favoriteListingKey(listing.id);
    const alreadyFavorite = favoriteListingsState.some((item) => item.id === listingKey);
    saveFavoriteOnServer(listing.id, !alreadyFavorite);
    if (!alreadyFavorite) {
      notificationsCenter.notify({
        category: 'listing',
        icon: 'heart',
        title: 'Ogłoszenie zapisane',
        body: `„${listing.title}” zostało zapisane do ulubionych.`,
        link: `listing:${listing.id}`,
        dedupeKey: `favorite-${listing.id}`,
      });
    }
    setFavoriteListingsState((current) => {
      const exists = current.some((item) => item.id === listingKey);
      if (exists) {
        setUnreadFavoriteIds((prev) => {
          if (!prev.has(listingKey)) {
            return prev;
          }
          const next = new Set(prev);
          next.delete(listingKey);
          return next;
        });
        return current.filter((item) => item.id !== listingKey);
      }
      setFavoritesPreferredTab(favoriteTabFromOfferType(listing.offerType));
      setUnreadFavoriteIds((prev) => {
        const next = new Set(prev);
        next.add(listingKey);
        return next;
      });
      return [toFavoriteListing(listing), ...current];
    });
  };

  const isListingPriceAlertEnabled = (listingId: number) => (
    listingPriceAlertSubscriptionsState.some((item) => item.listingId === listingId)
  );

  const toggleListingPriceAlert = (listing: ApiListingDetail) => {
    const listingLocation = [listing.city, listing.district].filter(Boolean).join(', ');
    setListingPriceAlertSubscriptionsState((current) => {
      const exists = current.some((item) => item.listingId === listing.id);
      if (exists) {
        return current.filter((item) => item.listingId !== listing.id);
      }
      const next: ListingPriceAlertSubscription = {
        listingId: listing.id,
        title: listing.title,
        location: listingLocation || listing.city,
        offerType: listing.offerType,
        createdAt: new Date().toISOString(),
      };
      return [next, ...current];
    });
  };

  // Usuniecie i przelaczanie powiadomien z poziomu /konto/alerty-cenowe. Stan subskrypcji
  // ogloszen zyje tutaj (efekt nizej zapisuje go do localStorage), wiec strona alertow
  // modyfikuje go przez te funkcje zamiast pisac po magazynie na wlasna reke.
  // Usuniecie alertu kasuje caly slad po nim: subskrypcje, zarejestrowane zmiany ceny,
  // punkt odniesienia oraz powiadomienia w centrum - tak, jakby alertu nigdy nie bylo.
  const removeListingPriceAlert = (listingId: number) => {
    setListingPriceAlertSubscriptionsState((current) => current.filter((item) => item.listingId !== listingId));

    if (user) {
      const events = readUserJsonStorage<FavoritePriceAlertEvent[]>(user, FAVORITE_PRICE_ALERTS_STORAGE_SUFFIX, []);
      writeUserJsonStorage(
        user,
        FAVORITE_PRICE_ALERTS_STORAGE_SUFFIX,
        events.filter((event) => event.listingId !== listingId),
      );

      const snapshots = readUserJsonStorage<Record<string, number>>(user, FAVORITE_PRICE_SNAPSHOTS_STORAGE_SUFFIX, {});
      delete snapshots[String(listingId)];
      writeUserJsonStorage(user, FAVORITE_PRICE_SNAPSHOTS_STORAGE_SUFFIX, snapshots);
    }

    // Powiadomienia o zmianie ceny tego ogloszenia maja klucz "price-<id>-<cena>".
    notificationsCenter.dismissByDedupePrefix(`price-${listingId}-`);
  };

  const toggleListingPriceAlertNotifications = (listingId: number) => {
    setListingPriceAlertSubscriptionsState((current) => current.map((item) => (
      item.listingId === listingId
        ? { ...item, notificationsEnabled: item.notificationsEnabled === false }
        : item
    )));
  };

  const toggleSummaryFavorite = async (listing: ApiListingSummary) => {
    const listingKey = favoriteListingKey(listing.id);
    const exists = favoriteListingsState.some((item) => item.id === listingKey);
    saveFavoriteOnServer(listing.id, !exists);
    if (exists) {
      setUnreadFavoriteIds((prev) => {
        if (!prev.has(listingKey)) {
          return prev;
        }
        const next = new Set(prev);
        next.delete(listingKey);
        return next;
      });
      setFavoriteListingsState((current) => current.filter((item) => item.id !== listingKey));
      return;
    }

    setFavoritesPreferredTab(favoriteTabFromOfferType(listing.offerType));

    try {
      const fullListing = await apiFetch<ApiListingDetail>(`/listings/${listing.id}`);
      const nextFavorite = toFavoriteListing(fullListing);
      setFavoriteListingsState((current) => {
        if (current.some((item) => item.id === listingKey)) {
          return current;
        }
        setUnreadFavoriteIds((prev) => {
          const next = new Set(prev);
          next.add(listingKey);
          return next;
        });
        return [nextFavorite, ...current];
      });
    } catch {
      const fallbackFavorite = toFavoriteListingFromSummary(listing);
      setFavoriteListingsState((current) => {
        if (current.some((item) => item.id === listingKey)) {
          return current;
        }
        setUnreadFavoriteIds((prev) => {
          const next = new Set(prev);
          next.add(listingKey);
          return next;
        });
        return [fallbackFavorite, ...current];
      });
    }
  };

  useEffect(() => {
    const toHydrate = favoriteListingsState
      .filter((item) => item.photos <= 1 && !hydratedFavoriteIdsRef.current.has(item.listingId))
      .map((item) => item.listingId);

    if (toHydrate.length === 0) {
      return;
    }

    toHydrate.forEach((listingId) => hydratedFavoriteIdsRef.current.add(listingId));
    let cancelled = false;

    Promise.all(
      toHydrate.map(async (listingId) => {
        try {
          return await apiFetch<ApiListingDetail>(`/listings/${listingId}`);
        } catch {
          return null;
        }
      }),
    ).then((resolved) => {
      if (cancelled) {
        return;
      }

      const hydratedById = new Map<number, FavoriteListing>();
      resolved.forEach((listing) => {
        if (listing) {
          hydratedById.set(listing.id, toFavoriteListing(listing));
        }
      });

      if (hydratedById.size === 0) {
        return;
      }

      setFavoriteListingsState((current) => current.map((item) => {
        const hydrated = hydratedById.get(item.listingId);
        if (!hydrated) {
          return item;
        }
        return {
          ...item,
          ...hydrated,
          id: item.id,
          listingId: item.listingId,
        };
      }));
    });

    return () => {
      cancelled = true;
    };
  }, [favoriteListingsState]);

  useEffect(() => {
    if (!user || monitoredListingIdList.length === 0) {
      return;
    }

    let cancelled = false;
    let snapshots = readUserJsonStorage<Record<string, number>>(user, FAVORITE_PRICE_SNAPSHOTS_STORAGE_SUFFIX, {});
    const alertListingIdSet = new Set(listingPriceAlertIdList);

    const syncFavoritePrices = async () => {
      const refreshed = await Promise.all(
        monitoredListingIdList.map(async (listingId) => {
          try {
            return await apiFetch<ApiListingDetail>(`/listings/${listingId}`);
          } catch {
            return null;
          }
        }),
      );

      if (cancelled) {
        return;
      }

      const nowIso = new Date().toISOString();
      const incomingEvents: FavoritePriceAlertEvent[] = [];
      const nextSnapshots = { ...snapshots };
      const refreshedFavorites = new Map<number, FavoriteListing>();

      refreshed.forEach((listing) => {
        if (!listing) {
          return;
        }

        const listingIdKey = String(listing.id);
        const previousPrice = nextSnapshots[listingIdKey];
        const currentPrice = Number(listing.price);
        if (Number.isFinite(currentPrice)) {
          if (alertListingIdSet.has(listing.id) && Number.isFinite(previousPrice) && previousPrice !== currentPrice) {
            const location = [listing.city, listing.district].filter(Boolean).join(', ');
            incomingEvents.push({
              id: `${listing.id}:${previousPrice}->${currentPrice}`,
              listingId: listing.id,
              title: listing.title,
              location: location || listing.city,
              area: `${`${listing.area}`.replace('.', ',')} m²`,
              offerType: listing.offerType,
              previousPrice,
              currentPrice,
              changedAt: nowIso,
            });
          }
          nextSnapshots[listingIdKey] = currentPrice;
        }

        refreshedFavorites.set(listing.id, toFavoriteListing(listing));
      });

      snapshots = nextSnapshots;
      writeUserJsonStorage(user, FAVORITE_PRICE_SNAPSHOTS_STORAGE_SUFFIX, nextSnapshots);

      if (incomingEvents.length > 0) {
        const existingEvents = readUserJsonStorage<FavoritePriceAlertEvent[]>(user, FAVORITE_PRICE_ALERTS_STORAGE_SUFFIX, []);
        const merged = mergePriceAlertEvents(incomingEvents, existingEvents);
        writeUserJsonStorage(user, FAVORITE_PRICE_ALERTS_STORAGE_SUFFIX, merged);

        // Powiadomienie tylko o spadku ceny obserwowanego ogloszenia.
        incomingEvents.forEach((event) => {
          if (event.currentPrice < event.previousPrice) {
            const diff = event.previousPrice - event.currentPrice;
            notificationsCenter.notify({
              category: 'listing',
              icon: 'coin',
              title: 'Zmiana ceny',
              body: `Cena „${event.title}” spadła o ${formatPrice(diff)}.`,
              link: `listing:${event.listingId}`,
              dedupeKey: `price-${event.listingId}-${event.currentPrice}`,
            });
          }
        });
      }

      if (refreshedFavorites.size > 0) {
        setFavoriteListingsState((current) => current.map((item) => {
          const refreshedItem = refreshedFavorites.get(item.listingId);
          if (!refreshedItem) {
            return item;
          }
          return {
            ...item,
            ...refreshedItem,
            id: item.id,
            listingId: item.listingId,
          };
        }));
      }
    };

    void syncFavoritePrices();
    const intervalId = window.setInterval(() => {
      void syncFavoritePrices();
    }, 45000);

    return () => {
      cancelled = true;
      window.clearInterval(intervalId);
    };
  }, [user, monitoredListingIdList, monitoredListingIdsSignature, listingPriceAlertIdList, listingPriceAlertIdsSignature]);

  // Wejscie na nowa trase zaczynamy od gory strony. Przy cofaniu (POP) zostawiamy
  // pozycje przegladarce, zeby powrot do listy ofert wracal w to samo miejsce.
  useEffect(() => {
    if (navigationType !== 'POP') {
      window.scrollTo({ top: 0, behavior: 'auto' });
    }
  }, [location.pathname, navigationType]);

  return (
    <div className={`site-shell ${LOGIN_PAGE_PATHS.has(location.pathname) ? 'login-shell' : ''}`}>
      <Header onLogout={handleLogout} hasUnreadFavorites={unreadFavoriteIds.size > 0} onOpenNotification={handleOpenNotification} />
      <main>
        <Routes>
          {/* Trasy publiczne */}
          <Route path={ROUTES.home} element={<HomePage filters={filters} onOpenMap={openMap} />} />
          {/* Logowanie i rejestracja: kazdy krok pod wlasnym adresem, jeden komponent. */}
          {Object.values(LOGIN_STEP_PATHS).map((path) => (
            <Route key={path} path={path} element={<LoginPage onLogin={handleAuthenticated} />} />
          ))}
          <Route path={ROUTES.terms} element={<TermsPage />} />
          <Route path={ROUTES.privacy} element={<PrivacyPolicyPage />} />
          <Route path={ROUTES.activation} element={<ActivationPage />} />
          <Route path={ROUTES.passwordReset} element={<PasswordResetPage />} />
          <Route
            path={ROUTES.buy}
            element={(
              <BuyPage
                filters={filters}
                onOpenMap={openMap}
                onOpenListing={openListing}
                isFavorite={isListingFavorite}
                onToggleFavorite={toggleSummaryFavorite}
                savedSearchActive={buySearchSaved}
                onToggleSavedSearch={() => toggleSavedSearch('buy')}
              />
            )}
          />
          <Route
            path={ROUTES.rent}
            element={(
              <RentPage
                filters={filters}
                onOpenMap={openMap}
                onOpenListing={openListing}
                isFavorite={isListingFavorite}
                onToggleFavorite={toggleSummaryFavorite}
                savedSearchActive={rentSearchSaved}
                onToggleSavedSearch={() => toggleSavedSearch('rent')}
              />
            )}
          />
          <Route
            path={ROUTES.listingDetail}
            element={(
              <ListingDetailRoute
                onStartChat={openMessagesWithTarget}
                isFavorite={isListingFavorite}
                onToggleFavorite={toggleListingFavorite}
                isListingAlertEnabled={isListingPriceAlertEnabled}
                onToggleListingAlert={toggleListingPriceAlert}
              />
            )}
          />
          <Route path={ROUTES.map} element={<MapSearchRoute />} />
          <Route path={ROUTES.sell} element={<SellPage />} />
          <Route path={ROUTES.creditCalculator} element={<CreditCalculatorPage onSearchWithBudget={handleSearchWithBudget} />} />

          {/* Narzedzia dostepne publicznie (jak /kupno), ale otwierane takze z lewego
              menu konta. AccountShell pokazuje menu tylko zalogowanemu, a goscia
              przepuszcza do samej strony - dzieki temu menu nie znika po kliknieciu. */}
          <Route element={<AccountShell />}>
            {VALUATION_STEP_PATHS.map((path) => (
              <Route key={path} path={path} element={<ValuationPage />} />
            ))}
            <Route path={ROUTES.priceHistory} element={<PriceHistoryPage user={user} />} />
            <Route path={ROUTES.districtRanking} element={<DistrictRankingPage />} />
            <Route path={ROUTES.negotiation} element={<NegotiationPage />} />
            <Route path={ROUTES.negotiationListing} element={<NegotiationPage />} />
          </Route>

          <Route path={ROUTES.services} element={<ServicesPage />} />
          <Route path={ROUTES.companies} element={<CompaniesPage />} />
          <Route path={ROUTES.advertising} element={<AdvertisingPage />} />
          <Route path={ROUTES.guides} element={<GuidesPage />} />
          <Route path={ROUTES.guideBuying} element={<GuideBuyingPage />} />
          <Route path={ROUTES.guideCredit} element={<GuideArticleTemplate content={guideContents[ROUTES.guideCredit]} />} />
          <Route path={ROUTES.guideRent} element={<GuideArticleTemplate content={guideContents[ROUTES.guideRent]} />} />
          <Route path={ROUTES.guideInvesting} element={<GuideArticleTemplate content={guideContents[ROUTES.guideInvesting]} />} />
          <Route path={ROUTES.guideRenovation} element={<GuideArticleTemplate content={guideContents[ROUTES.guideRenovation]} />} />
          <Route path={ROUTES.guideLaw} element={<GuideArticleTemplate content={guideContents[ROUTES.guideLaw]} />} />
          <Route path={ROUTES.guideTopicList} element={<GuideTopicListPage />} />
          <Route path={ROUTES.guideArticle} element={<GuideArticlePage />} />

          {/* Trasy wymagajace zalogowania */}
          <Route element={<ProtectedRoute />}>
            <Route path={ROUTES.payment} element={<PaymentRedirectPage />} />
            <Route path={ROUTES.guideAdd} element={<GuideAddArticlePage />} />
            <Route path={ROUTES.account} element={<AccountDashboardPage savedSearches={savedSearchesState} onOpenSavedSearch={openSavedSearch} />} />
            <Route
              path={ROUTES.accountSearches}
              element={(
                <AccountSavedSearchesPage
                  savedSearches={savedSearchesState}
                  onOpenSavedSearch={openSavedSearch}
                  onRemoveSavedSearch={removeSavedSearch}
                />
              )}
            />
            <Route
              path={ROUTES.accountPriceAlerts}
              element={(
                <AccountPriceAlertsPage
                  user={user}
                  onOpenListing={openListing}
                  listingAlerts={listingPriceAlertSubscriptionsState}
                  onRemoveListingAlert={removeListingPriceAlert}
                  onToggleListingAlertNotifications={toggleListingPriceAlertNotifications}
                />
              )}
            />
            <Route path={ROUTES.comparison} element={<AccountComparisonPage onOpenListing={openListing} />} />
            <Route path={ROUTES.accountMeetings} element={<AccountMeetingsPage />} />
            <Route path={ROUTES.accountListings} element={<AccountListingsPage onOpenListing={openListing} />} />
            <Route path={ROUTES.accountSettings} element={<AccountSettingsPage onSearchPreferencesSaved={applyPreferences} />} />
            {/* Bezpieczenstwo i edycja profilu sa teraz sekcjami /konto/ustawienia - stare adresy
                zostaja jako przekierowania, zeby zapisane linki i zakladki dalej dzialaly. */}
            <Route path={ROUTES.accountSecurity} element={<Navigate to={ROUTES.accountSettings} replace />} />
            <Route path={ROUTES.accountProfileEdit} element={<Navigate to={ROUTES.accountSettings} replace />} />
            <Route path={ROUTES.accountPublicProfile} element={<AccountPublicProfilePage />} />
            <Route path={ROUTES.accountHelpContact} element={<AccountHelpContactPage user={user} />} />
            <Route path={ROUTES.publicProfile} element={<PublicProfilePage />} />
            <Route path={ROUTES.publicProfileByNick} element={<PublicProfilePage />} />
            <Route path={ROUTES.add} element={<AddListingPage />} />
            <Route path={ROUTES.edit} element={<AddListingEditRoute />} />

            {/* Pozostale pozycje lewego menu konta - ten sam uklad co /konto/wyszukiwania */}
            <Route element={<AccountShell />}>
              <Route path={ROUTES.notifications} element={<NotificationsPage onOpenNotification={handleOpenNotification} />} />
              <Route path={ROUTES.messages} element={<MessagesPage onOpenListing={openListing} />} />
              <Route path={ROUTES.messagesConversation} element={<MessagesPage onOpenListing={openListing} />} />
              <Route path={ROUTES.messagesNew} element={<MessagesPage onOpenListing={openListing} />} />
              <Route
                path={ROUTES.favorites}
                element={(
                  <FavoritesPage
                    onOpenListing={openListing}
                    onStartChat={openMessagesWithTarget}
                    favoritesState={favoriteListingsState}
                    setFavoritesState={setFavoriteListingsState}
                    preferredTab={favoritesPreferredTab}
                  />
                )}
              />
            </Route>
          </Route>

          {/* Panel administratora - zakladki jako podsciezki /admin/* */}
          <Route element={<ProtectedRoute requireAdmin />}>
            <Route path={`${ROUTES.admin}/*`} element={<AdminPage />} />
          </Route>

          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </main>
      <SiteFooter />
      <CookieBanner />
    </div>
  );
}

// Szczegoly oferty: identyfikator pochodzi z adresu (/oferta/:id), nie ze stanu Reacta.
// Dzieki temu link do oferty da sie wyslac, odswiezyc i otworzyc w nowej karcie.
function ListingDetailRoute(props: {
  onStartChat: (target: MessageThreadTarget) => void;
  isFavorite: (listingId: number) => boolean;
  onToggleFavorite: (listing: ApiListingDetail) => void;
  isListingAlertEnabled: (listingId: number) => boolean;
  onToggleListingAlert: (listing: ApiListingDetail) => void;
}) {
  const { id } = useParams<{ id: string }>();
  const listingId = Number(id);

  if (!Number.isFinite(listingId) || listingId <= 0) {
    return <NotFoundPage />;
  }

  return <ListingDetailPage listingId={listingId} {...props} />;
}

// Dedykowana strona edycji ogloszenia: /edytuj-ogloszenie/:id. Identyfikator z adresu,
// dane pobierane z API i wczytywane do kreatora (ten sam formularz co dodawanie, tryb edycji).
function AddListingEditRoute() {
  const { id } = useParams<{ id: string }>();
  const listingId = Number(id);

  if (!Number.isFinite(listingId) || listingId <= 0) {
    return <NotFoundPage />;
  }

  return <AddListingPage editListingId={listingId} />;
}

// Mapa czyta miasto i typ oferty z query stringa (/mapa?miasto=Krakow&typ=wynajem).
function MapSearchRoute() {
  const [searchParams] = useSearchParams();
  const city = searchParams.get('miasto') ?? '';
  const offerType: ApiOfferType = searchParams.get('typ') === 'wynajem' ? 'RENT' : 'SALE';

  return <MapSearchPage key={`${city}-${offerType}`} initialCity={city} offerType={offerType} />;
}

// Nieznany adres: czytelny komunikat zamiast pustego ekranu.
function NotFoundPage() {
  return (
    <section className="not-found-page" aria-label="Nie znaleziono strony">
      <div className="not-found-shell">
        <h1>404</h1>
        <h2>Nie znaleźliśmy tej strony</h2>
        <p>Adres jest nieprawidłowy albo strona została przeniesiona.</p>
        <div className="not-found-actions">
          <Link className="not-found-primary" to={ROUTES.home}>Wróć na stronę główną</Link>
          <Link className="not-found-secondary" to={ROUTES.buy}>Przeglądaj oferty</Link>
        </div>
      </div>
    </section>
  );
}

type AdminListing = {
  id: number;
  title: string;
  city: string;
  offerType: 'SALE' | 'RENT';
  propertyType: 'APARTMENT' | 'HOUSE';
  price: number;
  area: number;
  rooms: number;
  ownerEmail: string | null;
  status: 'PENDING' | 'APPROVED' | 'REJECTED';
  createdAt: string;
};

type AdminListingReportAttachment = {
  fileName: string;
  fileType: string | null;
  dataUrl: string | null;
};

/**
 * Wspolny ksztalt dla okna "Szczegoly zgloszenia" - to samo okno obsluguje zgloszenia ogloszen
 * i uzytkownikow, rozni je tylko opis zglaszanego obiektu (subject*) i notatka o jego stanie.
 */
type AdminReportDetails = {
  id: number;
  status: 'OPEN' | 'RESOLVED';
  reasonId: string;
  reasonTitle: string;
  reporterName: string | null;
  reporterEmail: string;
  createdAt: string;
  details: string | null;
  attachmentNames: string[];
  attachments?: AdminListingReportAttachment[];
  // Kafelki opisujace zgloszenie - roznia sie miedzy zgloszeniem ogloszenia a uzytkownika.
  facts: { label: string; title: string; meta: string }[];
  listingId: number | null;
  conversation?: AdminUserReportMessage[];
  conversationPartner?: string;
};

function toReportDetails(report: AdminListingReport): AdminReportDetails {
  return {
    ...report,
    facts: [
      { label: 'Ogłoszenie', title: report.listingTitle, meta: `${report.listingCity} • ID: ${report.listingId}` },
      {
        label: 'Data zgłoszenia',
        title: formatAdminDate(report.createdAt),
        meta: report.listingDeleted ? 'Ogłoszenie zostało usunięte.' : 'Ogłoszenie nadal aktywne w systemie.',
      },
    ],
    // Usunietego ogloszenia nie ma juz czego podgladac - wtedy okno nie pokazuje tego przycisku.
    listingId: report.listingDeleted ? null : report.listingId,
  };
}

function toUserReportDetails(report: AdminUserReport): AdminReportDetails {
  const accountState = report.reportedUserDeleted
    ? 'Konto zostało usunięte.'
    : (report.reportedUserExists ? 'Konto nadal aktywne w serwisie.' : 'Zgłoszony nie ma konta w serwisie.');

  const facts = [
    {
      label: 'Zgłoszony użytkownik',
      title: report.reportedName,
      meta: report.reportedEmail ?? 'Brak konta powiązanego z rozmową',
    },
    { label: 'Data zgłoszenia', title: formatAdminDate(report.createdAt), meta: accountState },
  ];

  if (report.listingTitle || report.listingId !== null) {
    facts.push({
      label: 'Ogłoszenie z rozmowy',
      title: report.listingTitle ?? 'Ogłoszenie bez tytułu',
      meta: report.listingId !== null ? `ID: ${report.listingId}` : 'Rozmowa bez powiązanego ogłoszenia',
    });
  }

  return {
    ...report,
    facts,
    listingId: report.listingId,
    conversation: report.conversation,
    conversationPartner: report.reportedName,
  };
}

type AdminSupportMessage = {
  id: number;
  fullName: string;
  email: string;
  topic: string;
  content: string;
  accountEmail: string;
  handled: boolean;
  handledAt: string | null;
  handledByEmail: string | null;
  createdAt: string;
};

/** Zgloszenie z formularza reklamowego (/reklama) w widoku administratora. */
type AdminAdvertisingEnquiry = {
  id: number;
  fullName: string;
  companyName: string;
  email: string;
  phone: string;
  serviceCategory: string;
  message: string | null;
  handled: boolean;
  handledAt: string | null;
  handledByEmail: string | null;
  createdAt: string;
};

type AdminUserReportMessage = {
  fromReporter: boolean;
  content: string | null;
  sentAt: string | null;
  hasPhoto: boolean;
};

type AdminUserReport = {
  id: number;
  reportedName: string;
  reportedEmail: string | null;
  conversationId: string | null;
  listingId: number | null;
  listingTitle: string | null;
  conversation: AdminUserReportMessage[];
  reportedUserDeleted: boolean;
  reasonId: string;
  reasonTitle: string;
  details: string | null;
  attachmentNames: string[];
  attachments?: AdminListingReportAttachment[];
  reporterEmail: string;
  reporterName: string | null;
  status: 'OPEN' | 'RESOLVED';
  reportedUserExists: boolean;
  createdAt: string;
  resolvedAt: string | null;
  resolvedByEmail: string | null;
  resolutionNote: string | null;
};

type AdminListingReport = {
  id: number;
  listingId: number;
  listingTitle: string;
  listingCity: string;
  listingOwnerEmail: string | null;
  reasonId: string;
  reasonTitle: string;
  details: string | null;
  attachmentNames: string[];
  attachments?: AdminListingReportAttachment[];
  reporterEmail: string;
  reporterName: string | null;
  status: 'OPEN' | 'RESOLVED';
  listingDeleted: boolean;
  createdAt: string;
  resolvedAt: string | null;
  resolvedByEmail: string | null;
  resolutionNote: string | null;
};

type ForbiddenWord = {
  id: number;
  word: string;
};

type AdminResetPasswordResponse = {
  temporaryPassword: string;
};

type AdminStatsResponse = {
  periodDays: number;
  generatedAt: string;
  summary: {
    activeListings: number;
    pendingListings: number;
    totalUsers: number;
    pendingVerificationUsers: number;
    openReports: number;
    messagesToAdminTotal: number;
    blockedUsers: number;
  };
  period: {
    messagesToAdmin: number;
    newListings: number;
    newReports: number;
    newPersonalAccounts: number;
    newCompanyAccounts: number;
  };
  daily: {
    date: string;
    messagesToAdmin: number;
    newListings: number;
    newReports: number;
    newPersonalAccounts: number;
    newCompanyAccounts: number;
  }[];
};

const ADMIN_STATS_PERIOD_OPTIONS = [
  { days: 1, label: 'Dziś' },
  { days: 7, label: '7 dni' },
  { days: 14, label: '14 dni' },
  { days: 30, label: '30 dni' },
] as const;

type AdminStatsPeriodMode = 'preset' | 'custom';

const ADMIN_STATUS_LABELS: Record<AdminListing['status'], string> = {
  PENDING: 'Oczekuje',
  APPROVED: 'Zatwierdzone',
  REJECTED: 'Odrzucone',
};

const ADMIN_REPORT_STATUS_LABELS: Record<AdminListingReport['status'], string> = {
  OPEN: 'Otwarte',
  RESOLVED: 'Rozpatrzone',
};

const ADMIN_OFFER_LABELS: Record<AdminListing['offerType'], string> = {
  SALE: 'Sprzedaż',
  RENT: 'Wynajem',
};

const ADMIN_PROPERTY_LABELS: Record<AdminListing['propertyType'], string> = {
  APARTMENT: 'Mieszkanie',
  HOUSE: 'Dom',
};

function formatAdminDate(iso: string): string {
  const date = new Date(iso);
  if (Number.isNaN(date.getTime())) {
    return '-';
  }
  return date.toLocaleDateString('pl-PL', { day: '2-digit', month: '2-digit', year: 'numeric' });
}
function toDateInputValue(date: Date): string {
  const year = date.getFullYear();
  const month = `${date.getMonth() + 1}`.padStart(2, '0');
  const day = `${date.getDate()}`.padStart(2, '0');
  return `${year}-${month}-${day}`;
}
type AdminStatsQuickRange = '' | 'today' | 'last7' | 'last14' | 'last30';

function accountStorageKey(suffix: string, user: AuthUser | null): string {
  return `accountProfile:${user?.id ?? 'guest'}:${suffix}`;
}

// Zakladki panelu maja odpowiedniki w sciezkach /admin/* - jedno zrodlo prawdy w routes.ts.
type AdminTab = AdminTabKey;

const ADMIN_TAB_META: Record<AdminTab, { title: string; subtitle: string }> = {
  dashboard: { title: 'Panel administratora', subtitle: 'Zarządzaj ogłoszeniami i użytkownikami serwisu.' },
  listings: { title: 'Ogłoszenia', subtitle: 'Przeglądaj, zatwierdzaj i usuwaj ogłoszenia użytkowników.' },
  users: { title: 'Użytkownicy', subtitle: 'Zarządzaj kontami zarejestrowanych użytkowników.' },
  messages: { title: 'Wiadomości', subtitle: 'Podgląd wiadomości wymienianych między użytkownikami.' },
  support: { title: 'Pomoc i kontakt', subtitle: 'Wiadomości wysłane przez formularz „Napisz do nas” na stronie pomocy.' },
  advertisingEnquiries: { title: 'Zapytania o reklamę', subtitle: 'Zgłoszenia firm z formularza na stronie „Jeszcze nie mamy tej usługi” (/reklama).' },
  reports: { title: 'Zgłoszenia', subtitle: 'Zgłoszenia dotyczące ogłoszeń i użytkowników wymagające uwagi.' },
  articleRequests: { title: 'Poradniki - prośby', subtitle: 'Propozycje artykułów od użytkowników oczekujące na akceptację lub odrzucenie.' },
  payments: { title: 'Płatności i promowanie', subtitle: 'Plany i pakiety promowania ofert, konfiguracja AutoPay oraz historia płatności.' },
  stats: { title: 'Statystyki', subtitle: 'Statystyki aktywności i ruchu w serwisie.' },
  settings: { title: 'Ustawienia serwisu', subtitle: 'Globalna konfiguracja serwisu Polska Lokalnie.' },
  moderation: { title: 'Weryfikacja ogłoszeń', subtitle: 'Kolejka ogłoszeń oczekujących na moderację.' },
  categories: { title: 'Kategorie', subtitle: 'Zarządzaj kategoriami i typami nieruchomości.' },
  locations: { title: 'Lokalizacje', subtitle: 'Zarządzaj obsługiwanymi miastami i dzielnicami.' },
  promotions: { title: 'Banery i promocje', subtitle: 'Zarządzaj banerami reklamowymi i promocjami.' },
  forbiddenWords: { title: 'Zakazane słowa', subtitle: 'Lista wszystkich niedozwolonych słów używanych przez globalny filtr treści.' },
  leads: { title: 'Leady', subtitle: 'Baza kontaktów marketingowych i grupy docelowe (dynamiczne segmenty).' },
  campaigns: { title: 'Kampanie marketingowe', subtitle: 'Twórz i wysyłaj kampanie e-mail oraz SMS do grup docelowych.' },
  smtpConfig: { title: 'Konfiguracja SMTP', subtitle: 'Ustawienia skrzynki e-mail (SMTP) dla kampanii i powiadomień.' },
  smsConfig: { title: 'Bramka SMS', subtitle: 'Ustawienia bramki SMS dla kampanii i powiadomień.' },
};

const ADMIN_NAV_ITEMS: { id: AdminTab; icon: string; label: string }[] = [
  { id: 'dashboard', icon: 'house', label: 'Panel główny' },
  { id: 'listings', icon: 'document', label: 'Ogłoszenia' },
  { id: 'users', icon: 'user', label: 'Użytkownicy' },
  { id: 'messages', icon: 'message', label: 'Wiadomości' },
  { id: 'support', icon: 'mail', label: 'Pomoc i kontakt' },
  { id: 'advertisingEnquiries', icon: 'megaphone', label: 'Zapytania o reklamę' },
  { id: 'reports', icon: 'warning', label: 'Zgłoszenia' },
  { id: 'articleRequests', icon: 'document', label: 'Poradniki - prośby' },
  { id: 'leads', icon: 'user', label: 'Leady' },
  { id: 'campaigns', icon: 'mail', label: 'Kampanie marketingowe' },
  { id: 'payments', icon: 'credit-card', label: 'Płatności' },
  { id: 'stats', icon: 'chart', label: 'Statystyki' },
  { id: 'settings', icon: 'gear', label: 'Ustawienia serwisu' },
];

const ADMIN_TOOL_ITEMS: { id: AdminTab; icon: string; label: string }[] = [
  { id: 'moderation', icon: 'check', label: 'Weryfikacja ogłoszeń' },
  { id: 'smtpConfig', icon: 'mail', label: 'Konfiguracja SMTP' },
  { id: 'smsConfig', icon: 'message', label: 'Bramka SMS' },
  { id: 'forbiddenWords', icon: 'shield', label: 'Zakazane słowa' },
  { id: 'categories', icon: 'list', label: 'Kategorie' },
  { id: 'locations', icon: 'pin', label: 'Lokalizacje' },
  { id: 'promotions', icon: 'spark', label: 'Banery i promocje' },
];

function AdminPlaceholderCard({ icon, label }: { icon: string; label: string }) {
  return (
    <div className="admin-card admin-placeholder">
      <span><Icon name={icon} /></span>
      <strong>{label}</strong>
      <p>Ta sekcja jest w przygotowaniu i pojawi się w kolejnej aktualizacji panelu.</p>
    </div>
  );
}

type AdminMessage = {
  id: number;
  senderId: number;
  recipientId: number;
  content: string;
  createdAt: string;
  mine: boolean;
};

type AdminMessageThread = {
  user: AuthUser;
  lastMessage: AdminMessage;
  totalMessages: number;
  awaitingAdminReply: number;
};

function AdminMessageModal({ user, onClose }: { user: AuthUser; onClose: () => void }) {
  const [messages, setMessages] = useState<AdminMessage[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [draft, setDraft] = useState('');
  const [sending, setSending] = useState(false);
  const listRef = useRef<HTMLDivElement | null>(null);

  const loadMessages = useCallback(async (silent = false) => {
    if (!silent) {
      setLoading(true);
    }
    setError(null);
    try {
      const data = await apiFetch<AdminMessage[]>(`/admin/users/${user.id}/messages`);
      setMessages(data);
    } catch (err) {
      if (!silent) {
        setError(err instanceof Error ? err.message : 'Nie udało się pobrać wiadomości.');
      }
    } finally {
      if (!silent) {
        setLoading(false);
      }
    }
  }, [user.id]);

  useEffect(() => {
    loadMessages();
  }, [loadMessages]);

  useEffect(() => {
    const intervalId = window.setInterval(() => {
      loadMessages(true);
    }, 4000);
    return () => window.clearInterval(intervalId);
  }, [loadMessages]);

  useEffect(() => {
    if (listRef.current) {
      listRef.current.scrollTop = listRef.current.scrollHeight;
    }
  }, [messages]);

  const handleSend = async () => {
    const content = draft.trim();
    if (!content || sending) {
      return;
    }
    setSending(true);
    setError(null);
    try {
      const sent = await apiFetch<AdminMessage>(`/admin/users/${user.id}/messages`, {
        method: 'POST',
        body: JSON.stringify({ content }),
      });
      setMessages((current) => [...current, sent]);
      setDraft('');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Nie udało się wysłać wiadomości.');
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="listing-delete-overlay" role="dialog" aria-modal="true" aria-label="Wiadomość do użytkownika">
      <div className="admin-message-modal">
        <button type="button" className="listing-delete-close" aria-label="Zamknij" onClick={onClose}>×</button>
        <h2>Wiadomość do: {user.fullName || user.email}</h2>
        <p className="admin-verify-subtitle">{user.email}</p>
        <button type="button" className="admin-message-refresh" onClick={() => loadMessages()}>
          Odśwież
        </button>

        {error && <p className="admin-message-error">{error}</p>}

        <div className="admin-message-list" ref={listRef}>
          {loading ? (
            <p className="admin-empty">Wczytywanie wiadomości...</p>
          ) : messages.length === 0 ? (
            <p className="admin-empty">Brak wiadomości. Napisz pierwszą wiadomość do tego użytkownika.</p>
          ) : (
            messages.map((message) => (
              <div key={message.id} className={message.mine ? 'admin-message-bubble mine' : 'admin-message-bubble'}>
                <p>{message.content}</p>
                <small>{new Date(message.createdAt).toLocaleString('pl-PL', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })}</small>
              </div>
            ))
          )}
        </div>

        <div className="admin-message-composer">
          <textarea
            value={draft}
            onChange={(event) => setDraft(event.target.value)}
            placeholder="Napisz wiadomość do użytkownika..."
            rows={3}
          />
          <button type="button" className="admin-btn approve" disabled={sending || !draft.trim()} onClick={handleSend}>
            {sending ? 'Wysyłanie...' : 'Wyślij'}
          </button>
        </div>
      </div>
    </div>
  );
}

function AdminPage() {
  const { user } = useAuth();
  // Aktywna zakladka wynika z adresu (/admin/leady), nie ze stanu komponentu -
  // dzieki temu kazda sekcja panelu ma wlasny URL, dziala F5 i przycisk Wstecz.
  const adminSegment = useParams()['*'] ?? '';
  const tab: AdminTab = ADMIN_PATH_TO_TAB[adminSegment] ?? 'dashboard';
  const isUnknownAdminSection = adminSegment !== '' && !(adminSegment in ADMIN_PATH_TO_TAB);
  const [users, setUsers] = useState<AuthUser[]>([]);
  const [listings, setListings] = useState<AdminListing[]>([]);
  const [reports, setReports] = useState<AdminListingReport[]>([]);
  const [userReports, setUserReports] = useState<AdminUserReport[]>([]);
  const [forbiddenWords, setForbiddenWords] = useState<ForbiddenWord[]>([]);
  const [newForbiddenWord, setNewForbiddenWord] = useState('');
  const [savingForbiddenWord, setSavingForbiddenWord] = useState(false);
  const [forbiddenSearch, setForbiddenSearch] = useState('');
  const [userSearch, setUserSearch] = useState('');
  const [deletingWordId, setDeletingWordId] = useState<number | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [busyId, setBusyId] = useState<string | null>(null);
  const [verificationUser, setVerificationUser] = useState<AuthUser | null>(null);
  const [messageUser, setMessageUser] = useState<AuthUser | null>(null);
  const [previewListingId, setPreviewListingId] = useState<number | null>(null);
  const [detailsReport, setDetailsReport] = useState<AdminReportDetails | null>(null);
  const [messageThreads, setMessageThreads] = useState<AdminMessageThread[]>([]);
  const [messageThreadsLoading, setMessageThreadsLoading] = useState(false);
  const [messageThreadsError, setMessageThreadsError] = useState<string | null>(null);
  // Wiadomosci z formularza "Napisz do nas" (/konto/pomoc) - osobna lista od czatu z uzytkownikiem.
  const [supportMessages, setSupportMessages] = useState<AdminSupportMessage[]>([]);
  const [advertisingEnquiries, setAdvertisingEnquiries] = useState<AdminAdvertisingEnquiry[]>([]);
  const [statsPeriodDays, setStatsPeriodDays] = useState<number>(1);
  const [statsPeriodMode, setStatsPeriodMode] = useState<AdminStatsPeriodMode>('preset');
  const [statsCustomFrom, setStatsCustomFrom] = useState<string>('');
  const [statsCustomTo, setStatsCustomTo] = useState<string>('');
  const [statsQuickRange, setStatsQuickRange] = useState<AdminStatsQuickRange>('');
  const [adminStats, setAdminStats] = useState<AdminStatsResponse | null>(null);
  const [statsLoading, setStatsLoading] = useState(false);
  const [statsError, setStatsError] = useState<string | null>(null);

  // silent = odswiezenie w tle: bez chowania tabel za komunikat "Ladowanie danych".
  const loadData = useCallback(async (options?: { silent?: boolean }) => {
    if (!options?.silent) {
      setLoading(true);
    }
    setError(null);
    try {
      const [loadedUsers, loadedListings, loadedReports, loadedUserReports, loadedForbiddenWords] = await Promise.all([
        apiFetch<AuthUser[]>('/admin/users'),
        apiFetch<AdminListing[]>('/admin/listings'),
        apiFetch<AdminListingReport[]>('/admin/reports'),
        apiFetch<AdminUserReport[]>('/admin/reports/users'),
        apiFetch<ForbiddenWord[]>('/admin/forbidden-words'),
      ]);
      setUsers(loadedUsers);
      setListings(loadedListings);
      setReports(loadedReports);
      setUserReports(loadedUserReports);
      setForbiddenWords(loadedForbiddenWords);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Nie udało się pobrać danych panelu.');
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    loadData();
  }, [loadData]);

  /**
   * Panel pobiera dane przy wejsciu, ale administrator zwykle zostawia go otwartego i przelacza
   * sie na inne okna. Gdy wraca do karty, dociagamy dane od nowa - inaczej ogladalby stan sprzed
   * zmian, ktore uzytkownicy zrobili w miedzyczasie (np. poprawione imie albo numer telefonu).
   * Odswiezamy po powrocie, a nie w kolku - odpowiedz z ogloszeniami wazy kilkaset kilobajtow.
   */
  useEffect(() => {
    const refreshWhenBack = () => {
      if (document.visibilityState === 'visible') {
        void loadData({ silent: true });
      }
    };
    window.addEventListener('focus', refreshWhenBack);
    document.addEventListener('visibilitychange', refreshWhenBack);
    return () => {
      window.removeEventListener('focus', refreshWhenBack);
      document.removeEventListener('visibilitychange', refreshWhenBack);
    };
  }, [loadData]);

  const runAction = async (actionKey: string, action: () => Promise<unknown>) => {
    setBusyId(actionKey);
    setError(null);
    try {
      await action();
      await loadData();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Operacja nie powiodła się.');
    } finally {
      setBusyId(null);
    }
  };

  const openUserPreview = useCallback(async (id: number) => {
    try {
      const freshUsers = await apiFetch<AuthUser[]>('/admin/users');
      setUsers(freshUsers);
      setVerificationUser(freshUsers.find((item) => item.id === id) ?? null);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Nie udało się pobrać danych użytkownika.');
    }
  }, []);

  const loadSupportMessages = useCallback(async () => {
    try {
      setSupportMessages(await apiFetch<AdminSupportMessage[]>('/admin/support-messages'));
    } catch {
      setSupportMessages([]);
    }
  }, []);

  useEffect(() => {
    void loadSupportMessages();
  }, [loadSupportMessages]);

  // Liczba propozycji artykułów oczekujących na moderację - badge przy zakładce "Poradniki - prośby".
  const [pendingArticleCount, setPendingArticleCount] = useState(0);
  const loadPendingArticleCount = useCallback(async () => {
    try {
      const data = await apiFetch<{ count: number }>('/admin/articles/pending-count');
      setPendingArticleCount(data?.count ?? 0);
    } catch {
      setPendingArticleCount(0);
    }
  }, []);

  useEffect(() => {
    void loadPendingArticleCount();
  }, [loadPendingArticleCount]);

  const loadAdvertisingEnquiries = useCallback(async () => {
    try {
      setAdvertisingEnquiries(await apiFetch<AdminAdvertisingEnquiry[]>('/admin/advertising-enquiries'));
    } catch {
      setAdvertisingEnquiries([]);
    }
  }, []);

  useEffect(() => {
    void loadAdvertisingEnquiries();
  }, [loadAdvertisingEnquiries]);

  const loadMessageThreads = useCallback(async (silent = false) => {
    const regularUsers = users.filter((item) => item.role !== 'ADMIN');
    if (regularUsers.length === 0) {
      setMessageThreads([]);
      setMessageThreadsError(null);
      setMessageThreadsLoading(false);
      return;
    }

    if (!silent) {
      setMessageThreadsLoading(true);
    }
    setMessageThreadsError(null);

    try {
      const conversations = await Promise.allSettled(
        regularUsers.map((item) => apiFetch<AdminMessage[]>(`/admin/users/${item.id}/messages`)),
      );

      const mappedThreads: AdminMessageThread[] = [];

      conversations.forEach((result, index) => {
        if (result.status !== 'fulfilled') {
          return;
        }

        const conversation = result.value;
        if (conversation.length === 0) {
          return;
        }

        const lastMessage = conversation[conversation.length - 1];
        let awaitingAdminReply = 0;
        for (let cursor = conversation.length - 1; cursor >= 0; cursor -= 1) {
          if (conversation[cursor].mine) {
            break;
          }
          awaitingAdminReply += 1;
        }

        mappedThreads.push({
          user: regularUsers[index],
          lastMessage,
          totalMessages: conversation.length,
          awaitingAdminReply,
        });
      });

      mappedThreads.sort((left, right) => new Date(right.lastMessage.createdAt).getTime() - new Date(left.lastMessage.createdAt).getTime());
      setMessageThreads(mappedThreads);

      if (conversations.every((entry) => entry.status === 'rejected')) {
        setMessageThreadsError('Nie udało się pobrać wiadomości użytkowników.');
      }
    } catch (err) {
      setMessageThreadsError(err instanceof Error ? err.message : 'Nie udało się pobrać wiadomości użytkowników.');
    } finally {
      if (!silent) {
        setMessageThreadsLoading(false);
      }
    }
  }, [users]);

  useEffect(() => {
    if (tab !== 'messages' || loading) {
      return;
    }

    loadMessageThreads();
    const intervalId = window.setInterval(() => {
      void loadMessageThreads(true);
    }, 5000);

    return () => window.clearInterval(intervalId);
  }, [tab, loading, loadMessageThreads]);

  const loadStats = useCallback(async (silent = false) => {
    if (!silent) {
      setStatsLoading(true);
    }
    setStatsError(null);
    try {
      const query = new URLSearchParams();
      if (statsPeriodMode === 'custom') {
        if (statsCustomFrom) {
          query.set('from', statsCustomFrom);
        }
        if (statsCustomTo) {
          query.set('to', statsCustomTo);
        }
        if (!statsCustomFrom && !statsCustomTo) {
          query.set('days', String(statsPeriodDays));
        }
      } else {
        query.set('days', String(statsPeriodDays));
      }

      const data = await apiFetch<AdminStatsResponse>(`/admin/stats?${query.toString()}`);
      setAdminStats(data);
    } catch (err) {
      setStatsError(err instanceof Error ? err.message : 'Nie udało się pobrać statystyk.');
    } finally {
      if (!silent) {
        setStatsLoading(false);
      }
    }
  }, [statsPeriodDays, statsPeriodMode, statsCustomFrom, statsCustomTo]);

  useEffect(() => {
    if (tab !== 'stats' || loading) {
      return;
    }

    loadStats();
    const intervalId = window.setInterval(() => {
      void loadStats(true);
    }, 10000);

    return () => window.clearInterval(intervalId);
  }, [tab, loading, loadStats]);

  const pendingCount = listings.filter((item) => item.status === 'PENDING').length;
  const pendingVerificationCount = users.filter((item) => item.role !== 'ADMIN' && !item.verified).length;
  // Licznik na zakladce obejmuje oba rodzaje zgloszen - ogloszen i uzytkownikow.
  const pendingReportsCount = reports.filter((item) => item.status === 'OPEN').length
    + userReports.filter((item) => item.status === 'OPEN').length;
  const newSupportMessagesCount = supportMessages.filter((item) => !item.handled).length;
  const newAdvertisingEnquiriesCount = advertisingEnquiries.filter((item) => !item.handled).length;
  // Konto, z ktorego wyslano formularz - po nim otwieramy czat z uzytkownikiem.
  const supportMessageAuthor = (message: AdminSupportMessage) => users.find(
    (item) => item.email.toLowerCase() === message.accountEmail.toLowerCase(),
  ) ?? null;

  const isImageReportAttachment = (attachment: AdminListingReportAttachment) => {
    if (attachment.fileType && attachment.fileType.toLowerCase().startsWith('image/')) {
      return true;
    }
    return /^data:image\//.test(attachment.dataUrl ?? '');
  };

  const recentListings = useMemo(
    () => [...listings]
      .sort((left, right) => new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime())
      .slice(0, 5),
    [listings],
  );

  const recentUsers = useMemo(
    () => [...users]
      .sort((left, right) => new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime())
      .slice(0, 5),
    [users],
  );

  const activeMeta = ADMIN_TAB_META[tab];
  const formattedGeneratedAt = adminStats
    ? new Date(adminStats.generatedAt).toLocaleString('pl-PL', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' })
    : null;
  const applyQuickStatsRange = useCallback((range: AdminStatsQuickRange) => {
    if (!range) {
      return;
    }
    const today = new Date();
    const to = new Date(today);
    const from = new Date(today);
    if (range === 'last7') {
      from.setDate(from.getDate() - 6);
    } else if (range === 'last14') {
      from.setDate(from.getDate() - 13);
    } else if (range === 'last30') {
      from.setDate(from.getDate() - 29);
    }

    setStatsPeriodMode('custom');
    setStatsCustomFrom(toDateInputValue(from));
    setStatsCustomTo(toDateInputValue(to));
    setStatsQuickRange(range);
  }, []);
  const statsHeadingLabel = useMemo(() => {
    if (!adminStats) {
      return statsPeriodMode === 'custom' ? 'Wybrany okres' : (statsPeriodDays === 1 ? 'Dziś' : `Ostatnie ${statsPeriodDays} dni`);
    }
    return statsPeriodMode === 'custom'
      ? 'Wybrany okres'
      : (adminStats.periodDays === 1 ? 'Dziś' : `Ostatnie ${adminStats.periodDays} dni`);
  }, [adminStats, statsPeriodDays, statsPeriodMode]);

  const handleAddForbiddenWord = async () => {
    const word = newForbiddenWord.trim();
    if (!word || savingForbiddenWord) {
      return;
    }

    setSavingForbiddenWord(true);
    setError(null);
    try {
      const updatedWords = await apiFetch<ForbiddenWord[]>('/admin/forbidden-words', {
        method: 'POST',
        body: JSON.stringify({ word }),
      });
      setForbiddenWords(updatedWords);
      setNewForbiddenWord('');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Nie udało się dodać słowa.');
    } finally {
      setSavingForbiddenWord(false);
    }
  };

  const handleDeleteForbiddenWord = async (item: ForbiddenWord) => {
    if (deletingWordId !== null) {
      return;
    }
    setDeletingWordId(item.id);
    setError(null);
    try {
      await apiFetch(`/admin/forbidden-words/${item.id}`, { method: 'DELETE' });
      setForbiddenWords((current) => current.filter((word) => word.id !== item.id));
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Nie udało się usunąć słowa.');
    } finally {
      setDeletingWordId(null);
    }
  };

  const foldText = (value: string) =>
    value.toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, '');
  const normalizedForbiddenSearch = foldText(forbiddenSearch.trim());
  const filteredForbiddenWords = normalizedForbiddenSearch
    ? forbiddenWords.filter((item) => foldText(item.word).includes(normalizedForbiddenSearch))
    : forbiddenWords;

  const normalizedUserSearch = foldText(userSearch.trim());
  const filteredUsers = normalizedUserSearch
    ? users.filter((item) => {
      const normalizedEmail = foldText(item.email);
      const normalizedName = foldText(item.fullName || '');
      return normalizedEmail.includes(normalizedUserSearch) || normalizedName.includes(normalizedUserSearch);
    })
    : users;

  const handleGrantAdmin = async (item: AuthUser) => {
    const shouldGrantAdmin = window.confirm(`Czy na pewno chcesz nadać rolę administratora użytkownikowi ${item.fullName || item.email}?`);
    if (!shouldGrantAdmin) {
      return;
    }
    await runAction(`grant-admin-${item.id}`, () => apiFetch(`/admin/users/${item.id}/grant-admin`, { method: 'POST' }));
  };

  const handleRevokeAdmin = async (item: AuthUser) => {
    const shouldRevokeAdmin = window.confirm(`Czy na pewno chcesz odebrać rolę administratora użytkownikowi ${item.fullName || item.email}?`);
    if (!shouldRevokeAdmin) {
      return;
    }
    await runAction(`revoke-admin-${item.id}`, () => apiFetch(`/admin/users/${item.id}/revoke-admin`, { method: 'POST' }));
  };

  const handleResetPassword = async (item: AuthUser) => {
    const shouldResetPassword = window.confirm(`Czy zresetować hasło użytkownika ${item.fullName || item.email}?`);
    if (!shouldResetPassword) {
      return;
    }

    setBusyId(`reset-password-${item.id}`);
    setError(null);
    try {
      const response = await apiFetch<AdminResetPasswordResponse>(`/admin/users/${item.id}/reset-password`, { method: 'POST' });
      window.alert(`Nowe hasło tymczasowe dla ${item.email}: ${response.temporaryPassword}`);
      await loadData();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Nie udało się zresetować hasła.');
    } finally {
      setBusyId(null);
    }
  };

  if (isUnknownAdminSection) {
    return <NotFoundPage />;
  }

  return (
    <section className="admin-page admin-page-shell" aria-label="Panel administratora">
      <div className="admin-shell admin-shell-with-sidebar">
        <aside className="admin-sidebar">
          <span className="admin-badge admin-sidebar-badge"><Icon name="shield" /> Administrator</span>

          <nav className="admin-nav">
            {ADMIN_NAV_ITEMS.map((item) => (
              <NavLink
                key={item.id}
                to={adminTabPath(item.id)}
                end={item.id === 'dashboard'}
                className={navLinkClass}
              >
                <Icon name={item.icon} /> {item.label}
                {item.id === 'listings' && pendingCount > 0 && <b>{pendingCount}</b>}
                {item.id === 'users' && pendingVerificationCount > 0 && <b>{pendingVerificationCount}</b>}
                {item.id === 'reports' && pendingReportsCount > 0 && <b>{pendingReportsCount}</b>}
                {item.id === 'support' && newSupportMessagesCount > 0 && <b>{newSupportMessagesCount}</b>}
                {item.id === 'articleRequests' && pendingArticleCount > 0 && <b>{pendingArticleCount}</b>}
                {item.id === 'advertisingEnquiries' && newAdvertisingEnquiriesCount > 0 && <b>{newAdvertisingEnquiriesCount}</b>}
              </NavLink>
            ))}
          </nav>

          <p className="admin-nav-group-label">Narzędzia</p>
          <nav className="admin-nav">
            {ADMIN_TOOL_ITEMS.map((item) => (
              <NavLink key={item.id} to={adminTabPath(item.id)} className={navLinkClass}>
                <Icon name={item.icon} /> {item.label}
              </NavLink>
            ))}
          </nav>

          <div className="admin-sidebar-status">
            <strong><Icon name="shield" /> System działa poprawnie</strong>
            <p>Wszystkie usługi działają bez zarzutu.</p>
            <button type="button" onClick={() => loadData()}>Odśwież status <Icon name="arrow" /></button>
          </div>

          <Link className="admin-back" to={ROUTES.home}>
            <Icon name="arrow" /> Wróć do strony głównej
          </Link>
        </aside>

        <div className="admin-main">
          <header className="admin-head">
            <div>
              <h1>{activeMeta.title}</h1>
              <p>Zalogowano jako <strong>{user?.fullName || user?.email}</strong>. {activeMeta.subtitle}</p>
            </div>
            <button type="button" className="admin-refresh" onClick={() => loadData()} disabled={loading}>
              <Icon name="shuffle" /> Odśwież
            </button>
          </header>

          {error && <p className="admin-error" role="alert">{error}</p>}
          {loading && <p className="admin-empty">Ładowanie danych…</p>}

          {!loading && tab === 'dashboard' && (
            <div className="admin-dashboard">
              <div className="admin-stats-grid">
                <article className="admin-stat-card">
                  <span className="admin-stat-icon tone-green"><Icon name="document" /></span>
                  <div>
                    <strong>{listings.length.toLocaleString('pl-PL')}</strong>
                    <small>Łączna liczba ogłoszeń</small>
                  </div>
                </article>
                <article className="admin-stat-card">
                  <span className="admin-stat-icon tone-blue"><Icon name="user" /></span>
                  <div>
                    <strong>{users.length.toLocaleString('pl-PL')}</strong>
                    <small>Zarejestrowani użytkownicy</small>
                  </div>
                </article>
                <article className="admin-stat-card">
                  <span className="admin-stat-icon tone-yellow"><Icon name="eye" /></span>
                  <div>
                    <strong>{pendingCount.toLocaleString('pl-PL')}</strong>
                    <small>Ogłoszenia oczekujące</small>
                  </div>
                </article>
                <article className="admin-stat-card">
                  <span className="admin-stat-icon tone-purple"><Icon name="message" /></span>
                  <div>
                    <strong>-</strong>
                    <small>Wiadomości (wkrótce)</small>
                  </div>
                </article>
                <article className="admin-stat-card">
                  <span className="admin-stat-icon tone-pink"><Icon name="warning" /></span>
                  <div>
                    <strong>{pendingReportsCount.toLocaleString('pl-PL')}</strong>
                    <small>Otwarte zgłoszenia</small>
                  </div>
                </article>
              </div>

              <div className="admin-dashboard-grid">
                <section className="admin-card admin-recent-listings">
                  <div className="admin-card-head">
                    <h2>Ostatnie ogłoszenia</h2>
                    <Link to={adminTabPath('listings')}>Zobacz wszystkie <Icon name="arrow" /></Link>
                  </div>
                  {recentListings.length === 0 ? (
                    <p className="admin-empty">Brak ogłoszeń do wyświetlenia.</p>
                  ) : (
                    <div className="admin-table admin-table-compact" role="table">
                      <div className="admin-row admin-row-head" role="row">
                        <span>Ogłoszenie</span>
                        <span>Cena</span>
                        <span>Autor</span>
                        <span>Status</span>
                      </div>
                      {recentListings.map((item) => (
                        <div className="admin-row" role="row" key={item.id}>
                          <span className="admin-cell-main">
                            <strong>{item.title}</strong>
                            <small>{item.city} • {formatAdminDate(item.createdAt)}</small>
                          </span>
                          <span>{item.price.toLocaleString('pl-PL')} zł</span>
                          <span className="admin-cell-owner">{item.ownerEmail || '-'}</span>
                          <span><em className={`admin-status ${item.status.toLowerCase()}`}>{ADMIN_STATUS_LABELS[item.status]}</em></span>
                        </div>
                      ))}
                    </div>
                  )}
                </section>

                <section className="admin-card admin-recent-users">
                  <div className="admin-card-head">
                    <h2>Aktywność użytkowników</h2>
                    <Link to={adminTabPath('users')}>Zobacz wszystkich <Icon name="arrow" /></Link>
                  </div>
                  {recentUsers.length === 0 ? (
                    <p className="admin-empty">Brak użytkowników do wyświetlenia.</p>
                  ) : (
                    <ul className="admin-activity-list">
                      {recentUsers.map((item) => (
                        <li key={item.id}>
                          <span className="admin-activity-avatar">{(item.fullName || item.email).slice(0, 1).toUpperCase()}</span>
                          <div>
                            <strong>{item.fullName || item.email}</strong>
                            <small>Dołączył(a) do serwisu</small>
                          </div>
                          <em>{formatAdminDate(item.createdAt)}</em>
                        </li>
                      ))}
                    </ul>
                  )}
                </section>
              </div>

              <section className="admin-card admin-quick-actions">
                <div className="admin-card-head">
                  <h2>Szybkie akcje</h2>
                </div>
                <div className="admin-quick-actions-grid">
                  <Link to={ROUTES.add}><Icon name="document" /> Dodaj nowe ogłoszenie <Icon name="arrow" /></Link>
                  <Link to={adminTabPath('categories')}><Icon name="list" /> Zarządzaj kategoriami <Icon name="arrow" /></Link>
                  <Link to={adminTabPath('locations')}><Icon name="pin" /> Zarządzaj lokalizacjami <Icon name="arrow" /></Link>
                  <Link to={adminTabPath('promotions')}><Icon name="spark" /> Zarządzaj banerami <Icon name="arrow" /></Link>
                </div>
              </section>
            </div>
          )}

          {!loading && tab === 'reports' && (
            <div className="admin-card">
              <h2 className="admin-section-title">Zgłoszenia ogłoszeń</h2>
              {reports.length === 0 ? (
                <p className="admin-empty">Brak zgłoszeń ogłoszeń.</p>
              ) : (
                <div className="admin-table admin-table-reports" role="table">
                  <div className="admin-row admin-row-head admin-row-report" role="row">
                    <span>Zgłoszenie</span>
                    <span>Ogłoszenie</span>
                    <span>Zgłaszający</span>
                    <span>Status</span>
                    <span>Zostaw ogłoszenie</span>
                    <span>Usuń ogłoszenie</span>
                    <span>Akcje</span>
                  </div>
                  {reports.map((item) => (
                    <div className="admin-row admin-row-report" role="row" key={item.id}>
                      <span className="admin-cell-main">
                        <strong>{item.reasonTitle}</strong>
                        <small>
                          #{item.id} • {formatAdminDate(item.createdAt)}
                          {item.details ? ` • ${item.details}` : ''}
                          {item.attachmentNames.length > 0 ? ` • Załączniki: ${item.attachmentNames.join(', ')}` : ''}
                        </small>
                      </span>
                      <span className="admin-cell-main">
                        <strong>{item.listingTitle}</strong>
                        <small>
                          {item.listingCity} • ID: {item.listingId}
                          {item.listingOwnerEmail ? ` • ${item.listingOwnerEmail}` : ''}
                          {item.listingDeleted ? ' • Usunięte' : ''}
                        </small>
                      </span>
                      <span className="admin-cell-main">
                        <strong>{item.reporterName || item.reporterEmail}</strong>
                        <small>{item.reporterEmail}</small>
                      </span>
                      <span>
                        <em className={`admin-status ${item.status === 'OPEN' ? 'pending' : 'approved'}`}>
                          {ADMIN_REPORT_STATUS_LABELS[item.status]}
                        </em>
                        {item.resolvedAt && (
                          <small style={{ display: 'block', marginTop: 4 }}>
                            {formatAdminDate(item.resolvedAt)}{item.resolvedByEmail ? ` • ${item.resolvedByEmail}` : ''}
                            {item.resolutionNote ? ` • ${item.resolutionNote}` : ''}
                          </small>
                        )}
                      </span>
                      <span>
                        {item.status !== 'RESOLVED' ? (
                          <button
                            type="button"
                            className="admin-btn approve"
                            disabled={busyId === `report-${item.id}`}
                            onClick={() => runAction(`report-${item.id}`, () => apiFetch(`/admin/reports/${item.id}/resolve`, { method: 'POST', body: JSON.stringify({ note: 'Po weryfikacji: ogłoszenie zostaje.' }) }))}
                          >
                            Zostaw ogłoszenie
                          </button>
                        ) : '-'}
                      </span>
                      <span>
                        {!item.listingDeleted && (
                          <button
                            type="button"
                            className="admin-btn danger"
                            disabled={busyId === `report-${item.id}`}
                            onClick={() => {
                              const shouldDelete = window.confirm('Czy na pewno chcesz usunąć to ogłoszenie? Tej operacji nie można cofnąć.');
                              if (!shouldDelete) {
                                return;
                              }
                              runAction(`report-${item.id}`, () => apiFetch(`/admin/reports/${item.id}/delete-listing`, { method: 'POST' }));
                            }}
                          >
                            Usuń ogłoszenie
                          </button>
                        )}
                        {item.listingDeleted && '-'}
                      </span>
                      <span className="admin-actions">
                        <button
                          type="button"
                          className="admin-btn view"
                          onClick={() => setDetailsReport(toReportDetails(item))}
                        >
                          Szczegóły zgłoszenia
                        </button>
                        {!item.listingDeleted && (
                          <button
                            type="button"
                            className="admin-btn view"
                            onClick={() => setPreviewListingId(item.listingId)}
                          >
                            Podgląd ogłoszenia
                          </button>
                        )}
                      </span>
                    </div>
                  ))}
                </div>
              )}

              <h2 className="admin-section-title">Zgłoszenia użytkowników</h2>
              {userReports.length === 0 ? (
                <p className="admin-empty">Brak zgłoszeń użytkowników.</p>
              ) : (
                <div className="admin-table admin-table-user-reports" role="table">
                  <div className="admin-row admin-row-head admin-row-user-report" role="row">
                    <span>Zgłoszenie</span>
                    <span>Zgłoszony</span>
                    <span>Zgłaszający</span>
                    <span>Status</span>
                    <span>Akcje</span>
                  </div>
                  {userReports.map((item) => (
                    <div className="admin-row admin-row-user-report" role="row" key={item.id}>
                      <span className="admin-cell-main">
                        <strong>{item.reasonTitle}</strong>
                        <small>
                          #{item.id} • {formatAdminDate(item.createdAt)}
                          {item.details ? ` • ${item.details}` : ''}
                          {item.attachmentNames.length > 0 ? ` • Załączniki: ${item.attachmentNames.join(', ')}` : ''}
                        </small>
                      </span>
                      <span className="admin-cell-main">
                        <strong>{item.reportedName}</strong>
                        <small>
                          {item.reportedEmail ?? 'Brak konta powiązanego z rozmową'}
                          {item.listingTitle ? ` • Ogłoszenie: ${item.listingTitle}` : ''}
                          {item.reportedUserDeleted ? ' • Konto usunięte' : ''}
                        </small>
                      </span>
                      <span className="admin-cell-main">
                        <strong>{item.reporterName || item.reporterEmail}</strong>
                        <small>{item.reporterEmail}</small>
                      </span>
                      <span>
                        <em className={`admin-status ${item.status === 'OPEN' ? 'pending' : 'approved'}`}>
                          {ADMIN_REPORT_STATUS_LABELS[item.status]}
                        </em>
                        {item.resolvedAt && (
                          <small style={{ display: 'block', marginTop: 4 }}>
                            {formatAdminDate(item.resolvedAt)}{item.resolvedByEmail ? ` • ${item.resolvedByEmail}` : ''}
                            {item.resolutionNote ? ` • ${item.resolutionNote}` : ''}
                          </small>
                        )}
                      </span>
                      <span className="admin-actions">
                        <button
                          type="button"
                          className="admin-btn view"
                          onClick={() => setDetailsReport(toUserReportDetails(item))}
                        >
                          Szczegóły zgłoszenia
                        </button>
                        {item.status !== 'RESOLVED' && (
                          <button
                            type="button"
                            className="admin-btn approve"
                            disabled={busyId === `user-report-${item.id}`}
                            onClick={() => runAction(`user-report-${item.id}`, () => apiFetch(`/admin/reports/users/${item.id}/resolve`, { method: 'POST', body: JSON.stringify({ note: 'Po weryfikacji: konto zostaje.' }) }))}
                          >
                            Zostaw konto
                          </button>
                        )}
                        {item.listingId !== null && (
                          <button
                            type="button"
                            className="admin-btn view"
                            onClick={() => setPreviewListingId(item.listingId as number)}
                          >
                            Podgląd ogłoszenia
                          </button>
                        )}
                        {item.reportedUserExists && (
                          <button
                            type="button"
                            className="admin-btn danger"
                            disabled={busyId === `user-report-${item.id}`}
                            onClick={() => {
                              const shouldDelete = window.confirm(`Czy na pewno usunąć konto ${item.reportedEmail}? Tej operacji nie można cofnąć.`);
                              if (!shouldDelete) {
                                return;
                              }
                              runAction(`user-report-${item.id}`, () => apiFetch(`/admin/reports/users/${item.id}/delete-user`, { method: 'POST' }));
                            }}
                          >
                            Usuń konto
                          </button>
                        )}
                      </span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          {!loading && tab === 'listings' && (
            <div className="admin-card">
              {listings.length === 0 ? (
                <p className="admin-empty">Brak ogłoszeń do moderacji.</p>
              ) : (
                <div className="admin-table" role="table">
                  <div className="admin-row admin-row-head" role="row">
                    <span>Ogłoszenie</span>
                    <span>Typ</span>
                    <span>Cena</span>
                    <span>Autor</span>
                    <span>Status</span>
                    <span>Akcje</span>
                  </div>
                  {listings.map((item) => (
                    <div className="admin-row" role="row" key={item.id}>
                      <span className="admin-cell-main">
                        <strong>{item.title}</strong>
                        <small>{item.city} • {item.area} m² • {item.rooms} pok. • {formatAdminDate(item.createdAt)}</small>
                      </span>
                      <span>{ADMIN_OFFER_LABELS[item.offerType]} / {ADMIN_PROPERTY_LABELS[item.propertyType]}</span>
                      <span>{item.price.toLocaleString('pl-PL')} zł</span>
                      <span className="admin-cell-owner">{item.ownerEmail || '-'}</span>
                      <span>
                        <em className={`admin-status ${item.status.toLowerCase()}`}>{ADMIN_STATUS_LABELS[item.status]}</em>
                      </span>
                      <span className="admin-actions">
                        <button type="button" className="admin-btn view" onClick={() => setPreviewListingId(item.id)}>
                          Zobacz
                        </button>
                        {item.status !== 'APPROVED' && (
                          <button type="button" className="admin-btn approve" disabled={busyId === `listing-${item.id}`}
                            onClick={() => runAction(`listing-${item.id}`, () => apiFetch(`/admin/listings/${item.id}/approve`, { method: 'POST' }))}>
                            Zatwierdź
                          </button>
                        )}
                        {item.status !== 'REJECTED' && (
                          <button type="button" className="admin-btn reject" disabled={busyId === `listing-${item.id}`}
                            onClick={() => runAction(`listing-${item.id}`, () => apiFetch(`/admin/listings/${item.id}/reject`, { method: 'POST' }))}>
                            Odrzuć
                          </button>
                        )}
                        <button type="button" className="admin-btn danger" disabled={busyId === `listing-${item.id}`}
                          onClick={() => runAction(`listing-${item.id}`, () => apiFetch(`/admin/listings/${item.id}`, { method: 'DELETE' }))}>
                          Usuń
                        </button>
                      </span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          {!loading && tab === 'users' && (
            <div className="admin-card">
              {users.length === 0 ? (
                <p className="admin-empty">Brak zarejestrowanych użytkowników.</p>
              ) : filteredUsers.length === 0 ? (
                <>
                  <div className="admin-users-search-bar">
                    <label className="admin-users-search" aria-label="Wyszukiwarka użytkowników">
                      <Icon name="search" />
                      <input
                        type="text"
                        value={userSearch}
                        onChange={(event) => setUserSearch(event.target.value)}
                        placeholder="Szukaj po e-mailu lub nazwie użytkownika"
                      />
                      {userSearch.trim().length > 0 && (
                        <button
                          type="button"
                          className="admin-users-search-clear"
                          onClick={() => setUserSearch('')}
                          aria-label="Wyczyść wyszukiwanie"
                        >
                          ×
                        </button>
                      )}
                    </label>
                    <small className="admin-users-search-count">Wyniki: 0 z {users.length}</small>
                  </div>
                  <p className="admin-empty">Brak użytkowników pasujących do wyszukania.</p>
                </>
              ) : (
                <>
                  <div className="admin-users-search-bar">
                    <label className="admin-users-search" aria-label="Wyszukiwarka użytkowników">
                      <Icon name="search" />
                      <input
                        type="text"
                        value={userSearch}
                        onChange={(event) => setUserSearch(event.target.value)}
                        placeholder="Szukaj po e-mailu lub nazwie użytkownika"
                      />
                      {userSearch.trim().length > 0 && (
                        <button
                          type="button"
                          className="admin-users-search-clear"
                          onClick={() => setUserSearch('')}
                          aria-label="Wyczyść wyszukiwanie"
                        >
                          ×
                        </button>
                      )}
                    </label>
                    <small className="admin-users-search-count">Wyniki: {filteredUsers.length} z {users.length}</small>
                  </div>

                  <div className="admin-table admin-table-users" role="table">
                    <div className="admin-row admin-row-head" role="row">
                      <span>Użytkownik</span>
                      <span>Logowanie</span>
                      <span>Typ konta</span>
                      <span>Rola</span>
                      <span>Weryfikacja</span>
                      <span>Dane</span>
                      <span>Status</span>
                      <span>Akcje</span>
                      <span>Konto</span>
                    </div>
                    {filteredUsers.map((item) => (
                      <div className="admin-row" role="row" key={item.id}>
                        <span className="admin-cell-main">
                          <strong title={item.fullName || '-'}>{item.fullName || '-'}</strong>
                          <small title={item.email}>{item.email}</small>
                        </span>
                        <span>{item.provider === 'LOCAL' ? 'E-mail' : item.provider === 'GOOGLE' ? 'Google' : 'Facebook'}</span>
                        <span><em className={`admin-status ${item.accountType === 'COMPANY' ? 'company' : 'approved'}`}>{item.accountType === 'COMPANY' ? 'Firma' : 'Osoba prywatna'}</em></span>
                        <span><em className={`admin-status ${item.role === 'ADMIN' ? 'approved' : 'pending'}`}>{item.role === 'ADMIN' ? 'Administrator' : 'Użytkownik'}</em></span>
                        <span className="admin-cell-verification">
                          {item.role === 'ADMIN' || item.verified ? (
                            <em className="admin-status approved">Zweryfikowany</em>
                          ) : (
                            <em className="admin-status pending">Oczekuje</em>
                          )}
                        </span>
                        <span className="admin-cell-preview">
                          {item.role !== 'ADMIN' && (
                            item.verified ? (
                              <button type="button" className="admin-btn" onClick={() => openUserPreview(item.id)}>
                                Podgląd danych
                              </button>
                            ) : (
                              <button type="button" className="admin-btn" onClick={() => openUserPreview(item.id)}>
                                Sprawdź dane
                              </button>
                            )
                          )}
                        </span>
                        <span>{item.blocked ? <em className="admin-status rejected">Zablokowany</em> : <em className="admin-status approved">Aktywny</em>}</span>
                        <span className="admin-actions">
                          {item.role === 'ADMIN' ? (
                            user?.id === item.id ? (
                              <span className="admin-muted">Twoje konto administratora</span>
                            ) : (
                              <button
                                type="button"
                                className="admin-btn reject"
                                disabled={busyId === `revoke-admin-${item.id}`}
                                onClick={() => handleRevokeAdmin(item)}
                              >
                                Odbierz admina
                              </button>
                            )
                          ) : (
                            <button type="button" className="admin-btn" onClick={() => setMessageUser(item)}>
                              Wiadomość
                            </button>
                          )}
                        </span>
                        <span className="admin-account-actions-cell">
                          {item.role === 'ADMIN' ? (
                            <span className="admin-muted">-</span>
                          ) : (
                            <div className="admin-account-actions-table" role="group" aria-label={`Akcje konta użytkownika ${item.fullName || item.email}`}>
                              <button
                                type="button"
                                className="admin-btn admin-btn-compact"
                                disabled={busyId === `reset-password-${item.id}`}
                                onClick={() => handleResetPassword(item)}
                              >
                                Reset hasła
                              </button>
                              <button
                                type="button"
                                className="admin-btn admin-btn-compact"
                                disabled={busyId === `grant-admin-${item.id}`}
                                onClick={() => handleGrantAdmin(item)}
                              >
                                Nadaj admina
                              </button>
                              <button
                                type="button"
                                className="admin-btn danger admin-btn-compact"
                                disabled={busyId === `user-${item.id}`}
                                onClick={() => {
                                  const shouldDelete = window.confirm('Czy na pewno chcesz usunąć konto tego użytkownika? Operacji nie da się cofnąć.');
                                  if (!shouldDelete) {
                                    return;
                                  }
                                  runAction(`user-${item.id}`, () => apiFetch(`/admin/users/${item.id}`, { method: 'DELETE' }));
                                }}
                              >
                                Usuń konto
                              </button>
                            </div>
                          )}
                        </span>
                      </div>
                    ))}
                  </div>
                </>
              )}
            </div>
          )}

          {verificationUser && (
            <div className="listing-delete-overlay" role="dialog" aria-modal="true" aria-label="Dane użytkownika">
              <div className="admin-verify-modal">
                <button type="button" className="listing-delete-close" aria-label="Zamknij" onClick={() => setVerificationUser(null)}>×</button>
                <div className="admin-verify-icon"><Icon name="shield" /></div>
                <h2>{verificationUser.verified ? 'Dane użytkownika' : 'Weryfikacja konta'}</h2>
                <p className="admin-verify-subtitle">
                  {verificationUser.verified
                    ? 'Podgląd aktualnych danych konta.'
                    : 'Sprawdź dane podane przez użytkownika przed zatwierdzeniem konta.'}
                </p>

                <div className="admin-verify-details">
                  {verificationUser.accountType === 'COMPANY' ? (
                    <>
                      <article><span>Nazwa firmy</span><strong>{verificationUser.fullName || '-'}</strong></article>
                      <article><span>NIP</span><strong>{verificationUser.nip || 'Nie podano'}</strong></article>
                      <article><span>Adres e-mail</span><strong>{verificationUser.email}</strong></article>
                      <article><span>Numer telefonu</span><strong>{verificationUser.phone || 'Nie podano'}</strong></article>
                    </>
                  ) : (
                    <>
                      <article><span>Imię i nazwisko</span><strong>{verificationUser.fullName || '-'}</strong></article>
                      <article><span>Adres e-mail</span><strong>{verificationUser.email}</strong></article>
                      <article><span>Numer telefonu</span><strong>{verificationUser.phone || 'Nie podano'}</strong></article>
                      <article><span>Data urodzenia</span><strong>{verificationUser.birthDate ? verificationUser.birthDate.split('-').reverse().join('.') : 'Nie podano'}</strong></article>
                    </>
                  )}
                </div>

                {verificationUser.verified ? (
                  <div className="listing-delete-actions">
                    <button type="button" className="admin-btn" onClick={() => setVerificationUser(null)}>
                      Zamknij
                    </button>
                  </div>
                ) : (
                  <>
                    <p className="admin-verify-reject-note">Odrzucenie usunie konto i trwale zablokuje ten adres e-mail przed ponowną rejestracją.</p>

                    <div className="listing-delete-actions">
                      <button
                        type="button"
                        className="admin-btn danger"
                        disabled={busyId === `reject-${verificationUser.id}`}
                        onClick={async () => {
                          await runAction(`reject-${verificationUser.id}`, () => apiFetch(`/admin/users/${verificationUser.id}/reject`, { method: 'POST' }));
                          setVerificationUser(null);
                        }}
                      >
                        Odrzuć i zablokuj e-mail
                      </button>
                      <button
                        type="button"
                        className="admin-btn approve"
                        disabled={busyId === `verify-${verificationUser.id}`}
                        onClick={async () => {
                          await runAction(`verify-${verificationUser.id}`, () => apiFetch(`/admin/users/${verificationUser.id}/verify`, { method: 'POST' }));
                          setVerificationUser(null);
                        }}
                      >
                        Zaakceptuj konto
                      </button>
                    </div>
                  </>
                )}
              </div>
            </div>
          )}

          {messageUser && (
            <AdminMessageModal user={messageUser} onClose={() => setMessageUser(null)} />
          )}

          {previewListingId != null && (
            <AdminListingPreviewModal
              listingId={previewListingId}
              busy={busyId === `listing-${previewListingId}`}
              onClose={() => setPreviewListingId(null)}
              onApprove={async () => {
                await runAction(`listing-${previewListingId}`, () => apiFetch(`/admin/listings/${previewListingId}/approve`, { method: 'POST' }));
                setPreviewListingId(null);
              }}
              onReject={async () => {
                await runAction(`listing-${previewListingId}`, () => apiFetch(`/admin/listings/${previewListingId}/reject`, { method: 'POST' }));
                setPreviewListingId(null);
              }}
            />
          )}

          {detailsReport && (
            <AdminReportDetailsModal
              report={detailsReport}
              onClose={() => setDetailsReport(null)}
              onPreviewListing={detailsReport.listingId === null ? null : () => setPreviewListingId(detailsReport.listingId as number)}
              isImageAttachment={isImageReportAttachment}
            />
          )}

          {!loading && tab === 'messages' && (
            <div className="admin-card admin-message-inbox">
              <div className="admin-card-head">
                <h2>Wiadomości z formularza „Napisz do nas”</h2>
                <button type="button" onClick={() => loadMessageThreads()} disabled={messageThreadsLoading}>
                  Odśwież <Icon name="arrow" />
                </button>
              </div>

              {messageThreadsError && <p className="admin-error" role="alert">{messageThreadsError}</p>}

              {messageThreadsLoading ? (
                <p className="admin-empty">Wczytywanie wiadomości...</p>
              ) : messageThreads.length === 0 ? (
                <p className="admin-empty">Brak wiadomości od użytkowników. Gdy ktoś wyśle formularz „Napisz do nas”, pojawi się tutaj.</p>
              ) : (
                <div className="admin-table admin-table-message-inbox" role="table">
                  <div className="admin-row admin-row-head" role="row">
                    <span>Użytkownik</span>
                    <span>Ostatnia wiadomość</span>
                    <span>Aktywność</span>
                    <span>Akcje</span>
                  </div>
                  {messageThreads.map((thread) => (
                    <div className="admin-row" role="row" key={thread.user.id}>
                      <span className="admin-cell-main">
                        <strong>{thread.user.fullName || thread.user.email}</strong>
                        <small>{thread.user.email}</small>
                      </span>
                      <span className="admin-cell-main">
                        <strong>{thread.lastMessage.mine ? 'Administrator' : 'Użytkownik'}</strong>
                        <small>{thread.lastMessage.content}</small>
                      </span>
                      <span className="admin-cell-main">
                        <strong>{new Date(thread.lastMessage.createdAt).toLocaleString('pl-PL', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })}</strong>
                        <small>{thread.awaitingAdminReply > 0 ? `Nowe od użytkownika: ${thread.awaitingAdminReply}` : `Wiadomości: ${thread.totalMessages}`}</small>
                      </span>
                      <span className="admin-actions">
                        <button type="button" className="admin-btn" onClick={() => setMessageUser(thread.user)}>
                          Otwórz rozmowę
                        </button>
                      </span>
                    </div>
                  ))}
                </div>
              )}

            </div>
          )}
          {!loading && tab === 'support' && (
            <div className="admin-card">
              {supportMessages.length === 0 ? (
                <p className="admin-empty">Brak wiadomości z formularza pomocy.</p>
              ) : (
                <div className="admin-table admin-table-support" role="table">
                  <div className="admin-row admin-row-support admin-row-head" role="row">
                    <span>Nadawca</span>
                    <span>Temat</span>
                    <span>Treść</span>
                    <span>Status</span>
                    <span>Akcje</span>
                  </div>
                  {supportMessages.map((item) => (
                    <div className="admin-row admin-row-support" role="row" key={item.id}>
                      <span className="admin-cell-main">
                        <strong>{item.fullName}</strong>
                        <small>
                          {item.email}
                          {item.email.toLowerCase() !== item.accountEmail.toLowerCase() && ` • konto: ${item.accountEmail}`}
                        </small>
                      </span>
                      <span className="admin-cell-main">
                        <strong>{item.topic}</strong>
                        <small>#{item.id} • {formatAdminDate(item.createdAt)}</small>
                      </span>
                      <span className="admin-support-content">{item.content}</span>
                      <span>
                        <em className={`admin-status ${item.handled ? 'approved' : 'pending'}`}>
                          {item.handled ? 'Obsłużone' : 'Nowe'}
                        </em>
                        {item.handled && item.handledAt && (
                          <small style={{ display: 'block', marginTop: 4 }}>
                            {formatAdminDate(item.handledAt)}{item.handledByEmail ? ` • ${item.handledByEmail}` : ''}
                          </small>
                        )}
                      </span>
                      <span className="admin-actions">
                        {/* Rozmowa idzie do konta, z ktorego wyslano formularz - ten sam czat
                            co w zakladce Wiadomosci, wiec uzytkownik dostaje odpowiedz w aplikacji. */}
                        {supportMessageAuthor(item) ? (
                          <button
                            type="button"
                            className="admin-btn"
                            onClick={() => setMessageUser(supportMessageAuthor(item) as AuthUser)}
                          >
                            Otwórz rozmowę
                          </button>
                        ) : (
                          <span className="admin-support-noaccount" title="Konto zostało usunięte">Brak konta</span>
                        )}
                        <a className="admin-btn view" href={`mailto:${item.email}?subject=${encodeURIComponent(`Odp: ${item.topic}`)}`}>
                          Odpowiedz e-mailem
                        </a>
                        <button
                          type="button"
                          className={item.handled ? 'admin-btn' : 'admin-btn approve'}
                          disabled={busyId === `support-${item.id}`}
                          onClick={() => runAction(
                            `support-${item.id}`,
                            () => apiFetch(`/admin/support-messages/${item.id}/handled?handled=${!item.handled}`, { method: 'POST' })
                              .then(() => loadSupportMessages()),
                          )}
                        >
                          {item.handled ? 'Cofnij' : 'Oznacz jako obsłużone'}
                        </button>
                      </span>
                    </div>
                  ))}
                </div>
              )}

            </div>
          )}
          {!loading && tab === 'advertisingEnquiries' && (
            <div className="admin-card">
              {advertisingEnquiries.length === 0 ? (
                <p className="admin-empty">Brak zapytań o reklamę. Pojawią się tu zgłoszenia z formularza na stronie /reklama.</p>
              ) : (
                <div className="admin-table admin-table-advertising" role="table">
                  <div className="admin-row admin-row-advertising admin-row-head" role="row">
                    <span>Firma</span>
                    <span>Kontakt</span>
                    <span>Usługa</span>
                    <span>Wiadomość</span>
                    <span>Status</span>
                    <span>Akcje</span>
                  </div>
                  {advertisingEnquiries.map((item) => (
                    <div className="admin-row admin-row-advertising" role="row" key={item.id}>
                      <span className="admin-cell-main">
                        <strong>{item.companyName}</strong>
                        <small>{item.fullName}</small>
                      </span>
                      <span className="admin-cell-main">
                        <strong>{item.email}</strong>
                        <small>{item.phone} • #{item.id} • {formatAdminDate(item.createdAt)}</small>
                      </span>
                      <span><em className="admin-advertising-category">{item.serviceCategory}</em></span>
                      <span className="admin-support-content">{item.message ?? <i className="admin-advertising-nomessage">Bez wiadomości</i>}</span>
                      <span>
                        <em className={`admin-status ${item.handled ? 'approved' : 'pending'}`}>
                          {item.handled ? 'Obsłużone' : 'Nowe'}
                        </em>
                        {item.handled && item.handledAt && (
                          <small style={{ display: 'block', marginTop: 4 }}>
                            {formatAdminDate(item.handledAt)}{item.handledByEmail ? ` • ${item.handledByEmail}` : ''}
                          </small>
                        )}
                      </span>
                      <span className="admin-actions">
                        <a
                          className="admin-btn view"
                          href={`mailto:${item.email}?subject=${encodeURIComponent(`Oferta reklamowa - ${item.serviceCategory}`)}`}
                        >
                          Odpowiedz e-mailem
                        </a>
                        <button
                          type="button"
                          className={item.handled ? 'admin-btn' : 'admin-btn approve'}
                          disabled={busyId === `advertising-${item.id}`}
                          onClick={() => runAction(
                            `advertising-${item.id}`,
                            () => apiFetch(`/admin/advertising-enquiries/${item.id}/handled?handled=${!item.handled}`, { method: 'POST' })
                              .then(() => loadAdvertisingEnquiries()),
                          )}
                        >
                          {item.handled ? 'Cofnij' : 'Oznacz jako obsłużone'}
                        </button>
                        <button
                          type="button"
                          className="admin-btn danger"
                          disabled={busyId === `advertising-del-${item.id}`}
                          onClick={() => runAction(
                            `advertising-del-${item.id}`,
                            () => apiFetch(`/admin/advertising-enquiries/${item.id}`, { method: 'DELETE' })
                              .then(() => loadAdvertisingEnquiries()),
                          )}
                        >
                          Usuń
                        </button>
                      </span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}
          {!loading && tab === 'payments' && <AdminPromotionView Icon={Icon} />}
          {!loading && tab === 'stats' && (
            <div className="admin-stats-live">
              <div className="admin-stats-top-grid">
                <article className="admin-stats-top-card">
                  <span><Icon name="document" /></span>
                  <div>
                    <strong>{adminStats?.summary.activeListings ?? 0}</strong>
                    <small>Aktywne ogłoszenia</small>
                  </div>
                </article>
                <article className="admin-stats-top-card">
                  <span><Icon name="eye" /></span>
                  <div>
                    <strong>{adminStats?.summary.pendingListings ?? 0}</strong>
                    <small>Oczekujące ogłoszenia</small>
                  </div>
                </article>
              </div>

              <div className="admin-stats-layout">
                <aside className="admin-stats-sidebar">
                  <h3>Okres</h3>
                  <div className="admin-stats-period-buttons">
                    {ADMIN_STATS_PERIOD_OPTIONS.map((option) => (
                      <button
                        key={option.days}
                        type="button"
                        className={statsPeriodMode === 'preset' && statsPeriodDays === option.days ? 'active' : ''}
                        onClick={() => {
                          setStatsPeriodMode('preset');
                          setStatsPeriodDays(option.days);
                          setStatsQuickRange('');
                        }}
                      >
                        <Icon name="calendar" /> {option.label}
                      </button>
                    ))}
                    <button
                      type="button"
                      className={statsPeriodMode === 'custom' ? 'active' : ''}
                      onClick={() => {
                        setStatsPeriodMode('custom');
                        setStatsQuickRange('');
                      }}
                    >
                      <Icon name="calendar" /> Dowolny okres
                    </button>
                  </div>

                  {statsPeriodMode === 'custom' && (
                    <div className="admin-stats-custom-range">
                      <label>
                        <span>Szybki wybór</span>
                        <select
                          value={statsQuickRange}
                          onChange={(event) => applyQuickStatsRange(event.target.value as AdminStatsQuickRange)}
                        >
                          <option value="">Wybierz gotowy zakres</option>
                          <option value="today">Dzisiaj</option>
                          <option value="last7">Ostatnie 7 dni</option>
                          <option value="last14">Ostatnie 14 dni</option>
                          <option value="last30">Ostatnie 30 dni</option>
                        </select>
                      </label>
                      <label>
                        <span>Od</span>
                        <input
                          type="date"
                          value={statsCustomFrom}
                          onChange={(event) => {
                            setStatsCustomFrom(event.target.value);
                            setStatsQuickRange('');
                          }}
                          max={statsCustomTo || undefined}
                        />
                      </label>
                      <label>
                        <span>Do</span>
                        <input
                          type="date"
                          value={statsCustomTo}
                          onChange={(event) => {
                            setStatsCustomTo(event.target.value);
                            setStatsQuickRange('');
                          }}
                          min={statsCustomFrom || undefined}
                        />
                      </label>
                    </div>
                  )}
                  <div className="admin-stats-side-summary">
                    <strong>Czeka do akceptacji: {adminStats?.summary.pendingVerificationUsers ?? 0}</strong>
                    <p>Moderacja treści: {adminStats?.summary.openReports ?? 0}</p>
                    <p>Wiadomości do admina: {adminStats?.summary.messagesToAdminTotal ?? 0}</p>
                    <p>Zablokowani użytkownicy: {adminStats?.summary.blockedUsers ?? 0}</p>
                  </div>
                </aside>

                <div className="admin-stats-main">
                  <div className="admin-stats-main-head">
                    <h2>{statsHeadingLabel}</h2>
                  </div>

                  {statsError && <p className="admin-error" role="alert">{statsError}</p>}
                  {statsLoading && <p className="admin-empty">Wczytywanie statystyk...</p>}

                  {adminStats && (
                    <>
                      <div className="admin-stats-cards-grid">
                        <article className="admin-stats-card"><h4><Icon name="message" /> Wiadomości do admina</h4><strong>{adminStats.period.messagesToAdmin}</strong></article>
                        <article className="admin-stats-card"><h4><Icon name="document" /> Dodane ogłoszenia</h4><strong>{adminStats.period.newListings}</strong></article>
                        <article className="admin-stats-card"><h4><Icon name="warning" /> Nowe zgłoszenia</h4><strong>{adminStats.period.newReports}</strong></article>
                        <article className="admin-stats-card"><h4><Icon name="user" /> Rejestracje - osoby prywatne</h4><strong>{adminStats.period.newPersonalAccounts}</strong></article>
                        <article className="admin-stats-card"><h4><Icon name="user" /> Rejestracje - firmy</h4><strong>{adminStats.period.newCompanyAccounts}</strong></article>
                        <article className="admin-stats-card"><h4><Icon name="shield" /> Użytkownicy oczekujący weryfikacji</h4><strong>{adminStats.summary.pendingVerificationUsers}</strong></article>
                      </div>

                      <section className="admin-stats-history">
                        <header>
                          <h3>Statystyki dzienne</h3>
                          {formattedGeneratedAt && <small>Ostatnia aktualizacja: {formattedGeneratedAt}</small>}
                        </header>
                        <div className="admin-table admin-table-stats-history" role="table">
                          <div className="admin-row admin-row-head" role="row">
                            <span>Dzień</span>
                            <span>Wiadomości</span>
                            <span>Nowe ogłoszenia</span>
                            <span>Nowe zgłoszenia</span>
                            <span>Konta prywatne</span>
                            <span>Konta firmowe</span>
                          </div>
                          {adminStats.daily.map((item) => (
                            <div className="admin-row" role="row" key={item.date}>
                              <span>{new Date(`${item.date}T00:00:00`).toLocaleDateString('pl-PL')}</span>
                              <span>{item.messagesToAdmin}</span>
                              <span>{item.newListings}</span>
                              <span>{item.newReports}</span>
                              <span>{item.newPersonalAccounts}</span>
                              <span>{item.newCompanyAccounts}</span>
                            </div>
                          ))}
                        </div>
                      </section>
                    </>
                  )}
                </div>
              </div>
            </div>
          )}
          {!loading && tab === 'settings' && <AdminSettingsView Icon={Icon} />}
          {!loading && tab === 'moderation' && <AdminPlaceholderCard icon="check" label="Weryfikacja ogłoszeń" />}
          {!loading && tab === 'forbiddenWords' && (
            <div className="admin-card admin-forbidden-words">
              <div className="admin-card-head">
                <h2>Słowa zakazane globalnie</h2>
                <span className="admin-forbidden-count">
                  {forbiddenSearch.trim()
                    ? `${filteredForbiddenWords.length} z ${forbiddenWords.length}`
                    : `${forbiddenWords.length} słów`}
                </span>
              </div>

              <div className="admin-forbidden-add">
                <input
                  type="text"
                  value={newForbiddenWord}
                  onChange={(event) => setNewForbiddenWord(event.target.value)}
                  onKeyDown={(event) => {
                    if (event.key === 'Enter') {
                      event.preventDefault();
                      handleAddForbiddenWord();
                    }
                  }}
                  placeholder="Dodaj nowe słowo zakazane"
                  maxLength={120}
                />
                <button
                  type="button"
                  className="admin-btn approve"
                  onClick={handleAddForbiddenWord}
                  disabled={!newForbiddenWord.trim() || savingForbiddenWord}
                >
                  {savingForbiddenWord ? 'Zapisywanie...' : 'Dodaj słowo'}
                </button>
              </div>

              <div className="admin-forbidden-search">
                <Icon name="search" />
                <input
                  type="search"
                  value={forbiddenSearch}
                  onChange={(event) => setForbiddenSearch(event.target.value)}
                  placeholder="Szukaj słowa na liście..."
                  aria-label="Szukaj słowa zakazanego"
                />
                {forbiddenSearch && (
                  <button
                    type="button"
                    className="admin-forbidden-search-clear"
                    onClick={() => setForbiddenSearch('')}
                    aria-label="Wyczyść wyszukiwanie"
                  >
                    ×
                  </button>
                )}
              </div>

              {forbiddenWords.length === 0 ? (
                <p className="admin-empty">Brak słów na liście.</p>
              ) : filteredForbiddenWords.length === 0 ? (
                <p className="admin-empty">Brak słów pasujących do „{forbiddenSearch.trim()}".</p>
              ) : (
                <div className="admin-forbidden-list" role="list">
                  {filteredForbiddenWords.map((item) => (
                    <span key={item.id} className="admin-forbidden-chip" role="listitem">
                      <span>{item.word}</span>
                      <button
                        type="button"
                        className="admin-forbidden-remove"
                        onClick={() => handleDeleteForbiddenWord(item)}
                        disabled={deletingWordId !== null}
                        aria-label={`Usuń słowo ${item.word}`}
                        title="Usuń słowo"
                      >
                        <Icon name="trash" />
                      </button>
                    </span>
                  ))}
                </div>
              )}
            </div>
          )}
          {!loading && tab === 'categories' && <AdminPlaceholderCard icon="list" label="Kategorie" />}
          {!loading && tab === 'locations' && <AdminPlaceholderCard icon="pin" label="Lokalizacje" />}
          {!loading && tab === 'promotions' && <AdminBannersView Icon={Icon} />}
          {!loading && tab === 'articleRequests' && <AdminArticleRequestsView Icon={Icon} onModerated={loadPendingArticleCount} />}
          {!loading && tab === 'leads' && <AdminLeadsView Icon={Icon} />}
          {!loading && tab === 'campaigns' && <AdminCampaignsView Icon={Icon} />}
          {!loading && tab === 'smtpConfig' && <AdminSmtpConfigView Icon={Icon} />}
          {!loading && tab === 'smsConfig' && <AdminSmsConfigView Icon={Icon} />}
        </div>
      </div>
    </section>
  );
}

function DistrictRankingPage() {
  const navigate = useNavigate();
  const { formatPricePerArea, formatPricePerAreaNumber, formatArea, areaSuffix } = useDisplay();
  const [ranking, setRanking] = useState<AreaRanking | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [level, setLevel] = useState<RankingLevel>('districts');
  // Domyslnie sprzedaz - mieszanie cen ofertowych z czynszami dawaloby bezsensowne zl/m².
  const [offerType, setOfferType] = useState<ApiOfferType>('SALE');
  const [propertyType, setPropertyType] = useState<'all' | ApiPropertyType>('all');
  const [metric, setMetric] = useState<RankingMetric>('price');
  const [cityFilter, setCityFilter] = useState('all');

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    setError('');

    const params = new URLSearchParams({ offerType });
    if (propertyType !== 'all') {
      params.set('propertyType', propertyType);
    }

    apiFetch<AreaRanking>(`/listings/areas?${params.toString()}`)
      .then((data) => {
        if (!cancelled) {
          setRanking(data);
          setLoading(false);
        }
      })
      .catch((err) => {
        if (!cancelled) {
          setError(err instanceof Error ? err.message : 'Nie udało się wczytać rankingu.');
          setLoading(false);
        }
      });

    return () => {
      cancelled = true;
    };
  }, [offerType, propertyType]);

  const areas = level === 'districts' ? ranking?.districts ?? [] : ranking?.cities ?? [];
  const cityOptions = Array.from(new Set(areas.map((item) => item.city))).sort((left, right) => left.localeCompare(right, 'pl'));
  const filtered = areas.filter((item) => cityFilter === 'all' || item.city === cityFilter);

  const sorted = [...filtered].sort((left, right) => {
    if (metric === 'popularity') {
      return (right.totalViews + right.totalSaves * 5) - (left.totalViews + left.totalSaves * 5);
    }
    if (metric === 'offers') {
      return right.listingsCount - left.listingsCount || right.avgPricePerM2 - left.avgPricePerM2;
    }
    if (metric === 'trend') {
      return (right.trendPercent ?? -Infinity) - (left.trendPercent ?? -Infinity);
    }
    return right.avgPricePerM2 - left.avgPricePerM2;
  });

  const podium = sorted.slice(0, 3);
  const areaName = (item: AreaStats) => (item.district ? `${item.district}, ${item.city}` : item.city);
  const perM2 = (value: number) => `${formatPricePerArea(value)}${offerType === 'RENT' ? ' / mies.' : ''}`;
  const generatedLabel = ranking
    ? new Date(ranking.generatedAt).toLocaleString('pl-PL', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
    : '';

  return (
    <section className="district-ranking-page" aria-label="Ranking dzielnic">
      <div className="district-ranking-shell">
        <div className="district-breadcrumb">
          <Link to={ROUTES.account}>Panel główny</Link>
          <Icon name="chevron" />
          <Link className="active" to={ROUTES.districtRanking}>Ranking dzielnic</Link>
        </div>

        <div className="district-ranking-title">
          <h1>Ranking dzielnic i miast</h1>
          <p>
            Zestawienie liczone na bieżąco z ogłoszeń opublikowanych w serwisie. Każda nowa, wstrzymana
            lub usunięta oferta zmienia wynik - nie ma tu danych wpisanych na sztywno.
          </p>
        </div>

        <section className="district-filter-card" aria-label="Filtry rankingu">
          <label>
            <span>Poziom</span>
            <select value={level} onChange={(event) => { setLevel(event.target.value as RankingLevel); setCityFilter('all'); }}>
              <option value="districts">Dzielnice</option>
              <option value="cities">Miasta</option>
            </select>
          </label>
          <label>
            <span>Rodzaj oferty</span>
            <select value={offerType} onChange={(event) => setOfferType(event.target.value as ApiOfferType)}>
              <option value="SALE">Sprzedaż</option>
              <option value="RENT">Wynajem</option>
            </select>
          </label>
          <label>
            <span>Rodzaj nieruchomości</span>
            <select value={propertyType} onChange={(event) => setPropertyType(event.target.value as 'all' | ApiPropertyType)}>
              <option value="all">Wszystkie</option>
              <option value="APARTMENT">Mieszkania</option>
              <option value="HOUSE">Domy</option>
            </select>
          </label>
          <label>
            <span>Sortowanie</span>
            <select value={metric} onChange={(event) => setMetric(event.target.value as RankingMetric)}>
              {(Object.keys(RANKING_METRIC_LABELS) as RankingMetric[]).map((key) => (
                <option value={key} key={key}>{RANKING_METRIC_LABELS[key]}</option>
              ))}
            </select>
          </label>
          <label>
            <span>Miasto</span>
            <select value={cityFilter} onChange={(event) => setCityFilter(event.target.value)}>
              <option value="all">Wszystkie miasta</option>
              {cityOptions.map((city) => <option value={city} key={city}>{city}</option>)}
            </select>
          </label>
        </section>

        {loading && <p className="district-ranking-note">Wczytywanie rankingu...</p>}
        {!loading && error && <p className="district-ranking-note">{error}</p>}

        {!loading && !error && (
          <>
            <div className="district-summary">
              <article>
                <small>Ofert w zestawieniu</small>
                <strong>{ranking?.totalListings ?? 0}</strong>
              </article>
              <article>
                <small>{level === 'districts' ? 'Dzielnic z ofertami' : 'Miast z ofertami'}</small>
                <strong>{filtered.length}</strong>
              </article>
              <article>
                <small>Nowe oferty (30 dni)</small>
                <strong>{filtered.reduce((sum, item) => sum + item.newLast30Days, 0)}</strong>
              </article>
              <article>
                <small>Zaktualizowano</small>
                <strong className="district-summary-time">{generatedLabel}</strong>
              </article>
            </div>

            {sorted.length === 0 ? (
              <section className="district-ranking-table-card">
                <p className="district-ranking-note">
                  {level === 'districts'
                    ? 'Żadne opublikowane ogłoszenie dla tych filtrów nie ma uzupełnionej dzielnicy. Przełącz na poziom „Miasta” albo zmień filtry.'
                    : 'Brak opublikowanych ogłoszeń dla tych filtrów.'}
                </p>
              </section>
            ) : (
              <>
                {podium.length === 3 && (
                  <div className="district-podium">
                    {podium.map((item, index) => (
                      <article className={`district-podium-card place-${index + 1}`} key={areaName(item)}>
                        <span className="district-podium-rank">{index + 1}</span>
                        <strong>{item.district ?? item.city}</strong>
                        <small>{item.district ? item.city : 'całe miasto'}</small>
                        <em>{perM2(item.avgPricePerM2)}</em>
                        <p>{item.listingsCount} {item.listingsCount === 1 ? 'oferta' : 'ofert'} · {item.totalViews} wyświetleń</p>
                      </article>
                    ))}
                  </div>
                )}

                <section className="district-ranking-table-card">
                  <h2>{RANKING_METRIC_LABELS[metric]} - {level === 'districts' ? 'dzielnice' : 'miasta'}</h2>
                  <div className="district-table-wrap">
                    <table>
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>{level === 'districts' ? 'Dzielnica' : 'Miasto'}</th>
                          <th>Oferty</th>
                          <th>Śr. cena za {areaSuffix}</th>
                          <th>Rozpiętość</th>
                          <th>Śr. metraż</th>
                          <th>Zainteresowanie</th>
                          <th>Trend 90 dni</th>
                        </tr>
                      </thead>
                      <tbody>
                        {sorted.map((item, index) => (
                          <tr key={areaName(item)}>
                            <td><span className={`district-rank-number ${index < 3 ? `top-${index + 1}` : ''}`}>{index + 1}</span></td>
                            <td>
                              <strong>{item.district ?? item.city}</strong>
                              {item.district && <small className="district-city-label">{item.city}</small>}
                            </td>
                            <td>
                              <span className="district-offers-cell">
                                <b>{item.listingsCount}</b>
                                {item.newLast30Days > 0 && <small className="district-new-tag">+{item.newLast30Days} nowe</small>}
                              </span>
                            </td>
                            <td>
                              <strong>{perM2(item.avgPricePerM2)}</strong>
                              {/* Zastrzezenie stoi przy sredniej, bo to jej dotyczy - nie liczby ofert. */}
                              {item.listingsCount === 1 && <small className="district-thin-data">z jednej oferty</small>}
                            </td>
                            <td className="district-range-cell">
                              {item.listingsCount > 1
                                ? `${formatPricePerAreaNumber(item.minPricePerM2)} - ${formatPricePerAreaNumber(item.maxPricePerM2)}`
                                : '-'}
                            </td>
                            <td>{formatArea(item.avgArea)}</td>
                            <td>
                              <span className="district-interest">
                                <i><Icon name="eye" /> {item.totalViews}</i>
                                <i><Icon name="heart" /> {item.totalSaves}</i>
                              </span>
                            </td>
                            <td className="district-change-cell">
                              {item.trendPercent === null ? (
                                <span className="district-trend-empty" title="Za mało ofert, żeby policzyć trend">brak danych</span>
                              ) : (
                                <span className={`district-change ${item.trendPercent >= 0 ? '' : 'negative'}`}>
                                  {item.trendPercent >= 0 ? '+' : ''}{item.trendPercent.toFixed(1).replace('.', ',')}% <Icon name="trend" />
                                </span>
                              )}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </section>
              </>
            )}

            <section className="district-methodology">
              <span><Icon name="chart" /></span>
              <p>
                <strong>Jak liczymy ranking</strong>
                <small>
                  Podstawą są wyłącznie opublikowane ogłoszenia z podaną ceną i metrażem. Cena za {areaSuffix} to średnia
                  z ofert w danym obszarze, zainteresowanie sumuje wyświetlenia i zapisania do ulubionych,
                  a trend porównuje oferty z ostatnich 90 dni ze starszymi - pokazujemy go dopiero wtedy, gdy po
                  obu stronach są co najmniej 2 oferty. Obszary z jedną ofertą oznaczamy jako „próbka 1”, bo
                  średnia z pojedynczego ogłoszenia nie opisuje rynku.
                </small>
              </p>
              <button type="button" onClick={() => navigate(ROUTES.buy)}>Zobacz oferty <Icon name="arrow" /></button>
            </section>
          </>
        )}
      </div>
    </section>
  );
}

// Punkt odniesienia dla ceny ogloszenia - wylacznie prawdziwe dane (NBP, GUS, ogloszenia serwisu).
type NegotiationReference = {
  label: string;
  // Ta sama nazwa do zdania "wartosc wg ...".
  byLabel: string;
  detail: string;
  perMeter: number;
  transactional: boolean;
};

type NegotiationAnalysis = {
  offerPerMeter: number;
  references: NegotiationReference[];
  // Podstawa przedzialu: cena transakcyjna (NBP, potem GUS), a bez niej srednia ogloszen.
  basis: NegotiationReference | null;
  basisValue: number | null;
  // O ile procent cena ofertowa przewyzsza wartosc wg podstawy (ujemne = taniej).
  overpricePct: number | null;
  // Od wartosci wg podstawy do polowy nadwyzki ponad nia; null, gdy ogloszenie nie jest drozsze.
  range: { from: number; to: number } | null;
};

const NEGOTIATION_MIN_LISTINGS = 3;

// Srednia ogloszen bez analizowanego ogloszenia - inaczej porownywaloby sie samo ze soba.
function listingsAverageWithout(current: ApiPricePoint | null | undefined, ownPerMeter: number, includesOwn: boolean): { perMeter: number; count: number } | null {
  if (!current) {
    return null;
  }
  if (!includesOwn) {
    return { perMeter: current.avgPricePerM2, count: current.listingsCount };
  }
  const count = current.listingsCount - 1;
  return count > 0
    ? { perMeter: Math.round((current.avgPricePerM2 * current.listingsCount - ownPerMeter) / count), count }
    : null;
}

function buildNegotiationAnalysis(listing: ApiListingDetail, cityHistory: ApiPriceHistory | null, districtHistory: ApiPriceHistory | null): NegotiationAnalysis {
  const offerPerMeter = listing.area > 0 ? listing.price / listing.area : 0;
  const includesOwn = listing.status === 'APPROVED';
  const references: NegotiationReference[] = [];

  const nbp = cityHistory?.nbp[cityHistory.nbp.length - 1];
  if (nbp) {
    references.push({
      label: 'Cena transakcyjna NBP',
      byLabel: 'cen transakcyjnych NBP',
      detail: `${listing.city}, rynek ${cityHistory!.nbpMarket.toLowerCase()}, ${HISTORY_ROMAN_QUARTERS[nbp.quarter - 1]} kw. ${nbp.year}`,
      perMeter: nbp.pricePerM2,
      transactional: true,
    });
  }
  const gus = cityHistory?.gus[cityHistory.gus.length - 1];
  if (gus && gus.year >= new Date().getFullYear() - VALUATION_MAX_GUS_AGE_YEARS) {
    references.push({
      label: 'Cena transakcyjna GUS',
      byLabel: 'cen transakcyjnych GUS',
      detail: `${listing.city}, ${HISTORY_ROMAN_QUARTERS[gus.quarter - 1]} kw. ${gus.year}`,
      perMeter: gus.pricePerM2,
      transactional: true,
    });
  }
  const district = listing.district ? listingsAverageWithout(districtHistory?.current, offerPerMeter, includesOwn) : null;
  if (district && district.count >= NEGOTIATION_MIN_LISTINGS) {
    references.push({
      label: 'Średnia ogłoszeń w dzielnicy',
      byLabel: 'średniej ogłoszeń w dzielnicy',
      detail: `${listing.district}, ${district.count} ogłoszeń w serwisie`,
      perMeter: district.perMeter,
      transactional: false,
    });
  }
  const city = listingsAverageWithout(cityHistory?.current, offerPerMeter, includesOwn);
  if (city && city.count >= NEGOTIATION_MIN_LISTINGS) {
    references.push({
      label: 'Średnia ogłoszeń w mieście',
      byLabel: 'średniej ogłoszeń w mieście',
      detail: `${listing.city}, ${city.count} ogłoszeń w serwisie`,
      perMeter: city.perMeter,
      transactional: false,
    });
  }

  const basis = references.find((reference) => reference.transactional) ?? references[0] ?? null;
  if (!basis || listing.area <= 0) {
    return { offerPerMeter, references, basis: null, basisValue: null, overpricePct: null, range: null };
  }
  const basisValue = basis.perMeter * listing.area;
  const overpricePct = ((listing.price - basisValue) / basisValue) * 100;
  const range = listing.price > basisValue
    ? { from: roundToThousand(basisValue), to: roundToThousand(basisValue + (listing.price - basisValue) / 2) }
    : null;
  return { offerPerMeter, references, basis, basisValue, overpricePct, range };
}

function formatSignedPercent(value: number): string {
  return `${value > 0 ? '+' : ''}${value.toFixed(1).replace('.', ',')}%`;
}

// /negocjacje - opis narzedzia; /negocjacje/:listingId - analiza konkretnego ogloszenia sprzedazy.
function NegotiationPage() {
  const { listingId } = useParams();
  const { user } = useAuth();
  const { formatPrice, formatPricePerArea, formatPricePerAreaNumber, formatArea } = useDisplay();
  const [listing, setListing] = useState<ApiListingDetail | null>(null);
  const [listingError, setListingError] = useState(false);
  const [cityHistory, setCityHistory] = useState<ApiPriceHistory | null>(null);
  const [districtHistory, setDistrictHistory] = useState<ApiPriceHistory | null>(null);
  const [marketLoading, setMarketLoading] = useState(false);
  const [similar, setSimilar] = useState<ApiListingSummary[]>([]);

  useEffect(() => {
    setListing(null);
    setListingError(false);
    if (!listingId) {
      return;
    }
    let cancelled = false;
    apiFetch<ApiListingDetail>(`/listings/${encodeURIComponent(listingId)}`)
      .then((data) => {
        if (!cancelled) {
          setListing(data);
        }
      })
      .catch(() => {
        if (!cancelled) {
          setListingError(true);
        }
      });
    return () => {
      cancelled = true;
    };
  }, [listingId]);

  useEffect(() => {
    setCityHistory(null);
    setDistrictHistory(null);
    setSimilar([]);
    if (!listing || listing.offerType !== 'SALE') {
      return;
    }
    let cancelled = false;
    const history = (district: string) => {
      const params = new URLSearchParams({
        city: listing.city,
        district,
        offerType: 'SALE',
        propertyType: listing.propertyType,
        market: listing.market ?? '',
        from: new Date().toISOString().slice(0, 10),
      });
      return apiFetch<ApiPriceHistory>(`/price-history?${params.toString()}`).catch(() => null);
    };
    const similarParams = new URLSearchParams({ city: listing.city, offerType: 'SALE', propertyType: listing.propertyType });
    setMarketLoading(true);
    Promise.all([
      history(''),
      listing.district ? history(listing.district) : Promise.resolve(null),
      apiFetch<ApiListingSummary[]>(`/listings?${similarParams.toString()}`).catch(() => []),
    ]).then(([cityData, districtData, others]) => {
      if (cancelled) {
        return;
      }
      setCityHistory(cityData);
      setDistrictHistory(districtData);
      setSimilar(others
        .filter((other) => other.id !== listing.id && other.area > 0)
        .sort((left, right) => Math.abs(left.area - listing.area) - Math.abs(right.area - listing.area))
        .slice(0, 4));
      setMarketLoading(false);
    });
    return () => {
      cancelled = true;
    };
  }, [listing]);

  const breadcrumb = (
    <div className="negotiation-breadcrumb">
      <Link to={ROUTES.account}>Panel główny</Link>
      <Icon name="chevron" />
      <Link className={listingId ? '' : 'active'} to={ROUTES.negotiation}>Ile możesz utargować?</Link>
      {listing && (
        <>
          <Icon name="chevron" />
          <Link className="active" to={negotiationPath(listing.id)}>{listing.title}</Link>
        </>
      )}
    </div>
  );
  const title = (
    <div className="negotiation-title">
      <h1>Ile możesz utargować?</h1>
      <p>Porównujemy cenę ogłoszenia z cenami transakcyjnymi NBP i GUS oraz z ogłoszeniami w serwisie.</p>
    </div>
  );
  const shell = (content: ReactNode) => (
    <section className="negotiation-page" aria-label="Ile możesz utargować">
      <div className="negotiation-shell">
        {breadcrumb}
        {title}
        {content}
      </div>
    </section>
  );

  if (!listingId) {
    return shell(
      <div className="negotiation-layout">
        <div className="negotiation-main">
          <section className="negotiation-card negotiation-note">
            <strong>Wybierz ogłoszenie sprzedaży</strong>
            <p>Analiza dotyczy konkretnego mieszkania lub domu. Otwórz ogłoszenie sprzedaży i kliknij „Ile mogę utargować?” - zobaczysz, jak jego cena wypada na tle rynku i jaki przedział negocjacji ma uzasadnienie w danych.</p>
            <Link className="negotiation-primary-link" to={ROUTES.buy}>Przeglądaj oferty sprzedaży <Icon name="arrow" /></Link>
          </section>
        </div>
        <aside className="negotiation-side">
          <section className="negotiation-card">
            <h3>Jak to działa?</h3>
            <ol className="negotiation-steps">
              <li>Liczymy cenę ogłoszenia za m²</li>
              <li>Porównujemy ją z cenami transakcyjnymi NBP i GUS w mieście</li>
              <li>Dokładamy średnią ogłoszeń z dzielnicy i miasta</li>
              <li>Wyznaczamy przedział negocjacji z opisanego wzoru</li>
            </ol>
          </section>
        </aside>
      </div>,
    );
  }

  if (listingError) {
    return shell(
      <section className="negotiation-card negotiation-note">
        <strong>Nie znaleźliśmy tego ogłoszenia</strong>
        <p>Ogłoszenie mogło zostać usunięte albo zakończone.</p>
        <Link className="negotiation-primary-link" to={ROUTES.buy}>Przeglądaj oferty sprzedaży <Icon name="arrow" /></Link>
      </section>,
    );
  }

  if (!listing) {
    return shell(<section className="negotiation-card negotiation-note"><p>Wczytujemy ogłoszenie…</p></section>);
  }

  if (listing.offerType !== 'SALE') {
    return shell(
      <section className="negotiation-card negotiation-note">
        <strong>Analiza dotyczy tylko ogłoszeń sprzedaży</strong>
        <p>Dla najmu nie mamy cen transakcyjnych, z którymi można by porównać czynsz.</p>
        <Link className="negotiation-primary-link" to={listingPath(listing.id)}>Wróć do ogłoszenia <Icon name="arrow" /></Link>
      </section>,
    );
  }

  const analysis = buildNegotiationAnalysis(listing, cityHistory, districtHistory);
  const place = [listing.city, listing.district].filter(Boolean).join(', ');
  const isOwner = Boolean(user && listing.ownerId != null && listing.ownerId === user.id);
  const photo = listing.photos[0] ?? heroImage;

  return shell(
    <div className="negotiation-layout">
      <div className="negotiation-main">
        <section className="negotiation-card negotiation-offer">
          <div className="negotiation-offer-photo" style={{ backgroundImage: `url(${photo})` }} />
          <div className="negotiation-offer-body">
            <h2><Link to={listingPath(listing.id)}>{listing.title}</Link></h2>
            <p>{place}</p>
            <small>{roomsLabel(listing.rooms)}  •  {formatArea(listing.area)}{listing.market ? `  •  rynek ${listing.market.toLowerCase()}` : ''}{listing.yearBuilt ? `  •  ${listing.yearBuilt} r.` : ''}</small>
          </div>
          <div className="negotiation-price">
            <span>Cena ofertowa</span>
            <strong>{formatPrice(listing.price)}</strong>
            <em>{formatPricePerArea(Math.round(analysis.offerPerMeter))}</em>
          </div>
        </section>

        <section className="negotiation-card negotiation-range">
          {marketLoading ? (
            <p>Pobieramy dane rynkowe dla lokalizacji {place}…</p>
          ) : !analysis.basis || analysis.basisValue == null || analysis.overpricePct == null ? (
            <div className="negotiation-range-head">
              <div>
                <p>Brak danych rynkowych</p>
                <h3 className="negotiation-range-text">Nie mamy z czym porównać tej ceny</h3>
                <small>Dla lokalizacji {place} nie ma cen transakcyjnych NBP ani GUS, a w serwisie jest za mało podobnych ogłoszeń (potrzebujemy co najmniej {NEGOTIATION_MIN_LISTINGS}).</small>
              </div>
            </div>
          ) : analysis.range ? (
            <>
              <div className="negotiation-range-head">
                <div>
                  <p>Proponowany przedział negocjacji</p>
                  <h3>{formatPrice(analysis.range.from)} - {formatPrice(analysis.range.to)}</h3>
                  <small>{formatPricePerAreaNumber(Math.round(analysis.range.from / listing.area))} - {formatPricePerArea(Math.round(analysis.range.to / listing.area))}</small>
                  <em className="negotiation-range-badge">Ogłoszenie jest o {analysis.overpricePct.toFixed(1).replace('.', ',')}% droższe niż wartość wg {analysis.basis.byLabel}.</em>
                </div>
              </div>
              <div className="negotiation-line" aria-hidden="true">
                <span className="dot left" />
                <span className="dot middle" />
                <span className="dot right" />
              </div>
              <div className="negotiation-line-meta">
                <div>
                  <strong>{formatPrice(analysis.range.from)}</strong>
                  <small>Wartość wg ceny rynkowej</small>
                </div>
                <div>
                  <strong>{formatPrice(listing.price - analysis.range.to)} - {formatPrice(listing.price - analysis.range.from)}</strong>
                  <small>Możliwa różnica względem ceny ofertowej</small>
                </div>
                <div>
                  <strong>{formatPrice(listing.price)}</strong>
                  <small>Cena ofertowa</small>
                </div>
              </div>
            </>
          ) : (
            <div className="negotiation-range-head">
              <div>
                <p>Cena na poziomie rynku lub niżej</p>
                <h3 className="negotiation-range-text">Pole do negocjacji jest małe</h3>
                <small>Cena ogłoszenia jest o {Math.abs(analysis.overpricePct).toFixed(1).replace('.', ',')}% niższa od wartości wg {analysis.basis.byLabel} ({formatPrice(roundToThousand(analysis.basisValue))}). Zamiast o cenę możesz rozmawiać o warunkach: terminie wydania, wyposażeniu, harmonogramie płatności.</small>
              </div>
            </div>
          )}
        </section>

        {analysis.references.length > 0 && (
          <section className="negotiation-card negotiation-why">
            <h3>Cena ogłoszenia na tle rynku</h3>
            <div className="negotiation-why-grid">
              {analysis.references.map((reference) => (
                <article key={reference.label}>
                  <span><Icon name={reference.transactional ? 'chart' : 'house'} /></span>
                  <div>
                    <strong>{reference.label}: {formatPricePerArea(reference.perMeter)}</strong>
                    <small>{reference.detail}. Ogłoszenie: {formatSignedPercent(((analysis.offerPerMeter - reference.perMeter) / reference.perMeter) * 100)}.</small>
                  </div>
                </article>
              ))}
            </div>
          </section>
        )}

        {analysis.basis && (
          <section className="negotiation-card negotiation-note">
            <strong>Jak liczymy przedział?</strong>
            <p>Dolna granica to wartość wg {analysis.basis.byLabel} ({formatPricePerArea(analysis.basis.perMeter)}) razy powierzchnia. Górna granica leży w połowie drogi między tą wartością a ceną ofertową. {analysis.basis.transactional ? 'Ceny NBP i GUS to średnie dla całego miasta - nie uwzględniają standardu, piętra ani dzielnicy tego mieszkania, więc traktuj wynik jako argument w rozmowie, a nie wycenę.' : 'Średnia ogłoszeń to ceny ofertowe, nie transakcyjne - realne ceny sprzedaży bywają niższe.'}</p>
          </section>
        )}
      </div>

      <aside className="negotiation-side">
        <section className="negotiation-card">
          <h3>Podobne ogłoszenia: {listing.city}</h3>
          {similar.length > 0 ? (
            <div className="negotiation-transactions">
              {similar.map((other) => (
                <Link key={other.id} to={listingPath(other.id)}>
                  <div className="photo" style={{ backgroundImage: `url(${other.coverPhoto ?? heroImage})` }} />
                  <div>
                    <strong>{other.district || other.city}</strong>
                    <small>{formatArea(other.area)} · {roomsLabel(other.rooms)}</small>
                  </div>
                  <div className="price">
                    <strong>{formatPrice(other.price)}</strong>
                    <small>{formatPricePerArea(Math.round(other.price / other.area))}</small>
                  </div>
                </Link>
              ))}
            </div>
          ) : (
            <p className="negotiation-empty">{marketLoading ? 'Szukamy podobnych ogłoszeń…' : 'Nie ma jeszcze innych ogłoszeń tego typu w tym mieście.'}</p>
          )}
          <Link className="ghost" to={buyCityPath(listing.city)}>Wszystkie oferty: {listing.city}</Link>
        </section>

        <section className="negotiation-card tip">
          <strong>Co dalej?</strong>
          {!isOwner && <p><Link to={newConversationPath(listing.id)}>Napisz do sprzedającego</Link> - zaproponuj cenę i powołaj się na dane z tej strony.</p>}
          <p><Link to={priceHistoryPath(place, listing.propertyType === 'HOUSE' ? 'Dom' : 'Mieszkanie')}>Historia cen: {place}</Link></p>
        </section>
      </aside>
    </div>,
  );
}

// Nieprzeczytane wiadomosci (rozmowy o ogloszeniach + rozmowa z administracja) dla kazdego
// zalogowanego konta - admin tez moze sprzedawac. Wspolne dla menu konta i paska gornego;
// odswiezane co 25 s oraz po zmianie strony, np. po otwarciu rozmowy.
function useMessagesUnreadCount(): number {
  const { user } = useAuth();
  const { pathname } = useLocation();
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (!user) {
      setCount(0);
      return;
    }

    let cancelled = false;
    const loadUnread = () => {
      apiFetch<{ count: number }>('/messages/unread-count')
        .then((data) => {
          if (!cancelled) {
            setCount(data.count);
          }
        })
        .catch(() => {
          if (!cancelled) {
            setCount(0);
          }
        });
    };

    loadUnread();
    const intervalId = window.setInterval(loadUnread, 25000);

    return () => {
      cancelled = true;
      window.clearInterval(intervalId);
    };
  }, [user, pathname]);

  return count;
}

function AccountSidebar() {
  const { user } = useAuth();
  const location = useLocation();
  // Ustawienia obejmuja takze podglad profilu publicznego - podswietlamy je wspolna pozycja menu.
  const isSettingsSection = location.pathname === ROUTES.accountSettings
    || location.pathname === ROUTES.accountPublicProfile;
  const messagesUnreadCount = useMessagesUnreadCount();
  // Liczba ogloszen konta pochodzi z serwera (/listings/mine) - tak samo jak lista na /konto/moje-oferty.
  const [allListingsCount, setAllListingsCount] = useState(0);
  // Spotkania na dzisiaj (odwolane i odrzucone sie nie licza) - z konta, nie z przegladarki.
  const [todayMeetingsCount, setTodayMeetingsCount] = useState(0);
  useEffect(() => {
    if (!user) {
      setTodayMeetingsCount(0);
      return;
    }
    let cancelled = false;
    const now = new Date();
    const todayKey = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
    apiFetch<ApiMeeting[]>('/meetings')
      .then((items) => {
        if (!cancelled) {
          setTodayMeetingsCount(items.filter((item) => item.date === todayKey
            && item.status !== 'CANCELLED' && item.status !== 'DECLINED').length);
        }
      })
      .catch(() => { if (!cancelled) { setTodayMeetingsCount(0); } });
    return () => { cancelled = true; };
  }, [user, location.pathname]);
  // Zapisane wyszukiwania sa na koncie, wiec licznik bierzemy z serwera - tak jak liczbe ofert.
  const [savedSearchCount, setSavedSearchCount] = useState(0);
  useEffect(() => {
    if (!user) {
      setSavedSearchCount(0);
      return;
    }
    let cancelled = false;
    apiFetch<ApiSavedSearch[]>('/saved-searches')
      .then((items) => { if (!cancelled) { setSavedSearchCount(items.length); } })
      .catch(() => { if (!cancelled) { setSavedSearchCount(0); } });
    return () => { cancelled = true; };
  }, [user, location.pathname]);
  // Ulubione sa na koncie - licznik bierzemy z serwera, tak jak liczbe ofert i wyszukiwan.
  const [favoritesCount, setFavoritesCount] = useState(0);
  useEffect(() => {
    if (!user) {
      setFavoritesCount(0);
      return;
    }
    let cancelled = false;
    apiFetch<ApiListingSummary[]>('/listings/favorites')
      .then((items) => { if (!cancelled) { setFavoritesCount(items.length); } })
      .catch(() => { if (!cancelled) { setFavoritesCount(0); } });
    return () => { cancelled = true; };
  }, [user, location.pathname]);
  // Licznik obejmuje oba rodzaje alertow - lokalizacji i pojedynczych ogloszen -
  // dokladnie tak, jak lista na /konto/alerty-cenowe.
  const priceAlertsCount = user
    ? readUserJsonStorage<CityPriceAlertSubscription[]>(user, CITY_PRICE_ALERTS_STORAGE_SUFFIX, []).length
      + readUserJsonStorage<ListingPriceAlertSubscription[]>(user, LISTING_PRICE_ALERTS_STORAGE_SUFFIX, []).length
    : 0;

  useEffect(() => {
    if (!user) {
      setAllListingsCount(0);
      return;
    }

    let cancelled = false;
    apiFetch<ApiListingSummary[]>('/listings/mine')
      .then((listings) => {
        if (!cancelled) {
          setAllListingsCount(listings.length);
        }
      })
      .catch(() => {
        if (!cancelled) {
          setAllListingsCount(0);
        }
      });

    return () => {
      cancelled = true;
    };
  }, [user, location.pathname]);

  return (
    <aside className="account-sidebar">
      <div className="account-profile-card">
        <Avatar className="account-avatar" name={getDisplayName(user)} image={user?.avatarImage} />
        <div>
          <strong>{getDisplayName(user)}</strong>
          <small>{user?.email}</small>
          <em className={user?.verified ? 'verified' : 'pending'}>
            {user?.verified ? 'Adres e-mail potwierdzony' : 'Potwierdź adres e-mail'}
          </em>
        </div>
      </div>

      <div className="account-menu">
        <h3>Moje aktywności</h3>
        <NavLink to={ROUTES.account} end className={navLinkClass}><Icon name="house" /> Panel główny</NavLink>
        <NavLink to={ROUTES.accountSearches} className={navLinkClass}><Icon name="search" /> Zapisane wyszukiwania <span>{savedSearchCount}</span></NavLink>
        <NavLink to={ROUTES.favorites} className={navLinkClass}><Icon name="heart" /> Ulubione ogłoszenia <span>{favoritesCount}</span></NavLink>
        <NavLink to={ROUTES.accountPriceAlerts} className={navLinkClass}><Icon name="bell" /> Alerty cenowe <span>{priceAlertsCount}</span></NavLink>
        <NavLink to={ROUTES.comparison} className={navLinkClass}><Icon name="shuffle" /> Porównanie mieszkań</NavLink>
      </div>

      <div className="account-menu">
        <h3>Moje transakcje</h3>
        <NavLink to={ROUTES.messages} className={navLinkClass}><Icon name="message" /> Zapytania i wiadomości <span>{messagesUnreadCount}</span></NavLink>
        <NavLink to={ROUTES.accountMeetings} className={navLinkClass}><Icon name="calendar" /> Umówione spotkania {todayMeetingsCount > 0 && <span className="tag">{todayMeetingsCount}</span>}</NavLink>
        <NavLink to={ROUTES.accountListings} className={navLinkClass}><Icon name="document" /> Moje oferty <span className="tag">{allListingsCount}</span></NavLink>
      </div>

      <div className="account-menu">
        <h3>Moje narzędzia</h3>
        <NavLink to={ROUTES.creditCalculator} className={navLinkClass}><Icon name="money" /> Zdolność kredytowa</NavLink>
        <NavLink to={ROUTES.priceHistory} className={navLinkClass}><Icon name="chart" /> Historia cen</NavLink>
        <NavLink to={ROUTES.negotiation} className={navLinkClass}><Icon name="coin" /> Ile możesz utargować?</NavLink>
        <NavLink to={ROUTES.districtRanking} className={navLinkClass}><Icon name="house" /> Ranking dzielnic</NavLink>
      </div>

      <div className="account-menu">
        <h3>Ustawienia</h3>
        <NavLink to={ROUTES.accountSettings} className={isSettingsSection ? 'active' : ''}><Icon name="gear" /> Dane i ustawienia</NavLink>
        <NavLink to={ROUTES.notifications} className={navLinkClass}><Icon name="bell" /> Powiadomienia</NavLink>
        <NavLink to={ROUTES.accountHelpContact} className={navLinkClass}><Icon name="phone" /> Pomoc i kontakt</NavLink>
      </div>

      <div className="account-premium-card">
        <div>
          <strong><Icon name="coin" /> Konto Premium <em className="soon-tag">Wkrótce</em></strong>
          <p>Zyskaj dostęp do dodatkowych narzędzi i raportów.</p>
        </div>
        <button type="button" disabled title={SOON_HINT}>Sprawdź korzyści</button>
      </div>
    </aside>
  );
}

/**
 * Wspolny layout stron konta, ktore maja wlasny adres poza /konto/*:
 * /ulubione, /wiadomosci, /powiadomienia oraz narzedzia (wycena, historia cen,
 * ranking, negocjacje). Dzieki niemu otwieraja sie tak samo jak /konto/wyszukiwania,
 * bez powtarzania ukladu w kazdej stronie.
 *
 * Gosc (bez logowania) dostaje sama strone jak /kupno - menu konta pojawia sie
 * dopiero po zalogowaniu.
 */
function AccountShell() {
  const { user } = useAuth();

  if (!user) {
    return <Outlet />;
  }

  return (
    <section className="account-page account-shell" aria-label="Panel użytkownika">
      <div className="account-layout">
        <AccountSidebar />
        <div className="account-main">
          <Outlet />
        </div>
      </div>
    </section>
  );
}

function AccountDashboardPage({
  savedSearches,
  onOpenSavedSearch,
}: {
  savedSearches: SavedSearchRecord[];
  onOpenSavedSearch: (savedSearch: SavedSearchRecord) => void;
}) {
  const navigate = useNavigate();
  const { user } = useAuth();
  const { formatPrice, formatMonthlyPrice, formatPricePerArea, formatArea } = useDisplay();
  type DashboardWidgetId = 'recent' | 'alerts' | 'searches' | 'tools';
  type DashboardWidgetConfig = {
    id: DashboardWidgetId;
    label: string;
    visible: boolean;
    layout: 'normal' | 'wide';
    order: number;
  };

  // Uklad kafelkow to personalizacja konta - na wspolnym komputerze kazde konto ma swoj.
  const dashboardWidgetsStorageKey = accountStorageKey('dashboard-widgets', user);

  // Realne dane panelu: ostatnio oglądane oferty (localStorage) i alerty cenowe użytkownika
  // (to samo źródło co strona /konto/alerty-cenowe).
  const [recentlyViewed, setRecentlyViewed] = useState<RecentlyViewedItem[]>(() => readRecentlyViewed(user));
  const [cityAlerts, setCityAlerts] = useState<CityPriceAlertSubscription[]>(
    () => readUserJsonStorage<CityPriceAlertSubscription[]>(user, CITY_PRICE_ALERTS_STORAGE_SUFFIX, []),
  );

  // Po zmianie konta wczytujemy dane właściwego użytkownika.
  useEffect(() => {
    setRecentlyViewed(readRecentlyViewed(user));
    setCityAlerts(readUserJsonStorage<CityPriceAlertSubscription[]>(user, CITY_PRICE_ALERTS_STORAGE_SUFFIX, []));
  }, [user]);

  // Przełącznik powiadomień alertu - zapis trafia do tego samego miejsca co na stronie alertów,
  // więc zmiana jest spójna w całej aplikacji. Brak wartości traktujemy jako "włączone".
  const toggleCityAlert = (key: string) => {
    setCityAlerts((current) => {
      const next = current.map((alert) => (alert.key === key
        ? { ...alert, notificationsEnabled: alert.notificationsEnabled === false }
        : alert));
      writeUserJsonStorage(user, CITY_PRICE_ALERTS_STORAGE_SUFFIX, next);
      return next;
    });
  };

  const tools = [
    { icon: 'money', title: 'Zdolność kredytowa', text: 'Sprawdź, na jaki kredyt Cię stać i jaka będzie rata', path: ROUTES.creditCalculator },
    { icon: 'chart', title: 'Historia cen', text: 'Sprawdź jak zmieniały się ceny mieszkań w czasie', path: ROUTES.priceHistory },
    { icon: 'coin', title: 'Ile możesz utargować?', text: 'Porównaj cenę ogłoszenia z cenami transakcyjnymi', path: ROUTES.negotiation },
    { icon: 'calculator', title: 'Wycena mieszkania', text: 'Darmowa wycena Twojego mieszkania online', path: ROUTES.valuation },
    { icon: 'house', title: 'Ranking dzielnic', text: 'Zobacz najlepsze dzielnice w Polsce', path: ROUTES.districtRanking },
    { icon: 'shuffle', title: 'Porównanie mieszkań', text: 'Porównuj oferty i wybieraj najlepsze', path: ROUTES.comparison },
  ];

  const defaultDashboardWidgets: DashboardWidgetConfig[] = [
    { id: 'recent', label: 'Ostatnio oglądane', visible: false, layout: 'normal', order: 0 },
    { id: 'alerts', label: 'Alerty cenowe', visible: false, layout: 'normal', order: 1 },
    { id: 'searches', label: 'Moje wyszukiwania', visible: false, layout: 'normal', order: 2 },
    { id: 'tools', label: 'Narzędzia Polska Lokalnie', visible: false, layout: 'normal', order: 3 },
  ];

  const widgetCardMeta: Record<DashboardWidgetId, { icon: string; description: string; tone: 'green' | 'blue' | 'pink' | 'amber' }> = {
    recent: { icon: 'house', description: 'Podgląd ostatnio oglądanych ofert i mieszkań.', tone: 'green' },
    searches: { icon: 'search', description: 'Twoje zapisane wyszukiwania i nowe dopasowania.', tone: 'blue' },
    alerts: { icon: 'bell', description: 'Alerty cenowe i ważne powiadomienia z rynku.', tone: 'amber' },
    tools: { icon: 'gear', description: 'Szybki dostęp do narzędzi serwisu Polska Lokalnie i analiz.', tone: 'pink' },
  };

  const [showWidgetEditLauncher, setShowWidgetEditLauncher] = useState(false);
  const [isWidgetEditorOpen, setIsWidgetEditorOpen] = useState(false);
  const [draggedWidgetId, setDraggedWidgetId] = useState<DashboardWidgetId | null>(null);
  const [dragOverWidgetId, setDragOverWidgetId] = useState<DashboardWidgetId | null>(null);
  const readDashboardWidgets = (storageKey: string): DashboardWidgetConfig[] => {
    try {
      const raw = window.localStorage.getItem(storageKey);
      if (!raw) {
        return defaultDashboardWidgets;
      }
      const parsed = JSON.parse(raw);
      if (!Array.isArray(parsed)) {
        return defaultDashboardWidgets;
      }

      const merged = defaultDashboardWidgets.map((fallback) => {
        const current = parsed.find((item) => item && item.id === fallback.id);
        return {
          ...fallback,
          visible: typeof current?.visible === 'boolean' ? current.visible : fallback.visible,
          layout: (current?.layout === 'wide' ? 'wide' : 'normal') as 'normal' | 'wide',
          order: typeof current?.order === 'number' ? current.order : fallback.order,
        };
      });

      return merged.sort((left, right) => left.order - right.order).map((item, index) => ({ ...item, order: index }));
    } catch {
      return defaultDashboardWidgets;
    }
  };

  const [dashboardWidgets, setDashboardWidgets] = useState<DashboardWidgetConfig[]>(
    () => readDashboardWidgets(dashboardWidgetsStorageKey),
  );

  // Po zmianie konta wczytujemy uklad wlasciwego uzytkownika, zeby nie zapisac mu cudzego.
  useEffect(() => {
    setDashboardWidgets(readDashboardWidgets(dashboardWidgetsStorageKey));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dashboardWidgetsStorageKey]);

  useEffect(() => {
    window.localStorage.setItem(dashboardWidgetsStorageKey, JSON.stringify(dashboardWidgets));
  }, [dashboardWidgets, dashboardWidgetsStorageKey]);

  const sortedWidgets = [...dashboardWidgets].sort((left, right) => left.order - right.order);

  const updateWidget = (id: DashboardWidgetId, changes: Partial<DashboardWidgetConfig>) => {
    setDashboardWidgets((current) => current.map((widget) => (widget.id === id ? { ...widget, ...changes } : widget)));
  };

  const moveWidget = (id: DashboardWidgetId, direction: -1 | 1) => {
    setDashboardWidgets((current) => {
      const sorted = [...current].sort((left, right) => left.order - right.order);
      const index = sorted.findIndex((widget) => widget.id === id);
      const nextIndex = index + direction;
      if (index < 0 || nextIndex < 0 || nextIndex >= sorted.length) {
        return current;
      }
      const copy = [...sorted];
      [copy[index], copy[nextIndex]] = [copy[nextIndex], copy[index]];
      return copy.map((item, order) => ({ ...item, order }));
    });
  };

  const reorderWidgets = (sourceId: DashboardWidgetId, targetId: DashboardWidgetId) => {
    if (sourceId === targetId) {
      return;
    }

    setDashboardWidgets((current) => {
      const sorted = [...current].sort((left, right) => left.order - right.order);
      const sourceIndex = sorted.findIndex((item) => item.id === sourceId);
      const targetIndex = sorted.findIndex((item) => item.id === targetId);
      if (sourceIndex < 0 || targetIndex < 0) {
        return current;
      }

      const next = [...sorted];
      const [moved] = next.splice(sourceIndex, 1);
      next.splice(targetIndex, 0, moved);
      return next.map((item, order) => ({ ...item, order }));
    });
  };

  const restoreDefaultWidgets = () => {
    setDashboardWidgets(defaultDashboardWidgets);
  };

  const openWidgetEditor = () => {
    setShowWidgetEditLauncher(true);
    setIsWidgetEditorOpen(true);
    window.requestAnimationFrame(() => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  };

  // Wspolny naglowek widzetu: kolorowa ikona (wg tonu), tytul, podpis i akcja po prawej -
  // ten sam jezyk wizualny co karty w katalogu "Dostepne widzety".
  const renderWidgetHead = (id: DashboardWidgetId, action?: ReactNode) => {
    const meta = widgetCardMeta[id];
    const label = defaultDashboardWidgets.find((widget) => widget.id === id)?.label ?? '';
    return (
      <div className="account-panel-head">
        <div className={`account-panel-title ${meta.tone}`}>
          <span className="account-panel-icon"><Icon name={meta.icon} /></span>
          <div>
            <h2>{label}</h2>
            <small>{meta.description}</small>
          </div>
        </div>
        {action}
      </div>
    );
  };

  const widgetSections: Record<DashboardWidgetId, ReactNode> = {
    recent: (
      <section className="account-panel" key="recent">
        {renderWidgetHead('recent', recentlyViewed.length > 0
          ? <Link to={ROUTES.buy}>Zobacz wszystkie <Icon name="arrow" /></Link>
          : undefined)}
        {recentlyViewed.length === 0 ? (
          <p className="account-searches-empty">Nie masz jeszcze przeglądanych ofert. Otwórz dowolne ogłoszenie, a pojawi się tutaj.</p>
        ) : (
          <div className="account-listings">
            {recentlyViewed.slice(0, 3).map((listing) => (
              <article
                key={listing.id}
                role="button"
                tabIndex={0}
                onClick={() => navigate(listingPath(listing.id))}
                onKeyDown={(event) => { if (event.key === 'Enter') { navigate(listingPath(listing.id)); } }}
              >
                <div className="photo" style={{ backgroundImage: `url(${listing.photo ?? heroImage})` }} />
                <strong>{listing.offerType === 'RENT' ? formatMonthlyPrice(listing.price) : formatPrice(listing.price)}</strong>
                <h3>{listing.title}</h3>
                <p>{[listing.city, listing.district].filter(Boolean).join(', ')}</p>
                <small>{formatArea(listing.area)}{listing.rooms ? ` • ${listing.rooms} ${listing.rooms === 1 ? 'pokój' : 'pokoje'}` : ''}</small>
                {listing.area > 0 && <em>{formatPricePerArea(listing.price / listing.area)}</em>}
              </article>
            ))}
          </div>
        )}
      </section>
    ),
    alerts: (
      <section className="account-panel" key="alerts">
        {renderWidgetHead('alerts', <Link to={ROUTES.accountPriceAlerts}>Zarządzaj alertami <Icon name="arrow" /></Link>)}
        <div className="account-alerts">
          {cityAlerts.slice(0, 3).map((alert) => {
            const enabled = alert.notificationsEnabled !== false;
            return (
              <article key={alert.key}>
                <span><Icon name="chart" /></span>
                <div>
                  <strong>{alert.label}</strong>
                  <small>{alert.propertyType} • {alert.marketType}</small>
                </div>
                <button
                  type="button"
                  className={`account-toggle ${enabled ? 'on' : ''}`}
                  aria-label={`Przełącz powiadomienia alertu: ${alert.label}`}
                  aria-pressed={enabled}
                  onClick={() => toggleCityAlert(alert.key)}
                />
              </article>
            );
          })}
          {cityAlerts.length === 0 && (
            <p className="account-searches-empty">Nie masz jeszcze alertów cenowych. Utwórz alert dla wybranej lokalizacji, a damy znać o zmianach cen.</p>
          )}
          <Link className="account-add-alert" to={ROUTES.accountPriceAlerts}>Utwórz nowy alert <Icon name="plus" /></Link>
        </div>
      </section>
    ),
    searches: (
      <section className="account-panel" key="searches">
        {renderWidgetHead('searches', <Link to={ROUTES.accountSearches}>Zobacz wszystkie <Icon name="arrow" /></Link>)}
        <div className="account-searches">
          {savedSearches.slice(0, 4).map((row) => (
            <article
              key={row.id}
              role="button"
              tabIndex={0}
              onClick={() => onOpenSavedSearch(row)}
              onKeyDown={(event) => {
                if (event.key === 'Enter' || event.key === ' ') {
                  event.preventDefault();
                  onOpenSavedSearch(row);
                }
              }}
            >
              <span><Icon name="search" /></span>
              <div>
                <strong>{savedSearchPlaceLabel(row)}</strong>
                <small>{savedSearchMetaLabel(row)}</small>
              </div>
              <em>Zaktualizowano<br />{savedSearchUpdatedLabel(row.updatedAt)}</em>
              <b>{savedSearchModeLabel(row.mode)}<br />Tryb</b>
              <button type="button" aria-label={`Otwórz wyszukiwanie: ${savedSearchPlaceLabel(row)}`} onClick={(event) => { event.stopPropagation(); onOpenSavedSearch(row); }}><Icon name="chevron" /></button>
            </article>
          ))}
          {savedSearches.length === 0 && <p className="account-searches-empty">Nie masz jeszcze zapisanych wyszukiwań. Wejdź w Kup lub Wynajem i kliknij dzwonek „Zapisz wyszukiwanie”.</p>}
          <Link className="account-new-search" to={ROUTES.buy}>Utwórz nowe wyszukiwanie <Icon name="plus" /></Link>
        </div>
      </section>
    ),
    tools: (
      <section className="account-panel" key="tools">
        {renderWidgetHead('tools')}
        <div className="account-tools">
          {tools.map((tool) => (
            // Kafelek prowadzi na inna strone, wiec jest linkiem - bez protezy role="button".
            <Link key={tool.title} to={tool.path}>
              <span><Icon name={tool.icon} /></span>
              <div>
                <strong>{tool.title}</strong>
                <small>{tool.text}</small>
              </div>
            </Link>
          ))}
        </div>
      </section>
    ),
  };

  return (
    <section className="account-page" aria-label="Panel konta użytkownika">
      <div className="account-layout">
        <AccountSidebar />

        <div className="account-main">
          <div className="account-heading">
            <div>
              {/* Firma nie ma imienia - witamy pelna nazwa firmy zamiast pierwszego slowa. */}
              <h1>Witaj, {user?.accountType === 'COMPANY' ? getDisplayName(user) : getFirstName(getDisplayName(user))}! <span aria-hidden="true">👋</span></h1>
              <p>Zarządzaj swoimi wyszukiwaniami, ofertami i ulubionymi ogłoszeniami.</p>
            </div>
            <button
              type="button"
              onClick={() => {
                if (isWidgetEditorOpen) {
                  setShowWidgetEditLauncher(false);
                  setIsWidgetEditorOpen(false);
                } else {
                  openWidgetEditor();
                }
              }}
            >
              <Icon name="gear" /> Edytuj profil
            </button>
          </div>

          {sortedWidgets.some((widget) => widget.visible) && (
            <div className="account-grid">
              {sortedWidgets.filter((widget) => widget.visible).map((widget) => (
                <div key={widget.id} className={widget.layout === 'wide' ? 'account-widget-slot wide' : 'account-widget-slot'}>
                  {widgetSections[widget.id]}
                </div>
              ))}
            </div>
          )}

          {isWidgetEditorOpen && (
            <div className="account-grid account-grid-empty editor-open">
              <div className="account-widget-customizer centered">
                <div className="account-widget-customizer-head">
                  <div>
                    <strong>Dostępne widżety</strong>
                    <small>Wybierz widżety, które chcesz dodać do swojego panelu.</small>
                  </div>
                  <div className="account-widget-customizer-head-actions">
                    <button type="button" onClick={restoreDefaultWidgets}><Icon name="shuffle" /> Przywróć domyślny układ</button>
                    <button
                      type="button"
                      onClick={() => {
                        setIsWidgetEditorOpen(false);
                        setShowWidgetEditLauncher(false);
                      }}
                    >
                      Zamknij
                    </button>
                  </div>
                </div>

                <section className="account-widget-catalog" aria-label="Katalog widżetów">
                  {sortedWidgets.map((widget) => {
                    const meta = widgetCardMeta[widget.id];
                    return (
                      <article key={widget.id} className={`account-widget-card ${meta.tone}`}>
                        <span><Icon name={meta.icon} /></span>
                        <div>
                          <strong>{widget.label}</strong>
                          <small>{meta.description}</small>
                        </div>
                        <button type="button" onClick={() => updateWidget(widget.id, { visible: !widget.visible })}>
                          <Icon name="plus" /> {widget.visible ? 'Usuń' : 'Dodaj'}
                        </button>
                      </article>
                    );
                  })}
                </section>

                <div className="account-widget-tip">
                  <Icon name="spark" />
                  <span>Wskazówka: przeciągaj widżety poniżej, aby szybko zmieniać ich kolejność na panelu.</span>
                </div>

                <div className="account-widget-customizer-head secondary">
                  <strong>Kolejność i układ aktywnych widżetów</strong>
                </div>

                <section className="account-widget-editor" aria-label="Ustawienia widżetów panelu głównego">
                  {sortedWidgets.filter((widget) => widget.visible).map((widget) => (
                    <article
                      key={widget.id}
                      draggable
                      className={dragOverWidgetId === widget.id ? 'drop-target' : ''}
                      onDragStart={() => {
                        setDraggedWidgetId(widget.id);
                      }}
                      onDragOver={(event) => {
                        event.preventDefault();
                        if (dragOverWidgetId !== widget.id) {
                          setDragOverWidgetId(widget.id);
                        }
                      }}
                      onDrop={(event) => {
                        event.preventDefault();
                        if (draggedWidgetId) {
                          reorderWidgets(draggedWidgetId, widget.id);
                        }
                        setDraggedWidgetId(null);
                        setDragOverWidgetId(null);
                      }}
                      onDragEnd={() => {
                        setDraggedWidgetId(null);
                        setDragOverWidgetId(null);
                      }}
                    >
                      <strong>{widget.label}</strong>
                      <div className="account-widget-editor-controls">
                        <select value={widget.layout} onChange={(event) => updateWidget(widget.id, { layout: event.target.value as 'normal' | 'wide' })}>
                          <option value="normal">Układ normalny</option>
                          <option value="wide">Pełna szerokość</option>
                        </select>
                        <button type="button" onClick={() => moveWidget(widget.id, -1)}>W górę</button>
                        <button type="button" onClick={() => moveWidget(widget.id, 1)}>W dół</button>
                        <small>Przeciągnij</small>
                      </div>
                    </article>
                  ))}
                </section>
              </div>
            </div>
          )}

          {!isWidgetEditorOpen && !sortedWidgets.some((widget) => widget.visible) ? (
            <div className="account-grid account-grid-empty">
              <div className="account-empty-add">
                <section className="account-empty-state-card" aria-label="Dostosuj panel">
                  <div className="account-empty-visual" aria-hidden="true">
                    <span className="left-chip"><Icon name="chart" /></span>
                    <div className="center-chip">
                      <Icon name="document" />
                      <i />
                    </div>
                    <span className="right-chip"><Icon name="plus" /></span>
                  </div>
                  <h2>Dostosuj swój panel</h2>
                  <p>Dodaj widżety, aby mieć szybki dostęp do tego, co dla Ciebie najważniejsze.</p>
                  <button
                    type="button"
                    className="account-empty-add-button"
                    onClick={openWidgetEditor}
                  >
                    <Icon name="plus" /> Dodaj widżety
                  </button>
                </section>
              </div>
            </div>
          ) : null}
        </div>
      </div>
    </section>
  );
}

function AccountSavedSearchesPage({
  savedSearches,
  onOpenSavedSearch,
  onRemoveSavedSearch,
}: {
  savedSearches: SavedSearchRecord[];
  onOpenSavedSearch: (savedSearch: SavedSearchRecord) => void;
  onRemoveSavedSearch: (savedSearchId: string) => void;
}) {
  const navigate = useNavigate();
  const [query, setQuery] = useState('');
  const [modeFilter, setModeFilter] = useState<'all' | SavedSearchMode>('all');
  const [sortMode, setSortMode] = useState<'newest' | 'oldest' | 'city'>('newest');

  const normalizedQuery = query.trim().toLowerCase();
  const allCount = savedSearches.length;
  const buyCount = savedSearches.filter((item) => item.mode === 'buy').length;
  const rentCount = savedSearches.filter((item) => item.mode === 'rent').length;

  const filteredSavedSearches = useMemo(() => {
    const byMode = modeFilter === 'all'
      ? savedSearches
      : savedSearches.filter((item) => item.mode === modeFilter);

    const byQuery = normalizedQuery.length === 0
      ? byMode
      : byMode.filter((item) => {
        const target = [savedSearchPlaceLabel(item), savedSearchMetaLabel(item), savedSearchModeLabel(item.mode)].join(' ').toLowerCase();
        return target.includes(normalizedQuery);
      });

    return [...byQuery].sort((left, right) => {
      if (sortMode === 'oldest') {
        return new Date(left.updatedAt).getTime() - new Date(right.updatedAt).getTime();
      }
      if (sortMode === 'city') {
        return savedSearchPlaceLabel(left).localeCompare(savedSearchPlaceLabel(right), 'pl');
      }
      return new Date(right.updatedAt).getTime() - new Date(left.updatedAt).getTime();
    });
  }, [modeFilter, normalizedQuery, savedSearches, sortMode]);

  return (
    <section className="account-page account-searches-page" aria-label="Zapisane wyszukiwania">
      <div className="account-layout">
        <AccountSidebar />

        <div className="account-main">
          <section className="account-panel account-searches-panel">
            <div className="account-panel-head account-searches-page-head">
              <div>
                <h1>Zapisane wyszukiwania</h1>
                <p>Wróć do swoich filtrów jednym kliknięciem i przejdź od razu do odpowiedniej listy ofert.</p>
              </div>
              <Link to={ROUTES.buy}>Dodaj nowe <Icon name="plus" /></Link>
            </div>

            <div className="account-searches-stats" aria-label="Statystyki zapisanych wyszukiwań">
              <article>
                <small>Wszystkie</small>
                <strong>{allCount}</strong>
              </article>
              <article>
                <small>Kupno</small>
                <strong>{buyCount}</strong>
              </article>
              <article>
                <small>Wynajem</small>
                <strong>{rentCount}</strong>
              </article>
            </div>

            <div className="account-searches-toolbar">
              <label className="account-searches-input" aria-label="Wyszukaj zapisane wyszukiwania">
                <Icon name="search" />
                <input
                  type="text"
                  value={query}
                  onChange={(event) => setQuery(event.target.value)}
                  placeholder="Szukaj po lokalizacji, metrażu, cenie..."
                />
              </label>

              <div className="account-searches-mode-tabs" role="tablist" aria-label="Filtr trybu wyszukiwania">
                <button type="button" className={modeFilter === 'all' ? 'active' : ''} onClick={() => setModeFilter('all')}>Wszystkie</button>
                <button type="button" className={modeFilter === 'buy' ? 'active' : ''} onClick={() => setModeFilter('buy')}>Kupno</button>
                <button type="button" className={modeFilter === 'rent' ? 'active' : ''} onClick={() => setModeFilter('rent')}>Wynajem</button>
              </div>

              <label className="account-searches-sort">
                <span>Sortuj</span>
                <select value={sortMode} onChange={(event) => setSortMode(event.target.value as 'newest' | 'oldest' | 'city')}>
                  <option value="newest">Najnowsze</option>
                  <option value="oldest">Najstarsze</option>
                  <option value="city">Lokalizacja A-Z</option>
                </select>
              </label>
            </div>

            <div className="account-searches">
              {filteredSavedSearches.map((savedSearch) => (
                <article
                  key={savedSearch.id}
                  role="button"
                  tabIndex={0}
                  onClick={() => onOpenSavedSearch(savedSearch)}
                  onKeyDown={(event) => {
                    if (event.key === 'Enter' || event.key === ' ') {
                      event.preventDefault();
                      onOpenSavedSearch(savedSearch);
                    }
                  }}
                >
                  <span><Icon name="search" /></span>
                  <div>
                    <strong>{savedSearchPlaceLabel(savedSearch)}</strong>
                    <small>{savedSearchMetaLabel(savedSearch)}</small>
                  </div>
                  <em><Icon name="calendar" /> {savedSearchUpdatedLabel(savedSearch.updatedAt)}</em>
                  <b className={`account-search-mode-pill ${savedSearch.mode === 'rent' ? 'rent' : 'buy'}`}>{savedSearchModeLabel(savedSearch.mode)}</b>
                  <button
                    type="button"
                    className="account-search-open"
                    aria-label={`Przejdź do wyników: ${savedSearchPlaceLabel(savedSearch)}`}
                    onClick={(event) => {
                      event.stopPropagation();
                      onOpenSavedSearch(savedSearch);
                    }}
                  >
                    Przejdź do wyników <Icon name="arrow" />
                  </button>
                  <button
                    type="button"
                    className="account-search-remove"
                    aria-label={`Usuń wyszukiwanie: ${savedSearchPlaceLabel(savedSearch)}`}
                    onClick={(event) => {
                      event.stopPropagation();
                      onRemoveSavedSearch(savedSearch.id);
                    }}
                  >
                    <Icon name="trash" /> Usuń
                  </button>
                </article>
              ))}
            </div>

            {savedSearches.length === 0 && (
              <div className="account-searches-empty-state">
                <strong>Nie masz jeszcze zapisanych wyszukiwań</strong>
                <p>Ustaw filtry w Kup lub Wynajem i kliknij dzwonek „Zapisz wyszukiwanie”, a pojawią się tutaj.</p>
                <Link className="account-empty-add-button" to={ROUTES.buy}>
                  <Icon name="search" /> Przejdź do wyszukiwania
                </Link>
              </div>
            )}

            {savedSearches.length > 0 && filteredSavedSearches.length === 0 && (
              <div className="account-searches-empty-state filtered">
                <strong>Brak wyników dla podanych filtrów</strong>
                <p>Spróbuj zmienić frazę wyszukiwania, tryb albo sortowanie.</p>
                <button
                  type="button"
                  className="account-empty-add-button"
                  onClick={() => {
                    setQuery('');
                    setModeFilter('all');
                    setSortMode('newest');
                  }}
                >
                  <Icon name="shuffle" /> Wyczyść filtry
                </button>
              </div>
            )}
          </section>
        </div>
      </div>
    </section>
  );
}

function AccountHelpContactPage({
  user,
}: {
  user: AuthUser | null;
}) {
  type HelpContactFormValues = {
    fullName: string;
    email: string;
    topic: string;
    message: string;
  };

  type HelpContactFeedback = {
    type: 'success' | 'error';
    text: string;
  };

  // Kanaly kontaktu: e-mail i telefon otwieraja program pocztowy albo dzwonia, formularz jest nizej na stronie.
  const supportChannels = [
    {
      id: 'email',
      icon: 'mail',
      iconTone: 'blue',
      title: 'E-mail',
      description: 'Napisz do nas, odpowiemy najszybciej jak to możliwe.',
      action: SUPPORT_EMAIL,
      href: `mailto:${SUPPORT_EMAIL}`,
    },
    {
      id: 'phone',
      icon: 'phone',
      iconTone: 'violet',
      title: 'Telefon',
      description: 'Zadzwoń do nas, chętnie odpowiemy na Twoje pytania.',
      action: SUPPORT_PHONE,
      href: SUPPORT_PHONE_HREF,
    },
    {
      id: 'form',
      icon: 'document',
      iconTone: 'orange',
      title: 'Formularz kontaktowy',
      description: 'Wyślij nam wiadomość, a my skontaktujemy się z Tobą.',
      action: 'Napisz poniżej',
    },
  ] as const;

  // Odpowiedzi opisuja to, co serwis naprawde robi - kazda prowadzi do wlasciwej strony.
  const faqItems = [
    {
      question: 'Jak dodać ogłoszenie?',
      answer: <>Wypełnij formularz na stronie <Link to={ROUTES.add}>Dodaj ogłoszenie</Link>. Po wysłaniu ogłoszenie czeka na akceptację obsługi i dopiero potem pojawia się na liście ofert.</>,
    },
    {
      question: 'Ile kosztuje dodanie ogłoszenia?',
      answer: <>Nic. Dodanie i publikacja ogłoszenia są bezpłatne, nie pobieramy prowizji od sprzedaży. Płatne jest tylko dobrowolne wyróżnienie oferty.</>,
    },
    {
      question: 'Jak wyróżnić moje ogłoszenie?',
      answer: <>W panelu <Link to={ROUTES.accountListings}>Moje oferty</Link> kliknij „Wyróżnij” przy zaakceptowanym ogłoszeniu. Wybierzesz czas wyróżnienia i zapłacisz przez AutoPay albo użyjesz kredytów z wcześniej kupionego pakietu.</>,
    },
    {
      question: 'Jak edytować lub usunąć ogłoszenie?',
      answer: <>Obie opcje są w panelu <Link to={ROUTES.accountListings}>Moje oferty</Link>, przy każdym ogłoszeniu. Po edycji ogłoszenie ponownie trafia do akceptacji.</>,
    },
    {
      question: 'Jak działa porównywarka mieszkań?',
      answer: <>Na liście ofert dodajesz mieszkania do porównania, a w <Link to={ROUTES.comparison}>Porównaniu</Link> widzisz je obok siebie: cenę, metraż, cenę za m² i pozostałe parametry.</>,
    },
    {
      question: 'Jak ustawić alerty cenowe?',
      answer: <>Alert ceny ogłoszenia założysz przyciskiem na karcie oferty, a alert lokalizacji w <Link to={ROUTES.priceHistory}>Historii cen</Link>. Wszystkie zobaczysz w panelu <Link to={ROUTES.accountPriceAlerts}>Alerty cenowe</Link>. Nie wysyłamy jeszcze powiadomień e-mail.</>,
    },
  ];

  const moreHelpCards = [
    {
      id: 'guides',
      icon: 'document',
      iconTone: 'green',
      title: 'Poradniki',
      description: 'Praktyczne artykuły i wskazówki dotyczące kupna, sprzedaży i wynajmu nieruchomości.',
      action: 'Zobacz poradniki',
      to: ROUTES.guides,
    },
    {
      id: 'security',
      icon: 'shield',
      iconTone: 'gold',
      title: 'Bezpieczeństwo',
      description: 'Dowiedz się jak bezpiecznie korzystać z serwisu i unikać oszustw.',
      action: 'Zasady bezpieczeństwa',
      to: ROUTES.accountSecurity,
    },
    {
      id: 'rules',
      icon: 'list',
      iconTone: 'blue',
      title: 'Regulamin i zasady',
      description: 'Zapoznaj się z regulaminem serwisu oraz zasadami korzystania.',
      action: 'Przeczytaj regulamin',
      to: ROUTES.terms,
    },
    {
      // Bez trasy - "Zgłoś problem" przewija do formularza kontaktowego na tej samej stronie.
      id: 'report',
      icon: 'warning',
      iconTone: 'red',
      title: 'Zgłoś problem',
      description: 'Zgłoś nieodpowiednie treści lub problemy techniczne.',
      action: 'Zgłoś',
      to: null,
    },
  ] as const;

  const [contactForm, setContactForm] = useState<HelpContactFormValues>({
    fullName: '',
    email: '',
    topic: '',
    message: '',
  });
  const [contactFeedback, setContactFeedback] = useState<HelpContactFeedback | null>(null);
  const [isSubmittingContactForm, setIsSubmittingContactForm] = useState(false);
  const [isContactFormHighlighted, setIsContactFormHighlighted] = useState(false);
  const contactFormHighlightTimeoutRef = useRef<number | null>(null);
  const contactFormCardRef = useRef<HTMLElement | null>(null);
  const contactTopicLabels: Record<string, string> = {
    ogloszenie: 'Pytanie o ogłoszenie',
    konto: 'Problemy z kontem',
    platnosci: 'Płatności i faktury',
    techniczne: 'Problem techniczny',
  };

  useEffect(() => () => {
    if (contactFormHighlightTimeoutRef.current !== null) {
      window.clearTimeout(contactFormHighlightTimeoutRef.current);
    }
  }, []);

  useEffect(() => {
    setContactForm((previous) => ({
      ...previous,
      fullName: user?.fullName ?? '',
      email: user?.email ?? '',
    }));
  }, [user?.fullName, user?.email]);

  const handleContactFieldChange = useCallback((field: keyof HelpContactFormValues, value: string) => {
    setContactForm((previous) => ({ ...previous, [field]: value }));
    setContactFeedback((previous) => (previous ? null : previous));
  }, []);

  const highlightContactFormForThreeSeconds = useCallback(() => {
    if (contactFormHighlightTimeoutRef.current !== null) {
      window.clearTimeout(contactFormHighlightTimeoutRef.current);
    }

    setIsContactFormHighlighted(false);
    window.requestAnimationFrame(() => {
      setIsContactFormHighlighted(true);
    });

    contactFormHighlightTimeoutRef.current = window.setTimeout(() => {
      setIsContactFormHighlighted(false);
      contactFormHighlightTimeoutRef.current = null;
    }, 3000);
  }, []);

  // "Zgłoś problem": przewijamy do formularza "Napisz do nas" i podświetlamy go, zamiast
  // otwierać osobną stronę - zgłoszenia trafiają właśnie przez ten formularz.
  const focusContactForm = useCallback(() => {
    contactFormCardRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
    highlightContactFormForThreeSeconds();
  }, [highlightContactFormForThreeSeconds]);

  const handleContactSubmit = useCallback(async (event: ReactFormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (!user) {
      setContactFeedback({
        type: 'error',
        text: 'Aby wysłać wiadomość, zaloguj się na konto.',
      });
      return;
    }

    const trimmedName = contactForm.fullName.trim();
    const trimmedEmail = contactForm.email.trim();
    const trimmedTopic = contactForm.topic.trim();
    const trimmedMessage = contactForm.message.trim();

    if (!trimmedName || !trimmedEmail || !trimmedTopic || !trimmedMessage) {
      setContactFeedback({
        type: 'error',
        text: 'Uzupełnij wszystkie pola formularza.',
      });
      return;
    }

    const emailLooksValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmedEmail);
    if (!emailLooksValid) {
      setContactFeedback({
        type: 'error',
        text: 'Podaj poprawny adres e-mail.',
      });
      return;
    }

    setIsSubmittingContactForm(true);
    try {
      const topicLabel = contactTopicLabels[trimmedTopic] ?? trimmedTopic;

      // Osobny kanal od czatu z administracja - wiadomosci trafiaja do zakladki
      // "Pomoc i kontakt" w panelu, z tematem i danymi kontaktowymi z formularza.
      await apiFetch('/support/messages', {
        method: 'POST',
        body: JSON.stringify({
          fullName: trimmedName,
          email: trimmedEmail,
          topic: topicLabel,
          content: trimmedMessage,
        }),
      });

      setContactFeedback({
        type: 'success',
        text: 'Wiadomość została wysłana. Odpowiemy najszybciej jak to możliwe.',
      });
      setContactForm((previous) => ({
        ...previous,
        topic: '',
        message: '',
      }));
    } catch (err) {
      setContactFeedback({
        type: 'error',
        text: err instanceof Error ? err.message : 'Nie udało się wysłać wiadomości. Spróbuj ponownie.',
      });
    } finally {
      setIsSubmittingContactForm(false);
    }
  }, [contactForm, contactTopicLabels, user]);

  return (
    <section className="account-page account-help-contact-page" aria-label="Pomoc i kontakt">
      <div className="account-layout">
        <AccountSidebar />

        <div className="account-main">
          <section className="help-contact-panel">
            <header className="help-contact-header">
              <div>
                <h1>Pomoc i kontakt</h1>
                <p>Jesteśmy tutaj, aby Ci pomóc. Skontaktuj się z nami lub znajdź odpowiedzi na najczęściej zadawane pytania.</p>
              </div>
              <div className="help-contact-visual" aria-hidden="true">
                <span><Icon name="mail" /></span>
                <strong><Icon name="phone" /></strong>
                <span><Icon name="message" /></span>
              </div>
            </header>

            <section className="help-contact-section">
              <h2>Jak możemy Ci pomóc?</h2>
              <div className="help-contact-channel-grid">
                {supportChannels.map((channel) => (
                  <article key={channel.id} className="help-contact-channel-card">
                    <div className="help-contact-channel-head">
                      <span className={`help-contact-channel-icon ${channel.iconTone}`}><Icon name={channel.icon} /></span>
                      <div>
                        <h3>{channel.title}</h3>
                      </div>
                    </div>
                    <p>{channel.description}</p>
                    {'href' in channel && channel.href ? (
                      <a className="help-contact-channel-action" href={channel.href}>
                        {channel.action}
                        <Icon name="chevron" />
                      </a>
                    ) : (
                      <button
                        type="button"
                        className="help-contact-channel-action"
                        onClick={highlightContactFormForThreeSeconds}
                      >
                        {channel.action}
                        <Icon name="chevron" />
                      </button>
                    )}
                  </article>
                ))}
              </div>
            </section>

            <section className="help-contact-section help-contact-middle-grid">
              <article className="help-contact-faq-card">
                <header>
                  <h2>Najczęściej zadawane pytania</h2>
                  <Link to={ROUTES.guides}>Poradniki <Icon name="arrow" /></Link>
                </header>
                <div className="help-contact-faq-list">
                  {faqItems.map((item) => (
                    <details key={item.question}>
                      <summary>
                        <span>{item.question}</span>
                        <Icon name="chevron" />
                      </summary>
                      <p>{item.answer}</p>
                    </details>
                  ))}
                </div>
              </article>

              <article ref={contactFormCardRef} className={`help-contact-form-card ${isContactFormHighlighted ? 'is-highlighted' : ''}`}>
                <h2>Napisz do nas</h2>
                <form onSubmit={handleContactSubmit}>
                  <div className="help-contact-form-row">
                    <input
                      type="text"
                      placeholder="Imię i nazwisko"
                      value={contactForm.fullName}
                      onChange={(event) => handleContactFieldChange('fullName', event.target.value)}
                    />
                    <input
                      type="email"
                      placeholder="Adres e-mail"
                      value={contactForm.email}
                      onChange={(event) => handleContactFieldChange('email', event.target.value)}
                    />
                  </div>
                  <select
                    value={contactForm.topic}
                    onChange={(event) => handleContactFieldChange('topic', event.target.value)}
                  >
                    <option value="" disabled>Temat</option>
                    <option value="ogloszenie">Pytanie o ogłoszenie</option>
                    <option value="konto">Problemy z kontem</option>
                    <option value="platnosci">Płatności i faktury</option>
                    <option value="techniczne">Problem techniczny</option>
                  </select>
                  <textarea
                    rows={5}
                    placeholder="Wiadomość&#10;Opisz swój problem lub pytanie..."
                    value={contactForm.message}
                    onChange={(event) => handleContactFieldChange('message', event.target.value)}
                  />
                  {contactFeedback ? (
                    <p className={`help-contact-form-feedback ${contactFeedback.type}`} role="status" aria-live="polite">
                      {contactFeedback.text}
                    </p>
                  ) : null}
                  <button type="submit" disabled={isSubmittingContactForm}>
                    {isSubmittingContactForm ? 'Wysyłanie...' : 'Wyślij wiadomość'}
                  </button>
                </form>
              </article>
            </section>

            <section className="help-contact-section">
              <h2>Więcej sposobów na pomoc</h2>
              <div className="help-contact-more-grid">
                {moreHelpCards.map((card) => (
                  <article key={card.id} className="help-contact-more-card">
                    <span className={`help-contact-more-icon ${card.iconTone}`}><Icon name={card.icon} /></span>
                    <div className="help-contact-more-body">
                      <h3>{card.title}</h3>
                      <p>{card.description}</p>
                      {card.to ? (
                        <Link className="help-contact-more-link" to={card.to}>{card.action} <Icon name="arrow" /></Link>
                      ) : (
                        <button type="button" className="help-contact-more-link" onClick={focusContactForm}>{card.action} <Icon name="arrow" /></button>
                      )}
                    </div>
                  </article>
                ))}
              </div>
            </section>
          </section>
        </div>
      </div>
    </section>
  );
}

// Okresy wykresu trendu ceny za m² na dole strony alertów.
const PRICE_ALERT_TREND_PERIODS = [
  { key: '6', label: '6 miesięcy', months: 6 },
  { key: '12', label: '12 miesięcy', months: 12 },
  { key: '24', label: '24 miesiące', months: 24 },
] as const;

type PriceAlertTrendPeriod = (typeof PRICE_ALERT_TREND_PERIODS)[number]['key'];

// Okno czasowe, z ktorego liczymy spadki/wzrosty w pasku podsumowania.
const PRICE_ALERT_STATS_DAYS = 30;

// Ile zdarzen pokazujemy w kolumnie "Najnowsze powiadomienia".
const PRICE_ALERT_FEED_LIMIT = 4;

// Czas wzgledny zdarzenia cenowego ("2 godz. temu").
function priceAlertRelativeTime(iso: string): string {
  const time = new Date(iso).getTime();
  if (Number.isNaN(time)) {
    return '';
  }
  const minutes = Math.max(0, Math.round((Date.now() - time) / 60000));
  if (minutes < 1) {
    return 'przed chwilą';
  }
  if (minutes < 60) {
    return `${minutes} min temu`;
  }
  const hours = Math.round(minutes / 60);
  if (hours < 24) {
    return `${hours} godz. temu`;
  }
  const days = Math.round(hours / 24);
  return days === 1 ? 'wczoraj' : `${days} dni temu`;
}

// "W serwisie od sierpień 2026" - miesiac i rok zalozenia konta sprzedajacego. Puste, gdy ogloszenie
// nie ma konta w serwisie (dane demonstracyjne) albo data jest nieczytelna.
function sellerMemberSince(iso: string | null): string {
  if (!iso) {
    return '';
  }
  const date = new Date(iso);
  if (Number.isNaN(date.getTime())) {
    return '';
  }
  return `W serwisie od ${date.toLocaleDateString('pl-PL', { month: 'long', year: 'numeric' })}`;
}

// "Ostatnia aktywność: 2 godz. temu"; do 5 minut od aktywnosci pokazujemy "teraz online". Sformulowanie
// bez rodzaju gramatycznego, bo dziala tak samo dla osoby, jak i dla firmy.
function sellerLastActive(iso: string | null): string {
  if (!iso) {
    return '';
  }
  const time = new Date(iso).getTime();
  if (Number.isNaN(time)) {
    return '';
  }
  const minutes = Math.max(0, Math.round((Date.now() - time) / 60000));
  if (minutes < 5) {
    return 'Aktywność: teraz online';
  }
  return `Ostatnia aktywność: ${priceAlertRelativeTime(iso)}`;
}

// Czytelna etykieta adresu www - bez schematu i koncowego ukosnika (np. "www.matexi.pl").
function companyWebsiteLabel(url: string): string {
  return url.replace(/^https?:\/\//i, '').replace(/\/$/, '');
}

// Procentowa zmiana miedzy dwiema cenami; brak punktu odniesienia = 0%.
function priceAlertChangePercent(previous: number, current: number): number {
  return previous > 0 ? ((current - previous) / previous) * 100 : 0;
}

// Procent w polskim zapisie, ze znakiem (np. "-2,4%").
function formatAlertPercent(value: number, withSign = true): string {
  const sign = withSign && value > 0 ? '+' : '';
  return `${sign}${value.toFixed(1).replace('.', ',')}%`;
}

// Etykiety osi X wykresu - kolejne miesiace wstecz od biezacego.
function priceAlertTrendLabels(months: number): string[] {
  const today = historyToday();
  return Array.from({ length: months }, (_, index) => {
    const date = new Date(today.getFullYear(), today.getMonth() - (months - 1 - index), 1);
    return `${HISTORY_YEAR_MONTHS[date.getMonth()]} ${`${date.getFullYear()}`.slice(2)}`;
  });
}

// Wspolny model wiersza alertu - ten sam uklad obsluguje alerty ogloszen i lokalizacji.
// Geometria wykresu ceny za m² - wspolna dla wszystkich kart alertow lokalizacji.
function buildPriceAlertChart(series: number[]) {
  const width = 640;
  const height = 200;
  const padding = { top: 14, right: 8, bottom: 10, left: 8 };
  const min = Math.min(...series);
  const max = Math.max(...series);
  const span = max - min || 1;
  const innerWidth = width - padding.left - padding.right;
  const innerHeight = height - padding.top - padding.bottom;
  const points = series.map((value, index) => ({
    x: padding.left + (series.length === 1
      ? innerWidth / 2
      : (index / (series.length - 1)) * innerWidth),
    y: padding.top + innerHeight - (((value - min) / span) * innerHeight),
  }));
  const line = points
    .map((point, index) => `${index === 0 ? 'M' : 'L'}${point.x.toFixed(1)} ${point.y.toFixed(1)}`)
    .join(' ');
  const first = points[0];
  const last = points[points.length - 1];
  return {
    width,
    height,
    line,
    area: `${line} L${last.x.toFixed(1)} ${height} L${first.x.toFixed(1)} ${height} Z`,
    ticks: [3, 2, 1, 0].map((step) => Math.round(min + ((span * step) / 3))),
  };
}

// Wspolny model wiersza alertu ogloszenia.
type PriceAlertRowModel = {
  id: string;
  createdAt: string;
  thumb: string | null;
  title: string;
  meta: string;
  subMeta: string;
  hasChange: boolean;
  changePercent: number;
  changeLabel: string;
  offerHeading: string;
  offerPrice: string | null;
  offerEmptyLabel: string;
  offerLines: string[];
  notificationsEnabled: boolean;
  ctaTo: string;
  ctaLabel: string;
  onToggle: () => void;
  onRemove: () => void;
};

function PriceAlertRow({
  row,
  menuOpen,
  onMenuChange,
}: {
  row: PriceAlertRowModel;
  menuOpen: boolean;
  onMenuChange: (id: string | null) => void;
}) {
  return (
    <li className="price-alerts-row">
      <div
        className="price-alerts-row-thumb"
        style={row.thumb ? { backgroundImage: `url(${row.thumb})` } : undefined}
      >
        {!row.thumb && <Icon name="building" />}
      </div>

      <div className="price-alerts-row-main">
        <strong>{row.title}</strong>
        <span>{row.meta}</span>
        <span>{row.subMeta}</span>
      </div>

      <div className="price-alerts-row-cell">
        <small>Ostatnia zmiana ceny</small>
        {row.hasChange ? (
          <strong className={row.changePercent <= 0 ? 'is-drop' : 'is-rise'}>
            <Icon name={row.changePercent <= 0 ? 'trend-down' : 'trend'} />
            {' '}{formatAlertPercent(Math.abs(row.changePercent), false)}
          </strong>
        ) : (
          <strong className="is-idle">—</strong>
        )}
        <span>{row.changeLabel}</span>
      </div>

      <div className="price-alerts-row-cell">
        <small>{row.offerHeading}</small>
        {row.offerPrice ? (
          <strong>{row.offerPrice}</strong>
        ) : (
          <strong className="is-idle">{row.offerEmptyLabel}</strong>
        )}
        {row.offerLines.map((line) => <span key={line}>{line}</span>)}
      </div>

      <div className="price-alerts-row-cell price-alerts-row-switch">
        <small>Powiadomienia</small>
        <button
          type="button"
          role="switch"
          aria-checked={row.notificationsEnabled}
          aria-label={`Powiadomienia dla alertu ${row.title}`}
          className={`price-alerts-switch${row.notificationsEnabled ? ' is-on' : ''}`}
          onClick={row.onToggle}
        >
          <i />
        </button>
        <span>{row.notificationsEnabled ? 'e-mail, push' : 'wyłączone'}</span>
      </div>

      <div className="price-alerts-row-actions">
        <Link className="price-alerts-row-cta" to={row.ctaTo}>
          {row.ctaLabel} <Icon name="arrow" />
        </Link>
        <div className="price-alerts-row-menu">
          <button
            type="button"
            aria-label={`Więcej opcji alertu ${row.title}`}
            aria-expanded={menuOpen}
            onClick={(event) => {
              event.stopPropagation();
              onMenuChange(menuOpen ? null : row.id);
            }}
          >
            <Icon name="dots-vertical" />
          </button>
          {/* Bez odsylacza do historii cen - ta dotyczy lokalizacji, nie pojedynczej oferty. */}
          {menuOpen && (
            <div className="price-alerts-row-menu-panel" role="menu">
              <button role="menuitem" type="button" onClick={row.onRemove}>
                Usuń alert
              </button>
            </div>
          )}
        </div>
      </div>
    </li>
  );
}

type PriceAlertLocationCardModel = {
  key: string;
  label: string;
  meta: string;
  historyTo: string;
  // null = mniej niz dwa realne pomiary, wiec nie ma czego rysowac.
  chart: ReturnType<typeof buildPriceAlertChart> | null;
  // null = brak ogloszen w lokalizacji.
  currentPerM2: number | null;
  changePercent: number;
  // Czy alert zarejestrowal juz zmiane sredniej ceny.
  changeIsReal: boolean;
  changeCaption: string;
  notificationsEnabled: boolean;
  onToggle: () => void;
  onRemove: () => void;
};

// Alert lokalizacji jako kompaktowy kafelek z wykresem ceny za m² - wprost widac,
// czy stawka w danym miejscu spada, czy rosnie. Male karty ukladaja sie w siatke,
// wiec na ekranie miesci sie ich duzo wiecej niz pelnowymiarowych wykresow.
function PriceAlertLocationCard({
  card,
  labels,
  months,
  menuOpen,
  onMenuChange,
}: {
  card: PriceAlertLocationCardModel;
  labels: string[];
  months: number;
  menuOpen: boolean;
  onMenuChange: (id: string | null) => void;
}) {
  const { formatPricePerArea, areaSuffix } = useDisplay();
  // Identyfikator gradientu musi byc unikalny - na stronie jest wiele wykresow.
  const fillId = `priceAlertsChartFill-${card.key}`;
  const menuId = `location:${card.key}`;

  return (
    <article className="price-alerts-location-card">
      <header>
        <div>
          <h3>{card.label}</h3>
          <p>{card.meta}</p>
        </div>
        <div className="price-alerts-row-menu">
          <button
            type="button"
            aria-label={`Więcej opcji alertu ${card.label}`}
            aria-expanded={menuOpen}
            onClick={(event) => {
              event.stopPropagation();
              onMenuChange(menuOpen ? null : menuId);
            }}
          >
            <Icon name="dots-vertical" />
          </button>
          {menuOpen && (
            <div className="price-alerts-row-menu-panel" role="menu">
              {/* Historia cen otwiera sie od razu na lokalizacji z tego alertu. */}
              <Link role="menuitem" to={card.historyTo}>Zobacz historię cen</Link>
              <button role="menuitem" type="button" onClick={card.onRemove}>
                Usuń alert
              </button>
            </div>
          )}
        </div>
      </header>

      <div className="price-alerts-location-figure">
        <strong>{card.currentPerM2 === null ? '—' : formatPricePerArea(card.currentPerM2)}</strong>
        {card.changeIsReal && (
          <span className={card.changePercent <= 0 ? 'is-drop' : 'is-rise'}>
            <Icon name={card.changePercent <= 0 ? 'trend-down' : 'trend'} />
            {' '}{formatAlertPercent(card.changePercent)}
          </span>
        )}
      </div>

      {card.chart && (
        <>
          <svg
            className="price-alerts-mini-chart"
            viewBox={`0 0 ${card.chart.width} ${card.chart.height}`}
            preserveAspectRatio="none"
            role="img"
            aria-label={`Wykres zarejestrowanych zmian ceny za ${areaSuffix}, ${card.label}`}
          >
            <defs>
              <linearGradient id={fillId} x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="#26b36a" stopOpacity="0.26" />
                <stop offset="100%" stopColor="#26b36a" stopOpacity="0" />
              </linearGradient>
            </defs>
            <path d={card.chart.area} fill={`url(#${fillId})`} />
            <path d={card.chart.line} className="price-alerts-chart-line" />
          </svg>

          <div className="price-alerts-mini-axis" aria-hidden="true">
            <span />
            <span>{formatPricePerArea(card.chart.ticks[3])} – {formatPricePerArea(card.chart.ticks[0])}</span>
            <span />
          </div>
        </>
      )}

      {/* Zmiana zarejestrowana przez alert; do czasu pierwszej - szacunek z trendu. */}
      <div className={`price-alerts-event${card.changeIsReal ? (card.changePercent <= 0 ? ' is-drop' : ' is-rise') : ' is-idle'}`}>
        <strong>
          {card.changeIsReal ? (
            <>
              <Icon name={card.changePercent <= 0 ? 'trend-down' : 'trend'} />
              {' '}Cena {card.changePercent <= 0 ? 'spadła' : 'wzrosła'} o {formatAlertPercent(Math.abs(card.changePercent), false)}
            </>
          ) : (
            'Czeka na pierwszą zmianę'
          )}
        </strong>
        <span>{card.changeCaption}</span>
      </div>

      <div className="price-alerts-location-actions">
        <button
          type="button"
          role="switch"
          aria-checked={card.notificationsEnabled}
          aria-label={`Powiadomienia dla alertu ${card.label}`}
          className={`price-alerts-switch${card.notificationsEnabled ? ' is-on' : ''}`}
          onClick={card.onToggle}
        >
          <i />
        </button>
        <span>{card.notificationsEnabled ? 'e-mail, push' : 'Powiadomienia wyłączone'}</span>
      </div>
    </article>
  );
}

function AccountPriceAlertsPage({
  user,
  onOpenListing,
  listingAlerts,
  onRemoveListingAlert,
  onToggleListingAlertNotifications,
}: {
  user: AuthUser | null;
  onOpenListing: (id: number) => void;
  listingAlerts: ListingPriceAlertSubscription[];
  onRemoveListingAlert: (listingId: number) => void;
  onToggleListingAlertNotifications: (listingId: number) => void;
}) {
  const { dismissByDedupePrefix } = useNotifications();
  const { formatPrice, formatPricePerArea, formatArea, areaSuffix } = useDisplay();
  const [cityAlerts, setCityAlerts] = useState<CityPriceAlertSubscription[]>([]);
  const [priceEvents, setPriceEvents] = useState<FavoritePriceAlertEvent[]>([]);
  const [cityPriceEvents, setCityPriceEvents] = useState<CityPriceAlertEvent[]>([]);
  const [listings, setListings] = useState<ApiListingSummary[]>([]);
  const [trendPeriod, setTrendPeriod] = useState<PriceAlertTrendPeriod>('12');
  const [openMenuKey, setOpenMenuKey] = useState<string | null>(null);

  // Alerty lokalizacji i zdarzenia cenowe dopisuje w tle glowny komponent App, wiec widok
  // co 10 s siega po aktualny stan zapisany w localStorage uzytkownika. Alerty pojedynczych
  // ogloszen przychodza propsem - ich zrodlem prawdy jest stan w App.
  useEffect(() => {
    if (!user) {
      setCityAlerts([]);
      setPriceEvents([]);
      setCityPriceEvents([]);
      return;
    }

    const hydrate = () => {
      setCityAlerts(readUserJsonStorage<CityPriceAlertSubscription[]>(user, CITY_PRICE_ALERTS_STORAGE_SUFFIX, []));
      setPriceEvents(readUserJsonStorage<FavoritePriceAlertEvent[]>(user, FAVORITE_PRICE_ALERTS_STORAGE_SUFFIX, []));
      setCityPriceEvents(readUserJsonStorage<CityPriceAlertEvent[]>(user, CITY_PRICE_ALERT_EVENTS_STORAGE_SUFFIX, []));
    };

    hydrate();
    const intervalId = window.setInterval(hydrate, 10000);
    return () => window.clearInterval(intervalId);
  }, [user]);

  // Ogloszenia z API daja aktualna cene i zdjecie dla alertow zalozonych na ofertach.
  useEffect(() => {
    let cancelled = false;
    apiFetch<ApiListingSummary[]>('/listings')
      .then((data) => {
        if (!cancelled) {
          setListings(data);
        }
      })
      .catch(() => {
        if (!cancelled) {
          setListings([]);
        }
      });
    return () => {
      cancelled = true;
    };
  }, []);

  // Zamkniecie menu kliknieciem poza nim.
  useEffect(() => {
    if (!openMenuKey) {
      return;
    }
    const close = () => setOpenMenuKey(null);
    window.addEventListener('click', close);
    return () => window.removeEventListener('click', close);
  }, [openMenuKey]);

  const persistCityAlerts = (next: CityPriceAlertSubscription[]) => {
    if (user) {
      writeUserJsonStorage(user, CITY_PRICE_ALERTS_STORAGE_SUFFIX, next);
    }
    setCityAlerts(next);
  };

  // Jak przy alertach ogloszen: kasujemy tez zarejestrowane zmiany i punkt odniesienia,
  // zeby po usunieciu alertu nie zostal po nim slad w historii zmian.
  const removeCityAlert = (key: string) => {
    persistCityAlerts(cityAlerts.filter((item) => item.key !== key));

    if (user) {
      const remainingEvents = cityPriceEvents.filter((event) => event.subscriptionKey !== key);
      writeUserJsonStorage(user, CITY_PRICE_ALERT_EVENTS_STORAGE_SUFFIX, remainingEvents);
      setCityPriceEvents(remainingEvents);

      // Klucz snapshotu to "<key>|<typ>|<rynek>", wiec zdejmujemy wszystkie warianty tej lokalizacji.
      const snapshots = readUserJsonStorage<Record<string, CityPriceAlertSnapshot>>(
        user,
        CITY_PRICE_ALERT_SNAPSHOTS_STORAGE_SUFFIX,
        {},
      );
      Object.keys(snapshots)
        .filter((snapshotKey) => snapshotKey === key || snapshotKey.startsWith(`${key}|`))
        .forEach((snapshotKey) => delete snapshots[snapshotKey]);
      writeUserJsonStorage(user, CITY_PRICE_ALERT_SNAPSHOTS_STORAGE_SUFFIX, snapshots);
    }

    // Powiadomienia o spadkach w tej lokalizacji maja klucz "city-price-<klucz>-<stawka>".
    dismissByDedupePrefix(`city-price-${key}-`);
    setOpenMenuKey(null);
  };

  const toggleCityAlertNotifications = (key: string) => {
    persistCityAlerts(cityAlerts.map((item) => (
      item.key === key ? { ...item, notificationsEnabled: item.notificationsEnabled === false } : item
    )));
  };

  const chartMonths = PRICE_ALERT_TREND_PERIODS.find((item) => item.key === trendPeriod)?.months ?? 12;
  const chartLabels = useMemo(() => priceAlertTrendLabels(chartMonths), [chartMonths]);

  // Alerty lokalizacji sledza srednia cene ofertowa mieszkan NA SPRZEDAZ - taki sam
  // zbior, na jakim pracuje monitoring w tle (/listings?offerType=SALE).
  const saleListings = useMemo(() => listings.filter((item) => item.offerType === 'SALE'), [listings]);

  // --- Alerty lokalizacji (dodane w historii cen) jako karty z wykresem ---
  const locationCards: PriceAlertLocationCardModel[] = useMemo(() => cityAlerts
    .map((subscription) => {
      // Stawka liczona z realnych ogloszen na sprzedaz - dokladnie ta sama, ktora
      // porownuje monitoring w tle, wiec naglowek karty zgadza sie z zarejestrowana zmiana.
      const currentPerM2 = calculateCityAlertPerM2(subscription, saleListings);
      // Wykres tylko z zarejestrowanych zmian (zdarzenia sa od najnowszego) - bez nich nie rysujemy nic.
      const subscriptionEvents = cityPriceEvents.filter((event) => event.subscriptionKey === subscription.key);
      const series = currentPerM2 === null
        ? []
        : [...subscriptionEvents].reverse().map((event) => event.previousPerM2).concat(currentPerM2);

      const lastEvent = subscriptionEvents[0] ?? null;
      const eventAmount = lastEvent ? lastEvent.currentPerM2 - lastEvent.previousPerM2 : 0;

      return {
        key: subscription.key,
        // Nazwa wybrana przez uzytkownika w historii cen. Dopasowany rynek sluzy tylko
        // do wyliczenia serii - przy nazwie spoza slownika potrafi wskazac inna dzielnice.
        label: subscription.label,
        meta: `${subscription.propertyType} • ${subscription.marketType}`,
        historyTo: priceHistoryPath(subscription.label, subscription.propertyType, subscription.marketType),
        chart: series.length >= 2 ? buildPriceAlertChart(series) : null,
        currentPerM2,
        // Tylko zmiana zarejestrowana przez alert - bez niej nie pokazujemy zadnego procentu.
        changePercent: lastEvent
          ? priceAlertChangePercent(lastEvent.previousPerM2, lastEvent.currentPerM2)
          : 0,
        changeIsReal: Boolean(lastEvent),
        changeCaption: lastEvent
          ? `${formatPricePerArea(Math.abs(eventAmount))} ${eventAmount <= 0 ? 'taniej' : 'drożej'} • ${priceAlertRelativeTime(lastEvent.changedAt)}`
          : currentPerM2 === null ? 'Brak ogłoszeń w tej lokalizacji' : 'Brak zarejestrowanych zmian',
        notificationsEnabled: subscription.notificationsEnabled !== false,
        onToggle: () => toggleCityAlertNotifications(subscription.key),
        onRemove: () => removeCityAlert(subscription.key),
      };
    }), [cityAlerts, cityPriceEvents, chartMonths, saleListings]);

  // --- Alerty pojedynczych ogloszen ("Utworz alert ceny" na ofercie) ---
  const listingRowModels: PriceAlertRowModel[] = useMemo(() => listingAlerts
    .map((subscription) => {
      const listing = listings.find((item) => item.id === subscription.listingId) ?? null;
      const lastEvent = priceEvents.find((event) => event.listingId === subscription.listingId) ?? null;
      const changeAmount = lastEvent ? lastEvent.currentPrice - lastEvent.previousPrice : 0;
      return {
        id: `listing:${subscription.listingId}`,
        createdAt: subscription.createdAt,
        thumb: listing?.coverPhoto ?? null,
        title: listing?.title ?? subscription.title,
        // Dane z API maja pierwszenstwo - ogloszenie moglo zmienic miasto albo typ oferty
        // po zalozeniu alertu. Zapis w subskrypcji sluzy tylko jako awaryjny opis.
        meta: listing
          ? `${listing.offerType === 'RENT' ? 'Wynajem' : 'Sprzedaż'} • ${[listing.city, listing.district].filter(Boolean).join(', ')}`
          : `${subscription.offerType === 'RENT' ? 'Wynajem' : 'Sprzedaż'} • ${subscription.location}`,
        subMeta: listing
          ? `Cena za ${areaSuffix}: ${formatPricePerArea(listing.price / Math.max(1, listing.area))}`
          : 'Ogłoszenie nie jest teraz dostępne',
        hasChange: Boolean(lastEvent),
        changePercent: lastEvent ? priceAlertChangePercent(lastEvent.previousPrice, lastEvent.currentPrice) : 0,
        changeLabel: lastEvent
          ? `${formatPrice(Math.abs(changeAmount))} ${changeAmount <= 0 ? 'taniej' : 'drożej'}`
          : 'Czeka na pierwszą zmianę',
        offerHeading: 'Aktualna cena',
        offerPrice: listing ? formatPrice(listing.price) : null,
        offerEmptyLabel: 'Brak danych',
        offerLines: listing
          ? [
            `${formatArea(listing.area)} • ${roomsLabel(listing.rooms)}`,
            listingRelativeDate(listing.createdAt),
          ]
          : ['Oferta została zdjęta lub wstrzymana'],
        notificationsEnabled: subscription.notificationsEnabled !== false,
        ctaTo: listingPath(subscription.listingId),
        ctaLabel: 'Zobacz ofertę',
        onToggle: () => onToggleListingAlertNotifications(subscription.listingId),
        onRemove: () => {
          onRemoveListingAlert(subscription.listingId);
          // Magazyn sprzata App; tutaj zdejmujemy zdarzenia od razu, zeby feed
          // nie pokazywal ich jeszcze przez chwile do najblizszego odswiezenia.
          setPriceEvents((current) => current.filter((event) => event.listingId !== subscription.listingId));
          setOpenMenuKey(null);
        },
      };
    })
    .sort((left, right) => new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime()),
  [listingAlerts, listings, priceEvents, onRemoveListingAlert, onToggleListingAlertNotifications]);

  const alertsCount = cityAlerts.length + listingAlerts.length;

  // Zmiany cen z ostatnich 30 dni - wspolne zrodlo dla kafli podsumowania.
  const recentChanges = useMemo(() => {
    const cutoff = Date.now() - (PRICE_ALERT_STATS_DAYS * 24 * 60 * 60 * 1000);
    const withinWindow = (iso: string) => {
      const time = new Date(iso).getTime();
      return !Number.isNaN(time) && time >= cutoff;
    };
    return [
      ...priceEvents
        .filter((event) => withinWindow(event.changedAt))
        .map((event) => priceAlertChangePercent(event.previousPrice, event.currentPrice)),
      ...cityPriceEvents
        .filter((event) => withinWindow(event.changedAt))
        .map((event) => priceAlertChangePercent(event.previousPerM2, event.currentPerM2)),
    ];
  }, [priceEvents, cityPriceEvents]);

  const dropCount = recentChanges.filter((value) => value < 0).length;
  const riseCount = recentChanges.filter((value) => value > 0).length;
  const averageChange = recentChanges.length > 0
    ? recentChanges.reduce((sum, value) => sum + value, 0) / recentChanges.length
    : 0;

  const notificationFeed = useMemo(() => ([
    ...priceEvents.map((event) => ({
      id: event.id,
      changedAt: event.changedAt,
      percent: priceAlertChangePercent(event.previousPrice, event.currentPrice),
      title: event.title,
      listingId: event.listingId as number | null,
    })),
    ...cityPriceEvents.map((event) => ({
      id: event.id,
      changedAt: event.changedAt,
      percent: priceAlertChangePercent(event.previousPerM2, event.currentPerM2),
      title: event.label,
      listingId: null as number | null,
    })),
  ])
    .sort((left, right) => new Date(right.changedAt).getTime() - new Date(left.changedAt).getTime())
    .slice(0, PRICE_ALERT_FEED_LIMIT), [priceEvents, cityPriceEvents]);

  return (
    <section className="account-settings-page price-alerts-page" aria-label="Alerty cenowe">
      <div className="account-layout">
        <AccountSidebar />

        <div className="account-main account-settings-main">
          <div className="price-alerts-heading">
            <small>Strona główna <Icon name="arrow" /> Alerty cenowe</small>
            <div>
              <h1>
                Alerty cenowe
                <span className="price-alerts-count">{alertsCount}</span>
              </h1>
              <p>Śledź zmiany cen mieszkań i bądź na bieżąco. Otrzymuj powiadomienia, gdy ceny spadną lub wzrosną.</p>
            </div>
          </div>

          <section className="price-alerts-stats" aria-label="Podsumowanie alertów">
            <article>
              <span className="price-alerts-stat-icon is-mint"><Icon name="bell" /></span>
              <div>
                <small>Alerty aktywne</small>
                <strong>{alertsCount}</strong>
                <em>{alertsCount > 0 ? 'Wszystkie działają poprawnie' : 'Nie masz jeszcze alertów'}</em>
              </div>
            </article>
            <article>
              <span className="price-alerts-stat-icon is-sky"><Icon name="trend-down" /></span>
              <div>
                <small>Spadki cen ({PRICE_ALERT_STATS_DAYS} dni)</small>
                <strong>{dropCount}</strong>
                <em>Zmian w dół względem poprzedniej ceny</em>
              </div>
            </article>
            <article>
              <span className="price-alerts-stat-icon is-rose"><Icon name="trend" /></span>
              <div>
                <small>Wzrosty cen ({PRICE_ALERT_STATS_DAYS} dni)</small>
                <strong>{riseCount}</strong>
                <em>Zmian w górę względem poprzedniej ceny</em>
              </div>
            </article>
            <article>
              <span className="price-alerts-stat-icon is-amber"><Icon name="star" /></span>
              <div>
                <small>Średnia zmiana cen</small>
                <strong className={averageChange < 0 ? 'is-drop' : averageChange > 0 ? 'is-rise' : undefined}>
                  {recentChanges.length > 0 ? formatAlertPercent(averageChange) : '0,0%'}
                </strong>
                <em>W skali ostatnich {PRICE_ALERT_STATS_DAYS} dni</em>
              </div>
            </article>
          </section>

          {/* Alerty zalozone przyciskiem "Utworz alert ceny" na konkretnym ogloszeniu. */}
          <section className="price-alerts-list-section" aria-label="Twoje alerty">
            <header>
              <div>
                <h2>Twoje alerty</h2>
                <p>Obserwowane ogłoszenia — zmiany ich cen zobaczysz tutaj</p>
              </div>
              <Link className="price-alerts-create" to={ROUTES.buy}>
                <Icon name="plus" /> Dodaj z ogłoszenia
              </Link>
            </header>

            {listingRowModels.length > 0 ? (
              <ul className="price-alerts-rows">
                {listingRowModels.map((row) => (
                  <PriceAlertRow
                    key={row.id}
                    row={row}
                    menuOpen={openMenuKey === row.id}
                    onMenuChange={setOpenMenuKey}
                  />
                ))}
              </ul>
            ) : (
              <div className="price-alerts-empty">
                <span><Icon name="bell" /></span>
                <div>
                  <strong>Nie obserwujesz jeszcze żadnego ogłoszenia</strong>
                  <p>Wejdź na dowolną ofertę i kliknij „Utwórz alert ceny”, a damy Ci znać, gdy jej cena się zmieni.</p>
                </div>
                <Link to={ROUTES.buy}>Przeglądaj ogłoszenia <Icon name="arrow" /></Link>
              </div>
            )}
          </section>

          <section className="price-alerts-bottom">
            {/* Alerty lokalizacji z historii cen - kazdy jako wykres ceny za m². */}
            <div className="price-alerts-locations">
              <header>
                <div>
                  <h2>Zmiana ceny za {areaSuffix}</h2>
                  <p>Lokalizacje dodane w historii cen — widać, czy stawka spada, czy rośnie</p>
                </div>
                <div className="price-alerts-locations-tools">
                  {locationCards.length > 0 && (
                    <div className="price-alerts-period" role="tablist" aria-label="Zakres wykresów">
                      {PRICE_ALERT_TREND_PERIODS.map((period) => (
                        <button
                          key={period.key}
                          type="button"
                          role="tab"
                          aria-selected={trendPeriod === period.key}
                          className={trendPeriod === period.key ? 'is-active' : undefined}
                          onClick={() => setTrendPeriod(period.key)}
                        >
                          {period.label}
                        </button>
                      ))}
                    </div>
                  )}
                  <Link className="price-alerts-create" to={ROUTES.priceHistory}>
                    <Icon name="plus" /> Dodaj lokalizację
                  </Link>
                </div>
              </header>

              {locationCards.length > 0 ? (
                <div className="price-alerts-locations-grid">
                  {locationCards.map((card) => (
                    <PriceAlertLocationCard
                      key={card.key}
                      card={card}
                      labels={chartLabels}
                      months={chartMonths}
                      menuOpen={openMenuKey === `location:${card.key}`}
                      onMenuChange={setOpenMenuKey}
                    />
                  ))}
                </div>
              ) : (
                <div className="price-alerts-empty">
                  <span><Icon name="pin" /></span>
                  <div>
                    <strong>Nie śledzisz jeszcze żadnej lokalizacji</strong>
                    <p>Wybierz miasto lub dzielnicę w historii cen, a pokażemy tu wykres ceny za {areaSuffix} i damy znać, gdy stawka drgnie.</p>
                  </div>
                  <Link to={ROUTES.priceHistory}>Przejdź do historii cen <Icon name="arrow" /></Link>
                </div>
              )}
            </div>

            <aside className="price-alerts-feed" aria-label="Najnowsze powiadomienia">
              <header>
                <h2>Najnowsze powiadomienia</h2>
                <Link to={ROUTES.notifications}>Zobacz wszystkie</Link>
              </header>

              {notificationFeed.length > 0 ? (
                <ul>
                  {notificationFeed.map((item) => {
                    const content = (
                      <>
                        <span className={`price-alerts-feed-icon ${item.percent <= 0 ? 'is-drop' : 'is-rise'}`}>
                          <Icon name={item.percent <= 0 ? 'trend-down' : 'trend'} />
                        </span>
                        <span className="price-alerts-feed-text">
                          <strong>
                            Cena {item.percent <= 0 ? 'spadła' : 'wzrosła'} o {formatAlertPercent(Math.abs(item.percent), false)}
                          </strong>
                          <span>{item.title}</span>
                        </span>
                        <em>{priceAlertRelativeTime(item.changedAt)}</em>
                      </>
                    );
                    return (
                      <li key={item.id}>
                        {item.listingId !== null ? (
                          <button type="button" onClick={() => onOpenListing(item.listingId as number)}>
                            {content}
                          </button>
                        ) : (
                          <div>{content}</div>
                        )}
                      </li>
                    );
                  })}
                </ul>
              ) : (
                <p className="price-alerts-feed-empty">
                  Brak zmian cen. Gdy tylko coś drgnie w Twoich alertach, zobaczysz to tutaj.
                </p>
              )}

            </aside>
          </section>
        </div>
      </div>
    </section>
  );
}

function AccountComparisonPage({ onOpenListing }: { onOpenListing: (id: number) => void }) {
  const navigate = useNavigate();
  const { formatPrice, formatPricePerArea, formatArea, areaSuffix } = useDisplay();
  type ComparisonPropertyFilter = 'ALL' | ApiPropertyType | 'LAND' | 'COMMERCIAL' | 'ROOM';

  const comparisonPropertyOptions: Array<{ value: ComparisonPropertyFilter; label: string }> = [
    { value: 'ALL', label: 'Wszystkie typy' },
    { value: 'APARTMENT', label: 'Mieszkanie' },
    { value: 'HOUSE', label: 'Dom' },
    { value: 'LAND', label: 'Działka' },
    { value: 'COMMERCIAL', label: 'Lokal użytkowy' },
    { value: 'ROOM', label: 'Pokój' },
  ];

  const [offerType, setOfferType] = useState<ApiOfferType>('SALE');
  const [propertyTypeFilter, setPropertyTypeFilter] = useState<ComparisonPropertyFilter>('ALL');
  const [search, setSearch] = useState('');
  const [pickerValue, setPickerValue] = useState<number | ''>('');
  // Wybrane oferty siedza w adresie (?oferty=1,4), wiec porownanie przezywa odswiezenie
  // i da sie je wyslac linkiem ("Udostepnij porownanie").
  const [comparisonParams, setComparisonParams] = useSearchParams();
  const selectedIds = (comparisonParams.get('oferty') ?? '')
    .split(',')
    .map(Number)
    .filter((id) => Number.isInteger(id) && id > 0);
  const setSelectedIds = (update: number[] | ((current: number[]) => number[])) => {
    const next = typeof update === 'function' ? update(selectedIds) : update;
    setComparisonParams((prev) => {
      const params = new URLSearchParams(prev);
      if (next.length > 0) {
        params.set('oferty', next.join(','));
      } else {
        params.delete('oferty');
      }
      return params;
    }, { replace: true });
  };
  const [selectedDetails, setSelectedDetails] = useState<Record<number, ApiListingDetail>>({});
  const [shareInfo, setShareInfo] = useState('');
  const [valuesGridOffset, setValuesGridOffset] = useState(0);
  const summaryFirstMetricRef = useRef<HTMLElement | null>(null);
  const firstValueCellRef = useRef<HTMLDivElement | null>(null);
  const { items, loading } = useLiveListings(offerType);

  // Przelaczenie sprzedaz/najem czysci wybor, ale nie przy pierwszym wejsciu - inaczej
  // skasowaloby oferty podane w adresie (udostepniony link).
  const comparisonMountedRef = useRef(false);
  useEffect(() => {
    if (!comparisonMountedRef.current) {
      comparisonMountedRef.current = true;
      return;
    }
    setSelectedIds([]);
    setPickerValue('');
    setSearch('');
    setPropertyTypeFilter('ALL');
  }, [offerType]);

  useEffect(() => {
    // Dopiero gdy lista ofert dotarla - na pustej liscie skasowalibysmy wybor z adresu.
    if (loading || items.length === 0) {
      return;
    }
    setSelectedIds((current) => current.filter((id) => items.some((item) => item.id === id)));
  }, [items, loading]);

  useEffect(() => {
    if (selectedIds.length === 0) {
      // Zachowujemy referencje pustego obiektu - podstawienie nowego {} zmienialoby
      // zaleznosc selectedDetails i efekt wpadalby w nieskonczona petle renderow.
      setSelectedDetails((current) => (Object.keys(current).length === 0 ? current : {}));
      return;
    }

    const missing = selectedIds.filter((id) => !selectedDetails[id]);
    if (missing.length === 0) {
      return;
    }

    let cancelled = false;
    Promise.all(
      missing.map(async (id) => {
        try {
          const detail = await apiFetch<ApiListingDetail>(`/listings/${id}`);
          return { id, detail };
        } catch {
          return null;
        }
      }),
    ).then((resolved) => {
      if (cancelled) {
        return;
      }
      const entries = resolved.filter((item): item is { id: number; detail: ApiListingDetail } => item != null);
      if (entries.length === 0) {
        return;
      }
      setSelectedDetails((current) => {
        const next = { ...current };
        entries.forEach((entry) => {
          next[entry.id] = entry.detail;
        });
        return next;
      });
    });

    return () => {
      cancelled = true;
    };
  }, [selectedIds, selectedDetails]);

  const normalizedSearch = search.trim().toLowerCase();
  const searchable = useMemo(
    () => items
      .filter((item) => {
        if (!normalizedSearch) {
          return true;
        }
        const haystack = [item.title, item.city, item.district ?? '', item.address ?? ''].join(' ').toLowerCase();
        return haystack.includes(normalizedSearch);
      })
      .sort((left, right) => new Date(right.createdAt).getTime() - new Date(left.createdAt).getTime()),
    [items, normalizedSearch],
  );

  const selectedListings = useMemo(
    () => selectedIds.map((id) => items.find((item) => item.id === id)).filter((item): item is LiveListingSummary => Boolean(item)),
    [selectedIds, items],
  );

  const availableBySearch = useMemo(
    () => searchable.filter((item) => !selectedIds.includes(item.id)),
    [searchable, selectedIds],
  );

  const typeCounters = useMemo(() => {
    const apartment = availableBySearch.filter((item) => item.propertyType === 'APARTMENT').length;
    const house = availableBySearch.filter((item) => item.propertyType === 'HOUSE').length;
    return {
      ALL: availableBySearch.length,
      APARTMENT: apartment,
      HOUSE: house,
      LAND: 0,
      COMMERCIAL: 0,
      ROOM: 0,
    } satisfies Record<ComparisonPropertyFilter, number>;
  }, [availableBySearch]);

  const availableListings = useMemo(
    () => availableBySearch
      .filter((item) => {
        if (propertyTypeFilter === 'ALL') {
          return true;
        }
        if (propertyTypeFilter === 'APARTMENT' || propertyTypeFilter === 'HOUSE') {
          return item.propertyType === propertyTypeFilter;
        }
        return false;
      })
      .slice(0, 40),
    [availableBySearch, propertyTypeFilter],
  );

  useEffect(() => {
    if (availableListings.length === 0) {
      setPickerValue('');
      return;
    }
    if (pickerValue === '' || !availableListings.some((item) => item.id === pickerValue)) {
      setPickerValue(availableListings[0].id);
    }
  }, [availableListings, pickerValue]);

  const addSelectedListing = () => {
    if (pickerValue === '' || selectedIds.length >= 4) {
      return;
    }
    setSelectedIds((current) => (current.includes(pickerValue) ? current : [...current, pickerValue]));
  };

  const removeSelectedListing = (listingId: number) => {
    setSelectedIds((current) => current.filter((id) => id !== listingId));
  };

  useLayoutEffect(() => {
    const measureAlignmentOffset = () => {
      const summaryTop = summaryFirstMetricRef.current?.getBoundingClientRect().top;
      const valueTop = firstValueCellRef.current?.getBoundingClientRect().top;
      if (summaryTop == null || valueTop == null) {
        return;
      }
      const nextOffset = Math.max(0, valuesGridOffset + (summaryTop - valueTop));
      if (Math.abs(nextOffset - valuesGridOffset) < 0.5) {
        return;
      }
      setValuesGridOffset(nextOffset);
    };

    const frameId = window.requestAnimationFrame(measureAlignmentOffset);
    const resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(measureAlignmentOffset) : null;

    if (summaryFirstMetricRef.current) {
      resizeObserver?.observe(summaryFirstMetricRef.current);
    }
    if (firstValueCellRef.current) {
      resizeObserver?.observe(firstValueCellRef.current);
    }

    window.addEventListener('resize', measureAlignmentOffset);
    return () => {
      window.cancelAnimationFrame(frameId);
      resizeObserver?.disconnect();
      window.removeEventListener('resize', measureAlignmentOffset);
    };
  }, [valuesGridOffset, offerType, propertyTypeFilter, search, selectedIds.length, availableListings.length, selectedListings.length]);

  const pricePerSqm = (listing: LiveListingSummary) => {
    if (listing.area <= 0) {
      return null;
    }
    return listing.price / listing.area;
  };

  const bestIndices = (
    accessor: (listing: LiveListingSummary) => number | null,
    prefer: 'min' | 'max',
  ) => {
    const values = selectedListings
      .map((listing, index) => ({ index, value: accessor(listing) }))
      .filter((item): item is { index: number; value: number } => item.value != null && Number.isFinite(item.value));

    if (values.length < 2) {
      return new Set<number>();
    }

    const target = values.reduce((best, current) => {
      if (prefer === 'min') {
        return current.value < best ? current.value : best;
      }
      return current.value > best ? current.value : best;
    }, values[0].value);

    return new Set(values.filter((item) => item.value === target).map((item) => item.index));
  };

  const bestPrice = bestIndices((listing) => pricePerSqm(listing), 'min');
  const bestArea = bestIndices((listing) => listing.area, 'max');
  const bestRooms = bestIndices((listing) => listing.rooms, 'max');
  const newest = bestIndices((listing) => listing.yearBuilt ?? null, 'max');
  const totalComparisonColumns = 4;

  const metricRows = [
    { icon: 'coin', label: 'Cena', note: 'Cena całkowita' },
    { icon: 'calculator', label: `Cena za ${areaSuffix}`, note: 'Przelicznik ceny do metrażu' },
    { icon: 'pin', label: 'Lokalizacja', note: 'Lokalizacja ogłoszenia' },
    { icon: 'building', label: 'Metraż', note: 'Powierzchnia użytkowa' },
    { icon: 'house', label: 'Liczba pokoi', note: 'Ilość pomieszczeń' },
    { icon: 'city', label: 'Piętro', note: 'Poziom mieszkania' },
    { icon: 'spark', label: 'Stan', note: 'Stan techniczny' },
    { icon: 'calendar', label: 'Rok budowy', note: 'Rok oddania do użytku' },
    { icon: 'coin', label: 'Czynsz', note: 'Miesięczny czynsz' },
    { icon: 'car', label: 'Parking', note: 'Miejsce parkingowe' },
    { icon: 'building', label: 'Balkon / Taras', note: 'Dodatkowa przestrzeń' },
    { icon: 'clock', label: 'Dostępność', note: 'Termin dostępności' },
  ] as const;

  const comparisonRows = [
    {
      label: 'Cena',
      values: selectedListings.map((listing) => `${formatPrice(listing.price)}${offerType === 'RENT' ? ' / mies.' : ''}`),
      best: new Set<number>(),
    },
    {
      label: `Cena za ${areaSuffix}`,
      values: selectedListings.map((listing) => {
        const perSqm = pricePerSqm(listing);
        return perSqm != null ? formatPricePerArea(perSqm) : 'Brak danych';
      }),
      best: bestPrice,
    },
    {
      label: 'Lokalizacja',
      values: selectedListings.map((listing) => [listing.city, listing.district].filter(Boolean).join(', ')),
      best: new Set<number>(),
    },
    {
      label: 'Metraż',
      values: selectedListings.map((listing) => formatArea(listing.area)),
      best: bestArea,
    },
    {
      label: 'Liczba pokoi',
      values: selectedListings.map((listing) => listingRoomsText(listing.rooms)),
      best: bestRooms,
    },
    {
      label: 'Piętro',
      values: selectedListings.map((listing) => listingFloorText(listing.floor, listing.buildingFloors) ?? 'Brak danych'),
      best: new Set<number>(),
    },
    {
      label: 'Stan',
      values: selectedListings.map((listing) => selectedDetails[listing.id]?.condition ?? listingMarketBadge(listing.market)),
      best: new Set<number>(),
    },
    {
      label: 'Rok budowy',
      values: selectedListings.map((listing) => (listing.yearBuilt ? String(listing.yearBuilt) : 'Brak danych')),
      best: newest,
    },
    {
      label: 'Czynsz',
      values: selectedListings.map((listing) => {
        if (offerType === 'SALE') {
          return '-';
        }
        const rentExtra = selectedDetails[listing.id]?.rentExtra;
        return rentExtra && rentExtra > 0 ? formatPrice(rentExtra) : 'W cenie';
      }),
      best: new Set<number>(),
    },
    {
      label: 'Parking',
      values: selectedListings.map((listing) => {
        const amenities = selectedDetails[listing.id]?.amenities ?? [];
        if (amenities.includes('Garaż')) {
          return 'Garaż';
        }
        if (amenities.includes('Parking')) {
          return 'Miejsce parkingowe';
        }
        return 'Brak';
      }),
      best: new Set<number>(),
    },
    {
      label: 'Balkon / Taras',
      values: selectedListings.map((listing) => {
        const amenities = selectedDetails[listing.id]?.amenities ?? [];
        const hasBalcony = amenities.includes('Balkon');
        const hasTerrace = amenities.includes('Taras');
        if (hasBalcony && hasTerrace) {
          return 'Balkon i taras';
        }
        if (hasBalcony) {
          return 'Balkon';
        }
        if (hasTerrace) {
          return 'Taras';
        }
        return 'Brak';
      }),
      best: new Set<number>(),
    },
    {
      label: 'Dostępność',
      values: selectedListings.map((listing) => {
        if (offerType === 'RENT') {
          return selectedDetails[listing.id]?.availableFrom ?? 'Do uzgodnienia';
        }
        return 'Od zaraz';
      }),
      best: new Set<number>(),
    },
  ];

  const scoreCards = (() => {
    if (selectedListings.length < 2) {
      return selectedListings.map(() => null as number | null);
    }

    const normalize = (value: number, values: number[], prefer: 'min' | 'max') => {
      if (values.length < 2) {
        return null;
      }
      const min = Math.min(...values);
      const max = Math.max(...values);
      if (max === min) {
        return null;
      }
      const normalized = (value - min) / (max - min);
      return prefer === 'max' ? normalized : 1 - normalized;
    };

    const metricDefinitions: Array<{
      weight: number;
      prefer: 'min' | 'max';
      accessor: (listing: LiveListingSummary) => number | null;
      values: number[];
    }> = [
      {
        weight: 0.35,
        prefer: 'min',
        accessor: (listing) => pricePerSqm(listing),
        values: selectedListings.map((listing) => pricePerSqm(listing)).filter((value): value is number => value != null),
      },
      {
        weight: 0.25,
        prefer: 'max',
        accessor: (listing) => listing.area,
        values: selectedListings.map((listing) => listing.area),
      },
      {
        weight: 0.2,
        prefer: 'max',
        accessor: (listing) => listing.rooms,
        values: selectedListings.map((listing) => listing.rooms),
      },
      {
        weight: 0.2,
        prefer: 'max',
        accessor: (listing) => listing.yearBuilt,
        values: selectedListings.map((listing) => listing.yearBuilt).filter((value): value is number => value != null),
      },
    ];

    return selectedListings.map((listing) => {
      let weightedSum = 0;
      let activeWeight = 0;

      metricDefinitions.forEach((metric) => {
        const rawValue = metric.accessor(listing);
        if (rawValue == null) {
          return;
        }
        const normalized = normalize(rawValue, metric.values, metric.prefer);
        if (normalized == null) {
          return;
        }
        weightedSum += normalized * metric.weight;
        activeWeight += metric.weight;
      });

      if (activeWeight === 0) {
        return null;
      }

      const score = (weightedSum / activeWeight) * 10;
      return Math.round(score * 10) / 10;
    });
  })();

  return (
    <section className="comparison-page" aria-label="Porównanie mieszkań">
      <div className="comparison-layout">
        <AccountSidebar />

        <div className="comparison-main">
          <div className="comparison-head">
            <div>
              <h1>Porównanie mieszkań</h1>
              <p>Porównaj do 4 mieszkań i wybierz najlepszą ofertę dla siebie.</p>
            </div>
            <div className="comparison-head-actions">
              <button
                type="button"
                className="ghost"
                disabled={selectedIds.length === 0}
                onClick={() => {
                  const link = window.location.href;
                  navigator.clipboard?.writeText(link)
                    .then(() => setShareInfo('Skopiowano link do porównania.'))
                    .catch(() => setShareInfo(link));
                }}
              >
                Udostępnij porównanie
              </button>
              <button type="button" onClick={() => setSelectedIds([])} disabled={selectedIds.length === 0}>Wyczyść wszystko</button>
            </div>
          </div>
          {shareInfo && <p className="comparison-share-info" role="status">{shareInfo}</p>}

          <div className="comparison-workspace">
            <aside className="comparison-summary-column">
              <section className="comparison-controls" aria-label="Wybór ogłoszeń">
                <div className="comparison-mode-switch" role="tablist" aria-label="Tryb porównania">
                  <button
                    type="button"
                    role="tab"
                    aria-selected={offerType === 'SALE'}
                    className={offerType === 'SALE' ? 'active' : ''}
                    onClick={() => setOfferType('SALE')}
                  >
                    Sprzedaż
                  </button>
                  <button
                    type="button"
                    role="tab"
                    aria-selected={offerType === 'RENT'}
                    className={offerType === 'RENT' ? 'active' : ''}
                    onClick={() => setOfferType('RENT')}
                  >
                    Wynajem
                  </button>
                </div>

                <h3>Dodaj mieszkania do porównania</h3>
                <small>Możesz porównać do 4 ofert jednocześnie.</small>
                <div className="comparison-picker-row">
                  <input
                    type="search"
                    value={search}
                    placeholder="Szukaj mieszkań"
                    onChange={(event) => setSearch(event.target.value)}
                  />
                  <select
                    value={propertyTypeFilter}
                    onChange={(event) => setPropertyTypeFilter(event.target.value as ComparisonPropertyFilter)}
                  >
                    {comparisonPropertyOptions.map((option) => (
                      <option value={option.value} key={option.value}>
                        {option.label} ({typeCounters[option.value]})
                      </option>
                    ))}
                  </select>
                  <select
                    value={pickerValue === '' ? '' : String(pickerValue)}
                    onChange={(event) => setPickerValue(event.target.value ? Number(event.target.value) : '')}
                    disabled={availableListings.length === 0 || selectedIds.length >= 4}
                  >
                    {availableListings.length === 0 && <option value="">Brak dostępnych ogłoszeń</option>}
                    {availableListings.map((listing) => (
                      <option value={listing.id} key={listing.id}>
                        {listing.title} - {[listing.city, listing.district].filter(Boolean).join(', ')}
                      </option>
                    ))}
                  </select>
                  <button
                    type="button"
                    onClick={addSelectedListing}
                    disabled={pickerValue === '' || selectedIds.length >= 4 || availableListings.length === 0}
                  >
                    Dodaj
                  </button>
                </div>
              </section>

              <section className="comparison-summary-card">
                <h3>Podsumowanie porównania</h3>
                <div>
                  {metricRows.map((row, rowIndex) => (
                    <article key={row.label} ref={rowIndex === 0 ? summaryFirstMetricRef : undefined}>
                      <span><Icon name={row.icon} /></span>
                      <p>
                        <strong>{row.label}</strong>
                        <small>{row.note}</small>
                      </p>
                    </article>
                  ))}
                  <article>
                    <span><Icon name="star" /></span>
                    <p>
                      <strong>Ocena ogólna</strong>
                      <small>Na podstawie kluczowych czynników</small>
                    </p>
                  </article>
                </div>
              </section>
            </aside>

            <section className="comparison-content" aria-label="Tabela porównania">
              {loading ? (
                <section className="comparison-empty-state"><p>Wczytuję ogłoszenia...</p></section>
              ) : selectedListings.length === 0 ? (
                <section className="comparison-empty-state">
                  <h2>Brak wybranych ogłoszeń</h2>
                  <p>Dodaj pierwsze mieszkanie, aby rozpocząć porównanie.</p>
                </section>
              ) : (
                <>
                  <div className="comparison-cards-row" style={{ gridTemplateColumns: `repeat(${totalComparisonColumns}, minmax(210px, 1fr))` }}>
                    {selectedListings.map((listing) => (
                      <article className="comparison-offer-head" key={`head-${listing.id}`}>
                        <button type="button" className="comparison-remove" onClick={() => removeSelectedListing(listing.id)} aria-label="Usuń z porównania">×</button>
                        <div className="comparison-offer-photo" style={{ backgroundImage: `url(${listing.coverPhoto ?? heroImage})` }} />
                        <strong>{listing.title}</strong>
                        <small>{[listing.city, listing.district].filter(Boolean).join(', ')}</small>
                        <em>{formatPrice(listing.price)}{offerType === 'RENT' ? ' / mies.' : ''}</em>
                        <button type="button" onClick={() => onOpenListing(listing.id)}>Zobacz ogłoszenie</button>
                      </article>
                    ))}

                    {selectedListings.length < totalComparisonColumns && (
                      <article className="comparison-add-tile" role="button" tabIndex={0} onClick={addSelectedListing} onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); addSelectedListing(); } }}>
                        <span><Icon name="plus" /></span>
                        <strong>Dodaj mieszkanie</strong>
                        <small>Wybierz kolejną ofertę (max. 4)</small>
                      </article>
                    )}

                    {Array.from({ length: Math.max(0, totalComparisonColumns - selectedListings.length - (selectedListings.length < totalComparisonColumns ? 1 : 0)) }, (_, index) => (
                      <article className="comparison-card-empty" key={`card-empty-${index}`} aria-hidden="true" />
                    ))}
                  </div>

                  <div className="comparison-values-grid" style={{ gridTemplateColumns: `repeat(${totalComparisonColumns}, minmax(210px, 1fr))`, paddingTop: valuesGridOffset }}>
                    {comparisonRows.map((row, rowIndex) => (
                      <Fragment key={row.label}>
                        {Array.from({ length: totalComparisonColumns }, (_, index) => {
                          const listing = selectedListings[index];
                          const value = row.values[index];
                          if (!listing || value == null) {
                            return <div className="comparison-cell comparison-cell-empty" ref={rowIndex === 0 && index === 0 ? firstValueCellRef : undefined} key={`${row.label}-empty-${index}`} />;
                          }
                          return (
                            <div className="comparison-cell" ref={rowIndex === 0 && index === 0 ? firstValueCellRef : undefined} key={`${row.label}-${listing.id}`}>
                              <span>{value}</span>
                              {row.best.has(index) && <em>Najlepsza</em>}
                            </div>
                          );
                        })}
                      </Fragment>
                    ))}

                    {Array.from({ length: totalComparisonColumns }, (_, index) => {
                      const listing = selectedListings[index];
                      const score = scoreCards[index];
                      if (!listing || score == null) {
                        return (
                          <div className="comparison-cell comparison-rating comparison-cell-empty" key={`score-empty-${index}`}>
                            {listing && <small>Dodaj min. 2 oferty do porównania</small>}
                          </div>
                        );
                      }
                      return (
                        <div className="comparison-cell comparison-rating" key={`score-${listing.id}`}>
                          <strong>{score.toFixed(1).replace('.', ',')} / 10</strong>
                          <small>{score >= 8.5 ? 'Świetna' : score >= 7 ? 'Bardzo dobra' : score >= 5.5 ? 'Dobra' : 'Do poprawy'}</small>
                        </div>
                      );
                    })}
                  </div>
                </>
              )}
            </section>
          </div>
        </div>
      </div>
    </section>
  );
}

// Spotkanie z API: ogladanie umowione z druga strona rozmowy albo wlasny wpis w kalendarzu.
type ApiMeeting = {
  id: number;
  conversationId: number | null;
  listingId: number | null;
  listingTitle: string | null;
  title: string;
  note: string | null;
  location: string | null;
  date: string;
  start: string;
  end: string;
  status: 'PROPOSED' | 'CONFIRMED' | 'DECLINED' | 'CANCELLED';
  proposedByMe: boolean;
  privateNote: boolean;
  otherName: string | null;
  cancelledByMe: boolean;
};

// Serwer podaje godziny jako HH:mm:ss - w kalendarzu i polach formularza uzywamy HH:mm.
function meetingTime(value: string): string {
  return value.slice(0, 5);
}

function meetingStatusLabel(meeting: ApiMeeting): string {
  if (meeting.status === 'CONFIRMED') {
    return meeting.privateNote ? 'Wpis własny' : 'Potwierdzone';
  }
  if (meeting.status === 'DECLINED') {
    return 'Termin odrzucony';
  }
  if (meeting.status === 'CANCELLED') {
    return meeting.cancelledByMe ? 'Odwołane przez Ciebie' : 'Odwołane';
  }
  return meeting.proposedByMe ? 'Czeka na potwierdzenie' : 'Do potwierdzenia';
}

function meetingStatusClass(meeting: ApiMeeting): string {
  if (meeting.status === 'CONFIRMED') {
    return 'status-completed';
  }
  if (meeting.status === 'DECLINED' || meeting.status === 'CANCELLED') {
    return 'status-cancelled';
  }
  return 'status-planned';
}

function AccountMeetingsPage() {
  const formatDateKey = (value: Date) => {
    const year = value.getFullYear();
    const month = String(value.getMonth() + 1).padStart(2, '0');
    const day = String(value.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  };

  const [calendarMonth, setCalendarMonth] = useState(() => new Date(new Date().getFullYear(), new Date().getMonth(), 1));
  const [selectedDateKey, setSelectedDateKey] = useState(() => formatDateKey(new Date()));
  const [showSharedMeetings, setShowSharedMeetings] = useState(true);
  const [showOwnMeetings, setShowOwnMeetings] = useState(true);
  const [isCreateFormOpen, setIsCreateFormOpen] = useState(false);
  const [editingMeetingId, setEditingMeetingId] = useState<number | null>(null);
  const [formError, setFormError] = useState('');
  const [busy, setBusy] = useState(false);
  const [meetings, setMeetings] = useState<ApiMeeting[]>([]);
  const [loading, setLoading] = useState(true);
  const [newMeeting, setNewMeeting] = useState({
    title: '',
    subtitle: '',
    location: '',
    dateKey: formatDateKey(new Date()),
    start: '10:00',
    end: '10:30',
  });

  const reload = useCallback(() => (
    apiFetch<ApiMeeting[]>('/meetings')
      .then((items) => { setMeetings(items); return items; })
      .catch(() => { setMeetings([]); return [] as ApiMeeting[]; })
      .finally(() => setLoading(false))
  ), []);

  useEffect(() => {
    let cancelled = false;
    apiFetch<ApiMeeting[]>('/meetings')
      .then((items) => { if (!cancelled) { setMeetings(items); } })
      .catch(() => { if (!cancelled) { setMeetings([]); } })
      .finally(() => { if (!cancelled) { setLoading(false); } });
    return () => { cancelled = true; };
  }, []);

  const monthLabel = calendarMonth.toLocaleDateString('pl-PL', { month: 'long', year: 'numeric' });
  const todayKey = formatDateKey(new Date());
  const isPastDateKey = (dateKey: string) => dateKey < todayKey;
  const selectedDateIsPast = isPastDateKey(selectedDateKey);
  const firstMonthDay = new Date(calendarMonth.getFullYear(), calendarMonth.getMonth(), 1);
  const firstMonthWeekday = (firstMonthDay.getDay() + 6) % 7;
  const calendarDays = Array.from({ length: 42 }, (_, index) => {
    const dayOffset = index - firstMonthWeekday;
    return new Date(calendarMonth.getFullYear(), calendarMonth.getMonth(), dayOffset + 1);
  });

  const visibleSelectedMeetings = meetings
    .filter((meeting) => meeting.date === selectedDateKey)
    .filter((meeting) => (meeting.privateNote ? showOwnMeetings : showSharedMeetings))
    .sort((left, right) => left.start.localeCompare(right.start));

  const selectedDayMeetings = meetings.filter((meeting) => meeting.date === selectedDateKey);
  const selectedDayTotals = {
    all: selectedDayMeetings.length,
    waiting: selectedDayMeetings.filter((meeting) => meeting.status === 'PROPOSED').length,
    confirmed: selectedDayMeetings.filter((meeting) => meeting.status === 'CONFIRMED').length,
  };

  const selectedDateLabel = (() => {
    const selectedDate = new Date(selectedDateKey);
    return selectedDate.toLocaleDateString('pl-PL', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
  })();

  const moveMonth = (delta: number) => {
    setCalendarMonth((current) => new Date(current.getFullYear(), current.getMonth() + delta, 1));
  };

  const resetFormForDate = (dateKey: string) => {
    setNewMeeting({ title: '', subtitle: '', location: '', dateKey, start: '10:00', end: '10:30' });
    setEditingMeetingId(null);
    setFormError('');
  };

  const openCreateForm = () => {
    if (selectedDateIsPast) {
      setFormError('Dla dni archiwalnych możesz tylko przeglądać historię spotkań.');
      return;
    }
    const nextOpen = !isCreateFormOpen;
    setIsCreateFormOpen(nextOpen);
    if (nextOpen) {
      resetFormForDate(selectedDateKey);
    }
  };

  const toMinutes = (timeValue: string) => {
    const [hours, minutes] = timeValue.split(':').map((value) => Number(value));
    return (hours * 60) + minutes;
  };

  // Odwolane i odrzucone terminy nie blokuja godziny - miejsce w kalendarzu jest znowu wolne.
  const hasTimeConflict = (candidateDateKey: string, candidateStart: string, candidateEnd: string, ignoreId: number | null) => {
    const candidateStartMinutes = toMinutes(candidateStart);
    const candidateEndMinutes = toMinutes(candidateEnd);
    return meetings.some((meeting) => {
      if (meeting.date !== candidateDateKey || meeting.id === ignoreId) {
        return false;
      }
      if (meeting.status === 'CANCELLED' || meeting.status === 'DECLINED') {
        return false;
      }
      return candidateStartMinutes < toMinutes(meetingTime(meeting.end))
        && candidateEndMinutes > toMinutes(meetingTime(meeting.start));
    });
  };

  const run = (action: Promise<unknown>, onError: string) => {
    setBusy(true);
    action
      .then(() => reload())
      .catch((error: Error) => setFormError(error.message || onError))
      .finally(() => setBusy(false));
  };

  const confirmMeeting = (meeting: ApiMeeting) => {
    run(apiFetch<ApiMeeting>(`/meetings/${meeting.id}/confirm`, { method: 'POST' }), 'Nie udało się potwierdzić terminu.');
  };

  const declineMeeting = (meeting: ApiMeeting) => {
    run(apiFetch<ApiMeeting>(`/meetings/${meeting.id}/decline`, { method: 'POST' }), 'Nie udało się odrzucić terminu.');
  };

  const cancelMeeting = (meeting: ApiMeeting) => {
    run(apiFetch<void>(`/meetings/${meeting.id}`, { method: 'DELETE' }), 'Nie udało się odwołać spotkania.');
    if (editingMeetingId === meeting.id) {
      setEditingMeetingId(null);
      setIsCreateFormOpen(false);
    }
  };

  const openEditMeeting = (meeting: ApiMeeting) => {
    setEditingMeetingId(meeting.id);
    setNewMeeting({
      title: meeting.title,
      subtitle: meeting.note ?? '',
      location: meeting.location ?? '',
      dateKey: meeting.date,
      start: meetingTime(meeting.start),
      end: meetingTime(meeting.end),
    });
    setFormError('');
    setSelectedDateKey(meeting.date);
    const selectedDate = new Date(meeting.date);
    setCalendarMonth(new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1));
    setIsCreateFormOpen(true);
  };

  const saveMeeting = () => {
    if (isPastDateKey(newMeeting.dateKey)) {
      setFormError('Nie można dodawać ani edytować spotkań wstecz.');
      return;
    }
    if (!newMeeting.title.trim()) {
      setFormError('Podaj nazwę spotkania.');
      return;
    }
    if (!newMeeting.start || !newMeeting.end || newMeeting.end <= newMeeting.start) {
      setFormError('Ustaw poprawny zakres godzin (koniec po starcie).');
      return;
    }
    if (hasTimeConflict(newMeeting.dateKey, newMeeting.start, newMeeting.end, editingMeetingId)) {
      setFormError('Masz już inne spotkanie w tym przedziale czasu.');
      return;
    }

    const payload = {
      title: newMeeting.title.trim(),
      note: newMeeting.subtitle.trim(),
      location: newMeeting.location.trim(),
      date: newMeeting.dateKey,
      start: newMeeting.start,
      end: newMeeting.end,
    };
    const request = editingMeetingId
      ? apiFetch<ApiMeeting>(`/meetings/${editingMeetingId}`, { method: 'PUT', body: JSON.stringify(payload) })
      : apiFetch<ApiMeeting>('/meetings', { method: 'POST', body: JSON.stringify(payload) });

    setBusy(true);
    request
      .then(() => reload())
      .then(() => {
        setFormError('');
        setSelectedDateKey(newMeeting.dateKey);
        const selectedDate = new Date(newMeeting.dateKey);
        setCalendarMonth(new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1));
        resetFormForDate(newMeeting.dateKey);
        setIsCreateFormOpen(false);
      })
      .catch((error: Error) => setFormError(error.message || 'Nie udało się zapisać spotkania.'))
      .finally(() => setBusy(false));
  };

  useEffect(() => {
    if (selectedDateIsPast) {
      setIsCreateFormOpen(false);
      setEditingMeetingId(null);
      setFormError('Dla dni archiwalnych możesz tylko przeglądać historię spotkań.');
    } else if (formError === 'Dla dni archiwalnych możesz tylko przeglądać historię spotkań.') {
      setFormError('');
    }
  }, [selectedDateIsPast]);

  return (
    <section className="account-settings-page meetings-page" aria-label="Umówione spotkania">
      <div className="account-layout">
        <AccountSidebar />

        <div className="account-main account-settings-main meetings-main">
          <header className="settings-head meetings-head">
            <h1>Umówione spotkania</h1>
            <p>Oglądania umówione w rozmowach o ogłoszeniach oraz Twoje własne wpisy w kalendarzu.</p>
          </header>

          <div className="meetings-grid">
            <aside className="meetings-calendar-card">
              <div className="meetings-month-nav">
                <button type="button" onClick={() => moveMonth(-1)} aria-label="Poprzedni miesiąc"><Icon name="chevron" /></button>
                <strong>{monthLabel}</strong>
                <button type="button" onClick={() => moveMonth(1)} aria-label="Następny miesiąc"><Icon name="chevron" /></button>
              </div>

              <button
                type="button"
                className="meetings-today-button"
                onClick={() => {
                  const today = new Date();
                  setSelectedDateKey(formatDateKey(today));
                  setCalendarMonth(new Date(today.getFullYear(), today.getMonth(), 1));
                }}
              >
                Przejdź do dziś
              </button>

              <div className="meetings-weekdays">
                {['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So', 'N'].map((day) => <span key={day}>{day}</span>)}
              </div>

              <div className="meetings-days-grid">
                {calendarDays.map((date) => {
                  const key = formatDateKey(date);
                  const isOutside = date.getMonth() !== calendarMonth.getMonth();
                  const isActive = key === selectedDateKey;
                  const isPast = isPastDateKey(key);
                  const hasMeeting = meetings.some((meeting) => meeting.date === key && meeting.status !== 'CANCELLED');

                  return (
                    <button
                      type="button"
                      key={key}
                      className={`${isOutside ? 'outside' : ''} ${isActive ? 'active' : ''} ${isPast ? 'past' : ''}`.trim()}
                      onClick={() => {
                        setSelectedDateKey(key);
                        setFormError('');
                        setCalendarMonth(new Date(date.getFullYear(), date.getMonth(), 1));
                      }}
                    >
                      <span>{date.getDate()}</span>
                      {hasMeeting && <i />}
                    </button>
                  );
                })}
              </div>

              <button type="button" className="meetings-add-button" onClick={openCreateForm} disabled={selectedDateIsPast}>
                <Icon name="plus" /> Dodaj własny wpis
              </button>

              <section className="meetings-filters-card">
                <h3>Filtry</h3>
                <label><input type="checkbox" checked={showSharedMeetings && showOwnMeetings} onChange={(event) => {
                  setShowSharedMeetings(event.target.checked);
                  setShowOwnMeetings(event.target.checked);
                }} /> Pokaż wszystkie</label>
                <label><input type="checkbox" checked={showSharedMeetings} onChange={(event) => setShowSharedMeetings(event.target.checked)} /> Oglądania z drugą stroną</label>
                <label><input type="checkbox" checked={showOwnMeetings} onChange={(event) => setShowOwnMeetings(event.target.checked)} /> Wpisy własne</label>
              </section>

              <p className="meetings-hint">
                Termin oglądania proponujesz w rozmowie o ogłoszeniu - <Link to={ROUTES.messages}>przejdź do wiadomości</Link>.
              </p>
            </aside>

            <section className="meetings-list-card">
              <header>
                <h2>{selectedDateLabel}</h2>
                <div className="meetings-day-summary">
                  <span>Wszystkie: {selectedDayTotals.all}</span>
                  <span>Do potwierdzenia: {selectedDayTotals.waiting}</span>
                  <span>Potwierdzone: {selectedDayTotals.confirmed}</span>
                </div>
                {selectedDateIsPast && (
                  <p className="meetings-history-note">Dzień archiwalny: możesz wyłącznie przeglądać historię spotkań.</p>
                )}
              </header>

              <div className="meetings-list">
                {loading && <p className="meetings-empty">Wczytujemy kalendarz…</p>}
                {!loading && visibleSelectedMeetings.length === 0 && <p className="meetings-empty">Brak spotkań dla wybranego dnia.</p>}
                {visibleSelectedMeetings.map((meeting) => {
                  const canDecide = !meeting.privateNote && meeting.status === 'PROPOSED' && !meeting.proposedByMe;
                  const canCancel = meeting.status === 'PROPOSED' || meeting.status === 'CONFIRMED';
                  return (
                    <article key={meeting.id}>
                      <div className="time">{meetingTime(meeting.start)}<small>- {meetingTime(meeting.end)}</small></div>
                      <div className="info">
                        <strong><i className={meeting.privateNote ? 'own' : 'buy'} />{meeting.title}</strong>
                        <p>{meeting.privateNote ? (meeting.note || 'Wpis własny') : `Z: ${meeting.otherName ?? 'druga strona'}${meeting.listingTitle ? ` · ${meeting.listingTitle}` : ''}`}</p>
                        <small>{meeting.location || 'Miejsce do uzgodnienia'}</small>
                      </div>
                      <div className="meeting-side-actions">
                        <em className={meetingStatusClass(meeting)}>{meetingStatusLabel(meeting)}</em>
                        {!selectedDateIsPast && (
                          <div className="meeting-row-actions">
                            {canDecide && (
                              <button type="button" disabled={busy} onClick={() => confirmMeeting(meeting)} aria-label="Potwierdź termin"><Icon name="check" /></button>
                            )}
                            {canDecide && (
                              <button type="button" disabled={busy} onClick={() => declineMeeting(meeting)} aria-label="Odrzuć termin"><Icon name="warning" /></button>
                            )}
                            {meeting.privateNote && (
                              <button type="button" disabled={busy} onClick={() => openEditMeeting(meeting)} aria-label="Edytuj wpis"><Icon name="gear" /></button>
                            )}
                            {meeting.conversationId != null && (
                              <Link to={conversationPath(meeting.conversationId)} aria-label="Otwórz rozmowę"><Icon name="message" /></Link>
                            )}
                            {canCancel && (
                              <button type="button" disabled={busy} onClick={() => cancelMeeting(meeting)} aria-label={meeting.privateNote ? 'Usuń wpis' : 'Odwołaj spotkanie'}><Icon name="trash" /></button>
                            )}
                          </div>
                        )}
                      </div>
                    </article>
                  );
                })}
              </div>

              {isCreateFormOpen && (
                <div className="meetings-create-form">
                  <h3>{editingMeetingId ? 'Edytuj wpis' : 'Dodaj własny wpis'}</h3>
                  <div className="fields">
                    <label>Nazwa spotkania<input type="text" value={newMeeting.title} onChange={(event) => setNewMeeting((current) => ({ ...current, title: event.target.value }))} placeholder="Np. oglądanie mieszkania" /></label>
                    <label>Opis<input type="text" value={newMeeting.subtitle} onChange={(event) => setNewMeeting((current) => ({ ...current, subtitle: event.target.value }))} placeholder="Np. notatka dla siebie" /></label>
                    <label>Miejsce<input type="text" value={newMeeting.location} onChange={(event) => setNewMeeting((current) => ({ ...current, location: event.target.value }))} placeholder="Np. ul. Długa 5" /></label>
                    <label>Data<input type="date" min={todayKey} value={newMeeting.dateKey} onChange={(event) => setNewMeeting((current) => ({ ...current, dateKey: event.target.value }))} /></label>
                    <label>Godzina od<input type="time" value={newMeeting.start} onChange={(event) => setNewMeeting((current) => ({ ...current, start: event.target.value }))} /></label>
                    <label>Godzina do<input type="time" value={newMeeting.end} onChange={(event) => setNewMeeting((current) => ({ ...current, end: event.target.value }))} /></label>
                  </div>
                  {formError && <p className="meetings-error">{formError}</p>}
                  <div className="actions">
                    <button
                      type="button"
                      className="secondary"
                      onClick={() => {
                        setIsCreateFormOpen(false);
                        resetFormForDate(selectedDateKey);
                      }}
                    >
                      Anuluj
                    </button>
                    <button type="button" className="primary" disabled={busy} onClick={saveMeeting}>{editingMeetingId ? 'Zapisz zmiany' : 'Zapisz wpis'}</button>
                  </div>
                </div>
              )}
              {!isCreateFormOpen && formError && <p className="meetings-error">{formError}</p>}
            </section>
          </div>
        </div>
      </div>
    </section>
  );
}

function MyApiListingsBand({ onOpenListing }: { onOpenListing: (id: number) => void }) {
  const { formatPrice, formatArea } = useDisplay();
  const [items, setItems] = useState<ApiListingSummary[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    apiFetch<ApiListingSummary[]>('/listings/mine')
      .then((data) => { if (!cancelled) { setItems(data); setLoading(false); } })
      .catch((err) => { if (!cancelled) { setError(err instanceof Error ? err.message : 'Nie udało się wczytać Twoich ogłoszeń.'); setLoading(false); } });
    return () => { cancelled = true; };
  }, []);

  if (loading) {
    return <section className="listings-api-band"><p className="listings-api-note">Wczytywanie Twoich ogłoszeń…</p></section>;
  }
  if (error) {
    return <section className="listings-api-band"><p className="listings-api-note">{error}</p></section>;
  }
  if (items.length === 0) {
    return null;
  }

  return (
    <section className="listings-api-band" aria-label="Twoje ogłoszenia w serwisie">
      <header>
        <h2>Twoje ogłoszenia w serwisie</h2>
        <span>{items.length}</span>
      </header>
      <div className="listings-api-grid">
        {items.map((item) => (
          <button type="button" key={item.id} className="listings-api-card" onClick={() => onOpenListing(item.id)}>
            <div className="listings-api-thumb" style={{ backgroundImage: `url(${item.coverPhoto ?? heroImage})` }}>
              <span className={`ld-status ld-status-${item.status.toLowerCase()}`}>{LISTING_STATUS_LABELS[item.status]}</span>
            </div>
            <div className="listings-api-body">
              <strong>{item.title}</strong>
              <small>{[item.city, item.district].filter(Boolean).join(', ')}</small>
              <em>{formatPrice(item.price)}{item.offerType === 'RENT' ? ' /mc' : ''}</em>
              <span>{formatArea(item.area)} • {listingRoomsText(item.rooms)}</span>
            </div>
          </button>
        ))}
      </div>
    </section>
  );
}

type PromoPlan = { id: number; name: string; durationDays: number; price: number; active: boolean; position: number };
type PromoPackage = { id: number; name: string; quantity: number; price: number; active: boolean; position: number };

const formatZl = (n: number) => `${new Intl.NumberFormat('pl-PL', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(n)} zł`;
const promoErr = (e: unknown) => (e instanceof Error ? e.message : 'Wystąpił błąd.');

// Modal promowania oferty: wybór planu (4/14/30 dni), płatność AutoPay lub użycie kredytu z pakietu.
function PromoteModal({ listingId, listingTitle, onClose, onDone }: {
  listingId: number;
  listingTitle?: string;
  onClose: () => void;
  onDone: () => void;
}) {
  const { refreshUser } = useAuth();
  const [plans, setPlans] = useState<PromoPlan[]>([]);
  const [packages, setPackages] = useState<PromoPackage[]>([]);
  const [credits, setCredits] = useState(0);
  const [selectedPlanId, setSelectedPlanId] = useState<number | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [done, setDone] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const [pl, pk, me] = await Promise.all([
          apiFetch<PromoPlan[]>('/promotion/plans'),
          apiFetch<PromoPackage[]>('/promotion/packages'),
          apiFetch<{ credits: number }>('/promotion/me'),
        ]);
        if (cancelled) {
          return;
        }
        setPlans(pl);
        setPackages(pk);
        setCredits(me.credits);
        setSelectedPlanId(pl.find((p) => p.durationDays === 14)?.id ?? pl[0]?.id ?? null);
      } catch (e) {
        if (!cancelled) {
          setError(promoErr(e));
        }
      }
    })();
    return () => { cancelled = true; };
  }, []);

  const payPlan = async () => {
    if (!selectedPlanId) {
      return;
    }
    setBusy(true);
    setError(null);
    try {
      const res = await apiFetch<{ status: string; redirectUrl?: string }>('/promotion/checkout', {
        method: 'POST',
        body: JSON.stringify({ kind: 'PLAN', planId: selectedPlanId, listingId, method: 'AutoPay' }),
      });
      if (res.status === 'REDIRECT' && res.redirectUrl) {
        window.location.href = res.redirectUrl;
        return;
      }
      await refreshUser();
      setDone('Oferta została wyróżniona. Dziękujemy za płatność!');
    } catch (e) {
      setError(promoErr(e));
    } finally {
      setBusy(false);
    }
  };

  const useCredit = async () => {
    if (!selectedPlanId) {
      return;
    }
    setBusy(true);
    setError(null);
    try {
      const res = await apiFetch<{ credits: number }>('/promotion/promote-with-credit', {
        method: 'POST',
        body: JSON.stringify({ listingId, planId: selectedPlanId }),
      });
      setCredits(res.credits);
      await refreshUser();
      setDone(`Oferta wyróżniona z pakietu. Pozostało kredytów: ${res.credits}.`);
    } catch (e) {
      setError(promoErr(e));
    } finally {
      setBusy(false);
    }
  };

  const buyPackage = async (packageId: number) => {
    setBusy(true);
    setError(null);
    try {
      const res = await apiFetch<{ status: string; redirectUrl?: string }>('/promotion/checkout', {
        method: 'POST',
        body: JSON.stringify({ kind: 'PACKAGE', packageId, method: 'AutoPay' }),
      });
      if (res.status === 'REDIRECT' && res.redirectUrl) {
        window.location.href = res.redirectUrl;
        return;
      }
      const me = await apiFetch<{ credits: number }>('/promotion/me');
      setCredits(me.credits);
      await refreshUser();
      setDone(`Pakiet kupiony. Masz teraz ${me.credits} kredytów promowania.`);
    } catch (e) {
      setError(promoErr(e));
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="listing-delete-overlay" role="dialog" aria-modal="true" aria-label="Promuj ogłoszenie" onClick={onClose}>
      <div className="listing-promote-modal" onClick={(event) => event.stopPropagation()}>
        <button type="button" className="listing-delete-close" aria-label="Zamknij" onClick={onClose}>×</button>
        <div className="listing-promote-icon"><Icon name="spark" /></div>
        <h2>Wyróżnij ogłoszenie</h2>
        <p className="listing-pause-description">
          Wyróżnione oferty wyświetlają się wyżej na listach i przyciągają więcej zainteresowanych{listingTitle ? ` - „${listingTitle}"` : ''}.
        </p>

        {done ? (
          <>
            <div className="promote-done"><Icon name="check" /> {done}</div>
            <div className="listing-delete-actions">
              <button type="button" className="confirm" onClick={onDone}>Gotowe</button>
            </div>
          </>
        ) : (
          <>
            <div className="promote-plans" role="radiogroup" aria-label="Czas wyróżnienia">
              <strong>Wybierz czas wyróżnienia</strong>
              {plans.map((p) => (
                <button
                  key={p.id}
                  type="button"
                  role="radio"
                  aria-checked={selectedPlanId === p.id}
                  className={selectedPlanId === p.id ? 'promote-plan active' : 'promote-plan'}
                  onClick={() => setSelectedPlanId(p.id)}
                >
                  <span className="promote-plan-name">{p.name}</span>
                  <span className="promote-plan-days">{p.durationDays} dni</span>
                  <span className="promote-plan-price">{formatZl(p.price)}</span>
                </button>
              ))}
              {plans.length === 0 && <p className="mkt-muted">Ładowanie planów...</p>}
            </div>

            {error && <p className="mkt-error">{error}</p>}

            <div className="promote-actions">
              {credits > 0 && (
                <button type="button" className="promote-credit-btn" disabled={busy || !selectedPlanId} onClick={useCredit}>
                  <Icon name="spark" /> Użyj kredytu (masz {credits})
                </button>
              )}
              <button type="button" className="promote-pay-btn" disabled={busy || !selectedPlanId} onClick={payPlan}>
                <Icon name="lock" /> {busy ? 'Przetwarzanie...' : 'Zapłać przez AutoPay'}
              </button>
            </div>

            {packages.length > 0 && (
              <div className="promote-packages">
                <strong>Kup pakiet promowań w niższej cenie za sztukę</strong>
                <div className="promote-packages-row">
                  {packages.map((pk) => (
                    <button key={pk.id} type="button" className="promote-package" disabled={busy} onClick={() => buyPackage(pk.id)}>
                      <span className="promote-package-qty">{pk.quantity} szt.</span>
                      <span className="promote-package-name">{pk.name}</span>
                      <span className="promote-package-price">{formatZl(pk.price)}</span>
                      <span className="promote-package-unit">{formatZl(pk.price / pk.quantity)} / szt.</span>
                    </button>
                  ))}
                </div>
              </div>
            )}

            <p className="promote-note"><Icon name="lock" /> Szybka płatność (BLIK, karta, przelew) przez AutoPay.</p>
          </>
        )}
      </div>
    </div>
  );
}

function AccountListingsPage({ onOpenListing }: { onOpenListing: (id: number) => void }) {
  const navigate = useNavigate();
  const { formatPrice, formatMonthlyPrice, formatPricePerArea, formatArea } = useDisplay();
  type ListingCategory = 'sale' | 'rent';
  type ListingStatus = 'active' | 'paused' | 'archived';
  type ListingItem = {
    id: string;
    title: string;
    address: string;
    area: number;
    rooms: number;
    floor: number;
    price: number;
    monthlyFees: number;
    views: number;
    saves: number;
    addedDate: string;
    image: string;
    imagePosition: string;
    category: ListingCategory;
    status: ListingStatus;
    pausedUntil?: string | null;
    promoted: boolean;
    promotedUntil?: string | null;
    isApi?: boolean;
    apiId?: number;
    apiStatus?: ApiListingStatus;
  };

  type ListingTab = 'all' | 'sale' | 'rent' | 'archived';

  const [activeTab, setActiveTab] = useState<ListingTab>('all');
  const [query, setQuery] = useState('');
  const [feedback, setFeedback] = useState('');
  const [deleteModalListingId, setDeleteModalListingId] = useState<string | null>(null);
  const [deleteReason, setDeleteReason] = useState<string>('');
  const [pauseModalListingId, setPauseModalListingId] = useState<string | null>(null);
  const [pauseDuration, setPauseDuration] = useState<'7' | '14' | '30' | 'manual'>('7');
  const [promoteModalListingId, setPromoteModalListingId] = useState<number | null>(null);
  const [listings, setListings] = useState<ListingItem[]>([]);

  // Prawdziwe ogloszenia uzytkownika z backendu (/listings/mine).
  const [apiListings, setApiListings] = useState<ApiListingSummary[]>([]);
  const loadMine = useCallback(async () => {
    try {
      setApiListings(await apiFetch<ApiListingSummary[]>('/listings/mine'));
    } catch {
      setApiListings([]);
    }
  }, []);
  useEffect(() => { void loadMine(); }, [loadMine]);

  const isApiId = (id: string) => id.startsWith('api-');
  const apiIdNum = (id: string) => Number(id.slice(4));

  // Ile osob zapisalo kazde z moich ogloszen - liczone po stronie serwera ({listingId: liczba}).
  const [savesByListingId, setSavesByListingId] = useState<Record<number, number>>({});
  useEffect(() => {
    apiFetch<Record<string, number>>('/listings/mine/saves')
      .then((data) => {
        const parsed: Record<number, number> = {};
        Object.entries(data).forEach(([listingId, count]) => {
          parsed[Number(listingId)] = count;
        });
        setSavesByListingId(parsed);
      })
      .catch(() => setSavesByListingId({}));
  }, [apiListings]);

  const apiRows: ListingItem[] = apiListings.map((summary) => ({
    id: `api-${summary.id}`,
    title: summary.title,
    address: [summary.address, summary.district, summary.city].filter(Boolean).join(', ') || summary.city,
    area: summary.area,
    rooms: summary.rooms,
    floor: summary.floor ? (parseInt(summary.floor, 10) || 0) : 0,
    price: summary.price,
    monthlyFees: 0,
    views: summary.viewsCount ?? 0,
    saves: savesByListingId[summary.id] ?? 0,
    addedDate: (summary.createdAt || '').slice(0, 10) || '2025-01-01',
    image: summary.coverPhoto || heroImage,
    imagePosition: 'center',
    category: summary.offerType === 'RENT' ? 'rent' : 'sale',
    status: summary.status === 'PAUSED' ? 'paused' : 'active',
    pausedUntil: null,
    promoted: !!summary.promotedUntil && new Date(summary.promotedUntil).getTime() > Date.now(),
    promotedUntil: summary.promotedUntil,
    isApi: true,
    apiId: summary.id,
    apiStatus: summary.status,
  }));

  // Pokazujemy wylacznie prawdziwe ogloszenia z API - kazde z pelnymi opcjami (edycja, promowanie).
  const allRows: ListingItem[] = apiRows;

  const apiSetStatus = (id: string, status: ApiListingStatus) => {
    const numericId = apiIdNum(id);
    apiFetch<ApiListingSummary>(`/listings/${numericId}/status?status=${status}`, { method: 'PATCH' })
      .then((updated) => {
        setApiListings((current) => current.map((item) => (item.id === numericId ? { ...item, status: updated.status } : item)));
        setFeedback(status === 'PAUSED' ? 'Ogłoszenie zostało wstrzymane. Wznowisz je ręcznie.' : 'Ogłoszenie zostało wznowione i jest znów widoczne.');
      })
      .catch((error) => setFeedback(error instanceof Error ? error.message : 'Nie udało się zmienić statusu ogłoszenia.'));
  };

  const apiDeleteListing = (id: string) => {
    const numericId = apiIdNum(id);
    apiFetch<void>(`/listings/${numericId}`, { method: 'DELETE' })
      .then(() => {
        setApiListings((current) => current.filter((item) => item.id !== numericId));
        setFeedback('Ogłoszenie zostało trwale usunięte z serwisu.');
      })
      .catch((error) => setFeedback(error instanceof Error ? error.message : 'Nie udało się usunąć ogłoszenia.'))
      .finally(() => closeDeleteModal());
  };

  useEffect(() => {
    const resumePausedListings = () => {
      const nowMs = Date.now();
      let resumedCount = 0;

      setListings((current) => current.map((item) => {
        if (item.status !== 'paused' || !item.pausedUntil) {
          return item;
        }

        const pausedUntilMs = new Date(item.pausedUntil).getTime();
        if (Number.isNaN(pausedUntilMs) || pausedUntilMs > nowMs) {
          return item;
        }

        resumedCount += 1;
        return { ...item, status: 'active', pausedUntil: null };
      }));

      if (resumedCount > 0) {
        setFeedback(resumedCount === 1
          ? 'Wstrzymane ogłoszenie zostało automatycznie przywrócone.'
          : `${resumedCount} ogłoszenia zostały automatycznie przywrócone.`);
      }
    };

    resumePausedListings();
    const intervalId = window.setInterval(resumePausedListings, 60 * 1000);
    return () => window.clearInterval(intervalId);
  }, []);

  useEffect(() => {
    if (!feedback) {
      return;
    }
    const timeoutId = window.setTimeout(() => setFeedback(''), 3500);
    return () => window.clearTimeout(timeoutId);
  }, [feedback]);

  const parseDate = (dateValue: string) => new Date(`${dateValue}T00:00:00`).getTime();
  const formatDate = (dateValue: string) => new Date(`${dateValue}T00:00:00`).toLocaleDateString('pl-PL');
  const formatPausedUntil = (pausedUntil?: string | null) => {
    if (!pausedUntil) {
      return 'do odwołania';
    }
    const date = new Date(pausedUntil);
    if (Number.isNaN(date.getTime())) {
      return 'do odwołania';
    }
    return `do ${date.toLocaleDateString('pl-PL')}`;
  };

  const tabCounts = {
    all: allRows.filter((item) => item.status !== 'archived').length,
    sale: allRows.filter((item) => item.category === 'sale' && item.status === 'active').length,
    rent: allRows.filter((item) => item.category === 'rent' && item.status === 'active').length,
    archived: allRows.filter((item) => item.status === 'paused').length,
  };

  const visibleListings = allRows
    .filter((item) => {
      if (activeTab === 'archived') {
        return item.status === 'paused';
      }
      if (activeTab === 'all') {
        return item.status !== 'archived';
      }
      if (item.status !== 'active') {
        return false;
      }
      if (activeTab === 'sale') {
        return item.category === 'sale';
      }
      if (activeTab === 'rent') {
        return item.category === 'rent';
      }
      return true;
    })
    .filter((item) => {
      const normalized = query.trim().toLowerCase();
      if (!normalized) {
        return true;
      }
      return `${item.title} ${item.address}`.toLowerCase().includes(normalized);
    })
    .sort((left, right) => parseDate(right.addedDate) - parseDate(left.addedDate));

  const togglePause = (id: string) => {
    if (isApiId(id)) {
      const row = apiRows.find((item) => item.id === id);
      if (!row) {
        return;
      }
      apiSetStatus(id, row.status === 'paused' ? 'APPROVED' : 'PAUSED');
      return;
    }
    const listing = listings.find((item) => item.id === id);
    if (!listing || listing.status === 'archived') {
      return;
    }

    if (listing.status === 'paused') {
      setListings((current) => current.map((item) => (item.id === id ? { ...item, status: 'active', pausedUntil: null } : item)));
      setFeedback('Ogłoszenie zostało wznowione.');
      return;
    }

    setPauseModalListingId(id);
    setPauseDuration('7');
  };

  const closePauseModal = () => {
    setPauseModalListingId(null);
    setPauseDuration('7');
  };

  const pauseOptions = [
    { id: '7' as const, title: '7 dni', description: 'Wstrzymanie na tydzień' },
    { id: '14' as const, title: '14 dni', description: 'Wstrzymanie na dwa tygodnie' },
    { id: '30' as const, title: '30 dni', description: 'Wstrzymanie na miesiąc' },
    { id: 'manual' as const, title: 'Do odwołania', description: 'Wznowisz ręcznie, kiedy będziesz gotowy' },
  ];

  const pauseUntilLabel = (duration: '7' | '14' | '30' | 'manual') => {
    if (duration === 'manual') {
      return 'do odwołania';
    }
    const date = new Date();
    date.setDate(date.getDate() + Number(duration));
    return `do ${date.toLocaleDateString('pl-PL')}`;
  };

  const confirmPauseListing = () => {
    if (!pauseModalListingId) {
      return;
    }
    const pausedUntil = pauseDuration === 'manual'
      ? null
      : new Date(Date.now() + Number(pauseDuration) * 24 * 60 * 60 * 1000).toISOString();

    setListings((current) => current.map((item) => (item.id === pauseModalListingId
      ? { ...item, status: 'paused', pausedUntil }
      : item)));
    setFeedback(`Ogłoszenie zostało wstrzymane ${pauseUntilLabel(pauseDuration)}.`);
    closePauseModal();
  };

  const deleteReasons = [
    { id: 'sold', title: 'Ogłoszenie zostało już sprzedane / wynajęte', description: 'Transakcja została zakończona.' },
    { id: 'outdated', title: 'Nieaktualne dane', description: 'Cena, opis lub dostępność oferty się zmieniły.' },
    { id: 'new-version', title: 'Wystawię ogłoszenie ponownie', description: 'Chcę dodać nową wersję tej oferty od zera.' },
    { id: 'quality', title: 'Niewystarczająca jakość ogłoszenia', description: 'Zdjęcia lub treść wymagają większej przebudowy.' },
    { id: 'other', title: 'Inny powód', description: 'Nie pasuje żadna z powyższych opcji.' },
  ];

  const openDeleteModal = (id: string) => {
    setDeleteModalListingId(id);
    setDeleteReason('');
  };

  const closeDeleteModal = () => {
    setDeleteModalListingId(null);
    setDeleteReason('');
  };

  const removeListing = (id: string) => {
    if (isApiId(id)) {
      apiDeleteListing(id);
      return;
    }
    setListings((current) => current.filter((item) => item.id !== id));
    const selectedReason = deleteReasons.find((reason) => reason.id === deleteReason);
    setFeedback(selectedReason ? `Ogłoszenie zostało usunięte (${selectedReason.title.toLowerCase()}).` : 'Ogłoszenie zostało usunięte.');
    closeDeleteModal();
  };

  const togglePromote = (id: string) => {
    setListings((current) => current.map((item) => (item.id === id ? { ...item, promoted: !item.promoted } : item)));
  };

  const statusLabel = (status: ListingStatus) => {
    if (status === 'active') {
      return 'Aktywne';
    }
    if (status === 'paused') {
      return 'Wstrzymane';
    }
    return 'Archiwalne';
  };

  const statusClass = (status: ListingStatus) => {
    if (status === 'active') {
      return 'active';
    }
    if (status === 'paused') {
      return 'paused';
    }
    return 'archived';
  };

  return (
    <section className="account-settings-page account-listings-page" aria-label="Moje oferty">
      <div className="account-layout">
        <AccountSidebar />

        <div className="account-main account-settings-main listings-main">
          <header className="settings-head listings-head">
            <h1>Moje oferty</h1>
            <p>Zarządzaj swoimi ogłoszeniami. Edytuj, promuj lub wstrzymuj oferty.</p>
          </header>

          <section className="listings-toolbar-card">
            <div className="listings-tabs" role="tablist" aria-label="Typ ofert">
              <button type="button" role="tab" className={activeTab === 'all' ? 'active' : ''} aria-selected={activeTab === 'all'} onClick={() => setActiveTab('all')}>Wszystkie ({tabCounts.all})</button>
              <button type="button" role="tab" className={activeTab === 'sale' ? 'active' : ''} aria-selected={activeTab === 'sale'} onClick={() => setActiveTab('sale')}>Na sprzedaż ({tabCounts.sale})</button>
              <button type="button" role="tab" className={activeTab === 'rent' ? 'active' : ''} aria-selected={activeTab === 'rent'} onClick={() => setActiveTab('rent')}>Na wynajem ({tabCounts.rent})</button>
              <button type="button" role="tab" className={activeTab === 'archived' ? 'active' : ''} aria-selected={activeTab === 'archived'} onClick={() => setActiveTab('archived')}>Wstrzymane ({tabCounts.archived})</button>
            </div>

            <div className="listings-actions-row">
              <label className="listings-search"><Icon name="search" /><input type="text" value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Szukaj po nazwie lub adresie" /></label>
            </div>
          </section>

          {feedback && <p className="listings-feedback">{feedback}</p>}

          <section className="listings-table" aria-label="Lista moich ofert">
            {visibleListings.length === 0 && (
              <div className="listings-empty">
                <strong>Brak ofert dla wybranego widoku.</strong>
                <small>Zmień filtry albo dodaj nowe ogłoszenie.</small>
              </div>
            )}

            {visibleListings.map((item) => (
              <article key={item.id} className="listing-row">
                <div
                  className={`listing-photo ${item.isApi ? 'clickable' : ''}`}
                  style={{ backgroundImage: `url(${item.image})`, backgroundPosition: item.imagePosition }}
                  onClick={item.isApi && item.apiId != null ? () => onOpenListing(item.apiId as number) : undefined}
                  role={item.isApi ? 'button' : undefined}
                  aria-label={item.isApi ? `Podgląd ogłoszenia ${item.title}` : undefined}
                />

                <div className="listing-main-copy">
                  <h3>{item.title}</h3>
                  <p>{item.address}</p>
                  <small>{formatArea(item.area)} • {item.rooms} pokoje • {item.floor} piętro</small>
                </div>

                <div className="listing-price-box">
                  <>
                    <strong>{item.category === 'sale' ? formatPrice(item.price) : formatMonthlyPrice(item.price)}</strong>
                    <small>{item.monthlyFees > 0 ? `+ ${formatPrice(item.monthlyFees)} opłaty` : formatPricePerArea(item.price / item.area)}</small>
                  </>
                </div>

                <div className="listing-added">
                  <small>Dodane</small>
                  <strong>{formatDate(item.addedDate)}</strong>
                </div>

                <div className={`listing-status ${statusClass(item.status)}`}>
                  <span>
                    {item.isApi && (item.apiStatus === 'PENDING' || item.apiStatus === 'REJECTED') ? (
                      LISTING_STATUS_LABELS[item.apiStatus]
                    ) : item.status === 'paused' ? (
                      <>
                        Wstrzymane
                        <br />
                        ({formatPausedUntil(item.pausedUntil)})
                      </>
                    ) : statusLabel(item.status)}
                  </span>
                  {item.isApi && <em className="listing-live-tag">W serwisie</em>}
                  {item.promoted && <em className="listing-promoted-tag"><Icon name="spark" /> Wyróżnione{item.promotedUntil ? ` do ${formatDate(item.promotedUntil.slice(0, 10))}` : ''}</em>}
                </div>

                <div className="listing-metrics">
                  <strong><Icon name="eye" /> {item.views}</strong>
                  <small>wyświetleń</small>
                </div>

                <div className="listing-metrics">
                  <strong><Icon name="heart" /> {item.saves}</strong>
                  <small>zapisanych</small>
                </div>

                <div className="listing-actions">
                  {item.isApi && item.apiId != null && item.status !== 'archived' && <button type="button" onClick={() => navigate(listingEditPath(Number(item.apiId)))}>Edytuj</button>}
                  {item.isApi && item.apiId != null && item.apiStatus === 'APPROVED' && <button type="button" className="promote-action-btn" onClick={() => setPromoteModalListingId(Number(item.apiId))}><Icon name="spark" /> {item.promoted ? 'Przedłuż' : 'Promuj'}</button>}
                  {(item.isApi ? (item.apiStatus === 'APPROVED' || item.apiStatus === 'PAUSED') : item.status !== 'archived') && <button type="button" className="ghost" onClick={() => togglePause(item.id)}>{item.status === 'active' ? 'Wstrzymaj' : 'Wznów'}</button>}
                  <button type="button" className="ghost danger" onClick={() => openDeleteModal(item.id)}>Usuń</button>
                  {!item.isApi && <button type="button" className="ghost" onClick={() => togglePromote(item.id)}>{item.promoted ? 'Wyłącz promo' : 'Promuj'}</button>}
                </div>
              </article>
            ))}
          </section>

          {deleteModalListingId && (
            <div className="listing-delete-overlay" role="dialog" aria-modal="true" aria-label="Usuń ogłoszenie">
              <div className="listing-delete-modal">
                <button type="button" className="listing-delete-close" aria-label="Zamknij" onClick={closeDeleteModal}>×</button>
                <div className="listing-delete-icon"><Icon name="trash" /></div>
                <h2>Usuń ogłoszenie</h2>
                <p>Czy na pewno chcesz usunąć to ogłoszenie?<br />Ta akcja jest nieodwracalna.</p>

                <div className="listing-delete-reasons">
                  <strong>Dlaczego usuwasz to ogłoszenie? <small>(opcjonalnie)</small></strong>
                  {deleteReasons.map((reason) => (
                    <button key={reason.id} type="button" className={deleteReason === reason.id ? 'active' : ''} onClick={() => setDeleteReason(reason.id)}>
                      <span>
                        <b>{reason.title}</b>
                        <small>{reason.description}</small>
                      </span>
                      <i aria-hidden="true" />
                    </button>
                  ))}
                </div>

                <div className="listing-delete-actions">
                  <button type="button" className="secondary" onClick={closeDeleteModal}>Anuluj</button>
                  <button type="button" className="danger" onClick={() => removeListing(deleteModalListingId)}>Usuń ogłoszenie</button>
                </div>
              </div>
            </div>
          )}

          {promoteModalListingId != null && (
            <PromoteModal
              listingId={promoteModalListingId}
              listingTitle={allRows.find((row) => row.apiId === promoteModalListingId)?.title}
              onClose={() => setPromoteModalListingId(null)}
              onDone={() => { setPromoteModalListingId(null); void loadMine(); }}
            />
          )}

          {pauseModalListingId && (
            <div className="listing-delete-overlay" role="dialog" aria-modal="true" aria-label="Wstrzymaj ogłoszenie">
              <div className="listing-pause-modal">
                <button type="button" className="listing-delete-close" aria-label="Zamknij" onClick={closePauseModal}>×</button>
                <div className="listing-pause-icon"><Icon name="clock" /></div>
                <h2>Wstrzymaj ogłoszenie</h2>
                <p className="listing-pause-description">Twoje ogłoszenie zostanie tymczasowo ukryte.<br />Możesz je wznowić w dowolnym momencie.</p>

                <div className="listing-pause-options">
                  <strong>Na jaki czas chcesz wstrzymać ogłoszenie?</strong>
                  {pauseOptions.map((option) => (
                    <button key={option.id} type="button" className={pauseDuration === option.id ? 'active' : ''} onClick={() => setPauseDuration(option.id)}>
                      <span className="listing-pause-option-icon"><Icon name={option.id === 'manual' ? 'clock' : 'calendar'} /></span>
                      <span>
                        <b>{option.title}</b>
                        <small>{option.id === 'manual' ? option.description : pauseUntilLabel(option.id)}</small>
                      </span>
                      <i aria-hidden="true" />
                    </button>
                  ))}
                </div>

                <p className="listing-pause-note"><Icon name="spark" /> Ogłoszenie będzie niewidoczne dla innych użytkowników, ale wszystkie dane i statystyki zostaną zachowane.</p>

                <div className="listing-delete-actions">
                  <button type="button" className="secondary" onClick={closePauseModal}>Anuluj</button>
                  <button type="button" className="confirm" onClick={confirmPauseListing}>Wstrzymaj ogłoszenie</button>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// /konto/ustawienia - jedyne miejsce z logika konta.
//
// Wczesniej te same rzeczy stały w trzech miejscach naraz: karta "Zarzadzanie kontem" w ustawieniach
// powtarzala cala strone /konto/bezpieczenstwo (i przeczyla jej co do statusu 2FA), jezyk komunikacji
// wystepowal dwa razy na jednym ekranie, a edycja danych zyla na osobnej podstronie i zapisywala
// polowe pol do localStorage zamiast na serwer. Teraz zrodlem prawdy jest backend:
// profil w PUT /auth/me, reszta w /api/me/settings, zgody marketingowe w /api/me/marketing.
// ---------------------------------------------------------------------------

// Kierunkowe telefonow z wymagana liczba cyfr - stala modulu, nie budujemy jej przy kazdym renderze.
const PHONE_COUNTRY_OPTIONS = [
  { iso2: 'pl', code: '+48', country: 'Polska', digits: 9 },
  { iso2: 'al', code: '+355', country: 'Albania', digits: 9 },
  { iso2: 'at', code: '+43', country: 'Austria', digits: 10 },
  { iso2: 'be', code: '+32', country: 'Belgia', digits: 9 },
  { iso2: 'bg', code: '+359', country: 'Bułgaria', digits: 9 },
  { iso2: 'hr', code: '+385', country: 'Chorwacja', digits: 9 },
  { iso2: 'cy', code: '+357', country: 'Cypr', digits: 8 },
  { iso2: 'cz', code: '+420', country: 'Czechy', digits: 9 },
  { iso2: 'dk', code: '+45', country: 'Dania', digits: 8 },
  { iso2: 'ee', code: '+372', country: 'Estonia', digits: 8 },
  { iso2: 'fi', code: '+358', country: 'Finlandia', digits: 10 },
  { iso2: 'fr', code: '+33', country: 'Francja', digits: 9 },
  { iso2: 'de', code: '+49', country: 'Niemcy', digits: 11 },
  { iso2: 'gr', code: '+30', country: 'Grecja', digits: 10 },
  { iso2: 'hu', code: '+36', country: 'Węgry', digits: 9 },
  { iso2: 'is', code: '+354', country: 'Islandia', digits: 7 },
  { iso2: 'ie', code: '+353', country: 'Irlandia', digits: 9 },
  { iso2: 'it', code: '+39', country: 'Włochy', digits: 10 },
  { iso2: 'lv', code: '+371', country: 'Łotwa', digits: 8 },
  { iso2: 'lt', code: '+370', country: 'Litwa', digits: 8 },
  { iso2: 'lu', code: '+352', country: 'Luksemburg', digits: 9 },
  { iso2: 'mt', code: '+356', country: 'Malta', digits: 8 },
  { iso2: 'nl', code: '+31', country: 'Holandia', digits: 9 },
  { iso2: 'no', code: '+47', country: 'Norwegia', digits: 8 },
  { iso2: 'pt', code: '+351', country: 'Portugalia', digits: 9 },
  { iso2: 'ro', code: '+40', country: 'Rumunia', digits: 9 },
  { iso2: 'rs', code: '+381', country: 'Serbia', digits: 9 },
  { iso2: 'sk', code: '+421', country: 'Słowacja', digits: 9 },
  { iso2: 'si', code: '+386', country: 'Słowenia', digits: 8 },
  { iso2: 'es', code: '+34', country: 'Hiszpania', digits: 9 },
  { iso2: 'se', code: '+46', country: 'Szwecja', digits: 9 },
  { iso2: 'ch', code: '+41', country: 'Szwajcaria', digits: 9 },
  { iso2: 'ua', code: '+380', country: 'Ukraina', digits: 9 },
  { iso2: 'gb', code: '+44', country: 'Wielka Brytania', digits: 10 },
  { iso2: 'tr', code: '+90', country: 'Turcja', digits: 10 },
  { iso2: 'us', code: '+1', country: 'USA/Kanada', digits: 10 },
  { iso2: 'mx', code: '+52', country: 'Meksyk', digits: 10 },
  { iso2: 'br', code: '+55', country: 'Brazylia', digits: 11 },
  { iso2: 'ar', code: '+54', country: 'Argentyna', digits: 10 },
  { iso2: 'cl', code: '+56', country: 'Chile', digits: 9 },
  { iso2: 'co', code: '+57', country: 'Kolumbia', digits: 10 },
  { iso2: 'au', code: '+61', country: 'Australia', digits: 9 },
  { iso2: 'nz', code: '+64', country: 'Nowa Zelandia', digits: 9 },
  { iso2: 'jp', code: '+81', country: 'Japonia', digits: 10 },
  { iso2: 'kr', code: '+82', country: 'Korea Południowa', digits: 10 },
  { iso2: 'cn', code: '+86', country: 'Chiny', digits: 11 },
  { iso2: 'in', code: '+91', country: 'Indie', digits: 10 },
  { iso2: 'pk', code: '+92', country: 'Pakistan', digits: 10 },
  { iso2: 'id', code: '+62', country: 'Indonezja', digits: 10 },
  { iso2: 'th', code: '+66', country: 'Tajlandia', digits: 9 },
  { iso2: 'vn', code: '+84', country: 'Wietnam', digits: 9 },
  { iso2: 'sg', code: '+65', country: 'Singapur', digits: 8 },
  { iso2: 'my', code: '+60', country: 'Malezja', digits: 10 },
  { iso2: 'za', code: '+27', country: 'RPA', digits: 9 },
  { iso2: 'eg', code: '+20', country: 'Egipt', digits: 10 },
  { iso2: 'ma', code: '+212', country: 'Maroko', digits: 9 },
  { iso2: 'ng', code: '+234', country: 'Nigeria', digits: 10 },
  { iso2: 'ke', code: '+254', country: 'Kenia', digits: 9 },
  { iso2: 'ae', code: '+971', country: 'ZEA', digits: 9 },
  { iso2: 'sa', code: '+966', country: 'Arabia Saudyjska', digits: 9 },
  { iso2: 'il', code: '+972', country: 'Izrael', digits: 9 },
  { iso2: 'qa', code: '+974', country: 'Katar', digits: 8 },
] as const;

type PhoneCountry = (typeof PHONE_COUNTRY_OPTIONS)[number];

const DEFAULT_PHONE_COUNTRY = PHONE_COUNTRY_OPTIONS[0];

// Rozbicie zapisanego numeru ("+48 123456789") na kierunkowy i cyfry, zeby formularz pokazal
// dokladnie to, co jest w bazie - bez posilkowania sie pamiecia przegladarki.
function splitStoredPhone(stored: string | null | undefined): { prefix: string; digits: string } {
  const raw = (stored ?? '').trim();
  if (!raw) {
    return { prefix: DEFAULT_PHONE_COUNTRY.code, digits: '' };
  }
  const match = [...PHONE_COUNTRY_OPTIONS]
    .sort((a, b) => b.code.length - a.code.length)
    .find((option) => raw.startsWith(option.code));
  if (!match) {
    return { prefix: DEFAULT_PHONE_COUNTRY.code, digits: raw.replace(/\D/g, '').slice(0, DEFAULT_PHONE_COUNTRY.digits) };
  }
  return { prefix: match.code, digits: raw.slice(match.code.length).replace(/\D/g, '').slice(0, match.digits) };
}

function phoneMaskGroupsFor(digitsRequired: number): number[] {
  if (digitsRequired <= 7) {
    return [3, digitsRequired - 3];
  }
  if (digitsRequired === 8) {
    return [4, 4];
  }
  if (digitsRequired === 9) {
    return [3, 3, 3];
  }
  if (digitsRequired === 10) {
    return [3, 3, 4];
  }
  return [3, 4, digitsRequired - 7];
}

function formatPhoneWithMask(digits: string, groups: number[]): string {
  let cursor = 0;
  return groups
    .map((groupLength) => {
      const chunk = digits.slice(cursor, cursor + groupLength);
      cursor += groupLength;
      return chunk;
    })
    .filter(Boolean)
    .join('-');
}

type SettingsUploadTarget = 'avatar' | 'cover';

const SETTINGS_IMAGE_MIME_TYPES = new Set(['image/jpeg', 'image/png', 'image/webp']);
const SETTINGS_IMAGE_MAX_BYTES = 5 * 1024 * 1024;
// Jak dlugo wisi potwierdzenie zapisu w ustawieniach konta, zanim zniknie samo.
const SETTINGS_BANNER_VISIBLE_MS = 5000;
const SETTINGS_IMAGE_MIN_DIMENSIONS: Record<SettingsUploadTarget, { width: number; height: number }> = {
  avatar: { width: 160, height: 160 },
  cover: { width: 960, height: 260 },
};

function loadImageElement(source: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve(image);
    image.onerror = () => reject(new Error('Nie udało się odczytać obrazu.'));
    image.src = source;
  });
}

// Zgrubna heurystyka udzialu barw skory - odsiewa oczywiste zdjecia nagosci przed wyslaniem na serwer.
function calculateSkinToneRatio(image: HTMLImageElement): number {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  if (!context) {
    return 0;
  }

  const sampleWidth = 64;
  const sampleHeight = Math.max(64, Math.round((image.height / image.width) * 64));
  canvas.width = sampleWidth;
  canvas.height = sampleHeight;
  context.drawImage(image, 0, 0, sampleWidth, sampleHeight);

  const { data } = context.getImageData(0, 0, sampleWidth, sampleHeight);
  let skinPixels = 0;
  const totalPixels = data.length / 4;

  for (let index = 0; index < data.length; index += 4) {
    const red = data[index];
    const green = data[index + 1];
    const blue = data[index + 2];
    const max = Math.max(red, green, blue);
    const min = Math.min(red, green, blue);
    const isSkinTone = red > 95 && green > 40 && blue > 20 && max - min > 15 && Math.abs(red - green) > 15 && red > green && red > blue;
    if (isSkinTone) {
      skinPixels += 1;
    }
  }

  return totalPixels > 0 ? skinPixels / totalPixels : 0;
}

/**
 * Sprawdza plik i zwraca gotowy do zapisu data URL. Obraz jest przy okazji skalowany
 * (compressImageFile) - inaczej 5 MB zdjecie po zamianie na base64 nie przeszloby przez proxy.
 */
async function prepareProfileImage(file: File, target: SettingsUploadTarget): Promise<{ ok: true; dataUrl: string } | { ok: false; reason: string }> {
  if (!SETTINGS_IMAGE_MIME_TYPES.has(file.type)) {
    return { ok: false, reason: 'Dozwolone są tylko pliki JPG, PNG lub WEBP.' };
  }
  if (file.size > SETTINGS_IMAGE_MAX_BYTES) {
    return { ok: false, reason: 'Plik jest za duży. Maksymalny rozmiar to 5 MB.' };
  }
  if (/(nude|naked|porn|xxx|sex|erotic|nago|gola|goly|nagie)/i.test(file.name)) {
    return { ok: false, reason: 'Nazwa pliku wskazuje na niedozwoloną treść.' };
  }

  try {
    const dataUrl = await compressImageFile(file, target === 'avatar' ? 512 : 1280, 0.8);
    if (!dataUrl.startsWith('data:image/')) {
      return { ok: false, reason: 'Nie udało się przygotować zdjęcia. Spróbuj ponownie.' };
    }
    const image = await loadImageElement(dataUrl);
    const minimum = SETTINGS_IMAGE_MIN_DIMENSIONS[target];
    if (image.width < minimum.width || image.height < minimum.height) {
      return { ok: false, reason: `Zdjęcie ma za małą rozdzielczość. Minimum: ${minimum.width}x${minimum.height}px.` };
    }
    if (calculateSkinToneRatio(image) > (target === 'avatar' ? 0.82 : 0.76)) {
      return { ok: false, reason: 'Zdjęcie nie przeszło automatycznej weryfikacji bezpieczeństwa.' };
    }
    return { ok: true, dataUrl };
  } catch {
    return { ok: false, reason: 'Nie udało się zweryfikować zdjęcia. Spróbuj ponownie.' };
  }
}

const CURRENCY_LABELS: Record<Currency, string> = {
  PLN: 'PLN (zł)',
  EUR: 'EUR (€)',
  USD: 'USD ($)',
};

const AREA_UNIT_LABELS: Record<AreaUnit, string> = {
  M2: 'Metry kwadratowe (m²)',
  FT2: 'Stopy kwadratowe (ft²)',
};

const PROFILE_VISIBILITY_OPTIONS: Array<{ value: ProfileVisibility; label: string; description: string }> = [
  { value: 'PUBLIC', label: 'Publiczna', description: 'Twój profil jest widoczny dla wszystkich użytkowników.' },
  { value: 'PRIVATE', label: 'Prywatna', description: 'Inni zobaczą tylko informację, że Twój profil jest prywatny - bez ogłoszeń, opisu i zdjęcia.' },
];

const SETTINGS_PROPERTY_TYPES = ['Mieszkania', 'Domy', 'Apartamenty', 'Działki', 'Lokale użytkowe'];

/** Wycina z zapisanych ustawien same preferencje wyszukiwania - w postaci, ktora rozumieja filtry. */
function toSearchPreferences(settings: UserSettings): SearchPreferences {
  return {
    locations: settings.searchLocations,
    propertyType: settings.searchPropertyType,
    budgetMax: settings.searchBudgetMax,
    areaMin: settings.searchAreaMin,
    areaMax: settings.searchAreaMax,
    roomsMin: settings.searchRoomsMin,
    roomsMax: settings.searchRoomsMax,
  };
}

// Musi odpowiadac RESEND_COOLDOWN_SECONDS w PhoneVerificationService - inaczej przycisk odblokuje
// sie wczesniej, niz backend przyjmie kolejna wysylke, i uzytkownik dostanie blad 429.
const OTP_RESEND_COOLDOWN_SECONDS = 60;

// Pojedynczy wiersz z przelacznikiem. Zapis idzie na serwer od razu po kliknieciu.
// Powiadomienia, ktorych serwis jeszcze nie wysyla - przelacznik jest nieaktywny i mowi wprost dlaczego.
const SETTINGS_NOT_SENT_YET = 'Wkrótce - tych wiadomości jeszcze nie wysyłamy.';

function SettingsToggleRow({ icon, label, hint, checked, disabled, onChange }: {
  icon: string;
  label: string;
  hint?: string;
  checked: boolean;
  disabled?: boolean;
  onChange: (next: boolean) => void;
}) {
  return (
    <article className="toggle-row">
      <span><Icon name={icon} /></span>
      <em>{label}{hint && <small className="toggle-hint">{hint}</small>}</em>
      <button
        type="button"
        role="switch"
        aria-checked={checked}
        aria-label={label}
        disabled={disabled}
        className={`account-toggle ${checked ? 'on' : ''}`}
        onClick={() => onChange(!checked)}
      />
    </article>
  );
}

/**
 * onSearchPreferencesSaved: zapis preferencji ma od razu przelozyc sie na filtry wyszukiwarki.
 * Przejscia wewnatrz aplikacji nie tworza korzenia od nowa, wiec bez tego wywolania zmiana
 * zadzialalaby dopiero po przeladowaniu strony.
 */
function AccountSettingsPage({ onSearchPreferencesSaved }: { onSearchPreferencesSaved: (prefs: SearchPreferences) => void }) {
  const {
    user, updateProfile, changePassword, verifyPassword, passwordCooldown,
    deleteAccount, loadSettings, saveSettings, refreshUser, verifyPhone, resendPhoneOtp,
  } = useAuth();
  const { notify } = useNotifications();
  const { applySettings: applyDisplaySettings } = useDisplay();
  const navigate = useNavigate();

  // Konta firmowe maja jedno pole "Nazwa firmy" zamiast imienia i nazwiska, bez daty urodzenia,
  // a adres opisuje siedzibe firmy. Konta prywatne dzialaja bez zmian.
  const isCompany = user?.accountType === 'COMPANY';

  type Tone = 'success' | 'error' | 'info';
  type Banner = { text: string; tone: Tone } | null;

  const [settings, setSettings] = useState<UserSettings | null>(null);
  const [consent, setConsent] = useState({ emailConsent: false, smsConsent: false });
  const [isLoading, setIsLoading] = useState(true);
  const [loadError, setLoadError] = useState('');

  // --- Formularz danych osobowych ---
  const [identity, setIdentity] = useState(() => ({
    firstName: '',
    lastName: '',
    companyName: '',
    nip: '',
    nick: '',
    phonePrefix: DEFAULT_PHONE_COUNTRY.code as string,
    phoneDigits: '',
    birthDate: '',
    address: '',
    contactPreference: 'EMAIL_AND_PHONE' as ContactPreference,
    preferredLanguage: 'PL' as PreferredLanguage,
    bio: '',
  }));
  const [identityBanner, setIdentityBanner] = useState<Banner>(null);
  const [isSavingIdentity, setIsSavingIdentity] = useState(false);
  // Dane firmowe pokazywane na profilu publicznym (tylko konto COMPANY). Ladowane z ustawien konta.
  const [companyProfile, setCompanyProfile] = useState({
    companyTagline: '',
    website: '',
    socialLinkedin: '',
    socialFacebook: '',
    socialInstagram: '',
    socialYoutube: '',
    publicContactVisible: false,
  });
  const [companyBanner, setCompanyBanner] = useState<Banner>(null);
  const [isSavingCompany, setIsSavingCompany] = useState(false);
  const [isGusLoading, setIsGusLoading] = useState(false);
  const [isSuggestingNick, setIsSuggestingNick] = useState(false);
  const [isPhoneTouched, setIsPhoneTouched] = useState(false);
  const [isPhoneCountryOpen, setIsPhoneCountryOpen] = useState(false);
  const phoneCountryRef = useRef<HTMLDivElement | null>(null);
  const avatarInputRef = useRef<HTMLInputElement | null>(null);
  const coverInputRef = useRef<HTMLInputElement | null>(null);

  // --- Weryfikacja telefonu (realny OTP z backendu) ---
  const [isOtpOpen, setIsOtpOpen] = useState(false);
  const [otpCode, setOtpCode] = useState('');
  const [otpError, setOtpError] = useState('');
  const [otpInfo, setOtpInfo] = useState('');
  const [otpBusy, setOtpBusy] = useState(false);
  const [otpCooldown, setOtpCooldown] = useState(0);
  // Serwer odmowil kolejnego kodu - komunikat z odliczanym czasem zamiast stalej liczby sekund.
  const [otpCooldownRejected, setOtpCooldownRejected] = useState(false);

  // --- Preferencje wyszukiwania ---
  const [searchPrefs, setSearchPrefs] = useState({
    locations: '',
    propertyType: '',
    budgetMax: '',
    areaMin: '',
    areaMax: '',
    roomsMin: '',
    roomsMax: '',
  });
  const [searchBanner, setSearchBanner] = useState<Banner>(null);
  // Podpowiedzi lokalizacji pod polem "Lokalizacje" - jak w wyszukiwarce ofert.
  const [placeSuggestions, setPlaceSuggestions] = useState<PlaceSuggestion[]>([]);
  const [placesLoading, setPlacesLoading] = useState(false);
  // Lista jest otwarta tylko podczas pisania - po wybraniu pozycji nie ma juz czego podpowiadac.
  const [placesOpen, setPlacesOpen] = useState(false);
  const skipNextPlaceFetch = useRef(false);
  const [isSavingSearch, setIsSavingSearch] = useState(false);

  // --- Bezpieczenstwo ---
  const [passwordForm, setPasswordForm] = useState({ current: '', next: '', confirm: '' });
  const [passwordBanner, setPasswordBanner] = useState<Banner>(null);
  const [isSavingPassword, setIsSavingPassword] = useState(false);
  // Stan sprawdzenia dotychczasowego hasla. Pola nowego hasla otwieraja sie dopiero przy 'ok'.
  const [currentCheck, setCurrentCheck] = useState<'empty' | 'checking' | 'ok' | 'bad'>('empty');
  // Ile sekund zostalo do kolejnej dozwolonej zmiany hasla; 0 = mozna zmieniac.
  const [passwordWait, setPasswordWait] = useState(0);
  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
  const [deletePassword, setDeletePassword] = useState('');
  const [deleteError, setDeleteError] = useState('');
  const [isDeleting, setIsDeleting] = useState(false);

  const [prefsBanner, setPrefsBanner] = useState<Banner>(null);
  const bannerTimers = useRef<Map<string, number>>(new Map());

  /**
   * Potwierdzenie zapisu, ktore gasnie samo po chwili. Kazda sekcja ustawien ma wlasny komunikat,
   * wiec licznik trzymamy pod kluczem sekcji - inaczej zapis w jednej karcie gasilby napis w drugiej.
   * Bledy przez to nie przechodza: te zostaja na ekranie, bo wymagaja reakcji uzytkownika.
   */
  const flashBanner = (key: string, setBanner: Dispatch<SetStateAction<Banner>>, banner: Banner) => {
    const running = bannerTimers.current.get(key);
    if (running !== undefined) {
      window.clearTimeout(running);
    }
    setBanner(banner);
    const timer = window.setTimeout(() => {
      // Gasimy tylko wlasny komunikat - jesli w miedzyczasie pojawil sie nowszy (np. blad
      // kolejnej operacji), zostaje na ekranie.
      setBanner((current) => (current === banner ? null : current));
      bannerTimers.current.delete(key);
    }, SETTINGS_BANNER_VISIBLE_MS);
    bannerTimers.current.set(key, timer);
  };

  const flashPrefsBanner = (banner: Banner) => flashBanner('prefs', setPrefsBanner, banner);

  useEffect(() => {
    const timers = bannerTimers.current;
    return () => {
      timers.forEach((timer) => window.clearTimeout(timer));
      timers.clear();
    };
  }, []);

  const selectedCountry: PhoneCountry = PHONE_COUNTRY_OPTIONS.find((option) => option.code === identity.phonePrefix) ?? DEFAULT_PHONE_COUNTRY;
  const phoneMaskGroups = phoneMaskGroupsFor(selectedCountry.digits);
  const phoneMaskPlaceholder = phoneMaskGroups.map((groupLength) => '-'.repeat(groupLength)).join('-');
  const phoneDisplayValue = formatPhoneWithMask(identity.phoneDigits, phoneMaskGroups);
  const isPhoneComplete = identity.phoneDigits.length === selectedCountry.digits;
  const shouldShowPhoneError = isPhoneTouched && identity.phoneDigits.length > 0 && !isPhoneComplete;
  const composedPhone = identity.phoneDigits ? `${identity.phonePrefix} ${identity.phoneDigits}` : '';
  // OTP idzie na numer zapisany w bazie, wiec potwierdzac mozna dopiero zapisany numer.
  const isPhoneSaved = composedPhone !== '' && composedPhone === (user?.phone ?? '');
  const todayIsoDate = new Date().toISOString().slice(0, 10);

  // Formularz wypelniamy danymi z serwera - tymi samymi, ktore uzytkownik podal przy rejestracji.
  useEffect(() => {
    if (!user) {
      return;
    }
    const phone = splitStoredPhone(user.phone);
    setIdentity((current) => ({
      ...current,
      firstName: getFirstName(user.fullName || ''),
      lastName: getLastName(user.fullName || ''),
      // Dla firmy cala nazwa siedzi w fullName - nie rozbijamy jej na imie/nazwisko.
      companyName: user.fullName || '',
      nip: user.nip ?? '',
      nick: user.nick ?? '',
      phonePrefix: phone.prefix,
      phoneDigits: phone.digits,
      birthDate: user.birthDate ?? '',
      address: user.address ?? '',
      contactPreference: user.contactPreference,
      preferredLanguage: user.preferredLanguage,
    }));
  }, [user]);

  useEffect(() => {
    if (!user) {
      return;
    }
    let active = true;
    setIsLoading(true);
    Promise.all([
      loadSettings(),
      apiFetch<{ emailConsent: boolean; smsConsent: boolean }>('/me/marketing').catch(() => ({ emailConsent: false, smsConsent: false })),
    ])
      .then(([loaded, marketing]) => {
        if (!active) {
          return;
        }
        setSettings(loaded);
        setConsent({ emailConsent: marketing.emailConsent, smsConsent: marketing.smsConsent });
        setIdentity((current) => ({ ...current, bio: loaded.bio ?? '' }));
        setCompanyProfile({
          companyTagline: loaded.companyTagline ?? '',
          website: loaded.website ?? '',
          socialLinkedin: loaded.socialLinkedin ?? '',
          socialFacebook: loaded.socialFacebook ?? '',
          socialInstagram: loaded.socialInstagram ?? '',
          socialYoutube: loaded.socialYoutube ?? '',
          publicContactVisible: loaded.publicContactVisible ?? false,
        });
        setSearchPrefs({
          locations: loaded.searchLocations ?? '',
          propertyType: loaded.searchPropertyType ?? '',
          budgetMax: loaded.searchBudgetMax != null ? String(loaded.searchBudgetMax) : '',
          areaMin: loaded.searchAreaMin != null ? String(loaded.searchAreaMin) : '',
          areaMax: loaded.searchAreaMax != null ? String(loaded.searchAreaMax) : '',
          roomsMin: loaded.searchRoomsMin != null ? String(loaded.searchRoomsMin) : '',
          roomsMax: loaded.searchRoomsMax != null ? String(loaded.searchRoomsMax) : '',
        });
        setLoadError('');
      })
      .catch((error: unknown) => {
        if (active) {
          setLoadError(error instanceof Error ? error.message : 'Nie udało się wczytać ustawień konta.');
        }
      })
      .finally(() => {
        if (active) {
          setIsLoading(false);
        }
      });
    return () => {
      active = false;
    };
  }, [user, loadSettings]);

  useEffect(() => {
    const closeOnOutsideClick = (event: MouseEvent) => {
      if (phoneCountryRef.current && !phoneCountryRef.current.contains(event.target as Node)) {
        setIsPhoneCountryOpen(false);
      }
    };
    window.addEventListener('mousedown', closeOnOutsideClick);
    return () => window.removeEventListener('mousedown', closeOnOutsideClick);
  }, []);

  useEffect(() => {
    if (otpCooldown <= 0) {
      return;
    }
    const timer = window.setTimeout(() => setOtpCooldown((current) => current - 1), 1000);
    return () => window.clearTimeout(timer);
  }, [otpCooldown]);

  const setIdentityField = <K extends keyof typeof identity>(field: K, value: (typeof identity)[K]) => {
    setIdentity((current) => ({ ...current, [field]: value }));
  };

  // Pobranie danych firmy z rejestru REGON po NIP-ie - uzupelnia nazwe firmy i adres siedziby,
  // tak samo jak przy rejestracji konta firmowego.
  const fetchCompanyFromGus = async () => {
    if (isGusLoading) {
      return;
    }
    setIsGusLoading(true);
    setIdentityBanner(null);
    try {
      const company = await apiFetch<{ name: string | null; nip: string; regon: string | null; address: string | null }>(
        `/gus/company?nip=${encodeURIComponent(identity.nip.trim())}`,
      );
      setIdentity((current) => ({
        ...current,
        nip: company.nip,
        companyName: company.name ?? current.companyName,
        address: company.address ?? current.address,
      }));
      setIdentityBanner({ text: `Pobrano dane z rejestru REGON${company.regon ? ` (REGON ${company.regon})` : ''}. Sprawdź je i zapisz.`, tone: 'success' });
    } catch (error) {
      setIdentityBanner({ text: error instanceof Error ? error.message : 'Nie udało się pobrać danych z GUS.', tone: 'error' });
    } finally {
      setIsGusLoading(false);
    }
  };

  /**
   * Prosi serwer o wolna nazwe uzytkownika dla imienia i nazwiska z formularza. Uzytkownik nie wpisuje
   * nicka recznie - przyjmuje propozycje, a wolne miejsce w puli sprawdza baza, nie przegladarka.
   */
  const suggestNickFromName = async () => {
    const fullName = isCompany
      ? identity.companyName.trim()
      : `${identity.firstName.trim()} ${identity.lastName.trim()}`.trim();
    if (!fullName) {
      setIdentityBanner({ text: isCompany ? 'Podaj nazwę firmy, żeby dopasować nazwę użytkownika.' : 'Podaj imię i nazwisko, żeby dopasować nazwę użytkownika.', tone: 'error' });
      return;
    }
    setIsSuggestingNick(true);
    setIdentityBanner(null);
    try {
      const suggestion = await apiFetch<{ nick: string }>(`/auth/nick-suggestion?fullName=${encodeURIComponent(fullName)}`);
      setIdentityField('nick', suggestion.nick);
      if (suggestion.nick === (user?.nick ?? '')) {
        setIdentityBanner({ text: 'Twoja nazwa użytkownika już odpowiada imieniu i nazwisku.', tone: 'info' });
      }
    } catch (error) {
      setIdentityBanner({ text: error instanceof Error ? error.message : 'Nie udało się dopasować nazwy użytkownika.', tone: 'error' });
    } finally {
      setIsSuggestingNick(false);
    }
  };

  /**
   * Zapis pojedynczego ustawienia. Przelacznik zmienia sie od razu (UI nie czeka na siec),
   * a przy bledzie wracamy do poprzedniej wartosci i mowimy o tym wprost.
   */
  const patchSettings = async (patch: UserSettingsPatch, successText?: string) => {
    const previous = settings;
    if (previous) {
      setSettings({ ...previous, ...(patch as Partial<UserSettings>) });
    }
    try {
      const saved = await saveSettings(patch);
      setSettings(saved);
      // Waluta i jednostka powierzchni steruja kazda cena w aplikacji, wiec zapis od razu trafia do
      // providera prezentacji - listy ofert, mapa czy kalkulatory przeliczaja sie bez przeladowania.
      applyDisplaySettings(saved);
      // Zdjecie profilowe wisi przy zalogowanym uzytkowniku, wiec po jego zmianie odswiezamy profil -
      // awatar w naglowku i panelu konta zmienia sie od razu, bez przeladowania strony.
      if ('avatarImage' in patch) {
        void refreshUser();
      }
      if (successText) {
        // Kazde potwierdzenie zapisu gasnie samo - to informacja o wykonanej akcji, a nie stan
        // formularza. Bledy zostaja na ekranie, bo wymagaja reakcji uzytkownika.
        flashPrefsBanner({ text: successText, tone: 'success' });
      }
      return saved;
    } catch (error) {
      if (previous) {
        setSettings(previous);
      }
      setPrefsBanner({ text: error instanceof Error ? error.message : 'Nie udało się zapisać ustawienia.', tone: 'error' });
      return null;
    }
  };

  // Jezyk komunikacji jest czescia profilu (PUT /auth/me), a nie ustawien wyswietlania. Zapisujemy
  // go od razu przy zmianie - jak reszta "Ustawien aplikacji". Backend nadpisuje caly profil, wiec
  // wysylamy aktualne, zapisane dane uzytkownika i zmieniamy tylko jezyk (nie ruszamy niezapisanych
  // edycji z sekcji "Moje dane").
  const saveLanguage = async (next: PreferredLanguage) => {
    if (!user || next === user.preferredLanguage) {
      return;
    }
    try {
      await updateProfile({
        fullName: user.fullName,
        nick: user.nick ?? undefined,
        phone: user.phone ?? undefined,
        birthDate: user.birthDate ?? undefined,
        address: user.address ?? undefined,
        contactPreference: user.contactPreference,
        preferredLanguage: next,
      });
      setIdentityField('preferredLanguage', next);
      flashPrefsBanner({ text: 'Język komunikacji zapisany.', tone: 'success' });
    } catch (error) {
      setPrefsBanner({ text: error instanceof Error ? error.message : 'Nie udało się zapisać języka.', tone: 'error' });
    }
  };

  const updateConsent = async (next: { emailConsent: boolean; smsConsent: boolean }) => {
    const previous = consent;
    setConsent(next);
    try {
      await apiFetch('/me/marketing', { method: 'PUT', body: JSON.stringify(next) });
    } catch (error) {
      setConsent(previous);
      setPrefsBanner({ text: error instanceof Error ? error.message : 'Nie udało się zapisać zgody.', tone: 'error' });
    }
  };

  const saveIdentity = async () => {
    if (identity.phoneDigits.length > 0 && !isPhoneComplete) {
      setIsPhoneTouched(true);
      setIdentityBanner({ text: `Numer telefonu dla kraju ${selectedCountry.country} musi mieć ${selectedCountry.digits} cyfr.`, tone: 'error' });
      return;
    }
    const fullName = isCompany
      ? identity.companyName.trim()
      : `${identity.firstName.trim()} ${identity.lastName.trim()}`.trim();
    if (!fullName) {
      setIdentityBanner({ text: isCompany ? 'Podaj nazwę firmy.' : 'Podaj imię i nazwisko.', tone: 'error' });
      return;
    }

    setIsSavingIdentity(true);
    setIdentityBanner(null);
    try {
      await updateProfile({
        fullName,
        nick: identity.nick.trim() || undefined,
        phone: composedPhone || undefined,
        // NIP wysylamy tylko dla firmy (dla osoby prywatnej undefined = backend go nie zmienia).
        nip: isCompany ? identity.nip.trim() : undefined,
        // Firma nie ma daty urodzenia - nie wysylamy jej z konta firmowego.
        birthDate: isCompany ? undefined : (identity.birthDate || undefined),
        address: identity.address.trim() || undefined,
        contactPreference: identity.contactPreference,
        preferredLanguage: identity.preferredLanguage,
      });
      await patchSettings({ bio: identity.bio.trim() });
      flashBanner('identity', setIdentityBanner, { text: 'Dane zapisane.', tone: 'success' });
    } catch (error) {
      setIdentityBanner({ text: error instanceof Error ? error.message : 'Nie udało się zapisać danych.', tone: 'error' });
    } finally {
      setIsSavingIdentity(false);
    }
  };

  // Zapis danych firmowych profilu publicznego (haslo, www, social media, publiczny kontakt).
  const saveCompanyProfile = async () => {
    setIsSavingCompany(true);
    setCompanyBanner(null);
    try {
      await patchSettings({
        companyTagline: companyProfile.companyTagline.trim(),
        website: companyProfile.website.trim(),
        socialLinkedin: companyProfile.socialLinkedin.trim(),
        socialFacebook: companyProfile.socialFacebook.trim(),
        socialInstagram: companyProfile.socialInstagram.trim(),
        socialYoutube: companyProfile.socialYoutube.trim(),
        publicContactVisible: companyProfile.publicContactVisible,
      });
      flashBanner('company', setCompanyBanner, { text: 'Dane firmy zapisane.', tone: 'success' });
    } catch (error) {
      setCompanyBanner({ text: error instanceof Error ? error.message : 'Nie udało się zapisać danych firmy.', tone: 'error' });
    } finally {
      setIsSavingCompany(false);
    }
  };

  const handleImageUpload = async (event: ReactChangeEvent<HTMLInputElement>, target: SettingsUploadTarget) => {
    const file = event.target.files?.[0];
    if (!file) {
      return;
    }
    setPrefsBanner({ text: 'Trwa weryfikacja zdjęcia...', tone: 'info' });
    const result = await prepareProfileImage(file, target);
    event.target.value = '';
    if (!result.ok) {
      setPrefsBanner({ text: result.reason, tone: 'error' });
      return;
    }
    await patchSettings(
      target === 'avatar' ? { avatarImage: result.dataUrl } : { coverImage: result.dataUrl },
      target === 'avatar' ? 'Zdjęcie profilowe zapisane.' : 'Zdjęcie w tle zapisane.',
    );
  };

  const sendOtp = async () => {
    if (!user) {
      return;
    }
    setOtpBusy(true);
    setOtpError('');
    setOtpInfo('');
    setOtpCooldownRejected(false);
    try {
      await resendPhoneOtp(user.email);
      setOtpInfo(`Wysłaliśmy kod SMS na numer ${user.phone ?? ''}.`);
      setOtpCooldown(OTP_RESEND_COOLDOWN_SECONDS);
      setIsOtpOpen(true);
    } catch (error) {
      const message = error instanceof Error ? error.message : 'Nie udało się wysłać kodu SMS.';
      // Za wczesnie na kolejny kod - poprzedni nadal jest wazny, wiec okno otwieramy
      // i odliczamy czas podany przez serwer ("Kolejny możesz zamówić za N s").
      const secondsLeft = Number(/za (\d+) s/.exec(message)?.[1]);
      if ((error as { status?: number }).status === 429 && secondsLeft > 0) {
        setOtpCooldown(secondsLeft);
        setOtpCooldownRejected(true);
        setIsOtpOpen(true);
      } else if (isOtpOpen) {
        // Okno juz otwarte (ponowna wysylka) - blad pokazujemy w nim.
        setOtpError(message);
      } else {
        // SMS nie wyszedl, wiec nie otwieramy okna na kod, ktorego nikt nie dostanie.
        setPrefsBanner({ text: message, tone: 'error' });
      }
    } finally {
      setOtpBusy(false);
    }
  };

  const submitOtp = async (event: ReactFormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!user) {
      return;
    }
    setOtpBusy(true);
    setOtpError('');
    try {
      await verifyPhone(user.email, otpCode.trim());
      await refreshUser();
      setIsOtpOpen(false);
      setOtpCode('');
      notify({
        category: 'system',
        icon: 'check',
        title: 'Numer telefonu zweryfikowany',
        body: 'Twój numer telefonu został pomyślnie potwierdzony.',
        link: 'accountSettings',
        dedupeKey: 'phone-verified',
      });
    } catch (error) {
      setOtpError(error instanceof Error ? error.message : 'Kod jest nieprawidłowy.');
    } finally {
      setOtpBusy(false);
    }
  };

  // Puste pole liczbowe wysylamy jako -1: backend traktuje to jako wyczyszczenie wartosci.
  const searchPrefsPatch = (prefs: typeof searchPrefs) => {
    const asNumber = (value: string) => (value.trim() === '' ? -1 : Number(value));
    return {
      searchLocations: prefs.locations.trim(),
      searchPropertyType: prefs.propertyType.trim(),
      searchBudgetMax: asNumber(prefs.budgetMax),
      searchAreaMin: asNumber(prefs.areaMin),
      searchAreaMax: asNumber(prefs.areaMax),
      searchRoomsMin: asNumber(prefs.roomsMin),
      searchRoomsMax: asNumber(prefs.roomsMax),
    };
  };

  // Czy jest co czyscic - od tego zalezy, czy pokazujemy przycisk czyszczenia.
  const hasSearchPrefs = Object.values(searchPrefs).some((value) => value.trim() !== '');

  /**
   * Podpowiedzi lokalizacji - ten sam mechanizm co w wyszukiwarce ofert: od dwoch znakow pytamy
   * o prawdziwe miejscowosci (nie tylko miasta wojewodzkie), z opoznieniem, zeby nie wysylac
   * zapytania po kazdej literze. Puste pole pokazuje najpopularniejsze miasta jako skrot.
   */
  const locationQuery = searchPrefs.locations.trim();
  useEffect(() => {
    if (skipNextPlaceFetch.current) {
      skipNextPlaceFetch.current = false;
      return;
    }
    if (locationQuery.length < 2) {
      setPlaceSuggestions([]);
      setPlacesLoading(false);
      return;
    }
    const controller = new AbortController();
    setPlacesLoading(true);
    const timer = window.setTimeout(() => {
      fetchPlaceSuggestions(locationQuery, controller.signal)
        .then((places) => setPlaceSuggestions(places))
        .catch(() => { /* przerwane zapytanie albo brak sieci - zostaje poprzednia lista */ })
        .finally(() => setPlacesLoading(false));
    }, 300);
    return () => {
      controller.abort();
      window.clearTimeout(timer);
    };
  }, [locationQuery]);

  // Wybor z listy wpisuje nazwe do pola, ale nie ma od razu odpytywac o podpowiedzi do tej nazwy.
  const pickLocation = (label: string) => {
    skipNextPlaceFetch.current = true;
    setPlaceSuggestions([]);
    setPlacesOpen(false);
    setSearchPrefs((current) => ({ ...current, locations: label }));
  };

  const saveSearchPrefs = async () => {
    setIsSavingSearch(true);
    setSearchBanner(null);
    const saved = await patchSettings(searchPrefsPatch(searchPrefs));
    if (saved) {
      onSearchPreferencesSaved(toSearchPreferences(saved));
      flashBanner('search', setSearchBanner, { text: 'Preferencje wyszukiwania zapisane.', tone: 'success' });
    } else {
      setSearchBanner({ text: 'Nie udało się zapisać preferencji.', tone: 'error' });
    }
    setIsSavingSearch(false);
  };

  /**
   * Czysci wszystkie preferencje wyszukiwania - i w formularzu, i na koncie. Zapisujemy od razu,
   * bo samo oproznienie pol bez zapisu zostawiloby wyszukiwarke z filtrami, ktorych uzytkownik
   * juz nie widzi w ustawieniach.
   */
  const clearSearchPrefs = async () => {
    const empty = {
      locations: '', propertyType: '', budgetMax: '',
      areaMin: '', areaMax: '', roomsMin: '', roomsMax: '',
    };
    setIsSavingSearch(true);
    setSearchBanner(null);
    setSearchPrefs(empty);
    const saved = await patchSettings(searchPrefsPatch(empty));
    if (saved) {
      onSearchPreferencesSaved(toSearchPreferences(saved));
      flashBanner('search', setSearchBanner, { text: 'Preferencje wyczyszczone.', tone: 'success' });
    } else {
      setSearchBanner({ text: 'Nie udało się wyczyścić preferencji.', tone: 'error' });
    }
    setIsSavingSearch(false);
  };

  // Po wejsciu na strone pytamy serwer, czy odstep po ostatniej zmianie hasla juz minal -
  // licznik ma przetrwac odswiezenie strony i zmiane urzadzenia.
  useEffect(() => {
    if (!user) {
      return;
    }
    let cancelled = false;
    passwordCooldown()
      .then((seconds) => { if (!cancelled) { setPasswordWait(seconds); } })
      .catch(() => { /* brak odpowiedzi nie moze blokowac formularza - decyduje i tak serwer */ });
    return () => { cancelled = true; };
  }, [user, passwordCooldown]);

  // Odliczanie w dol do kolejnej dozwolonej zmiany.
  useEffect(() => {
    if (passwordWait <= 0) {
      return;
    }
    const timer = window.setTimeout(() => setPasswordWait(passwordWait - 1), 1000);
    return () => window.clearTimeout(timer);
  }, [passwordWait]);

  // Sprawdzenie dotychczasowego hasla w tle, chwile po tym jak uzytkownik przestanie pisac.
  // Dopiero poprawne haslo otwiera pola nowego - inaczej wypelnia sie caly formularz na darmo.
  useEffect(() => {
    const typed = passwordForm.current;
    if (!typed) {
      setCurrentCheck('empty');
      return;
    }
    setCurrentCheck('checking');
    let cancelled = false;
    const timer = window.setTimeout(() => {
      verifyPassword(typed)
        .then(() => { if (!cancelled) { setCurrentCheck('ok'); } })
        .catch(() => { if (!cancelled) { setCurrentCheck('bad'); } });
    }, 600);
    return () => {
      cancelled = true;
      window.clearTimeout(timer);
    };
  }, [passwordForm.current, verifyPassword]);

  const canEditNewPassword = currentCheck === 'ok' && passwordWait === 0;
  const passwordsMatch = passwordForm.next === passwordForm.confirm;
  const canSubmitPassword = canEditNewPassword
    && passwordForm.next.length >= 8
    && passwordsMatch
    && !isSavingPassword;

  // 300 s -> "5:00"
  const waitLabel = `${Math.floor(passwordWait / 60)}:${String(passwordWait % 60).padStart(2, '0')}`;

  const submitPasswordChange = async (event: ReactFormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setPasswordBanner(null);
    if (!canSubmitPassword) {
      return;
    }
    setIsSavingPassword(true);
    try {
      await changePassword(passwordForm.current, passwordForm.next);
      setPasswordForm({ current: '', next: '', confirm: '' });
      setCurrentCheck('empty');
      flashBanner('password', setPasswordBanner, { text: 'Hasło zostało zmienione.', tone: 'success' });
      // Odstep liczy serwer - pytamy go o wartosc zamiast zakladac pelne 5 minut.
      setPasswordWait(await passwordCooldown());
    } catch (error) {
      setPasswordBanner({ text: error instanceof Error ? error.message : 'Nie udało się zmienić hasła.', tone: 'error' });
      // Blad moze oznaczac wlasnie trwajacy odstep - odswiezamy licznik zgodnie z serwerem.
      passwordCooldown().then(setPasswordWait).catch(() => { /* zostaje dotychczasowa wartosc */ });
    } finally {
      setIsSavingPassword(false);
    }
  };

  const submitAccountDeletion = async (event: ReactFormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setIsDeleting(true);
    setDeleteError('');
    try {
      await deleteAccount(deletePassword);
      navigate(ROUTES.home, { replace: true });
    } catch (error) {
      setDeleteError(error instanceof Error ? error.message : 'Nie udało się usunąć konta.');
    } finally {
      setIsDeleting(false);
    }
  };

  const avatarImage = settings?.avatarImage ?? '';
  const coverImage = settings?.coverImage ?? '';
  const visibility = settings?.profileVisibility ?? 'PUBLIC';
  // Jedna nazwa stanu profilu na calej stronie: naglowek karty i podpis pod imieniem mowia to samo,
  // inaczej po ustawieniu prywatnosci sekcja dalej nazywalaby sie "Profil publiczny".
  const visibilityLabel = visibility === 'PRIVATE' ? 'Profil prywatny' : 'Profil publiczny';
  // "Konto prywatne" jako nazwa typu konta mylilo sie z prywatnoscia profilu - typ konta mowi
  // o dzialalnosci (osobista albo firmowa), a nie o widocznosci.
  const accountTypeLabel = user?.accountType === 'COMPANY' ? 'Konto firmowe' : 'Konto osobiste';

  return (
    <>
      <section className="account-settings-page" aria-label="Dane i ustawienia">
        <div className="account-layout">
          <AccountSidebar />

          <div className="account-main account-settings-main">
            <header className="settings-head">
              <h1>Dane i ustawienia</h1>
              <p>Wszystkie ustawienia konta w jednym miejscu - dane osobowe, profil, powiadomienia i bezpieczeństwo.</p>
            </header>

            {loadError && <p className="settings-banner error" role="alert">{loadError}</p>}
            {prefsBanner && <p className={`settings-banner ${prefsBanner.tone}`} role="status">{prefsBanner.text}</p>}

            <div className="settings-grid">
              {/* --- Dane osobowe: to, co uzytkownik podal przy rejestracji, gotowe do edycji --- */}
              <section className="settings-card settings-card-wide" aria-label="Moje dane">
                <div className="settings-card-head">
                  <h2>Moje dane</h2>
                  {/* Bez e-maila - jest przypisany do konta na stale i pole jest tylko do odczytu. */}
                  <p>Nazwa użytkownika i telefon są zapisane z rejestracji. Możesz je tutaj zmienić.</p>
                </div>

                <div className="profile-photo-row">
                  <Avatar className="profile-photo-avatar" name={getDisplayName(user)} image={avatarImage} />
                  <div>
                    <strong>{getDisplayName(user)}</strong>
                    <small>{accountTypeLabel} · {visibilityLabel}{user?.nick ? ` · @${user.nick}` : ''}</small>
                    <div className="profile-photo-actions">
                      <label>
                        <input
                          ref={avatarInputRef}
                          type="file"
                          accept=".jpg,.jpeg,.png,.webp"
                          onChange={(event) => { void handleImageUpload(event, 'avatar'); }}
                        />
                        {avatarImage ? 'Zmień zdjęcie' : 'Dodaj zdjęcie'}
                      </label>
                      {avatarImage && (
                        <button type="button" onClick={() => { void patchSettings({ avatarImage: '' }, 'Usunięto zdjęcie profilowe.'); }}>
                          Usuń zdjęcie
                        </button>
                      )}
                    </div>
                  </div>
                </div>

                <div className="settings-separator" />

                {isCompany ? (
                  <div className="profile-form-grid settings-company-grid">
                    <label>
                      <span>Nazwa firmy</span>
                      <input
                        value={identity.companyName}
                        placeholder="Wpisz nazwę firmy"
                        onChange={(event) => setIdentityField('companyName', event.target.value)}
                      />
                    </label>
                    <label className="login-field-gus">
                      <span>NIP</span>
                      <div className="input-action-row">
                        <input
                          value={identity.nip}
                          inputMode="numeric"
                          placeholder="123-456-78-90"
                          onChange={(event) => setIdentityField('nip', event.target.value)}
                        />
                        <button
                          type="button"
                          onClick={() => { void fetchCompanyFromGus(); }}
                          disabled={isGusLoading || identity.nip.replace(/\D/g, '').length !== 10}
                        >
                          {isGusLoading ? 'Pobieram...' : 'Pobierz z GUS'}
                        </button>
                      </div>
                      <small>Wpisz 10 cyfr numeru NIP, aby pobrać nazwę i adres firmy z rejestru REGON.</small>
                    </label>
                  </div>
                ) : (
                  <div className="profile-form-grid two-col">
                    <label>
                      <span>Imię</span>
                      <input value={identity.firstName} onChange={(event) => setIdentityField('firstName', event.target.value)} />
                    </label>
                    <label>
                      <span>Nazwisko</span>
                      <input value={identity.lastName} onChange={(event) => setIdentityField('lastName', event.target.value)} />
                    </label>
                  </div>
                )}

                <div className="profile-form-grid">
                  <label>
                    <span>Nazwa użytkownika (nick)</span>
                    <div className="input-action-row">
                      {/* Nadaje ja system z imienia i nazwiska - nick jest adresem profilu, wiec nie
                          jest polem do swobodnej edycji (podszywanie sie, zajmowanie nazw). */}
                      <input value={identity.nick} readOnly />
                      <button type="button" onClick={() => { void suggestNickFromName(); }} disabled={isSuggestingNick}>
                        {isSuggestingNick ? 'Sprawdzam...' : (isCompany ? 'Dopasuj do nazwy firmy' : 'Dopasuj do imienia i nazwiska')}
                      </button>
                    </div>
                    <small>
                      Nadawana automatycznie i niepowtarzalna w całym serwisie - imię i nazwisko może mieć wiele osób, nick tylko Ty.
                      Twój profil:{' '}
                      {user?.nick
                        ? <Link to={publicProfileNickPath(user.nick)}>polskalokalnie.pl/u/{user.nick}</Link>
                        : <>polskalokalnie.pl/u/{identity.nick}</>}
                    </small>
                    {identity.nick !== (user?.nick ?? '') && (
                      <small className="nick-change-warning">
                        <Icon name="warning" /> Po zapisaniu adres profilu zmieni się na <strong>polskalokalnie.pl/u/{identity.nick}</strong>.
                        Dotychczasowy link przestanie działać.
                      </small>
                    )}
                  </label>

                  <label>
                    <span>E-mail</span>
                    <input value={user?.email ?? ''} readOnly disabled />
                    <small>{user?.verified ? 'Adres potwierdzony.' : 'Adres niepotwierdzony - sprawdź link aktywacyjny w skrzynce.'}</small>
                  </label>

                  <label>
                    <span>Numer telefonu</span>
                    <div className={user?.phoneVerified ? 'phone-row verified-row' : 'phone-row'}>
                      <div ref={phoneCountryRef} className="phone-prefix phone-country-picker">
                        <button
                          type="button"
                          className="phone-country-trigger"
                          onClick={() => setIsPhoneCountryOpen((current) => !current)}
                          aria-haspopup="listbox"
                          aria-expanded={isPhoneCountryOpen}
                        >
                          <img src={`https://flagcdn.com/w20/${selectedCountry.iso2}.png`} alt={`Flaga ${selectedCountry.country}`} loading="lazy" />
                          <span>{selectedCountry.code}</span>
                          <Icon name="chevron" />
                        </button>
                        {isPhoneCountryOpen && (
                          <div className="phone-country-menu" role="listbox" aria-label="Wybór kierunkowego">
                            {PHONE_COUNTRY_OPTIONS.map((option) => (
                              <button
                                key={`${option.code}-${option.country}`}
                                type="button"
                                className={option.code === identity.phonePrefix ? 'active' : ''}
                                onClick={() => {
                                  setIdentity((current) => ({
                                    ...current,
                                    phonePrefix: option.code,
                                    phoneDigits: current.phoneDigits.slice(0, option.digits),
                                  }));
                                  setIsPhoneTouched(true);
                                  setIsPhoneCountryOpen(false);
                                }}
                              >
                                <img src={`https://flagcdn.com/w20/${option.iso2}.png`} alt={`Flaga ${option.country}`} loading="lazy" />
                                <span>{option.code}</span>
                                <small>{option.country} ({option.digits})</small>
                              </button>
                            ))}
                          </div>
                        )}
                      </div>
                      <input
                        className={['phone-number-input', shouldShowPhoneError ? 'invalid' : '', user?.phoneVerified ? 'verified' : ''].filter(Boolean).join(' ')}
                        value={phoneDisplayValue}
                        inputMode="numeric"
                        maxLength={phoneMaskPlaceholder.length}
                        placeholder={phoneMaskPlaceholder}
                        onBlur={() => setIsPhoneTouched(true)}
                        onChange={(event) => {
                          setIdentityField('phoneDigits', event.target.value.replace(/\D/g, '').slice(0, selectedCountry.digits));
                          setIsPhoneTouched(true);
                        }}
                      />
                    </div>
                    {shouldShowPhoneError && (
                      <small className="phone-error-message">
                        Nieprawidłowa długość numeru dla kraju {selectedCountry.country}. Wymagane: {selectedCountry.digits} cyfr.
                      </small>
                    )}
                    {!shouldShowPhoneError && user?.phoneVerified && <small className="phone-verified-message">Numer zweryfikowany</small>}
                    {!shouldShowPhoneError && !user?.phoneVerified && isPhoneComplete && (
                      <div className="phone-verify-inline">
                        {isPhoneSaved ? (
                          <button type="button" className="phone-confirm-button" disabled={otpBusy} onClick={() => { void sendOtp(); }}>
                            {otpBusy ? 'Wysyłanie...' : 'Potwierdź numer kodem SMS'}
                          </button>
                        ) : (
                          <small>Zapisz zmiany, aby potwierdzić numer kodem SMS.</small>
                        )}
                      </div>
                    )}
                  </label>

                  {/* Data urodzenia dotyczy tylko osob prywatnych - firma jej nie ma. */}
                  {!isCompany && (
                    <label>
                      <span>Data urodzenia (opcjonalnie)</span>
                      <input
                        type="date"
                        max={todayIsoDate}
                        value={identity.birthDate}
                        onChange={(event) => setIdentityField('birthDate', event.target.value)}
                      />
                      <small>Nie pokazujemy jej innym użytkownikom.</small>
                    </label>
                  )}

                  <label>
                    <span>{isCompany ? 'Adres siedziby firmy (opcjonalnie)' : 'Adres zamieszkania (opcjonalnie)'}</span>
                    <input
                      value={identity.address}
                      placeholder={isCompany ? 'Np. Warszawa, ul. Marszałkowska 1' : 'Np. Łódź, ul. Piotrkowska 12'}
                      onChange={(event) => setIdentityField('address', event.target.value)}
                    />
                  </label>

                  <label>
                    <span>Preferencje kontaktu</span>
                    <select
                      value={identity.contactPreference}
                      onChange={(event) => setIdentityField('contactPreference', event.target.value as ContactPreference)}
                    >
                      <option value="EMAIL">E-mail</option>
                      <option value="PHONE">Telefon</option>
                      <option value="EMAIL_AND_PHONE">E-mail i telefon</option>
                    </select>
                  </label>

                  <label>
                    <span>Biografia (opcjonalnie)</span>
                    <textarea
                      maxLength={160}
                      value={identity.bio}
                      placeholder="Np. Sprzedaję mieszkanie bezpośrednio, chętnie odpowiem na pytania."
                      onChange={(event) => setIdentityField('bio', event.target.value)}
                    />
                    <small>
                      Będzie widoczna na Twoim profilu dla innych użytkowników. {identity.bio.length} / 160 znaków
                    </small>
                  </label>
                </div>

                <div className="profile-form-actions">
                  <button type="button" onClick={() => { void saveIdentity(); }} disabled={isSavingIdentity || isLoading}>
                    {isSavingIdentity ? 'Zapisywanie...' : 'Zapisz zmiany'}
                  </button>
                  {identityBanner && <span className={`profile-message ${identityBanner.tone}`}>{identityBanner.text}</span>}
                </div>
              </section>

              {/* --- Profil publiczny albo prywatny - zaleznie od wybranej widocznosci --- */}
              <section className="settings-card" aria-label={visibilityLabel}>
                <div className="settings-card-head">
                  <h2>{visibilityLabel}</h2>
                  <p>Zdjęcie w tle i to, kto może oglądać Twój profil.</p>
                </div>

                <div className="settings-list compact">
                  <article className="cover-photo-row">
                    <span><Icon name="camera" /></span>
                    <em>Zdjęcie w tle profilu</em>
                    <strong>{coverImage ? 'Zdjęcie zapisane na koncie.' : 'Dodaj zdjęcie w tle swojego profilu.'}</strong>
                    <label className="mini-tag cover-upload-tag">
                      {coverImage ? 'Zmień zdjęcie' : 'Dodaj zdjęcie'}
                      <input
                        ref={coverInputRef}
                        type="file"
                        accept=".jpg,.jpeg,.png,.webp"
                        onChange={(event) => { void handleImageUpload(event, 'cover'); }}
                      />
                    </label>
                  </article>
                  {coverImage && (
                    <div className="cover-photo-actions-row">
                      <Link className="cover-preview-button" to={ROUTES.accountPublicProfile}>Podgląd profilu</Link>
                      <button type="button" className="cover-remove-button" onClick={() => { void patchSettings({ coverImage: '' }, 'Usunięto zdjęcie w tle.'); }}>
                        Usuń zdjęcie
                      </button>
                    </div>
                  )}

                  <article className="profile-visibility-card">
                    <span><Icon name="eye" /></span>
                    <em>Widoczność profilu</em>
                    <div className="profile-visibility-options" role="radiogroup" aria-label="Widoczność profilu">
                      {PROFILE_VISIBILITY_OPTIONS.map((option) => (
                        <button
                          key={option.value}
                          type="button"
                          role="radio"
                          aria-checked={visibility === option.value}
                          className={visibility === option.value ? 'active' : ''}
                          onClick={() => { void patchSettings({ profileVisibility: option.value }, 'Widoczność profilu zapisana.'); }}
                        >
                          {option.label}
                        </button>
                      ))}
                    </div>
                    <strong>{PROFILE_VISIBILITY_OPTIONS.find((option) => option.value === visibility)?.description}</strong>
                    <Link className="mini-tag profile-preview-cta" to={ROUTES.accountPublicProfile}>
                      Zobacz swój profil <Icon name="arrow" />
                    </Link>
                  </article>
                </div>
              </section>

              {/* --- Profil firmy: dane pokazywane publicznie na rozbudowanym profilu (tylko COMPANY) --- */}
              {isCompany && (
                <section className="settings-card settings-card-wide" aria-label="Profil firmy">
                  <div className="settings-card-head">
                    <h2>Profil firmy</h2>
                    <p>Te dane widać na publicznym profilu Twojej firmy. Wszystkie pola są opcjonalne.</p>
                  </div>

                  {companyBanner && <p className={`settings-banner ${companyBanner.tone}`} role="status">{companyBanner.text}</p>}

                  <div className="profile-form-grid">
                    <label className="profile-form-wide">
                      <span>Hasło firmy</span>
                      <input
                        value={companyProfile.companyTagline}
                        maxLength={80}
                        placeholder="np. Deweloper mieszkaniowy"
                        onChange={(event) => setCompanyProfile((current) => ({ ...current, companyTagline: event.target.value }))}
                      />
                    </label>
                    <label className="profile-form-wide">
                      <span>Strona www</span>
                      <input
                        value={companyProfile.website}
                        placeholder="np. www.twojafirma.pl"
                        onChange={(event) => setCompanyProfile((current) => ({ ...current, website: event.target.value }))}
                      />
                    </label>
                    <label>
                      <span>LinkedIn</span>
                      <input
                        value={companyProfile.socialLinkedin}
                        placeholder="Link do profilu LinkedIn"
                        onChange={(event) => setCompanyProfile((current) => ({ ...current, socialLinkedin: event.target.value }))}
                      />
                    </label>
                    <label>
                      <span>Facebook</span>
                      <input
                        value={companyProfile.socialFacebook}
                        placeholder="Link do profilu Facebook"
                        onChange={(event) => setCompanyProfile((current) => ({ ...current, socialFacebook: event.target.value }))}
                      />
                    </label>
                    <label>
                      <span>Instagram</span>
                      <input
                        value={companyProfile.socialInstagram}
                        placeholder="Link do profilu Instagram"
                        onChange={(event) => setCompanyProfile((current) => ({ ...current, socialInstagram: event.target.value }))}
                      />
                    </label>
                    <label>
                      <span>YouTube</span>
                      <input
                        value={companyProfile.socialYoutube}
                        placeholder="Link do kanału YouTube"
                        onChange={(event) => setCompanyProfile((current) => ({ ...current, socialYoutube: event.target.value }))}
                      />
                    </label>
                  </div>

                  <label className="settings-toggle-row">
                    <input
                      type="checkbox"
                      checked={companyProfile.publicContactVisible}
                      onChange={(event) => setCompanyProfile((current) => ({ ...current, publicContactVisible: event.target.checked }))}
                    />
                    <span>
                      <strong>Pokazuj telefon i adres na profilu</strong>
                      <small>Numer i adres z sekcji „Moje dane” będą widoczne publicznie (numer po kliknięciu „Pokaż numer”).</small>
                    </span>
                  </label>

                  <div className="settings-card-actions">
                    <button type="button" className="primary" onClick={() => { void saveCompanyProfile(); }} disabled={isSavingCompany}>
                      {isSavingCompany ? 'Zapisywanie...' : 'Zapisz dane firmy'}
                    </button>
                  </div>
                </section>
              )}

              {/* --- Preferencje wyszukiwania: realne pola zapisywane na koncie --- */}
              <section className="settings-card" aria-label="Preferencje wyszukiwania">
                <div className="settings-card-head">
                  <h2>Preferencje wyszukiwania</h2>
                  <p>Podpowiadamy je przy filtrowaniu ofert.</p>
                </div>

                <div className="profile-form-grid settings-search-form">
                  <label>
                    <span>Lokalizacje</span>
                    <input
                      value={searchPrefs.locations}
                      placeholder="Wpisz miasto, dzielnicę lub ulicę"
                      onChange={(event) => {
                        setPlacesOpen(true);
                        setSearchPrefs((current) => ({ ...current, locations: event.target.value }));
                      }}
                    />
                    {/* Od dwoch znakow podpowiadamy prawdziwe miejscowosci - tak samo jak wyszukiwarka
                        ofert. Puste pole nie pokazuje nic: to preferencja, a nie wyszukiwanie,
                        wiec nie podsuwamy tu miast, ktorych uzytkownik nie szukal. */}
                    {placesOpen && locationQuery.length >= 2 && (
                      <div className="settings-place-suggest">
                        {placesLoading && <p className="settings-place-status">Szukam miejscowości...</p>}
                        {!placesLoading && placeSuggestions.length === 0 && (
                          <p className="settings-place-status">Brak wyników dla „{locationQuery}". Możesz zostawić własny wpis.</p>
                        )}
                        {placeSuggestions.map((place) => (
                          <button type="button" key={place.id} onClick={() => pickLocation(place.label)}>
                            <Icon name="pin" />
                            <span>
                              <strong>{place.label}</strong>
                              {place.sublabel && <small>{place.sublabel}</small>}
                            </span>
                          </button>
                        ))}
                      </div>
                    )}
                  </label>
                  <label>
                    <span>Typ nieruchomości</span>
                    <select
                      value={searchPrefs.propertyType}
                      onChange={(event) => setSearchPrefs((current) => ({ ...current, propertyType: event.target.value }))}
                    >
                      <option value="">Bez preferencji</option>
                      {SETTINGS_PROPERTY_TYPES.map((type) => <option key={type} value={type}>{type}</option>)}
                    </select>
                  </label>
                  <label>
                    <span>Budżet maksymalny (zł)</span>
                    <input
                      type="number"
                      min={0}
                      value={searchPrefs.budgetMax}
                      onChange={(event) => setSearchPrefs((current) => ({ ...current, budgetMax: event.target.value }))}
                    />
                  </label>
                  <div className="settings-range-row">
                    <label>
                      <span>Metraż od (m²)</span>
                      <input
                        type="number"
                        min={0}
                        value={searchPrefs.areaMin}
                        onChange={(event) => setSearchPrefs((current) => ({ ...current, areaMin: event.target.value }))}
                      />
                    </label>
                    <label>
                      <span>Metraż do (m²)</span>
                      <input
                        type="number"
                        min={0}
                        value={searchPrefs.areaMax}
                        onChange={(event) => setSearchPrefs((current) => ({ ...current, areaMax: event.target.value }))}
                      />
                    </label>
                  </div>
                  <div className="settings-range-row">
                    <label>
                      <span>Pokoje od</span>
                      <input
                        type="number"
                        min={0}
                        value={searchPrefs.roomsMin}
                        onChange={(event) => setSearchPrefs((current) => ({ ...current, roomsMin: event.target.value }))}
                      />
                    </label>
                    <label>
                      <span>Pokoje do</span>
                      <input
                        type="number"
                        min={0}
                        value={searchPrefs.roomsMax}
                        onChange={(event) => setSearchPrefs((current) => ({ ...current, roomsMax: event.target.value }))}
                      />
                    </label>
                  </div>
                </div>

                <div className="profile-form-actions">
                  {/* Czyszczenie pokazujemy tylko wtedy, gdy jest co czyscic. */}
                  {hasSearchPrefs && (
                    <button
                      type="button"
                      className="settings-clear-button"
                      onClick={() => { void clearSearchPrefs(); }}
                      disabled={isSavingSearch || isLoading}
                    >
                      Wyczyść preferencje
                    </button>
                  )}
                  <button type="button" onClick={() => { void saveSearchPrefs(); }} disabled={isSavingSearch || isLoading}>
                    {isSavingSearch ? 'Zapisywanie...' : 'Zapisz preferencje'}
                  </button>
                  {searchBanner && <span className={`profile-message ${searchBanner.tone}`}>{searchBanner.text}</span>}
                </div>
              </section>

              {/* --- Ustawienia prezentacji --- */}
              <section className="settings-card" aria-label="Ustawienia aplikacji">
                <div className="settings-card-head">
                  <h2>Ustawienia aplikacji</h2>
                  <p>Zapisujemy je na koncie, więc działają na każdym urządzeniu.</p>
                </div>

                <div className="settings-list compact">
                  <article className="settings-select-row">
                    <span><Icon name="coin" /></span>
                    <em>Waluta</em>
                    <select
                      value={settings?.currency ?? 'PLN'}
                      disabled={isLoading}
                      onChange={(event) => { void patchSettings({ currency: event.target.value as Currency }, 'Waluta zapisana.'); }}
                    >
                      {(Object.keys(CURRENCY_LABELS) as Currency[]).map((code) => (
                        <option key={code} value={code}>{CURRENCY_LABELS[code]}</option>
                      ))}
                    </select>
                  </article>

                  <article className="settings-select-row">
                    <span><Icon name="calculator" /></span>
                    <em>Jednostki powierzchni</em>
                    <select
                      value={settings?.areaUnit ?? 'M2'}
                      disabled={isLoading}
                      onChange={(event) => { void patchSettings({ areaUnit: event.target.value as AreaUnit }, 'Jednostki zapisane.'); }}
                    >
                      {(Object.keys(AREA_UNIT_LABELS) as AreaUnit[]).map((code) => (
                        <option key={code} value={code}>{AREA_UNIT_LABELS[code]}</option>
                      ))}
                    </select>
                  </article>

                  <article className="settings-select-row">
                    <span><Icon name="message" /></span>
                    <em>Język komunikacji</em>
                    <select
                      value={user?.preferredLanguage ?? 'PL'}
                      disabled={isLoading}
                      onChange={(event) => { void saveLanguage(event.target.value as PreferredLanguage); }}
                    >
                      <option value="PL">Polski</option>
                      <option value="EN">Angielski</option>
                      <option value="UK">Ukraiński</option>
                      <option value="DE">Niemiecki</option>
                    </select>
                  </article>

                  <SettingsToggleRow
                    icon="shield"
                    label="Pokaż tylko oferty bezpośrednie"
                    hint="Ukrywa ogłoszenia wystawione z kont firmowych - zostają wyłącznie oferty od osób prywatnych."
                    checked={settings?.directOffersOnly ?? false}
                    disabled={isLoading}
                    onChange={(next) => { void patchSettings({ directOffersOnly: next }); }}
                  />
                  <SettingsToggleRow
                    icon="house"
                    label="Pokazuj ostatnio przeglądane na stronie głównej"
                    hint="Sekcja „Ostatnio przeglądane” pod ofertami na stronie głównej."
                    checked={settings?.saveSearchesOnHome ?? true}
                    disabled={isLoading}
                    onChange={(next) => { void patchSettings({ saveSearchesOnHome: next }); }}
                  />
                </div>
              </section>

              {/* --- Powiadomienia --- */}
              <section className="settings-card" aria-label="Powiadomienia">
                <div className="settings-card-head">
                  <h2>Powiadomienia e-mail</h2>
                  <p>Wybierz, o czym chcesz otrzymywać wiadomości.</p>
                </div>

                {/* Wlaczone jest tylko to, co serwis naprawde wysyla. Reszta czeka na zbudowanie
                    funkcji - lepiej powiedziec to wprost, niz pozwolic wlaczyc martwy przelacznik. */}
                <div className="settings-list compact">
                  <SettingsToggleRow
                    icon="bell"
                    label="Nowe oferty z zapisanych wyszukiwań"
                    hint={SETTINGS_NOT_SENT_YET}
                    checked={false}
                    disabled
                    onChange={() => { /* funkcja jeszcze nie powstala */ }}
                  />
                  <SettingsToggleRow
                    icon="trend"
                    label="Alerty cenowe"
                    hint={SETTINGS_NOT_SENT_YET}
                    checked={false}
                    disabled
                    onChange={() => { /* funkcja jeszcze nie powstala */ }}
                  />
                  <SettingsToggleRow
                    icon="message"
                    label="Wiadomości od użytkowników"
                    checked={settings?.notifyMessages ?? true}
                    disabled={isLoading}
                    onChange={(next) => { void patchSettings({ notifyMessages: next }); }}
                  />
                  <SettingsToggleRow
                    icon="gear"
                    label="Nowości i aktualizacje serwisu"
                    hint={SETTINGS_NOT_SENT_YET}
                    checked={false}
                    disabled
                    onChange={() => { /* funkcja jeszcze nie powstala */ }}
                  />
                  <SettingsToggleRow
                    icon="mail"
                    label="Oferty promowane i newsletter"
                    hint="Zgoda marketingowa - decyduje o wysyłce kampanii."
                    checked={consent.emailConsent}
                    disabled={isLoading}
                    onChange={(next) => { void updateConsent({ ...consent, emailConsent: next }); }}
                  />
                  <SettingsToggleRow
                    icon="phone"
                    label="Powiadomienia SMS"
                    hint="Zgoda marketingowa na wiadomości SMS."
                    checked={consent.smsConsent}
                    disabled={isLoading}
                    onChange={(next) => { void updateConsent({ ...consent, smsConsent: next }); }}
                  />
                </div>
              </section>

              {/* --- Bezpieczenstwo: jedyne miejsce, wczesniej dublowane przez /konto/bezpieczenstwo --- */}
              {/* Dwie kolumny obok jednokolumnowych powiadomien - razem domykaja rzad siatki. */}
              <section className="settings-card settings-card-double" aria-label="Bezpieczeństwo">
                <div className="settings-card-head">
                  <h2>Bezpieczeństwo</h2>
                  <p>Hasło, potwierdzenia kontaktu i usunięcie konta.</p>
                </div>

                <div className="settings-list compact security-status-list">
                  <article>
                    <span><Icon name="mail" /></span>
                    <em>Adres e-mail</em>
                    <strong>{user?.email}</strong>
                    <span className={`status-pill ${user?.verified ? 'ok' : 'warn'}`}>{user?.verified ? 'Potwierdzony' : 'Niepotwierdzony'}</span>
                  </article>
                  <article>
                    <span><Icon name="phone" /></span>
                    <em>Numer telefonu</em>
                    <strong>{user?.phone || 'Nie podano'}</strong>
                    <span className={`status-pill ${user?.phoneVerified ? 'ok' : 'warn'}`}>{user?.phoneVerified ? 'Potwierdzony' : 'Niepotwierdzony'}</span>
                  </article>
                </div>

                <div className="settings-separator" />

                <form className="profile-form-grid settings-password-form" onSubmit={submitPasswordChange}>
                  <h3>Zmiana hasła</h3>

                  {/* Trwajacy odstep po ostatniej zmianie - formularz jest wtedy w calosci zamkniety.
                      Tekst siedzi w jednym <span>, bo rodzic jest flexem: kazdy osobny wezel dostalby
                      odstep i przed kropka po liczniku zrobilaby sie luka. */}
                  {passwordWait > 0 && (
                    <p className="password-cooldown" role="status">
                      <Icon name="clock" />
                      <span>Hasło zmieniono niedawno. Kolejna zmiana będzie możliwa za <strong>{waitLabel}</strong>.</span>
                    </p>
                  )}

                  <label>
                    <span>Dotychczasowe hasło</span>
                    <input
                      type="password"
                      autoComplete="current-password"
                      value={passwordForm.current}
                      disabled={passwordWait > 0}
                      onChange={(event) => setPasswordForm((current) => ({ ...current, current: event.target.value }))}
                      required
                    />
                    {currentCheck === 'checking' && <small className="field-hint">Sprawdzam hasło...</small>}
                    {currentCheck === 'bad' && <small className="field-hint error">Nieprawidłowe hasło - pola nowego hasła pozostają zablokowane.</small>}
                    {currentCheck === 'ok' && passwordWait === 0 && <small className="field-hint ok">Hasło potwierdzone. Możesz ustawić nowe.</small>}
                  </label>

                  <div className="settings-range-row">
                    <label>
                      <span>Nowe hasło</span>
                      <input
                        type="password"
                        autoComplete="new-password"
                        placeholder={canEditNewPassword ? 'Min. 8 znaków' : 'Najpierw podaj dotychczasowe hasło'}
                        value={passwordForm.next}
                        disabled={!canEditNewPassword}
                        onChange={(event) => setPasswordForm((current) => ({ ...current, next: event.target.value }))}
                        required
                      />
                    </label>
                    <label>
                      <span>Powtórz nowe hasło</span>
                      <input
                        type="password"
                        autoComplete="new-password"
                        value={passwordForm.confirm}
                        disabled={!canEditNewPassword}
                        onChange={(event) => setPasswordForm((current) => ({ ...current, confirm: event.target.value }))}
                        required
                      />
                    </label>
                  </div>

                  {/* Podpowiedzi pokazujemy dopiero, gdy jest co porownywac - nie karcimy za puste pola. */}
                  {canEditNewPassword && passwordForm.next.length > 0 && passwordForm.next.length < 8 && (
                    <small className="field-hint error">Nowe hasło musi mieć co najmniej 8 znaków.</small>
                  )}
                  {canEditNewPassword && passwordForm.confirm.length > 0 && !passwordsMatch && (
                    <small className="field-hint error">Hasła nie są identyczne - popraw, żeby móc zapisać.</small>
                  )}

                  <div className="profile-form-actions">
                    <button type="submit" disabled={!canSubmitPassword}>
                      {isSavingPassword ? 'Zapisywanie...' : (passwordWait > 0 ? `Zmiana możliwa za ${waitLabel}` : 'Zmień hasło')}
                    </button>
                    {passwordBanner && <span className={`profile-message ${passwordBanner.tone}`}>{passwordBanner.text}</span>}
                  </div>
                </form>

                <div className="settings-separator" />

                <div className="settings-danger-zone">
                  <div>
                    <strong><Icon name="warning" /> Usuń konto</strong>
                    <small>Trwale usuwamy konto i powiązane z nim dane. Tej operacji nie da się cofnąć.</small>
                  </div>
                  <button type="button" className="delete-account-button" onClick={() => { setDeleteError(''); setDeletePassword(''); setIsDeleteOpen(true); }}>
                    Usuń konto
                  </button>
                </div>
              </section>
            </div>

            <footer className="settings-footer-note">
              <Icon name="lock" /> Twoje dane są u nas bezpieczne. Stosujemy szyfrowanie SSL i zaawansowane środki ochrony danych.
            </footer>
          </div>
        </div>
      </section>

      {isOtpOpen && (
        <div className="listing-delete-overlay" role="dialog" aria-modal="true" aria-label="Potwierdź numer telefonu">
          <div className="otp-modal">
            <button type="button" className="listing-delete-close" aria-label="Zamknij" onClick={() => setIsOtpOpen(false)}>×</button>
            <div className="otp-modal-icon">📱</div>
            <h2>Potwierdź numer telefonu</h2>
            <p className="otp-modal-lead">Wpisz 6-cyfrowy kod, który wysłaliśmy SMS-em na numer <strong>{user?.phone}</strong>.</p>
            <form className="otp-modal-form" onSubmit={submitOtp}>
              <input
                className="otp-input"
                inputMode="numeric"
                autoComplete="one-time-code"
                maxLength={6}
                value={otpCode}
                onChange={(event) => setOtpCode(event.target.value.replace(/\D/g, '').slice(0, 6))}
                placeholder="______"
                aria-label="Kod z SMS"
                autoFocus
              />
              {otpError && <p className="auth-status-error" role="alert">{otpError}</p>}
              {otpCooldownRejected && otpCooldown > 0 && (
                <p className="auth-status-error" role="alert">Kod został już wysłany. Kolejny możesz zamówić za {otpCooldown} s</p>
              )}
              {otpInfo && !otpError && <p className="otp-modal-ok">{otpInfo}</p>}
              <button className="auth-status-btn" type="submit" disabled={otpBusy || otpCode.length < 6}>
                {otpBusy ? 'Sprawdzanie...' : 'Potwierdź numer'}
              </button>
            </form>
            <div className="otp-modal-actions">
              <button type="button" className="otp-link" disabled={otpCooldown > 0 || otpBusy} onClick={() => { void sendOtp(); }}>
                {otpCooldown > 0 ? `Wyślij ponownie (${otpCooldown}s)` : 'Wyślij kod ponownie'}
              </button>
              <button type="button" className="otp-link" onClick={() => setIsOtpOpen(false)}>Zrobię to później</button>
            </div>
          </div>
        </div>
      )}

      {isDeleteOpen && (
        <div className="listing-delete-overlay" role="dialog" aria-modal="true" aria-label="Usuń konto">
          <div className="otp-modal">
            <button type="button" className="listing-delete-close" aria-label="Zamknij" onClick={() => setIsDeleteOpen(false)}>×</button>
            <div className="otp-modal-icon">⚠️</div>
            <h2>Usuń konto na stałe</h2>
            <p className="otp-modal-lead">Potwierdź hasłem. Po usunięciu nie odzyskasz konta ani powiązanych z nim danych.</p>
            <form className="otp-modal-form" onSubmit={submitAccountDeletion}>
              <input
                type="password"
                autoComplete="current-password"
                value={deletePassword}
                onChange={(event) => setDeletePassword(event.target.value)}
                placeholder="Twoje hasło"
                aria-label="Hasło"
                required
                autoFocus
              />
              {deleteError && <p className="auth-status-error" role="alert">{deleteError}</p>}
              <button className="auth-status-btn danger" type="submit" disabled={isDeleting || !deletePassword}>
                {isDeleting ? 'Usuwanie...' : 'Usuń konto na stałe'}
              </button>
            </form>
            <div className="otp-modal-actions">
              <button type="button" className="otp-link" onClick={() => setIsDeleteOpen(false)}>Anuluj</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

function AccountPublicProfilePage() {
  const navigate = useNavigate();
  const { user, loadSettings } = useAuth();
  const { formatPrice, formatMonthlyPrice, formatArea } = useDisplay();
  // Zdjecia profilu sa na koncie (a nie w pamieci przegladarki), wiec podglad pokazuje to samo,
  // co zobaczy kazdy inny uzytkownik - takze po zalogowaniu na innym urzadzeniu.
  const [profileSettings, setProfileSettings] = useState<UserSettings | null>(null);
  useEffect(() => {
    if (!user) {
      return;
    }
    let active = true;
    loadSettings()
      .then((loaded) => {
        if (active) {
          setProfileSettings(loaded);
        }
      })
      .catch(() => {
        // Brak ustawien nie blokuje podgladu - zostaja wartosci domyslne.
      });
    return () => {
      active = false;
    };
  }, [user, loadSettings]);
  const publicProfileCover = profileSettings?.coverImage || heroImage;

  // Prawdziwe ogloszenia uzytkownika (te same, ktore widzi kazdy odwiedzajacy profil) z /listings/mine.
  const [myListings, setMyListings] = useState<ApiListingSummary[]>([]);
  useEffect(() => {
    if (!user) {
      setMyListings([]);
      return;
    }
    let active = true;
    apiFetch<ApiListingSummary[]>('/listings/mine')
      .then((data) => { if (active) setMyListings(Array.isArray(data) ? data : []); })
      .catch(() => { if (active) setMyListings([]); });
    return () => { active = false; };
  }, [user]);

  const saleCount = myListings.filter((item) => item.offerType !== 'RENT').length;
  const rentCount = myListings.filter((item) => item.offerType === 'RENT').length;

  // Data dolaczenia z konta - zamiast zaszytej na sztywno.
  const memberSince = (() => {
    const created = new Date(user?.createdAt ?? '');
    return Number.isNaN(created.getTime())
      ? null
      : created.toLocaleDateString('pl-PL', { month: 'long', year: 'numeric' });
  })();

  return (
    <section className="account-settings-page public-profile-page" aria-label="Jak inni widzą Twój profil">
      <div className="account-layout">
        <AccountSidebar />

        <div className="account-main account-settings-main">
          <div className="settings-breadcrumb">Dane i ustawienia <Icon name="chevron" /> <strong>Jak inni widzą Twój profil</strong></div>
          <header className="settings-head public-profile-head">
            <div>
              <h1>Jak inni widzą Twój profil</h1>
              <p>Zobacz, jak Twój profil prezentuje się publicznie dla innych użytkowników serwisu Polska Lokalnie.</p>
            </div>
            <Link to={ROUTES.accountSettings}><Icon name="gear" /> Edytuj profil</Link>
          </header>

          <section className="public-profile-cover-card">
            <div className="public-profile-cover" style={{ backgroundImage: `url(${publicProfileCover})`, backgroundPosition: 'center center' }} />
            <div className="public-profile-summary">
              <Avatar className="public-profile-avatar" name={getDisplayName(user)} image={profileSettings?.avatarImage} />
              <div className="public-profile-user">
                <h2>{getDisplayName(user)}</h2>
                <div className="public-profile-meta">
                  {memberSince && <span><Icon name="calendar" /> Z nami od: {memberSince}</span>}
                  {user?.verified && <span><Icon name="shield" /> Konto zweryfikowane</span>}
                </div>
              </div>
              {/* Biografia z ustawien konta - dokladnie to, co w tym miejscu zobacza inni. */}
              <blockquote>
                {profileSettings?.bio
                  ? profileSettings.bio
                  : <span className="public-profile-bio-empty">Nie dodałeś jeszcze opisu. Możesz go uzupełnić w polu „Biografia" w ustawieniach konta.</span>}
              </blockquote>
              <div className="public-profile-stats">
                <div><strong>{myListings.length}</strong><small>Ogłoszenia</small></div>
                <div><strong>{saleCount}</strong><small>Na sprzedaż</small></div>
                <div><strong>{rentCount}</strong><small>Na wynajem</small></div>
              </div>
            </div>
          </section>

          <section className="settings-card public-profile-listings">
            <div className="settings-card-head">
              <h2>Moje ogłoszenia ({myListings.length})</h2>
              {myListings.length > 0 && <Link className="ghost" to={ROUTES.accountListings}>Zobacz wszystkie</Link>}
            </div>
            {myListings.length === 0 ? (
              <p className="public-profile-bio-empty">
                Nie masz jeszcze żadnych ogłoszeń. <Link to={ROUTES.add}>Dodaj pierwsze ogłoszenie</Link>, aby pojawiło się w Twoim profilu.
              </p>
            ) : (
              <div className="public-listing-grid">
                {myListings.map((listing) => {
                  const isRent = listing.offerType === 'RENT';
                  const location = [listing.district, listing.city].filter(Boolean).join(', ') || listing.city;
                  return (
                    <article
                      className="public-listing-card"
                      key={listing.id}
                      role="button"
                      tabIndex={0}
                      onClick={() => navigate(listingPath(listing.id))}
                      onKeyDown={(event) => { if (event.key === 'Enter') { navigate(listingPath(listing.id)); } }}
                    >
                      <div className="public-listing-photo" style={{ backgroundImage: `url(${listing.coverPhoto || heroImage})`, backgroundPosition: 'center center' }}>
                        <span className={`public-listing-badge ${isRent ? 'rent' : 'sale'}`}>{isRent ? 'Na wynajem' : 'Na sprzedaż'}</span>
                      </div>
                      <div className="public-listing-body">
                        <strong>{isRent ? formatMonthlyPrice(listing.price) : formatPrice(listing.price)}</strong>
                        <h3>{listing.title}</h3>
                        <small><Icon name="pin" /> {location}</small>
                        <SpecTiles
                          className="compact"
                          items={[
                            { icon: 'area', value: formatArea(listing.area), caption: 'Powierzchnia' },
                            { icon: 'plan', value: `${listing.rooms}`, caption: listing.rooms === 1 ? 'Pokój' : 'Pokoje' },
                            ...(listing.floor ? [{ icon: 'stairs', value: listing.buildingFloors ? `${listing.floor}/${listing.buildingFloors}` : `${listing.floor}`, caption: 'Piętro' }] : []),
                          ]}
                        />
                        <div className="public-listing-foot">
                          <em>{listingRelativeDate(listing.createdAt) || 'Dodane niedawno'}</em>
                        </div>
                      </div>
                    </article>
                  );
                })}
              </div>
            )}
          </section>

          <footer className="settings-footer-note">
            <Icon name="lock" /> To jest podgląd Twojego publicznego profilu. Dane kontaktowe (e-mail, telefon) nie są widoczne dla innych użytkowników.
          </footer>
        </div>
      </div>
    </section>
  );
}

type LoginStep = 'login' | 'register-choice' | 'register-private' | 'register-company' | 'register-pending' | 'forgot';

// Krok logowania/rejestracji wynika z adresu - kazdy ma wlasna trase.
const LOGIN_STEP_PATHS: Record<LoginStep, string> = {
  login: ROUTES.login,
  forgot: ROUTES.loginForgot,
  'register-choice': ROUTES.register,
  'register-private': ROUTES.registerPrivate,
  'register-company': ROUTES.registerCompany,
  'register-pending': ROUTES.registerPending,
};

function loginStepFromPath(pathname: string): LoginStep {
  const entry = Object.entries(LOGIN_STEP_PATHS).find(([, path]) => path === pathname);
  return (entry?.[0] as LoginStep | undefined) ?? 'login';
}

// Strony logowania i rejestracji maja wspolny uklad (login-shell).
const LOGIN_PAGE_PATHS = new Set(Object.values(LOGIN_STEP_PATHS));

// Dane firmy z rejestru REGON (GUS) - odpowiedz /api/gus/company.
type GusCompany = { name: string | null; nip: string; regon: string | null; address: string | null };

function LoginPage({ onLogin }: { onLogin: (user: AuthUser) => void }) {
  const { login, register, forgotPassword, resendActivation } = useAuth();
  const location = useLocation();
  const navigate = useNavigate();
  const step = loginStepFromPath(location.pathname);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [phone, setPhone] = useState('');
  const [companyName, setCompanyName] = useState('');
  const [nip, setNip] = useState('');
  const [companyAddress, setCompanyAddress] = useState('');
  const [gusLoading, setGusLoading] = useState(false);
  const [companyPhone, setCompanyPhone] = useState('');
  const [agreeTerms, setAgreeTerms] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  // "Powtórz hasło" ma własny przełącznik widoczności - niezależny od pola "Hasło".
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [info, setInfo] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);
  // Rejestracja: dane oczekujace na aktywacje e-mail i (opcjonalnie) weryfikacje telefonu.
  const [pendingEmail, setPendingEmail] = useState('');
  const [pendingPhone, setPendingPhone] = useState('');
  const [otpModalOpen, setOtpModalOpen] = useState(false);
  // Czy kod SMS faktycznie wyszedl z bramki - decyduje o tresci ekranu po rejestracji.
  const [otpCodeSent, setOtpCodeSent] = useState(false);
  // Kiedy wyszedl ostatni kod SMS - okno odlicza od tej chwili czas do ponownej wysylki.
  const [otpSentAt, setOtpSentAt] = useState<number | null>(null);
  const [notActivated, setNotActivated] = useState(false);

  const runAuth = async (action: () => Promise<AuthUser>) => {
    if (submitting) {
      return;
    }
    setError(null);
    setInfo(null);
    setNotActivated(false);
    setSubmitting(true);
    try {
      const authedUser = await action();
      onLogin(authedUser);
    } catch (err) {
      const message = err instanceof Error ? err.message : 'Nie udało się zalogować. Spróbuj ponownie.';
      setError(message);
      if (/aktywowan/i.test(message)) {
        setNotActivated(true);
      }
    } finally {
      setSubmitting(false);
    }
  };

  // Rejestracja NIE loguje od razu - pokazuje ekran "aktywuj konto" i ewentualnie okno OTP telefonu.
  const handleRegister = async (action: () => Promise<RegisterPending>) => {
    if (submitting) {
      return;
    }
    setError(null);
    setInfo(null);
    setSubmitting(true);
    try {
      const pending = await action();
      setPendingEmail(pending.email);
      goToStep('register-pending');
      // Backend potwierdza, czy SMS naprawde wyszedl - przy awarii bramki nie otwieramy okna na kod.
      setOtpCodeSent(pending.phoneVerificationRequired);
      if (pending.phoneVerificationRequired) {
        setOtpSentAt(Date.now());
        setOtpModalOpen(true);
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Nie udało się utworzyć konta. Spróbuj ponownie.');
    } finally {
      setSubmitting(false);
    }
  };

  // Przejscie do innego kroku to zmiana adresu. Cel powrotu po zalogowaniu (state.from,
  // ustawiany przez ProtectedRoute) idzie dalej, zeby nie zgubic go np. po wizycie w rejestracji.
  const goToStep = (nextStep: LoginStep) => {
    navigate(LOGIN_STEP_PATHS[nextStep], { state: location.state });
  };

  // Logowanie i rejestracja korzystaja z tych samych pol (e-mail, haslo). Formularz rejestracji
  // - prywatny i firmowy - zawsze zaczyna sie pusty, zeby dane wpisane albo podstawione przez
  // przegladarke przy logowaniu nie trafialy do nowego konta. E-mail zostaje tylko miedzy
  // logowaniem a resetem hasla, gdzie chodzi o to samo konto. Dziala tez dla Wstecz/Dalej.
  const previousStepRef = useRef(step);
  useEffect(() => {
    const previousStep = previousStepRef.current;
    previousStepRef.current = step;
    if (previousStep === step) {
      return;
    }
    const keepsEmail = (previousStep === 'login' || previousStep === 'forgot') && (step === 'login' || step === 'forgot');
    setError(null);
    setInfo(null);
    setNotActivated(false);
    if (!keepsEmail) {
      setEmail('');
    }
    setPassword('');
    setConfirmPassword('');
    setShowPassword(false);
    setShowConfirmPassword(false);
    setFirstName('');
    setLastName('');
    setPhone('');
    setCompanyName('');
    setNip('');
    setCompanyAddress('');
    setCompanyPhone('');
    setAgreeTerms(false);
  }, [step]);

  const handleLoginSubmit = (event: ReactFormEvent<HTMLFormElement>) => {
    event.preventDefault();
    runAuth(() => login(email.trim(), password));
  };

  const handleResendActivation = async () => {
    try {
      await resendActivation((pendingEmail || email).trim());
      setInfo('Wysłaliśmy nowy link aktywacyjny. Sprawdź skrzynkę e-mail.');
      setNotActivated(false);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Nie udało się wysłać linku.');
    }
  };

  const handleForgotSubmit = async (event: ReactFormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (submitting) {
      return;
    }
    setError(null);
    setInfo(null);
    setSubmitting(true);
    try {
      await forgotPassword(email.trim());
      setInfo('Jeśli konto o podanym adresie istnieje, wysłaliśmy na nie link do zresetowania hasła. Sprawdź skrzynkę e-mail.');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Nie udało się wysłać linku.');
    } finally {
      setSubmitting(false);
    }
  };

  const validateRegisterPasswords = () => {
    if (password !== confirmPassword) {
      setError('Hasła nie są identyczne.');
      return false;
    }
    if (!agreeTerms) {
      setError('Musisz zaakceptować regulamin oraz politykę prywatności.');
      return false;
    }
    return true;
  };

  const handlePrivateRegisterSubmit = (event: ReactFormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!validateRegisterPasswords()) {
      return;
    }
    const fullName = `${firstName.trim()} ${lastName.trim()}`.trim();
    setPendingPhone(phone.trim());
    handleRegister(() => register(email.trim(), password, fullName, {
      accountType: 'PERSONAL',
      phone: phone.trim() || undefined,
    }));
  };

  const handleCompanyRegisterSubmit = (event: ReactFormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!validateRegisterPasswords()) {
      return;
    }
    setPendingPhone(companyPhone.trim());
    handleRegister(() => register(email.trim(), password, companyName.trim(), {
      accountType: 'COMPANY',
      nip: nip.trim() || undefined,
      phone: companyPhone.trim() || undefined,
      address: companyAddress.trim() || undefined,
    }));
  };

  // Rejestracja firmy: pobranie nazwy i adresu z rejestru REGON (GUS) na podstawie numeru NIP.
  const handleGusLookup = async () => {
    if (gusLoading) {
      return;
    }
    setError(null);
    setInfo(null);
    setGusLoading(true);
    try {
      const company = await apiFetch<GusCompany>(`/gus/company?nip=${encodeURIComponent(nip.trim())}`);
      setNip(company.nip);
      if (company.name) {
        setCompanyName(company.name);
      }
      if (company.address) {
        setCompanyAddress(company.address);
      }
      setInfo(`Pobrano dane z rejestru REGON${company.regon ? ` (REGON ${company.regon})` : ''}. Sprawdź je przed rejestracją.`);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Nie udało się pobrać danych z GUS.');
    } finally {
      setGusLoading(false);
    }
  };

  const securityNote = (
    <p className="login-security-note"><Icon name="lock" /> Twoje dane są u nas bezpieczne. Stosujemy szyfrowanie SSL.</p>
  );

  return (
    <section className="login-page" aria-label="Logowanie">
      <div className="login-stage">
        <div className="login-left">
          <div className="login-intro">
            <h1>Witaj ponownie!</h1>
            <p>Zaloguj się, aby zarządzać ogłoszeniami, zapisywać ulubione oferty i korzystać ze wszystkich funkcji serwisu Polska Lokalnie.</p>
          </div>

          <div className="login-benefits">
            <article>
              <span><Icon name="heart" /></span>
              <p>
                <strong>Zapisuj ulubione</strong>
                <small>Twórz listy ulubionych mieszkań i wracaj do nich w każdej chwili.</small>
              </p>
            </article>
            <article>
              <span><Icon name="chart" /></span>
              <p>
                <strong>Śledź zmiany cen</strong>
                <small>Otrzymuj powiadomienia o zmianach cen mieszkań w interesujących Cię lokalizacjach.</small>
              </p>
            </article>
            <article>
              <span><Icon name="document" /></span>
              <p>
                <strong>Zarządzaj ogłoszeniami</strong>
                <small>Edytuj, promuj i zarządzaj swoimi ogłoszeniami w jednym miejscu.</small>
              </p>
            </article>
            <article>
              <span><Icon name="shield" /></span>
              <p>
                <strong>Pełna personalizacja</strong>
                <small>Dostosuj ustawienia konta i otrzymuj spersonalizowane rekomendacje.</small>
              </p>
            </article>
          </div>

          <div className="login-room-photo" style={{ backgroundImage: `url(${loginRoomImage})` }} aria-hidden="true" />
        </div>

        <div className="login-right">
          {step === 'login' && (
            <form className="login-card" onSubmit={handleLoginSubmit}>
              <div className="login-card-head">
                <h2>Zaloguj się do swojego konta</h2>
                <p>
                  Nie masz jeszcze konta?{' '}
                  <button type="button" onClick={() => goToStep('register-choice')}>Zarejestruj się</button>
                </p>
              </div>

              <label className="login-field">
                <span>Adres e-mail</span>
                <div>
                  <input
                    type="email"
                    placeholder="Wpisz swój adres e-mail"
                    value={email}
                    onChange={(event) => setEmail(event.target.value)}
                    autoComplete="email"
                    required
                  />
                  <Icon name="mail" />
                </div>
              </label>

              <label className="login-field">
                <span>Hasło</span>
                <div>
                  <input
                    type={showPassword ? 'text' : 'password'}
                    placeholder="Wpisz swoje hasło"
                    value={password}
                    onChange={(event) => setPassword(event.target.value)}
                    autoComplete="current-password"
                    minLength={6}
                    required
                  />
                  <button
                    type="button"
                    className="login-eye"
                    aria-label={showPassword ? 'Ukryj hasło' : 'Pokaż hasło'}
                    onClick={() => setShowPassword((current) => !current)}
                  >
                    <Icon name="eye" />
                  </button>
                </div>
              </label>

              {error && <p className="login-error" role="alert">{error}</p>}
              {notActivated && (
                <button type="button" className="login-resend-activation" onClick={handleResendActivation}>
                  Wyślij ponownie link aktywacyjny
                </button>
              )}
              {info && <p className="login-info" role="status">{info}</p>}

              <div className="login-options-row">
                <label className="remember-me">
                  <input type="checkbox" />
                  <span>Zapamiętaj mnie</span>
                </label>
                <button className="forgot-password" type="button" onClick={() => goToStep('forgot')}>Nie pamiętasz hasła?</button>
              </div>

              <button className="login-submit" type="submit" disabled={submitting}>
                {submitting ? 'Przetwarzanie…' : 'Zaloguj się'}
              </button>

              {securityNote}
            </form>
          )}

          {step === 'register-choice' && (
            <div className="login-card register-choice-card">
              <div className="login-card-head">
                <h2>Dla kogo tworzysz konto?</h2>
                <p className="register-choice-subtitle">Wybierz opcję, która najlepiej Cię opisuje.</p>
              </div>

              <div className="register-choice-list">
                <button type="button" className="register-choice-option" onClick={() => goToStep('register-private')}>
                  <span><Icon name="user" /></span>
                  <span className="register-choice-copy">
                    <strong>Jestem osobą prywatną</strong>
                    <small>Szukam, sprzedaję lub wynajmuję jako osoba prywatna</small>
                  </span>
                  <Icon name="arrow" />
                </button>
                <button type="button" className="register-choice-option" onClick={() => goToStep('register-company')}>
                  <span><Icon name="building" /></span>
                  <span className="register-choice-copy">
                    <strong>Jestem firmą</strong>
                    <small>Działam w imieniu firmy lub zarządzam nieruchomościami komercyjnymi</small>
                  </span>
                  <Icon name="arrow" />
                </button>
              </div>

              <p className="register-choice-footer">
                Masz już konto?{' '}
                <button type="button" onClick={() => goToStep('login')}>Zaloguj się</button>
              </p>
            </div>
          )}

          {step === 'register-private' && (
            <form className="login-card" onSubmit={handlePrivateRegisterSubmit}>
              <div className="login-card-head">
                <h2>Utwórz swoje konto</h2>
                <p>
                  Masz już konto?{' '}
                  <button type="button" onClick={() => goToStep('login')}>Zaloguj się</button>
                </p>
              </div>

              <div className="register-type-tabs" role="tablist">
                <button type="button" role="tab" aria-selected="true" className="active">
                  <Icon name="user" /> Jestem osobą prywatną
                </button>
                <button type="button" role="tab" aria-selected="false" onClick={() => goToStep('register-company')}>
                  <Icon name="building" /> Jestem firmą
                </button>
              </div>

              <div className="login-field-row">
                <label className="login-field">
                  <span>Imię</span>
                  <div>
                    <input
                      type="text"
                      placeholder="Wpisz swoje imię"
                      value={firstName}
                      onChange={(event) => setFirstName(event.target.value)}
                      autoComplete="given-name"
                      required
                    />
                    <Icon name="user" />
                  </div>
                </label>
                <label className="login-field">
                  <span>Nazwisko</span>
                  <div>
                    <input
                      type="text"
                      placeholder="Wpisz swoje nazwisko"
                      value={lastName}
                      onChange={(event) => setLastName(event.target.value)}
                      autoComplete="family-name"
                      required
                    />
                    <Icon name="user" />
                  </div>
                </label>
              </div>

              <label className="login-field">
                <span>Adres e-mail</span>
                <div>
                  <input
                    type="email"
                    placeholder="Wpisz swój adres e-mail"
                    value={email}
                    onChange={(event) => setEmail(event.target.value)}
                    autoComplete="email"
                    required
                  />
                  <Icon name="mail" />
                </div>
              </label>

              <div className="login-field-row">
                <label className="login-field">
                  <span>Hasło</span>
                  <div>
                    <input
                      type={showPassword ? 'text' : 'password'}
                      placeholder="Utwórz hasło"
                      value={password}
                      onChange={(event) => setPassword(event.target.value)}
                      autoComplete="new-password"
                      minLength={6}
                      required
                    />
                    <button
                      type="button"
                      className="login-eye"
                      aria-label={showPassword ? 'Ukryj hasło' : 'Pokaż hasło'}
                      onClick={() => setShowPassword((current) => !current)}
                    >
                      <Icon name="eye" />
                    </button>
                  </div>
                </label>
                <label className="login-field">
                  <span>Powtórz hasło</span>
                  <div>
                    <input
                      type={showConfirmPassword ? 'text' : 'password'}
                      placeholder="Powtórz swoje hasło"
                      value={confirmPassword}
                      onChange={(event) => setConfirmPassword(event.target.value)}
                      autoComplete="new-password"
                      minLength={6}
                      required
                    />
                    <button
                      type="button"
                      className="login-eye"
                      aria-label={showConfirmPassword ? 'Ukryj hasło' : 'Pokaż hasło'}
                      onClick={() => setShowConfirmPassword((current) => !current)}
                    >
                      <Icon name="eye" />
                    </button>
                  </div>
                </label>
              </div>

              <label className="login-field">
                <span>Numer telefonu (opcjonalnie)</span>
                <div>
                  <input
                    type="tel"
                    placeholder="Wpisz swój numer telefonu"
                    value={phone}
                    onChange={(event) => setPhone(event.target.value)}
                    autoComplete="tel"
                  />
                  <Icon name="phone" />
                </div>
              </label>

              <label className="terms-checkbox">
                <input type="checkbox" checked={agreeTerms} onChange={(event) => setAgreeTerms(event.target.checked)} required />
                <span>Akceptuję <Link to={ROUTES.terms} target="_blank" rel="noopener noreferrer" onClick={(event) => event.stopPropagation()}>regulamin</Link> oraz <Link to={ROUTES.privacy} target="_blank" rel="noopener noreferrer" onClick={(event) => event.stopPropagation()}>politykę prywatności</Link></span>
              </label>

              {error && <p className="login-error" role="alert">{error}</p>}

              <button className="login-submit" type="submit" disabled={submitting}>
                {submitting ? 'Przetwarzanie…' : 'Zarejestruj się'}
              </button>

              {securityNote}
            </form>
          )}

          {step === 'register-company' && (
            <form className="login-card" onSubmit={handleCompanyRegisterSubmit}>
              <div className="login-card-head">
                <h2>Utwórz konto firmowe</h2>
                <p>
                  Masz już konto?{' '}
                  <button type="button" onClick={() => goToStep('login')}>Zaloguj się</button>
                </p>
              </div>

              <div className="register-type-tabs" role="tablist">
                <button type="button" role="tab" aria-selected="false" onClick={() => goToStep('register-private')}>
                  <Icon name="user" /> Jestem osobą prywatną
                </button>
                <button type="button" role="tab" aria-selected="true" className="active">
                  <Icon name="building" /> Jestem firmą
                </button>
              </div>

              <label className="login-field">
                <span>Nazwa firmy</span>
                <div>
                  <input
                    type="text"
                    placeholder="Wpisz nazwę firmy"
                    value={companyName}
                    onChange={(event) => setCompanyName(event.target.value)}
                    autoComplete="organization"
                    required
                  />
                  <Icon name="building" />
                </div>
              </label>

              <label className="login-field login-field-gus">
                <span>NIP (opcjonalnie)</span>
                <div>
                  <input
                    type="text"
                    placeholder="123-456-78-90"
                    value={nip}
                    onChange={(event) => setNip(event.target.value)}
                    inputMode="numeric"
                  />
                  <button
                    type="button"
                    className="gus-fetch-btn"
                    onClick={handleGusLookup}
                    disabled={gusLoading || nip.replace(/\D/g, '').length !== 10}
                    title="Pobierz nazwę i adres firmy z rejestru REGON (GUS)"
                  >
                    {gusLoading ? 'Pobieram...' : 'Pobierz z GUS'}
                  </button>
                </div>
              </label>
              <p className="login-field-hint">Wpisz 10 cyfr numeru NIP, aby pobrać nazwę i adres firmy z rejestru REGON.</p>

              <label className="login-field">
                <span>Adres firmy (opcjonalnie)</span>
                <div>
                  <input
                    type="text"
                    placeholder="Ulica, numer, kod pocztowy i miasto"
                    value={companyAddress}
                    onChange={(event) => setCompanyAddress(event.target.value)}
                    autoComplete="street-address"
                    maxLength={255}
                  />
                  <Icon name="pin" />
                </div>
              </label>

              <label className="login-field">
                <span>Adres e-mail firmowy</span>
                <div>
                  <input
                    type="email"
                    placeholder="Wpisz adres e-mail firmowy"
                    value={email}
                    onChange={(event) => setEmail(event.target.value)}
                    autoComplete="email"
                    required
                  />
                  <Icon name="mail" />
                </div>
              </label>

              <label className="login-field">
                <span>Numer telefonu (opcjonalnie)</span>
                <div>
                  <input
                    type="tel"
                    placeholder="Wpisz numer telefonu firmowego"
                    value={companyPhone}
                    onChange={(event) => setCompanyPhone(event.target.value)}
                    autoComplete="tel"
                  />
                  <Icon name="phone" />
                </div>
              </label>

              <div className="login-field-row">
                <label className="login-field">
                  <span>Hasło</span>
                  <div>
                    <input
                      type={showPassword ? 'text' : 'password'}
                      placeholder="Utwórz hasło"
                      value={password}
                      onChange={(event) => setPassword(event.target.value)}
                      autoComplete="new-password"
                      minLength={6}
                      required
                    />
                    <button
                      type="button"
                      className="login-eye"
                      aria-label={showPassword ? 'Ukryj hasło' : 'Pokaż hasło'}
                      onClick={() => setShowPassword((current) => !current)}
                    >
                      <Icon name="eye" />
                    </button>
                  </div>
                </label>
                <label className="login-field">
                  <span>Powtórz hasło</span>
                  <div>
                    <input
                      type={showConfirmPassword ? 'text' : 'password'}
                      placeholder="Powtórz swoje hasło"
                      value={confirmPassword}
                      onChange={(event) => setConfirmPassword(event.target.value)}
                      autoComplete="new-password"
                      minLength={6}
                      required
                    />
                    <button
                      type="button"
                      className="login-eye"
                      aria-label={showConfirmPassword ? 'Ukryj hasło' : 'Pokaż hasło'}
                      onClick={() => setShowConfirmPassword((current) => !current)}
                    >
                      <Icon name="eye" />
                    </button>
                  </div>
                </label>
              </div>

              <label className="terms-checkbox">
                <input type="checkbox" checked={agreeTerms} onChange={(event) => setAgreeTerms(event.target.checked)} required />
                <span>Akceptuję <Link to={ROUTES.terms} target="_blank" rel="noopener noreferrer" onClick={(event) => event.stopPropagation()}>regulamin</Link> oraz <Link to={ROUTES.privacy} target="_blank" rel="noopener noreferrer" onClick={(event) => event.stopPropagation()}>politykę prywatności</Link></span>
              </label>

              {error && <p className="login-error" role="alert">{error}</p>}
              {info && <p className="login-info" role="status">{info}</p>}

              <button className="login-submit" type="submit" disabled={submitting}>
                {submitting ? 'Przetwarzanie…' : 'Zarejestruj firmę'}
              </button>

              {securityNote}
            </form>
          )}

          {/* Ekran po rejestracji ma sens tylko zaraz po niej - e-mail nie trafia do adresu,
              wiec po odswiezeniu strony wracamy do rejestracji. */}
          {step === 'register-pending' && !pendingEmail && <Navigate to={ROUTES.register} replace />}

          {step === 'register-pending' && pendingEmail && (
            <div className="login-card register-pending-card">
              <span className="register-pending-icon"><Icon name="mail" /></span>
              <h2>Sprawdź swoją skrzynkę e-mail</h2>
              <p className="register-pending-lead">
                Konto zostało utworzone. Wysłaliśmy <strong>link aktywacyjny</strong> na adres{' '}
                <strong>{pendingEmail}</strong>.
              </p>
              <p className="register-pending-note">
                Kliknij link w wiadomości, aby aktywować konto - dopiero wtedy będzie można się zalogować.
                {pendingPhone && otpCodeSent ? ' Dodatkowo potwierdź numer telefonu kodem SMS w otwartym oknie.' : ''}
                {pendingPhone && !otpCodeSent ? ' Nie udało się wysłać kodu SMS - numer telefonu potwierdzisz później w ustawieniach konta.' : ''}
                {' '}Nie widzisz wiadomości? Sprawdź folder spam.
              </p>
              {info && <p className="login-info" role="status">{info}</p>}
              {error && <p className="login-error" role="alert">{error}</p>}
              <button type="button" className="login-resend-activation" onClick={handleResendActivation}>
                Wyślij ponownie link aktywacyjny
              </button>
              {pendingPhone && otpCodeSent && (
                <button type="button" className="login-secondary-btn" onClick={() => setOtpModalOpen(true)}>
                  Potwierdź numer telefonu
                </button>
              )}
              <button type="button" className="login-submit" onClick={() => goToStep('login')}>
                Przejdź do logowania
              </button>
            </div>
          )}

          {step === 'forgot' && (
            <form className="login-card" onSubmit={handleForgotSubmit}>
              <div className="login-card-head">
                <h2>Nie pamiętasz hasła?</h2>
                <p>Podaj adres e-mail konta - wyślemy link do ustawienia nowego hasła.</p>
              </div>
              <label className="login-field">
                <span>Adres e-mail</span>
                <div>
                  <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} placeholder="Wpisz swój adres e-mail" autoComplete="email" required />
                  <Icon name="mail" />
                </div>
              </label>
              {error && <p className="login-error" role="alert">{error}</p>}
              {info && <p className="login-info" role="status">{info}</p>}
              <button className="login-submit" type="submit" disabled={submitting}>
                {submitting ? 'Wysyłanie…' : 'Wyślij link resetujący'}
              </button>
              <button type="button" className="login-back-link" onClick={() => goToStep('login')}>
                Wróć do logowania
              </button>
            </form>
          )}
        </div>

        {otpModalOpen && (
          <PhoneOtpModal
            email={pendingEmail}
            phone={pendingPhone}
            lastSentAt={otpSentAt}
            onCodeSent={() => setOtpSentAt(Date.now())}
            onClose={() => setOtpModalOpen(false)}
            onVerified={() => { setOtpModalOpen(false); setInfo('Numer telefonu został potwierdzony.'); }}
          />
        )}

        <div className="login-trust">
          <article>
            <span><Icon name="shield" /></span>
            <p>
              <strong>Bezpieczne dane</strong>
              <small>Twoje dane są chronione najwyższymi standardami bezpieczeństwa.</small>
            </p>
          </article>
          <article>
            <span><Icon name="lock" /></span>
            <p>
              <strong>Brak spamu</strong>
              <small>Nie wysyłamy spamu. Kontrolujesz swoje powiadomienia.</small>
            </p>
          </article>
          <article>
            <span><Icon name="phone" /></span>
            <p>
              <strong>Pomoc i wsparcie</strong>
              <small>Nasz zespół jest gotowy pomóc Ci na każdym etapie.</small>
            </p>
          </article>
          <article>
            <span><Icon name="check" /></span>
            <p>
              <strong>Zaufany serwis</strong>
              <small>Ogłoszenia bez prowizji, wprost od właścicieli.</small>
            </p>
          </article>
        </div>
      </div>
    </section>
  );
}

// Poziomy slajder kart (polecane, ostatnio przegladane) ze strzalkami lewo/prawo.
function CardSlider({ ariaLabel, children, autoScroll = false }: { ariaLabel: string; children: ReactNode; autoScroll?: boolean }) {
  const trackRef = useRef<HTMLDivElement>(null);
  // Pauza auto-przewijania trzymana w ref, zeby nie restartowac petli animacji przy kazdym najechaniu myszka.
  const pausedRef = useRef(false);
  const scrollByCards = (direction: number) => {
    const track = trackRef.current;
    if (!track) {
      return;
    }
    track.scrollBy({ left: direction * Math.max(260, track.clientWidth * 0.85), behavior: 'smooth' });
  };

  // Ciagle przewijanie w prawo, zapetlone. Zatrzymuje sie, gdy kursor jest nad karuzela (hover ustawia pausedRef).
  useEffect(() => {
    if (!autoScroll) {
      return;
    }
    const track = trackRef.current;
    if (!track) {
      return;
    }
    // Bez CSS scroll-behavior/snapu, inaczej programowe przewijanie co klatke szarpie i "przyciaga" do kart.
    const prevBehavior = track.style.scrollBehavior;
    const prevSnap = track.style.scrollSnapType;
    track.style.scrollBehavior = 'auto';
    track.style.scrollSnapType = 'none';

    const SPEED = 40; // piksele na sekunde
    // Wlasny akumulator zmiennoprzecinkowy: przegladarka zaokragla scrollLeft do liczby calkowitej,
    // wiec przy ~0,66 px/klatke ulamek nigdy by sie nie skumulowal i pasek stalby w miejscu.
    let pos = track.scrollLeft;
    let raf = 0;
    let last = 0;
    const step = (ts: number) => {
      if (last === 0) {
        last = ts;
      }
      const dt = ts - last;
      last = ts;
      if (pausedRef.current) {
        // W trakcie pauzy uzytkownik moze przewinac recznie (strzalki) - trzymajmy sie tego, co widac.
        pos = track.scrollLeft;
      } else {
        const maxScroll = track.scrollWidth - track.clientWidth;
        if (maxScroll > 0) {
          pos += (SPEED * dt) / 1000;
          if (pos >= maxScroll - 0.5) {
            pos = 0; // koniec listy - wracamy na poczatek i przewijamy w kolko
          }
          track.scrollLeft = pos;
        }
      }
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => {
      cancelAnimationFrame(raf);
      track.style.scrollBehavior = prevBehavior;
      track.style.scrollSnapType = prevSnap;
    };
  }, [autoScroll]);

  const pause = () => {
    pausedRef.current = true;
  };
  const resume = () => {
    pausedRef.current = false;
  };

  return (
    <div
      className="card-slider"
      onMouseEnter={autoScroll ? pause : undefined}
      onMouseLeave={autoScroll ? resume : undefined}
      onFocusCapture={autoScroll ? pause : undefined}
      onBlurCapture={autoScroll ? resume : undefined}
      onTouchStart={autoScroll ? pause : undefined}
      onTouchEnd={autoScroll ? resume : undefined}
    >
      <button type="button" className="card-slider-arrow prev" aria-label="Przewiń w lewo" onClick={() => scrollByCards(-1)}>
        <Icon name="chevron" />
      </button>
      <div className="card-slider-track" ref={trackRef} aria-label={ariaLabel}>
        {children}
      </div>
      <button type="button" className="card-slider-arrow next" aria-label="Przewiń w prawo" onClick={() => scrollByCards(1)}>
        <Icon name="chevron" />
      </button>
    </div>
  );
}

function HomePage({ filters, onOpenMap }: { filters: FilterState; onOpenMap: (city: string, mode?: 'buy' | 'rent') => void }) {
  const navigate = useNavigate();
  const { formatPrice, formatPricePerArea, formatArea, showRecentlyViewedOnHome } = useDisplay();
  const { user } = useAuth();
  const [searchMode, setSearchMode] = useState<'buy' | 'rent'>('buy');
  const [recentlyViewed] = useState<RecentlyViewedItem[]>(() => readRecentlyViewed(user));
  const { items: liveSaleListings, loading: liveSaleLoading } = useLiveListings('SALE');

  // Liczba ogloszen na zywo per miasto do sekcji "Przegladaj miasta". Bierzemy wszystkie zatwierdzone
  // ogloszenia (sprzedaz + wynajem) z /api/listings i grupujemy po znormalizowanej nazwie miasta.
  // cityCounts === null => jeszcze nie wczytano (pokazujemy placeholder zamiast falszywego "0").
  const [cityCounts, setCityCounts] = useState<Record<string, number> | null>(null);
  useEffect(() => {
    let cancelled = false;
    let timerId: number | null = null;
    const load = async () => {
      try {
        const all = await apiFetch<ApiListingSummary[]>('/listings');
        if (!cancelled) {
          const counts: Record<string, number> = {};
          for (const listing of all) {
            const key = normalizeCityName(listing.city);
            counts[key] = (counts[key] ?? 0) + 1;
          }
          setCityCounts(counts);
        }
      } catch {
        // Brak danych - zostawiamy poprzednie liczby (albo placeholder przy pierwszym bledzie).
      } finally {
        if (!cancelled) {
          timerId = window.setTimeout(() => void load(), LIVE_LISTINGS_REFRESH_MS);
        }
      }
    };
    void load();
    return () => {
      cancelled = true;
      if (timerId !== null) {
        window.clearTimeout(timerId);
      }
    };
  }, []);

  return (
    <>
      <section className="hero" aria-label="Sprzedaż mieszkania">
        <img className="hero-photo" src={heroImage} alt="" />
        <div className="hero-gradient" />

        <div className="hero-inner">
          <div className="hero-copy">
            <h1>
              Sprzedaj mieszkanie
              <span>za darmo.</span>
            </h1>
            <p>Bez prowizji. Bez ukrytych opłat. Znajdź szybciej klienta.</p>

            <div className="benefits" aria-label="Korzyści">
              {benefits.map((benefit) => (
                <div className="benefit" key={benefit.title}>
                  <span className={`benefit-icon ico-${benefit.icon}`}>
                    <Icon name={benefit.icon} />
                  </span>
                  <span>
                    <strong>{benefit.title}</strong>
                    <small>{benefit.text}</small>
                  </span>
                </div>
              ))}
            </div>
          </div>

          <aside className="ai-card" aria-label="Zainteresowani kupujący">
            <div className="ai-label">
              <Icon name="spark" />
              <span>Zainteresowani kupujący</span>
                <em className="soon-tag">Wkrótce</em>
            </div>
            <strong>57 osób szuka podobnego mieszkania</strong>
            <div className="avatar-row">
              {avatars.map((avatar) => (
                <span key={avatar}>{avatar}</span>
              ))}
              <em>+53</em>
            </div>
            <button type="button" disabled title={SOON_HINT}>Zobacz kupujących</button>
          </aside>

          <aside className="tour-card" aria-label="Wirtualny spacer">
            <span className="tour-badge">360°</span>
            <span>
              <strong>Wirtualny spacer</strong>
              <small>Gdy sprzedający doda spacer, obejrzysz go w ogłoszeniu</small>
            </span>
          </aside>
        </div>
      </section>

      <section className="search-wrap" aria-label="Wyszukiwarka">
        <div className="search-tabs">
          <button type="button" className={searchMode === 'buy' ? 'active' : ''} onClick={() => setSearchMode('buy')}>
            Kup
          </button>
          <button type="button" className={searchMode === 'rent' ? 'active' : ''} onClick={() => setSearchMode('rent')}>
            Wynajem
          </button>
        </div>

        <div className="search-panel search-panel-mega">
          <MegaSearch
            filters={filters}
            onOpenMap={onOpenMap}
            mode={searchMode}
            onSearch={() => navigate(searchMode === 'rent' ? ROUTES.rent : ROUTES.buy)}
          />
        </div>
      </section>

      <div className="home-banner-wrap"><BannerSlot slot="HERO" /></div>

      <section className="content-shell">
        <div className="home-feature-grid">
          <div className="home-left-stack">
            <div className="tool-grid" aria-label="Narzędzia">
              {insightCards.map((card) => (
                <article className="tool-card" key={card.title}>
                  <span className={`tool-icon ico-${card.icon}`}>
                    <Icon name={card.icon} />
                  </span>
                  <div>
                    <h2>{card.title}</h2>
                    <p>{card.text}</p>
                  </div>
                  <Link to={card.path}>{card.action}</Link>
                </article>
              ))}
            </div>

            <section className="offers" aria-label="Polecane ogłoszenia">
              <div className="section-head">
                <h2>Polecane ogłoszenia</h2>
                <Link to={ROUTES.buy}>Zobacz wszystkie <Icon name="arrow" /></Link>
              </div>

              {liveSaleListings.length === 0 ? (
                !liveSaleLoading && (
                  <div className="listings-empty">
                    <strong>Nie ma jeszcze ogłoszeń sprzedaży.</strong>
                    <small><Link to={ROUTES.add}>Dodaj pierwsze ogłoszenie</Link></small>
                  </div>
                )
              ) : (
              <CardSlider ariaLabel="Polecane ogłoszenia" autoScroll>
                {liveSaleListings.slice(0, 12).map((item) => (
                    <Link className="listing-card listing-card-link" key={item.id} to={listingPath(item.id)}>
                      <div className="property-media" style={{ backgroundImage: `url(${item.coverPhoto ?? heroImage})` }}>
                        <span>{listingMarketBadge(item.market)}</span>
                      </div>
                      <div className="listing-body">
                        <p>{[item.city, item.district].filter(Boolean).join(', ')}</p>
                        <small>Mieszkanie · {listingRoomsText(item.rooms)} · {formatArea(item.area)}</small>
                        <div className="price-row">
                          <strong>{formatPrice(item.price)}</strong>
                          <span>{formatPricePerArea(item.price / item.area)}</span>
                        </div>
                      </div>
                    </Link>
                ))}
              </CardSlider>
              )}
            </section>
          </div>

          <div className="home-right-stack">
            <article className="free-card">
              <div>
                <h2>Dodaj ogłoszenie za darmo</h2>
                <p>Wystaw ogłoszenie i rozmawiaj z kupującymi bezpośrednio. Bez prowizji. Bez zobowiązań.</p>
                <Link className="free-card-cta" to={ROUTES.add}>
                  <span>Dodaj ogłoszenie</span>
                  <strong>0 zł</strong>
                </Link>
                <small>Zajmie Ci to tylko 2 minuty!</small>
              </div>
              <div className="house-graphic" aria-hidden="true">
                <span className="cloud" />
                <span className="home one" />
                <span className="home two" />
              </div>
            </article>

            <section className="cities" aria-label="Przeglądaj miasta">
              <h2>Przeglądaj miasta</h2>
              <div className="city-grid">
                {cities.map((city) => (
                  <Link
                    className="city-card"
                    key={city.name}
                    to={buyCityPath(city.name)}
                    aria-label={`Zobacz oferty w mieście ${city.name}`}
                    style={{
                      backgroundImage: `linear-gradient(180deg, rgba(10, 21, 39, 0.1), rgba(10, 21, 39, 0.78)), url(${cityImage})`,
                      backgroundPosition: city.position,
                    }}
                  >
                    <strong>{city.name}</strong>
                    <span>
                      {cityCounts === null
                        ? 'Ładowanie…'
                        : formatListingCountLabel(cityCounts[normalizeCityName(city.name)] ?? 0)}
                    </span>
                  </Link>
                ))}
                <Link className="city-card all-cities" to={ROUTES.map} aria-label="Zobacz oferty na mapie całej Polski">
                  <span>Zobacz wszystkie miasta</span>
                  <strong>Cała Polska na mapie</strong>
                  <em><Icon name="arrow" /></em>
                </Link>
              </div>
            </section>

          </div>

          {/* Para banerow reklamowych we wspolnym wierszu - zawsze wyrownana do gornej krawedzi,
              niezaleznie od wysokosci kolumn powyzej i od szerokosci okna. */}
          <div className="home-banner-duo">
            <BannerSlot slot="HOME_MIDDLE" />
            <BannerSlot slot="HOME_TOP" />
          </div>

          {showRecentlyViewedOnHome && recentlyViewed.length > 0 && (
            <section className="offers home-recent-row" aria-label="Ostatnio przeglądane">
              <div className="section-head">
                <h2>Ostatnio przeglądane</h2>
              </div>

              <CardSlider ariaLabel="Ostatnio przeglądane oferty" autoScroll>
                {recentlyViewed.map((item) => (
                  <Link className="listing-card listing-card-link" key={item.id} to={listingPath(item.id)}>
                    <div className="property-media" style={{ backgroundImage: `url(${item.photo ?? heroImage})` }} />
                    <div className="listing-body">
                      <p>{[item.city, item.district].filter(Boolean).join(', ')}</p>
                      <small>{item.title}</small>
                      <div className="price-row">
                        <strong>{formatPrice(item.price)}{item.offerType === 'RENT' ? ' /mc' : ''}</strong>
                      </div>
                    </div>
                  </Link>
                ))}
              </CardSlider>
            </section>
          )}
        </div>
      </section>
    </>
  );
}

function RentPage({
  filters,
  onOpenMap,
  onOpenListing,
  isFavorite,
  onToggleFavorite,
  savedSearchActive,
  onToggleSavedSearch,
}: {
  filters: FilterState;
  onOpenMap: (city: string, mode?: 'buy' | 'rent') => void;
  onOpenListing: (id: number) => void;
  isFavorite: (listingId: number) => boolean;
  onToggleFavorite: (listing: ApiListingSummary) => void;
  savedSearchActive: boolean;
  onToggleSavedSearch: () => void;
}) {
  const { city, propertyType, pMin, pMax, aMin, aMax, rooms, wtorny, pierwotny, chips, resetAll } = filters;
  const { formatPrice } = useDisplay();
  const [, setSearchParams] = useSearchParams();
  // "Szukaj na bieżącej mapie": numery ofert widocznych na mapie trafiaja do adresu (?obszar=...),
  // wiec zawezony wynik przezywa odswiezenie. Myslnik = na mapie nie bylo zadnej oferty.
  const searchVisibleOnMap = (offerIds: number[]) => {
    setSearchParams((prev) => {
      const next = new URLSearchParams(prev);
      next.set('obszar', offerIds.length > 0 ? offerIds.join(',') : '-');
      next.delete('strona');
      return next;
    });
  };
  const [isMapOpen, setIsMapOpen] = useState(false);
  const [studentOnly, setStudentOnly] = useState(false);
  const [petsOnly, setPetsOnly] = useState(false);
  const [parkingOnly, setParkingOnly] = useState(false);
  const applySort = (value: SortKey) => {
    setSearchParams((prev) => {
      const next = new URLSearchParams(prev);
      if (value === 'default') {
        next.delete('sortuj');
      } else {
        next.set('sortuj', value);
      }
      next.delete('strona');
      return next;
    });
  };

  const cityFilter = city.trim();
  const { items: liveRentListings } = useLiveListings('RENT');
  const rentMapCenter = useResolvedCityCenter(city, CITY_COORDS.Warszawa);
  const rentGeoMarkers = useMemo(() => {
    const source = cityFilter
      ? liveRentListings.filter((item) => cityStartsWith(item.city, cityFilter))
      : liveRentListings;
    return source.map((item, index) => {
      const point = item.lat != null && item.lng != null ? clampCenter({ lat: item.lat, lng: item.lng }) : listingLatLng(item, index);
      return {
        id: `rent-${item.id}`,
        offerId: item.id,
        label: formatPrice(item.price),
        lat: point.lat,
        lng: point.lng,
      };
    });
  }, [cityFilter, liveRentListings]);

  const quickActionsByTitle: Record<string, () => void> = {
    'Nowe dzisiaj': () => applySort('new'),
    'Dla studentów': () => setStudentOnly((value) => !value),
    'Zwierzęta mile widziane': () => setPetsOnly((value) => !value),
    'Z miejscem parkingowym': () => setParkingOnly((value) => !value),
  };

  const extraChips: { label: string; onRemove: () => void }[] = [
    ...(studentOnly ? [{ label: 'Dla studentów', onRemove: () => setStudentOnly(false) }] : []),
    ...(petsOnly ? [{ label: 'Zwierzęta mile widziane', onRemove: () => setPetsOnly(false) }] : []),
    ...(parkingOnly ? [{ label: 'Z miejscem parkingowym', onRemove: () => setParkingOnly(false) }] : []),
  ];

  const allChips = [...chips, ...extraChips];

  return (
    <section className="buy-page rent-page" aria-label="Wynajem mieszkania">
      <div className="buy-container">
        <div className="breadcrumb">
          <span>Strona główna</span>
          <Icon name="chevron" />
          <strong>Wynajem</strong>
        </div>

        <div className="buy-hero rent-hero">
          <div>
            <h1>
              Wynajmij <span>bez prowizji</span>
            </h1>
            <p>Znajdź mieszkanie lub dom na wynajem w całej Polsce.</p>
          </div>
        </div>

        <div className="buy-search-row">
          <MegaSearch filters={filters} onOpenMap={onOpenMap} mode="rent" />

          <button
            className={`save-search ${savedSearchActive ? 'saved' : ''}`}
            type="button"
            aria-pressed={savedSearchActive}
            onClick={onToggleSavedSearch}
          >
            <Icon name="bell" />
            <span>{savedSearchActive ? 'Zapisano wyszukiwanie' : 'Zapisz wyszukiwanie'}</span>
          </button>
        </div>

        <div className="quick-filter-row rent-quick-row">
          {rentQuickFilters.map((filter) => (
            <button
              className="quick-filter"
              key={filter.title}
              type="button"
              onClick={quickActionsByTitle[filter.title]}
            >
              <Icon name={filter.icon} />
              <span>
                <strong>{filter.title}</strong>
                <small>{filter.text}</small>
              </span>
            </button>
          ))}
        </div>

        <section className="buy-results-zone" aria-label="Wyniki wyszukiwania najmu">
          <div className="buy-layout buy-layout-results">
          <section className="results-column" aria-label="Lista mieszkań na wynajem">
            <div className="results-head">
              <h2>Oferty wynajmu</h2>
              {allChips.map((chip) => (
                <button className="filter-chip" type="button" key={chip.label} onClick={chip.onRemove}>
                  {chip.label} ×
                </button>
              ))}
            </div>

            {/* Ten sam pasek co przy sprzedazy - filtry sa wspolne dla obu list. */}
            {filters.fromPreferences && (
              <p className="preferences-note" role="status">
                <Icon name="gear" />
                <span>Filtry ustawione według Twoich preferencji wyszukiwania.</span>
                <button type="button" onClick={resetAll}>Wyczyść</button>
                <Link to={ROUTES.accountSettings}>Zmień preferencje</Link>
              </p>
            )}

            <RealListingsBand
              offerType="RENT"
              onOpenListing={onOpenListing}
              city={city}
              isFavorite={isFavorite}
              onToggleFavorite={onToggleFavorite}
            />
          </section>

          <aside className="map-column" aria-label="Mapa ofert">
            <div className="map-card">
              <SatelliteMap
                markers={[]}
                center={rentMapCenter}
                cityLabel={city || 'Warszawa'}
                geoMarkers={rentGeoMarkers}
                onMapClick={() => setIsMapOpen(true)}
                onSearchVisible={searchVisibleOnMap}
              />
            </div>

            <div className="map-ai-card">
              <div className="ai-label">
                <Icon name="spark" />
                <span>AI Dopasowanie</span>
                <em className="soon-tag">Wkrótce</em>
              </div>
              <p>Powiedz nam, czego szukasz, a AI znajdzie dla Ciebie idealne oferty wynajmu.</p>
              <button type="button" disabled title={SOON_HINT}>
                <Icon name="spark" />
                Dopasuj mi mieszkanie
              </button>
            </div>
          </aside>
          </div>
        </section>
      </div>
      {isMapOpen && (
        <OffersMapModal
          city={city}
          offerType="RENT"
          onClose={() => setIsMapOpen(false)}
        />
      )}
    </section>
  );
}

// Odwzorowanie danych z API (GET /listings/:id) na stan kreatora - do prefillu w trybie edycji.
// Uwaga: pola, ktorych API nie zwraca (house-specific: garaz/piwnica/strych, dane dzialki),
// pozostaja domyslne - swiadome ograniczenie round-tripu.
function orWybierz(value: string | null | undefined): string {
  const trimmed = (value ?? '').trim();
  return trimmed ? trimmed : 'Wybierz';
}

function apiDetailToWizardState(detail: ApiListingDetail) {
  const isHouse = detail.propertyType === 'HOUSE';
  const listingDetails: typeof INITIAL_LISTING_DETAILS = {
    ...INITIAL_LISTING_DETAILS,
    transaction: detail.offerType === 'RENT' ? 'Wynajem' : 'Sprzedaż',
    propertyType: isHouse ? 'Dom' : 'Mieszkanie',
    market: orWybierz(detail.market),
    title: detail.title ?? '',
    description: detail.description ?? '',
    price: detail.price != null ? String(detail.price) : '',
    area: detail.area != null ? String(detail.area) : '',
    rooms: detail.rooms >= 6 ? '6+' : detail.rooms ? String(detail.rooms) : 'Wybierz',
    floor: orWybierz(detail.floor),
    buildingFloors: isHouse ? INITIAL_LISTING_DETAILS.buildingFloors : orWybierz(detail.buildingFloors),
    houseFloors: isHouse ? orWybierz(detail.buildingFloors) : INITIAL_LISTING_DETAILS.houseFloors,
    houseType: isHouse ? orWybierz(detail.buildingType) : INITIAL_LISTING_DETAILS.houseType,
    yearBuilt: detail.yearBuilt != null ? String(detail.yearBuilt) : '',
    condition: orWybierz(detail.condition),
    ownership: orWybierz(detail.ownership),
    contactName: detail.contactName ?? '',
    contactPhoneCountry: splitContactPhone(detail.contactPhone).country,
    contactPhone: splitContactPhone(detail.contactPhone).number,
    contactEmail: detail.contactEmail ?? '',
  };
  const extraInfo: typeof INITIAL_EXTRA_INFO = {
    ...INITIAL_EXTRA_INFO,
    rent: detail.rentExtra != null ? String(detail.rentExtra) : '',
    availableFrom: detail.availableFrom ?? '',
    furnishing: orWybierz(detail.furnishing),
    buildingType: isHouse ? INITIAL_EXTRA_INFO.buildingType : orWybierz(detail.buildingType),
    buildingMaterial: orWybierz(detail.buildingMaterial),
    windows: orWybierz(detail.windows),
    exposure: orWybierz(detail.exposure),
    roomHeight: detail.roomHeight ?? '',
    virtualTourUrl: detail.virtualTourUrl ?? '',
  };
  const location: ListingLocation = {
    ...INITIAL_LISTING_LOCATION,
    city: detail.city ?? '',
    district: detail.district ?? '',
    street: detail.street ?? '',
    building: detail.building ?? '',
    approximateLocation: detail.approximateLocation ?? false,
  };
  const photos: ListingPhoto[] = (detail.photos ?? []).map((url, index) => ({
    id: `edit-photo-${index}`,
    name: `Zdjęcie ${index + 1}`,
    url,
  }));
  const center = detail.lat != null && detail.lng != null ? { lat: detail.lat, lng: detail.lng } : null;
  return {
    listingDetails,
    extraInfo,
    location,
    selectedMedia: detail.media ?? [],
    selectedAmenities: detail.amenities ?? [],
    photos,
    center,
  };
}

function AddListingPage({ editListingId }: { editListingId?: number }) {
  const navigate = useNavigate();
  const { user } = useAuth();
  // Konta firmowe podaja w kontakcie nazwe firmy / osobe kontaktowa zamiast samego imienia.
  const isCompanyAccount = user?.accountType === 'COMPANY';
  const isEdit = typeof editListingId === 'number';
  const [editLoadError, setEditLoadError] = useState('');
  const [currentStep, setCurrentStep] = useState(0);
  // Komunikat blokady kroku "Szczegóły"/"Lokalizacja" - pokazywany dopiero po próbie przejścia
  // dalej, zeby nie krzyczec o brakach zanim uzytkownik cokolwiek wypelni.
  const [showDetailsError, setShowDetailsError] = useState(false);
  const [showLocationError, setShowLocationError] = useState(false);
  const [showPhotosError, setShowPhotosError] = useState(false);
  const [listingDetails, setListingDetails] = useState(INITIAL_LISTING_DETAILS);
  // Ekran startowy z wyborem "Chcę sprzedać / wynająć" + kategorii. Przy edycji pomijamy go i od razu
  // pokazujemy formularz. Wybor kategorii ustawia transakcje i rodzaj, a potem wchodzimy w kreator.
  const [categoryChosen, setCategoryChosen] = useState(isEdit);
  const showCategoryChooser = !isEdit && !categoryChosen;
  const chooseCategory = (transaction: string, propertyType: string) => {
    setListingDetails((current) => ({ ...current, transaction, propertyType }));
    setCurrentStep(0);
    setCategoryChosen(true);
  };

  // Dane kontaktowe wypelniamy z konta zalogowanego uzytkownika (imie i nazwisko, e-mail, telefon) -
  // raz i tylko dla nowej oferty. Pola pozostaja w pelni edytowalne. Przy edycji ogloszenia dane
  // pochodza z samego ogloszenia, wiec nie nadpisujemy ich kontem.
  const contactPrefilledRef = useRef(false);
  useEffect(() => {
    if (isEdit || contactPrefilledRef.current || !user) {
      return;
    }
    contactPrefilledRef.current = true;
    const phone = contactPhoneFromUser(user.phone);
    setListingDetails((current) => ({
      ...current,
      contactName: current.contactName || user.fullName || '',
      contactEmail: current.contactEmail || user.email || '',
      contactPhoneCountry: current.contactPhone ? current.contactPhoneCountry : phone.country,
      contactPhone: current.contactPhone || phone.number,
    }));
  }, [isEdit, user]);
  const [contactPhoneTouched, setContactPhoneTouched] = useState(false);
  // Wybor kraju telefonu jako picker z flaga (jak w ustawieniach konta), a nie zwykly <select>.
  const [isContactCountryOpen, setIsContactCountryOpen] = useState(false);
  const contactCountryRef = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    if (!isContactCountryOpen) {
      return;
    }
    const handler = (event: MouseEvent) => {
      if (contactCountryRef.current && !contactCountryRef.current.contains(event.target as Node)) {
        setIsContactCountryOpen(false);
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [isContactCountryOpen]);
  const [location, setLocation] = useState<ListingLocation>(INITIAL_LISTING_LOCATION);
  const [photos, setPhotos] = useState<ListingPhoto[]>([]);
  const [extraInfo, setExtraInfo] = useState(INITIAL_EXTRA_INFO);
  const [selectedMedia, setSelectedMedia] = useState<string[]>([]);
  const [selectedAmenities, setSelectedAmenities] = useState<string[]>([]);
  const [draggedPhotoId, setDraggedPhotoId] = useState<string | null>(null);
  const [photoDropTargetId, setPhotoDropTargetId] = useState<string | null>(null);
  const [finalGalleryIndex, setFinalGalleryIndex] = useState(0);
  const [locationCenter, setLocationCenter] = useState<LatLng>(INITIAL_LISTING_COORDS);
  const [locationMapCenter, setLocationMapCenter] = useState<LatLng>(INITIAL_LISTING_COORDS);
  const [locationMapZoom, setLocationMapZoom] = useState(16);
  const [locationStatus, setLocationStatus] = useState('Kliknij na mapie albo wpisz adres, a pinezka ustawi się automatycznie.');
  // true = mapa odnalazla konkretny budynek (adres z numerem) - wtedy nie zmuszamy do recznego
  // wpisania ulicy i numeru, bo pinezka juz jednoznacznie wskazuje lokalizacje.
  const [locationResolved, setLocationResolved] = useState(false);
  const skipLocationSearch = useRef(false);
  const photoInputRef = useRef<HTMLInputElement>(null);
  const photoUrlsRef = useRef<string[]>([]);
  const isLocationStep = currentStep === 1;
  const isPhotosStep = currentStep === 2;
  const isExtraInfoStep = currentStep === 3;
  const isFinalPreviewStep = currentStep === 4;
  const mainPhoto = photos[0];
  // Komunikat o zlym numerze pokazujemy po opuszczeniu pola, zeby nie krzyczec przy pierwszej cyfrze.
  const contactPhoneError = validateContactPhone(listingDetails.contactPhoneCountry, listingDetails.contactPhone);
  const isRentTransaction = listingDetails.transaction.trim().toLowerCase() === 'wynajem';
  const numericPrice = Number(listingDetails.price.replace(',', '.'));
  const numericArea = Number(listingDetails.area.replace(',', '.'));
  const numericDeposit = Number(extraInfo.rent.replace(',', '.'));
  const numericSecurityDeposit = Number(extraInfo.deposit.replace(',', '.'));
  const pricePerMeter = numericPrice > 0 && numericArea > 0 ? Math.round(numericPrice / numericArea).toString() : '';
  const formattedPrice = numericPrice > 0 ? `${new Intl.NumberFormat('pl-PL').format(numericPrice)} zł` : 'Cena';
  const formattedMonthlyPrice = numericPrice > 0 ? `${new Intl.NumberFormat('pl-PL').format(numericPrice)} zł / miesiąc` : 'Cena / miesiąc';
  const formattedPricePerMeter = pricePerMeter ? `${new Intl.NumberFormat('pl-PL').format(Number(pricePerMeter))} zł/m²` : 'zł/m²';
  const formattedDeposit = numericDeposit > 0 ? `Czynsz administracyjny: ${new Intl.NumberFormat('pl-PL').format(numericDeposit)} zł` : 'Czynsz administracyjny: nie podano';
  const formattedSecurityDeposit = numericSecurityDeposit > 0 ? `${new Intl.NumberFormat('pl-PL').format(numericSecurityDeposit)} zł` : 'Nie podano';
  const previewTitle = listingDetails.title.trim() || 'Tytuł ogłoszenia';
  // Dlugosc opisu w znakach liczona z czystego tekstu (bez znacznikow HTML edytora) - do minimum 30.
  const descriptionCharCount = stripHtml(listingDetails.description).trim().length;
  const normalizedVirtualTourUrl = extraInfo.virtualTourUrl.trim();
  const hasVirtualTour = normalizedVirtualTourUrl.length > 0;
  const virtualTourEmbedPreview = hasVirtualTour ? getVirtualTourEmbed(normalizedVirtualTourUrl) : null;

  const [publishState, setPublishState] = useState<'idle' | 'saving' | 'success' | 'error'>('idle');
  const [publishError, setPublishError] = useState('');
  const [virtualTourError, setVirtualTourError] = useState('');
  const [createdListingId, setCreatedListingId] = useState<number | null>(null);
  const [showPromoteModal, setShowPromoteModal] = useState(false);

  const handlePreviewVirtualTour = () => {
    try {
      const normalized = normalizeVirtualTourInput(extraInfo.virtualTourUrl);
      setVirtualTourError('');
      window.open(normalized, '_blank', 'noopener,noreferrer');
    } catch (error) {
      setVirtualTourError(error instanceof Error ? error.message : 'Nie udało się otworzyć linku spaceru.');
    }
  };

  const handlePublish = async () => {
    if (publishState === 'saving') {
      return;
    }
    const roomsValue = Number(listingDetails.rooms);
    const cityValue = location.city.trim();
    if (!listingDetails.title.trim() || isRichTextEmpty(listingDetails.description)) {
      setPublishState('error');
      setPublishError('Uzupełnij tytuł i opis ogłoszenia (krok „Szczegóły”).');
      return;
    }
    if (!cityValue) {
      setPublishState('error');
      setPublishError('Podaj miejscowość w kroku „Lokalizacja”.');
      return;
    }
    if (!(numericPrice > 0) || !(numericArea > 0) || !Number.isFinite(roomsValue) || roomsValue < 1) {
      setPublishState('error');
      setPublishError('Uzupełnij poprawną cenę, powierzchnię i liczbę pokoi.');
      return;
    }
    if (contactPhoneError) {
      setPublishState('error');
      setPublishError(`${contactPhoneError} (krok „Szczegóły”).`);
      return;
    }

    const addressValue = [location.street, location.building, location.district]
      .map((part) => part.trim())
      .filter(Boolean)
      .join(' ');

    setPublishState('saving');
    setPublishError('');
    try {
      const clean = (value: string) => {
        const trimmed = (value ?? '').trim();
        return trimmed && trimmed !== 'Wybierz' ? trimmed : undefined;
      };
      const yearNum = Number.parseInt(listingDetails.yearBuilt, 10);
      const rentNum = Number.parseFloat((extraInfo.rent ?? '').replace(',', '.'));
      const photoData = (await Promise.all(photos.slice(0, 8).map((photo) => imageUrlToDataUrl(photo.url))))
        .filter((value): value is string => Boolean(value));
      const virtualTourUrl = clean(extraInfo.virtualTourUrl);
      const normalizedVirtualTour = virtualTourUrl ? normalizeVirtualTourInput(virtualTourUrl) : undefined;

      const payload = {
        title: listingDetails.title.trim(),
        description: listingDetails.description.trim(),
        offerType: isRentTransaction ? 'RENT' : 'SALE',
        propertyType: listingDetails.propertyType === 'Dom' ? 'HOUSE' : 'APARTMENT',
        city: cityValue,
        address: addressValue || null,
        price: numericPrice,
        area: numericArea,
        rooms: Math.trunc(roomsValue),
        market: clean(listingDetails.market),
        district: clean(location.district),
        street: clean(location.street),
        building: clean(location.building),
        floor: clean(listingDetails.floor),
        buildingFloors: clean(isHouseProperty ? listingDetails.houseFloors : listingDetails.buildingFloors),
        yearBuilt: Number.isFinite(yearNum) ? yearNum : undefined,
        condition: clean(listingDetails.condition),
        ownership: clean(listingDetails.ownership),
        contactName: clean(listingDetails.contactName),
        contactPhone: composeContactPhone(listingDetails.contactPhoneCountry, listingDetails.contactPhone),
        contactEmail: clean(listingDetails.contactEmail),
        rentExtra: Number.isFinite(rentNum) && rentNum > 0 ? rentNum : undefined,
        availableFrom: isRentTransaction ? clean(extraInfo.availableFrom) : undefined,
        furnishing: clean(extraInfo.furnishing),
        buildingType: clean(isHouseProperty ? listingDetails.houseType : extraInfo.buildingType),
        buildingMaterial: clean(extraInfo.buildingMaterial),
        windows: clean(extraInfo.windows),
        exposure: clean(extraInfo.exposure),
        roomHeight: clean(extraInfo.roomHeight),
        lat: locationCenter.lat,
        lng: locationCenter.lng,
        media: selectedMedia,
        amenities: selectedAmenities,
        photos: photoData,
        virtualTourUrl: normalizedVirtualTour,
        approximateLocation: location.approximateLocation,
      };

      if (isEdit) {
        await apiFetch(`/listings/${editListingId}`, { method: 'PUT', body: JSON.stringify(payload) });
        setPublishState('success');
        navigate(ROUTES.accountListings);
      } else {
        const created = await apiFetch<{ id: number }>('/listings', { method: 'POST', body: JSON.stringify(payload) });
        setCreatedListingId(created?.id ?? null);
        setPublishState('success');
      }
    } catch (err) {
      setPublishState('error');
      setPublishError(err instanceof Error ? err.message : isEdit ? 'Nie udało się zapisać zmian.' : 'Nie udało się opublikować ogłoszenia.');
    }
  };

  const isHouseProperty = listingDetails.propertyType === 'Dom';
  const isLandProperty = listingDetails.propertyType === 'Działka';
  const showFlatFields = !isHouseProperty && !isLandProperty;
  const showRoomFields = !isLandProperty;
  const showBuildingFields = !isLandProperty;
  // Dynamiczna zawartosc kroku "Dodatkowe informacje" - pola i kafelki zalezne od kategorii i transakcji.
  const extraSection = resolveCategoryExtra(listingDetails.propertyType, isRentTransaction);
  const activeExtraFields = extraSection.fields;
  const visibleMediaOptions = extraSection.mediaTiles.map((label) => ({ label, icon: tileIcon(label) }));
  const visibleAmenityOptions = extraSection.amenityTiles.map((label) => ({ label, icon: tileIcon(label) }));
  // Odczyt/zapis pola z konfiguracji do wlasciwego stanu (extraInfo albo listingDetails).
  const extraFieldValue = (field: ExtraFieldDef): string => {
    const source = field.store === 'details' ? listingDetails : extraInfo;
    const raw = (source as unknown as Record<string, unknown>)[field.key];
    return typeof raw === 'string' ? raw : '';
  };
  const setExtraField = (field: ExtraFieldDef, value: string) => {
    if (field.store === 'details') {
      updateListingDetails(field.key as keyof typeof INITIAL_LISTING_DETAILS, value);
    } else {
      updateExtraInfo(field.key as keyof typeof INITIAL_EXTRA_INFO, value);
    }
  };
  const mediaBillingEntries = isRentTransaction
    ? [
      ...selectedMedia
        .map((label) => ({ key: label, label, options: getRentBillingOptions(label) }))
        .filter((item): item is { key: string; label: string; options: string[] } => Array.isArray(item.options)),
    ]
    : [];
  const amenityBillingEntries = isRentTransaction
    ? [
      ...(selectedAmenities.includes('Parking')
        ? [{ key: 'Parking', label: 'Parking', options: RENT_BILLING_OPTIONS_PARKING }]
        : []),
      ...(selectedAmenities.includes('Garaż')
        ? [{ key: 'Garaż', label: 'Garaż', options: RENT_BILLING_OPTIONS_PARKING }]
        : []),
    ]
    : [];
  const previewLocation = [
    location.city,
    location.district,
    location.estate,
    [location.street, location.building].filter(Boolean).join(' '),
  ].filter((part) => part.trim()).join(', ') || 'Lokalizacja';
  // Rdzenne parametry jako kafelki (ikona -> wartosc -> podpis), tak jak na stronie ogloszenia.
  const previewSpecTiles: SpecTile[] = [
    { icon: 'area', value: listingDetails.area.trim() ? `${listingDetails.area.replace('.', ',')} m²` : '—', caption: 'Powierzchnia' },
    ...(showRoomFields ? [{ icon: 'plan', value: listingDetails.rooms !== 'Wybierz' ? listingDetails.rooms : '—', caption: 'Pokoje' }] : []),
    ...(showFlatFields ? [{ icon: 'stairs', value: listingDetails.floor !== 'Wybierz' ? `${listingDetails.floor}${listingDetails.buildingFloors !== 'Wybierz' ? `/${listingDetails.buildingFloors}` : ''}` : '—', caption: 'Piętro' }] : []),
    { icon: 'check', value: listingDetails.market, caption: 'Rynek' },
  ];
  // Dodatkowe cechy (umeblowanie, udogodnienia, media) jako drobne chipy pod kafelkami - w kroku "Dodatkowe informacje".
  const previewExtraChips = [
    ...(isExtraInfoStep && extraInfo.furnishing !== 'Wybierz' ? [{ icon: 'sofa', label: extraInfo.furnishing === 'Tak' ? 'Umeblowane' : `Umeblowanie: ${extraInfo.furnishing}` }] : []),
    ...(isExtraInfoStep && extraInfo.buildingType !== 'Wybierz' ? [{ icon: 'building', label: extraInfo.buildingType }] : []),
    ...(['Balkon', 'Taras', 'Ogródek', 'Winda', 'Parking', 'Garaż', 'Piwnica']
      .filter((label) => isExtraInfoStep && selectedAmenities.includes(label))
      .map((label) => ({ icon: label === 'Parking' || label === 'Garaż' ? 'car' : label === 'Ogródek' ? 'wifi' : 'building', label }))),
    ...(['Internet', 'Klimatyzacja', 'Ogrzewanie miejskie', 'Gaz']
      .filter((label) => isExtraInfoStep && selectedMedia.includes(label))
      .map((label) => ({ icon: label === 'Internet' ? 'wifi' : label === 'Klimatyzacja' ? 'snow' : label === 'Gaz' || label === 'Ogrzewanie miejskie' ? 'flame' : 'spark', label }))),
  ].slice(0, 6);
  const finalGalleryImages = photos.length > 0
    ? photos.map((photo) => photo.url)
    : [heroImage, heroImage, cityImage, heroImage, cityImage];
  const activeFinalImage = finalGalleryImages[finalGalleryIndex] ?? finalGalleryImages[0];
  const finalFeatureItems = [
    ...selectedAmenities.filter((label) => visibleAmenityOptions.some((option) => option.label === label)).map((label) => ({ icon: label === 'Parking' || label === 'Garaż' ? 'car' : label === 'Ogródek' ? 'wifi' : 'building', label })),
    ...selectedMedia.filter((label) => visibleMediaOptions.some((option) => option.label === label)).map((label) => ({ icon: label === 'Internet' ? 'wifi' : label === 'Klimatyzacja' ? 'snow' : label === 'Gaz' || label.includes('Ogrzewanie') ? 'flame' : label === 'Telefon' ? 'phone' : 'spark', label })),
  ];
  // Podglad "Szczegoly" budujemy z: stalych pol kroku 1 (rynek, forma wlasnosci, rok, stan, dom),
  // dynamicznych pol kroku "Dodatkowe informacje" (te same, ktore widzi uzytkownik w formularzu -
  // dzieki temu podglad zawsze zgadza sie z formularzem) oraz rozliczen najmu.
  const finalDetails = [
    { label: 'Rynek', value: listingDetails.market },
    ...(!isRentTransaction ? [{ label: 'Forma własności', value: listingDetails.ownership }] : []),
    ...(showBuildingFields ? [{ label: 'Rok budowy', value: listingDetails.yearBuilt || 'Nie podano' }] : []),
    ...(showBuildingFields ? [{ label: 'Stan nieruchomości', value: listingDetails.condition }] : []),
    ...(isHouseProperty ? [{ label: 'Typ domu', value: listingDetails.houseType !== 'Wybierz' ? listingDetails.houseType : 'Nie podano' }] : []),
    ...(isHouseProperty ? [{ label: 'Liczba kondygnacji', value: listingDetails.houseFloors !== 'Wybierz' ? listingDetails.houseFloors : 'Nie podano' }] : []),
    ...(isHouseProperty ? [{ label: 'Garaż', value: listingDetails.houseGarage !== 'Wybierz' ? listingDetails.houseGarage : 'Nie podano' }] : []),
    ...(isHouseProperty ? [{ label: 'Podpiwniczenie', value: listingDetails.houseBasement !== 'Wybierz' ? listingDetails.houseBasement : 'Nie podano' }] : []),
    ...(isHouseProperty ? [{ label: 'Strych', value: listingDetails.houseAttic !== 'Wybierz' ? listingDetails.houseAttic : 'Nie podano' }] : []),
    ...(isRentTransaction ? [{ label: 'Czynsz administracyjny', value: extraInfo.rent ? `${extraInfo.rent} zł` : 'Nie podano' }] : []),
    // Dynamiczne pola sekcji "Dodatkowe informacje" - tylko wypelnione (kaucja pokazana osobno nizej).
    ...activeExtraFields
      .filter((field) => field.key !== 'deposit')
      .map((field) => {
        const raw = extraFieldValue(field);
        if (!raw || raw === 'Wybierz') {
          return null;
        }
        return { label: field.label, value: field.suffix ? `${raw} ${field.suffix}` : raw };
      })
      .filter((row): row is { label: string; value: string } => row !== null),
    ...(isRentTransaction ? [{ label: 'Kaucja', value: formattedSecurityDeposit }] : []),
    ...(isRentTransaction ? [...mediaBillingEntries, ...amenityBillingEntries].map((item) => {
      const mode = extraInfo.mediaBilling[item.key] ?? item.options[0];
      const amount = (extraInfo.mediaBillingAmounts[item.key] ?? '').trim();
      const value = billingRequiresAmount(mode)
        ? (amount ? `Kwota: ${amount} zł` : 'Kwota: nie podano')
        : mode;
      return {
      label: `${item.label} (rozliczenie)`,
      value,
      };
    }) : []),
    { label: 'Ogłoszenie dodane', value: 'Dzisiaj' },
  ];

  // Tryb edycji: pobierz pelne dane ogloszenia z API i wczytaj je do kreatora.
  useEffect(() => {
    if (!isEdit) {
      return;
    }
    let cancelled = false;
    setEditLoadError('');
    (async () => {
      try {
        const detail = await apiFetch<ApiListingDetail>(`/listings/${editListingId}`);
        if (cancelled) {
          return;
        }
        const mapped = apiDetailToWizardState(detail);
        setListingDetails(mapped.listingDetails);
        setExtraInfo(mapped.extraInfo);
        setLocation(mapped.location);
        setSelectedMedia(mapped.selectedMedia);
        setSelectedAmenities(mapped.selectedAmenities);
        setPhotos(mapped.photos);
        if (mapped.center) {
          setLocationCenter(mapped.center);
          setLocationMapCenter(mapped.center);
        }
        setLocationStatus('Dane ogłoszenia zostały wczytane do edycji.');
      } catch (error) {
        if (!cancelled) {
          setEditLoadError(error instanceof Error ? error.message : 'Nie udało się wczytać ogłoszenia do edycji.');
        }
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [isEdit, editListingId]);

  // Warunek przejscia z kroku "Szczegóły" dalej - te same wymagane pola, ktore i tak sprawdza
  // publikacja, tyle ze egzekwowane juz przy wyjsciu z pierwszej strony. Pusty string = brak bledu.
  const detailsStepError = (() => {
    if (!listingDetails.title.trim()) return 'Podaj tytuł ogłoszenia.';
    if (isRichTextEmpty(listingDetails.description)) return 'Dodaj opis ogłoszenia.';
    if (descriptionCharCount < MIN_DESCRIPTION_CHARS) {
      return `Opis musi mieć co najmniej ${MIN_DESCRIPTION_CHARS} znaków (obecnie ${descriptionCharCount}).`;
    }
    if (!(numericPrice > 0)) return isRentTransaction ? 'Podaj poprawny czynsz miesięczny.' : 'Podaj poprawną cenę.';
    if (!(numericArea > 0)) return 'Podaj poprawną powierzchnię.';
    if (showRoomFields) {
      const roomsValue = Number(listingDetails.rooms);
      if (!Number.isFinite(roomsValue) || roomsValue < 1) return 'Wybierz liczbę pokoi.';
    }
    if (contactPhoneError) return contactPhoneError;
    return '';
  })();

  // Warunek przejscia z kroku "Lokalizacja" do zdjec - pola oznaczone gwiazdka na tej stronie.
  // Wyjatek: gdy mapa odnalazla konkretny budynek (locationResolved), pinezka wystarcza za ulice
  // i numer - uzytkownik mogl wpisac caly adres w jedno pole, a i tak wiemy gdzie jest oferta.
  const locationStepError = (() => {
    if (!location.city.trim()) return 'Podaj miasto.';
    if (locationResolved) return '';
    if (!location.street.trim()) return 'Podaj ulicę.';
    if (!location.building.trim()) return 'Podaj numer budynku.';
    return '';
  })();

  const goToStep = (step: number) => {
    // Blokada wyjscia z pierwszej strony (currentStep 0 = "Szczegóły"), gdy brakuje wymaganych pol.
    // Dotyczy zarowno przycisku "Dalej", jak i skoku naprzod w bocznym stepperze; wstecz przepuszczamy.
    if (currentStep === 0 && step > 0 && detailsStepError) {
      setShowDetailsError(true);
      setContactPhoneTouched(true);
      window.requestAnimationFrame(() => {
        document.querySelector('.add-step-error')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
      });
      return;
    }
    // Analogiczna blokada wyjscia z kroku "Lokalizacja" (currentStep 1) do zdjec i dalej.
    if (currentStep === 1 && step > 1 && locationStepError) {
      setShowLocationError(true);
      window.requestAnimationFrame(() => {
        document.querySelector('.add-step-error')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
      });
      return;
    }
    // Krok "Zdjęcia" (currentStep 2) - wymagamy przynajmniej jednego zdjecia, zeby przejsc dalej.
    if (currentStep === 2 && step > 2 && photos.length === 0) {
      setShowPhotosError(true);
      window.requestAnimationFrame(() => {
        document.querySelector('.add-step-error')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
      });
      return;
    }
    setShowDetailsError(false);
    setShowLocationError(false);
    setShowPhotosError(false);
    setCurrentStep(step);
    window.requestAnimationFrame(() => {
      document.querySelector('.add-page')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
  };
  const showPreviousFinalPhoto = () => {
    setFinalGalleryIndex((current) => (current - 1 + finalGalleryImages.length) % finalGalleryImages.length);
  };
  const showNextFinalPhoto = () => {
    setFinalGalleryIndex((current) => (current + 1) % finalGalleryImages.length);
  };
  const updateLocation = (field: keyof ListingLocation, value: string) => {
    setLocation((current) => ({ ...current, [field]: value }));
  };

  const updateListingDetails = (field: keyof typeof INITIAL_LISTING_DETAILS, value: string) => {
    setListingDetails((current) => ({ ...current, [field]: value }));
  };

  const updateExtraInfo = (field: keyof typeof INITIAL_EXTRA_INFO, value: string) => {
    if (field === 'virtualTourUrl' && virtualTourError) {
      setVirtualTourError('');
    }
    setExtraInfo((current) => ({ ...current, [field]: value }));
  };

  const updateMediaBilling = (key: string, value: string) => {
    setExtraInfo((current) => ({
      ...current,
      mediaBilling: {
        ...current.mediaBilling,
        [key]: value,
      },
      mediaBillingAmounts: billingRequiresAmount(value)
        ? current.mediaBillingAmounts
        : Object.fromEntries(Object.entries(current.mediaBillingAmounts).filter(([entryKey]) => entryKey !== key)),
    }));
  };

  const updateMediaBillingAmount = (key: string, value: string) => {
    setExtraInfo((current) => ({
      ...current,
      mediaBillingAmounts: {
        ...current.mediaBillingAmounts,
        [key]: value,
      },
    }));
  };

  const toggleOption = (value: string, setter: Dispatch<SetStateAction<string[]>>) => {
    setter((current) => current.includes(value) ? current.filter((item) => item !== value) : [...current, value]);
  };

  const addPhotos = async (files: FileList | File[]) => {
    const imageFiles = Array.from(files).filter((file) => ['image/jpeg', 'image/png'].includes(file.type) && file.size <= 10 * 1024 * 1024);
    if (!imageFiles.length) {
      return;
    }
    // Zdjecia szersze niz 1024 px sa kompresowane do tej szerokosci juz przy wgrywaniu.
    const nextPhotos = await Promise.all(imageFiles.map(async (file) => ({
      id: `${file.name}-${file.lastModified}-${safeRandomId()}`,
      name: file.name,
      url: await compressImageFile(file, 1024),
    })));
    setPhotos((current) => {
      const freeSlots = Math.max(20 - current.length, 0);
      return [...current, ...nextPhotos.slice(0, freeSlots)];
    });
  };

  const handlePhotoInput = (event: ReactChangeEvent<HTMLInputElement>) => {
    if (event.target.files) {
      addPhotos(event.target.files);
    }
    event.target.value = '';
  };

  const handlePhotoDrop = (event: ReactDragEvent<HTMLLabelElement>) => {
    event.preventDefault();
    addPhotos(event.dataTransfer.files);
  };

  const removePhoto = (photoId: string) => {
    setPhotos((current) => {
      const removedPhoto = current.find((photo) => photo.id === photoId);
      if (removedPhoto) {
        URL.revokeObjectURL(removedPhoto.url);
      }
      return current.filter((photo) => photo.id !== photoId);
    });
  };

  // Ustawia wskazane zdjecie jako glowne (przenosi na poczatek listy = wyswietla sie pierwsze w ogloszeniu).

  const movePhoto = (photoId: string, direction: -1 | 1) => {
    setPhotos((current) => {
      const index = current.findIndex((photo) => photo.id === photoId);
      const nextIndex = index + direction;
      if (index < 0 || nextIndex < 0 || nextIndex >= current.length) {
        return current;
      }
      const nextPhotos = [...current];
      [nextPhotos[index], nextPhotos[nextIndex]] = [nextPhotos[nextIndex], nextPhotos[index]];
      return nextPhotos;
    });
  };

  const reorderPhoto = (fromPhotoId: string, toPhotoId: string) => {
    if (fromPhotoId === toPhotoId) {
      return;
    }
    setPhotos((current) => {
      const fromIndex = current.findIndex((photo) => photo.id === fromPhotoId);
      const toIndex = current.findIndex((photo) => photo.id === toPhotoId);
      if (fromIndex < 0 || toIndex < 0) {
        return current;
      }
      const nextPhotos = [...current];
      const [draggedPhoto] = nextPhotos.splice(fromIndex, 1);
      nextPhotos.splice(toIndex, 0, draggedPhoto);
      return nextPhotos;
    });
  };

  const handlePhotoDragStart = (event: ReactDragEvent<HTMLElement>, photoId: string) => {
    setDraggedPhotoId(photoId);
    event.dataTransfer.effectAllowed = 'move';
    event.dataTransfer.setData('text/plain', photoId);
  };

  const handlePhotoDropOnThumb = (event: ReactDragEvent<HTMLElement>, photoId: string) => {
    event.preventDefault();
    const sourcePhotoId = draggedPhotoId || event.dataTransfer.getData('text/plain');
    if (sourcePhotoId) {
      reorderPhoto(sourcePhotoId, photoId);
    }
    setDraggedPhotoId(null);
    setPhotoDropTargetId(null);
  };

  useEffect(() => {
    photoUrlsRef.current = photos.map((photo) => photo.url);
  }, [photos]);

  useEffect(() => {
    setFinalGalleryIndex((current) => Math.min(current, finalGalleryImages.length - 1));
  }, [finalGalleryImages.length]);

  useEffect(() => {
    setSelectedMedia((current) => current.filter((label) => visibleMediaOptions.some((option) => option.label === label)));
    setSelectedAmenities((current) => current.filter((label) => visibleAmenityOptions.some((option) => option.label === label)));
    setListingDetails((current) => ({
      ...current,
      rooms: showRoomFields ? current.rooms : 'Wybierz',
      floor: showFlatFields ? current.floor : 'Wybierz',
      buildingFloors: showFlatFields ? current.buildingFloors : 'Wybierz',
      yearBuilt: showBuildingFields ? current.yearBuilt : '',
      condition: showBuildingFields ? current.condition : 'Wybierz',
    }));
    // Wyczysc te zapisywane pola extra, ktorych nowa kategoria nie uzywa - inaczej wartosc ustawiona
    // przy poprzednim rodzaju nieruchomosci (np. "Typ zabudowy" mieszkania) wycieklaby do zapisu.
    const activeKeys = new Set([
      ...resolveCategoryExtra(listingDetails.propertyType, true).fields,
      ...resolveCategoryExtra(listingDetails.propertyType, false).fields,
    ].map((field) => field.key));
    setExtraInfo((current) => {
      const patch: Partial<typeof INITIAL_EXTRA_INFO> = {};
      for (const key of PERSISTED_EXTRA_SELECTS) {
        if (!activeKeys.has(key) && current[key] !== INITIAL_EXTRA_INFO[key]) {
          patch[key] = INITIAL_EXTRA_INFO[key];
        }
      }
      return Object.keys(patch).length ? { ...current, ...patch } : current;
    });
  }, [listingDetails.propertyType]);

  useEffect(() => {
    if (!isRentTransaction) {
      setExtraInfo((current) => ({ ...current, rent: '', deposit: '', rentalPeriod: 'Wybierz', mediaBilling: {}, mediaBillingAmounts: {} }));
    }
  }, [isRentTransaction]);

  useEffect(() => {
    if (!isRentTransaction) {
      return;
    }

    const allowedKeys = new Set([...mediaBillingEntries, ...amenityBillingEntries].map((item) => item.key));
    setExtraInfo((current) => {
      const nextBilling = Object.fromEntries(
        Object.entries(current.mediaBilling).filter(([key]) => allowedKeys.has(key)),
      );
      const nextAmounts = Object.fromEntries(
        Object.entries(current.mediaBillingAmounts)
          .filter(([key]) => allowedKeys.has(key) && billingRequiresAmount(nextBilling[key] ?? '')),
      );
      const unchanged = Object.keys(nextBilling).length === Object.keys(current.mediaBilling).length
        && Object.keys(nextBilling).every((key) => current.mediaBilling[key] === nextBilling[key])
        && Object.keys(nextAmounts).length === Object.keys(current.mediaBillingAmounts).length
        && Object.keys(nextAmounts).every((key) => current.mediaBillingAmounts[key] === nextAmounts[key]);
      if (unchanged) {
        return current;
      }
      return { ...current, mediaBilling: nextBilling, mediaBillingAmounts: nextAmounts };
    });
  }, [isRentTransaction, mediaBillingEntries, amenityBillingEntries]);

  useEffect(() => {
    return () => {
      photoUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
    };
  }, []);

  useEffect(() => {
    if (!isLocationStep) {
      return;
    }
    if (skipLocationSearch.current) {
      skipLocationSearch.current = false;
      return;
    }
    const controller = new AbortController();
    const timer = window.setTimeout(() => {
      setLocationStatus('Szukam adresu na mapie...');
      geocodeListingLocation(location, controller.signal)
        .then((result) => {
          if (!result) {
            setLocationResolved(false);
            setLocationStatus('Nie znaleziono dokładnego adresu. Przybliż mapę ręcznie.');
            return;
          }
          const nextCenter = clampCenter(result.point);
          setLocationCenter(nextCenter);
          setLocationMapCenter(nextCenter);
          setLocationMapZoom(location.approximateLocation ? APPROXIMATE_LOCATION_ZOOM : locationZoom(location));
          setLocationResolved(result.precise);
          setLocationStatus(location.approximateLocation
            ? 'Ustawiliśmy przybliżony obszar na podstawie wpisanego adresu.'
            : 'Pinezka została ustawiona na podstawie wpisanego adresu.');
        })
        .catch((error) => {
          if (error instanceof DOMException && error.name === 'AbortError') {
            return;
          }
          setLocationResolved(false);
          setLocationStatus('Nie udało się pobrać lokalizacji. Spróbuj kliknąć punkt na mapie.');
        });
    }, 650);
    return () => {
      window.clearTimeout(timer);
      controller.abort();
    };
  }, [isLocationStep, location]);

  // Plynne oddalenie/przyblizenie mapy przy przelaczaniu "Nie pokazuj dokladnego adresu".
  // Zoom zmieniamy krok po kroku (poziomy kafelkow sa calkowite), co daje efekt animacji.
  const approxZoomAnimRef = useRef<number | null>(null);
  useEffect(() => {
    if (!isLocationStep) {
      return;
    }
    const target = location.approximateLocation ? APPROXIMATE_LOCATION_ZOOM : EXACT_LOCATION_ZOOM;
    if (approxZoomAnimRef.current !== null) {
      window.clearInterval(approxZoomAnimRef.current);
    }
    approxZoomAnimRef.current = window.setInterval(() => {
      setLocationMapZoom((z) => {
        if (z === target) {
          if (approxZoomAnimRef.current !== null) {
            window.clearInterval(approxZoomAnimRef.current);
            approxZoomAnimRef.current = null;
          }
          return z;
        }
        return z + (z < target ? 1 : -1);
      });
    }, 130);
    return () => {
      if (approxZoomAnimRef.current !== null) {
        window.clearInterval(approxZoomAnimRef.current);
        approxZoomAnimRef.current = null;
      }
    };
  }, [location.approximateLocation, isLocationStep]);

  const pickLocationPoint = (point: LatLng) => {
    const nextCenter = clampCenter(point);
    setLocationCenter(nextCenter);
    setLocationMapCenter(nextCenter);
    // Przy przyblizonej lokalizacji nie doblizamy mapy - obszar ma pozostac widoczny.
    setLocationMapZoom((current) => (location.approximateLocation ? current : Math.max(current, 16)));
    setLocationStatus('Pobieram adres z wybranego punktu...');
    const controller = new AbortController();
    reverseGeocodeListingLocation(nextCenter, controller.signal)
      .then((details) => {
        skipLocationSearch.current = true;
        setLocation((current) => ({
          ...current,
          city: details.city ?? '',
          district: details.district ?? '',
          estate: details.estate ?? '',
          street: details.street ?? '',
          building: details.building ?? '',
          unit: '',
        }));
        // Trafienie w konkretny budynek (jest numer) znosi wymog recznego wpisania ulicy i numeru.
        setLocationResolved(Boolean(details.building));
        setLocationStatus('Pola lokalizacji zostały uzupełnione z mapy.');
      })
      .catch(() => {
        setLocationResolved(false);
        setLocationStatus('Nie udało się odczytać adresu z mapy. Przesuń pinezkę bliżej budynku.');
      });
  };

  return (
    <section className="add-page" aria-label="Dodaj ogłoszenie">
      <div className="add-container">
        <div className="breadcrumb">
          <span>Strona główna</span>
          <Icon name="chevron" />
          <strong>Dodaj ogłoszenie</strong>
        </div>

        {isEdit && !isPhotosStep && !isExtraInfoStep && !isFinalPreviewStep && (
          <div className="add-title">
            {isEdit ? (
              <>
                <h1>Edytuj <span>ogłoszenie</span></h1>
                <p>Zmień dowolny krok i zapisz aktualną wersję oferty.</p>
              </>
            ) : (
              <>
                <h1>
                  Dodaj ogłoszenie <span>za darmo</span>
                </h1>
                <p>Wypełnij formularz, a ogłoszenie trafi na listę ofert i mapę.</p>
              </>
            )}
            {!isEdit && categoryChosen && currentStep === 0 && (
              <button type="button" className="add-change-category" onClick={() => setCategoryChosen(false)}>
                <Icon name="chevron" /> Zmień kategorię
              </button>
            )}
            {editLoadError && <p className="publish-feedback error" role="alert">{editLoadError}</p>}
          </div>
        )}

        {showCategoryChooser ? (
          <div className="add-chooser-view">
            <AddChooserHero />
            <AddCategoryChooser onPick={chooseCategory} />
          </div>
        ) : (
          <>
        <div className={`add-layout add-layout-wizard ${isFinalPreviewStep ? 'final-preview-layout' : ''}`}>
          <AddWizardSteps currentStep={currentStep} onGoStep={goToStep} onBackToCategory={isEdit ? () => {} : () => setCategoryChosen(false)} />
          <div className="add-form-column">
            {/* Naglowek "Wybrana opcja" u gory na kazdym kroku (poza finalnym podgladem),
                nad animowana trescia kroku. */}
            {!isFinalPreviewStep && (
              <section className={`add-selected-option ${listingDetails.transaction === 'Wynajem' ? 'rent' : 'sell'}`}>
                <span className="add-selected-badge"><Icon name={ADD_CATEGORY_ICONS[listingDetails.propertyType] ?? 'building'} /></span>
                <div className="add-selected-text">
                  <small>Wybrana opcja</small>
                  <h2>{listingDetails.transaction === 'Wynajem' ? 'Wynajmij' : 'Sprzedaj'} – {listingDetails.propertyType}</h2>
                  <p>Dodajesz ogłoszenie za darmo. Bez prowizji i ukrytych kosztów.</p>
                </div>
              </section>
            )}
            {/* key={currentStep} remontuje tresc przy zmianie kroku - dzieki temu odpala sie
                animacja pojawienia (Dalej/Wstecz). */}
            <div className="add-step-anim" key={currentStep}>
            {!isLocationStep && !isPhotosStep && !isExtraInfoStep && !isFinalPreviewStep && (
              <>
                <section className="add-form-card">
                  <label className="add-field full">
                    <span>Tytuł ogłoszenia</span>
                    <input value={listingDetails.title} maxLength={70} onChange={(event) => updateListingDetails('title', event.target.value)} placeholder={LISTING_TITLE_HINTS[listingDetails.propertyType] ?? DEFAULT_LISTING_TITLE_HINT} />
                    <small>{listingDetails.title.length}/70</small>
                  </label>

                  <div className="add-field full">
                    <span>Opis ogłoszenia</span>
                    <RichTextEditor
                      value={listingDetails.description}
                      onChange={(html) => updateListingDetails('description', html)}
                      maxLength={3000}
                      ariaLabel="Opis ogłoszenia"
                      placeholder="Opisz szczegóły oferty: stan, lokalizację, atuty i najważniejsze informacje dla zainteresowanych..."
                    />
                  </div>
                </section>

                <section className="add-form-card">
                  <h2>Szczegóły nieruchomości</h2>
                  <div className="add-three-grid">
                    <AddInput label={isRentTransaction ? 'Czynsz miesięczny' : 'Cena'} value={listingDetails.price} suffix="zł" placeholder={isRentTransaction ? 'Np. 3200' : 'Np. 720000'} numeric="decimal" onChange={(value) => updateListingDetails('price', value)} />
                    {isRentTransaction ? (
                      <AddInput label="Czynsz administracyjny" value={extraInfo.rent} suffix="zł" placeholder="Np. 3000" numeric="decimal" onChange={(value) => updateExtraInfo('rent', value)} />
                    ) : (
                      <AddInput label="Cena za m²" value={pricePerMeter} suffix="zł/m²" readOnly />
                    )}
                    <AddInput label="Powierzchnia" value={listingDetails.area} suffix="m²" placeholder="Np. 55" numeric="decimal" onChange={(value) => updateListingDetails('area', value)} />
                    {showRoomFields && <AddSelect label="Liczba pokoi" value={listingDetails.rooms} options={listingDetailsSelectOptions.rooms} onChange={(value) => updateListingDetails('rooms', value)} />}
                    {showFlatFields && <AddSelect label="Piętro" value={listingDetails.floor} options={listingDetailsSelectOptions.floor} onChange={(value) => updateListingDetails('floor', value)} />}
                    {showFlatFields && <AddSelect label="Liczba pięter w budynku" value={listingDetails.buildingFloors} options={listingDetailsSelectOptions.buildingFloors} onChange={(value) => updateListingDetails('buildingFloors', value)} />}
                    {isHouseProperty && <AddSelect label="Typ domu" value={listingDetails.houseType} options={listingDetailsSelectOptions.houseType} onChange={(value) => updateListingDetails('houseType', value)} />}
                    {isHouseProperty && <AddSelect label="Liczba kondygnacji" value={listingDetails.houseFloors} options={listingDetailsSelectOptions.houseFloors} onChange={(value) => updateListingDetails('houseFloors', value)} />}
                    {isHouseProperty && <AddSelect label="Garaż" value={listingDetails.houseGarage} options={listingDetailsSelectOptions.houseGarage} onChange={(value) => updateListingDetails('houseGarage', value)} />}
                    {isHouseProperty && <AddSelect label="Podpiwniczenie" value={listingDetails.houseBasement} options={listingDetailsSelectOptions.houseBasement} onChange={(value) => updateListingDetails('houseBasement', value)} />}
                    {isHouseProperty && <AddSelect label="Strych" value={listingDetails.houseAttic} options={listingDetailsSelectOptions.houseAttic} onChange={(value) => updateListingDetails('houseAttic', value)} />}
                    {showBuildingFields && <AddInput label="Rok budowy" value={listingDetails.yearBuilt} placeholder="Np. 2015" numeric="integer" onChange={(value) => updateListingDetails('yearBuilt', value)} />}
                    {showBuildingFields && <AddSelect label="Stan nieruchomości" value={listingDetails.condition} options={listingDetailsSelectOptions.condition} onChange={(value) => updateListingDetails('condition', value)} />}
                    <AddSelect label="Forma własności" value={listingDetails.ownership} options={listingDetailsSelectOptions.ownership} onChange={(value) => updateListingDetails('ownership', value)} />
                    <AddSelect label="Rynek" value={listingDetails.market} options={listingDetailsSelectOptions.market} onChange={(value) => updateListingDetails('market', value)} />
                  </div>
                </section>

                <section className="add-form-card">
                  <h2>Dane kontaktowe</h2>
                  <div className="add-three-grid">
                    <AddInput label={isCompanyAccount ? 'Nazwa firmy / osoba kontaktowa' : 'Imię'} value={listingDetails.contactName} placeholder={isCompanyAccount ? 'Np. Biuro Nieruchomości XYZ' : 'Np. Jan'} onChange={(value) => updateListingDetails('contactName', value)} />
                    <label className="add-field add-phone-field">
                      <span>Telefon komórkowy</span>
                      <div className="add-phone-row">
                        <div ref={contactCountryRef} className="phone-country-picker">
                          <button
                            type="button"
                            className="phone-country-trigger"
                            onClick={() => setIsContactCountryOpen((open) => !open)}
                            aria-haspopup="listbox"
                            aria-expanded={isContactCountryOpen}
                            aria-label="Prefiks kraju"
                          >
                            <img src={`https://flagcdn.com/w20/${phoneCountryOf(listingDetails.contactPhoneCountry).code.toLowerCase()}.png`} alt={`Flaga ${phoneCountryOf(listingDetails.contactPhoneCountry).label}`} loading="lazy" />
                            <span>{phoneCountryOf(listingDetails.contactPhoneCountry).dial}</span>
                            <Icon name="chevron" />
                          </button>
                          {isContactCountryOpen && (
                            <div className="phone-country-menu" role="listbox" aria-label="Wybór kierunkowego">
                              {PHONE_COUNTRIES.map((country) => (
                                <button
                                  key={country.code}
                                  type="button"
                                  className={country.code === listingDetails.contactPhoneCountry ? 'active' : ''}
                                  onClick={() => {
                                    updateListingDetails('contactPhoneCountry', country.code);
                                    setIsContactCountryOpen(false);
                                  }}
                                >
                                  <img src={`https://flagcdn.com/w20/${country.code.toLowerCase()}.png`} alt={`Flaga ${country.label}`} loading="lazy" />
                                  <span>{country.dial}</span>
                                  <small>{country.label}</small>
                                </button>
                              ))}
                            </div>
                          )}
                        </div>
                        <input
                          type="tel"
                          inputMode="numeric"
                          autoComplete="tel-national"
                          value={listingDetails.contactPhone}
                          placeholder={`Np. ${phoneCountryOf(listingDetails.contactPhoneCountry).example}`}
                          onChange={(event) => updateListingDetails('contactPhone', event.target.value.replace(/[^\d ]/g, ''))}
                          onBlur={() => setContactPhoneTouched(true)}
                        />
                      </div>
                      {contactPhoneTouched && contactPhoneError && <small className="add-field-error">{contactPhoneError}</small>}
                    </label>
                    {/* E-mail kontaktowy jest na stale adresem konta (z rejestracji) - pokazujemy go,
                        ale nie pozwalamy edytowac, zeby kontakt zawsze trafial na wlasciwe konto. */}
                    <AddInput label="E-mail (adres konta)" value={listingDetails.contactEmail || user?.email || ''} type="email" readOnly />
                  </div>
                </section>

                <p className="secure-note">
                  <Icon name="shield" />
                  Twoje dane są bezpieczne. Nie udostępniamy ich osobom trzecim.
                </p>

                {showDetailsError && detailsStepError && (
                  <p className="add-field-error add-step-error" role="alert">
                    Uzupełnij wymagane pola, aby przejść do lokalizacji: {detailsStepError}
                  </p>
                )}

                <div className="add-wizard-nav">
                  <button className="add-nav-back" type="button" onClick={() => (isEdit ? navigate(-1) : setCategoryChosen(false))}>
                    <Icon name="chevron" /> Wstecz
                  </button>
                  <button className="add-nav-next" type="button" onClick={() => goToStep(1)}>
                    Dalej: Lokalizacja <Icon name="arrow" />
                  </button>
                </div>
              </>
            )}

            {isLocationStep && (
              <section className="add-form-card add-location-card">
                <div className="add-card-heading">
                  <h2>Lokalizacja nieruchomości</h2>
                  <p>Podaj dokładną lokalizację nieruchomości.</p>
                </div>

                <div className="add-location-grid">
                  <label className="add-field">
                    <span>Miasto <span className="required-star">*</span></span>
                    <input value={location.city} onChange={(event) => updateLocation('city', event.target.value)} placeholder="Wpisz miasto" />
                  </label>

                  <label className="add-field">
                    <span>Dzielnica <span className="optional-label">(opcjonalnie)</span></span>
                    <input value={location.district} onChange={(event) => updateLocation('district', event.target.value)} placeholder="Wpisz dzielnicę" />
                  </label>

                  <label className="add-field">
                    <span>Osiedle <span className="optional-label">(opcjonalnie)</span></span>
                    <input value={location.estate} onChange={(event) => updateLocation('estate', event.target.value)} placeholder="Wpisz osiedle" />
                  </label>

                  <label className="add-field">
                    <span>Ulica <span className="required-star">*</span></span>
                    <input value={location.street} onChange={(event) => updateLocation('street', event.target.value)} placeholder="Wpisz ulicę" />
                  </label>

                  <label className="add-field">
                    <span>Numer budynku <span className="required-star">*</span></span>
                    <input value={location.building} onChange={(event) => updateLocation('building', event.target.value)} placeholder="Nr" />
                  </label>

                  <label className="add-field">
                    <span>Numer lokalu <span className="optional-label">(opcjonalnie)</span></span>
                    <input value={location.unit} onChange={(event) => updateLocation('unit', event.target.value)} placeholder="Nr" />
                  </label>
                </div>

                <label className="add-location-privacy">
                  <input
                    type="checkbox"
                    checked={location.approximateLocation}
                    onChange={(event) => setLocation((current) => ({ ...current, approximateLocation: event.target.checked }))}
                  />
                  <span>
                    <strong>Nie pokazuj dokładnego adresu na mapie</strong>
                    <small>
                      Zamiast punktu kupujący zobaczą przybliżony obszar - koło o promieniu ok. {APPROXIMATE_LOCATION_RADIUS_M} m,
                      a w ogłoszeniu pojawi się tylko dzielnica i miasto. Ulica i numer pozostaną widoczne wyłącznie dla Ciebie i administracji.
                    </small>
                  </span>
                </label>

                <LocationPickerMap
                  center={locationMapCenter}
                  marker={locationCenter}
                  zoom={locationMapZoom}
                  label={[location.street, location.building].filter(Boolean).join(' ') || location.city}
                  approximate={location.approximateLocation}
                  radiusMeters={APPROXIMATE_LOCATION_RADIUS_M}
                  onChange={(center, zoom) => { setLocationMapCenter(center); setLocationMapZoom(zoom); }}
                  onPick={pickLocationPoint}
                />

                <p className="add-location-note">
                  <Icon name="pin" />
                  {locationStatus}
                </p>

                {showLocationError && locationStepError && (
                  <p className="add-field-error add-step-error" role="alert">
                    Uzupełnij wymagane pola, aby przejść do zdjęć: {locationStepError}
                  </p>
                )}

                <div className="add-location-actions">
                  <button className="back-step-button" type="button" onClick={() => goToStep(0)}>
                    Wstecz
                  </button>
                  <button className="next-step-button" type="button" onClick={() => goToStep(2)}>
                    Dalej: Zdjęcia
                    <Icon name="arrow" />
                  </button>
                </div>
              </section>
            )}

            {isPhotosStep && (
              <>
                <section className="add-form-card add-photos-card">
                  <div className="add-card-heading">
                    <h2>Dodaj zdjęcia</h2>
                    <p>Dodaj zdjęcia, które najlepiej prezentują Twoją nieruchomość.</p>
                  </div>

                  <label className="photo-upload-box" onDragOver={(event) => event.preventDefault()} onDrop={handlePhotoDrop}>
                    <input ref={photoInputRef} type="file" accept="image/png,image/jpeg" multiple onChange={handlePhotoInput} />
                    <Icon name="upload" />
                    <strong>Przeciągnij zdjęcia tutaj</strong>
                    <span className="photo-upload-or">lub kliknij, aby wybrać pliki z urządzenia</span>
                    <span>Dodaj do 20 zdjęć w formacie JPG, PNG (max. 10 MB).<br />Sugerowana rozdzielczość: min. 1600 x 1200 px.</span>
                  </label>

                  <p className="photo-tip-note">
                    <Icon name="camera" />
                    <span>
                      <strong>Dobre zdjęcia przyciągają więcej zainteresowanych</strong>
                      <small>Pokaż każde pomieszczenie, zadbaj o dobre oświetlenie i porządek.</small>
                    </span>
                  </p>

                  <div className="added-photos-head">
                    <h3>Dodane zdjęcia ({photos.length}/20)</h3>
                  </div>

                  {photos.length > 0 ? (
                    <div className="added-photos-grid">
                      {photos.map((photo, index) => (
                        <article
                          className={`added-photo ${draggedPhotoId === photo.id ? 'dragging' : ''} ${photoDropTargetId === photo.id && draggedPhotoId !== photo.id ? 'drop-target' : ''}`}
                          draggable
                          key={photo.id}
                          onDragStart={(event) => handlePhotoDragStart(event, photo.id)}
                          onDragEnter={() => setPhotoDropTargetId(photo.id)}
                          onDragOver={(event) => event.preventDefault()}
                          onDragEnd={() => { setDraggedPhotoId(null); setPhotoDropTargetId(null); }}
                          onDrop={(event) => handlePhotoDropOnThumb(event, photo.id)}
                        >
                          <img src={photo.url} alt={photo.name} />
                          {index === 0 && <span className="main-photo-badge">Zdjęcie główne</span>}
                          <button className="remove-photo-button" type="button" aria-label={`Usuń zdjęcie ${photo.name}`} onClick={() => removePhoto(photo.id)}>×</button>
                          <div className="photo-order-controls" aria-label="Zmień kolejność zdjęcia">
                            <button className="prev" type="button" disabled={index === 0} onClick={() => movePhoto(photo.id, -1)} aria-label={`Przesuń zdjęcie ${photo.name} w lewo`}><Icon name="chevron" /></button>
                            <button className="next" type="button" disabled={index === photos.length - 1} onClick={() => movePhoto(photo.id, 1)} aria-label={`Przesuń zdjęcie ${photo.name} w prawo`}><Icon name="chevron" /></button>
                          </div>
                        </article>
                      ))}
                    </div>
                  ) : (
                    <div className="empty-photos-box">
                      <PhotosEmptyIllustration />
                      <strong>Nie dodałeś jeszcze żadnych zdjęć</strong>
                      <small>Pierwsze zdjęcie będzie zdjęciem głównym Twojego ogłoszenia.</small>
                    </div>
                  )}

                  <div className="photo-tour-card" aria-label="Wirtualny spacer 3D">
                    <div className="photo-tour-head">
                      <span className="photo-tour-badge">360°</span>
                      <div>
                        <strong>Wirtualny spacer 3D (opcjonalnie)</strong>
                        <small>Wklej link do spaceru z YouTube 360, Matterport lub Kuula.</small>
                      </div>
                    </div>
                    <label className="add-field full photo-tour-input">
                      <span>Link do spaceru</span>
                      <input
                        type="url"
                        value={extraInfo.virtualTourUrl}
                        onChange={(event) => updateExtraInfo('virtualTourUrl', event.target.value)}
                        placeholder="https://my.matterport.com/show/?m=..."
                      />
                      <small>Po publikacji użytkownik zobaczy interaktywny spacer na karcie ogłoszenia.</small>
                    </label>
                    <div className="photo-tour-actions">
                      <button type="button" className="admin-btn" onClick={handlePreviewVirtualTour}>
                        Testuj spacer
                      </button>
                      <button
                        type="button"
                        className="admin-btn"
                        onClick={() => {
                          setExtraInfo((current) => ({ ...current, virtualTourUrl: '' }));
                          setVirtualTourError('');
                        }}
                        disabled={!extraInfo.virtualTourUrl.trim()}
                      >
                        Wyczyść
                      </button>
                    </div>
                    {virtualTourEmbedPreview && (
                      <p className="photo-tour-provider">Wykryto dostawcę: {virtualTourEmbedPreview.providerLabel}</p>
                    )}
                    {virtualTourError && <p className="photo-tour-error" role="alert">{virtualTourError}</p>}
                  </div>

                  {showPhotosError && photos.length === 0 && (
                    <p className="add-field-error add-step-error" role="alert">
                      Dodaj przynajmniej jedno zdjęcie, aby przejść dalej.
                    </p>
                  )}

                  <div className="add-location-actions photos-actions">
                    <button className="back-step-button" type="button" onClick={() => goToStep(1)}>
                      Wstecz
                    </button>
                    <button className="next-step-button" type="button" onClick={() => goToStep(3)}>
                      Dalej: Dodatkowe informacje
                      <Icon name="arrow" />
                    </button>
                  </div>
                </section>
              </>
            )}

            {isExtraInfoStep && (
              <>
                <section className="add-form-card add-extra-card">
                  {/* Naglowek kroku wewnatrz bialej karty - taki sam styl jak "Dodaj zdjecia"/"Lokalizacja". */}
                  <div className="add-card-heading">
                    <h2>Dodatkowe informacje</h2>
                    <p>Podaj więcej szczegółów, które pomogą wyróżnić Twoje ogłoszenie.</p>
                  </div>

                  <div className="extra-section">
                    <h2>Informacje uzupełniające</h2>
                    <div className="extra-details-grid">
                      {/* Zestaw pol zalezny od kategorii i transakcji - patrz CATEGORY_EXTRA / resolveCategoryExtra. */}
                      {activeExtraFields.map((field) => {
                        const value = extraFieldValue(field);
                        const onChange = (next: string) => setExtraField(field, next);
                        if (field.kind === 'select') {
                          return <AddSelect key={field.key} label={field.label} value={value} options={field.options} onChange={onChange} />;
                        }
                        if (field.kind === 'date') {
                          return <AddInput key={field.key} label={field.label} value={value} type="date" onChange={onChange} />;
                        }
                        return <AddInput key={field.key} label={field.label} value={value} suffix={field.suffix} placeholder={field.placeholder} numeric={field.numeric} onChange={onChange} />;
                      })}
                    </div>
                  </div>

                  <div className="extra-section">
                    <h2>{isRentTransaction ? 'Media i opłaty' : 'Media'}</h2>
                    <div className="extra-option-grid media-option-grid">
                      {visibleMediaOptions.map((option) => (
                        <label className={selectedMedia.includes(option.label) ? 'selected' : ''} key={option.label}>
                          <input type="checkbox" checked={selectedMedia.includes(option.label)} onChange={() => toggleOption(option.label, setSelectedMedia)} />
                          <Icon name={option.icon} />
                          <span>{option.label}</span>
                        </label>
                      ))}
                    </div>

                    {isRentTransaction && mediaBillingEntries.length > 0 && (
                      <div className="media-billing-panel">
                        <h3>Sposób rozliczenia wybranych opłat</h3>
                        <div className="media-billing-grid">
                          {mediaBillingEntries.map((item) => (
                            <label className="media-billing-row" key={item.key}>
                              <span>{item.label}</span>
                              <div className="media-billing-controls">
                                <select
                                  value={extraInfo.mediaBilling[item.key] ?? item.options[0]}
                                  onChange={(event) => updateMediaBilling(item.key, event.target.value)}
                                >
                                  {item.options.map((option) => (
                                    <option key={`${item.key}-${option}`} value={option}>{option}</option>
                                  ))}
                                </select>
                                {billingRequiresAmount(extraInfo.mediaBilling[item.key] ?? item.options[0]) && (
                                  <input
                                    type="text"
                                    inputMode="decimal"
                                    placeholder={(extraInfo.mediaBilling[item.key] ?? item.options[0]).includes('/mies.') ? 'Kwota / mies. (zł)' : 'Kwota (zł)'}
                                    value={extraInfo.mediaBillingAmounts[item.key] ?? ''}
                                    onChange={(event) => updateMediaBillingAmount(item.key, event.target.value)}
                                  />
                                )}
                              </div>
                            </label>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>

                  <div className="extra-section">
                    <h2>Dodatkowe udogodnienia</h2>
                    <div className="extra-option-grid amenities-option-grid">
                      {visibleAmenityOptions.map((option) => (
                        <label className={selectedAmenities.includes(option.label) ? 'selected' : ''} key={option.label}>
                          <input type="checkbox" checked={selectedAmenities.includes(option.label)} onChange={() => toggleOption(option.label, setSelectedAmenities)} />
                          <Icon name={option.icon} />
                          <span>{option.label}</span>
                        </label>
                      ))}
                    </div>

                    {isRentTransaction && amenityBillingEntries.length > 0 && (
                      <div className="media-billing-panel">
                        <h3>Sposób rozliczenia udogodnień</h3>
                        <div className="media-billing-grid">
                          {amenityBillingEntries.map((item) => (
                            <label className="media-billing-row" key={item.key}>
                              <span>{item.label}</span>
                              <div className="media-billing-controls">
                                <select
                                  value={extraInfo.mediaBilling[item.key] ?? item.options[0]}
                                  onChange={(event) => updateMediaBilling(item.key, event.target.value)}
                                >
                                  {item.options.map((option) => (
                                    <option key={`${item.key}-${option}`} value={option}>{option}</option>
                                  ))}
                                </select>
                                {billingRequiresAmount(extraInfo.mediaBilling[item.key] ?? item.options[0]) && (
                                  <input
                                    type="text"
                                    inputMode="decimal"
                                    placeholder={(extraInfo.mediaBilling[item.key] ?? item.options[0]).includes('/mies.') ? 'Kwota / mies. (zł)' : 'Kwota (zł)'}
                                    value={extraInfo.mediaBillingAmounts[item.key] ?? ''}
                                    onChange={(event) => updateMediaBillingAmount(item.key, event.target.value)}
                                  />
                                )}
                              </div>
                            </label>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>

                  <div className="add-location-actions extra-actions">
                    <button className="back-step-button" type="button" onClick={() => goToStep(2)}>
                      Wstecz
                    </button>
                    <button className="next-step-button" type="button" onClick={() => goToStep(4)}>
                      Dalej: Podgląd ogłoszenia
                      <Icon name="arrow" />
                    </button>
                  </div>
                </section>
              </>
            )}

            {isFinalPreviewStep && (
              <>
                <div className="add-title add-step-title">
                  <h1>
                    Tak będzie wyglądać <span className="add-title-accent">Twoje ogłoszenie</span>
                    <svg className="add-title-spark" viewBox="0 0 44 40" fill="none" aria-hidden="true">
                      <path d="M6 27 18 12 M17 31 31 15 M28 32 38 21" />
                    </svg>
                  </h1>
                  <p>Sprawdź wszystkie informacje przed publikacją. Możesz jeszcze wrócić i coś zmienić.</p>
                </div>

                <section className="add-form-card final-preview-card">
                  <div className="final-preview-main">
                    <div className="final-gallery">
                      <span className="free-listing-badge">Ogłoszenie za darmo</span>
                      <div className="final-main-photo" style={{ backgroundImage: `url(${activeFinalImage})` }}>
                        <button type="button" onClick={showPreviousFinalPhoto} aria-label="Poprzednie zdjęcie">‹</button>
                        <button type="button" onClick={showNextFinalPhoto} aria-label="Następne zdjęcie">›</button>
                        <span>{finalGalleryIndex + 1}/{finalGalleryImages.length}</span>
                      </div>
                      <div className="final-thumbnails">
                        {finalGalleryImages.map((image, index) => (
                          <button className={index === finalGalleryIndex ? 'active' : ''} type="button" key={`${image}-${index}`} onClick={() => setFinalGalleryIndex(index)} style={{ backgroundImage: `url(${image})` }} aria-label={`Zdjęcie ${index + 1}${index === 0 ? ', zdjęcie główne' : ''}`}>
                            {index === 0 && <span>Główne</span>}
                          </button>
                        ))}
                      </div>
                    </div>

                    <div className="final-preview-info">
                      <h2>{previewTitle}</h2>
                      <p className="final-location">{previewLocation}</p>
                      <strong>
                        {isRentTransaction ? formattedMonthlyPrice : formattedPrice}{' '}
                        {!isRentTransaction && <small>{formattedPricePerMeter}</small>}
                      </strong>
                      {isRentTransaction && <span className="final-rent-deposit">{formattedDeposit}</span>}
                      <SpecTiles items={previewSpecTiles} className="final-specs" />

                      <div className="final-description-block">
                        <h3>Opis ogłoszenia</h3>
                        {isRichTextEmpty(listingDetails.description) ? (
                          <p>Opisz nieruchomość, jej lokalizację i najważniejsze atuty. Ten tekst pojawi się w pełnym ogłoszeniu.</p>
                        ) : (
                          <SafeHtml className="rich-text" html={listingDetails.description} />
                        )}
                      </div>

                      {hasVirtualTour && (
                        <div className="final-virtual-tour-block">
                          <h3>Wirtualny spacer 3D</h3>
                          <p>
                            {virtualTourEmbedPreview
                              ? `Podgląd osadzony (${virtualTourEmbedPreview.providerLabel}) będzie dostępny po publikacji ogłoszenia.`
                              : 'Link do spaceru zostanie udostępniony jako przycisk „Otwórz wirtualny spacer”.'}
                          </p>
                        </div>
                      )}

                      <div className="final-details-block">
                        <h3>Szczegóły</h3>
                        <dl>
                          {finalDetails.map((detail) => (
                            <div key={detail.label}>
                              <dt>{detail.label}:</dt>
                              <dd>{detail.value === 'Wybierz' ? 'Nie podano' : detail.value}</dd>
                            </div>
                          ))}
                        </dl>
                      </div>
                    </div>
                  </div>

                  <div className="final-features">
                    <h3>Wybrane udogodnienia</h3>
                    <div>
                      {(finalFeatureItems.length ? finalFeatureItems : [{ icon: 'document', label: 'Brak wybranych udogodnień' }]).map((feature) => (
                        <span key={feature.label}><Icon name={feature.icon} /> {feature.label}</span>
                      ))}
                    </div>
                  </div>

                  {publishState === 'success' ? (
                    <div className="publish-success-panel" role="status">
                      <div className="publish-success-icon"><Icon name="check" /></div>
                      <h3>Ogłoszenie zostało wysłane!</h3>
                      <p>
                        Trafiło do moderacji i oczekuje na zatwierdzenie przez administratora. Gdy zostanie
                        zaakceptowane, powiadomimy Cię, a ogłoszenie stanie się widoczne w zakładce{' '}
                        {listingDetails.transaction === 'Wynajem' ? 'Wynajmuję' : 'Kupuję'}. Do tego czasu
                        znajdziesz je w „Moich ogłoszeniach” ze statusem „Oczekuje”.
                      </p>
                      {createdListingId != null && (
                        <button type="button" className="publish-promote-cta" onClick={() => setShowPromoteModal(true)}>
                          <Icon name="spark" /> Wyróżnij to ogłoszenie, aby dotrzeć do większej liczby osób
                        </button>
                      )}
                      <div className="publish-success-actions">
                        <Link className="next-step-button" to={ROUTES.accountListings}>
                          Przejdź do moich ogłoszeń
                          <Icon name="arrow" />
                        </Link>
                        <Link className="back-step-button" to={ROUTES.home}>
                          Wróć do strony głównej
                        </Link>
                      </div>
                      {showPromoteModal && createdListingId != null && (
                        <PromoteModal
                          listingId={createdListingId}
                          listingTitle={listingDetails.title}
                          onClose={() => setShowPromoteModal(false)}
                          onDone={() => setShowPromoteModal(false)}
                        />
                      )}
                    </div>
                  ) : (
                    <>
                      {publishState === 'error' && (
                        <p className="publish-feedback error" role="alert">{publishError}</p>
                      )}
                      {isEdit && (
                        <p className="publish-feedback">
                          Zmiana tytułu, opisu, zdjęć, danych kontaktowych lub wirtualnego spaceru wymaga ponownej
                          akceptacji - do tego czasu ogłoszenie nie będzie widoczne. Cena i parametry zmieniają się od razu.
                        </p>
                      )}
                      <div className="add-location-actions final-actions">
                        <button className="back-step-button" type="button" onClick={() => goToStep(3)}>
                          Wstecz
                        </button>
                        <button
                          className="next-step-button"
                          type="button"
                          onClick={handlePublish}
                          disabled={publishState === 'saving'}
                        >
                          {publishState === 'saving' ? (isEdit ? 'Zapisywanie…' : 'Publikowanie…') : (isEdit ? 'Zapisz zmiany' : 'Opublikuj ogłoszenie')}
                          <Icon name="arrow" />
                        </button>
                      </div>
                    </>
                  )}
                </section>
              </>
            )}
            </div>
          </div>

          <aside className="add-sidebar" aria-label="Podgląd i pomoc">
            {isFinalPreviewStep ? (
              <>
                <section className="add-side-card final-side-card">
                  <h2>Wskazówki</h2>
                  <div className="tips-list">
                    {[
                      { icon: 'camera', title: 'Zwróć uwagę na jakość zdjęć', text: 'Dobre zdjęcia przyciągają uwagę i zwiększają szanse na szybką sprzedaż.' },
                      { icon: 'document', title: 'Napisz dokładny opis', text: 'Szczegółowy opis nieruchomości buduje zaufanie i odpowiada na pytania kupujących.' },
                      { icon: 'shield', title: 'Podaj pełne informacje', text: 'Im więcej istotnych informacji, tym mniej pytań i szybsza decyzja kupującego.' },
                    ].map((tip) => (
                      <article key={tip.title}>
                        <span><Icon name={tip.icon} /></span>
                        <p><strong>{tip.title}</strong><small>{tip.text}</small></p>
                      </article>
                    ))}
                  </div>
                </section>

                <section className="add-side-card final-side-card">
                  <h2>Co dalej?</h2>
                  <div className="tips-list next-list">
                    {[
                      { icon: 'check', title: 'Opublikuj ogłoszenie', text: 'Ogłoszenie pojawi się na liście ofert po akceptacji obsługi.' },
                      { icon: 'message', title: 'Odbieraj wiadomości', text: 'Zainteresowani kupujący skontaktują się z Tobą przez formularz lub telefon.' },
                      { icon: 'gear', title: 'Zarządzaj ogłoszeniem', text: 'W każdej chwili możesz edytować lub usunąć swoje ogłoszenie.' },
                    ].map((tip) => (
                      <article key={tip.title}>
                        <span><Icon name={tip.icon} /></span>
                        <p><strong>{tip.title}</strong><small>{tip.text}</small></p>
                      </article>
                    ))}
                  </div>
                </section>

                <section className="free-publish-card">
                  <span><Icon name="shield" /></span>
                  <p><strong>Ogłoszenie za darmo</strong><small>Dodajesz ogłoszenie całkowicie za darmo. Bez ukrytych opłat i prowizji.</small></p>
                </section>
              </>
            ) : (
              <>
            <section className="listing-preview-card">
              <h2>Podgląd ogłoszenia</h2>
              <div
                className="preview-image photos-preview-image"
                style={{
                  backgroundImage: `url(${mainPhoto?.url ?? heroImage})`,
                  backgroundPosition: mainPhoto ? 'center' : undefined,
                  backgroundSize: mainPhoto ? 'cover' : undefined,
                }}
              >
                <span><Icon name="camera" /> {Math.max(photos.length, 1)}/20</span>
              </div>
              <div className="preview-body">
                <p>{previewTitle}</p>
                <strong>
                  {isRentTransaction ? formattedMonthlyPrice : formattedPrice}{' '}
                  {!isRentTransaction && <small>{formattedPricePerMeter}</small>}
                </strong>
                {isRentTransaction && <span className="preview-rent-deposit">{formattedDeposit}</span>}
                {/* Podglad wyglada tak samo na kazdym kroku kreatora - kafelki (ikona/wartosc/podpis)
                    plus lokalizacja i ewentualne dodatkowe cechy. */}
                <span className="preview-loc"><Icon name="pin" /> {previewLocation}</span>
                <SpecTiles items={previewSpecTiles} className="preview-specs" />
                {previewExtraChips.length > 0 && (
                  <div className="preview-chip-row">
                    {previewExtraChips.map((item) => (
                      <span key={item.label}><Icon name={item.icon} /> {item.label}</span>
                    ))}
                  </div>
                )}
              </div>
            </section>

            <section className="add-side-card">
              <h2>Wskazówki</h2>
              <div className="tips-list">
                {(isPhotosStep ? [
                  { icon: 'camera', title: 'Dodaj zdjęcia wszystkich pomieszczeń', text: 'Pokaż salon, kuchnię, sypialnię, łazienkę i balkon.' },
                  { icon: 'spark', title: 'Pokaż nieruchomość w jasnym świetle', text: 'Najlepiej fotografuj w dzień, przy naturalnym świetle.' },
                  { icon: 'shield', title: 'Zrób zdjęcia w porządku', text: 'Usuń zbędne rzeczy i pokaż czystą, uporządkowaną przestrzeń.' },
                  { icon: 'star', title: 'Pierwsze zdjęcie będzie zdjęciem głównym', text: 'Wybierz najlepsze ujęcie, bo pojawi się jako miniatura ogłoszenia.' },
                ] : isExtraInfoStep ? extraInfoTips : listingTips).map((tip) => (
                  <article key={tip.title}>
                    <span>
                      <Icon name={tip.icon} />
                    </span>
                    <p>
                      <strong>{tip.title}</strong>
                      <small>{tip.text}</small>
                    </p>
                  </article>
                ))}
              </div>
            </section>

            <section className="add-side-card help-card">
              <h2>Potrzebujesz pomocy?</h2>
              <p>Skontaktuj się z nami, chętnie pomożemy.</p>
              <div>
                <span><Icon name="phone" /></span>
                <p>
                  <a href={SUPPORT_PHONE_HREF}>{SUPPORT_PHONE}</a>
                  <small>Pon. - Pt. 9:00 - 17:00</small>
                </p>
              </div>
              <div>
                <span><Icon name="mail" /></span>
                <p>
                  <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a>
                  <small>Odpowiadamy w ciągu 24h</small>
                </p>
              </div>
              <Link className="help-card-faq" to={ROUTES.accountHelpContact}>Najczęściej zadawane pytania <Icon name="arrow" /></Link>
            </section>
              </>
            )}
          </aside>
        </div>

        {!isFinalPreviewStep && <section className="add-footer-benefits">
          <h2>Dlaczego warto dodać ogłoszenie na polskalokalnie.pl?</h2>
          <div>
            {addFooterBenefits.map((benefit) => (
              <article key={benefit.title}>
                <span>
                  <Icon name={benefit.icon} />
                </span>
                <p>
                  <strong>{benefit.title}</strong>
                  <small>{benefit.text}</small>
                </p>
              </article>
            ))}
          </div>
        </section>}
          </>
        )}
      </div>
    </section>
  );
}

const buyingProcessSteps = [
  { icon: 'search', title: 'Analiza potrzeb i możliwości', text: 'Określ, po co kupujesz i na co Cię stać.' },
  { icon: 'calculator', title: 'Określenie budżetu', text: 'Policz cenę plus wszystkie koszty dodatkowe.' },
  { icon: 'chart', title: 'Sprawdzenie zdolności', text: 'Zbadaj zdolność kredytową w kilku bankach.' },
  { icon: 'pin', title: 'Wybór i analiza lokalizacji', text: 'Sprawdź okolicę, dojazdy i plany zagospodarowania.' },
  { icon: 'eye', title: 'Oglądanie mieszkań', text: 'Odwiedź kilka ofert i porównaj je na spokojnie.' },
  { icon: 'group', title: 'Negocjacja ceny', text: 'Ustal realną wartość i wynegocjuj warunki.' },
  { icon: 'calendar', title: 'Rezerwacja mieszkania', text: 'Zabezpiecz ofertę umową rezerwacyjną.' },
  { icon: 'document', title: 'Umowa przedwstępna', text: 'Spisz warunki i terminy u notariusza lub cywilnie.' },
  { icon: 'building', title: 'Kredyt hipoteczny', text: 'Złóż wnioski i wybierz najlepszą ofertę.' },
  { icon: 'scale', title: 'Akt notarialny', text: 'Podpisz umowę przenoszącą własność.' },
  { icon: 'key', title: 'Odbiór mieszkania', text: 'Sprawdź stan techniczny i spisz protokół.' },
  { icon: 'house', title: 'Zameldowanie i formalności', text: 'Przepisz media, ubezpiecz i zamelduj się.' },
];

const buyingToc = [
  { id: 'start', label: 'Od czego zacząć?' },
  { id: 'budzet', label: 'Jak określić budżet?' },
  { id: 'gotowka-kredyt', label: 'Gotówka czy kredyt?' },
  { id: 'zdolnosc', label: 'Zdolność kredytowa' },
  { id: 'rynek', label: 'Rynek pierwotny czy wtórny?' },
  { id: 'lokalizacja', label: 'Wybór lokalizacji' },
  { id: 'ogladanie', label: 'Jak oglądać mieszkanie?' },
  { id: 'stan-techniczny', label: 'Stan techniczny' },
  { id: 'ksiega-wieczysta', label: 'Księga wieczysta' },
  { id: 'negocjacje', label: 'Negocjacja ceny' },
  { id: 'umowa-przedwstepna', label: 'Umowa przedwstępna' },
  { id: 'akt-notarialny', label: 'Akt notarialny' },
  { id: 'odbior', label: 'Odbiór mieszkania' },
  { id: 'klucze', label: 'Przekazanie kluczy' },
  { id: 'bledy', label: 'Najczęstsze błędy' },
  { id: 'faq', label: 'FAQ' },
  { id: 'podsumowanie', label: 'Podsumowanie' },
];

const buyingCostRows = [
  { name: 'Wkład własny', who: 'Kupujący', value: 'zwykle 10-20% ceny', note: 'Im wyższy, tym niższa rata i lepsze warunki kredytu.' },
  { name: 'Podatek PCC (rynek wtórny)', who: 'Kupujący', value: '2% wartości', note: 'Zakup pierwszego mieszkania bywa zwolniony z PCC.' },
  { name: 'Taksa notarialna', who: 'Kupujący', value: 'zależna od ceny', note: 'Stawki maksymalne są ustalone rozporządzeniem, do negocjacji.' },
  { name: 'Wpis do księgi wieczystej', who: 'Kupujący', value: '200 zł + 200 zł', note: 'Wpis własności oraz ewentualnej hipoteki.' },
  { name: 'Prowizja pośrednika', who: 'Zależnie od umowy', value: 'zwykle 1-3%', note: 'Tylko jeśli korzystasz z biura nieruchomości.' },
  { name: 'Koszty kredytu', who: 'Kredytobiorca', value: 'prowizja, wycena, ubezpieczenia', note: 'Doliczane do finansowania zakupu z banku.' },
];

const buyingChecklist = [
  'Przeczytaj aktualny odpis z księgi wieczystej i sprawdź dział III i IV.',
  'Poproś o zaświadczenie o braku zaległości w czynszu i mediach.',
  'Sprawdź, kto figuruje jako właściciel i czy zgadza się ze sprzedającym.',
  'Zapytaj o zaległości i plany remontowe wspólnoty lub spółdzielni.',
  'Obejrzyj mieszkanie za dnia i wieczorem, sprawdź nasłonecznienie.',
  'Skontroluj instalacje: prąd, wodę, ogrzewanie, wentylację i wilgoć.',
  'Ustal, co dokładnie wchodzi w cenę (meble, kuchnia, miejsce postojowe).',
  'Zweryfikuj wysokość czynszu administracyjnego i co obejmuje.',
  'Sprawdź plan zagospodarowania i co może powstać w okolicy.',
  'Policz pełny koszt zakupu z podatkami i kredytem, nie tylko cenę.',
];

const buyingMistakes = [
  { title: 'Liczenie tylko ceny mieszkania', text: 'Pomijanie podatków, taksy notarialnej, kosztów kredytu i wykończenia potrafi podnieść budżet o kilkanaście procent.' },
  { title: 'Pominięcie księgi wieczystej', text: 'Brak sprawdzenia działu III i IV grozi zakupem mieszkania z hipoteką, służebnością lub roszczeniem osoby trzeciej.' },
  { title: 'Zakup pod wpływem emocji', text: 'Decyzja po jednym oglądaniu i „bo ktoś inny też jest zainteresowany” to najczęstsza droga do przepłacenia.' },
  { title: 'Brak zapasu w budżecie', text: 'Kredyt na maksimum zdolności nie zostawia poduszki na wzrost rat, remont czy nagłe wydatki.' },
  { title: 'Zaliczka zamiast zadatku', text: 'Przy zaliczce, jeśli druga strona się wycofa, trudniej dochodzić rekompensaty niż przy zadatku.' },
  { title: 'Zignorowanie stanu technicznego', text: 'Ukryta wilgoć, zła instalacja elektryczna czy stare piony to koszty, które ujawniają się dopiero po zakupie.' },
];

const buyingFaq = [
  {
    q: 'Ile własnych pieniędzy potrzebuję na start?',
    a: 'Do kredytu banki oczekują zwykle wkładu własnego na poziomie 10-20% ceny. Do tego dochodzą koszty transakcyjne: podatek, taksa notarialna, wpisy do księgi wieczystej i ewentualna prowizja pośrednika. Bezpiecznie jest założyć, że oprócz wkładu własnego potrzebujesz jeszcze kilku procent ceny na same formalności.',
  },
  {
    q: 'Czy lepiej kupić od dewelopera czy z rynku wtórnego?',
    a: 'To zależy od Twoich priorytetów. Nowe mieszkanie od dewelopera bywa energooszczędne i objęte gwarancją, ale często wymaga wykończenia i czekania na odbiór. Rynek wtórny to gotowe do zamieszkania lokale w ukształtowanych dzielnicach, za to trzeba dokładniej sprawdzić stan techniczny i stan prawny.',
  },
  {
    q: 'Czy przy zakupie pierwszego mieszkania zapłacę podatek PCC?',
    a: 'Przy zakupie z rynku wtórnego standardowo obowiązuje podatek 2% od wartości. Dla osób kupujących swoje pierwsze mieszkanie lub dom przewidziano jednak zwolnienie z tego podatku. Zawsze potwierdź aktualne warunki u notariusza, bo to on nalicza i odprowadza PCC.',
  },
  {
    q: 'Jak długo trwa cały proces zakupu?',
    a: 'Zakup za gotówkę można sfinalizować nawet w kilka tygodni. Z kredytem hipotecznym realny czas to zwykle 1,5-3 miesiące, bo dochodzi analiza wniosku, wycena nieruchomości i decyzja banku. Warto ten czas uwzględnić w umowie przedwstępnej.',
  },
  {
    q: 'Co daje umowa przedwstępna?',
    a: 'Zabezpiecza obie strony: ustala cenę, termin i warunki finalnej transakcji. Najczęściej towarzyszy jej zadatek. Jeśli od umowy odstąpi kupujący, traci zadatek; jeśli sprzedający, zwraca go w podwójnej wysokości. To silniejsze zabezpieczenie niż zwykła zaliczka.',
  },
  {
    q: 'Czy muszę korzystać z pośrednika?',
    a: 'Nie ma takiego obowiązku. Dobry pośrednik oszczędza czas i pomaga w formalnościach, ale pobiera prowizję. Jeśli kupujesz samodzielnie, tym bardziej zadbaj o weryfikację stanu prawnego i technicznego oraz o dobrze napisane umowy.',
  },
];

async function downloadBuyingChecklistPdf() {
  const unwrapModuleDefault = <T,>(module: T | { default: T }): T =>
    'default' in Object(module) ? (module as { default: T }).default : (module as T);
  const downloadBlob = (blob: Blob, fileName: string) => {
    const objectUrl = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = objectUrl;
    link.download = fileName;
    link.rel = 'noopener';
    document.body.appendChild(link);
    link.click();
    link.remove();
    window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
  };

  type PdfMakeRuntime = {
    addFontContainer: (fontContainer: unknown) => void;
    createPdf: (definition: unknown) => { getBlob: () => Promise<Blob> };
  };

  let pdfMake: PdfMakeRuntime;
  try {
    const pdfMakeModule = await import('pdfmake/build/pdfmake.js');
    const robotoFontModule = await import('pdfmake/build/fonts/Roboto.js');
    pdfMake = unwrapModuleDefault(pdfMakeModule as unknown as PdfMakeRuntime | { default: PdfMakeRuntime });
    pdfMake.addFontContainer(unwrapModuleDefault(robotoFontModule as unknown as { default: unknown }));
  } catch (error) {
    console.error('Nie udało się załadować generatora PDF', error);
    window.alert('Nie udało się przygotować pliku PDF. Odśwież stronę i spróbuj ponownie.');
    return;
  }

  const docDefinition = {
    pageSize: 'A4',
    pageMargins: [48, 48, 48, 48],
    defaultStyle: { font: 'Roboto', color: '#14223a', fontSize: 11, lineHeight: 1.35 },
    content: [
      { text: 'Polska Lokalnie', color: '#0b9f5c', fontSize: 12, bold: true, margin: [0, 0, 0, 2] },
      { text: 'Lista kontrolna przy zakupie mieszkania', fontSize: 20, bold: true, margin: [0, 0, 0, 4] },
      { text: '10 rzeczy, które warto sprawdzić przed podpisaniem umowy', color: '#526171', margin: [0, 0, 0, 18] },
      {
        ol: buyingChecklist.map((item) => ({ text: item, margin: [0, 0, 0, 6] })),
      },
      {
        text: 'Materiał informacyjny. Nie stanowi porady prawnej ani podatkowej - w razie wątpliwości skonsultuj się z notariuszem lub doradcą.',
        color: '#8793a3',
        fontSize: 9,
        margin: [0, 22, 0, 0],
      },
    ],
  };

  try {
    const blob = await pdfMake.createPdf(docDefinition).getBlob();
    downloadBlob(blob, 'lista-kontrolna-zakup-mieszkania.pdf');
  } catch (error) {
    console.error('Nie udało się wygenerować PDF', error);
    window.alert('Nie udało się wygenerować pliku PDF. Spróbuj ponownie.');
  }
}

function GuideBuyingPage() {
  const navigate = useNavigate();
  const scrollToId = (id: string) => {
    const target = document.getElementById(id);
    if (target) {
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  return (
    <section className="guide-article" aria-label="Poradnik: kupno mieszkania">
      <header className="guide-hero">
        <img src={heroImage} alt="" />
        <div className="guide-hero-shade" />
        <div className="guides-container guide-hero-inner">
          <Link className="guide-back" to={ROUTES.guides}>
            <Icon name="arrow" />
            <span>Wróć do poradników</span>
          </Link>
          <span className="guide-hero-badge">
            <Icon name="house" />
            Kupno mieszkania
          </span>
          <h1>Jak kupić mieszkanie krok po kroku</h1>
          <p className="guide-hero-lead">
            Kompletny, uczciwy przewodnik po całym procesie zakupu - od pierwszej decyzji, przez budżet,
            kredyt i formalności, aż po odbiór kluczy. Prostym językiem, z listami kontrolnymi i praktycznymi
            wskazówkami, które pomogą Ci uniknąć najczęstszych błędów.
          </p>
          <div className="guide-hero-chips">
            <span><Icon name="check" /> Aktualna wiedza na 2026 rok</span>
            <span><Icon name="shield" /> Oparte na sprawdzonych zasadach</span>
            <span><Icon name="list" /> Listy kontrolne i PDF</span>
            <span><Icon name="calculator" /> Kalkulatory kosztów</span>
          </div>
        </div>
      </header>

      <div className="guides-container guide-article-layout">
        <aside className="guide-toc" aria-label="Spis treści">
          <div className="guide-toc-inner">
            <h2>Spis treści</h2>
            <ol>
              {buyingToc.map((item, index) => (
                <li key={item.id}>
                  <button onClick={() => scrollToId(item.id)}>
                    <span>{index + 1}</span>
                    {item.label}
                  </button>
                </li>
              ))}
            </ol>
          </div>
        </aside>

        <div className="guide-body">
          <section className="guide-process" aria-label="Proces zakupu w 12 krokach">
            <div className="guide-block-head">
              <h2>Proces zakupu mieszkania w 12 krokach</h2>
              <p>Cała droga w skrócie. Poniżej rozwijamy każdy etap dokładnie.</p>
            </div>
            <div className="guide-process-grid">
              {buyingProcessSteps.map((step, index) => (
                <article key={step.title} className="guide-process-card">
                  <span className="guide-process-num">{index + 1}</span>
                  <span className="guide-process-icon"><Icon name={step.icon} /></span>
                  <strong>{step.title}</strong>
                  <small>{step.text}</small>
                </article>
              ))}
            </div>
          </section>

          <article className="guide-chapter" id="start">
            <span className="guide-chapter-index">01</span>
            <h2>Od czego zacząć zakup mieszkania?</h2>
            <p>
              Zanim zaczniesz przeglądać oferty, odpowiedz sobie na kilka pytań. To one, a nie ładne zdjęcia,
              zdecydują o trafności zakupu. Ustal, czy kupujesz dla siebie, dla rodziny, czy pod inwestycję,
              jak długo planujesz tu mieszkać i co jest dla Ciebie nienegocjowalne - metraż, liczba pokoi,
              piętro, winda, balkon czy miejsce postojowe.
            </p>
            <p>
              Rozdziel potrzeby od zachcianek. Potrzeba to np. druga sypialnia przy powiększającej się rodzinie.
              Zachcianka to konkretny kolor kuchni, który i tak zmienisz. Im lepiej rozpoznasz swoje realne potrzeby,
              tym mniej ofert będziesz musiał obejrzeć i tym rzadziej dasz się ponieść emocjom.
            </p>
            <div className="guide-callout guide-callout-tip">
              <Icon name="spark" />
              <div>
                <strong>Wskazówka</strong>
                <p>Wypisz na kartce trzy kryteria, których nie odpuścisz, i trzy, które są mile widziane. Wracaj do tej listy przy każdym oglądaniu - to najprostsza ochrona przed impulsywną decyzją.</p>
              </div>
            </div>
          </article>

          <article className="guide-chapter" id="budzet">
            <span className="guide-chapter-index">02</span>
            <h2>Jak określić budżet?</h2>
            <p>
              Budżet to nie tylko cena mieszkania. To cena powiększona o wszystkie koszty transakcyjne oraz o to,
              co wydasz zaraz po zakupie. Zsumuj cenę, podatki, taksę notarialną, wpisy do księgi wieczystej,
              ewentualną prowizję pośrednika i koszty kredytu. Dopiero ta kwota pokazuje, na co naprawdę Cię stać.
            </p>
            <div className="guide-table-wrap">
              <table className="guide-table">
                <thead>
                  <tr>
                    <th>Koszt</th>
                    <th>Kto ponosi</th>
                    <th>Ile (orientacyjnie)</th>
                    <th>Uwagi</th>
                  </tr>
                </thead>
                <tbody>
                  {buyingCostRows.map((row) => (
                    <tr key={row.name}>
                      <td data-label="Koszt"><strong>{row.name}</strong></td>
                      <td data-label="Kto ponosi">{row.who}</td>
                      <td data-label="Ile">{row.value}</td>
                      <td data-label="Uwagi">{row.note}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <div className="guide-callout guide-callout-warn">
              <Icon name="warning" />
              <div>
                <strong>Zostaw zapas</strong>
                <p>Nie planuj zakupu na granicy możliwości. Poduszka finansowa na kilka rat, drobny remont i nieprzewidziane wydatki to nie luksus, tylko element bezpiecznego budżetu.</p>
              </div>
            </div>
          </article>

          <article className="guide-chapter" id="gotowka-kredyt">
            <span className="guide-chapter-index">03</span>
            <h2>Gotówka czy kredyt hipoteczny?</h2>
            <p>
              Zakup za gotówkę jest szybszy, prostszy i pozwala mocniej negocjować, bo sprzedający nie czeka na
              decyzję banku. Nie zawsze jednak warto zamrażać wszystkie oszczędności w jednej nieruchomości -
              tracisz płynność i poduszkę bezpieczeństwa.
            </p>
            <p>
              Kredyt hipoteczny rozkłada koszt w czasie i pozwala kupić wcześniej, ale oznacza wieloletnie
              zobowiązanie, odsetki i zależność od zmian stóp procentowych. Zanim zdecydujesz, porównaj oferty
              kilku banków i policz całkowity koszt kredytu, a nie tylko wysokość raty.
            </p>
            <div className="guide-two-col">
              <div className="guide-pro">
                <h4><Icon name="check" /> Gotówka</h4>
                <ul>
                  <li>Szybka i prosta transakcja</li>
                  <li>Silniejsza pozycja w negocjacjach</li>
                  <li>Brak odsetek i rat</li>
                  <li>Uwaga: mniejsza płynność finansowa</li>
                </ul>
              </div>
              <div className="guide-con">
                <h4><Icon name="credit-card" /> Kredyt hipoteczny</h4>
                <ul>
                  <li>Kupujesz, nie mając całej kwoty</li>
                  <li>Oszczędności zostają jako rezerwa</li>
                  <li>Uwaga: całkowity koszt rośnie o odsetki</li>
                  <li>Uwaga: wieloletnie zobowiązanie</li>
                </ul>
              </div>
            </div>
          </article>

          <article className="guide-chapter" id="zdolnosc">
            <span className="guide-chapter-index">04</span>
            <h2>Jak obliczyć zdolność kredytową?</h2>
            <p>
              Zdolność kredytowa to maksymalna kwota, jaką bank jest gotów Ci pożyczyć. Wpływają na nią głównie:
              wysokość i stabilność dochodów, forma zatrudnienia, liczba osób na utrzymaniu, inne zobowiązania
              (raty, karty, limity) oraz historia w BIK. Banki liczą też bufor na wypadek wzrostu stóp, dlatego
              maksymalna kwota bywa niższa, niż wynikałoby z samej raty.
            </p>
            <p>
              Każdy bank liczy zdolność inaczej, więc warto sprawdzić kilka ofert - różnice bywają znaczne.
              Zanim złożysz wnioski, uporządkuj finanse: spłać drobne zobowiązania, zamknij nieużywane karty
              i limity, zadbaj o pozytywną historię kredytową. To realnie podnosi zdolność.
            </p>
            <div className="guide-callout guide-callout-tip">
              <Icon name="calculator" />
              <div>
                <strong>Policz orientacyjnie</strong>
                <p>Skorzystaj z naszych kalkulatorów po prawej stronie, aby oszacować budżet i porównać koszty. Ostateczną zdolność zawsze potwierdza bank na podstawie dokumentów.</p>
              </div>
            </div>
          </article>

          <article className="guide-chapter" id="rynek">
            <span className="guide-chapter-index">05</span>
            <h2>Rynek pierwotny czy wtórny?</h2>
            <p>
              Rynek pierwotny to zakup od dewelopera - najczęściej nowe, energooszczędne mieszkanie, często jeszcze
              w budowie i do wykończenia. Rynek wtórny to zakup od dotychczasowego właściciela - zwykle mieszkanie
              gotowe do zamieszkania, w ukształtowanej okolicy. Oba mają swoje zalety; wybór zależy od tego, czy
              wolisz nowe i „pod siebie”, czy gotowe i sprawdzone.
            </p>
            <div className="guide-two-col">
              <div className="guide-market">
                <h4><Icon name="building" /> Rynek pierwotny</h4>
                <ul>
                  <li>Nowy standard i niższe koszty eksploatacji</li>
                  <li>Możliwość aranżacji od podstaw</li>
                  <li>Gwarancja i rękojmia dewelopera</li>
                  <li>Uwaga: często konieczne wykończenie i czekanie na odbiór</li>
                </ul>
              </div>
              <div className="guide-market">
                <h4><Icon name="house" /> Rynek wtórny</h4>
                <ul>
                  <li>Gotowe do zamieszkania od zaraz</li>
                  <li>Sprawdzona lokalizacja i sąsiedztwo</li>
                  <li>Możliwość zobaczenia realnego stanu</li>
                  <li>Uwaga: dokładniej sprawdź stan techniczny i prawny</li>
                </ul>
              </div>
            </div>
          </article>

          <article className="guide-chapter" id="lokalizacja">
            <span className="guide-chapter-index">06</span>
            <h2>Jak wybrać lokalizację?</h2>
            <p>
              Lokalizacji nie zmienisz remontem, dlatego to jedno z najważniejszych kryteriów. Sprawdź dojazd do
              pracy i szkoły, dostęp do komunikacji, sklepów, przychodni i terenów zielonych. Odwiedź okolicę o
              różnych porach dnia - rano, po południu i wieczorem - żeby poznać hałas, ruch i realny klimat miejsca.
            </p>
            <p>
              Zajrzyj do miejscowego planu zagospodarowania przestrzennego, żeby wiedzieć, co może powstać w
              sąsiedztwie - park czy ruchliwa droga to duża różnica dla komfortu i przyszłej wartości. Zwróć uwagę
              na kierunki świata i nasłonecznienie oraz na to, czy okolica się rozwija, czy raczej podupada.
            </p>
          </article>

          <article className="guide-chapter" id="ogladanie">
            <span className="guide-chapter-index">07</span>
            <h2>Jak oglądać mieszkanie?</h2>
            <p>
              Nie kupuj po jednym oglądaniu i nie oglądaj tylko przy pełnym słońcu. Przyjdź kilka razy, także
              wieczorem, i nie bój się zadawać pytań: o wysokość czynszu i co obejmuje, o koszty ogrzewania, o wiek
              instalacji, o plany remontowe budynku i o powód sprzedaży. Rób zdjęcia i notatki, bo po obejrzeniu
              kilku ofert łatwo je pomylić.
            </p>
            <p>
              Zwróć uwagę na to, czego nie widać na pierwszy rzut oka: ślady wilgoci w narożnikach i pod oknami,
              stan okien i drzwi, ciśnienie wody, działanie wentylacji, wygłuszenie między mieszkaniami. Sprawdź też
              części wspólne - klatkę, windę, piwnicę i otoczenie budynku mówią wiele o tym, jak zarządzana jest
              nieruchomość.
            </p>
          </article>

          <article className="guide-chapter" id="stan-techniczny">
            <span className="guide-chapter-index">08</span>
            <h2>Jak sprawdzić stan techniczny?</h2>
            <p>
              Stan techniczny decyduje o tym, ile dołożysz po zakupie. Najważniejsze punkty to instalacja
              elektryczna (czy jest bezpieczna i o odpowiedniej mocy), instalacja wodno-kanalizacyjna i piony,
              ogrzewanie, wentylacja oraz izolacja i ślady wilgoci lub grzyba. W starszych budynkach zwróć uwagę na
              wiek instalacji i okien - ich wymiana bywa kosztowna.
            </p>
            <div className="guide-callout guide-callout-tip">
              <Icon name="hammer" />
              <div>
                <strong>Rozważ fachowca</strong>
                <p>Przy droższym zakupie lub starszym mieszkaniu warto zabrać na oględziny osobę znającą się na budownictwie. Koszt takiej konsultacji jest niewielki wobec potencjalnych ukrytych wad.</p>
              </div>
            </div>
          </article>

          <article className="guide-chapter" id="ksiega-wieczysta">
            <span className="guide-chapter-index">09</span>
            <h2>Jak sprawdzić księgę wieczystą?</h2>
            <p>
              Księga wieczysta to dokument, który pokazuje stan prawny nieruchomości. Odpis możesz sprawdzić online,
              znając numer księgi. Zwróć uwagę na cztery działy: oznaczenie nieruchomości, właściciela, prawa i
              ograniczenia oraz hipoteki. To podstawowa ochrona przed zakupem mieszkania z niespodziankami.
            </p>
            <ul className="guide-list">
              <li><strong>Dział I</strong> - co to za nieruchomość: adres, metraż, pomieszczenia przynależne.</li>
              <li><strong>Dział II</strong> - kto jest właścicielem. Musi zgadzać się z osobą sprzedającą.</li>
              <li><strong>Dział III</strong> - prawa, ograniczenia, służebności i roszczenia osób trzecich.</li>
              <li><strong>Dział IV</strong> - hipoteki. Jeśli jest, ustal z bankiem i notariuszem sposób jej wykreślenia.</li>
            </ul>
            <div className="guide-callout guide-callout-warn">
              <Icon name="shield" />
              <div>
                <strong>Nie pomijaj tego kroku</strong>
                <p>Wpis obciążający nieruchomość może przejść na Ciebie razem z zakupem. Sprawdzenie księgi to kilka minut, a chroni przed poważnymi problemami.</p>
              </div>
            </div>
          </article>

          <article className="guide-chapter" id="negocjacje">
            <span className="guide-chapter-index">10</span>
            <h2>Jak negocjować cenę?</h2>
            <p>
              Negocjacje zacznij od wiedzy. Sprawdź ceny podobnych mieszkań w okolicy, zobacz, jak długo oferta jest
              wystawiona i poznaj sytuację sprzedającego. Argumentem nie są emocje, tylko fakty: konieczne remonty,
              stan instalacji, wysoki czynsz czy niższe ceny porównywalnych lokali.
            </p>
            <p>
              Bądź konkretny i spokojny. Podaj kwotę, którą jesteś gotów zapłacić, wraz z uzasadnieniem, i miej
              wyznaczoną granicę, powyżej której rezygnujesz. Gotowość do szybkiej, pewnej transakcji - zwłaszcza za
              gotówkę - to często silniejszy argument niż sama presja na obniżkę.
            </p>
          </article>

          <article className="guide-chapter" id="umowa-przedwstepna">
            <span className="guide-chapter-index">11</span>
            <h2>Umowa przedwstępna</h2>
            <p>
              Umowa przedwstępna zabezpiecza ustalenia, zanim dojdzie do finalnej transakcji. Określa cenę, termin
              zawarcia umowy właściwej, stan mieszkania i warunki, np. uzyskanie kredytu. Można ją zawrzeć zwykłą
              formą pisemną lub u notariusza - forma notarialna daje silniejszą ochronę.
            </p>
            <div className="guide-callout guide-callout-info">
              <Icon name="document" />
              <div>
                <strong>Zadatek a zaliczka</strong>
                <p>Zadatek działa dyscyplinująco: jeśli od umowy odstąpi kupujący, traci zadatek; jeśli sprzedający - zwraca go w podwójnej wysokości. Zaliczka jest po prostu zwracana. Dla bezpieczeństwa transakcji częściej stosuje się zadatek.</p>
              </div>
            </div>
          </article>

          <article className="guide-chapter" id="akt-notarialny">
            <span className="guide-chapter-index">12</span>
            <h2>Akt notarialny</h2>
            <p>
              Przeniesienie własności mieszkania musi mieć formę aktu notarialnego. To notariusz sprawdza tożsamość
              stron, stan prawny nieruchomości i treść umowy, a następnie składa wniosek o wpis nowego właściciela do
              księgi wieczystej. Przy akcie płacisz taksę notarialną, podatek oraz opłaty sądowe.
            </p>
            <p>
              Przed podpisaniem dokładnie przeczytaj projekt aktu - ceny, terminy, sposób i datę wydania mieszkania,
              zapisy o zadatku i o wykreśleniu ewentualnej hipoteki. Jeśli czegoś nie rozumiesz, pytaj notariusza.
              To jego rola, żeby wyjaśnić Ci każdy zapis.
            </p>
          </article>

          <article className="guide-chapter" id="odbior">
            <span className="guide-chapter-index">13</span>
            <h2>Odbiór mieszkania</h2>
            <p>
              Odbiór to moment sprawdzenia, czy dostajesz mieszkanie w umówionym stanie. Spisz protokół zdawczo-odbiorczy:
              stany liczników (prąd, woda, gaz, ciepło), liczbę kluczy i pilotów oraz to, co zostaje w mieszkaniu.
              Przy nowym lokalu od dewelopera dokładnie sprawdź jakość wykończenia i zgłoś wszystkie usterki w protokole.
            </p>
            <div className="guide-callout guide-callout-tip">
              <Icon name="list" />
              <div>
                <strong>Wszystko na piśmie</strong>
                <p>Każdą usterkę i każdy stan licznika zapisz w protokole podpisanym przez obie strony. To Twój dowód na wypadek późniejszych rozliczeń i reklamacji.</p>
              </div>
            </div>
          </article>

          <article className="guide-chapter" id="klucze">
            <span className="guide-chapter-index">14</span>
            <h2>Przekazanie kluczy i formalności po zakupie</h2>
            <p>
              Po odbiorze zostają formalności, o których łatwo zapomnieć w euforii. Przepisz na siebie umowy na prąd,
              gaz, wodę i internet, zgłoś zmianę właściciela do wspólnoty lub spółdzielni, rozważ ubezpieczenie
              mieszkania i zamelduj się pod nowym adresem. Zachowaj wszystkie dokumenty zakupu w jednym miejscu.
            </p>
            <ul className="guide-list">
              <li>Przepisanie liczników i umów z dostawcami mediów.</li>
              <li>Zgłoszenie nowego właściciela do zarządcy budynku.</li>
              <li>Ubezpieczenie nieruchomości (a przy kredycie - często wymagane).</li>
              <li>Zameldowanie oraz aktualizacja adresu w ważnych instytucjach.</li>
            </ul>
          </article>

          <section className="guide-checklist" id="checklista">
            <div className="guide-block-head">
              <h2>Checklista - 10 rzeczy do sprawdzenia przed zakupem</h2>
              <p>Wydrukuj lub pobierz w PDF i miej przy sobie podczas oglądania.</p>
            </div>
            <div className="guide-checklist-grid">
              {buyingChecklist.map((item, index) => (
                <label className="guide-checklist-item" key={index}>
                  <input type="checkbox" />
                  <span className="guide-check-box"><Icon name="check" /></span>
                  <span>{item}</span>
                </label>
              ))}
            </div>
            <button className="guide-download-btn" onClick={downloadBuyingChecklistPdf}>
              <Icon name="document" />
              Pobierz listę kontrolną (PDF)
            </button>
          </section>

          <GuideAdBanner />

          <article className="guide-chapter" id="bledy">
            <span className="guide-chapter-index">15</span>
            <h2>Najczęstsze błędy kupujących</h2>
            <p>Większości kosztownych pomyłek da się uniknąć, jeśli wie się, gdzie najczęściej się pojawiają.</p>
            <div className="guide-mistakes">
              {buyingMistakes.map((mistake) => (
                <article key={mistake.title} className="guide-mistake">
                  <span className="guide-mistake-icon"><Icon name="warning" /></span>
                  <div>
                    <strong>{mistake.title}</strong>
                    <p>{mistake.text}</p>
                  </div>
                </article>
              ))}
            </div>
          </article>

          <article className="guide-chapter" id="faq">
            <span className="guide-chapter-index">16</span>
            <h2>Najczęściej zadawane pytania (FAQ)</h2>
            <div className="guide-faq">
              {buyingFaq.map((item) => (
                <details key={item.q} className="guide-faq-item">
                  <summary>
                    {item.q}
                    <Icon name="chevron" />
                  </summary>
                  <p>{item.a}</p>
                </details>
              ))}
            </div>
          </article>

          <article className="guide-chapter guide-summary" id="podsumowanie">
            <span className="guide-chapter-index">17</span>
            <h2>Podsumowanie</h2>
            <p>
              Zakup mieszkania to jedna z ważniejszych decyzji finansowych w życiu, ale rozłożona na etapy przestaje
              być przytłaczająca. Zacznij od potrzeb i budżetu, świadomie wybierz sposób finansowania, dokładnie
              sprawdź stan techniczny i prawny, a formalności potraktuj poważnie. Najlepszą ochroną są wiedza,
              spokój i pisemne ustalenia - emocje zostaw na moment odbioru kluczy.
            </p>
            <div className="guide-summary-note">
              <Icon name="warning" />
              <p>Ten poradnik ma charakter informacyjny i nie stanowi porady prawnej ani podatkowej. Szczegóły dotyczące podatków, opłat i umów potwierdzaj u notariusza, doradcy kredytowego lub prawnika.</p>
            </div>
          </article>

          <section className="guide-cta">
            <div>
              <h2>Gotowy, by znaleźć swoje mieszkanie?</h2>
              <p>Przeglądaj aktualne oferty dopasowane do Twoich potrzeb i budżetu.</p>
            </div>
            <Link to={ROUTES.buy}>
              Zobacz oferty mieszkań
              <Icon name="arrow" />
            </Link>
          </section>
        </div>

        <aside className="guide-aside" aria-label="Narzędzia i materiały">
          <section className="guide-aside-card">
            <h3><Icon name="calculator" /> Kalkulatory</h3>
            <div className="guide-aside-list">
              <Link to={ROUTES.creditCalculator}>
                <span><strong>Kalkulator zdolności kredytowej</strong><small>Sprawdź, na jaki kredyt Cię stać</small></span>
                <Icon name="chevron" />
              </Link>
              <Link to={ROUTES.valuation}>
                <span><strong>Kalkulator wyceny mieszkania</strong><small>Oszacuj wartość nieruchomości</small></span>
                <Icon name="chevron" />
              </Link>
              <Link to={ROUTES.priceHistory}>
                <span><strong>Historia cen</strong><small>Zobacz, jak zmieniały się ceny</small></span>
                <Icon name="chevron" />
              </Link>
              <Link to={ROUTES.districtRanking}>
                <span><strong>Ranking dzielnic</strong><small>Porównaj lokalizacje</small></span>
                <Icon name="chevron" />
              </Link>
            </div>
          </section>

          <section className="guide-aside-card">
            <h3><Icon name="document" /> Do pobrania</h3>
            <div className="guide-aside-downloads">
              <button onClick={downloadBuyingChecklistPdf}>
                <Icon name="document" />
                <span><strong>Lista kontrolna (PDF)</strong><small>10 rzeczy do sprawdzenia</small></span>
                <Icon name="upload" />
              </button>
            </div>
          </section>

          <section className="guide-aside-card guide-aside-mistakes">
            <h3><Icon name="warning" /> Najczęstsze błędy</h3>
            <ul>
              {buyingMistakes.slice(0, 5).map((mistake) => (
                <li key={mistake.title}>
                  <Icon name="warning" />
                  {mistake.title}
                </li>
              ))}
            </ul>
          </section>

          <BannerSlot slot="SIDEBAR" className="guide-aside-banner" />
          <GuideAdCard />
        </aside>
      </div>
    </section>
  );
}

// Generator PDF dla list kontrolnych poradników tematycznych. Ta sama mechanika co przy poradniku
// kupna, ale parametryzowana tytułem, podtytułem, pozycjami i nazwą pliku.
async function downloadGuideChecklistPdf(title: string, subtitle: string, items: string[], fileName: string) {
  const unwrapModuleDefault = <T,>(module: T | { default: T }): T =>
    'default' in Object(module) ? (module as { default: T }).default : (module as T);
  const downloadBlob = (blob: Blob, name: string) => {
    const objectUrl = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = objectUrl;
    link.download = name;
    link.rel = 'noopener';
    document.body.appendChild(link);
    link.click();
    link.remove();
    window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
  };

  type PdfMakeRuntime = {
    addFontContainer: (fontContainer: unknown) => void;
    createPdf: (definition: unknown) => { getBlob: () => Promise<Blob> };
  };

  let pdfMake: PdfMakeRuntime;
  try {
    const pdfMakeModule = await import('pdfmake/build/pdfmake.js');
    const robotoFontModule = await import('pdfmake/build/fonts/Roboto.js');
    pdfMake = unwrapModuleDefault(pdfMakeModule as unknown as PdfMakeRuntime | { default: PdfMakeRuntime });
    pdfMake.addFontContainer(unwrapModuleDefault(robotoFontModule as unknown as { default: unknown }));
  } catch (error) {
    console.error('Nie udało się załadować generatora PDF', error);
    window.alert('Nie udało się przygotować pliku PDF. Odśwież stronę i spróbuj ponownie.');
    return;
  }

  const docDefinition = {
    pageSize: 'A4',
    pageMargins: [48, 48, 48, 48],
    defaultStyle: { font: 'Roboto', color: '#14223a', fontSize: 11, lineHeight: 1.35 },
    content: [
      { text: 'Polska Lokalnie', color: '#0b9f5c', fontSize: 12, bold: true, margin: [0, 0, 0, 2] },
      { text: title, fontSize: 20, bold: true, margin: [0, 0, 0, 4] },
      { text: subtitle, color: '#526171', margin: [0, 0, 0, 18] },
      { ol: items.map((item) => ({ text: item, margin: [0, 0, 0, 6] })) },
      {
        text: 'Materiał informacyjny. Nie stanowi porady prawnej, podatkowej ani finansowej - w razie wątpliwości skonsultuj się z odpowiednim specjalistą.',
        color: '#8793a3',
        fontSize: 9,
        margin: [0, 22, 0, 0],
      },
    ],
  };

  try {
    const blob = await pdfMake.createPdf(docDefinition).getBlob();
    downloadBlob(blob, fileName);
  } catch (error) {
    console.error('Nie udało się wygenerować PDF', error);
    window.alert('Nie udało się wygenerować pliku PDF. Spróbuj ponownie.');
  }
}

// Renderuje pojedynczy blok treści rozdziału. Typy bloków odpowiadają tym z poradnika kupna,
// dzięki czemu artykuły tematyczne korzystają z tych samych klas CSS i wyglądają identycznie.
function GuideBlockView({ block }: { block: GuideBlock }) {
  if (block.type === 'p') {
    return <p>{block.text}</p>;
  }
  if (block.type === 'callout') {
    return (
      <div className={`guide-callout guide-callout-${block.variant}`}>
        <Icon name={block.icon} />
        <div>
          <strong>{block.title}</strong>
          <p>{block.text}</p>
        </div>
      </div>
    );
  }
  if (block.type === 'table') {
    return (
      <div className="guide-table-wrap">
        <table className="guide-table">
          <thead>
            <tr>
              {block.head.map((cell) => (
                <th key={cell}>{cell}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {block.rows.map((row, rowIndex) => (
              <tr key={rowIndex}>
                {row.map((cell, cellIndex) => (
                  <td key={cellIndex} data-label={block.head[cellIndex]}>
                    {cellIndex === 0 ? <strong>{cell}</strong> : cell}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
  if (block.type === 'twocol') {
    return (
      <div className="guide-two-col">
        {block.cols.map((col) => (
          <div className={`guide-${col.tone}`} key={col.title}>
            <h4><Icon name={col.icon} /> {col.title}</h4>
            <ul>
              {col.items.map((item) => (
                <li key={item}>{item}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    );
  }
  // block.type === 'list'
  return (
    <ul className="guide-list">
      {block.items.map((item, index) =>
        typeof item === 'string' ? (
          <li key={index}>{item}</li>
        ) : (
          <li key={index}><strong>{item.label}</strong> - {item.text}</li>
        ),
      )}
    </ul>
  );
}

// Zapraszający kafelek reklamowy w panelu bocznym poradnika. Rezerwuje widoczne miejsce dla firm
// (biura nieruchomości, doradcy kredytowi, ekipy remontowe) i prowadzi do strony /reklama.
// Realne banery kampanii wyświetla osobno komponent BannerSlot - ten kafelek jest stałym zaproszeniem.
function GuideAdCard() {
  return (
    <section className="guide-aside-card guide-ad-card" aria-label="Reklama">
      <span className="guide-ad-tag"><Icon name="megaphone" /> Reklama</span>
      <div className="guide-ad-body">
        <span className="guide-ad-icon"><Icon name="building-plus" /></span>
        <strong>Twoja firma może być tutaj</strong>
        <p>Dotrzyj do osób, które właśnie planują zakup, kredyt, wynajem lub remont nieruchomości.</p>
      </div>
      <Link className="guide-ad-cta" to={ROUTES.advertising}>
        <Icon name="plus" /> Zareklamuj swoją firmę
      </Link>
    </section>
  );
}

// Poziomy baner reklamowy wplatany w treść poradnika - dodatkowe, wyraźne miejsce na reklamę firm.
function GuideAdBanner() {
  return (
    <aside className="guide-ad-banner" aria-label="Reklama">
      <span className="guide-ad-tag"><Icon name="megaphone" /> Reklama</span>
      <div className="guide-ad-banner-copy">
        <strong>Miejsce na reklamę Twojej firmy</strong>
        <p>Biura nieruchomości, doradcy kredytowi i ekipy wykończeniowe - docierajcie do czytelników tego poradnika.</p>
      </div>
      <Link to={ROUTES.advertising}>
        Dowiedz się więcej <Icon name="arrow" />
      </Link>
    </aside>
  );
}

// Wspólny szablon artykułu poradnikowego (kredyty, wynajem, inwestowanie, remont, prawo i podatki).
// Treść pochodzi z guides-data.ts, a układ jest bliźniaczy do ręcznie pisanego poradnika kupna.
function GuideArticleTemplate({ content }: { content: GuideContent }) {
  const scrollToId = (id: string) => {
    const target = document.getElementById(id);
    if (target) {
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };
  const downloadPdf = () =>
    downloadGuideChecklistPdf(content.pdfTitle, content.pdfSubtitle, content.checklist, content.pdfFileName);

  const chapterCount = content.chapters.length;
  const pad = (n: number) => String(n).padStart(2, '0');
  const toc = [
    ...content.chapters.map((chapter) => ({ id: chapter.id, label: chapter.label })),
    { id: 'bledy', label: 'Najczęstsze błędy' },
    { id: 'faq', label: 'FAQ' },
    { id: 'podsumowanie', label: 'Podsumowanie' },
  ];

  return (
    <section
      className="guide-article"
      aria-label={`Poradnik: ${content.badgeLabel}`}
      style={{ '--guide-accent': content.accent, '--guide-accent-dark': content.accentDark } as CSSProperties}
    >
      <header className="guide-hero">
        <img src={heroImage} alt="" />
        <div className="guide-hero-shade" />
        <div className="guides-container guide-hero-inner">
          <Link className="guide-back" to={ROUTES.guides}>
            <Icon name="arrow" />
            <span>Wróć do poradników</span>
          </Link>
          <span className="guide-hero-badge">
            <Icon name={content.badgeIcon} />
            {content.badgeLabel}
          </span>
          <h1>{content.title}</h1>
          <p className="guide-hero-lead">{content.lead}</p>
          <div className="guide-hero-chips">
            {content.chips.map((chip) => (
              <span key={chip.text}><Icon name={chip.icon} /> {chip.text}</span>
            ))}
          </div>
        </div>
      </header>

      <div className="guides-container guide-article-layout">
        <aside className="guide-toc" aria-label="Spis treści">
          <div className="guide-toc-inner">
            <h2>Spis treści</h2>
            <ol>
              {toc.map((item, index) => (
                <li key={item.id}>
                  <button onClick={() => scrollToId(item.id)}>
                    <span>{index + 1}</span>
                    {item.label}
                  </button>
                </li>
              ))}
            </ol>
          </div>
        </aside>

        <div className="guide-body">
          <section className="guide-process" aria-label={content.processTitle}>
            <div className="guide-block-head">
              <h2>{content.processTitle}</h2>
              <p>{content.processHint}</p>
            </div>
            <div className="guide-process-grid">
              {content.process.map((step, index) => (
                <article key={step.title} className="guide-process-card">
                  <span className="guide-process-num">{index + 1}</span>
                  <span className="guide-process-icon"><Icon name={step.icon} /></span>
                  <strong>{step.title}</strong>
                  <small>{step.text}</small>
                </article>
              ))}
            </div>
          </section>

          {content.chapters.map((chapter, index) => (
            <article className="guide-chapter" id={chapter.id} key={chapter.id}>
              <span className="guide-chapter-index">{pad(index + 1)}</span>
              <h2>{chapter.heading}</h2>
              {chapter.blocks.map((block, blockIndex) => (
                <GuideBlockView block={block} key={blockIndex} />
              ))}
            </article>
          ))}

          <section className="guide-checklist" id="checklista">
            <div className="guide-block-head">
              <h2>{content.checklistTitle}</h2>
              <p>{content.checklistHint}</p>
            </div>
            <div className="guide-checklist-grid">
              {content.checklist.map((item, index) => (
                <label className="guide-checklist-item" key={index}>
                  <input type="checkbox" />
                  <span className="guide-check-box"><Icon name="check" /></span>
                  <span>{item}</span>
                </label>
              ))}
            </div>
            <button className="guide-download-btn" onClick={downloadPdf}>
              <Icon name="document" />
              Pobierz listę kontrolną (PDF)
            </button>
          </section>

          <GuideAdBanner />

          <article className="guide-chapter" id="bledy">
            <span className="guide-chapter-index">{pad(chapterCount + 1)}</span>
            <h2>Najczęstsze błędy</h2>
            <div className="guide-mistakes">
              {content.mistakes.map((mistake) => (
                <article key={mistake.title} className="guide-mistake">
                  <span className="guide-mistake-icon"><Icon name="warning" /></span>
                  <div>
                    <strong>{mistake.title}</strong>
                    <p>{mistake.text}</p>
                  </div>
                </article>
              ))}
            </div>
          </article>

          <article className="guide-chapter" id="faq">
            <span className="guide-chapter-index">{pad(chapterCount + 2)}</span>
            <h2>Najczęściej zadawane pytania (FAQ)</h2>
            <div className="guide-faq">
              {content.faq.map((item) => (
                <details key={item.q} className="guide-faq-item">
                  <summary>
                    {item.q}
                    <Icon name="chevron" />
                  </summary>
                  <p>{item.a}</p>
                </details>
              ))}
            </div>
          </article>

          <article className="guide-chapter guide-summary" id="podsumowanie">
            <span className="guide-chapter-index">{pad(chapterCount + 3)}</span>
            <h2>Podsumowanie</h2>
            <p>{content.summary}</p>
            <div className="guide-summary-note">
              <Icon name="warning" />
              <p>Ten poradnik ma charakter informacyjny i nie stanowi porady prawnej, podatkowej ani finansowej. Szczegóły potwierdzaj u odpowiedniego specjalisty - doradcy kredytowego, notariusza, doradcy podatkowego lub prawnika.</p>
            </div>
          </article>

          <section className="guide-cta">
            <div>
              <h2>{content.ctaTitle}</h2>
              <p>{content.ctaText}</p>
            </div>
            <Link to={content.ctaLink}>
              {content.ctaLabel}
              <Icon name="arrow" />
            </Link>
          </section>
        </div>

        <aside className="guide-aside" aria-label="Narzędzia i materiały">
          <section className="guide-aside-card">
            <h3><Icon name="calculator" /> Narzędzia</h3>
            <div className="guide-aside-list">
              {content.asideCalculators.map((tool) => (
                <Link to={tool.to} key={tool.title}>
                  <span><strong>{tool.title}</strong><small>{tool.sub}</small></span>
                  <Icon name="chevron" />
                </Link>
              ))}
            </div>
          </section>

          <section className="guide-aside-card">
            <h3><Icon name="document" /> Do pobrania</h3>
            <div className="guide-aside-downloads">
              <button onClick={downloadPdf}>
                <Icon name="document" />
                <span><strong>Lista kontrolna (PDF)</strong><small>{content.pdfSubtitle}</small></span>
                <Icon name="upload" />
              </button>
            </div>
          </section>

          <section className="guide-aside-card guide-aside-mistakes">
            <h3><Icon name="warning" /> Najczęstsze błędy</h3>
            <ul>
              {content.mistakes.slice(0, 5).map((mistake) => (
                <li key={mistake.title}>
                  <Icon name="warning" />
                  {mistake.title}
                </li>
              ))}
            </ul>
          </section>

          <BannerSlot slot="SIDEBAR" className="guide-aside-banner" />
          <GuideAdCard />
        </aside>
      </div>
    </section>
  );
}

// Kafelek artykulu uzytkownika - ten sam w polecanych i w wynikach wyszukiwania.
function ArticleTile({ article }: { article: ArticleCard }) {
  return (
    <Link className="article-card is-clickable" to={articlePath(article.id)}>
      <div className="article-image" style={{ backgroundImage: `url(${heroImage})` }}>
        <span>{guideTopicBySlug(article.topicSlug)?.title.toUpperCase() ?? 'PORADNIK'}</span>
      </div>
      <div className="article-body">
        <h3>{article.title}</h3>
        <p>{article.excerpt}</p>
        <div>
          <span>{article.readMinutes} min czytania</span>
          <span><Icon name="eye" /> {article.views}</span>
        </div>
      </div>
    </Link>
  );
}

function GuidesPage() {
  const navigate = useNavigate();
  // Liczba artykułów użytkowników w każdym temacie. Do tego doliczamy 1 wbudowany poradnik.
  const [userCounts, setUserCounts] = useState<Record<string, number>>({});
  useEffect(() => {
    let cancelled = false;
    apiFetch<Record<string, number>>('/articles/counts')
      .then((data) => { if (!cancelled) setUserCounts(data ?? {}); })
      .catch(() => { /* brak sieci - licznik pokaże sam wbudowany poradnik */ });
    return () => { cancelled = true; };
  }, []);
  // Wszystkie artykuly uzytkownikow - API zwraca je per temat, wiec laczymy odpowiedzi.
  // Z tej listy bierzemy polecane (najczesciej czytane) i wyniki wyszukiwania.
  const [allArticles, setAllArticles] = useState<ArticleCard[] | null>(null);
  useEffect(() => {
    let cancelled = false;
    Promise.all(GUIDE_TOPICS.map((topic) => (
      apiFetch<ArticleCard[]>(`/articles?topic=${encodeURIComponent(topic.slug)}`).catch(() => [] as ArticleCard[])
    )))
      .then((perTopic) => {
        if (!cancelled) {
          setAllArticles(perTopic.flat());
        }
      });
    return () => { cancelled = true; };
  }, []);
  const featuredArticles = allArticles && [...allArticles].sort((left, right) => right.views - left.views).slice(0, 4);

  // Szukana fraza siedzi w adresie (/poradniki?szukaj=...), wiec wynik da sie odswiezyc i udostepnic.
  const [guideParams, setGuideParams] = useSearchParams();
  const guideQuery = guideParams.get('szukaj') ?? '';
  const [guideSearchDraft, setGuideSearchDraft] = useState(guideQuery);
  useEffect(() => {
    setGuideSearchDraft(guideQuery);
  }, [guideQuery]);
  const submitGuideSearch = (event: ReactFormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const phrase = guideSearchDraft.trim();
    setGuideParams(phrase ? { szukaj: phrase } : {});
  };
  const normalizedQuery = guideQuery.trim().toLowerCase();
  const matchingArticles = normalizedQuery.length > 0 && allArticles
    ? allArticles.filter((article) => `${article.title} ${article.excerpt}`.toLowerCase().includes(normalizedQuery))
    : [];
  const matchingTopics = normalizedQuery.length > 0
    ? GUIDE_TOPICS.filter((topic) => topic.title.toLowerCase().includes(normalizedQuery))
    : [];
  return (
    <section className="guides-page" aria-label="Poradniki">
      <section className="guides-hero">
        <img src={heroImage} alt="" />
        <div className="guides-hero-shade" />
        <div className="guides-container guides-hero-inner">
          <div>
            <h1>Centrum wiedzy <span>o nieruchomościach</span></h1>
            <p>Praktyczne poradniki, analizy rynku i eksperckie wskazówki, które pomogą Ci podjąć najlepsze decyzje.</p>
            <form className="guides-search" onSubmit={submitGuideSearch}>
              <Icon name="search" />
              <input
                placeholder="O czym chcesz przeczytać?"
                value={guideSearchDraft}
                onChange={(event) => setGuideSearchDraft(event.target.value)}
                aria-label="Szukaj w poradnikach"
              />
              <button type="submit">Szukaj</button>
            </form>
            <div className="popular-links">
              <span>Popularne:</span>
              <Link to={ROUTES.guideCredit}>Kredyt hipoteczny</Link>
              <Link to={ROUTES.guideRent}>Umowa najmu</Link>
              <Link to={ROUTES.guideLaw}>Podatek od sprzedaży</Link>
              <Link to={ROUTES.guideLaw}>Księga wieczysta</Link>
            </div>
          </div>
        </div>
      </section>

      <div className="guides-container guides-layout">
        <div className="guides-main">
          {normalizedQuery.length > 0 && (
            <section className="guides-section" aria-label="Wyniki wyszukiwania">
              <div className="guide-topic-head">
                <h2>Wyniki dla „{guideQuery.trim()}”</h2>
                <Link to={ROUTES.guides}>Wyczyść wyszukiwanie</Link>
              </div>
              {matchingTopics.length > 0 && (
                <div className="guide-topic-grid">
                  {matchingTopics.map((topic) => (
                    <Link className="guide-topic-card is-clickable" key={topic.slug} to={guideTopicListPath(topic.slug)}>
                      <span className={`guide-topic-icon ico-${topic.icon}`}>
                        <Icon name={topic.icon} />
                      </span>
                      <strong>{topic.title}</strong>
                    </Link>
                  ))}
                </div>
              )}
              {matchingArticles.length > 0 ? (
                <div className="article-grid">
                  {matchingArticles.map((article) => (
                    <ArticleTile key={article.id} article={article} />
                  ))}
                </div>
              ) : (
                matchingTopics.length === 0 && (
                  <p className="guides-search-empty">
                    {allArticles == null ? 'Szukamy…' : 'Nie znaleźliśmy artykułu ani tematu z tą frazą. Sprawdź tematy poniżej.'}
                  </p>
                )
              )}
            </section>
          )}

          <section className="guides-section" id="tematy-poradnikow">
            <div className="guide-topic-head">
              <h2>Wybierz temat</h2>
            </div>
            <div className="guide-topic-grid">
              {guideTopics.map((topic) => {
                // Klik w temat otwiera listę poradników danego tematu. Licznik = 1 wbudowany
                // poradnik + artykuły dodane przez użytkowników (z API).
                const total = 1 + (userCounts[topic.slug] ?? 0);
                return (
                  <Link className="guide-topic-card is-clickable" key={topic.slug} to={guideTopicListPath(topic.slug)}>
                    <span className={`guide-topic-icon ico-${topic.icon}`}>
                      <Icon name={topic.icon} />
                    </span>
                    <h3>{topic.title}</h3>
                    <p>{topic.text}</p>
                    <small>{articleCountLabel(total)}</small>
                  </Link>
                );
              })}
            </div>
          </section>

          <section className="guides-section">
            <div className="section-head">
              <h2>Polecane artykuły</h2>
              <Link to={ROUTES.guideBuying}>Zobacz wszystkie <Icon name="arrow" /></Link>
            </div>
            {featuredArticles !== null && featuredArticles.length === 0 ? (
              <div className="listings-empty">
                <strong>Nie ma jeszcze artykułów użytkowników.</strong>
                <small><Link to={guideAddPath()}>Napisz pierwszy artykuł</Link></small>
              </div>
            ) : (
              <div className="article-grid">
                {(featuredArticles ?? []).map((article) => (
                  <ArticleTile key={article.id} article={article} />
                ))}
              </div>
            )}
          </section>

          <section className="related-offers">
            <h2>Szukasz mieszkania?</h2>
            <p>Przejdź prosto do ofert w wybranej lokalizacji</p>
            <div className="related-offer-grid">
              {guideRelatedOffers.map((offer) => (
                <article key={offer.title}>
                  <div>
                    <h3>{offer.title}</h3>
                    <Link to={offer.to}>Zobacz oferty <Icon name="arrow" /></Link>
                  </div>
                  <div
                    className="related-offer-image"
                    style={{ backgroundImage: `url(${offer.image})`, backgroundPosition: offer.position }}
                  />
                </article>
              ))}
            </div>
          </section>
        </div>

        <aside className="guides-sidebar">
          <section className="guide-ai-card">
            <div className="ai-label">
              <Icon name="document" />
              <span>Zostań autorem</span>
            </div>
            <p>Masz wiedzę o nieruchomościach? Napisz własny poradnik i pomóż innym w podejmowaniu decyzji.</p>
            <div className="ai-question-box">
              <strong>Twój artykuł trafi do centrum wiedzy serwisu, a Ty zbudujesz swoją pozycję eksperta.</strong>
            </div>
            <Link className="guide-ai-cta" to={guideAddPath()}>
              Napisz swój artykuł
              <Icon name="arrow" />
            </Link>
          </section>

          <section className="quick-guides-card">
            <h2>Szybkie poradniki</h2>
            <div>
              {quickGuides.map((guide) => (
                <Link key={guide.title} to={guide.to}>
                  <span>
                    <Icon name={guide.icon} />
                  </span>
                  <p>
                    <strong>{guide.title}</strong>
                    <small>{guide.text}</small>
                  </p>
                  <Icon name="chevron" />
                </Link>
              ))}
            </div>
            <a href="#tematy-poradnikow">
              Zobacz wszystkie tematy
              <Icon name="arrow" />
            </a>
          </section>
        </aside>
      </div>
    </section>
  );
}

// ---- Poradniki użytkowników: typy, pomocnicze i strony ----

type ArticleCard = {
  id: number;
  topicSlug: string;
  title: string;
  excerpt: string;
  authorName: string;
  authorNick: string | null;
  readMinutes: number;
  views: number;
  createdAt: string;
};

type ArticleDetail = ArticleCard & { content: string };

// Data w formacie "10 maja 2025".
function formatArticleDate(iso: string): string {
  try {
    return new Intl.DateTimeFormat('pl-PL', { day: 'numeric', month: 'long', year: 'numeric' }).format(new Date(iso));
  } catch {
    return '';
  }
}

// Kolory motywu tematu (dopasowane do ikony). Dla kupna - domyślna zieleń, dla reszty z guides-data.
function topicThemeStyle(guideRoute: string): CSSProperties {
  const gc = guideContents[guideRoute];
  return {
    '--guide-accent': gc?.accent ?? '#0b9f5c',
    '--guide-accent-dark': gc?.accentDark ?? '#0b7a47',
  } as CSSProperties;
}

// Wiersz na liście poradników danego tematu.
function GuideArticleRow({ to, badge, badgeIcon, title, excerpt, author, meta, featured }: {
  to: string;
  badge: string;
  badgeIcon: string;
  title: string;
  excerpt: string;
  author: string;
  meta: ReactNode;
  featured?: boolean;
}) {
  return (
    <Link className={`guide-article-row${featured ? ' guide-row-featured' : ''}`} to={to}>
      <div className="guide-row-main">
        <span className="guide-row-badge"><Icon name={badgeIcon} /> {badge}</span>
        <h3>{title}</h3>
        <p>{excerpt}</p>
        <div className="guide-row-meta">
          <span className="guide-row-author">
            <span className="guide-row-avatar">{initialsFrom(author)}</span>
            {author}
          </span>
          {meta}
        </div>
      </div>
      <Icon name="chevron" />
    </Link>
  );
}

// Lista poradników w danym temacie: wbudowany poradnik redakcji + artykuły użytkowników.
function GuideTopicListPage() {
  const { topicSlug } = useParams();
  const topic = guideTopicBySlug(topicSlug);
  const [articles, setArticles] = useState<ArticleCard[] | null>(null);
  const [page, setPage] = useState(1);
  const pageSize = 6;

  useEffect(() => {
    if (!topic) {
      return;
    }
    let cancelled = false;
    setArticles(null);
    apiFetch<ArticleCard[]>(`/articles?topic=${encodeURIComponent(topic.slug)}`)
      .then((data) => { if (!cancelled) setArticles(Array.isArray(data) ? data : []); })
      .catch(() => { if (!cancelled) setArticles([]); });
    return () => { cancelled = true; };
  }, [topic?.slug]);

  if (!topic) {
    return <Navigate to={ROUTES.guides} replace />;
  }

  const userArticles = articles ?? [];
  const total = 1 + userArticles.length;
  const pageCount = Math.max(1, Math.ceil(total / pageSize));
  const safePage = Math.min(page, pageCount);

  // Wbudowany poradnik jest zawsze pierwszym elementem listy, potem artykuły użytkowników.
  type Item = { kind: 'builtin' } | { kind: 'user'; article: ArticleCard };
  const items: Item[] = [{ kind: 'builtin' }, ...userArticles.map((article) => ({ kind: 'user' as const, article }))];
  const start = (safePage - 1) * pageSize;
  const pageItems = items.slice(start, start + pageSize);

  return (
    <section className="guide-article guide-topic-list" aria-label={`Poradniki: ${topic.title}`} style={topicThemeStyle(topic.guide)}>
      <header className="guide-hero guide-hero-compact">
        <img src={heroImage} alt="" />
        <div className="guide-hero-shade" />
        <div className="guides-container guide-hero-inner">
          <Link className="guide-back" to={ROUTES.guides}>
            <Icon name="arrow" />
            <span>Wróć do poradników</span>
          </Link>
          <span className="guide-hero-badge">
            <Icon name={topic.icon} />
            {topic.title}
          </span>
          <h1>Poradniki: {topic.title}</h1>
          <p className="guide-hero-lead">
            Wybierz poradnik, który Cię interesuje. Znajdziesz tu kompletny przewodnik redakcji oraz artykuły
            dodane przez społeczność.
          </p>
        </div>
      </header>

      <div className="guides-container guide-userpage-layout">
        <main className="guide-list-main">
          <div className="guide-list-head">
            <h2>{articleCountLabel(total)}</h2>
            <span>na temat: {topic.title.toLowerCase()}</span>
          </div>

          <div className="guide-article-rows">
            {pageItems.map((item, index) =>
              item.kind === 'builtin' ? (
                <GuideArticleRow
                  key="builtin"
                  to={topic.guide}
                  badge="Poradnik redakcji"
                  badgeIcon="star"
                  title={`${topic.title} - kompletny poradnik`}
                  excerpt="Obszerny przewodnik krok po kroku: proces, checklisty, najczęstsze błędy i FAQ. Zawsze aktualny."
                  author="Zespół Polska Lokalnie"
                  featured
                  meta={<span><Icon name="check" /> Zweryfikowane</span>}
                />
              ) : (
                <Fragment key={item.article.id}>
                  <GuideArticleRow
                    to={articlePath(item.article.id)}
                    badge={topic.title}
                    badgeIcon={topic.icon}
                    title={item.article.title}
                    excerpt={item.article.excerpt}
                    author={item.article.authorName}
                    meta={(
                      <>
                        <span>{formatArticleDate(item.article.createdAt)}</span>
                        <span><Icon name="clock" /> {item.article.readMinutes} min czytania</span>
                      </>
                    )}
                  />
                  {/* Baner reklamowy co kilka pozycji - miejsce dla firm. */}
                  {index === 2 && <GuideAdBanner />}
                </Fragment>
              ),
            )}
          </div>

          {articles === null && <p className="guide-list-status">Wczytywanie artykułów...</p>}

          {pageCount > 1 && (
            <nav className="guide-pagination" aria-label="Strony">
              <button disabled={safePage <= 1} onClick={() => setPage(safePage - 1)} aria-label="Poprzednia">
                <Icon name="chevron" />
              </button>
              {Array.from({ length: pageCount }, (_, i) => i + 1).map((p) => (
                <button key={p} className={p === safePage ? 'active' : ''} onClick={() => setPage(p)}>{p}</button>
              ))}
              <button disabled={safePage >= pageCount} onClick={() => setPage(safePage + 1)} aria-label="Następna">
                <Icon name="chevron" />
              </button>
            </nav>
          )}

          {/* Kartka zachęty do dodania artykułu - zawsze widoczna, tekst zależny od tego,
              czy są już artykuły społeczności. Przycisk jest tu stale. */}
          {articles !== null && (
            <div className="guide-list-empty">
              {userArticles.length === 0 ? (
                <>
                  <strong>Na razie jest tu tylko poradnik redakcji</strong>
                  <p>Znasz się na temacie „{topic.title.toLowerCase()}”? Podziel się wiedzą i dodaj pierwszy artykuł społeczności.</p>
                </>
              ) : (
                <>
                  <strong>Masz wiedzę na temat „{topic.title.toLowerCase()}”?</strong>
                  <p>Napisz własny poradnik i pomóż innym w podejmowaniu decyzji.</p>
                </>
              )}
              <Link className="guide-ad-cta" to={guideAddPath(topic.slug)}><Icon name="plus" /> Dodaj swój artykuł</Link>
            </div>
          )}
        </main>

        <aside className="guide-aside" aria-label="Reklama i tematy">
          <section className="guide-aside-card">
            <h3><Icon name="grid" /> Inne tematy</h3>
            <div className="guide-aside-list">
              {GUIDE_TOPICS.filter((other) => other.slug !== topic.slug).map((other) => (
                <Link to={guideTopicListPath(other.slug)} key={other.slug}>
                  <span><strong>{other.title}</strong><small>{GUIDE_TOPIC_TEXTS[other.slug]}</small></span>
                  <Icon name="chevron" />
                </Link>
              ))}
            </div>
          </section>

          <BannerSlot slot="SIDEBAR" className="guide-aside-banner" />
          <GuideAdCard />
        </aside>
      </div>
    </section>
  );
}

// Pojedynczy artykuł dodany przez użytkownika.
function GuideArticlePage() {
  const { id } = useParams();
  const [article, setArticle] = useState<ArticleDetail | null>(null);
  const [notFound, setNotFound] = useState(false);

  useEffect(() => {
    let cancelled = false;
    setArticle(null);
    setNotFound(false);
    apiFetch<ArticleDetail>(`/articles/${id}`)
      .then((data) => { if (!cancelled) setArticle(data); })
      .catch(() => { if (!cancelled) setNotFound(true); });
    return () => { cancelled = true; };
  }, [id]);

  if (notFound) {
    return (
      <section className="guide-article" aria-label="Artykuł">
        <div className="guides-container guide-notfound">
          <h1>Nie znaleziono artykułu</h1>
          <p>Ten artykuł nie istnieje lub został usunięty.</p>
          <Link className="guide-ad-cta" to={ROUTES.guides}><Icon name="arrow" /> Wróć do poradników</Link>
        </div>
      </section>
    );
  }

  if (!article) {
    return (
      <section className="guide-article" aria-label="Artykuł">
        <div className="guides-container guide-notfound"><p className="guide-list-status">Wczytywanie artykułu...</p></div>
      </section>
    );
  }

  const topic = guideTopicBySlug(article.topicSlug);
  const themeStyle = topic ? topicThemeStyle(topic.guide) : undefined;

  return (
    <section className="guide-article guide-user-article" aria-label={article.title} style={themeStyle}>
      <header className="guide-hero guide-hero-compact">
        <img src={heroImage} alt="" />
        <div className="guide-hero-shade" />
        <div className="guides-container guide-hero-inner">
          <Link className="guide-back" to={topic ? guideTopicListPath(topic.slug) : ROUTES.guides}>
            <Icon name="arrow" />
            <span>{topic ? `Poradniki: ${topic.title}` : 'Wróć do poradników'}</span>
          </Link>
          {topic && (
            <span className="guide-hero-badge"><Icon name={topic.icon} /> {topic.title}</span>
          )}
          <h1>{article.title}</h1>
          <div className="guide-article-byline">
            <span className="guide-row-author">
              <span className="guide-row-avatar">{initialsFrom(article.authorName)}</span>
              {article.authorName}
            </span>
            <span>{formatArticleDate(article.createdAt)}</span>
            <span><Icon name="clock" /> {article.readMinutes} min czytania</span>
          </div>
        </div>
      </header>

      <div className="guides-container guide-userpage-layout">
        <div className="guide-body">
          <p className="guide-user-lead">{article.excerpt}</p>
          <SafeHtml className="guide-user-content" html={article.content} />

          <GuideAdBanner />

          <section className="guide-cta">
            <div>
              <h2>Chcesz dodać własny artykuł?</h2>
              <p>Podziel się swoją wiedzą z innymi. Dodanie poradnika zajmuje kilka minut.</p>
            </div>
            <Link to={topic ? guideAddPath(topic.slug) : ROUTES.guideAdd}>
              Dodaj swój artykuł
              <Icon name="arrow" />
            </Link>
          </section>
        </div>

        <aside className="guide-aside" aria-label="Reklama i materiały">
          {topic && (
            <section className="guide-aside-card">
              <h3><Icon name="document" /> Zobacz też</h3>
              <div className="guide-aside-list">
                <Link to={topic.guide}>
                  <span><strong>{topic.title} - kompletny poradnik</strong><small>Przewodnik krok po kroku</small></span>
                  <Icon name="chevron" />
                </Link>
                <Link to={guideTopicListPath(topic.slug)}>
                  <span><strong>Więcej o: {topic.title}</strong><small>Wszystkie artykuły w temacie</small></span>
                  <Icon name="chevron" />
                </Link>
              </div>
            </section>
          )}

          <BannerSlot slot="SIDEBAR" className="guide-aside-banner" />
          <GuideAdCard />
        </aside>
      </div>
    </section>
  );
}

// Formularz dodawania artykułu (tylko dla zalogowanych).
// Kroki procesu i korzyści w prawej kolumnie formularza "Zaproponuj artykuł".
const PROPOSE_STEPS = [
  { icon: 'send', title: 'Wyślij propozycję', text: 'Wypełnij formularz i prześlij swoją propozycję artykułu.' },
  { icon: 'search', title: 'Weryfikacja', text: 'Nasz zespół przejrzy Twoją propozycję i oceni jej wartość merytoryczną.' },
  { icon: 'message', title: 'Kontakt', text: 'Skontaktujemy się z Tobą w sprawie ewentualnych pytań lub publikacji.' },
  { icon: 'document', title: 'Publikacja', text: 'Po akceptacji Twój artykuł zostanie opublikowany na naszej stronie.' },
];

const PROPOSE_BENEFITS = [
  'Twój poradnik trafi do centrum wiedzy',
  'Zbudujesz swoją pozycję eksperta',
  'Pomożesz innym w podejmowaniu decyzji',
  'Zyskasz wartościowe linki i widoczność',
];

function GuideAddArticlePage() {
  const { user } = useAuth();
  const [searchParams] = useSearchParams();
  const initialTopic = searchParams.get('temat') ?? '';
  const [topicSlug, setTopicSlug] = useState(guideTopicBySlug(initialTopic) ? initialTopic : '');
  const [title, setTitle] = useState('');
  const [excerpt, setExcerpt] = useState('');
  const [content, setContent] = useState('');
  const [attachments, setAttachments] = useState<string[]>([]);
  // Dane kontaktowe - wstępnie z konta, ale użytkownik może je zmienić.
  const [contactName, setContactName] = useState(user?.fullName ?? '');
  const [contactEmail, setContactEmail] = useState(user?.email ?? '');
  const [contactPhone, setContactPhone] = useState(user?.phone ?? '');
  const [error, setError] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);

  // Gdy konto doładuje się po zamontowaniu, uzupełniamy puste pola kontaktowe.
  useEffect(() => {
    if (user) {
      setContactName((prev) => prev || user.fullName || '');
      setContactEmail((prev) => prev || user.email || '');
      setContactPhone((prev) => prev || user.phone || '');
    }
  }, [user]);

  const themeSlug = guideTopicBySlug(topicSlug)?.guide ?? ROUTES.guideBuying;

  const addFiles = async (files: FileList | null) => {
    if (!files || files.length === 0) {
      return;
    }
    const images = Array.from(files).filter((file) => file.type.startsWith('image/'));
    const room = 6 - attachments.length;
    const picked = images.slice(0, Math.max(0, room));
    const dataUrls = await Promise.all(picked.map((file) => compressImageFile(file, 1280, 0.8)));
    setAttachments((prev) => [...prev, ...dataUrls].slice(0, 6));
  };

  const removeAttachment = (index: number) => {
    setAttachments((prev) => prev.filter((_, i) => i !== index));
  };

  const submit = async (event: ReactFormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setError(null);
    if (!topicSlug) {
      setError('Wybierz temat artykułu.');
      return;
    }
    if (title.trim().length < 5) {
      setError('Tytuł musi mieć co najmniej 5 znaków.');
      return;
    }
    if (excerpt.trim().length < 10) {
      setError('Krótki opis musi mieć co najmniej 10 znaków.');
      return;
    }
    if (isRichTextEmpty(content) || stripHtml(content).trim().length < 30) {
      setError('Treść artykułu jest zbyt krótka (min. 30 znaków).');
      return;
    }
    if (contactName.trim().length < 3) {
      setError('Podaj imię i nazwisko do kontaktu.');
      return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(contactEmail.trim())) {
      setError('Podaj poprawny adres e-mail do kontaktu.');
      return;
    }
    setSubmitting(true);
    try {
      await apiFetch<ArticleDetail>('/articles', {
        method: 'POST',
        body: JSON.stringify({
          topicSlug,
          title: title.trim(),
          excerpt: excerpt.trim(),
          content,
          attachments,
          contactName: contactName.trim(),
          contactEmail: contactEmail.trim(),
          contactPhone: contactPhone.trim(),
        }),
      });
      setSubmitted(true);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Nie udało się wysłać propozycji. Spróbuj ponownie.');
    } finally {
      setSubmitting(false);
    }
  };

  if (submitted) {
    return (
      <section className="guide-article guide-propose-page" aria-label="Propozycja wysłana" style={topicThemeStyle(themeSlug)}>
        <div className="guides-container guide-propose-done">
          <span className="guide-propose-done-icon"><Icon name="check" /></span>
          <h1>Dziękujemy za propozycję!</h1>
          <p>
            Twój artykuł „{title.trim()}” trafił do naszego zespołu. Przejrzymy go i skontaktujemy się z Tobą
            w sprawie publikacji. Po akceptacji pojawi się na liście poradników w temacie „{guideTopicBySlug(topicSlug)?.title}”.
          </p>
          <div className="guide-propose-done-actions">
            <Link className="guide-form-submit" to={guideTopicListPath(topicSlug)}>Wróć do poradników <Icon name="arrow" /></Link>
            <button
              type="button"
              className="guide-secondary-btn"
              onClick={() => { setSubmitted(false); setTitle(''); setExcerpt(''); setContent(''); setAttachments([]); }}
            >
              <Icon name="plus" /> Dodaj kolejny artykuł
            </button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="guide-article guide-propose-page" aria-label="Zaproponuj artykuł" style={topicThemeStyle(themeSlug)}>
      <header className="guide-hero guide-hero-compact guide-propose-hero">
        <img src={heroImage} alt="" />
        <div className="guide-hero-shade" />
        <div className="guides-container guide-hero-inner">
          <Link className="guide-back" to={topicSlug ? guideTopicListPath(topicSlug) : ROUTES.guides}>
            <Icon name="arrow" />
            <span>Wróć do poradników</span>
          </Link>
          <h1>Zaproponuj artykuł</h1>
          <p className="guide-hero-lead">
            Masz wiedzę, którą warto się podzielić? Napisz do nas! Twoja propozycja artykułu zostanie
            przejrzana przez nasz zespół.
          </p>
        </div>
      </header>

      <div className="guides-container guide-propose-layout">
        <form className="guide-propose-form" onSubmit={submit}>
          <div className="guide-form-card">
            <div className="guide-form-card-head">
              <span className="guide-form-card-icon"><Icon name="document" /></span>
              <div>
                <h2>Szczegóły artykułu</h2>
                <p>Wypełnij formularz, aby zaproponować swój artykuł do publikacji.</p>
              </div>
            </div>

            <label className="guide-field">
              <span><Icon name="grid" /> Temat artykułu</span>
              <select value={topicSlug} onChange={(e) => setTopicSlug(e.target.value)}>
                <option value="">Wybierz temat</option>
                {GUIDE_TOPICS.map((t) => (
                  <option key={t.slug} value={t.slug}>{t.title}</option>
                ))}
              </select>
            </label>

            <label className="guide-field">
              <span><Icon name="document" /> Tytuł artykułu *</span>
              <input
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                maxLength={200}
                placeholder="np. Jak przygotować mieszkanie pod wynajem"
              />
            </label>

            <label className="guide-field">
              <span><Icon name="document" /> Krótki opis (zajawka) *</span>
              <textarea
                value={excerpt}
                onChange={(e) => setExcerpt(e.target.value)}
                maxLength={400}
                rows={2}
                placeholder="Jedno-dwa zdania, które zachęcą do przeczytania."
              />
              <small className="guide-field-count">{excerpt.length}/400</small>
            </label>

            <div className="guide-field">
              <span><Icon name="document" /> Treść artykułu *</span>
              <RichTextEditor
                value={content}
                onChange={setContent}
                maxLength={40000}
                placeholder="Napisz swój poradnik. Możesz używać nagłówków, list i pogrubień."
                ariaLabel="Treść artykułu"
              />
            </div>

            <div className="guide-field">
              <span><Icon name="camera" /> Dodatkowe informacje (opcjonalnie)</span>
              <label
                className="guide-attach-drop"
                onDragOver={(e) => e.preventDefault()}
                onDrop={(e) => { e.preventDefault(); void addFiles(e.dataTransfer.files); }}
              >
                <input type="file" accept="image/*" multiple hidden onChange={(e) => { void addFiles(e.target.files); e.target.value = ''; }} />
                <Icon name="upload" />
                <strong>Dodaj zdjęcia, wykresy lub inne materiały</strong>
                <small>Przeciągnij pliki tutaj lub kliknij, aby wybrać — JPG, PNG (do 6 plików)</small>
              </label>
              {attachments.length > 0 && (
                <div className="guide-attach-grid">
                  {attachments.map((src, index) => (
                    <div className="guide-attach-thumb" key={index}>
                      <img src={src} alt={`Załącznik ${index + 1}`} />
                      <button type="button" aria-label="Usuń" onClick={() => removeAttachment(index)}><Icon name="trash" /></button>
                    </div>
                  ))}
                </div>
              )}
            </div>

            <div className="guide-form-subhead">
              <span className="guide-form-card-icon"><Icon name="user" /></span>
              <div>
                <h3>Dane kontaktowe</h3>
                <p>Skontaktujemy się z Tobą w sprawie publikacji. Dane możesz zmienić.</p>
              </div>
            </div>

            <div className="guide-field-row">
              <label className="guide-field">
                <span><Icon name="user" /> Imię i nazwisko *</span>
                <input
                  value={contactName}
                  onChange={(e) => setContactName(e.target.value)}
                  maxLength={160}
                  placeholder="np. Jan Kowalski"
                  autoComplete="name"
                />
              </label>
              <label className="guide-field">
                <span><Icon name="mail" /> Adres e-mail *</span>
                <input
                  type="email"
                  value={contactEmail}
                  onChange={(e) => setContactEmail(e.target.value)}
                  maxLength={180}
                  placeholder="np. jan.kowalski@email.pl"
                  autoComplete="email"
                />
              </label>
            </div>

            <label className="guide-field">
              <span><Icon name="phone" /> Telefon (opcjonalnie)</span>
              <input
                type="tel"
                value={contactPhone}
                onChange={(e) => setContactPhone(e.target.value)}
                maxLength={40}
                placeholder="np. 600 100 200"
                autoComplete="tel"
              />
            </label>

            {error && <p className="guide-form-error"><Icon name="warning" /> {error}</p>}

            <div className="guide-propose-note">
              <Icon name="shield" />
              <p>Po wysłaniu formularza nasz zespół zapozna się z Twoją propozycją i skontaktuje się z Tobą w sprawie publikacji.</p>
            </div>

            <div className="guide-form-actions">
              <Link className="guide-form-cancel" to={topicSlug ? guideTopicListPath(topicSlug) : ROUTES.guides}>Anuluj</Link>
              <button type="submit" className="guide-form-submit" disabled={submitting}>
                {submitting ? 'Wysyłanie...' : <>Wyślij propozycję <Icon name="arrow" /></>}
              </button>
            </div>
          </div>
        </form>

        <aside className="guide-propose-side">
          <section className="guide-side-card">
            <h3>Jak to działa?</h3>
            <ol className="guide-steps">
              {PROPOSE_STEPS.map((step, index) => (
                <li className="guide-step" key={step.title}>
                  <span className="guide-step-icon"><Icon name={step.icon} /></span>
                  <div>
                    <strong>{index + 1}. {step.title}</strong>
                    <p>{step.text}</p>
                  </div>
                </li>
              ))}
            </ol>
          </section>

          <section className="guide-side-card guide-benefits-card">
            <h3><Icon name="spark" /> Dlaczego warto?</h3>
            <ul className="guide-benefits">
              {PROPOSE_BENEFITS.map((benefit) => (
                <li key={benefit}><Icon name="check" /> {benefit}</li>
              ))}
            </ul>
          </section>
        </aside>
      </div>
    </section>
  );
}

function SellPage() {
  const navigate = useNavigate();
  const { formatPrice, formatPriceNumber } = useDisplay();
  return (
    <section className="sell-page" aria-label="Sprzedaj mieszkanie">
      <section className="sell-hero">
        <img className="sell-hero-photo" src={heroImage} alt="" />
        <div className="sell-hero-gradient" />
        <div className="sell-hero-inner">
          <div className="breadcrumb">
            <span>Strona główna</span>
            <Icon name="chevron" />
            <strong>Sprzedaj mieszkanie</strong>
          </div>

          <div className="sell-copy">
            <h1>
              Sprzedaj mieszkanie
              <span>szybko i bez prowizji.</span>
            </h1>
            <p>Dodaj ogłoszenie za darmo i znajdź kupca bez pośredników.</p>

            <div className="sell-benefit-row">
              <span><Icon name="check" /> 0 zł prowizji</span>
              <span><Icon name="shield" /> Bez ukrytych opłat</span>
              <span><Icon name="group" /> Kupujący bez pośredników</span>
              <span><Icon name="spark" /> Pełne wsparcie</span>
            </div>

            <Link className="sell-primary" to={ROUTES.add}>Dodaj ogłoszenie za darmo</Link>
            <small>Zajmie Ci to tylko 2 minuty</small>
          </div>
        </div>
      </section>

      <div className="sell-container">
        <section className="sell-section">
          <h2>Jak to działa?</h2>
          <div className="sell-steps">
            {sellSteps.map((step, index) => (
              <article className="sell-step" key={step.title}>
                <span>
                  <Icon name={step.icon} />
                </span>
                <strong>{index + 1}. {step.title}</strong>
                <p>{step.text}</p>
              </article>
            ))}
          </div>
        </section>

        <section className="sell-card-grid">
          <article className="sell-info-card">
            <h2>Dlaczego warto sprzedawać u nas?</h2>
            <div className="sell-reasons">
              {sellReasons.map((reason) => (
                <div key={reason.title}>
                  <span>
                    <Icon name={reason.icon} />
                  </span>
                  <p>
                    <strong>{reason.title}</strong>
                    <small>{reason.text}</small>
                  </p>
                </div>
              ))}
            </div>
          </article>

          <article className="sell-valuation-card">
            <h2>Sprawdź wartość swojego mieszkania</h2>
            <p>Bezpłatna wycena online w 30 sekund</p>
            <div className="valuation-input">Podaj adres mieszkania</div>
            <Link to={ROUTES.valuation}>Wyceń mieszkanie</Link>
            <div className="valuation-result">
              <span>Przykładowa wycena</span>
              <small>Kraków, Zabłocie</small>
              <strong>{formatPrice(742000)}</strong>
              <em>{`Zakres: ${formatPriceNumber(720000)} - ${formatPrice(765000)}`}</em>
              <div className="mini-building" aria-hidden="true">
                <span />
                <span />
              </div>
            </div>
          </article>

          <article className="sell-channels-card">
            <h2>Gdzie zobaczą Twoje ogłoszenie:</h2>
            <div className="sell-channel-list">
              {sellChannels.map((channel) => (
                <div key={channel.title}>
                  <span>
                    <Icon name={channel.icon} />
                  </span>
                  <p>
                    <strong>{channel.title}</strong>
                    <small>{channel.text}</small>
                  </p>
                </div>
              ))}
            </div>
          </article>
        </section>

        <section className="sell-feature-strip">
          <h2>Co wyróżnia Twoje ogłoszenie?</h2>
          <div>
            {sellFeatures.map((feature) => (
              <article key={feature.title}>
                <span>
                  <Icon name={feature.icon} />
                </span>
                <p>
                  <strong>{feature.title}</strong>
                  <small>{feature.text}</small>
                </p>
              </article>
            ))}
          </div>
        </section>

        <section className="sell-section">
          <h2>Zobacz opinie naszych użytkowników</h2>
          <div className="testimonial-grid">
            {sellTestimonials.map((testimonial) => (
              <article className="testimonial-card" key={testimonial.name}>
                <div className="testimonial-head">
                  <span>{testimonial.name.charAt(0)}</span>
                  <p>
                    <strong>{testimonial.name}</strong>
                    <small>{testimonial.result}</small>
                  </p>
                </div>
                <p>{testimonial.text}</p>
                <div className="stars" aria-label="Ocena 5 na 5">
                  {Array.from({ length: 5 }).map((_, starIndex) => (
                    <Icon name="star" key={`${testimonial.name}-${starIndex}`} />
                  ))}
                  <span>5.0</span>
                </div>
              </article>
            ))}
          </div>
        </section>

        <section className="sell-bottom-cta">
          <div>
            <strong>Gotowy na szybką i bezpieczną sprzedaż?</strong>
            <span>Wystaw ogłoszenie za darmo i sprzedawaj bez prowizji.</span>
          </div>
          <Link to={ROUTES.add}>Dodaj ogłoszenie za darmo</Link>
          <small>Zajmie Ci to tylko 2 minuty</small>
        </section>
      </div>
    </section>
  );
}

type ValuationForm = {
  location: string;
  market: '' | 'Wtórny' | 'Pierwotny';
  propertyType: '' | 'Mieszkanie' | 'Dom' | 'Lokal użytkowy';
  area: string;
  plotArea: string;
  rooms: string;
  floor: string;
  buildingFloors: string;
  yearBuilt: string;
  buildingType: string;
  buildingMaterial: string;
  commercialPurpose: string;
  streetEntrance: boolean;
  displayWindow: boolean;
  kitchen: string;
  bathrooms: string;
  balcony: boolean;
  balconyArea: string;
  orientation: string;
  cellar: boolean;
  storage: boolean;
  parking: boolean;
  garage: boolean;
  rent: string;
  heating: string;
  hotWater: string;
  elevator: boolean;
  condition: string;
  ownership: string;
  landRegister: boolean;
  amenities: string[];
};

type ValuationResult = {
  ready: boolean;
  minValue: number;
  maxValue: number;
  averageValue: number;
  minPerMeter: number;
  maxPerMeter: number;
  averagePerMeter: number;
  validUntil: string;
  details: { icon: string; label: string; value: string }[];
  mainFactors: string[];
  // Dlaczego nie ma wyniku, gdy sa juz podstawowe dane (np. brak danych rynkowych dla lokalizacji).
  unavailableReason?: string;
  // Zrodlo stawki bazowej - do wyniku i raportu PDF.
  sourceLabel?: string;
};

const INITIAL_VALUATION_FORM: ValuationForm = {
  location: '',
  market: '',
  propertyType: '',
  area: '',
  plotArea: '',
  rooms: '',
  floor: '',
  buildingFloors: '',
  yearBuilt: '',
  buildingType: '',
  buildingMaterial: '',
  commercialPurpose: '',
  streetEntrance: false,
  displayWindow: false,
  kitchen: '',
  bathrooms: '',
  balcony: false,
  balconyArea: '',
  orientation: '',
  cellar: false,
  storage: false,
  parking: false,
  garage: false,
  rent: '',
  heating: '',
  hotWater: '',
  elevator: false,
  condition: '',
  ownership: '',
  landRegister: false,
  amenities: [],
};

// Szkic formularza wyceny w sessionStorage - kroki maja wlasne adresy, wiec dane
// musza przetrwac F5 i Wstecz/Dalej. Znika po zamknieciu karty.
const VALUATION_DRAFT_KEY = 'polskalokalnie.valuationDraft';

function readValuationDraft(): ValuationForm {
  try {
    const raw = window.sessionStorage.getItem(VALUATION_DRAFT_KEY);
    return raw ? { ...INITIAL_VALUATION_FORM, ...(JSON.parse(raw) as Partial<ValuationForm>) } : INITIAL_VALUATION_FORM;
  } catch {
    return INITIAL_VALUATION_FORM;
  }
}

function saveValuationDraft(form: ValuationForm) {
  try {
    window.sessionStorage.setItem(VALUATION_DRAFT_KEY, JSON.stringify(form));
  } catch {
    /* brak dostepu do sessionStorage - szkic nie przetrwa odswiezenia */
  }
}

const VALUATION_STEPS = ['Lokalizacja', 'Szczegóły nieruchomości', 'Stan i udogodnienia', 'Wynik wyceny'];

const VALUATION_APARTMENT_BUILDING_TYPES = ['Blok', 'Kamienica', 'Apartamentowiec', 'Dom wielorodzinny'];
const VALUATION_HOUSE_BUILDING_TYPES = ['Wolnostojący', 'Bliźniak', 'Szeregowy', 'Segment'];
const VALUATION_COMMERCIAL_BUILDING_TYPES = ['Lokal handlowy', 'Biuro', 'Usługi', 'Gastronomia', 'Magazyn'];
const VALUATION_COMMERCIAL_PURPOSES = ['Handel', 'Biuro', 'Usługi', 'Gastronomia', 'Medyczny', 'Magazyn'];

// Stawka bazowa wyceny z prawdziwych danych: cena transakcyjna NBP/GUS dla miasta albo srednia
// cen ofertowych z ogloszen serwisu. sourceLabel trafia do wyniku i raportu PDF.
type ValuationBase = {
  basePerMeter: number;
  sourceLabel: string;
  precisionLabel: string;
  // false, gdy stawka juz dotyczy wycenianego typu (np. srednia z ogloszen domow).
  appliesPropertyMultiplier: boolean;
};

// Dane rynkowe dla wyceny - odpowiedzi /api/price-history dla miasta i dzielnicy.
type ValuationMarketData = {
  city: string;
  district: string;
  apartmentCity: ApiPriceHistory | null;
  apartmentDistrict: ApiPriceHistory | null;
  houseCity: ApiPriceHistory | null;
  houseDistrict: ApiPriceHistory | null;
};

const VALUATION_MIN_DISTRICT_LISTINGS = 3;
const VALUATION_MIN_CITY_LISTINGS_FOR_RATIO = 5;
// GUS publikuje z opoznieniem - starszych danych nie uzywamy jako stawki.
const VALUATION_MAX_GUS_AGE_YEARS = 3;

const VALUATION_PLACE_TYPE_WORDS = new Set(['miasto', 'wies', 'dzielnica', 'osiedle', 'miejscowosc', 'gmina', 'powiat', 'przysiolek', 'kolonia', 'osada']);

// "Kraków, Podgórze" -> miasto Kraków, dzielnica Podgórze. Podpowiedzi mapy maja postac
// "Kraków, miasto, Kraków, małopolskie" - opisy typu, powiatu i wojewodztwa pomijamy.
function parseValuationLocation(location: string): { city: string; district: string } {
  const parts = location.split(',').map((part) => part.trim()).filter(Boolean);
  const city = parts[0] ?? '';
  const district = parts.slice(1).find((part) => {
    const normalized = normalizeHistoryText(part.replace(/^powiat\s+/i, ''));
    return !VALUATION_PLACE_TYPE_WORDS.has(normalized) && !isHistoryRegionName(part)
      && normalized !== normalizeHistoryText(city);
  }) ?? '';
  return { city, district };
}

// Dom albo lokal liczony od cen mieszkan - zaznaczamy to w opisie zrodla.
function buildValuationBase(form: ValuationForm, data: ValuationMarketData | null): ValuationBase | null {
  const base = buildValuationBaseFromData(form, data);
  if (base && base.appliesPropertyMultiplier && (form.propertyType === 'Dom' || form.propertyType === 'Lokal użytkowy')) {
    const what = form.propertyType === 'Dom' ? 'domu' : 'lokalu użytkowego';
    return { ...base, sourceLabel: `${base.sourceLabel}, przeliczona dla ${what} wg modelu` };
  }
  return base;
}

function buildValuationBaseFromData(form: ValuationForm, data: ValuationMarketData | null): ValuationBase | null {
  if (!data || !data.city) {
    return null;
  }
  const where = [data.city, data.district].filter(Boolean).join(', ');
  const cityListings = data.apartmentCity?.current ?? null;
  const districtListings = data.apartmentDistrict?.current ?? null;
  // Korekta dzielnicy z naszych ogloszen - tylko przy wystarczajacej liczbie ogloszen w obu grupach.
  const districtRatio = data.district && districtListings && cityListings
    && districtListings.listingsCount >= VALUATION_MIN_DISTRICT_LISTINGS
    && cityListings.listingsCount >= VALUATION_MIN_CITY_LISTINGS_FOR_RATIO
    ? clampNumber(districtListings.avgPricePerM2 / cityListings.avgPricePerM2, 0.7, 1.4)
    : null;
  const districtNote = districtRatio != null
    ? `, korekta dzielnicy wg ogłoszeń ${districtRatio >= 1 ? '+' : ''}${((districtRatio - 1) * 100).toFixed(1).replace('.', ',')}%`
    : '';

  if (form.propertyType === 'Dom') {
    const houseListings = [data.houseDistrict?.current, data.houseCity?.current]
      .find((current) => current && current.listingsCount >= VALUATION_MIN_DISTRICT_LISTINGS) ?? null;
    if (houseListings) {
      return {
        basePerMeter: houseListings.avgPricePerM2,
        sourceLabel: `średnia cen ofertowych domów z ${houseListings.listingsCount} ogłoszeń w serwisie (${where})`,
        precisionLabel: 'Dane: ogłoszenia domów w tej lokalizacji',
        appliesPropertyMultiplier: false,
      };
    }
  }

  const nbp = data.apartmentCity?.nbp?.[data.apartmentCity.nbp.length - 1] ?? null;
  const gusAll = data.apartmentCity?.gus ?? [];
  const gus = gusAll[gusAll.length - 1] ?? null;
  const gusFresh = gus && gus.year >= new Date().getFullYear() - VALUATION_MAX_GUS_AGE_YEARS ? gus : null;
  const transaction = nbp
    ? { price: nbp.pricePerM2, label: `cena transakcyjna mieszkań NBP, rynek ${(data.apartmentCity?.nbpMarket ?? 'Wtórny').toLowerCase()}, ${HISTORY_ROMAN_QUARTERS[nbp.quarter - 1]} kw. ${nbp.year} (${data.city})` }
    : gusFresh
      ? { price: gusFresh.pricePerM2, label: `cena transakcyjna mieszkań GUS, ${HISTORY_ROMAN_QUARTERS[gusFresh.quarter - 1]} kw. ${gusFresh.year} (${data.city})` }
      : null;
  if (transaction) {
    return {
      basePerMeter: Math.round(transaction.price * (districtRatio ?? 1)),
      sourceLabel: `${transaction.label}${districtNote}`,
      precisionLabel: districtRatio != null ? 'Dokładność: dzielnica' : 'Dokładność: całe miasto',
      appliesPropertyMultiplier: true,
    };
  }

  // Bez cen transakcyjnych - srednia cen ofertowych mieszkan z naszych ogloszen.
  const listings = districtListings && districtListings.listingsCount >= VALUATION_MIN_DISTRICT_LISTINGS
    ? { current: districtListings, place: where }
    : cityListings ? { current: cityListings, place: data.city } : null;
  if (listings) {
    return {
      basePerMeter: listings.current.avgPricePerM2,
      sourceLabel: `średnia cen ofertowych mieszkań z ${listings.current.listingsCount} ogłoszeń w serwisie (${listings.place})`,
      precisionLabel: listings.current.listingsCount < VALUATION_MIN_DISTRICT_LISTINGS
        ? 'Dokładność: orientacyjna (mało ogłoszeń)'
        : 'Dokładność: ogłoszenia w tej lokalizacji',
      appliesPropertyMultiplier: true,
    };
  }
  return null;
}

const VALUATION_CONDITION_OPTIONS = [
  { icon: 'paint', title: 'Do remontu', text: 'Nieruchomość wymaga generalnego remontu.', multiplier: 0.88 },
  { icon: 'hammer', title: 'Do odświeżenia', text: 'Nieruchomość wymaga odświeżenia lub drobnych napraw.', multiplier: 0.95 },
  { icon: 'check', title: 'Dobry', text: 'Nieruchomość w dobrym stanie, gotowa do użytkowania.', multiplier: 1 },
  { icon: 'star', title: 'Bardzo dobry', text: 'Nieruchomość w bardzo dobrym stanie, bez dodatkowych nakładów.', multiplier: 1.06 },
  { icon: 'spark', title: 'Idealny', text: 'Nieruchomość jak nowa, wykończona w wysokim standardzie.', multiplier: 1.1 },
];

const VALUATION_AMENITY_OPTIONS = [
  { icon: 'sun', title: 'Balkon / loggia', impact: 0.018 },
  { icon: 'house', title: 'Taras', impact: 0.025 },
  { icon: 'spark', title: 'Ogródek', impact: 0.032 },
  { icon: 'building', title: 'Winda', impact: 0.025 },
  { icon: 'check', title: 'Miejsce parkingowe', impact: 0.03 },
  { icon: 'car', title: 'Garaż', impact: 0.04 },
  { icon: 'building', title: 'Komórka lokatorska', impact: 0.01 },
  { icon: 'list', title: 'Piwnica', impact: 0.008 },
  { icon: 'snow', title: 'Klimatyzacja', impact: 0.014 },
  { icon: 'flame', title: 'Ogrzewanie podłogowe', impact: 0.014 },
  { icon: 'screen', title: 'Rolety zewnętrzne', impact: 0.006 },
  { icon: 'camera', title: 'Monitoring', impact: 0.006 },
  { icon: 'shield', title: 'Ochrona', impact: 0.01 },
  { icon: 'user', title: 'Recepcja', impact: 0.014 },
  { icon: 'scale', title: 'Siłownia', impact: 0.012 },
  { icon: 'spark', title: 'Plac zabaw', impact: 0.006 },
];

const VALUATION_VISIBLE_AMENITY_OPTIONS = VALUATION_AMENITY_OPTIONS.filter((option) => ![
  'Balkon / loggia',
  'Winda',
  'Miejsce parkingowe',
  'Garaż',
  'Komórka lokatorska',
  'Piwnica',
].includes(option.title));

function getValuationAmenityOptions(propertyType: ValuationForm['propertyType']) {
  if (propertyType === 'Dom') {
    return VALUATION_AMENITY_OPTIONS.filter((option) => [
      'Taras',
      'Ogródek',
      'Miejsce parkingowe',
      'Garaż',
      'Piwnica',
      'Klimatyzacja',
      'Ogrzewanie podłogowe',
      'Monitoring',
      'Rolety zewnętrzne',
    ].includes(option.title));
  }
  if (propertyType === 'Lokal użytkowy') {
    return VALUATION_AMENITY_OPTIONS.filter((option) => [
      'Klimatyzacja',
      'Monitoring',
      'Ochrona',
      'Recepcja',
      'Miejsce parkingowe',
      'Rolety zewnętrzne',
    ].includes(option.title));
  }
  return VALUATION_VISIBLE_AMENITY_OPTIONS;
}

function clampNumber(value: number, min: number, max: number): number {
  return Math.min(max, Math.max(min, value));
}

function roundToThousand(value: number): number {
  return Math.round(value / 1000) * 1000;
}

function parsePositiveNumber(value: string): number | null {
  const parsed = parseNumber(value);
  return parsed != null && parsed > 0 ? parsed : null;
}

function getAreaMultiplier(area: number): number {
  if (area < 35) {
    return 1.08;
  }
  if (area <= 55) {
    return 1.03;
  }
  if (area <= 75) {
    return 1;
  }
  if (area <= 100) {
    return 0.96;
  }
  return 0.92;
}

function getRoomsMultiplier(form: ValuationForm, area: number): number {
  const rooms = parsePositiveNumber(form.rooms) ?? 0;
  if (!rooms) {
    return 1;
  }
  const areaPerRoom = area / rooms;
  if (areaPerRoom >= 14 && areaPerRoom <= 24) {
    return 1.025;
  }
  if (areaPerRoom < 11 || areaPerRoom > 32) {
    return 0.97;
  }
  return 1;
}

function getYearMultiplier(yearBuilt: string): number {
  const year = parsePositiveNumber(yearBuilt);
  if (!year) {
    if (yearBuilt === 'Przed 1990') {
      return 0.93;
    }
    if (yearBuilt === '1990-2010') {
      return 0.98;
    }
    if (yearBuilt === 'Po 2010') {
      return 1.05;
    }
    return 1;
  }
  if (year < 1990) {
    return 0.93;
  }
  if (year <= 2010) {
    return 0.98;
  }
  if (year <= 2020) {
    return 1.04;
  }
  return 1.07;
}

function getFloorMultiplier(form: ValuationForm): number {
  if (form.propertyType === 'Dom') {
    return 1;
  }
  const floor = form.floor.toLowerCase();
  const buildingFloors = parsePositiveNumber(form.buildingFloors) ?? 0;
  if (floor === 'parter') {
    return 0.97;
  }
  if (floor.includes('poddasze')) {
    return 0.96;
  }
  const floorNumber = parsePositiveNumber(form.floor);
  if (!floorNumber) {
    return 1;
  }
  if (!form.elevator && floorNumber >= 4) {
    return 0.94;
  }
  if (floorNumber >= 1 && floorNumber <= 3) {
    return 1.015;
  }
  if (buildingFloors && floorNumber === buildingFloors && buildingFloors > 4) {
    return 0.985;
  }
  return 1;
}

function getBuildingTypeMultiplier(form: ValuationForm): number {
  if (form.propertyType === 'Dom') {
    if (form.buildingType === 'Wolnostojący') {
      return 1.06;
    }
    if (form.buildingType === 'Bliźniak') {
      return 1.01;
    }
    if (form.buildingType === 'Szeregowy' || form.buildingType === 'Segment') {
      return 0.98;
    }
    return 1;
  }
  if (form.propertyType === 'Lokal użytkowy') {
    if (form.buildingType === 'Lokal handlowy' || form.commercialPurpose === 'Handel') {
      return 1.04;
    }
    if (form.buildingType === 'Usługi' || form.commercialPurpose === 'Usługi' || form.commercialPurpose === 'Medyczny') {
      return 1.02;
    }
    if (form.buildingType === 'Magazyn' || form.commercialPurpose === 'Magazyn') {
      return 0.86;
    }
    if (form.buildingType === 'Gastronomia' || form.commercialPurpose === 'Gastronomia') {
      return 0.96;
    }
    return 1;
  }
  return form.buildingType === 'Apartamentowiec' ? 1.06 : form.buildingType === 'Kamienica' ? 1.01 : form.buildingType === 'Blok' || !form.buildingType ? 1 : 0.98;
}

function getPropertyTypeDetailMultiplier(form: ValuationForm, plotAreaSquareMeters: number | null): number {
  if (form.propertyType === 'Dom') {
    const plotArea = plotAreaSquareMeters;
    const plotMultiplier = plotArea ? plotArea >= 1000 ? 1.06 : plotArea >= 600 ? 1.035 : plotArea >= 300 ? 1.015 : 0.985 : 1;
    const garageMultiplier = form.garage ? 1.018 : 1;
    return plotMultiplier * garageMultiplier;
  }
  if (form.propertyType === 'Lokal użytkowy') {
    const entranceMultiplier = form.streetEntrance ? 1.04 : 1;
    const displayMultiplier = form.displayWindow ? 1.035 : 1;
    const purposeMultiplier = form.commercialPurpose === 'Handel' ? 1.02 : form.commercialPurpose === 'Magazyn' ? 0.92 : 1;
    return entranceMultiplier * displayMultiplier * purposeMultiplier;
  }
  return 1;
}

function getAmenityMultiplier(form: ValuationForm): number {
  const selectedImpacts = getValuationAmenityOptions(form.propertyType)
    .filter((option) => form.amenities.includes(option.title))
    .reduce((sum, option) => sum + option.impact, 0);
  const booleanImpacts = [
    form.propertyType === 'Mieszkanie' && form.balcony ? 0.006 : 0,
    form.cellar ? 0.004 : 0,
    form.storage ? 0.006 : 0,
    form.parking ? 0.008 : 0,
    form.garage ? 0.012 : 0,
    form.propertyType !== 'Dom' && form.elevator ? 0.008 : 0,
    form.landRegister ? 0.006 : -0.025,
  ].reduce((sum, value) => sum + value, 0);
  return 1 + clampNumber(selectedImpacts + booleanImpacts, -0.04, 0.16);
}

/**
 * Formatery i przelicznik jednostek przekazywane do wyceny.
 *
 * Kalkulator jest zwykla funkcja, a nie komponentem, wiec nie moze sam siegnac po useDisplay() -
 * ValuationPage podaje mu to, co wyciagnal z providera.
 */
type ValuationDisplay = {
  toSquareMeters: (valueInUserUnit: number) => number;
  areaSuffix: string;
  formatAreaNumber: (squareMeters: number) => string;
  formatPricePerAreaNumber: (plnPerSquareMeter: number) => string;
};

// base - stawka z danych rynkowych (null: jeszcze sie wczytuje albo brak danych dla lokalizacji).
function calculateApartmentValuation(form: ValuationForm, display: ValuationDisplay, base: ValuationBase | null,
  baseLoading: boolean): ValuationResult {
  // Metraz przychodzi w jednostce wybranej przez uzytkownika, a caly model cen operuje na m² -
  // dlatego normalizujemy go tutaj, zanim trafi do progow i mnoznikow.
  const areaInput = parsePositiveNumber(form.area);
  const area = areaInput ? display.toSquareMeters(areaInput) : null;
  const plotAreaInput = parsePositiveNumber(form.plotArea);
  const plotArea = plotAreaInput ? display.toSquareMeters(plotAreaInput) : null;
  if (!area || !base) {
    return {
      ready: false,
      minValue: 0,
      maxValue: 0,
      averageValue: 0,
      minPerMeter: 0,
      maxPerMeter: 0,
      averagePerMeter: 0,
      validUntil: '',
      details: [],
      mainFactors: [],
      unavailableReason: area && form.location.trim().length >= 2
        ? baseLoading
          ? 'Pobieramy dane rynkowe dla tej lokalizacji…'
          : 'Brak danych rynkowych dla tej lokalizacji - nie mamy cen transakcyjnych NBP/GUS ani ogłoszeń w serwisie. Spróbuj wpisać większe miasto w formacie „Miasto, dzielnica”.'
        : undefined,
    };
  }

  const basePerMeter = base.basePerMeter;
  const conditionMultiplier = VALUATION_CONDITION_OPTIONS.find((option) => option.title === form.condition)?.multiplier ?? 1;
  // NBP podaje rynek wprost - korekta rynku tylko, gdy stawka nie dotyczy juz wybranego rynku.
  const marketMultiplier = form.market === 'Pierwotny' && !base.sourceLabel.includes('pierwotny') ? 1.07 : 1;
  const propertyMultiplier = !base.appliesPropertyMultiplier ? 1
    : form.propertyType === 'Dom' ? 0.86 : form.propertyType === 'Lokal użytkowy' ? 0.78 : 1;
  const buildingMultiplier = getBuildingTypeMultiplier(form);
  const materialMultiplier = form.buildingMaterial === 'Cegła' ? 1.025 : form.buildingMaterial === 'Żelbet' ? 1.015 : form.buildingMaterial === 'Wielka płyta' ? 0.975 : 1;
  const kitchenMultiplier = form.propertyType !== 'Lokal użytkowy' && form.kitchen === 'Oddzielna' && area >= 50 ? 1.01 : 1;
  const orientationMultiplier = form.propertyType !== 'Lokal użytkowy' && form.orientation.includes('Połud') ? 1.012 : form.orientation === 'Północ' ? 0.988 : 1;
  const rent = parsePositiveNumber(form.rent);
  const rentMultiplier = rent && area ? clampNumber(1 - Math.max(0, rent / area - 16) * 0.002, 0.97, 1.01) : 1;

  const adjustedPerMeter = basePerMeter
    * marketMultiplier
    * propertyMultiplier
    * getAreaMultiplier(area)
    * getRoomsMultiplier(form, area)
    * getYearMultiplier(form.yearBuilt)
    * getFloorMultiplier(form)
    * conditionMultiplier
    * buildingMultiplier
    * materialMultiplier
    * getPropertyTypeDetailMultiplier(form, plotArea)
    * kitchenMultiplier
    * orientationMultiplier
    * rentMultiplier
    * getAmenityMultiplier(form);

  const averagePerMeter = Math.round(adjustedPerMeter / 50) * 50;
  const averageValue = roundToThousand(averagePerMeter * area);
  const spread = form.location.split(',').length >= 3 ? 0.055 : 0.075;
  const minValue = roundToThousand(averageValue * (1 - spread));
  const maxValue = roundToThousand(averageValue * (1 + spread));
  const minPerMeter = Math.round(minValue / area / 50) * 50;
  const maxPerMeter = Math.round(maxValue / area / 50) * 50;
  const validUntil = new Intl.DateTimeFormat('pl-PL').format(new Date(Date.now() + 30 * 24 * 60 * 60 * 1000));
  const propertyLabel = form.propertyType || 'Nieruchomość';
  const propertyDetails = [
    { icon: 'house', label: 'Typ nieruchomości', value: propertyLabel },
    { icon: 'house', label: form.propertyType === 'Dom' ? 'Powierzchnia domu' : form.propertyType === 'Lokal użytkowy' ? 'Powierzchnia lokalu' : 'Powierzchnia', value: `${display.formatAreaNumber(area)} ${display.areaSuffix}` },
    ...(form.propertyType === 'Dom' ? [
      { icon: 'list', label: 'Powierzchnia działki', value: plotArea ? `${display.formatAreaNumber(plotArea)} ${display.areaSuffix}` : 'Nie podano' },
      { icon: 'building', label: 'Kondygnacje', value: form.buildingFloors || 'Nie podano' },
    ] : []),
    ...(form.propertyType === 'Lokal użytkowy' ? [
      { icon: 'building', label: 'Przeznaczenie', value: form.commercialPurpose || 'Nie podano' },
      { icon: 'building', label: 'Liczba pomieszczeń', value: form.rooms || 'Nie podano' },
      { icon: 'check', label: 'Wejście z ulicy', value: form.streetEntrance ? 'Tak' : 'Nie' },
      { icon: 'screen', label: 'Witryna', value: form.displayWindow ? 'Tak' : 'Nie' },
      { icon: 'building', label: 'Poziom lokalu', value: form.floor || 'Nie podano' },
    ] : [
      { icon: 'building', label: form.propertyType === 'Dom' ? 'Liczba pokoi' : 'Liczba pokoi', value: form.rooms || 'Nie podano' },
    ]),
    ...(form.propertyType === 'Mieszkanie' ? [
      { icon: 'building', label: 'Piętro', value: `${form.floor || 'Nie podano'} z ${form.buildingFloors || '?'}` },
      { icon: 'sun', label: 'Ekspozycja okien', value: form.orientation || 'Nie podano' },
    ] : []),
  ];

  return {
    ready: true,
    minValue,
    maxValue,
    averageValue,
    minPerMeter,
    maxPerMeter,
    averagePerMeter,
    validUntil,
    details: [
      { icon: 'pin', label: 'Lokalizacja', value: form.location },
      { icon: 'building', label: 'Rynek', value: form.market ? `Rynek ${form.market.toLowerCase()}` : 'Nie podano' },
      { icon: 'check', label: 'Udogodnienia', value: form.amenities.length ? form.amenities.slice(0, 5).join(', ') : 'Nie wskazano' },
      ...propertyDetails,
      { icon: 'calendar', label: 'Rok budowy', value: form.yearBuilt || 'Nie podano' },
      { icon: 'document', label: 'Forma własności', value: form.ownership || 'Nie podano' },
      { icon: 'paint', label: 'Stan techniczny', value: form.condition || 'Nie podano' },
      { icon: 'list', label: 'Księga wieczysta', value: form.landRegister ? 'Tak' : 'Nie' },
      { icon: 'money', label: form.propertyType === 'Dom' ? 'Koszty utrzymania' : form.propertyType === 'Lokal użytkowy' ? 'Czynsz / koszty' : 'Czynsz administracyjny', value: rent ? `${formatPln(rent)} / mies.` : 'Nie podano' },
    ],
    mainFactors: [
      `Stawka bazowa: ${display.formatPricePerAreaNumber(basePerMeter)} za ${display.areaSuffix} - ${base.sourceLabel}`,
      base.precisionLabel,
      `Stan: x${conditionMultiplier.toFixed(2)}`,
      `Rok, budynek i typ: x${(getYearMultiplier(form.yearBuilt) * buildingMultiplier * materialMultiplier * getPropertyTypeDetailMultiplier(form, plotArea)).toFixed(2)}`,
      'Korekty (stan, piętro, rok budowy, udogodnienia) to model orientacyjny, nie operat szacunkowy.',
    ],
    sourceLabel: base.sourceLabel,
  };
}

async function downloadValuationReportPdf(form: ValuationForm, valuation: ValuationResult, fmt: PriceFormatters & { areaSuffix: string; formatPricePerAreaNumber: (plnPerSquareMeter: number) => string }) {
  if (!valuation.ready) {
    window.alert('Najpierw uzupełnij dane potrzebne do wyceny.');
    return;
  }

  const today = new Intl.DateTimeFormat('pl-PL').format(new Date());
  const reportId = `PL-${Date.now().toString().slice(-8)}`;
  const fileLocation = form.location || 'nieruchomosc';
  const details = valuation.details.filter((detail) => detail.value !== 'Nie podano' && detail.value !== 'Nie wskazano');
  const leftDetails = details.filter((_, index) => index % 2 === 0);
  const rightDetails = details.filter((_, index) => index % 2 === 1);
  const makeDetailStack = (items: ValuationResult['details']) => items.flatMap((detail) => [
    { text: detail.label, style: 'metaLabel', margin: [0, 0, 0, 2] },
    { text: detail.value, style: 'metaValue', margin: [0, 0, 0, 10] },
  ]);
  const safeLocation = fileLocation.toLowerCase().replace(/[^a-z0-9ąćęłńóśźż-]+/gi, '-').replace(/^-|-$/g, '') || 'wycena';

  type PdfMakeRuntime = {
    addFontContainer: (fontContainer: PdfMakeFontContainer) => void;
    addVirtualFileSystem: (vfs: Record<string, string>) => void;
    createPdf: (definition: unknown) => { getBlob: () => Promise<Blob> };
  };

  type PdfMakeFontContainer = {
    vfs: Record<string, { data: string; encoding?: string } | string>;
    fonts: Record<string, Record<string, string>>;
  };

  const unwrapModuleDefault = <T,>(module: T | { default: T }): T => 'default' in Object(module) ? (module as { default: T }).default : module as T;
  const downloadBlob = (blob: Blob, fileName: string) => {
    const objectUrl = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = objectUrl;
    link.download = fileName;
    link.rel = 'noopener';
    document.body.appendChild(link);
    link.click();
    link.remove();
    window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
  };

  let pdfMake: PdfMakeRuntime;
  try {
    const pdfMakeModule = await import('pdfmake/build/pdfmake.js') as unknown as PdfMakeRuntime | { default: PdfMakeRuntime };
    const robotoFontModule = await import('pdfmake/build/fonts/Roboto.js') as unknown as PdfMakeFontContainer | { default: PdfMakeFontContainer };
    pdfMake = unwrapModuleDefault(pdfMakeModule);
    pdfMake.addFontContainer(unwrapModuleDefault(robotoFontModule));
  } catch (error) {
    console.error('Nie udało się załadować generatora PDF', error);
    window.alert('Nie udało się przygotować raportu PDF. Odśwież stronę i spróbuj ponownie.');
    return;
  }

  const docDefinition = {
    pageSize: 'A4',
    pageMargins: [40, 36, 40, 44],
    defaultStyle: {
      font: 'Roboto',
      color: '#14223a',
      fontSize: 9,
      lineHeight: 1.25,
    },
    footer: (currentPage: number, pageCount: number) => ({
      margin: [40, 0, 40, 0],
      columns: [
        { text: 'Polska Lokalnie | raport informacyjny', color: '#8793a3', fontSize: 8 },
        { text: `strona ${currentPage}/${pageCount}`, alignment: 'right', color: '#8793a3', fontSize: 8 },
      ],
    }),
    content: [
      {
        table: {
          widths: ['*', 'auto'],
          body: [[
            {
              border: [false, false, false, false],
              fillColor: '#10a15e',
              margin: [0, 0, 0, 0],
              stack: [
                { text: 'Polska Lokalnie', style: 'brand' },
                { text: `Raport wyceny nieruchomości | ${today}`, style: 'brandMeta' },
              ],
            },
            {
              border: [false, false, false, false],
              fillColor: '#10a15e',
              alignment: 'right',
              text: `Nr raportu: ${reportId}`,
              style: 'brandMeta',
              margin: [0, 22, 40, 0],
            },
          ]],
        },
        layout: 'noBorders',
        margin: [-40, -36, -40, 22],
      },
      { text: 'Raport szacunkowej wyceny nieruchomości', style: 'title' },
      {
        text: `Dokument przygotowany automatycznie na podstawie danych z formularza. Stawka bazowa: ${valuation.sourceLabel ?? 'dane rynkowe serwisu'}. Raport ma charakter informacyjny i nie jest operatem szacunkowym.`,
        style: 'lead',
        margin: [0, 0, 0, 18],
      },
      {
        table: {
          widths: ['*'],
          body: [[
            {
              border: [false, false, false, false],
              stack: [
                { text: 'Szacowana wartość rynkowa', style: 'cardLabel' },
                { text: `${fmt.formatPrice(valuation.minValue)} - ${fmt.formatPrice(valuation.maxValue)}`, style: 'priceRange' },
                { text: `Średnio: ${fmt.formatPrice(valuation.averageValue)} | ${fmt.formatPricePerArea(valuation.averagePerMeter)}`, style: 'cardText' },
                { text: `Zakres za ${fmt.areaSuffix}: ${fmt.formatPricePerAreaNumber(valuation.minPerMeter)} - ${fmt.formatPricePerArea(valuation.maxPerMeter)}`, style: 'cardText' },
              ],
            },
          ]],
        },
        layout: {
          hLineColor: () => '#c7e9d8',
          vLineColor: () => '#c7e9d8',
          hLineWidth: () => 1,
          vLineWidth: () => 1,
          paddingLeft: () => 14,
          paddingRight: () => 14,
          paddingTop: () => 14,
          paddingBottom: () => 14,
        },
        fillColor: '#f4fbf7',
        margin: [0, 0, 0, 20],
      },
      { text: 'Dane nieruchomości', style: 'sectionTitle' },
      {
        columns: [
          { width: '*', stack: makeDetailStack(leftDetails) },
          { width: '*', stack: makeDetailStack(rightDetails) },
        ],
        columnGap: 28,
        margin: [0, 0, 0, 8],
      },
      { text: 'Czynniki, które wpłynęły na wynik', style: 'sectionTitle' },
      {
        ul: [
          ...valuation.mainFactors,
          `Rynek: ${form.market || 'nie podano'}, typ nieruchomości: ${form.propertyType || 'nie podano'}.`,
          'Uwzględniono stan techniczny, rok i typ budynku, piętro, metraż, układ lokalu, czynsz oraz zaznaczone udogodnienia.',
        ],
        style: 'bulletList',
        margin: [0, 0, 0, 14],
      },
      { text: 'Jak czytać wynik', style: 'sectionTitle' },
      {
        ul: [
          'Zakres minimalny i maksymalny pokazuje prawdopodobny przedział ceny ofertowo-transakcyjnej dla podanych danych. Nie jest to gwarantowana cena sprzedaży.',
          'Dokładność rośnie, gdy podasz precyzyjną lokalizację, metraż, rok budowy, stan techniczny, piętro, czynsz, formę własności i udogodnienia.',
          'Model korzysta z baz cen m² dla miast, korekt regionalnych oraz mnożników za lokalizację, standard, budynek i cechy lokalu.',
        ],
        style: 'bulletList',
        margin: [0, 0, 0, 16],
      },
      {
        table: {
          widths: ['*'],
          body: [[{
            border: [false, false, false, false],
            stack: [
              { text: 'Ważne zastrzeżenie', style: 'warningTitle' },
              {
                text: 'Raport jest automatyczną, orientacyjną wyceną przygotowaną na podstawie informacji wpisanych w formularzu. Nie stanowi operatu szacunkowego, opinii rzeczoznawcy majątkowego ani oferty handlowej. Ostateczna cena może zależeć od negocjacji, popytu, stanu prawnego, dokumentów i indywidualnych cech nieruchomości.',
                style: 'warningText',
              },
            ],
          }]],
        },
        layout: {
          hLineColor: () => '#f1d396',
          vLineColor: () => '#f1d396',
          hLineWidth: () => 1,
          vLineWidth: () => 1,
          paddingLeft: () => 12,
          paddingRight: () => 12,
          paddingTop: () => 10,
          paddingBottom: () => 10,
        },
        fillColor: '#fff8eb',
      },
    ],
    styles: {
      brand: { color: '#ffffff', fontSize: 18, bold: true, margin: [40, 20, 0, 6] },
      brandMeta: { color: '#ffffff', fontSize: 9, bold: true, margin: [40, 0, 40, 20] },
      title: { fontSize: 21, bold: true, color: '#14223a', margin: [0, 0, 0, 6] },
      lead: { fontSize: 9.5, color: '#526171' },
      cardLabel: { fontSize: 9, bold: true, color: '#526171', margin: [0, 0, 0, 8] },
      priceRange: { fontSize: 20, bold: true, color: '#0b9f5c', margin: [0, 0, 0, 10] },
      cardText: { fontSize: 9.5, bold: true, color: '#27364d', margin: [0, 0, 0, 4] },
      sectionTitle: { fontSize: 14, bold: true, color: '#14223a', margin: [0, 10, 0, 10] },
      metaLabel: { fontSize: 8, bold: true, color: '#617086' },
      metaValue: { fontSize: 9.5, bold: true, color: '#14223a' },
      bulletList: { fontSize: 9, color: '#27364d' },
      warningTitle: { fontSize: 10, bold: true, color: '#8e5b12', margin: [0, 0, 0, 5] },
      warningText: { fontSize: 8.8, color: '#5a482e' },
    },
  };

  try {
    const pdfBlob = await pdfMake.createPdf(docDefinition).getBlob();
    downloadBlob(pdfBlob, `raport-wyceny-${safeLocation}.pdf`);
  } catch (error) {
    console.error('Nie udało się wygenerować raportu PDF', error);
    window.alert('Nie udało się wygenerować raportu PDF. Sprawdź dane wyceny i spróbuj ponownie.');
  }
}

// ---- Kalkulator zdolności kredytowej -------------------------------------

type CreditMaritalStatus = 'Panna / kawaler' | 'W związku' | 'Małżeństwo' | 'Rozwiedziony/a' | 'Wdowiec/wdowa';
type CreditIncomeSource = 'Umowa o pracę' | 'Umowa zlecenie' | 'Działalność gospodarcza' | 'B2B' | 'Emerytura' | 'Renta' | 'Dochód z najmu';
type CreditSeniority = 'do 3 miesięcy' | '3-12 miesięcy' | '1-3 lata' | 'powyżej 3 lat';
type CreditRepayment = 'równe' | 'malejące';

type CreditForm = {
  age: string;
  maritalStatus: CreditMaritalStatus;
  adults: number;
  children: number;
  income: string;
  partnerIncome: string;
  incomeSource: CreditIncomeSource;
  seniority: CreditSeniority;
  loanInstallments: string;
  leasing: string;
  alimony: string;
  otherObligations: string;
  creditCardLimit: string;
  accountLimit: string;
  propertyPrice: string;
  ownContribution: string;
  loanYears: number;
  interestRate: string;
  repayment: CreditRepayment;
};

const CREDIT_MARITAL_OPTIONS: CreditMaritalStatus[] = ['Panna / kawaler', 'W związku', 'Małżeństwo', 'Rozwiedziony/a', 'Wdowiec/wdowa'];
const CREDIT_INCOME_SOURCES: CreditIncomeSource[] = ['Umowa o pracę', 'Umowa zlecenie', 'Działalność gospodarcza', 'B2B', 'Emerytura', 'Renta', 'Dochód z najmu'];
const CREDIT_SENIORITY_OPTIONS: CreditSeniority[] = ['do 3 miesięcy', '3-12 miesięcy', '1-3 lata', 'powyżej 3 lat'];

const INITIAL_CREDIT_FORM: CreditForm = {
  age: '',
  maritalStatus: 'W związku',
  adults: 1,
  children: 0,
  income: '',
  partnerIncome: '',
  incomeSource: 'Umowa o pracę',
  seniority: '1-3 lata',
  loanInstallments: '',
  leasing: '',
  alimony: '',
  otherObligations: '',
  creditCardLimit: '',
  accountLimit: '',
  propertyPrice: '',
  ownContribution: '',
  loanYears: 25,
  interestRate: '7,2',
  repayment: 'równe',
};

const LIVING_COST_FIRST_ADULT = 1500;
const LIVING_COST_NEXT_ADULT = 1000;
const LIVING_COST_CHILD = 800;
const LIMIT_MONTHLY_CHARGE = 0.05;
const CREDIT_MIN_YEARS = 5;
const CREDIT_MAX_YEARS = 35;

// Metodyka jak w bankach (Rekomendacja S KNF) - bez tych regul kalkulator zawyza zdolnosc:
// 1. Zdolnosc bada sie przy stopie podwyzszonej o bufor, a nie przy stopie z umowy.
const CREDIT_STRESS_BUFFER_PP = 2.5;
// 2. Nawet dla kredytu na 35 lat zdolnosc liczy sie tak, jakby okres wynosil maksymalnie 25 lat.
const CREDIT_CAPACITY_MAX_YEARS = 25;
// 3. Kredyt powinien zostac splacony do 70. roku zycia kredytobiorcy.
const CREDIT_MAX_AGE_AT_PAYOFF = 70;
// 4. Laczna obsluga dlugu (DStI): do 40% dochodu, powyzej przecietnego wynagrodzenia do 50%.
const CREDIT_DSTI_STANDARD = 0.4;
const CREDIT_DSTI_HIGH_INCOME = 0.5;
const CREDIT_HIGH_INCOME_THRESHOLD = 8000;
// 5. Bank finansuje maksymalnie 90% wartosci nieruchomosci - reszta to wkład własny.
const CREDIT_MAX_LTV = 0.9;

// Banki przyjmuja do wyliczen tylko czesc dochodu z form innych niz umowa o prace.
const CREDIT_INCOME_FACTORS: Record<CreditIncomeSource, number> = {
  'Umowa o pracę': 1,
  'Umowa zlecenie': 0.8,
  'Działalność gospodarcza': 0.9,
  'B2B': 0.85,
  'Emerytura': 1,
  'Renta': 0.9,
  'Dochód z najmu': 0.7,
};

function creditNum(value: string): number {
  const parsed = parseNumber(value);
  return parsed == null || parsed < 0 ? 0 : parsed;
}

// Rata annuitetowa (równa) dla danego kapitału.
function annuityInstallmentForPrincipal(principal: number, monthlyRate: number, months: number): number {
  if (principal <= 0 || months <= 0) return 0;
  if (monthlyRate <= 0) return principal / months;
  return (principal * monthlyRate) / (1 - Math.pow(1 + monthlyRate, -months));
}

// Pierwsza (najwyższa) rata malejąca dla danego kapitału.
function decreasingFirstInstallmentForPrincipal(principal: number, monthlyRate: number, months: number): number {
  if (principal <= 0 || months <= 0) return 0;
  return principal / months + principal * monthlyRate;
}

// Odwrotność: maksymalny kapitał, jaki uniesie dana rata.
function principalForInstallment(installment: number, monthlyRate: number, months: number, decreasing: boolean): number {
  if (installment <= 0 || months <= 0) return 0;
  if (decreasing) {
    return installment / (1 / months + monthlyRate);
  }
  if (monthlyRate <= 0) return installment * months;
  return (installment * (1 - Math.pow(1 + monthlyRate, -months))) / monthlyRate;
}

type CreditResult = ReturnType<typeof calculateCreditworthiness>;

function calculateCreditworthiness(form: CreditForm) {
  const declaredIncome = creditNum(form.income);
  const declaredPartnerIncome = creditNum(form.partnerIncome);
  // Bank uznaje dochod w zaleznosci od formy zatrudnienia (umowa o prace w 100%, B2B mniej).
  const incomeFactor = CREDIT_INCOME_FACTORS[form.incomeSource] ?? 1;
  const income = declaredIncome * incomeFactor;
  const partnerIncome = declaredPartnerIncome * incomeFactor;
  const declaredTotalIncome = declaredIncome + declaredPartnerIncome;
  const totalIncome = income + partnerIncome;

  const adults = Math.max(1, Math.round(form.adults));
  const children = Math.max(0, Math.round(form.children));
  const livingCosts = LIVING_COST_FIRST_ADULT + Math.max(0, adults - 1) * LIVING_COST_NEXT_ADULT + children * LIVING_COST_CHILD;
  const cardCharge = creditNum(form.creditCardLimit) * LIMIT_MONTHLY_CHARGE;
  const accountCharge = creditNum(form.accountLimit) * LIMIT_MONTHLY_CHARGE;
  const declaredObligations = creditNum(form.loanInstallments) + creditNum(form.leasing) + creditNum(form.alimony) + creditNum(form.otherObligations);
  const totalObligations = declaredObligations + cardCharge + accountCharge;
  const disposable = totalIncome - livingCosts - totalObligations;

  // DStI obejmuje CALA obsluge dlugu, wiec od limitu odejmujemy raty juz splacane.
  const dstiLimit = totalIncome > CREDIT_HIGH_INCOME_THRESHOLD ? CREDIT_DSTI_HIGH_INCOME : CREDIT_DSTI_STANDARD;
  const maxRateByDsti = totalIncome * dstiLimit - totalObligations;
  const maxInstallment = Math.max(0, Math.min(maxRateByDsti, disposable));

  // Kredyt musi zostac splacony do 70. roku zycia - to skraca dostepny okres starszym klientom.
  const age = creditNum(form.age);
  const maxYearsByAge = age > 0 ? Math.max(0, CREDIT_MAX_AGE_AT_PAYOFF - age) : CREDIT_MAX_YEARS;
  const yearsLimit = Math.min(CREDIT_MAX_YEARS, maxYearsByAge);
  const years = Math.max(1, Math.min(yearsLimit, Math.max(CREDIT_MIN_YEARS, Math.round(form.loanYears))));
  const months = years * 12;
  const ageLimitsPeriod = age > 0 && maxYearsByAge < Math.round(form.loanYears);

  const monthlyRate = creditNum(form.interestRate) / 100 / 12;
  const decreasing = form.repayment === 'malejące';

  // Zdolnosc liczymy przy stopie z buforem i okresie nie dluzszym niz 25 lat (Rekomendacja S).
  const stressRatePercent = creditNum(form.interestRate) + CREDIT_STRESS_BUFFER_PP;
  const stressMonthlyRate = stressRatePercent / 100 / 12;
  const capacityYears = Math.min(years, CREDIT_CAPACITY_MAX_YEARS);
  const capacityMonths = capacityYears * 12;

  const maxLoan = principalForInstallment(maxInstallment, stressMonthlyRate, capacityMonths, decreasing);
  const ownContribution = creditNum(form.ownContribution);
  // Bank sfinansuje maks. 90% wartosci, wiec wkład własny ogranicza cene niezaleznie od dochodu.
  const maxPropertyByLtv = ownContribution > 0 ? ownContribution / (1 - CREDIT_MAX_LTV) : 0;
  const maxPropertyPrice = Math.min(maxLoan + ownContribution, maxPropertyByLtv);

  const propertyPrice = creditNum(form.propertyPrice);
  // Zalecany wklad liczymy od ceny, ktora interesuje kupujacego. Dopiero gdy jej nie poda,
  // odnosimy sie do maksymalnej ceny wynikajacej z dochodu.
  const contributionBasePrice = propertyPrice > 0 ? propertyPrice : maxLoan + ownContribution;
  const recommendedOwnContribution = Math.round(contributionBasePrice * 0.2);
  const requiredOwnContribution = Math.round(contributionBasePrice * (1 - CREDIT_MAX_LTV));
  const loanForPrice = Math.max(0, propertyPrice - ownContribution);
  const ltv = propertyPrice > 0 ? loanForPrice / propertyPrice : 0;
  const ltvTooHigh = propertyPrice > 0 && ltv > CREDIT_MAX_LTV;
  const projectedInstallment = decreasing
    ? decreasingFirstInstallmentForPrincipal(loanForPrice, monthlyRate, months)
    : annuityInstallmentForPrincipal(loanForPrice, monthlyRate, months);
  // Ile realnie zostaje w domowym budzecie - liczymy od dochodu, ktory uzytkownik faktycznie
  // otrzymuje, a nie od kwoty obcietej wspolczynnikiem banku.
  const leftoverAfterInstallment = declaredTotalIncome - livingCosts - totalObligations - projectedInstallment;
  const dsti = totalIncome > 0 ? projectedInstallment / totalIncome : 0;
  const dti = totalIncome > 0 ? totalObligations / totalIncome : 0;

  const hasIncome = totalIncome > 0;
  const ready = hasIncome && maxInstallment > 0;
  const priceExceedsCapacity = propertyPrice > 0 && (loanForPrice > maxLoan + 1 || leftoverAfterInstallment < 0 || ltvTooHigh);

  // Ostrzezenia o warunkach, ktore bank sprawdza poza sama arytmetyka raty.
  const warnings: string[] = [];
  if (form.seniority === 'do 3 miesięcy') {
    warnings.push('Większość banków wymaga co najmniej 3 miesięcy stażu u obecnego pracodawcy (przy działalności i B2B zwykle 12 miesięcy).');
  }
  if (incomeFactor < 1 && declaredTotalIncome > 0) {
    warnings.push(`Przy dochodzie z formy „${form.incomeSource}” bank przyjmuje do wyliczeń ${formatPercent(incomeFactor)} kwoty, czyli ${formatPln(Math.round(totalIncome))} zamiast ${formatPln(Math.round(declaredTotalIncome))}.`);
  }
  if (ageLimitsPeriod) {
    warnings.push(`Wiek ${Math.round(age)} lat ogranicza okres kredytu do ${years} lat - kredyt musi zostać spłacony do ${CREDIT_MAX_AGE_AT_PAYOFF}. roku życia.`);
  }
  if (ownContribution === 0) {
    warnings.push('Bez wkładu własnego bank nie udzieli kredytu - potrzebujesz co najmniej 10% ceny nieruchomości (zalecane 20%).');
  } else if (ltvTooHigh) {
    warnings.push(`Wkład własny pokrywa ${formatPercent(1 - ltv)} ceny, a bank finansuje maksymalnie ${formatPercent(CREDIT_MAX_LTV)} wartości nieruchomości.`);
  }

  let ratingKey: 'verysafe' | 'safe' | 'moderate' | 'high' | 'none' | 'empty';
  if (!hasIncome) {
    ratingKey = 'empty';
  } else if (disposable <= 0) {
    ratingKey = 'none';
  } else if (propertyPrice > 0) {
    if (priceExceedsCapacity) {
      ratingKey = 'high';
    } else if (dsti <= 0.2) {
      ratingKey = 'verysafe';
    } else if (dsti <= 0.3) {
      ratingKey = 'safe';
    } else if (dsti <= 0.4) {
      ratingKey = 'moderate';
    } else {
      ratingKey = 'high';
    }
  } else {
    const ratio = totalIncome > 0 ? maxInstallment / totalIncome : 0;
    ratingKey = ratio <= 0.2 ? 'verysafe' : ratio <= 0.3 ? 'safe' : 'moderate';
  }

  return {
    income, partnerIncome, totalIncome, declaredIncome, declaredPartnerIncome, declaredTotalIncome,
    incomeFactor, adults, children, livingCosts,
    cardCharge, accountCharge, declaredObligations, totalObligations,
    disposable, maxInstallment, dstiLimit, years, months, monthlyRate, decreasing,
    stressRatePercent, capacityYears, maxLoan, ownContribution, maxPropertyPrice,
    recommendedOwnContribution, requiredOwnContribution, contributionBasePrice,
    propertyPrice, loanForPrice, ltv, ltvTooHigh, projectedInstallment, leftoverAfterInstallment,
    dsti, dti, hasIncome, ready, priceExceedsCapacity, ratingKey, warnings,
  };
}

const CREDIT_RATING_META: Record<CreditResult['ratingKey'], { label: string; tone: string; stars: number; note: string }> = {
  verysafe: { label: 'Bardzo bezpieczny poziom', tone: 'verysafe', stars: 5, note: 'Rata i koszty życia zostawiają duży zapas w budżecie.' },
  safe: { label: 'Bezpieczny poziom', tone: 'safe', stars: 4, note: 'Obciążenie mieści się w bezpiecznych granicach.' },
  moderate: { label: 'Umiarkowane obciążenie', tone: 'moderate', stars: 3, note: 'Rata jest odczuwalna - warto zachować poduszkę finansową.' },
  high: { label: 'Wysokie obciążenie', tone: 'high', stars: 2, note: 'Rata pochłania zbyt dużą część dochodu przy tej cenie.' },
  none: { label: 'Brak zdolności', tone: 'none', stars: 0, note: 'Koszty i zobowiązania przekraczają dochód - zdolność wynosi 0 zł.' },
  empty: { label: 'Uzupełnij dane', tone: 'empty', stars: 0, note: 'Podaj miesięczny dochód netto, aby obliczyć zdolność.' },
};

function creditMaxPropertyPrice(form: CreditForm): number {
  return calculateCreditworthiness(form).maxPropertyPrice;
}

type CreditRecommendation = { icon: string; label: string; detail: string; delta: number };

// Każda rekomendacja liczona jest ponownie na danych użytkownika (żadnych kwot na sztywno).
function buildCreditRecommendations(form: CreditForm, base: number): CreditRecommendation[] {
  const recs: CreditRecommendation[] = [];
  const add = (icon: string, label: string, detail: string, next: CreditForm) => {
    const delta = Math.round(creditMaxPropertyPrice(next) - base);
    if (delta > 0) recs.push({ icon, label, detail, delta });
  };
  if (creditNum(form.creditCardLimit) > 0) {
    add('credit-card', 'Zamknij kartę kredytową', 'Rezygnacja z limitu karty odciąża miesięczny budżet.', { ...form, creditCardLimit: '0' });
  }
  if (creditNum(form.accountLimit) > 0) {
    add('scale', 'Zlikwiduj limit w koncie', 'Limit w koncie obniża zdolność, nawet jeśli go nie używasz.', { ...form, accountLimit: '0' });
  }
  if (creditNum(form.loanInstallments) > 0) {
    add('check', 'Spłać bieżące kredyty', 'Zamknięcie rat uwalnia miejsce na ratę kredytu hipotecznego.', { ...form, loanInstallments: '0' });
  }
  if (Math.round(form.loanYears) < CREDIT_MAX_YEARS) {
    add('clock', `Wydłuż okres kredytu do ${CREDIT_MAX_YEARS} lat`, 'Dłuższy okres obniża ratę i podnosi maksymalną kwotę kredytu.', { ...form, loanYears: CREDIT_MAX_YEARS });
  }
  if (creditNum(form.partnerIncome) === 0 && creditNum(form.income) > 0) {
    add('group', 'Dodaj dochód partnera', 'Drugi dochód w gospodarstwie mocno zwiększa zdolność (symulacja: partner z dochodem jak Twój).', { ...form, partnerIncome: form.income });
  }
  add('coin', 'Zwiększ wkład własny o 50 000 zł', 'Wyższy wkład własny wprost podnosi dostępną cenę nieruchomości.', { ...form, ownContribution: String(creditNum(form.ownContribution) + 50000) });
  return recs.sort((a, b) => b.delta - a.delta);
}

function formatPercent(value: number): string {
  return `${(value * 100).toLocaleString('pl-PL', { maximumFractionDigits: 1 })}%`;
}

function CreditCalculatorPage({ onSearchWithBudget }: { onSearchWithBudget: (maxPrice: number) => void }) {
  const navigate = useNavigate();
  const { user } = useAuth();
  const [form, setForm] = useState<CreditForm>(INITIAL_CREDIT_FORM);
  const [highlight, setHighlight] = useState(false);
  const resultRef = useRef<HTMLDivElement | null>(null);
  const result = calculateCreditworthiness(form);
  const rating = CREDIT_RATING_META[result.ratingKey];
  const recommendations = buildCreditRecommendations(form, result.maxPropertyPrice);
  const fmtPln = (value: number) => formatPln(Math.round(value));

  const update = <Key extends keyof CreditForm>(field: Key, value: CreditForm[Key]) => {
    setForm((current) => ({ ...current, [field]: value }));
  };
  const money = (field: keyof CreditForm) => (event: React.ChangeEvent<HTMLInputElement>) =>
    update(field, event.target.value.replace(/[^\d]/g, '') as CreditForm[typeof field]);
  const stepAdults = (delta: number) => update('adults', Math.min(12, Math.max(1, form.adults + delta)));
  const stepChildren = (delta: number) => update('children', Math.min(12, Math.max(0, form.children + delta)));
  const reset = () => { setForm(INITIAL_CREDIT_FORM); };
  const handleCalculate = () => {
    setHighlight(true);
    window.setTimeout(() => setHighlight(false), 900);
    resultRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  // Donut struktury dochodów.
  const donutRadius = 52;
  const donutCirc = 2 * Math.PI * donutRadius;
  // Wykres pokazuje dochody wpisane przez uzytkownika - obciecie banku widac w wierszach szczegolow.
  const yourLen = result.declaredTotalIncome > 0 ? (result.declaredIncome / result.declaredTotalIncome) * donutCirc : 0;
  const partnerLen = result.declaredTotalIncome > 0 ? (result.declaredPartnerIncome / result.declaredTotalIncome) * donutCirc : 0;

  const detailRows: { label: string; value: string; tone?: string }[] = [
    { label: 'Dochód uznany przez bank', value: fmtPln(result.totalIncome) },
    { label: 'Koszty utrzymania gospodarstwa', value: fmtPln(result.livingCosts) },
    { label: 'Łączne zobowiązania', value: fmtPln(result.totalObligations) },
    { label: 'Dochód po odliczeniach', value: fmtPln(Math.max(0, result.disposable)) },
    { label: `Limit obsługi długu (DStI ${formatPercent(result.dstiLimit)})`, value: fmtPln(result.maxInstallment) },
    { label: 'Stopa do badania zdolności (z buforem 2,5 p.p.)', value: `${result.stressRatePercent.toFixed(2).replace('.', ',')} %` },
    { label: 'Okres przyjęty do zdolności', value: `${result.capacityYears} lat` },
    { label: 'Maksymalna kwota kredytu', value: fmtPln(result.maxLoan) },
    { label: 'Maksymalna cena nieruchomości', value: fmtPln(result.maxPropertyPrice) },
    { label: 'Przewidywana rata dla wpisanej ceny', value: fmtPln(result.projectedInstallment) },
    { label: 'Kwota po opłaceniu raty', value: fmtPln(result.leftoverAfterInstallment), tone: result.leftoverAfterInstallment < 0 ? 'negative' : 'positive' },
    { label: 'Wskaźnik LTV (kredyt / cena)', value: result.propertyPrice > 0 ? formatPercent(result.ltv) : '-', tone: result.ltvTooHigh ? 'negative' : undefined },
    { label: 'Wskaźnik DTI (zobowiązania / dochód)', value: formatPercent(result.dti) },
    { label: 'Wskaźnik DSTI (rata / dochód)', value: formatPercent(result.dsti) },
  ];

  const pageBody = (
    <>
      <div className="credit-title">
          <div>
            <h1>Kalkulator zdolności kredytowej</h1>
            <p>Sprawdź, jaką kwotę kredytu hipotecznego możesz uzyskać i jakie będą orientacyjne warunki. Wynik przelicza się na bieżąco przy każdej zmianie.</p>
          </div>
        </div>

        <div className="credit-layout">
          <div className="credit-form-column">
            <section className="credit-card">
              <h2><span className="credit-step-badge">1</span> Twoje dane</h2>
              <div className="credit-grid credit-grid-2">
                <label className="credit-field">
                  <span>Wiek</span>
                  <input inputMode="numeric" value={form.age} onChange={(e) => update('age', e.target.value.replace(/[^\d]/g, ''))} placeholder="np. 30" />
                </label>
                <label className="credit-field">
                  <span>Stan cywilny</span>
                  <select value={form.maritalStatus} onChange={(e) => update('maritalStatus', e.target.value as CreditMaritalStatus)}>
                    {CREDIT_MARITAL_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
                  </select>
                </label>
                <div className="credit-field">
                  <span>Liczba osób w gospodarstwie</span>
                  <div className="credit-stepper">
                    <button type="button" onClick={() => stepAdults(-1)} aria-label="Mniej osób">-</button>
                    <strong>{form.adults}</strong>
                    <button type="button" onClick={() => stepAdults(1)} aria-label="Więcej osób">+</button>
                  </div>
                </div>
                <div className="credit-field">
                  <span>Liczba dzieci</span>
                  <div className="credit-stepper">
                    <button type="button" onClick={() => stepChildren(-1)} aria-label="Mniej dzieci">-</button>
                    <strong>{form.children}</strong>
                    <button type="button" onClick={() => stepChildren(1)} aria-label="Więcej dzieci">+</button>
                  </div>
                </div>
              </div>
            </section>

            <section className="credit-card">
              <h2><span className="credit-step-badge">2</span> Dochody miesięczne (netto)</h2>
              <div className="credit-grid credit-grid-2">
                <label className="credit-field">
                  <span>Twój dochód</span>
                  <div className="credit-input-suffix">
                    <input inputMode="numeric" value={form.income} onChange={money('income')} placeholder="0" />
                    <em>zł</em>
                  </div>
                </label>
                <label className="credit-field">
                  <span>Dochód partnera</span>
                  <div className="credit-input-suffix">
                    <input inputMode="numeric" value={form.partnerIncome} onChange={money('partnerIncome')} placeholder="0" />
                    <em>zł</em>
                  </div>
                </label>
                <label className="credit-field">
                  <span>Źródło dochodu</span>
                  <select value={form.incomeSource} onChange={(e) => update('incomeSource', e.target.value as CreditIncomeSource)}>
                    {CREDIT_INCOME_SOURCES.map((option) => <option key={option} value={option}>{option}</option>)}
                  </select>
                </label>
                <label className="credit-field">
                  <span>Staż u obecnego pracodawcy</span>
                  <select value={form.seniority} onChange={(e) => update('seniority', e.target.value as CreditSeniority)}>
                    {CREDIT_SENIORITY_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
                  </select>
                </label>
              </div>
            </section>

            <section className="credit-card">
              <h2><span className="credit-step-badge">3</span> Zobowiązania miesięczne</h2>
              <div className="credit-grid credit-grid-2">
                <label className="credit-field">
                  <span>Raty kredytów i pożyczek</span>
                  <div className="credit-input-suffix"><input inputMode="numeric" value={form.loanInstallments} onChange={money('loanInstallments')} placeholder="0" /><em>zł</em></div>
                </label>
                <label className="credit-field">
                  <span>Leasing</span>
                  <div className="credit-input-suffix"><input inputMode="numeric" value={form.leasing} onChange={money('leasing')} placeholder="0" /><em>zł</em></div>
                </label>
                <label className="credit-field">
                  <span>Alimenty</span>
                  <div className="credit-input-suffix"><input inputMode="numeric" value={form.alimony} onChange={money('alimony')} placeholder="0" /><em>zł</em></div>
                </label>
                <label className="credit-field">
                  <span>Inne zobowiązania</span>
                  <div className="credit-input-suffix"><input inputMode="numeric" value={form.otherObligations} onChange={money('otherObligations')} placeholder="0" /><em>zł</em></div>
                </label>
                <label className="credit-field">
                  <span>Limit karty kredytowej</span>
                  <div className="credit-input-suffix"><input inputMode="numeric" value={form.creditCardLimit} onChange={money('creditCardLimit')} placeholder="0" /><em>zł</em></div>
                  <small>Obciążenie liczone jako 5% limitu = {fmtPln(result.cardCharge)}/mies.</small>
                </label>
                <label className="credit-field">
                  <span>Limit w koncie</span>
                  <div className="credit-input-suffix"><input inputMode="numeric" value={form.accountLimit} onChange={money('accountLimit')} placeholder="0" /><em>zł</em></div>
                  <small>Obciążenie liczone jako 5% limitu = {fmtPln(result.accountCharge)}/mies.</small>
                </label>
              </div>
            </section>

            <section className="credit-card">
              <h2><span className="credit-step-badge">4</span> Informacje o kredycie</h2>
              <div className="credit-grid credit-grid-2">
                <label className="credit-field">
                  <span>Cena nieruchomości</span>
                  <div className="credit-input-suffix"><input inputMode="numeric" value={form.propertyPrice} onChange={money('propertyPrice')} placeholder="0" /><em>zł</em></div>
                </label>
                <label className="credit-field">
                  <span>Wkład własny</span>
                  <div className="credit-input-suffix"><input inputMode="numeric" value={form.ownContribution} onChange={money('ownContribution')} placeholder="0" /><em>zł</em></div>
                  <small>{creditNum(form.propertyPrice) > 0 ? `${formatPercent(creditNum(form.ownContribution) / creditNum(form.propertyPrice))} ceny nieruchomości` : 'Podaj cenę, aby zobaczyć udział wkładu'}</small>
                </label>
                <div className="credit-field credit-field-wide">
                  <span>Okres kredytu: <strong className="credit-range-value">{result.years} lat</strong></span>
                  <input type="range" min={CREDIT_MIN_YEARS} max={CREDIT_MAX_YEARS} step={1} value={result.years} onChange={(e) => update('loanYears', Number(e.target.value))} className="credit-range" />
                  <div className="credit-range-scale"><span>{CREDIT_MIN_YEARS} lat</span><span>{CREDIT_MAX_YEARS} lat</span></div>
                </div>
                <label className="credit-field">
                  <span>Oprocentowanie</span>
                  <div className="credit-input-suffix"><input inputMode="decimal" value={form.interestRate} onChange={(e) => update('interestRate', e.target.value.replace(/[^\d.,]/g, ''))} placeholder="0" /><em>%</em></div>
                </label>
                <div className="credit-field">
                  <span>Rodzaj rat</span>
                  <div className="credit-segmented">
                    <button type="button" className={form.repayment === 'równe' ? 'active' : ''} onClick={() => update('repayment', 'równe')}>Równe</button>
                    <button type="button" className={form.repayment === 'malejące' ? 'active' : ''} onClick={() => update('repayment', 'malejące')}>Malejące</button>
                  </div>
                </div>
              </div>
            </section>

            <div className="credit-actions">
              <button type="button" className="credit-btn-primary" onClick={handleCalculate}><Icon name="calculator" /> Oblicz zdolność</button>
              <button type="button" className="credit-btn-ghost" onClick={reset}><Icon name="shuffle" /> Wyczyść dane</button>
            </div>
          </div>

          <div className="credit-result-column" ref={resultRef}>
            <section className={`credit-result-hero credit-tone-${rating.tone} ${highlight ? 'pulse' : ''}`}>
              <div className="credit-hero-top">
                <span>Twoja szacunkowa zdolność kredytowa</span>
                <span className={`credit-badge credit-badge-${rating.tone}`}>{rating.label}</span>
              </div>
              <strong>{result.hasIncome ? fmtPln(result.maxLoan) : '- zł'}</strong>
              <div className="credit-stars" aria-label={`Ocena: ${rating.stars} na 5`}>
                {[1, 2, 3, 4, 5].map((n) => <span key={n} className={n <= rating.stars ? 'on' : ''}><Icon name="star" /></span>)}
              </div>
              <p>{rating.note}</p>
            </section>

            <div className="credit-tiles">
              <div className="credit-tile">
                <small>Maksymalna rata</small>
                <strong>{fmtPln(result.maxInstallment)}</strong>
                <em>limit DStI {formatPercent(result.dstiLimit)} minus obecne raty</em>
              </div>
              <div className="credit-tile">
                <small>Maksymalny kredyt</small>
                <strong>{fmtPln(result.maxLoan)}</strong>
                <em>{result.decreasing ? 'raty malejące' : 'raty równe'} · zdolność liczona na {result.capacityYears} lat</em>
              </div>
              <div className="credit-tile">
                <small>Zalecany wkład własny</small>
                <strong>{fmtPln(result.recommendedOwnContribution)}</strong>
                <em>
                  20% z {fmtPln(result.contributionBasePrice)}
                  {result.propertyPrice > 0 ? ' (wpisana cena)' : ' (maksymalna cena)'}
                  {' · minimum '}{fmtPln(result.requiredOwnContribution)}
                </em>
              </div>
            </div>

            <section className="credit-card credit-details">
              <div className="credit-details-head">
                <h3>Szczegóły symulacji</h3>
                <div className="credit-donut-wrap">
                  <svg viewBox="0 0 120 120" className="credit-donut" role="img" aria-label="Struktura dochodów">
                    <circle cx="60" cy="60" r={donutRadius} className="credit-donut-track" />
                    {result.totalIncome > 0 && (
                      <circle cx="60" cy="60" r={donutRadius} className="credit-donut-you" strokeDasharray={`${yourLen} ${donutCirc - yourLen}`} strokeDashoffset={0} transform="rotate(-90 60 60)" />
                    )}
                    {result.partnerIncome > 0 && (
                      <circle cx="60" cy="60" r={donutRadius} className="credit-donut-partner" strokeDasharray={`${partnerLen} ${donutCirc - partnerLen}`} strokeDashoffset={-yourLen} transform="rotate(-90 60 60)" />
                    )}
                    <text x="60" y="55" className="credit-donut-value">{Math.round(result.declaredTotalIncome / 1000)} tys.</text>
                    <text x="60" y="72" className="credit-donut-label">łącznie</text>
                  </svg>
                  <ul className="credit-donut-legend">
                    <li><i className="credit-dot-you" /> Twój dochód <b>{fmtPln(result.declaredIncome)}</b></li>
                    <li><i className="credit-dot-partner" /> Dochód partnera <b>{fmtPln(result.declaredPartnerIncome)}</b></li>
                  </ul>
                </div>
              </div>
              <dl className="credit-detail-rows">
                {detailRows.map((row) => (
                  <div key={row.label} className={`credit-detail-row ${row.tone ? `credit-detail-${row.tone}` : ''}`}>
                    <dt>{row.label}</dt>
                    <dd>{row.value}</dd>
                  </div>
                ))}
              </dl>

              {result.warnings.length > 0 && (
                <ul className="credit-warnings" aria-label="Warunki, które sprawdzi bank">
                  {result.warnings.map((warning) => (
                    <li key={warning}><Icon name="warning" /> <span>{warning}</span></li>
                  ))}
                </ul>
              )}

              <p className="credit-method-note">
                Wyliczenie stosuje zasady z Rekomendacji S KNF: zdolność badana przy stopie podwyższonej
                o {CREDIT_STRESS_BUFFER_PP.toFixed(1).replace('.', ',')} p.p., okres kredytowania przyjęty do zdolności
                maksymalnie {CREDIT_CAPACITY_MAX_YEARS} lat, kredyt do {formatPercent(CREDIT_MAX_LTV)} wartości nieruchomości.
                To symulacja orientacyjna - każdy bank stosuje własną metodykę.
              </p>
            </section>

            <section className="credit-cta-band">
              <div>
                <strong>Znajdź nieruchomości w zasięgu Twojej zdolności</strong>
                <span>Pokażemy oferty do {fmtPln(result.maxPropertyPrice)} (kredyt + wkład własny).</span>
              </div>
              <button type="button" disabled={result.maxPropertyPrice <= 0} onClick={() => onSearchWithBudget(result.maxPropertyPrice)}>
                Zobacz oferty <Icon name="arrow" />
              </button>
            </section>

            {recommendations.length > 0 && (
              <section className="credit-card credit-recos">
                <h3><Icon name="spark" /> Jak zwiększyć zdolność?</h3>
                <div className="credit-reco-list">
                  {recommendations.map((reco) => (
                    <div key={reco.label} className="credit-reco">
                      <span className="credit-reco-icon"><Icon name={reco.icon} /></span>
                      <div className="credit-reco-body">
                        <strong>{reco.label}</strong>
                        <small>{reco.detail}</small>
                      </div>
                      <b className="credit-reco-delta">+{formatPln(reco.delta)}</b>
                    </div>
                  ))}
                </div>
              </section>
            )}

            <p className="credit-disclaimer">
              <Icon name="shield" /> Wynik ma charakter orientacyjny i nie stanowi oferty ani decyzji banku. Rzeczywista zdolność zależy od zasad banku, historii kredytowej i indywidualnej sytuacji klienta. Nie zapisujemy Twoich danych finansowych bez Twojej zgody.
            </p>
          </div>
        </div>
    </>
  );

  if (user) {
    return (
      <section className="account-page" aria-label="Kalkulator zdolności kredytowej">
        <div className="account-layout">
          <AccountSidebar />
          <div className="account-main credit-account-main">
            {pageBody}
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="credit-page" aria-label="Kalkulator zdolności kredytowej">
      <div className="credit-shell">
        <div className="breadcrumb credit-breadcrumb">
          <Link to={ROUTES.guideBuying}>Poradnik kupna</Link>
          <Icon name="chevron" />
          <Link className="active" to={ROUTES.creditCalculator}>Kalkulator zdolności kredytowej</Link>
        </div>
        {pageBody}
      </div>
    </section>
  );
}

function ValuationPage() {
  const navigate = useNavigate();
  const { formatPrice, formatPricePerArea, formatPricePerAreaNumber, formatAreaNumber, formatArea, toSquareMeters, areaSuffix } = useDisplay();
  const { pathname } = useLocation();
  // Krok wynika z adresu (/wycena, /wycena/szczegoly, /wycena/stan, /wycena/wynik).
  const step = Math.max(VALUATION_STEP_PATHS.indexOf(pathname), 0);
  const [valuationForm, setValuationForm] = useState<ValuationForm>(readValuationDraft);
  useEffect(() => {
    saveValuationDraft(valuationForm);
  }, [valuationForm]);
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [step]);
  const [valuationLocationSuggestOpen, setValuationLocationSuggestOpen] = useState(false);
  const [valuationLocationSuggestions, setValuationLocationSuggestions] = useState<PlaceSuggestion[]>([]);
  const [valuationLocationSuggestLoading, setValuationLocationSuggestLoading] = useState(false);
  // Dane rynkowe dla lokalizacji z formularza - te same co w Historii cen (ogloszenia, NBP, GUS).
  const [valuationMarketData, setValuationMarketData] = useState<ValuationMarketData | null>(null);
  const [valuationMarketLoading, setValuationMarketLoading] = useState(false);
  const valuationPlace = parseValuationLocation(valuationForm.location);
  useEffect(() => {
    const { city, district } = valuationPlace;
    if (city.length < 2) {
      setValuationMarketData(null);
      setValuationMarketLoading(false);
      return;
    }
    let cancelled = false;
    setValuationMarketLoading(true);
    const today = new Date().toISOString().slice(0, 10);
    const load = (propertyType: 'APARTMENT' | 'HOUSE', withDistrict: boolean) => {
      if (withDistrict && !district) {
        return Promise.resolve(null);
      }
      const params = new URLSearchParams({
        city,
        district: withDistrict ? district : '',
        propertyType,
        market: valuationForm.market,
        from: today,
      });
      return apiFetch<ApiPriceHistory>(`/price-history?${params.toString()}`).catch(() => null);
    };
    const timer = window.setTimeout(() => {
      const wantsHouses = valuationForm.propertyType === 'Dom';
      Promise.all([
        load('APARTMENT', false),
        load('APARTMENT', true),
        wantsHouses ? load('HOUSE', false) : Promise.resolve(null),
        wantsHouses ? load('HOUSE', true) : Promise.resolve(null),
      ]).then(([apartmentCity, apartmentDistrict, houseCity, houseDistrict]) => {
        if (!cancelled) {
          setValuationMarketData({ city, district, apartmentCity, apartmentDistrict, houseCity, houseDistrict });
          setValuationMarketLoading(false);
        }
      });
    }, 400);
    return () => {
      cancelled = true;
      window.clearTimeout(timer);
    };
  }, [valuationPlace.city, valuationPlace.district, valuationForm.market, valuationForm.propertyType]);
  const valuationBase = buildValuationBase(valuationForm, valuationMarketData);
  const valuation = calculateApartmentValuation(valuationForm, { toSquareMeters, areaSuffix, formatAreaNumber, formatPricePerAreaNumber },
    valuationBase, valuationMarketLoading);
  const isValuationDetailsStep = step === 1;
  const isValuationConditionStep = step === 2;
  const isValuationResultStep = step === 3;
  const isHouseValuation = valuationForm.propertyType === 'Dom';
  const isCommercialValuation = valuationForm.propertyType === 'Lokal użytkowy';
  const valuationPropertyLabel = valuationForm.propertyType || 'nieruchomości';
  const valuationBuildingTypeOptions = isHouseValuation ? VALUATION_HOUSE_BUILDING_TYPES : isCommercialValuation ? VALUATION_COMMERCIAL_BUILDING_TYPES : VALUATION_APARTMENT_BUILDING_TYPES;
  const visibleValuationAmenityOptions = getValuationAmenityOptions(valuationForm.propertyType);
  const nextStepLabel = isValuationConditionStep ? 'Dalej: Wynik wyceny' : isValuationDetailsStep ? 'Dalej: Stan i udogodnienia' : 'Dalej: Szczegóły nieruchomości';
  const isLocationComplete = Boolean(valuationPlace.city.length >= 2 && valuationForm.market && valuationForm.propertyType);
  const isDetailsComplete = Boolean(
    parsePositiveNumber(valuationForm.area)
    && valuationForm.rooms
    && (isHouseValuation || valuationForm.floor)
    && (isCommercialValuation || valuationForm.buildingFloors)
    && (valuationForm.yearBuilt || valuationForm.buildingType)
  );
  const isConditionComplete = Boolean(valuationForm.condition || valuationForm.amenities.length > 0 || valuationForm.ownership);
  const isResultComplete = Boolean(valuation.ready && isValuationResultStep);
  const valuationCompletionSteps = [
    { label: 'Lokalizacja', done: isLocationComplete },
    { label: 'Szczegóły nieruchomości', done: isDetailsComplete },
    { label: 'Stan i udogodnienia', done: isConditionComplete },
    { label: 'Wynik wyceny', done: isResultComplete },
  ];
  const progressValue = Math.round((valuationCompletionSteps.filter((item) => item.done).length / valuationCompletionSteps.length) * 100);
  const visibleValuationDrivers = isValuationDetailsStep || isValuationConditionStep
    ? [
      { icon: 'house', title: 'Poznaj wartość', text: 'Sprawdź realną wartość swojej nieruchomości.' },
      { icon: 'money', title: 'Lepsza sprzedaż', text: 'Ustal odpowiednią cenę i sprzedaj szybciej.' },
      { icon: 'shield', title: 'Bez zobowiązań', text: 'Wycena jest darmowa i niezobowiązująca.' },
    ]
    : [];
  const valuationDrivers = [
    { icon: 'pin', title: 'Lokalizacja', text: 'Jedna z najważniejszych cech wpływających na wartość.' },
    { icon: 'house', title: 'Powierzchnia i układ', text: 'Metraż, układ oraz funkcja nieruchomości.' },
    { icon: 'hammer', title: 'Stan techniczny', text: 'Standard wykończenia i stan techniczny nieruchomości.' },
    { icon: 'building', title: 'Udogodnienia', text: 'Balkon, winda, miejsce parkingowe i inne udogodnienia.' },
    { icon: 'trend', title: 'Sytuacja rynkowa', text: 'Aktualne trendy i ceny podobnych nieruchomości.' },
  ];
  const valuationBenefits = [
    { icon: 'house', title: 'Poznaj wartość', text: 'Sprawdź realną wartość swojej nieruchomości' },
    { icon: 'money', title: 'Lepsza sprzedaż', text: 'Ustal odpowiednią cenę i sprzedaj szybciej' },
    { icon: 'shield', title: 'Bez zobowiązań', text: 'Wycena jest darmowa i niezobowiązująca' },
  ];
  const valuationNextActions = [
    { icon: 'house', label: 'Dodaj ogłoszenie i znajdź kupującego', to: ROUTES.add },
    { icon: 'check', label: 'Uzupełnij dane i zwiększ dokładność', to: ROUTES.valuationDetails },
    { icon: 'chart', label: 'Obserwuj zmiany cen w Twojej okolicy', to: priceHistoryPath(valuationForm.location.trim() || undefined) },
  ];
  // Kazda brakujaca pozycja prowadzi do kroku, w ktorym mozna ja uzupelnic.
  const valuationMissingItems = ([
    valuationPlace.city.length < 2
      ? { icon: 'pin', title: 'Podaj lokalizację (wymagane)', text: 'Wpisz miasto, najlepiej z dzielnicą, np. „Kraków, Podgórze”.', to: ROUTES.valuation }
      : null,
    !parsePositiveNumber(valuationForm.area)
      ? { icon: 'house', title: `Podaj metraż ${valuationPropertyLabel} (wymagane)`, text: 'Wycena startuje dopiero po wpisaniu powierzchni w m².', to: ROUTES.valuationDetails }
      : null,
    !valuationForm.rooms
      ? { icon: 'building', title: isCommercialValuation ? 'Dodaj liczbę pomieszczeń' : 'Dodaj liczbę pokoi', text: 'To poprawi ocenę funkcjonalności układu nieruchomości.', to: ROUTES.valuationDetails }
      : null,
    !valuationForm.yearBuilt && !valuationForm.buildingType
      ? { icon: 'calendar', title: 'Uzupełnij budownictwo', text: 'Rok budowy, typ budynku i technologia mocno wpływają na wynik.', to: ROUTES.valuationDetails }
      : null,
    !valuationForm.condition
      ? { icon: 'hammer', title: 'Wskaż stan techniczny', text: 'Standard wykończenia pomaga zawęzić przedział ceny.', to: ROUTES.valuationCondition }
      : null,
  ] as ({ icon: string; title: string; text: string; to: string } | null)[]).filter((item): item is { icon: string; title: string; text: string; to: string } => item != null);
  const firstMissingStep = valuationMissingItems[0]?.to ?? ROUTES.valuation;
  const valuationLocationQuery = valuationForm.location.trim();
  const localValuationLocationSuggestions: PlaceSuggestion[] = (valuationLocationQuery.length >= 2
    ? POLISH_CITIES
      .filter((city) => city.toLowerCase().startsWith(valuationLocationQuery.toLowerCase()))
      .concat(POLISH_CITIES.filter((city) => !city.toLowerCase().startsWith(valuationLocationQuery.toLowerCase()) && city.toLowerCase().includes(valuationLocationQuery.toLowerCase())))
      .slice(0, 8)
    : POPULAR_CITIES).map((city, index) => ({ id: -index - 1, label: city, sublabel: 'miasto', lat: 0, lng: 0 }));
  const shownValuationLocationSuggestions = valuationLocationSuggestions.length > 0 ? valuationLocationSuggestions : localValuationLocationSuggestions;

  useEffect(() => {
    const query = valuationForm.location.trim();
    if (query.length < 2) {
      setValuationLocationSuggestions([]);
      setValuationLocationSuggestLoading(false);
      return;
    }
    const controller = new AbortController();
    setValuationLocationSuggestLoading(true);
    const timer = window.setTimeout(() => {
      fetchPlaceSuggestions(query, controller.signal)
        .then((places) => setValuationLocationSuggestions(places))
        .catch((error) => {
          if ((error as Error).name !== 'AbortError') {
            setValuationLocationSuggestions([]);
          }
        })
        .finally(() => setValuationLocationSuggestLoading(false));
    }, 250);
    return () => {
      controller.abort();
      window.clearTimeout(timer);
    };
  }, [valuationForm.location]);

  const updateValuation = <Key extends keyof ValuationForm>(field: Key, value: ValuationForm[Key]) => {
    setValuationForm((current) => {
      const next = {
        ...current,
        [field]: value,
        ...(field === 'balcony' && value === false ? { balconyArea: '' } : null),
      };
      if (field === 'propertyType') {
        const nextPropertyType = value as ValuationForm['propertyType'];
        const allowedAmenities = getValuationAmenityOptions(nextPropertyType).map((option) => option.title);
        return {
          ...next,
          amenities: current.amenities.filter((item) => allowedAmenities.includes(item)),
          ...(nextPropertyType === 'Dom' ? { floor: '', elevator: false, commercialPurpose: '', streetEntrance: false, displayWindow: false } : null),
          ...(nextPropertyType === 'Lokal użytkowy' ? { plotArea: '', kitchen: '', bathrooms: '', balcony: false, balconyArea: '', orientation: '', cellar: false, storage: false, garage: false } : null),
          ...(nextPropertyType === 'Mieszkanie' ? { plotArea: '', commercialPurpose: '', streetEntrance: false, displayWindow: false } : null),
        };
      }
      return next;
    });
  };
  const selectValuationLocation = (place: PlaceSuggestion) => {
    updateValuation('location', [place.label, place.sublabel].filter(Boolean).join(', '));
    setValuationLocationSuggestOpen(false);
  };
  const toggleValuationAmenity = (title: string) => {
    setValuationForm((current) => ({
      ...current,
      amenities: current.amenities.includes(title)
        ? current.amenities.filter((item) => item !== title)
        : [...current.amenities, title],
    }));
  };
  const resetValuation = () => {
    setValuationForm(INITIAL_VALUATION_FORM);
    navigate(ROUTES.valuation);
  };
  const goNext = () => navigate(VALUATION_STEP_PATHS[Math.min(step + 1, VALUATION_STEP_PATHS.length - 1)]);
  const goBack = () => navigate(VALUATION_STEP_PATHS[Math.max(step - 1, 0)]);

  return (
    <section className="valuation-page" aria-label="Wycena nieruchomości">
      <div className="valuation-shell">
        <div className="breadcrumb valuation-breadcrumb">
          <Link to={ROUTES.account}>Panel główny</Link>
          <Icon name="chevron" />
          <Link className="active" to={ROUTES.valuation}>Wycena nieruchomości</Link>
        </div>

        <div className={`valuation-title ${isValuationResultStep ? 'result' : ''}`}>
          <h1>{isValuationResultStep ? 'Wynik wyceny' : 'Wycena nieruchomości'} {isValuationResultStep && <Icon name="check" />}</h1>
          <p>{isValuationResultStep
            ? valuation.ready ? 'Dziękujemy! Oto szacowana wartość Twojej nieruchomości.' : 'Wynik pojawi się tutaj, gdy uzupełnisz wymagane dane.'
            : 'Sprawdź, ile może być warta Twoja nieruchomość.'}</p>
        </div>

        <div className={`valuation-progress ${isValuationResultStep ? 'complete' : ''}`} aria-label="Postęp formularza wyceny">
          {VALUATION_STEPS.map((label, index) => (
            <Link className={index <= step ? 'active' : ''} key={label} to={VALUATION_STEP_PATHS[index]} aria-current={index === step ? 'step' : undefined}>
              <span>{index + 1}</span>
              <strong>{label}</strong>
            </Link>
          ))}
        </div>

        {isValuationResultStep ? (
          <div className="valuation-result-layout">
            <div className="valuation-result-main">
              <section className="valuation-result-hero valuation-form-card">
                <div>
                  <span>Szacowana wartość rynkowa Twojej nieruchomości</span>
                  <strong>{valuation.ready ? `${formatPrice(valuation.minValue)} - ${formatPrice(valuation.maxValue)}` : valuationMarketLoading ? 'Liczymy wycenę…' : valuation.unavailableReason ? 'Nie możemy jeszcze policzyć wyceny' : 'Brakuje danych do wyceny'}</strong>
                  <em>{valuation.ready ? `Przedział cenowy: ${formatPricePerAreaNumber(valuation.minPerMeter)} - ${formatPricePerArea(valuation.maxPerMeter)}` : valuation.unavailableReason ?? 'Do wyceny potrzebujemy co najmniej miasta i powierzchni.'}</em>
                  <p>{valuation.ready ? 'Wycena została przygotowana na podstawie informacji, które podałeś, oraz aktualnych danych rynkowych z Twojej okolicy. Pamiętaj, że ostateczna cena może się różnić w zależności od sytuacji rynkowej i indywidualnych cech nieruchomości.' : 'Poniżej znajdziesz listę brakujących informacji. Kliknij pozycję, aby przejść do kroku, w którym ją uzupełnisz.'}</p>
                  {!valuation.ready && !valuation.unavailableReason && (
                    <Link className="valuation-next" to={firstMissingStep}>Uzupełnij dane <Icon name="arrow" /></Link>
                  )}
                </div>
                <div className="valuation-house-graphic result" aria-hidden="true">
                  <span><Icon name="house" /></span>
                  <i />
                  <i />
                </div>
              </section>

              <section className="valuation-result-details valuation-form-card">
                <h2>{valuation.ready ? 'Szczegóły wyceny' : 'Co trzeba uzupełnić, żeby wycenić mieszkanie?'}</h2>
                <div>
                  {valuation.ready ? (
                    valuation.details.map((detail) => (
                      <article key={detail.label}>
                        <span><Icon name={detail.icon} /></span>
                        <p>
                          <strong>{detail.label}</strong>
                          <small>{detail.value}</small>
                        </p>
                      </article>
                    ))
                  ) : (
                    valuationMissingItems.map((item) => (
                      <Link className="valuation-missing-item" key={item.title} to={item.to}>
                        <span><Icon name={item.icon} /></span>
                        <p>
                          <strong>{item.title}</strong>
                          <small>{item.text}</small>
                        </p>
                      </Link>
                    ))
                  )}
                </div>

                <div className="valuation-result-actions">
                  <Link className="valuation-back" to={ROUTES.valuationCondition}><Icon name="arrow" /> Wróć</Link>
                  <button type="button" className="valuation-back" disabled={!valuation.ready} onClick={() => downloadValuationReportPdf(valuationForm, valuation, { formatPrice, formatArea, formatPricePerArea, areaSuffix, formatPricePerAreaNumber })}><Icon name="document" /> Pobierz raport (PDF)</button>
                  <Link className="valuation-next" to={ROUTES.add}>Rozpocznij sprzedaż <Icon name="arrow" /></Link>
                </div>
              </section>
            </div>

            <aside className="valuation-result-sidebar">
              <section className="valuation-preview-card valuation-summary-card">
                <h2>Podsumowanie wyceny</h2>
                <p><span>Szacowana wartość minimalna</span><strong>{valuation.ready ? formatPrice(valuation.minValue) : '---'}</strong></p>
                <p><span>Szacowana wartość maksymalna</span><strong>{valuation.ready ? formatPrice(valuation.maxValue) : '---'}</strong></p>
                <p><span>Średnia wartość</span><strong>{valuation.ready ? formatPrice(valuation.averageValue) : '---'}</strong></p>
                <p><span>Cena za {areaSuffix} (min - max)</span><strong>{valuation.ready ? `${formatPricePerAreaNumber(valuation.minPerMeter)} - ${formatPricePerArea(valuation.maxPerMeter)}` : '---'}</strong></p>
                <small>{valuation.ready ? `Wycena ważna do ${valuation.validUntil}` : valuation.unavailableReason ?? 'Podaj dane, aby obliczyć wycenę'}</small>
              </section>

              <section className="valuation-preview-card valuation-next-card">
                <h2>Co dalej?</h2>
                {valuationNextActions.map((action) => (
                  <Link key={action.label} to={action.to}>
                    <span><Icon name={action.icon} /></span>
                    <strong>{action.label}</strong>
                    <Icon name="chevron" />
                  </Link>
                ))}
                <button type="button" onClick={resetValuation}>
                  <span><Icon name="target" /></span>
                  <strong>Powtórz wycenę</strong>
                  <Icon name="chevron" />
                </button>
              </section>

              <section className="valuation-preview-card valuation-info-card">
                <h2>Informacje o wycenie</h2>
                <p>Wycena ma charakter orientacyjny i nie stanowi oferty handlowej.</p>
                <details>
                  <summary>Jak liczymy wycenę?</summary>
                  <p>Stawkę za m² bierzemy z cen transakcyjnych NBP dla miasta, a gdy ich brak - z danych GUS (nie starszych niż 3 lata) albo ze średniej ogłoszeń w serwisie. Dzielnicę uwzględniamy, gdy mamy w niej co najmniej 3 ogłoszenia. Stan, piętro, rok budowy i udogodnienia korygują stawkę w górę lub w dół.</p>
                </details>
              </section>
            </aside>
          </div>
        ) : (
        <div className="valuation-layout">
          <div className="valuation-main">
            <section className="valuation-form-section">
              <h2>{isValuationConditionStep ? 'Stan i udogodnienia' : isValuationDetailsStep ? `Szczegóły ${valuationPropertyLabel}` : 'Gdzie znajduje się nieruchomość?'}</h2>
              <p>{isValuationConditionStep ? `Określ stan techniczny oraz udogodnienia dla typu: ${valuationPropertyLabel}.` : isValuationDetailsStep ? 'Pola w tej sekcji zmieniają się po wyborze typu nieruchomości.' : 'Podaj lokalizację swojej nieruchomości.'}</p>

              <div className="valuation-form-card">
                {isValuationConditionStep ? (
                  <>
                    <div className="valuation-section-title">Stan techniczny nieruchomości</div>
                    <div className="valuation-condition-grid">
                      {VALUATION_CONDITION_OPTIONS.map((option) => (
                        <button type="button" className={valuationForm.condition === option.title ? 'active' : ''} key={option.title} onClick={() => updateValuation('condition', option.title)}>
                          <Icon name={option.icon} />
                          <strong>{option.title}</strong>
                          <small>{option.text}</small>
                        </button>
                      ))}
                    </div>

                    <div className="valuation-section-title">Udogodnienia dla typu: {valuationPropertyLabel}</div>
                    <div className="valuation-amenity-grid">
                      {visibleValuationAmenityOptions.map((option) => (
                        <button type="button" className={valuationForm.amenities.includes(option.title) ? 'active' : ''} key={option.title} onClick={() => toggleValuationAmenity(option.title)}>
                          <Icon name={option.icon} />
                          <span>{option.title}</span>
                        </button>
                      ))}
                    </div>

                    <div className="valuation-section-title">Stan prawny</div>
                    <div className="valuation-grid two legal-grid">
                      <label className="valuation-field">
                        <span>Forma własności</span>
                        <select value={valuationForm.ownership} onChange={(event) => updateValuation('ownership', event.target.value)}>
                          <option value="">Wybierz formę własności</option>
                          <option>Pełna własność</option>
                          <option>Spółdzielcze własnościowe</option>
                          <option>Udział</option>
                        </select>
                      </label>
                      <div className="valuation-field">
                        <span>Księga wieczysta</span>
                        <div className="valuation-toggle valuation-toggle-wide">
                          <button type="button" className={valuationForm.landRegister ? 'active' : ''} onClick={() => updateValuation('landRegister', true)}>Tak</button>
                          <button type="button" className={!valuationForm.landRegister ? 'active' : ''} onClick={() => updateValuation('landRegister', false)}>Nie</button>
                        </div>
                      </div>
                    </div>
                  </>
                ) : !isValuationDetailsStep ? (
                  <>
                    <label className="valuation-field wide">
                      <span>Miasto, dzielnica lub adres</span>
                      <div className="valuation-location-field">
                      <div className="valuation-input-control">
                        <Icon name="pin" />
                        <input
                          value={valuationForm.location}
                          onChange={(event) => { updateValuation('location', event.target.value); setValuationLocationSuggestOpen(true); }}
                          onFocus={() => setValuationLocationSuggestOpen(true)}
                          onBlur={() => setTimeout(() => setValuationLocationSuggestOpen(false), 120)}
                          placeholder="Wpisz miasto, dzielnicę lub ulicę"
                        />
                      </div>
                      {valuationLocationSuggestLoading && <span className="valuation-location-spinner" aria-hidden="true" />}
                      {valuationLocationSuggestOpen && (shownValuationLocationSuggestions.length > 0 || (!valuationLocationSuggestLoading && valuationLocationQuery.length >= 2)) && (
                        <div className="valuation-location-suggest" role="listbox" aria-label="Podpowiedzi lokalizacji">
                          {shownValuationLocationSuggestions.length > 0 ? shownValuationLocationSuggestions.map((place) => (
                            <button type="button" key={`${place.id}-${place.label}-${place.sublabel}`} onMouseDown={(event) => event.preventDefault()} onClick={() => selectValuationLocation(place)}>
                              <Icon name="pin" />
                              <span>
                                <strong>{place.label}</strong>
                                <small>{place.sublabel}</small>
                              </span>
                            </button>
                          )) : <p>Brak wyników dla „{valuationForm.location.trim()}"</p>}
                        </div>
                      )}
                      </div>
                      <small>Przykłady: Kraków, Podgórze, ul. Zabłocie 15</small>
                    </label>

                    <div className="valuation-note">
                      <span><Icon name="chart" /></span>
                      <p>
                        <strong>Lokalizacja ma duży wpływ na wartość nieruchomości.</strong>
                        <small>Im dokładniejszy adres, tym dokładniejsza wycena.</small>
                      </p>
                    </div>

                    <div className="valuation-grid two">
                      <label className="valuation-field">
                        <span>Rynek</span>
                        <select value={valuationForm.market} onChange={(event) => updateValuation('market', event.target.value as ValuationForm['market'])}>
                          <option value="">Wybierz rynek</option>
                          <option>Wtórny</option>
                          <option>Pierwotny</option>
                        </select>
                      </label>
                      <label className="valuation-field">
                        <span>Typ nieruchomości</span>
                        <select value={valuationForm.propertyType} onChange={(event) => updateValuation('propertyType', event.target.value as ValuationForm['propertyType'])}>
                          <option value="">Wybierz typ</option>
                          <option>Mieszkanie</option>
                          <option>Dom</option>
                          <option>Lokal użytkowy</option>
                        </select>
                      </label>
                    </div>
                  </>
                ) : (
                  <>
                    <div className="valuation-section-title">Informacje podstawowe</div>
                    <div className="valuation-grid four valuation-details-grid">
                      <label className="valuation-field"><span>{isHouseValuation ? 'Powierzchnia domu' : isCommercialValuation ? 'Powierzchnia lokalu' : 'Powierzchnia mieszkania'}</span><div className="valuation-input-control suffix"><input value={valuationForm.area} onChange={(event) => updateValuation('area', event.target.value)} placeholder={`Np. ${formatAreaNumber(isHouseValuation ? 140 : isCommercialValuation ? 85 : 52)}`} /><em>{areaSuffix}</em></div></label>
                      <label className="valuation-field"><span>{isCommercialValuation ? 'Liczba pomieszczeń' : 'Liczba pokoi'}</span><select value={valuationForm.rooms} onChange={(event) => updateValuation('rooms', event.target.value)}><option value="">Wybierz</option><option>{isCommercialValuation ? '1 pomieszczenie' : '1 pokój'}</option><option>{isCommercialValuation ? '2 pomieszczenia' : '2 pokoje'}</option><option>{isCommercialValuation ? '3 pomieszczenia' : '3 pokoje'}</option><option>{isCommercialValuation ? '4 pomieszczenia' : '4 pokoje'}</option><option>{isCommercialValuation ? '5+ pomieszczeń' : '5+ pokoi'}</option></select></label>
                      {!isHouseValuation && <label className="valuation-field"><span>{isCommercialValuation ? 'Poziom lokalu' : 'Piętro'}</span><select value={valuationForm.floor} onChange={(event) => updateValuation('floor', event.target.value)}><option value="">Wybierz</option><option>Parter</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5+</option><option>Poddasze</option></select></label>}
                      {!isCommercialValuation && <label className="valuation-field"><span>{isHouseValuation ? 'Liczba kondygnacji' : 'Liczba pięter w budynku'}</span><select value={valuationForm.buildingFloors} onChange={(event) => updateValuation('buildingFloors', event.target.value)}><option value="">Wybierz</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5+</option></select></label>}
                      {isHouseValuation && <label className="valuation-field"><span>Powierzchnia działki</span><div className="valuation-input-control suffix"><input value={valuationForm.plotArea} onChange={(event) => updateValuation('plotArea', event.target.value)} placeholder={`Np. ${formatAreaNumber(650)}`} /><em>{areaSuffix}</em></div></label>}
                      <label className="valuation-field"><span>Rok budowy</span><input value={valuationForm.yearBuilt} onChange={(event) => updateValuation('yearBuilt', event.target.value)} placeholder="Np. 2015" /></label>
                      <label className="valuation-field"><span>{isHouseValuation ? 'Typ zabudowy' : isCommercialValuation ? 'Typ lokalu' : 'Typ budynku'}</span><select value={valuationForm.buildingType} onChange={(event) => updateValuation('buildingType', event.target.value)}><option value="">Wybierz</option>{valuationBuildingTypeOptions.map((option) => <option key={option}>{option}</option>)}</select></label>
                      <label className="valuation-field"><span>Technologia budowy</span><select value={valuationForm.buildingMaterial} onChange={(event) => updateValuation('buildingMaterial', event.target.value)}><option value="">Wybierz</option><option>Wielka płyta</option><option>Cegła</option><option>Żelbet</option><option>Silikat</option></select></label>
                    </div>

                    {isCommercialValuation ? (
                      <>
                        <div className="valuation-section-title">Funkcja lokalu</div>
                        <div className="valuation-grid four valuation-details-grid compact-controls">
                          <label className="valuation-field"><span>Przeznaczenie</span><select value={valuationForm.commercialPurpose} onChange={(event) => updateValuation('commercialPurpose', event.target.value)}><option value="">Wybierz</option>{VALUATION_COMMERCIAL_PURPOSES.map((option) => <option key={option}>{option}</option>)}</select></label>
                          <div className="valuation-field"><span>Wejście z ulicy</span><div className="valuation-toggle"><button type="button" className={valuationForm.streetEntrance ? 'active' : ''} onClick={() => updateValuation('streetEntrance', true)}>Tak</button><button type="button" className={!valuationForm.streetEntrance ? 'active' : ''} onClick={() => updateValuation('streetEntrance', false)}>Nie</button></div></div>
                          <div className="valuation-field"><span>Witryna</span><div className="valuation-toggle"><button type="button" className={valuationForm.displayWindow ? 'active' : ''} onClick={() => updateValuation('displayWindow', true)}>Tak</button><button type="button" className={!valuationForm.displayWindow ? 'active' : ''} onClick={() => updateValuation('displayWindow', false)}>Nie</button></div></div>
                          <label className="valuation-field"><span>Czynsz / koszty</span><div className="valuation-input-control suffix wide-suffix"><input value={valuationForm.rent} onChange={(event) => updateValuation('rent', event.target.value)} placeholder="Np. 1800" /><em>zł / mies.</em></div></label>
                        </div>
                      </>
                    ) : (
                      <>
                        <div className="valuation-section-title">Rozkład i orientacja</div>
                        <div className="valuation-grid five valuation-details-grid">
                          <label className="valuation-field"><span>Kuchnia</span><select value={valuationForm.kitchen} onChange={(event) => updateValuation('kitchen', event.target.value)}><option value="">Wybierz</option><option>Aneks</option><option>Oddzielna</option></select></label>
                          <label className="valuation-field"><span>Łazienka</span><select value={valuationForm.bathrooms} onChange={(event) => updateValuation('bathrooms', event.target.value)}><option value="">Wybierz</option><option>1</option><option>2</option><option>3+</option></select></label>
                          {!isHouseValuation && <div className="valuation-field"><span>Balkon</span><div className="valuation-toggle"><button type="button" className={valuationForm.balcony ? 'active' : ''} onClick={() => updateValuation('balcony', true)}>Tak</button><button type="button" className={!valuationForm.balcony ? 'active' : ''} onClick={() => updateValuation('balcony', false)}>Nie</button></div></div>}
                          {!isHouseValuation && valuationForm.balcony && <label className="valuation-field"><span>Powierzchnia balkonu</span><div className="valuation-input-control suffix"><input value={valuationForm.balconyArea} onChange={(event) => updateValuation('balconyArea', event.target.value)} placeholder={`Np. ${formatAreaNumber(5)}`} /><em>{areaSuffix}</em></div></label>}
                          <label className="valuation-field"><span>Orientacja okien</span><select value={valuationForm.orientation} onChange={(event) => updateValuation('orientation', event.target.value)}><option value="">Wybierz</option><option>Południowy zachód</option><option>Południe</option><option>Wschód</option><option>Zachód</option><option>Północ</option></select></label>
                        </div>

                        <div className="valuation-note compact"><span><Icon name="sun" /></span><p><small>Orientacja okien ma wpływ na doświetlenie nieruchomości, co może wpływać na jej wartość.</small></p></div>
                      </>
                    )}

                    <div className="valuation-section-title">Dodatkowe pomieszczenia</div>
                    <div className="valuation-grid four valuation-details-grid compact-controls">
                      {[
                        { label: 'Piwnica', field: 'cellar' as const },
                        ...(!isCommercialValuation ? [{ label: 'Komórka lokatorska', field: 'storage' as const }] : []),
                        { label: 'Miejsce parkingowe', field: 'parking' as const },
                        ...(!isCommercialValuation ? [{ label: 'Garaż', field: 'garage' as const }] : []),
                      ].map((item) => (
                        <div className="valuation-field" key={item.label}>
                          <span>{item.label}</span>
                          <div className="valuation-toggle"><button type="button" className={valuationForm[item.field] ? 'active' : ''} onClick={() => updateValuation(item.field, true)}>Tak</button><button type="button" className={!valuationForm[item.field] ? 'active' : ''} onClick={() => updateValuation(item.field, false)}>Nie</button></div>
                        </div>
                      ))}
                    </div>

                    <div className="valuation-section-title">Informacje dodatkowe</div>
                    <div className="valuation-grid four valuation-details-grid compact-controls">
                      {!isCommercialValuation && <label className="valuation-field"><span>{isHouseValuation ? 'Koszty utrzymania' : 'Czynsz administracyjny'}</span><div className="valuation-input-control suffix wide-suffix"><input value={valuationForm.rent} onChange={(event) => updateValuation('rent', event.target.value)} placeholder="Np. 700" /><em>zł / mies.</em></div></label>}
                      <label className="valuation-field"><span>Ogrzewanie</span><select value={valuationForm.heating} onChange={(event) => updateValuation('heating', event.target.value)}><option value="">Wybierz</option><option>Miejskie</option><option>Gazowe</option><option>Elektryczne</option></select></label>
                      <label className="valuation-field"><span>Ciepła woda</span><select value={valuationForm.hotWater} onChange={(event) => updateValuation('hotWater', event.target.value)}><option value="">Wybierz</option><option>Miejska</option><option>Piec gazowy</option><option>Bojler</option></select></label>
                      {!isHouseValuation && <div className="valuation-field"><span>Winda</span><div className="valuation-toggle"><button type="button" className={valuationForm.elevator ? 'active' : ''} onClick={() => updateValuation('elevator', true)}>Tak</button><button type="button" className={!valuationForm.elevator ? 'active' : ''} onClick={() => updateValuation('elevator', false)}>Nie</button></div></div>}
                    </div>
                  </>
                )}

                <div className="valuation-actions-row">
                  <button type="button" className="valuation-back" onClick={goBack}>Wstecz</button>
                  <button type="button" className="valuation-next" onClick={goNext}>{nextStepLabel} <Icon name="arrow" /></button>
                </div>
              </div>
            </section>
          </div>

          <aside className="valuation-sidebar">
            <section className="valuation-preview-card">
              <h2>Podgląd wyceny</h2>
              <div className="valuation-estimate-box">
                <div>
                  <span>Szacowana wartość rynkowa</span>
                  {valuation.ready ? <strong className="valuation-price-range">{formatPrice(valuation.minValue)} - {formatPrice(valuation.maxValue)}</strong> : <strong>0</strong>}
                  <small>Przedział cenowy</small>
                  <em>{valuation.ready ? `${formatPricePerAreaNumber(valuation.minPerMeter)} - ${formatPricePerArea(valuation.maxPerMeter)}` : formatPricePerArea(0)}</em>
                  <p>{valuation.ready ? `Średnio: ${formatPrice(valuation.averageValue)} (${formatPricePerArea(valuation.averagePerMeter)}).` : valuation.unavailableReason ?? 'Podaj miasto oraz powierzchnię, aby zobaczyć wynik wyceny.'}</p>
                  {valuation.ready && valuation.sourceLabel && <small className="valuation-source-note">Na podstawie: {valuation.sourceLabel}.</small>}
                </div>
                <div className="valuation-house-graphic" aria-hidden="true">
                  <span><Icon name="house" /></span>
                  <i />
                  <i />
                </div>
              </div>
            </section>

            {!isValuationResultStep && (
              <section className="valuation-preview-card">
                <h2>Postęp wyceny</h2>
                <div className="valuation-progress-card">
                  <div>
                    <strong>Uzupełnienie formularza</strong>
                    <span>{progressValue}%</span>
                  </div>
                  <div className="valuation-progress-bar"><span style={{ width: `${progressValue}%` }} /></div>
                  <div className="valuation-check-list">
                    {valuationCompletionSteps.map((item) => (
                      <p className={item.done ? 'done' : ''} key={item.label}>
                        <Icon name="check" />
                        <span>{item.label}</span>
                      </p>
                    ))}
                  </div>
                </div>
              </section>
            )}

            {!(isValuationDetailsStep || isValuationConditionStep) && (
              <section className="valuation-preview-card">
                <h2>Co wpływa na wycenę?</h2>
                <div className="valuation-driver-list">
                  {valuationDrivers.map((driver) => (
                    <div key={driver.title}>
                      <span><Icon name={driver.icon} /></span>
                      <p>
                        <strong>{driver.title}</strong>
                        <small>{driver.text}</small>
                      </p>
                    </div>
                  ))}
                </div>
              </section>
            )}

            <section className="valuation-preview-card">
              <h2>Dlaczego warto wycenić mieszkanie?</h2>
              <div className={isValuationDetailsStep || isValuationConditionStep ? 'valuation-driver-list compact' : 'valuation-benefit-grid'}>
                {(isValuationDetailsStep || isValuationConditionStep ? visibleValuationDrivers : valuationBenefits).map((benefit) => (
                  <div key={benefit.title}>
                    <span><Icon name={benefit.icon} /></span>
                    <p>
                      <strong>{benefit.title}</strong>
                      <small>{benefit.text}</small>
                    </p>
                  </div>
                ))}
              </div>
            </section>

            {valuation.ready && (
              <section className="valuation-preview-card">
                <h2>Założenia obliczeń</h2>
                <div className="valuation-driver-list compact">
                  {valuation.mainFactors.map((factor) => (
                    <div key={factor}>
                      <span><Icon name="chart" /></span>
                      <p><small>{factor}</small></p>
                    </div>
                  ))}
                </div>
              </section>
            )}
          </aside>
        </div>
        )}

        {!isValuationResultStep && <div className="valuation-trust-row">
          <span><Icon name="shield" /></span>
          <p><strong>Twoje dane są bezpieczne</strong><small>Nie udostępniamy Twoich danych osobom trzecim.</small></p>
          <span><Icon name="house" /></span>
          <p><strong>Darmowa wycena</strong><small>Wycena jest całkowicie darmowa i bez zobowiązań.</small></p>
          <span><Icon name="clock" /></span>
          <p><strong>Szybki wynik</strong><small>Wynik wyceny otrzymasz natychmiast po wypełnieniu formularza.</small></p>
        </div>}
      </div>
    </section>
  );
}

// Lista firm i usług pod /firmy. Kategoria pochodzi z query stringa (?kategoria=remonty),
// więc widok da się skopiować, odświeżyć i otworzyć w nowej karcie.

/**
 * Strona "Jeszcze nie mamy tej uslugi" (/reklama).
 *
 * Wchodzi sie tu z kafelka kategorii na /firmy-i-uslugi. Zamiast pustej listy firm pokazujemy
 * uczciwy komunikat, ze kategoria jeszcze nie ruszyla, i zbieramy kontakt do firm, ktore chca
 * sie w niej reklamowac. Zgloszenie laduje w bazie leadow (zrodlo FORM), wiec obsluguje je ten
 * sam panel marketingowy co pozostale kontakty.
 */
/**
 * Inicjaly w kolku pod karta "Dolacz do firm" - zastepuja zdjecia z projektu graficznego.
 * Nie mamy prawdziwych zdjec firm, a wstawianie przypadkowych twarzy udawaloby klientow,
 * ktorych jeszcze nie ma. Licznik obok jest elementem projektu marketingowego.
 */
const ADVERTISING_SOCIAL_INITIALS = ['AK', 'MW', 'JZ', 'PN', 'KB'];

function AdvertisingPage() {
  const [searchParams] = useSearchParams();
  const categoryParam = searchParams.get('kategoria');
  const activeCategory = serviceCategories.find((item) => item.slug === categoryParam) ?? null;

  const [form, setForm] = useState({
    fullName: '',
    companyName: '',
    email: '',
    phone: '',
    serviceCategory: activeCategory?.title ?? '',
    message: '',
    contactConsent: false,
  });
  const [error, setError] = useState('');
  const [isSending, setIsSending] = useState(false);
  const [isSent, setIsSent] = useState(false);

  const update = (field: keyof typeof form, value: string | boolean) => {
    setForm((previous) => ({ ...previous, [field]: value }));
    setError('');
  };

  const submit = async (event: ReactFormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!form.contactConsent) {
      setError('Zaznacz zgodę na kontakt, żebyśmy mogli przedstawić Ci ofertę.');
      return;
    }
    setIsSending(true);
    try {
      await apiFetch<void>('/advertising-enquiries', {
        method: 'POST',
        body: JSON.stringify(form),
      });
      setIsSent(true);
    } catch (submitError) {
      setError(submitError instanceof Error ? submitError.message : 'Nie udało się wysłać zgłoszenia. Spróbuj ponownie.');
    } finally {
      setIsSending(false);
    }
  };

  return (
    <section className="advertising-page" aria-label="Reklama w serwisie">
      <div className="advertising-frame">
        <div className="advertising-intro">
          <div className="breadcrumb">
            <Link to={ROUTES.home}>Strona główna</Link>
            <Icon name="chevron" />
            <strong>Reklama</strong>
          </div>

          <h1>
            Jeszcze nie mamy
            <br />
            tej usługi <span className="advertising-wave" aria-hidden="true">👋</span>
          </h1>
          <p className="advertising-lead">
            Ale pracujemy nad tym, aby wkrótce była dostępna!
            <br />
            Zostaw nam swoje dane, a skontaktujemy się z Tobą
            <br />
            jako jednym z pierwszych.
          </p>

          <article className="advertising-benefits">
            <span className="advertising-benefits-icon"><Icon name="megaphone" /></span>
            <div>
              <h2>Twoja reklama w serwisie Polska Lokalnie</h2>
              <ul>
                <li><Icon name="check" /> Trafisz do osób, które szukają usług w Twojej okolicy</li>
                <li><Icon name="check" /> Wyróżnisz swoją firmę na tle konkurencji</li>
                <li><Icon name="check" /> Zwiększysz liczbę zapytań i zleceń</li>
              </ul>
            </div>
          </article>

          <div className="advertising-visual">
            <img src={heroImage} alt="" />
            <article className="advertising-social">
              <span className="advertising-social-icon"><Icon name="heart" /></span>
              <div>
                <p>Dołącz do firm, które zwiększają widoczność w serwisie Polska Lokalnie.</p>
                <div className="advertising-social-avatars" aria-hidden="true">
                  {ADVERTISING_SOCIAL_INITIALS.map((initials) => (
                    <span key={initials}>{initials}</span>
                  ))}
                  <em>+120</em>
                </div>
              </div>
            </article>
          </div>
        </div>

        <div className="advertising-form-card">
          {isSent ? (
            <div className="advertising-sent" role="status">
              <span className="advertising-form-icon success"><Icon name="check" /></span>
              <h2>Dziękujemy za zgłoszenie</h2>
              <p>
                Zapisaliśmy Twoje dane. Odezwiemy się, gdy usługa
                {activeCategory ? ` „${activeCategory.title}”` : ''} będzie dostępna.
              </p>
              <Link className="advertising-submit" to={ROUTES.services}>Wróć do firm i usług</Link>
            </div>
          ) : (
            <>
              <header className="advertising-form-head">
                <span className="advertising-form-icon"><Icon name="mail" /></span>
                <div>
                  <h2>Zainteresowany reklamą?</h2>
                  <p>Wypełnij formularz, a my odezwiemy się do Ciebie, gdy usługa będzie dostępna.</p>
                </div>
              </header>

              <form className="advertising-form" onSubmit={submit} noValidate>
                <label className="advertising-field">
                  <span>Imię i nazwisko</span>
                  <div className="advertising-input">
                    <Icon name="user" />
                    <input
                      value={form.fullName}
                      onChange={(event) => update('fullName', event.target.value)}
                      placeholder="Wpisz swoje imię i nazwisko"
                      autoComplete="name"
                      required
                    />
                  </div>
                </label>

                <label className="advertising-field">
                  <span>Nazwa firmy</span>
                  <div className="advertising-input">
                    <Icon name="building" />
                    <input
                      value={form.companyName}
                      onChange={(event) => update('companyName', event.target.value)}
                      placeholder="Wpisz nazwę swojej firmy"
                      autoComplete="organization"
                      required
                    />
                  </div>
                </label>

                <label className="advertising-field">
                  <span>Adres e-mail</span>
                  <div className="advertising-input">
                    <Icon name="mail" />
                    <input
                      type="email"
                      value={form.email}
                      onChange={(event) => update('email', event.target.value)}
                      placeholder="Wpisz adres e-mail"
                      autoComplete="email"
                      required
                    />
                  </div>
                </label>

                <label className="advertising-field">
                  <span>Numer telefonu</span>
                  <div className="advertising-input">
                    <Icon name="phone" />
                    <input
                      type="tel"
                      value={form.phone}
                      onChange={(event) => update('phone', event.target.value)}
                      placeholder="Wpisz numer telefonu"
                      autoComplete="tel"
                      required
                    />
                  </div>
                </label>

                <label className="advertising-field">
                  <span>Rodzaj usługi</span>
                  <div className="advertising-input select">
                    <select
                      value={form.serviceCategory}
                      onChange={(event) => update('serviceCategory', event.target.value)}
                      required
                    >
                      <option value="">Wybierz kategorię</option>
                      {serviceCategories.map((category) => (
                        <option key={category.slug} value={category.title}>{category.title}</option>
                      ))}
                    </select>
                    <Icon name="chevron" />
                  </div>
                </label>

                <label className="advertising-field">
                  <span>Wiadomość</span>
                  <textarea
                    value={form.message}
                    onChange={(event) => update('message', event.target.value)}
                    placeholder="Napisz, co możemy wiedzieć o Twojej firmie lub usłudze"
                    rows={4}
                  />
                </label>

                <label className="advertising-consent">
                  <input
                    type="checkbox"
                    checked={form.contactConsent}
                    onChange={(event) => update('contactConsent', event.target.checked)}
                  />
                  <span>Wyrażam zgodę na kontakt w celu przedstawienia oferty reklamowej.</span>
                </label>

                {error && <p className="advertising-error" role="alert">{error}</p>}

                <button type="submit" className="advertising-submit" disabled={isSending}>
                  <Icon name="send" />
                  {isSending ? 'Wysyłanie...' : 'Wyślij zgłoszenie'}
                </button>

                <p className="advertising-note">
                  <Icon name="lock" /> Twoje dane są u nas bezpieczne. Nie udostępniamy ich osobom trzecim.
                </p>
              </form>
            </>
          )}
        </div>
      </div>
    </section>
  );
}

/**
 * Ilustracja pustej listy firm - witryna lokalu z pinezka, chmurami i zielenia.
 *
 * Rysowana inline, a nie wstawiana jako plik, bo korzysta z `currentColor` i dziedziczy kolory
 * z motywu strony. Znacznik `aria-hidden` jest celowy: to dekoracja, a caly komunikat niesie
 * naglowek pod spodem.
 */
function CompaniesEmptyIllustration() {
  return (
    <svg className="companies-none-art" viewBox="0 0 260 150" aria-hidden="true">
      {/* Sylwetka miasta i chmury w tle */}
      <g className="art-bg">
        <path d="M18 118V86h16v32M40 118V96h13v22M208 118V92h15v26M229 118V80h14v38" />
        <path d="M36 40h14M43 33v14" />
        <path d="M214 52h12M220 46v12" />
        <path d="M52 30c0-5 4-8 8-8s7 2 8 6c4 0 7 3 7 7H50c-3 0-5-2-5-5Z" />
        <path d="M186 42c0-4 3-7 7-7s6 2 7 5c3 0 6 3 6 6h-23c-2 0-3-2-3-4Z" />
      </g>

      {/* Pinezka lokalizacji nad lokalem */}
      <g className="art-pin">
        <circle cx="130" cy="20" r="14" />
        <path d="M130 11.5a5 5 0 0 0-5 5c0 3.7 5 9 5 9s5-5.3 5-9a5 5 0 0 0-5-5Z" />
        <circle className="art-pin-hole" cx="130" cy="16.5" r="1.8" />
      </g>

      {/* Lokal: markiza, szyld, witryna i drzwi */}
      <g className="art-shop">
        <path d="M78 60h104l10 18H68l10-18Z" />
        <path d="M78 78v40h104V78" />
        <path d="M92 78c0 6 5 10 11 10s11-4 11-10M114 78c0 6 5 10 11 10s11-4 11-10M136 78c0 6 5 10 11 10s11-4 11-10M158 78c0 6 5 10 11 10s11-4 11-10" />
        <path d="M92 96h30v18H92zM138 96h24v22h-24z" />
        <path d="M60 118h140" />
      </g>

      {/* Zielen po bokach */}
      <g className="art-plant">
        <path d="M48 118c0-9 5-15 11-15s11 6 11 15" />
        <path d="M59 103v15" />
        <path d="M190 118c0-7 4-12 9-12s9 5 9 12" />
        <path d="M199 106v12" />
      </g>
    </svg>
  );
}

/**
 * Pusta lista firm na /firmy.
 *
 * Widzi ja kazdy, kto szuka firmy, zanim ktorakolwiek dolaczy do serwisu. Zamiast suchego
 * "brak wynikow" tlumaczymy, co sie stalo, i zapraszamy do dodania pierwszej firmy - to jedyny
 * sposob, w jaki ta lista moze sie zapelnic.
 */
function CompaniesEmptyState({ categoryTitle, standalone }: { categoryTitle: string | null; standalone: boolean }) {
  // Gdy zaproszenie jest jedyna trescia strony, przejmuje role naglowka H1 - kazdy widok w serwisie
  // ma zaczynac sie od H1. Wewnatrz normalnej listy zostaje H2, zeby nie bylo dwoch H1 naraz.
  const Heading = standalone ? 'h1' : 'h2';

  return (
    <section className="companies-none" aria-label="Brak firm">
      <CompaniesEmptyIllustration />

      <Heading>Nie mamy jeszcze żadnych firm<br />spełniających Twoje kryteria</Heading>
      <p>
        Wygląda na to, że {categoryTitle ? `w kategorii „${categoryTitle}”` : 'w naszej bazie'} nie ma jeszcze żadnych ogłoszeń.
      </p>
      <p className="companies-none-accent">Czekamy na Twoje ogłoszenie!</p>

      <div className="companies-none-benefits">
        <article>
          <span><Icon name="flame" /></span>
          <strong>Bądź pierwszy</strong>
          <small>Twoja firma może być pierwsza w tej kategorii</small>
        </article>
        <article>
          <span><Icon name="megaphone" /></span>
          <strong>Zwiększ widoczność</strong>
          <small>Docieraj do klientów, którzy aktywnie szukają usług</small>
        </article>
        <article>
          <span><Icon name="group" /></span>
          <strong>Zdobądź zaufanie</strong>
          <small>Buduj opinie i zaufanie od pierwszych klientów</small>
        </article>
      </div>

      <div className="companies-none-cta">
        <span className="companies-none-cta-icon"><Icon name="megaphone" /></span>
        <div className="companies-none-cta-copy">
          <h3>Czekamy na <span>Twoje ogłoszenie!</span></h3>
          <p>
            Dodaj swoją firmę i zaprezentuj swoje usługi osobom, które właśnie kupują, sprzedają,
            wynajmują lub remontują nieruchomości.
          </p>
          <ul>
            <li><i><Icon name="check" /></i> Zwiększysz rozpoznawalność swojej marki</li>
            <li><i><Icon name="check" /></i> Zdobędziesz nowych klientów</li>
            <li><i><Icon name="check" /></i> Zbudujesz zaufanie i pozytywne opinie</li>
          </ul>
        </div>
        <div className="companies-none-cta-action">
          <Link className="companies-none-button" to={ROUTES.advertising}>
            <Icon name="plus" />
            Dodaj swoją firmę
          </Link>
          <small>To zajmie tylko kilka minut</small>
        </div>
      </div>
    </section>
  );
}
function CompaniesPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const categoryParam = searchParams.get('kategoria');
  const activeCategory = serviceCategories.find((item) => item.slug === categoryParam) ?? null;

  const companies = activeCategory
    ? companyDirectory.filter((company) => company.category === activeCategory.slug)
    : companyDirectory;

  /**
   * Dopoki w serwisie nie ma ANI JEDNEJ firmy, strona pokazuje samo zaproszenie - bez naglowka,
   * licznika, chipow kategorii i wyszukiwarki. Wszystkie te elementy pokazywalyby wtedy zera i
   * filtrowaly pustke. Gdy pojawi sie pierwsza firma, cala gorna czesc wraca automatycznie, a
   * zaproszenie zostaje juz tylko jako komunikat "brak wynikow" wewnatrz normalnego widoku.
   */
  const hasAnyCompany = companyDirectory.length > 0;

  // Zmiana filtra to zmiana adresu - replace, zeby nie zasmiecac historii przy przelaczaniu.
  const selectCategory = (slug: string | null) => {
    setSearchParams(slug ? { kategoria: slug } : {}, { replace: true });
  };

  return (
    <section className="services-page companies-page" aria-label="Firmy i usługi">
      <div className="services-frame companies-frame">
        <div className="services-main">
          <div className="breadcrumb">
            <Link to={ROUTES.home}>Strona główna</Link>
            <Icon name="chevron" />
            <Link to={ROUTES.services}>Firmy i usługi</Link>
            <Icon name="chevron" />
            <strong>{activeCategory ? activeCategory.title : 'Wszystkie firmy'}</strong>
          </div>

          {hasAnyCompany && (
            <>
          <section className="companies-head">
            <h1>{activeCategory ? activeCategory.title : 'Wszystkie firmy i usługi'}</h1>
            <p>
              {activeCategory
                ? activeCategory.text
                : 'Sprawdzone firmy i specjaliści z całej Polski. Porównaj oferty, oceny i opinie klientów.'}
            </p>
            <span className="companies-count">
              {companies.length === 1 ? '1 firma' : `${companies.length} firm`}
              {activeCategory ? ` w kategorii „${activeCategory.title}”` : ' w bazie'}
            </span>
          </section>

          <nav className="companies-filters" aria-label="Filtr kategorii">
            <button
              type="button"
              className={activeCategory ? 'companies-chip' : 'companies-chip active'}
              onClick={() => selectCategory(null)}
            >
              Wszystkie <span>{companyDirectory.length}</span>
            </button>
            {serviceCategories.map((category) => {
              const count = companyDirectory.filter((company) => company.category === category.slug).length;
              return (
                <button
                  key={category.slug}
                  type="button"
                  className={activeCategory?.slug === category.slug ? 'companies-chip active' : 'companies-chip'}
                  onClick={() => selectCategory(category.slug)}
                >
                  <Icon name={category.icon} /> {category.title} <span>{count}</span>
                </button>
              );
            })}
          </nav>
            </>
          )}

          <section className="services-section">
            {hasAnyCompany && (
            <div className="service-mini-search">
              <SearchField icon="pin" label="Lokalizacja" value="Cała Polska" />
              <SearchField icon="chevron" label="Usługa" value={activeCategory ? activeCategory.title : 'Wszystkie'} />
              <SearchField icon="chevron" label="Sortuj według" value="Polecane" />
              <button><Icon name="list" /> Filtry</button>
            </div>
            )}

            {companies.length === 0 ? (
              <CompaniesEmptyState categoryTitle={activeCategory ? activeCategory.title : null} standalone={!hasAnyCompany} />
            ) : (
            <div className="directory-list companies-list">
              {companies.map((company) => (
                <article className="directory-card" key={company.title}>
                  <div
                    className="directory-photo"
                    style={{ backgroundImage: `url(${company.image})`, backgroundPosition: company.position }}
                  />
                  <div>
                    <h3>{company.title}</h3>
                    <p><Icon name="star" /> {company.rating}</p>
                    <span>{company.text}</span>
                    <small><Icon name="pin" /> {company.city}</small>
                    <em><Icon name="check" /> Zweryfikowana firma</em>
                  </div>
                  <button>Zobacz profil</button>
                  <Icon name="heart" />
                </article>
              ))}
            </div>
            )}
          </section>

          <section className="services-section service-steps-section">
            <h2>Jak to działa?</h2>
            <div className="service-steps">
              {serviceSteps.map((step) => (
                <article className="service-step" key={step.title}>
                  <span>
                    <Icon name={step.icon} />
                  </span>
                  <div>
                    <h3>{step.title}</h3>
                    <p>{step.text}</p>
                  </div>
                </article>
              ))}
            </div>
          </section>
        </div>
      </div>
    </section>
  );
}

/**
 * Wyszukiwarka usług na /firmy-i-uslugi.
 *
 * Do serwisu nie dołączyła jeszcze żadna firma, więc każde szukanie kończy się na `/firmy`, gdzie
 * czeka zaproszenie do dodania oferty. Wpisane wartości i tak przekazujemy w query stringu - taki
 * jest standard projektu dla wyszukiwania, a gdy pojawią się prawdziwe firmy, lista odczyta je
 * bez zmian w tym komponencie.
 */
/** Ocena firmy wyluskana z etykiety typu "4.8 (96 opinii)". */
function companyRatingValue(rating: string): number {
  const match = rating.match(/[\d,.]+/);
  return match ? Number(match[0].replace(',', '.')) : 0;
}

/** Liczba opinii z tej samej etykiety - to po niej sortujemy "najczesciej opiniowane". */
function companyReviewCount(rating: string): number {
  const match = rating.match(/\((\d+)/);
  return match ? Number(match[1]) : 0;
}

const COMPANY_SORTS = [
  { value: 'polecane', label: 'Polecane' },
  { value: 'ocena', label: 'Najwyżej oceniane' },
  { value: 'opinie', label: 'Najwięcej opinii' },
  { value: 'nazwa', label: 'Nazwa A-Z' },
] as const;

type CompanySort = (typeof COMPANY_SORTS)[number]['value'];

/**
 * Panel z lista firm na /firmy-i-uslugi.
 *
 * Filtry sa prawdziwe: usluga wybierana z kategorii serwisu, lokalizacja z podpowiedziami
 * miejscowosci, do tego sortowanie. Zrodlem jest `companyDirectory` - dopoki jest puste, kazde
 * wyszukanie konczy sie miejscami reklamowymi, ale logika filtrowania dziala i po dodaniu
 * pierwszych firm zacznie zwracac wyniki bez zmian w tym komponencie.
 */
function ServicesDirectoryPreview() {
  const [category, setCategory] = useState<'' | ServiceCategorySlug>('');
  const [city, setCity] = useState('');
  const [sort, setSort] = useState<CompanySort>('polecane');
  const [suggestions, setSuggestions] = useState<PlaceSuggestion[]>([]);
  const [suggestionsOpen, setSuggestionsOpen] = useState(false);
  const [suggestionsLoading, setSuggestionsLoading] = useState(false);
  const skipNextFetch = useRef(false);
  const locationRef = useRef<HTMLDivElement | null>(null);

  const cityQuery = city.trim();
  const activeCategory = serviceCategories.find((item) => item.slug === category) ?? null;

  useEffect(() => {
    if (skipNextFetch.current) {
      skipNextFetch.current = false;
      return;
    }
    if (cityQuery.length < 2) {
      setSuggestions([]);
      setSuggestionsLoading(false);
      return;
    }
    const controller = new AbortController();
    setSuggestionsLoading(true);
    const timer = window.setTimeout(() => {
      fetchPlaceSuggestions(cityQuery, controller.signal)
        .then((places) => setSuggestions(places))
        .catch(() => { /* przerwane zapytanie albo brak sieci - zostaje poprzednia lista */ })
        .finally(() => setSuggestionsLoading(false));
    }, 300);
    return () => {
      controller.abort();
      window.clearTimeout(timer);
    };
  }, [cityQuery]);

  useEffect(() => {
    if (!suggestionsOpen) {
      return;
    }
    const onPointerDown = (event: MouseEvent) => {
      if (locationRef.current && !locationRef.current.contains(event.target as Node)) {
        setSuggestionsOpen(false);
      }
    };
    document.addEventListener('mousedown', onPointerDown);
    return () => document.removeEventListener('mousedown', onPointerDown);
  }, [suggestionsOpen]);

  const pickPlace = (label: string) => {
    skipNextFetch.current = true;
    setSuggestions([]);
    setSuggestionsOpen(false);
    setCity(label);
  };

  const companies = useMemo(() => {
    const needle = cityQuery.toLowerCase();
    const filtered = companyDirectory
      .filter((company) => !category || company.category === category)
      // Miasto porownujemy luzno - uzytkownik moze wpisac samo "Krak" albo pelne "Kraków, małopolskie".
      .filter((company) => !needle || company.city.toLowerCase().includes(needle.split(',')[0].trim()));

    const sorted = [...filtered];
    if (sort === 'ocena') {
      sorted.sort((a, b) => companyRatingValue(b.rating) - companyRatingValue(a.rating));
    } else if (sort === 'opinie') {
      sorted.sort((a, b) => companyReviewCount(b.rating) - companyReviewCount(a.rating));
    } else if (sort === 'nazwa') {
      sorted.sort((a, b) => a.title.localeCompare(b.title, 'pl'));
    }
    return sorted;
  }, [category, cityQuery, sort]);

  return (
    <section className="service-panel directory-panel">
      <div className="breadcrumb mini">
        <span>Strona główna</span>
        <Icon name="chevron" />
        <span>Firmy i usługi</span>
        <Icon name="chevron" />
        <strong>{activeCategory ? activeCategory.title : 'Wszystkie firmy'}</strong>
      </div>
      <h2>{activeCategory ? activeCategory.title : 'Wszystkie firmy i usługi'}</h2>
      <p>
        {activeCategory
          ? activeCategory.text
          : 'Sprawdzone firmy i specjaliści z całej Polski. Porównaj oferty i opinie klientów.'}
      </p>

      <div className="service-mini-search">
        <div className="search-field mini-field" ref={locationRef}>
          <label>
            <small>Lokalizacja</small>
            <input
              value={city}
              onChange={(event) => {
                setSuggestionsOpen(true);
                setCity(event.target.value);
              }}
              onFocus={() => setSuggestionsOpen(true)}
              placeholder="Cała Polska"
              autoComplete="off"
            />
          </label>
          {suggestionsOpen && cityQuery.length >= 2 && (
            <div className="settings-place-suggest services-place-suggest">
              {suggestionsLoading && <p className="settings-place-status">Szukam miejscowości...</p>}
              {!suggestionsLoading && suggestions.length === 0 && (
                <p className="settings-place-status">Brak wyników dla „{cityQuery}”.</p>
              )}
              {suggestions.map((place) => (
                <button type="button" key={place.id} onClick={() => pickPlace(place.label)}>
                  <Icon name="pin" />
                  <span>
                    <strong>{place.label}</strong>
                    {place.sublabel && <small>{place.sublabel}</small>}
                  </span>
                </button>
              ))}
            </div>
          )}
        </div>

        <label className="search-field mini-field mini-field-select">
          <small>Usługa</small>
          <select value={category} onChange={(event) => setCategory(event.target.value as '' | ServiceCategorySlug)}>
            <option value="">Wszystkie</option>
            {serviceCategories.map((item) => (
              <option key={item.slug} value={item.slug}>{item.title}</option>
            ))}
          </select>
          <Icon name="chevron" />
        </label>

        <label className="search-field mini-field mini-field-select">
          <small>Sortuj według</small>
          <select value={sort} onChange={(event) => setSort(event.target.value as CompanySort)}>
            {COMPANY_SORTS.map((item) => (
              <option key={item.value} value={item.value}>{item.label}</option>
            ))}
          </select>
          <Icon name="chevron" />
        </label>

        <button type="button" className="mini-filters" onClick={() => { setCategory(''); setCity(''); setSort('polecane'); }}>
          <Icon name="list" /> Wyczyść
        </button>
      </div>

      <div className="directory-list">
        {companies.length === 0
          ? EMPTY_COMPANY_SLOTS.slice(0, 3).map((slot) => (
            <article className="directory-slot" key={slot}>
              <span className="directory-slot-badge">
                <Icon name="tag" />
                Miejsce na Twoją reklamę
              </span>
              <Icon name="heart" />

              <div className="directory-slot-logo">
                <Icon name="megaphone" />
                <strong>Twoje logo</strong>
                <small>miejsce na logo Twojej firmy</small>
              </div>

              <div className="directory-slot-body">
                <h3>Twoja firma może być tutaj!</h3>
                <p className="directory-slot-rating"><Icon name="star" /> Zdobądź opinie od swoich klientów</p>
                <span>Tutaj będzie krótki opis Twoich usług i oferty, którą chcesz zaprezentować klientom.</span>
                <small><Icon name="pin" /> {cityQuery || 'Cała Polska'}</small>
                <em><Icon name="check" /> Zareklamuj swoją firmę</em>
              </div>

              <Link className="directory-slot-cta" to={ROUTES.advertising}>Dodaj swoją firmę</Link>
            </article>
          ))
          : companies.map((company) => (
            <article className="directory-card" key={company.title}>
              <div
                className="directory-photo"
                style={{ backgroundImage: `url(${company.image})`, backgroundPosition: company.position }}
              />
              <div>
                <h3>{company.title}</h3>
                <p><Icon name="star" /> {company.rating}</p>
                <span>{company.text}</span>
                <small><Icon name="pin" /> {company.city}</small>
                <em><Icon name="check" /> Zweryfikowana firma</em>
              </div>
              <button>Zobacz profil</button>
              <Icon name="heart" />
            </article>
          ))}
      </div>
    </section>
  );
}

function ServicesSearch() {
  const navigate = useNavigate();
  const [service, setService] = useState('');
  const [location, setLocation] = useState('');
  const [suggestions, setSuggestions] = useState<PlaceSuggestion[]>([]);
  const [suggestionsOpen, setSuggestionsOpen] = useState(false);
  const [suggestionsLoading, setSuggestionsLoading] = useState(false);
  // Po wybraniu miasta z listy nie odpytujemy od razu o podpowiedzi do wstawionej nazwy.
  const skipNextFetch = useRef(false);
  const locationRef = useRef<HTMLDivElement | null>(null);

  const locationQuery = location.trim();

  useEffect(() => {
    if (skipNextFetch.current) {
      skipNextFetch.current = false;
      return;
    }
    if (locationQuery.length < 2) {
      setSuggestions([]);
      setSuggestionsLoading(false);
      return;
    }
    const controller = new AbortController();
    setSuggestionsLoading(true);
    const timer = window.setTimeout(() => {
      fetchPlaceSuggestions(locationQuery, controller.signal)
        .then((places) => setSuggestions(places))
        .catch(() => { /* przerwane zapytanie albo brak sieci - zostaje poprzednia lista */ })
        .finally(() => setSuggestionsLoading(false));
    }, 300);
    return () => {
      controller.abort();
      window.clearTimeout(timer);
    };
  }, [locationQuery]);

  // Klik poza polem zamyka listę - inaczej podpowiedzi zasłaniałyby treść strony.
  useEffect(() => {
    if (!suggestionsOpen) {
      return;
    }
    const onPointerDown = (event: MouseEvent) => {
      if (locationRef.current && !locationRef.current.contains(event.target as Node)) {
        setSuggestionsOpen(false);
      }
    };
    document.addEventListener('mousedown', onPointerDown);
    return () => document.removeEventListener('mousedown', onPointerDown);
  }, [suggestionsOpen]);

  const pickPlace = (label: string) => {
    skipNextFetch.current = true;
    setSuggestions([]);
    setSuggestionsOpen(false);
    setLocation(label);
  };

  const submit = (event: ReactFormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const params = new URLSearchParams();
    if (service.trim()) {
      params.set('usluga', service.trim());
    }
    if (locationQuery) {
      params.set('lokalizacja', locationQuery);
    }
    const query = params.toString();
    navigate(query ? `${ROUTES.companies}?${query}` : ROUTES.companies);
  };

  return (
    <form className="services-search" onSubmit={submit} role="search">
      <label className="search-field services-search-service">
        <span className="sr-only">Jakiej usługi szukasz?</span>
        <input
          value={service}
          onChange={(event) => setService(event.target.value)}
          placeholder="Jakiej usługi szukasz?"
        />
      </label>

      <div className="search-field services-search-location" ref={locationRef}>
        <Icon name="pin" />
        <label>
          <small>Lokalizacja</small>
          <input
            value={location}
            onChange={(event) => {
              setSuggestionsOpen(true);
              setLocation(event.target.value);
            }}
            onFocus={() => setSuggestionsOpen(true)}
            placeholder="Cała Polska"
            autoComplete="off"
          />
        </label>

        {/* Od dwóch znaków podpowiadamy prawdziwe miejscowości - tak samo jak pole „Lokalizacje”
            w preferencjach wyszukiwania na /konto/ustawienia. */}
        {suggestionsOpen && locationQuery.length >= 2 && (
          <div className="settings-place-suggest services-place-suggest">
            {suggestionsLoading && <p className="settings-place-status">Szukam miejscowości...</p>}
            {!suggestionsLoading && suggestions.length === 0 && (
              <p className="settings-place-status">Brak wyników dla „{locationQuery}”. Możesz zostawić własny wpis.</p>
            )}
            {suggestions.map((place) => (
              <button type="button" key={place.id} onClick={() => pickPlace(place.label)}>
                <Icon name="pin" />
                <span>
                  <strong>{place.label}</strong>
                  {place.sublabel && <small>{place.sublabel}</small>}
                </span>
              </button>
            ))}
          </div>
        )}
      </div>

      <button type="submit" className="buy-search-button">Szukaj</button>
    </form>
  );
}

function ServicesPage() {
  return (
    <section className="services-page" aria-label="Firmy i usługi">
      <div className="services-frame">
        <div className="services-main">
          <div className="breadcrumb">
            <span>Strona główna</span>
            <Icon name="chevron" />
            <strong>Firmy i usługi</strong>
          </div>

          <section className="services-hero">
            <img src={heroImage} alt="" />
            <div className="services-hero-copy">
              <h1>
                Wszystkie usługi dla <span>Twojego domu</span>
              </h1>
              <p>Sprawdzone firmy i specjaliści, którzy pomogą Ci na każdym etapie zakupu, wykończenia i zamieszkania.</p>
            </div>
          </section>

          <ServicesSearch />

          <section className="services-section">
            <h2>Kategorie usług</h2>
            <div className="service-category-grid">
              {serviceCategories.map((category) => (
                <article className="service-category-card" key={category.title}>
                  <span className={`service-icon ico-${category.icon}`}>
                    <Icon name={category.icon} />
                  </span>
                  <h3>{category.title}</h3>
                  <p>{category.text}</p>
                  <Link to={advertisingPath(category.slug)}>Zobacz firmy <Icon name="arrow" /></Link>
                </article>
              ))}
            </div>
          </section>

          <section className="services-section">
            <div className="section-head">
              <h2>Polecane firmy</h2>
              <Link to={ROUTES.companies}>Zobacz wszystkie <Icon name="arrow" /></Link>
            </div>
            {serviceCompanies.length === 0 ? (
              /* Cztery wolne miejsca w tej samej siatce, w ktorej stana pozniej prawdziwe firmy. */
              <div className="recommended-company-grid">
                {EMPTY_COMPANY_SLOTS.map((slot) => (
                  <article className="companies-empty" key={slot}>
                    <span className="companies-empty-badge">
                      <Icon name="tag" />
                      Miejsce dla Ciebie
                    </span>

                    <span className="companies-empty-icon"><Icon name="building-plus" /></span>

                    <h3>Szukamy specjalistów</h3>
                    <p>Twoja firma może być tutaj i docierać do klientów z całej Polski.</p>

                    <ul className="companies-empty-benefits">
                      <li><i><Icon name="check" /></i> Docieraj do osób szukających usług</li>
                      <li><i><Icon name="check" /></i> Zwiększaj rozpoznawalność marki</li>
                      <li><i><Icon name="check" /></i> Buduj zaufanie i zdobywaj opinie</li>
                    </ul>

                    <Link className="companies-empty-cta" to={ROUTES.advertising}>
                      <Icon name="plus" />
                      Dodaj swoją firmę
                    </Link>
                  </article>
                ))}
              </div>
            ) : (
              <div className="recommended-company-grid">
                {serviceCompanies.map((company) => (
                  <article className="recommended-company" key={company.title}>
                    <span className="recommended-badge">
                      <Icon name="check" />
                      Polecana
                    </span>
                    <div className={`company-logo ico-${company.icon}`}>
                      <Icon name={company.icon} />
                    </div>
                    <h3>{company.title}</h3>
                    <p><Icon name="star" /> {company.rating}</p>
                    <small>{company.text}</small>
                    <em>{company.city}</em>
                    <button>Zobacz profil</button>
                  </article>
                ))}
              </div>
            )}
          </section>

          <section className="services-section service-steps-section">
            <h2>Jak to działa?</h2>
            <div className="service-steps">
              {serviceSteps.map((step) => (
                <article className="service-step" key={step.title}>
                  <span>
                    <Icon name={step.icon} />
                  </span>
                  <div>
                    <h3>{step.title}</h3>
                    <p>{step.text}</p>
                  </div>
                </article>
              ))}
            </div>
          </section>
        </div>

        <aside className="services-preview" aria-label="Podgląd firm">
          <ServicesDirectoryPreview />

          {/* Szkic przyszlego profilu firmy, a nie dzialajacy profil: nic tu nie jest klikalne
              i nie ma zadnych wymyslonych liczb - w miejsce danych stoja podpisy pol. */}
          <section className="service-panel profile-panel is-preview" aria-label="Przykładowy wygląd profilu firmy">
            <div className="profile-cover" style={{ backgroundImage: `url(${heroImage})` }}>
              <em className="preview-tag">Podgląd</em>
            </div>
            <div className="profile-head">
              <div className="profile-logo">
                <Icon name="hammer" />
              </div>
              <div>
                <h2>Nazwa Twojej firmy</h2>
                <p><Icon name="star" /> Miejsce na oceny od klientów</p>
                <span>Tak będzie wyglądać profil, gdy uruchomimy katalog firm</span>
              </div>
              <span className="profile-cta">Skontaktuj się</span>
            </div>
            <div className="profile-actions">
              <span><Icon name="phone" /> Zadzwoń</span>
              <span><Icon name="message" /> Napisz wiadomość</span>
              <span><Icon name="heart" /> Dodaj do ulubionych</span>
            </div>
            <div className="profile-tabs">
              <span className="active">O firmie</span>
              <span>Usługi</span>
              <span>Opinie</span>
              <span>Realizacje</span>
              <span>Kontakt</span>
            </div>
            <div className="profile-about">
              <h3>O firmie</h3>
              <p>W tym miejscu stanie opis Twojej firmy - czym się zajmujesz, co Cię wyróżnia i dla kogo pracujesz. Poniżej pokażemy najważniejsze informacje o Twojej działalności.</p>
              <div className="profile-stats">
                <span><Icon name="calendar" /> Lata na rynku</span>
                <span><Icon name="group" /> Zrealizowane projekty</span>
                <span><Icon name="shield" /> Gwarancja na usługi</span>
                <span><Icon name="document" /> Faktura VAT</span>
              </div>
            </div>
          </section>
        </aside>
      </div>
    </section>
  );
}

function parseNumber(value: string): number | null {
  const normalized = value.replace(/\s/g, '').replace(',', '.');
  if (normalized === '') {
    return null;
  }
  const parsed = Number(normalized);
  return Number.isNaN(parsed) ? null : parsed;
}

function flatsWord(count: number): string {
  if (count === 1) {
    return 'mieszkanie';
  }
  const ones = count % 10;
  const tens = count % 100;
  if (ones >= 2 && ones <= 4 && !(tens >= 12 && tens <= 14)) {
    return 'mieszkania';
  }
  return 'mieszkań';
}

function thousands(value: number): string {
  return `${Math.round(value / 1000)} tys.`;
}

const propertyTypeOptions: PropertySearchType[] = ['Mieszkanie', 'Dom', 'Działka', 'Lokal użytkowy', 'Pokój'];

/**
 * Ustawienia konta uzywaja liczby mnogiej ("Mieszkania"), a filtry pojedynczej ("Mieszkanie").
 * "Apartamenty" nie maja odpowiednika wsrod filtrow - dla nich zostaje wartosc domyslna.
 */
const PREFERENCE_PROPERTY_TYPES: Record<string, PropertySearchType> = {
  Mieszkania: 'Mieszkanie',
  Domy: 'Dom',
  Działki: 'Działka',
  'Lokale użytkowe': 'Lokal użytkowy',
};

/**
 * Preferencje trzymaja lokalizacje jako swobodny tekst ("Warszawa (Mokotów, Wola)"), a filtr miasta
 * porownuje sie z nazwa miasta z ogloszenia. Bierzemy pierwszy czlon - to, co przed nawiasem
 * albo przecinkiem - bo tylko on ma szanse dopasowac sie do miasta.
 */
function primaryLocation(raw: string | null): string {
  if (!raw) {
    return '';
  }
  return raw.split(/[(,]/)[0].trim();
}

function useFilterState() {
  const [cityInput, setCityInput] = useState('');
  const [city, setCity] = useState('');
  const [propertyType, setPropertyType] = useState(propertyTypeOptions[0]);
  const [priceMin, setPriceMin] = useState('');
  const [priceMax, setPriceMax] = useState('');
  const [areaMin, setAreaMin] = useState('');
  const [areaMax, setAreaMax] = useState('');
  const [rooms, setRooms] = useState<number | null>(null);
  const [wtorny, setWtorny] = useState(true);
  const [pierwotny, setPierwotny] = useState(true);
  const [noFeeOnly, setNoFeeOnly] = useState(false);
  const [more, setMore] = useState<Record<string, string>>({});
  // Czy obecne filtry pochodza z preferencji konta - od tego zalezy pasek nad wynikami.
  // Kopia w ref, bo applyPreferences jest stabilne (useCallback bez zaleznosci) i inaczej
  // widzialoby wartosc z chwili utworzenia funkcji, a nie biezaca.
  const [fromPreferences, setFromPreferences] = useState(false);
  const fromPreferencesRef = useRef(false);
  const markFromPreferences = (value: boolean) => {
    fromPreferencesRef.current = value;
    setFromPreferences(value);
  };

  const pMin = parseNumber(priceMin);
  const pMax = parseNumber(priceMax);
  const aMin = parseNumber(areaMin);
  const aMax = parseNumber(areaMax);

  let priceLabel = 'Dowolna';
  if (pMin != null && pMax != null) {
    priceLabel = `${thousands(pMin)} - ${thousands(pMax)} zł`;
  } else if (pMax != null) {
    priceLabel = `do ${formatPln(pMax)}`;
  } else if (pMin != null) {
    priceLabel = `od ${formatPln(pMin)}`;
  }

  let areaLabel = 'Dowolny';
  if (aMin != null && aMax != null) {
    areaLabel = `${aMin} - ${aMax} m²`;
  } else if (aMax != null) {
    areaLabel = `do ${aMax} m²`;
  } else if (aMin != null) {
    areaLabel = `od ${aMin} m²`;
  }

  const roomsLabelValue = rooms == null ? 'Dowolna' : rooms === 5 ? '5+ pokoi' : roomsLabel(rooms);
  const roomsShort = rooms == null ? 'Dowolne' : rooms === 5 ? '5+' : String(rooms);
  const marketLabel = wtorny && pierwotny ? 'Wtórny i pierwotny' : wtorny ? 'Wtórny' : pierwotny ? 'Pierwotny' : 'Brak';

  const resetAll = () => {
    setCity('');
    setCityInput('');
    setPropertyType(propertyTypeOptions[0]);
    setPriceMin('');
    setPriceMax('');
    setAreaMin('');
    setAreaMax('');
    setRooms(null);
    setWtorny(true);
    setPierwotny(true);
    setNoFeeOnly(false);
    setMore({});
    markFromPreferences(false);
  };

  /**
   * Wypelnia filtry preferencjami z ustawien konta. Wolane po wczytaniu preferencji oraz po ich
   * zapisaniu w ustawieniach - bez tego drugiego zmiana preferencji dzialalaby dopiero po
   * przeladowaniu strony, bo przejscia wewnatrz aplikacji nie tworza komponentu od nowa.
   * Gdy cokolwiek zostalo ustawione, podnosimy flage, zeby lista wynikow mogla powiedziec, skad
   * wziely sie te filtry: zawezenie bez wyjasnienia wyglada jak brak ofert w serwisie.
   */
  const applyPreferences = useCallback((prefs: SearchPreferences) => {
    let applied = false;

    const location = primaryLocation(prefs.locations);
    if (location) {
      setCity(location);
      setCityInput(location);
      applied = true;
    }
    const mappedType = prefs.propertyType ? PREFERENCE_PROPERTY_TYPES[prefs.propertyType.trim()] : undefined;
    if (mappedType) {
      setPropertyType(mappedType);
      applied = true;
    }
    if (prefs.budgetMax != null && prefs.budgetMax > 0) {
      setPriceMax(String(prefs.budgetMax));
      applied = true;
    }
    if (prefs.areaMin != null && prefs.areaMin > 0) {
      setAreaMin(String(prefs.areaMin));
      applied = true;
    }
    if (prefs.areaMax != null && prefs.areaMax > 0) {
      setAreaMax(String(prefs.areaMax));
      applied = true;
    }
    // Filtr pokoi przyjmuje jedna wartosc (5 = "5 i wiecej"), preferencje maja zakres -
    // bierzemy dolna granice, bo to ona odsiewa za male mieszkania.
    if (prefs.roomsMin != null && prefs.roomsMin > 0) {
      setRooms(Math.min(prefs.roomsMin, 5));
      applied = true;
    }

    // Puste preferencje po wyczyszczeniu w ustawieniach zdejmuja filtry, ktore same nalozyly.
    // Filtrow ustawionych recznie przez uzytkownika nie ruszamy.
    if (!applied && fromPreferencesRef.current) {
      resetAll();
      return;
    }
    markFromPreferences(applied);
  }, []);

  const clearCity = () => {
    setCity('');
    setCityInput('');
  };

  const chips: { label: string; onRemove: () => void }[] = [];
  if (city) {
    chips.push({ label: city, onRemove: clearCity });
  }
  if (pMin != null || pMax != null) {
    chips.push({ label: priceLabel, onRemove: () => { setPriceMin(''); setPriceMax(''); } });
  }
  if (aMin != null || aMax != null) {
    chips.push({ label: areaLabel, onRemove: () => { setAreaMin(''); setAreaMax(''); } });
  }
  if (rooms != null) {
    chips.push({ label: roomsLabelValue, onRemove: () => setRooms(null) });
  }
  if (!(wtorny && pierwotny)) {
    chips.push({ label: marketLabel, onRemove: () => { setWtorny(true); setPierwotny(true); } });
  }
  if (noFeeOnly) {
    chips.push({ label: 'Bez prowizji', onRemove: () => setNoFeeOnly(false) });
  }

  return {
    cityInput, setCityInput, city, setCity,
    propertyType, setPropertyType,
    priceMin, setPriceMin, priceMax, setPriceMax,
    areaMin, setAreaMin, areaMax, setAreaMax,
    rooms, setRooms, wtorny, setWtorny, pierwotny, setPierwotny,
    noFeeOnly, setNoFeeOnly, more, setMore,
    pMin, pMax, aMin, aMax,
    priceLabel, areaLabel, roomsLabelValue, roomsShort, marketLabel,
    resetAll, clearCity, chips,
    fromPreferences, applyPreferences,
  };
}

type FilterState = ReturnType<typeof useFilterState>;

type SavedSearchDraft = Omit<SavedSearchRecord, 'id' | 'createdAt' | 'updatedAt'>;

function sanitizeSavedSearchMore(more: Record<string, string>): Record<string, string> {
  return Object.fromEntries(
    Object.entries(more)
      .filter(([, value]) => {
        const trimmed = value.trim();
        return trimmed.length > 0 && !trimmed.toLowerCase().startsWith('dowoln');
      })
      .sort(([left], [right]) => left.localeCompare(right)),
  );
}

function savedSearchMoreSignature(more: Record<string, string>): string {
  return Object.entries(sanitizeSavedSearchMore(more))
    .map(([key, value]) => `${key}:${value}`)
    .join('|');
}

function buildSavedSearchDraft(mode: SavedSearchMode, filters: FilterState): SavedSearchDraft {
  return {
    mode,
    city: filters.city.trim(),
    propertyType: filters.propertyType,
    priceMin: filters.pMin,
    priceMax: filters.pMax,
    areaMin: filters.aMin,
    areaMax: filters.aMax,
    rooms: filters.rooms,
    wtorny: filters.wtorny,
    pierwotny: filters.pierwotny,
    noFeeOnly: filters.noFeeOnly,
    more: sanitizeSavedSearchMore(filters.more),
  };
}

function sameSavedSearchCriteria(savedSearch: SavedSearchRecord | SavedSearchDraft, draft: SavedSearchDraft): boolean {
  return (
    savedSearch.mode === draft.mode
    && savedSearch.city === draft.city
    && savedSearch.propertyType === draft.propertyType
    && savedSearch.priceMin === draft.priceMin
    && savedSearch.priceMax === draft.priceMax
    && savedSearch.areaMin === draft.areaMin
    && savedSearch.areaMax === draft.areaMax
    && savedSearch.rooms === draft.rooms
    && savedSearch.wtorny === draft.wtorny
    && savedSearch.pierwotny === draft.pierwotny
    && savedSearch.noFeeOnly === draft.noFeeOnly
    && savedSearchMoreSignature(savedSearch.more) === savedSearchMoreSignature(draft.more)
  );
}

function savedSearchPlaceLabel(savedSearch: SavedSearchRecord): string {
  return savedSearch.city || 'Cała Polska';
}

function savedSearchModeLabel(mode: SavedSearchMode): string {
  return mode === 'rent' ? 'Wynajem' : 'Kupno';
}

function savedSearchUpdatedLabel(iso: string): string {
  const date = new Date(iso);
  if (Number.isNaN(date.getTime())) {
    return 'Przed chwilą';
  }
  const now = new Date();
  const sameDay = now.toDateString() === date.toDateString();
  if (sameDay) {
    return `Dzisiaj, ${date.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })}`;
  }
  const yesterday = new Date(now);
  yesterday.setDate(now.getDate() - 1);
  if (yesterday.toDateString() === date.toDateString()) {
    return `Wczoraj, ${date.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })}`;
  }
  return date.toLocaleString('pl-PL', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
}

function savedSearchMetaLabel(savedSearch: SavedSearchRecord): string {
  const parts: string[] = [savedSearch.propertyType];

  if (savedSearch.rooms != null) {
    parts.push(savedSearch.rooms === 5 ? '5+ pokoi' : `${savedSearch.rooms} pokoje`);
  }

  if (savedSearch.areaMin != null || savedSearch.areaMax != null) {
    if (savedSearch.areaMin != null && savedSearch.areaMax != null) {
      parts.push(`${savedSearch.areaMin}-${savedSearch.areaMax} m²`);
    } else if (savedSearch.areaMin != null) {
      parts.push(`od ${savedSearch.areaMin} m²`);
    } else if (savedSearch.areaMax != null) {
      parts.push(`do ${savedSearch.areaMax} m²`);
    }
  }

  if (savedSearch.priceMin != null || savedSearch.priceMax != null) {
    if (savedSearch.priceMin != null && savedSearch.priceMax != null) {
      parts.push(`${formatPln(savedSearch.priceMin)}-${formatPln(savedSearch.priceMax)}`);
    } else if (savedSearch.priceMin != null) {
      parts.push(`od ${formatPln(savedSearch.priceMin)}`);
    } else if (savedSearch.priceMax != null) {
      parts.push(`do ${formatPln(savedSearch.priceMax)}`);
    }
  }

  if (!(savedSearch.wtorny && savedSearch.pierwotny)) {
    parts.push(savedSearch.wtorny ? 'Wtórny' : savedSearch.pierwotny ? 'Pierwotny' : 'Brak rynku');
  }

  if (savedSearch.noFeeOnly) {
    parts.push('Bez prowizji');
  }

  const moreCount = Object.keys(savedSearch.more).length;
  if (moreCount > 0) {
    parts.push(`+${moreCount} filtrów`);
  }

  return parts.join(' • ');
}

function applySavedSearchToFilters(filters: FilterState, savedSearch: SavedSearchRecord): void {
  filters.setCity(savedSearch.city);
  filters.setCityInput(savedSearch.city);
  filters.setPropertyType(savedSearch.propertyType as FilterState['propertyType']);
  filters.setPriceMin(savedSearch.priceMin == null ? '' : String(savedSearch.priceMin));
  filters.setPriceMax(savedSearch.priceMax == null ? '' : String(savedSearch.priceMax));
  filters.setAreaMin(savedSearch.areaMin == null ? '' : String(savedSearch.areaMin));
  filters.setAreaMax(savedSearch.areaMax == null ? '' : String(savedSearch.areaMax));
  filters.setRooms(savedSearch.rooms);
  filters.setWtorny(savedSearch.wtorny);
  filters.setPierwotny(savedSearch.pierwotny);
  filters.setNoFeeOnly(savedSearch.noFeeOnly);
  filters.setMore({ ...savedSearch.more });
}

function MegaSearch({ filters, onOpenMap, onSearch, mode = 'buy' }: {
  filters: FilterState;
  onOpenMap: (city: string, mode: 'buy' | 'rent') => void;
  onSearch?: () => void;
  mode?: 'buy' | 'rent';
}) {
  const {
    cityInput, setCityInput, city, setCity,
    propertyType, setPropertyType,
    priceMin, setPriceMin, priceMax, setPriceMax,
    areaMin, setAreaMin, areaMax, setAreaMax,
    rooms, setRooms, wtorny, setWtorny, pierwotny, setPierwotny,
    more, setMore,
    pMin, pMax, aMin, aMax,
    priceLabel, areaLabel, roomsShort, marketLabel,
    chips, resetAll,
  } = filters;

  const [recent, setRecent] = useState<string[]>([]);
  const [openField, setOpenField] = useState<'lokalizacja' | 'rodzaj' | 'cena' | 'metraz' | 'pokoje' | 'rynek' | 'more' | null>(null);
  const [suggestions, setSuggestions] = useState<PlaceSuggestion[]>([]);
  const [suggestLoading, setSuggestLoading] = useState(false);
  const skipNextFetch = useRef(false);
  const searchRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!openField) {
      return;
    }
    const handler = (event: MouseEvent) => {
      if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
        setOpenField(null);
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [openField]);

  useEffect(() => {
    if (skipNextFetch.current) {
      skipNextFetch.current = false;
      return;
    }
    const query = cityInput.trim();
    if (query.length < 2) {
      setSuggestions([]);
      setSuggestLoading(false);
      return;
    }
    const controller = new AbortController();
    setSuggestLoading(true);
    const timer = window.setTimeout(() => {
      fetchPlaceSuggestions(query, controller.signal)
        .then((places) => setSuggestions(places))
        .catch(() => { /* ignore aborts */ })
        .finally(() => setSuggestLoading(false));
    }, 300);
    return () => {
      controller.abort();
      window.clearTimeout(timer);
    };
  }, [cityInput]);

  const toggleField = (field: 'lokalizacja' | 'rodzaj' | 'cena' | 'metraz' | 'pokoje' | 'rynek' | 'more') => {
    setOpenField((current) => (current === field ? null : field));
  };

  const clearCity = () => {
    filters.clearCity();
    setSuggestions([]);
  };

  const addRecent = (label: string) => {
    const trimmed = label.trim();
    if (!trimmed) {
      return;
    }
    setRecent((current) => [trimmed, ...current.filter((item) => item !== trimmed)].slice(0, 4));
  };

  const pickCity = (label: string) => {
    skipNextFetch.current = true;
    setCityInput(label);
    setCity(label.split(/[\s,]+/)[0] ?? label);
    setSuggestions([]);
    addRecent(label);
  };

  const pickPlace = (place: PlaceSuggestion) => {
    skipNextFetch.current = true;
    setCityInput(place.label);
    setCity(place.label);
    setSuggestions([]);
    addRecent(place.label);
    setOpenField(null);
  };

  const applySearch = () => {
    if (suggestions.length > 0) {
      pickPlace(suggestions[0]);
      onSearch?.();
      return;
    }
    const trimmed = cityInput.trim();
    setCity(trimmed.split(/[\s,]+/)[0] ?? '');
    if (trimmed) {
      addRecent(trimmed);
    }
    setSuggestions([]);
    setOpenField(null);
    onSearch?.();
  };

  const isRentMode = mode === 'rent';
  const priceSliderMax = isRentMode ? RENT_PRICE_SLIDER_MAX : PRICE_SLIDER_MAX;
  const priceSliderStep = isRentMode ? RENT_PRICE_SLIDER_STEP : PRICE_SLIDER_STEP;
  const pricePresets = isRentMode ? RENT_PRICE_PRESETS : PRICE_PRESETS;
  const sliderLow = pMin ?? 0;
  const sliderHigh = pMax ?? priceSliderMax;
  const onSlider = (low: number, high: number) => {
    setPriceMin(low <= 0 ? '' : String(low));
    setPriceMax(high >= priceSliderMax ? '' : String(high));
  };

  const areaSliderLow = aMin ?? 0;
  const areaSliderHigh = aMax ?? AREA_SLIDER_MAX;
  const onAreaSlider = (low: number, high: number) => {
    setAreaMin(low <= 0 ? '' : String(low));
    setAreaMax(high >= AREA_SLIDER_MAX ? '' : String(high));
  };

  const cityPills = cityInput.trim()
    ? POLISH_CITIES.filter((name) => name.toLowerCase().includes(cityInput.trim().toLowerCase())).slice(0, 8)
    : POPULAR_CITIES;
  const moreActiveCount = Object.values(more).filter((value) => value && !value.startsWith('Dowoln')).length;

  return (
          <div className={`mega-search ${openField ? 'open' : ''}`} ref={searchRef}>
            <div className="mega-bar">
              <div className="mega-cell">
              <div className={`mega-field ${city ? 'has-value' : ''} ${openField === 'lokalizacja' ? 'active' : ''}`} role="button" tabIndex={0} onClick={() => toggleField('lokalizacja')}>
                <span>
                  <small>Lokalizacja</small>
                  <strong>{cityInput || 'Cała Polska'}</strong>
                </span>
                {cityInput && (
                  <span
                    className="mega-clear"
                    role="button"
                    tabIndex={0}
                    aria-label="Wyczyść lokalizację"
                    onClick={(event) => { event.stopPropagation(); clearCity(); }}
                  >
                    ×
                  </span>
                )}
              </div>
              {openField === 'lokalizacja' && (
              <div className="mega-pop mega-pop-location">
                <div className="mega-col">
                  <div className="mega-city-search">
                    <Icon name="search" />
                    <input
                      type="text"
                      autoFocus
                      placeholder="Wpisz miasto, dzielnicę lub ulicę"
                      value={cityInput}
                      onChange={(event) => setCityInput(event.target.value)}
                      onKeyDown={(event) => { if (event.key === 'Enter') { applySearch(); } }}
                    />
                    {suggestLoading && <span className="map-suggest-spinner" aria-hidden="true" />}
                  </div>

                  {cityInput.trim().length >= 2 ? (
                    <div className="mega-suggest">
                      {suggestions.map((place) => (
                        <button type="button" key={place.id} onClick={() => pickPlace(place)}>
                          <Icon name="pin" />
                          <span>
                            <strong>{place.label}</strong>
                            {place.sublabel && <small>{place.sublabel}</small>}
                          </span>
                        </button>
                      ))}
                      {suggestions.length === 0 && !suggestLoading && (
                        <p className="map-suggest-empty">Brak wyników dla „{cityInput.trim()}"</p>
                      )}
                      <button
                        type="button"
                        className="mega-map-link"
                        onClick={() => { setOpenField(null); onOpenMap(city || cityInput.trim(), mode); }}
                      >
                        <Icon name="pin" />
                        <span>Sprawdź na mapie</span>
                        <Icon name="chevron" />
                      </button>
                    </div>
                  ) : (
                  <>
                  <button
                    type="button"
                    className="mega-map-link"
                    onClick={() => { setOpenField(null); onOpenMap(city || cityInput.trim(), mode); }}
                  >
                    <Icon name="pin" />
                    <span>Sprawdź na mapie</span>
                    <Icon name="chevron" />
                  </button>

                  <p className="mega-col-label">Popularne miasta</p>
                  <div className="mega-city-pills">
                    {cityPills.map((name) => (
                      <button
                        type="button"
                        key={name}
                        className={city === name ? 'active' : ''}
                        onClick={() => { pickCity(name); setOpenField(null); }}
                      >
                        {name}
                      </button>
                    ))}
                  </div>

                  {recent.length > 0 && (
                    <>
                      <p className="mega-col-label">Ostatnio wyszukiwane</p>
                      <div className="mega-recent">
                        {recent.map((item) => (
                          <button type="button" key={item} onClick={() => { pickCity(item); setOpenField(null); }}>
                            <Icon name="pin" />
                            {item}
                          </button>
                        ))}
                      </div>
                    </>
                  )}
                  </>
                  )}
                </div>
              </div>
              )}
              </div>

              <div className="mega-cell">
              <button type="button" className={`mega-field ${openField === 'rodzaj' ? 'active' : ''}`} onClick={() => toggleField('rodzaj')}>
                <span>
                  <small>Rodzaj nieruchomości</small>
                  <strong>{propertyType}</strong>
                </span>
                <Icon name="chevron" />
              </button>
              {openField === 'rodzaj' && (
              <div className="mega-pop mega-pop-property">
                <div className="mega-col">
                  <p className="mega-col-label">Rodzaj nieruchomości</p>
                  <div className="mega-property-options">
                    {propertyTypeOptions.map((option) => (
                      <button
                        type="button"
                        key={option}
                        className={propertyType === option ? 'active' : ''}
                        onClick={() => { setPropertyType(option); setOpenField(null); }}
                      >
                        {option}
                      </button>
                    ))}
                  </div>
                </div>
              </div>
              )}
              </div>

              <div className="mega-cell">
              <button type="button" className={`mega-field ${pMin != null || pMax != null ? 'has-value' : ''} ${openField === 'cena' ? 'active' : ''}`} onClick={() => toggleField('cena')}>
                <span>
                  <small>Cena</small>
                  <strong>{priceLabel}</strong>
                </span>
                <Icon name="chevron" />
              </button>
              {openField === 'cena' && (
              <div className="mega-pop mega-pop-price">
                <div className="mega-col">
                  <p className="mega-col-label">{isRentMode ? 'Czynsz miesięczny (zł)' : 'Cena (zł)'}</p>
                  <div className="mega-price-inputs">
                    <label>
                      <span>Od</span>
                      <input inputMode="numeric" placeholder="0" value={priceMin} onChange={(event) => setPriceMin(event.target.value)} />
                    </label>
                    <label>
                      <span>Do</span>
                      <input inputMode="numeric" placeholder="bez limitu" value={priceMax} onChange={(event) => setPriceMax(event.target.value)} />
                    </label>
                  </div>

                  <DualRange
                    min={0}
                    max={priceSliderMax}
                    step={priceSliderStep}
                    low={sliderLow}
                    high={sliderHigh}
                    onChange={onSlider}
                  />

                  <p className="mega-col-label">Popularne zakresy</p>
                  <div className="mega-price-presets">
                    {pricePresets.map((preset) => (
                      <button
                        type="button"
                        key={preset.value}
                        className={pMax === preset.value && pMin == null ? 'active' : ''}
                        onClick={() => { setPriceMin(''); setPriceMax(String(preset.value)); }}
                      >
                        {preset.label}
                      </button>
                    ))}
                  </div>

                  <button type="button" className="mega-apply" onClick={() => setOpenField(null)}>
                    Zastosuj
                  </button>
                </div>
              </div>
              )}
              </div>

              <div className="mega-cell">
              <button type="button" className={`mega-field ${aMin != null || aMax != null ? 'has-value' : ''} ${openField === 'metraz' ? 'active' : ''}`} onClick={() => toggleField('metraz')}>
                <span>
                  <small>Metraż</small>
                  <strong>{areaLabel}</strong>
                </span>
                <Icon name="chevron" />
              </button>
              {openField === 'metraz' && (
              <div className="mega-pop mega-pop-price">
                <div className="mega-col">
                  <p className="mega-col-label">Metraż (m²)</p>
                  <div className="mega-price-inputs">
                    <label>
                      <span>Od</span>
                      <input inputMode="numeric" placeholder="0" value={areaMin} onChange={(event) => setAreaMin(event.target.value)} />
                    </label>
                    <label>
                      <span>Do</span>
                      <input inputMode="numeric" placeholder="bez limitu" value={areaMax} onChange={(event) => setAreaMax(event.target.value)} />
                    </label>
                  </div>

                  <DualRange
                    min={0}
                    max={AREA_SLIDER_MAX}
                    step={AREA_SLIDER_STEP}
                    low={areaSliderLow}
                    high={areaSliderHigh}
                    onChange={onAreaSlider}
                  />

                  <p className="mega-col-label">Popularne zakresy</p>
                  <div className="mega-price-presets">
                    {AREA_PRESETS.map((preset) => {
                      const active = (preset.min === 0 ? aMin == null : aMin === preset.min)
                        && (preset.max === 0 ? aMax == null : aMax === preset.max);
                      return (
                        <button
                          type="button"
                          key={preset.label}
                          className={active ? 'active' : ''}
                          onClick={() => {
                            setAreaMin(preset.min === 0 ? '' : String(preset.min));
                            setAreaMax(preset.max === 0 ? '' : String(preset.max));
                          }}
                        >
                          {preset.label}
                        </button>
                      );
                    })}
                  </div>

                  <button type="button" className="mega-apply" onClick={() => setOpenField(null)}>
                    Zastosuj
                  </button>
                </div>
              </div>
              )}
              </div>

              <div className="mega-cell">
              <button type="button" className={`mega-field ${rooms != null ? 'has-value' : ''} ${openField === 'pokoje' ? 'active' : ''}`} onClick={() => toggleField('pokoje')}>
                <span>
                  <small>Pokoje</small>
                  <strong>{roomsShort}</strong>
                </span>
                <Icon name="chevron" />
              </button>
              {openField === 'pokoje' && (
              <div className="mega-pop mega-pop-rooms">
                <div className="mega-col">
                  <p className="mega-col-label">Liczba pokoi</p>
                  <div className="mega-rooms-choices">
                    <button
                      type="button"
                      className={rooms == null ? 'active' : ''}
                      onClick={() => setRooms(null)}
                    >
                      Dowolna
                    </button>
                    {ROOM_OPTIONS.map((value) => (
                      <button
                        type="button"
                        key={value}
                        className={rooms === value ? 'active' : ''}
                        onClick={() => setRooms(value)}
                      >
                        {value === 5 ? '5+' : value}
                      </button>
                    ))}
                  </div>
                  <button type="button" className="mega-apply" onClick={() => setOpenField(null)}>
                    Zastosuj
                  </button>
                </div>
              </div>
              )}
              </div>

              <div className="mega-cell">
              <button type="button" className={`mega-field ${!(wtorny && pierwotny) ? 'has-value' : ''} ${openField === 'rynek' ? 'active' : ''}`} onClick={() => toggleField('rynek')}>
                <span>
                  <small>Rynek</small>
                  <strong>{marketLabel}</strong>
                </span>
                <Icon name="chevron" />
              </button>
              {openField === 'rynek' && (
              <div className="mega-pop mega-pop-market">
                <div className="mega-col">
                  <p className="mega-col-label">Rynek</p>
                  <div className="mega-market-choices">
                    <label className="mega-check">
                      <input type="checkbox" checked={wtorny} onChange={(event) => setWtorny(event.target.checked)} />
                      <span>Rynek wtórny</span>
                    </label>
                    <label className="mega-check">
                      <input type="checkbox" checked={pierwotny} onChange={(event) => setPierwotny(event.target.checked)} />
                      <span>Rynek pierwotny</span>
                    </label>
                  </div>
                  <button type="button" className="mega-apply" onClick={() => setOpenField(null)}>
                    Zastosuj
                  </button>
                </div>
              </div>
              )}
              </div>

              <div className="mega-cell mega-cell-more">
              <button type="button" className={`mega-more ${moreActiveCount > 0 ? 'has-value' : ''} ${openField === 'more' ? 'active' : ''}`} onClick={() => toggleField('more')}>
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M4 6h10M18 6h2M4 12h2M10 12h10M4 18h12M20 18h0" />
                  <path d="M16 4v4M8 10v4M14 16v4" />
                </svg>
                <span>Więcej filtrów</span>
                {moreActiveCount > 0 && <em>{moreActiveCount}</em>}
              </button>
              {openField === 'more' && (
              <div className="mega-pop mega-pop-more">
                <div className="mega-col">
                  <div className="mega-more-scroll">
                    <div className="mega-more-section">
                      <p className="mega-col-label">Dodatkowe filtry</p>
                      <div className="mega-more-grid">
                        {MORE_FILTERS.map((filter) => (
                          <label className="mega-select" key={filter.key}>
                            <span>{filter.label}</span>
                            <select
                              value={more[filter.key] ?? filter.options[0]}
                              onChange={(event) => setMore((current) => ({ ...current, [filter.key]: event.target.value }))}
                            >
                              {filter.options.map((option) => (
                                <option key={option}>{option}</option>
                              ))}
                            </select>
                          </label>
                        ))}
                      </div>
                    </div>
                  </div>
                  <div className="mega-more-actions">
                    <button type="button" className="mega-apply" onClick={applySearch}>
                      Pokaż wyniki
                    </button>
                  </div>
                </div>
              </div>
              )}
              </div>

              <button type="button" className="mega-search-btn" onClick={applySearch}>
                <span>Szukaj</span>
                <Icon name="search" />
              </button>
            </div>
            {chips.length > 0 && (
              <div className="mega-footer">
                <button type="button" className="mega-clear-all" onClick={resetAll}>
                  Wyczyść filtry
                </button>
              </div>
            )}
          </div>
  );
}

type HistoryPropertyType = 'Mieszkanie' | 'Dom' | 'Lokal użytkowy';
type HistoryMarketType = 'Wtórny i pierwotny' | 'Wtórny' | 'Pierwotny';
type HistoryPeriod = '2026' | '5y' | 'all';

type PriceHistoryMarket = {
  key: string;
  label: string;
  city: string;
  region: string;
  aliases?: string[];
};

const HISTORY_PRICE_MARKETS: PriceHistoryMarket[] = [
  { key: 'warszawa-mokotow', label: 'Warszawa, Mokotów', city: 'Warszawa', region: 'mazowieckie', aliases: ['mokotów'] },
  { key: 'warszawa-srodmiescie', label: 'Warszawa, Śródmieście', city: 'Warszawa', region: 'mazowieckie', aliases: ['śródmieście warszawa'] },
  { key: 'warszawa-wola', label: 'Warszawa, Wola', city: 'Warszawa', region: 'mazowieckie', aliases: ['wola'] },
  { key: 'warszawa-praga-poludnie', label: 'Warszawa, Praga-Południe', city: 'Warszawa', region: 'mazowieckie', aliases: ['praga południe', 'praga-poludnie'] },
  { key: 'warszawa-bielany', label: 'Warszawa, Bielany', city: 'Warszawa', region: 'mazowieckie', aliases: ['bielany'] },
  { key: 'krakow-zablocie', label: 'Kraków, Zabłocie', city: 'Kraków', region: 'małopolskie', aliases: ['zabłocie'] },
  { key: 'krakow-stare-miasto', label: 'Kraków, Stare Miasto', city: 'Kraków', region: 'małopolskie' },
  { key: 'krakow-krowodrza', label: 'Kraków, Krowodrza', city: 'Kraków', region: 'małopolskie' },
  { key: 'wroclaw-krzyki', label: 'Wrocław, Krzyki', city: 'Wrocław', region: 'dolnośląskie', aliases: ['krzyki'] },
  { key: 'wroclaw-stare-miasto', label: 'Wrocław, Stare Miasto', city: 'Wrocław', region: 'dolnośląskie' },
  { key: 'gdansk-wrzeszcz', label: 'Gdańsk, Wrzeszcz', city: 'Gdańsk', region: 'pomorskie', aliases: ['wrzeszcz'] },
  { key: 'gdansk-srodmiescie', label: 'Gdańsk, Śródmieście', city: 'Gdańsk', region: 'pomorskie' },
  { key: 'gdynia-redlowo', label: 'Gdynia, Redłowo', city: 'Gdynia', region: 'pomorskie' },
  { key: 'sopot-centrum', label: 'Sopot, Centrum', city: 'Sopot', region: 'pomorskie' },
  { key: 'poznan-jezyce', label: 'Poznań, Jeżyce', city: 'Poznań', region: 'wielkopolskie', aliases: ['jeżyce'] },
  { key: 'poznan-grunwald', label: 'Poznań, Grunwald', city: 'Poznań', region: 'wielkopolskie' },
  { key: 'lodz-srodmiescie', label: 'Łódź, Śródmieście', city: 'Łódź', region: 'łódzkie' },
  { key: 'lodz-widzew', label: 'Łódź, Widzew', city: 'Łódź', region: 'łódzkie' },
  { key: 'katowice-koszutka', label: 'Katowice, Koszutka', city: 'Katowice', region: 'śląskie' },
  { key: 'rzeszow-centrum', label: 'Rzeszów, Centrum', city: 'Rzeszów', region: 'podkarpackie' },
  { key: 'lublin-centrum', label: 'Lublin, Centrum', city: 'Lublin', region: 'lubelskie' },
  { key: 'bialystok-centrum', label: 'Białystok, Centrum', city: 'Białystok', region: 'podlaskie' },
  { key: 'szczecin-centrum', label: 'Szczecin, Centrum', city: 'Szczecin', region: 'zachodniopomorskie' },
  { key: 'bydgoszcz-srodmiescie', label: 'Bydgoszcz, Śródmieście', city: 'Bydgoszcz', region: 'kujawsko-pomorskie' },
  { key: 'torun-centrum', label: 'Toruń, Centrum', city: 'Toruń', region: 'kujawsko-pomorskie' },
  { key: 'olsztyn-centrum', label: 'Olsztyn, Centrum', city: 'Olsztyn', region: 'warmińsko-mazurskie' },
  { key: 'opole-centrum', label: 'Opole, Centrum', city: 'Opole', region: 'opolskie' },
  { key: 'kielce-centrum', label: 'Kielce, Centrum', city: 'Kielce', region: 'świętokrzyskie' },
  { key: 'zielona-gora-centrum', label: 'Zielona Góra, Centrum', city: 'Zielona Góra', region: 'lubuskie' },
  { key: 'zakopane-centrum', label: 'Zakopane, Centrum', city: 'Zakopane', region: 'małopolskie' },
];

const HISTORY_POPULAR_MARKETS = ['Warszawa, Mokotów', 'Kraków, Zabłocie', 'Wrocław, Krzyki', 'Gdańsk, Wrzeszcz', 'Poznań, Jeżyce'];

// Historia cen z API (/api/price-history) - dzienne srednie ceny ofertowe z ogloszen serwisu.
type ApiPricePoint = { date: string; avgPricePerM2: number; listingsCount: number };
type ApiQuarterPoint = { year: number; quarter: number; pricePerM2: number };
// nbp / gus - kwartalne ceny transakcyjne mieszkan dla calego miasta; nbpMarket - rynek serii NBP.
type ApiPriceHistory = {
  points: ApiPricePoint[];
  current: ApiPricePoint | null;
  trackedSince: string | null;
  nbp: ApiQuarterPoint[];
  gus: ApiQuarterPoint[];
  nbpMarket: string;
};

// Ogloszenia serwisu to mieszkania i domy - lokali uzytkowych nie ma z czego liczyc.
const HISTORY_PROPERTY_API: Record<HistoryPropertyType, 'APARTMENT' | 'HOUSE' | null> = {
  Mieszkanie: 'APARTMENT',
  Dom: 'HOUSE',
  'Lokal użytkowy': null,
};
// Pusty rynek = wtorny i pierwotny razem (tak zapisuje backend).
const HISTORY_MARKET_API: Record<HistoryMarketType, string> = {
  'Wtórny i pierwotny': '',
  Wtórny: 'Wtórny',
  Pierwotny: 'Pierwotny',
};

// "Warszawa, Mokotów" -> miasto Warszawa, dzielnica Mokotów; sama nazwa miasta -> cale miasto.
function priceHistoryApiPath(market: PriceHistoryMarket, propertyType: HistoryPropertyType,
  marketType: HistoryMarketType, from: string): string {
  // Dzielnica to druga czesc etykiety, o ile nie jest nazwa regionu (lokalizacje zapamietane
  // przez starsza wersje mialy np. "Kraków, małopolskie").
  const district = market.label.split(',').map((part) => part.trim()).slice(1)
    .find((part) => part && !isHistoryRegionName(part) && normalizeHistoryText(part) !== normalizeHistoryText(market.region)) ?? '';
  const params = new URLSearchParams({
    city: market.city,
    district,
    propertyType: HISTORY_PROPERTY_API[propertyType] ?? 'APARTMENT',
    market: HISTORY_MARKET_API[marketType],
    from,
  });
  return `/price-history?${params.toString()}`;
}

const HISTORY_YEAR = 2026;
const HISTORY_YEAR_MONTHS = ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru'];
// "od maja", "od września" - odmiana do opisu zmiany ceny.
const HISTORY_MONTHS_GENITIVE = ['stycznia', 'lutego', 'marca', 'kwietnia', 'maja', 'czerwca', 'lipca', 'sierpnia', 'września', 'października', 'listopada', 'grudnia'];
const HISTORY_PERIOD_OPTIONS: { value: HistoryPeriod; label: string }[] = [
  { value: '5y', label: 'Ostatnie 5 lat' },
  { value: 'all', label: 'Od 2006 (NBP)' },
  { value: '2026', label: '2026 do dziś' },
];
// Pierwszy kwartal w danych NBP (baza BaRN).
const HISTORY_NBP_FIRST_YEAR = 2006;
const HISTORY_NBP_FIRST_QUARTER = 3;
const HISTORY_ROMAN_QUARTERS = ['I', 'II', 'III', 'IV'];

// Przedzial na osi wykresu: miesiac (okres 2026) albo kwartal (dluzsze okresy).
type HistorySlot = { axisLabel: string; label: string; sinceLabel: string; year: number; month: number | null; quarter: number };

function buildHistorySlots(period: HistoryPeriod): HistorySlot[] {
  if (period === '2026') {
    return historyMonthLabels().map((label, month) => ({
      axisLabel: label,
      label: `${label} ${HISTORY_YEAR}`,
      sinceLabel: HISTORY_MONTHS_GENITIVE[month],
      year: HISTORY_YEAR,
      month,
      quarter: Math.floor(month / 3) + 1,
    }));
  }
  const now = new Date();
  const currentYear = now.getFullYear();
  const currentQuarter = Math.floor(now.getMonth() / 3) + 1;
  const startYear = period === '5y' ? currentYear - 4 : HISTORY_NBP_FIRST_YEAR;
  const slots: HistorySlot[] = [];
  for (let year = startYear; year <= currentYear; year += 1) {
    for (let quarter = 1; quarter <= 4; quarter += 1) {
      if (year === currentYear && quarter > currentQuarter) {
        break;
      }
      if (period === 'all' && year === HISTORY_NBP_FIRST_YEAR && quarter < HISTORY_NBP_FIRST_QUARTER) {
        continue;
      }
      const label = `${HISTORY_ROMAN_QUARTERS[quarter - 1]} kw. ${year}`;
      // Podpis roku przy pierwszym kwartale; przy 20 latach co drugi rok, zeby sie nie zlewaly.
      const showYear = (quarter === 1 || slots.length === 0) && (period === '5y' || year % 2 === 0);
      slots.push({ axisLabel: showYear ? String(year) : '', label, sinceLabel: label, year, month: null, quarter });
    }
  }
  return slots;
}

function historySlotContains(slot: HistorySlot, date: string): boolean {
  const year = Number(date.slice(0, 4));
  const month = Number(date.slice(5, 7)) - 1;
  return year === slot.year && (slot.month != null ? month === slot.month : Math.floor(month / 3) + 1 === slot.quarter);
}

// Wartosc kwartalna na osi: w widoku kwartalnym wprost, w miesiecznym w srodkowym miesiacu kwartalu.
function historyQuarterValue(points: ApiQuarterPoint[], slot: HistorySlot): number | null {
  if (slot.month != null && slot.month % 3 !== 1) {
    return null;
  }
  return points.find((point) => point.year === slot.year && point.quarter === slot.quarter)?.pricePerM2 ?? null;
}

// Poczatek okresu dla zapytania o historie.
function historyFromDate(slots: HistorySlot[]): string {
  const first = slots[0];
  if (!first) {
    return `${HISTORY_YEAR}-01-01`;
  }
  const month = first.month != null ? first.month + 1 : (first.quarter - 1) * 3 + 1;
  return `${first.year}-${String(month).padStart(2, '0')}-01`;
}

function normalizeHistoryText(value: string) {
  return value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/ł/g, 'l').replace(/[^a-z0-9]+/g, ' ').trim();
}

// Tylko dokladna nazwa lub alias ze slownika. Dopasowanie po samym miescie wybieralo pierwsza
// z brzegu dzielnice ("Warszawa" -> "Warszawa, Mokotów"), a historia cen jest liczona per dzielnica.
function findHistoryMarket(label: string) {
  const normalized = normalizeHistoryText(label);
  return HISTORY_PRICE_MARKETS.find((market) => (
    [market.label, ...(market.aliases ?? [])].some((name) => normalizeHistoryText(name) === normalized)
  ));
}

const HISTORY_VOIVODESHIPS = [
  'dolnośląskie', 'kujawsko-pomorskie', 'lubelskie', 'lubuskie', 'łódzkie', 'małopolskie', 'mazowieckie', 'opolskie',
  'podkarpackie', 'podlaskie', 'pomorskie', 'śląskie', 'świętokrzyskie', 'warmińsko-mazurskie', 'wielkopolskie',
  'zachodniopomorskie',
].map(normalizeHistoryText);

function isHistoryRegionName(value: string) {
  const normalized = normalizeHistoryText(value.replace(/^województwo\s+/i, ''));
  return normalized === 'polska' || HISTORY_VOIVODESHIPS.includes(normalized);
}

// Lokalizacja spoza slownika (wpisana albo z podpowiedzi mapy). Ceny liczy backend z ogloszen - tu tylko nazwy:
// "Kraków, Podgórze" -> dzielnica Podgórze w Krakowie; "Kraków" (+ województwo w opisie) -> cale miasto.
function createHistoryMarketFromPlace(label: string, sublabel = 'Polska'): PriceHistoryMarket {
  const labelParts = label.split(',').map((part) => part.trim()).filter(Boolean);
  const city = labelParts[0] || label.trim();
  const district = labelParts.slice(1).find((part) => !isHistoryRegionName(part)) ?? '';
  const regionFromPlace = sublabel.split(',').map((part) => part.trim()).find(isHistoryRegionName);
  const knownRegion = HISTORY_PRICE_MARKETS.find((market) => normalizeHistoryText(market.city) === normalizeHistoryText(city))?.region;
  const region = knownRegion
    ?? (regionFromPlace && normalizeHistoryText(regionFromPlace) !== 'polska' ? regionFromPlace.replace(/^województwo\s+/i, '') : 'Polska');
  const normalized = normalizeHistoryText([city, district].filter(Boolean).join('-')) || 'polska';
  return {
    key: `custom-${normalized.replace(/\s+/g, '-')}`,
    label: [city, district].filter(Boolean).join(', '),
    city,
    region,
  };
}

function historyLocalSuggestions(query: string): PlaceSuggestion[] {
  const normalized = normalizeHistoryText(query);
  const markets = HISTORY_PRICE_MARKETS
    .filter((market) => [market.label, market.city, ...(market.aliases ?? [])].some((value) => normalizeHistoryText(value).includes(normalized)))
    .slice(0, 8)
    .map((market, index) => ({ id: -index - 1, label: market.label, sublabel: `${market.city}, ${market.region}`, lat: 0, lng: 0 }));
  if (markets.length >= 8) {
    return markets;
  }
  const cities = POLISH_CITIES
    .filter((city) => normalizeHistoryText(city).includes(normalized))
    .slice(0, 8 - markets.length)
    .map((city, index) => ({ id: -100 - index, label: city, sublabel: 'miasto, Polska', lat: 0, lng: 0 }));
  return [...markets, ...cities];
}

function mergeHistorySuggestions(local: PlaceSuggestion[], remote: PlaceSuggestion[]) {
  const seen = new Set<string>();
  return [...local, ...remote].filter((place) => {
    const key = normalizeHistoryText(`${place.label} ${place.sublabel}`);
    if (seen.has(key)) {
      return false;
    }
    seen.add(key);
    return true;
  }).slice(0, 8);
}

function resolveHistoryMarket(label: string, sublabel?: string) {
  return findHistoryMarket(label) ?? createHistoryMarketFromPlace(label, sublabel);
}

function historyToday() {
  const today = new Date();
  if (today.getFullYear() < HISTORY_YEAR) {
    return new Date(HISTORY_YEAR, 0, 1);
  }
  if (today.getFullYear() > HISTORY_YEAR) {
    return new Date(HISTORY_YEAR, 11, 31);
  }
  return today;
}

function historyMonthLabels(today = historyToday()) {
  const monthIndex = Math.min(11, Math.max(0, today.getMonth()));
  return HISTORY_YEAR_MONTHS.slice(0, monthIndex + 1);
}

function historyTodayLabel(today = historyToday()) {
  return new Intl.DateTimeFormat('pl-PL', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(today);
}

function historyTicks(minPrice: number, maxPrice: number) {
  if (minPrice === 0 && maxPrice === 0) {
    return [0];
  }
  if (minPrice === maxPrice) {
    return [minPrice];
  }
  return [minPrice, maxPrice];
}

function historyShortMarketLabel(market: PriceHistoryMarket) {
  const cityPrefix = `${market.city}, `;
  if (!market.label.startsWith(cityPrefix)) {
    return market.label;
  }
  const tail = market.label.slice(cityPrefix.length).trim();
  if (!tail || normalizeHistoryText(tail) === 'polska' || normalizeHistoryText(tail) === normalizeHistoryText(market.region)) {
    return market.city;
  }
  return tail;
}

function PriceHistoryPage({ user }: { user: AuthUser | null }) {
  const navigate = useNavigate();
  const { formatPrice, formatPricePerArea, formatArea, areaSuffix } = useDisplay();
  const [historyParams] = useSearchParams();
  const [locationInput, setLocationInput] = useState('');
  const [selectedMarket, setSelectedMarket] = useState<PriceHistoryMarket | null>(null);
  const [propertyType, setPropertyType] = useState<HistoryPropertyType>('Mieszkanie');
  const [marketType, setMarketType] = useState<HistoryMarketType>('Wtórny i pierwotny');
  const [period, setPeriod] = useState<HistoryPeriod>('5y');
  const [createAlertFeedback, setCreateAlertFeedback] = useState<string | null>(null);
  const [cityAlertSubscriptions, setCityAlertSubscriptions] = useState<CityPriceAlertSubscription[]>([]);
  const [suggestions, setSuggestions] = useState<PlaceSuggestion[]>([]);
  const [suggestOpen, setSuggestOpen] = useState(false);
  const [suggestLoading, setSuggestLoading] = useState(false);
  const [hoveredHistoryIndex, setHoveredHistoryIndex] = useState<number | null>(null);
  // Historia sprawdzonych lokalizacji tego konta - najnowsza na poczatku, maksymalnie 5 pozycji.
  // Lista siedzi w ustawieniach konta (/api/me/settings), wiec porownanie wyglada tak samo
  // na kazdym urzadzeniu. Wpisy z przegladarki przenosimy raz, przy pierwszym wejsciu.
  const [recentMarkets, setRecentMarkets] = useState<PriceHistoryMarket[]>([]);
  useEffect(() => {
    if (!user) {
      setRecentMarkets([]);
      return;
    }
    let cancelled = false;
    const local = readUserJsonStorage<PriceHistoryMarket[]>(user, PRICE_HISTORY_MARKETS_SUFFIX, []);
    apiFetch<{ priceHistoryMarkets: string | null }>('/me/settings')
      .then((settings) => {
        if (cancelled) {
          return;
        }
        const fromAccount = parsePriceHistoryMarkets(settings.priceHistoryMarkets);
        if (fromAccount.length === 0 && local.length > 0) {
          setRecentMarkets(local);
          savePriceHistoryMarkets(local);
        } else {
          setRecentMarkets(fromAccount);
        }
        writeUserJsonStorage<PriceHistoryMarket[]>(user, PRICE_HISTORY_MARKETS_SUFFIX, []);
      })
      .catch(() => { if (!cancelled) { setRecentMarkets(local); } });
    return () => { cancelled = true; };
  }, [user]);
  // Ostatnio otwarte oferte (sprzedaz i wynajem) - wspolny rejestr zasilany przy wejsciu na oferte.
  const recentListings = useMemo(() => readRecentlyViewed(user).slice(0, RECENTLY_VIEWED_PANEL_LIMIT), [user]);
  const skipNextFetch = useRef(false);
  const locationQuery = locationInput.trim();
  const localSuggestions = locationQuery.length >= 2 ? historyLocalSuggestions(locationQuery) : HISTORY_POPULAR_MARKETS.map((label, index) => {
    const market = resolveHistoryMarket(label);
    return { id: -200 - index, label: market.label, sublabel: `${market.city}, ${market.region}`, lat: 0, lng: 0 };
  });
  const shownSuggestions = mergeHistorySuggestions(localSuggestions, suggestions);
  const hasSelectedMarket = selectedMarket != null;
  const activeLocationLabel = selectedMarket?.label ?? 'wybranej lokalizacji';
  const todayLabel = historyTodayLabel();
  const historySlots = useMemo(() => buildHistorySlots(period), [period]);
  // Historia z /api/price-history: dzienne zapisy srednich cen ofertowych z ogloszen serwisu
  // oraz kwartalne ceny transakcyjne NBP i GUS dla calego miasta.
  const [history, setHistory] = useState<ApiPriceHistory | null>(null);
  const [historyLoading, setHistoryLoading] = useState(false);
  // Aktualna srednia dla lokalizacji z porownania (klucz lokalizacji -> cena za m2 albo null).
  const [comparisonPrices, setComparisonPrices] = useState<Record<string, number | null>>({});
  const historyPropertyAvailable = HISTORY_PROPERTY_API[propertyType] != null;
  // Nasza srednia w przedziale (miesiac albo kwartal); ostatni przedzial to swieza srednia z ogloszen.
  // Przedzial bez zapisow zostaje pusty - niczego nie dopowiadamy.
  const offerPrices: (number | null)[] = historySlots.map((slot, slotIndex) => {
    if (!history) {
      return null;
    }
    if (slotIndex === historySlots.length - 1 && history.current) {
      return history.current.avgPricePerM2;
    }
    const inSlot = history.points.filter((point) => historySlotContains(slot, point.date));
    return inSlot.length > 0
      ? Math.round(inSlot.reduce((sum, point) => sum + point.avgPricePerM2, 0) / inSlot.length)
      : null;
  });
  const nbpPrices = historySlots.map((slot) => historyQuarterValue(history?.nbp ?? [], slot));
  const gusPrices = historySlots.map((slot) => historyQuarterValue(history?.gus ?? [], slot));
  const knownPrices = offerPrices
    .map((price, slotIndex) => ({ price, slotIndex }))
    .filter((entry): entry is { price: number; slotIndex: number } => entry.price != null);
  const hasOfferData = knownPrices.length > 0;
  const hasNbpData = nbpPrices.some((price) => price != null);
  const hasGusData = gusPrices.some((price) => price != null);
  const hasHistoryData = hasOfferData || hasNbpData || hasGusData;
  const firstKnown = knownPrices[0] ?? null;
  const latestKnown = knownPrices[knownPrices.length - 1] ?? null;
  const lowestKnown = knownPrices.reduce<{ price: number; slotIndex: number } | null>((lowest, entry) => (!lowest || entry.price < lowest.price ? entry : lowest), null);
  const highestKnown = knownPrices.reduce<{ price: number; slotIndex: number } | null>((highest, entry) => (!highest || entry.price > highest.price ? entry : highest), null);
  const averageKnown = hasOfferData ? Math.round(knownPrices.reduce((sum, entry) => sum + entry.price, 0) / knownPrices.length) : null;
  // Zmiana ma sens dopiero przy dwoch roznych przedzialach z danymi.
  const changePercent = firstKnown && latestKnown && knownPrices.length > 1 && firstKnown.price > 0
    ? ((latestKnown.price - firstKnown.price) / firstKnown.price) * 100
    : null;
  // Ostatnie wartosci zrodel zewnetrznych (tez spoza wybranego okresu) - do porownania z ogloszeniami.
  const latestNbp = history?.nbp?.[history.nbp.length - 1] ?? null;
  const latestGus = history?.gus?.[history.gus.length - 1] ?? null;
  const nbpMarketLabel = (history?.nbpMarket ?? 'Wtórny').toLowerCase();
  // GUS podaje tez oba rynki razem - wtedy porownanie z NBP (jeden rynek) jest tylko orientacyjne.
  const gusMarketLabel = marketType === 'Wtórny i pierwotny' ? 'oba rynki' : `rynek ${marketType.toLowerCase()}`;
  // Najnowszy kwartal, dla ktorego sa oba zrodla - tam porownujemy NBP z GUS.
  const commonExternalQuarter = [...(history?.nbp ?? [])].reverse()
    .map((nbp) => ({ nbp, gus: history?.gus.find((gus) => gus.year === nbp.year && gus.quarter === nbp.quarter) }))
    .find((pair): pair is { nbp: ApiQuarterPoint; gus: ApiQuarterPoint } => pair.gus != null) ?? null;
  const quarterName = (point: ApiQuarterPoint) => `${HISTORY_ROMAN_QUARTERS[point.quarter - 1]} kw. ${point.year}`;
  const percentDiff = (value: number, reference: number) => {
    const diff = ((value - reference) / reference) * 100;
    return `${diff >= 0 ? '+' : ''}${diff.toFixed(1).replace('.', ',')}%`;
  };
  const allValues = [...offerPrices, ...nbpPrices, ...gusPrices].filter((price): price is number => price != null);
  const minPrice = allValues.length ? Math.min(...allValues) : 0;
  const maxPrice = allValues.length ? Math.max(...allValues) : 0;
  const chartTicks = historyTicks(minPrice, maxPrice);
  const chartAxisMin = minPrice;
  const chartAxisMax = maxPrice;
  // Tabela porownania to ostatnie sprawdzone lokalizacje tego konta - bez podpowiedzi z listy.
  const displayedComparisons = recentMarkets;
  const chartWidth = 920;
  const chartHeight = 250;
  const chartPaddingTop = 86;
  const chartPaddingBottom = 28;
  const chartInnerHeight = chartHeight - chartPaddingTop - chartPaddingBottom;
  // Srodek kolumny przedzialu - w tym samym miejscu co podpis pod wykresem.
  const slotX = (slotIndex: number) => ((slotIndex + 0.5) / historySlots.length) * chartWidth;
  const priceY = (price: number) => {
    const range = chartAxisMax - chartAxisMin || 1;
    return chartAxisMax === chartAxisMin
      ? chartPaddingTop + chartInnerHeight / 2
      : chartPaddingTop + (1 - (price - chartAxisMin) / range) * chartInnerHeight;
  };
  const seriesCoords = (prices: (number | null)[]) => prices
    .map((price, slotIndex) => (price == null ? null : { x: slotX(slotIndex), y: priceY(price), price, slotIndex }))
    .filter((point): point is { x: number; y: number; price: number; slotIndex: number } => point != null);
  const seriesPath = (coords: { x: number; y: number }[]) => coords
    .map((point, index) => `${index === 0 ? 'M' : 'L'} ${point.x.toFixed(1)} ${point.y.toFixed(1)}`).join(' ');
  const pointCoords = seriesCoords(offerPrices);
  const nbpCoords = seriesCoords(nbpPrices);
  const gusCoords = seriesCoords(gusPrices);
  const linePath = seriesPath(pointCoords);
  const nbpPath = seriesPath(nbpCoords);
  const gusPath = seriesPath(gusCoords);
  const chartBaseY = chartHeight - chartPaddingBottom;
  const areaPath = pointCoords.length > 1
    ? `${linePath} L ${pointCoords[pointCoords.length - 1].x.toFixed(1)} ${chartBaseY} L ${pointCoords[0].x.toFixed(1)} ${chartBaseY} Z`
    : '';
  // Dymek: wszystkie zrodla dla przedzialu pod kursorem.
  const hoveredSlot = hoveredHistoryIndex != null ? historySlots[hoveredHistoryIndex] ?? null : null;
  const hoveredValues = hoveredHistoryIndex == null ? [] : [
    { label: 'Ogłoszenia', price: offerPrices[hoveredHistoryIndex] },
    { label: `NBP (${nbpMarketLabel})`, price: nbpPrices[hoveredHistoryIndex] },
    { label: `GUS (${gusMarketLabel})`, price: gusPrices[hoveredHistoryIndex] },
  ].filter((entry): entry is { label: string; price: number } => entry.price != null);
  const hoveredPoint = hoveredSlot && hoveredValues.length > 0
    ? { x: slotX(hoveredHistoryIndex!), y: priceY(Math.max(...hoveredValues.map((entry) => entry.price))) }
    : null;
  const hoveredDate = hoveredSlot
    ? `${hoveredSlot.label}${hoveredHistoryIndex === historySlots.length - 1 ? ` (do ${todayLabel})` : ''}`
    : '';
  const tooltipWidth = 190;
  const tooltipHeight = 30 + hoveredValues.length * 20;
  const tooltipX = hoveredPoint ? Math.min(chartWidth - tooltipWidth - 8, Math.max(8, hoveredPoint.x - tooltipWidth / 2)) : 0;
  const tooltipY = hoveredPoint ? Math.max(8, hoveredPoint.y - tooltipHeight - 14) : 0;
  const selectedMarketAlreadyAlerted = selectedMarket
    ? cityAlertSubscriptions.some((item) => item.key === selectedMarket.key)
    : false;

  // Dymek przy najblizszym punkcie z danymi.
  const handleHistoryChartMouseMove = (event: ReactMouseEvent<HTMLDivElement>) => {
    const slotsWithData = historySlots
      .map((_, slotIndex) => slotIndex)
      .filter((slotIndex) => offerPrices[slotIndex] != null || nbpPrices[slotIndex] != null || gusPrices[slotIndex] != null);
    if (!hasSelectedMarket || slotsWithData.length === 0) {
      return;
    }
    const bounds = event.currentTarget.getBoundingClientRect();
    const svgX = ((event.clientX - bounds.left) / bounds.width) * chartWidth;
    const nearest = slotsWithData.reduce((best, slotIndex) => (
      Math.abs(slotX(slotIndex) - svgX) < Math.abs(slotX(best) - svgX) ? slotIndex : best
    ), slotsWithData[0]);
    setHoveredHistoryIndex(nearest);
  };

  useEffect(() => {
    if (!selectedMarket || !historyPropertyAvailable) {
      setHistory(null);
      return;
    }
    let cancelled = false;
    setHistoryLoading(true);
    setHoveredHistoryIndex(null);
    apiFetch<ApiPriceHistory>(priceHistoryApiPath(selectedMarket, propertyType, marketType, historyFromDate(historySlots)))
      .then((data) => { if (!cancelled) setHistory(data); })
      .catch(() => { if (!cancelled) setHistory(null); })
      .finally(() => { if (!cancelled) setHistoryLoading(false); });
    return () => { cancelled = true; };
  }, [selectedMarket, propertyType, marketType, historyPropertyAvailable, historySlots]);

  // Porownanie: aktualna srednia dla kazdej zapamietanej lokalizacji (te same filtry co wykres).
  useEffect(() => {
    if (!historyPropertyAvailable || recentMarkets.length === 0) {
      setComparisonPrices({});
      return;
    }
    let cancelled = false;
    const today = new Date().toISOString().slice(0, 10);
    Promise.all(recentMarkets.map((market) => (
      apiFetch<ApiPriceHistory>(priceHistoryApiPath(market, propertyType, marketType, today))
        .then((data) => [market.key, data.current?.avgPricePerM2 ?? null] as const)
        .catch(() => [market.key, null] as const)
    ))).then((entries) => {
      if (!cancelled) {
        setComparisonPrices(Object.fromEntries(entries));
      }
    });
    return () => { cancelled = true; };
  }, [recentMarkets, propertyType, marketType, historyPropertyAvailable]);

  useEffect(() => {
    if (!createAlertFeedback) {
      return;
    }
    const timeoutId = window.setTimeout(() => {
      setCreateAlertFeedback(null);
    }, 5000);
    return () => window.clearTimeout(timeoutId);
  }, [createAlertFeedback]);

  useEffect(() => {
    if (!user) {
      setCityAlertSubscriptions([]);
      return;
    }
    setCityAlertSubscriptions(readUserJsonStorage<CityPriceAlertSubscription[]>(user, CITY_PRICE_ALERTS_STORAGE_SUFFIX, []));
  }, [user]);

  useEffect(() => {
    if (skipNextFetch.current) {
      skipNextFetch.current = false;
      return;
    }
    const query = locationInput.trim();
    if (query.length < 2) {
      setSuggestions([]);
      setSuggestLoading(false);
      return;
    }
    const controller = new AbortController();
    setSuggestLoading(true);
    const timer = window.setTimeout(() => {
      fetchPlaceSuggestions(query, controller.signal)
        .then((places) => setSuggestions(places))
        .catch((error) => {
          if ((error as Error).name !== 'AbortError') {
            setSuggestions([]);
          }
        })
        .finally(() => setSuggestLoading(false));
    }, 300);
    return () => {
      controller.abort();
      window.clearTimeout(timer);
    };
  }, [locationInput]);

  const applyMarket = (market: PriceHistoryMarket) => {
    skipNextFetch.current = true;
    setSelectedMarket(market);
    setHoveredHistoryIndex(null);
    setLocationInput(market.label);
    setSuggestions([]);
    setSuggestOpen(false);
    // Nowa lokalizacja wchodzi na poczatek listy, najstarsza wypada po przekroczeniu limitu.
    setRecentMarkets((current) => {
      const next = [market, ...current.filter((item) => item.key !== market.key)].slice(0, PRICE_HISTORY_MARKETS_LIMIT);
      savePriceHistoryMarkets(next);
      return next;
    });
  };

  const selectSuggestion = (place: PlaceSuggestion) => {
    applyMarket(resolveHistoryMarket(place.label, place.sublabel));
  };

  // Usuwanie pojedynczej lokalizacji z porownania i czyszczenie calej listy - zapis leci od razu
  // na konto, zeby stan zgadzal sie po odswiezeniu i na innym urzadzeniu.
  const removeComparison = (marketKey: string) => {
    setRecentMarkets((current) => {
      const next = current.filter((item) => item.key !== marketKey);
      savePriceHistoryMarkets(next);
      return next;
    });
  };

  const clearComparisons = () => {
    setRecentMarkets([]);
    savePriceHistoryMarkets([]);
  };

  // Wejscie z adresu z parametrami (np. "Zobacz historie cen" przy alercie lokalizacji)
  // otwiera stronę od razu na wybranym miejscu, zamiast na pustym formularzu.
  useEffect(() => {
    const label = historyParams.get('lokalizacja');
    if (!label) {
      return;
    }
    const typeParam = historyParams.get('typ');
    if (typeParam && typeParam in HISTORY_PROPERTY_API) {
      setPropertyType(typeParam as HistoryPropertyType);
    }
    const marketParam = historyParams.get('rynek');
    if (marketParam && marketParam in HISTORY_MARKET_API) {
      setMarketType(marketParam as HistoryMarketType);
    }
    applyMarket(resolveHistoryMarket(label));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [historyParams]);

  const applyLocation = () => {
    if (locationQuery.length < 2) {
      skipNextFetch.current = true;
      setSelectedMarket(null);
      setHoveredHistoryIndex(null);
      setSuggestions([]);
      setSuggestOpen(false);
      return;
    }
    const firstSuggestion = shownSuggestions[0];
    if (firstSuggestion) {
      selectSuggestion(firstSuggestion);
      return;
    }
    applyMarket(resolveHistoryMarket(locationInput));
  };

  const clearHistoryFilters = () => {
    skipNextFetch.current = true;
    setSelectedMarket(null);
    setHoveredHistoryIndex(null);
    setLocationInput('');
    setSuggestions([]);
    setSuggestOpen(false);
    setPropertyType('Mieszkanie');
    setMarketType('Wtórny i pierwotny');
    setPeriod('5y');
  };

  const createCityAlert = () => {
    if (!user) {
      setCreateAlertFeedback('Zaloguj się, aby dodać alert cenowy.');
      navigate(ROUTES.login);
      return;
    }
    if (!selectedMarket) {
      setCreateAlertFeedback('Najpierw wybierz lokalizację do monitorowania.');
      return;
    }

    const subscription: CityPriceAlertSubscription = {
      key: selectedMarket.key,
      label: selectedMarket.label,
      city: selectedMarket.city,
      region: selectedMarket.region,
      propertyType,
      marketType,
      createdAt: new Date().toISOString(),
    };

    setCityAlertSubscriptions((current) => {
      if (current.some((item) => item.key === subscription.key)) {
        setCreateAlertFeedback('Ten alert jest już aktywny.');
        return current;
      }
      const next = [subscription, ...current];
      writeUserJsonStorage(user, CITY_PRICE_ALERTS_STORAGE_SUFFIX, next);
      setCreateAlertFeedback('Alert cenowy został dodany. Znajdziesz go w panelu użytkownika.');
      return next;
    });
  };

  // Alert da sie usunac tam, gdzie zostal dodany - bez wchodzenia w zakladke alertow cenowych.
  const removeCityAlert = () => {
    if (!user || !selectedMarket) {
      return;
    }
    setCityAlertSubscriptions((current) => {
      const next = current.filter((item) => item.key !== selectedMarket.key);
      writeUserJsonStorage(user, CITY_PRICE_ALERTS_STORAGE_SUFFIX, next);
      setCreateAlertFeedback(`Alert cenowy dla lokalizacji ${selectedMarket.label} został usunięty.`);
      return next;
    });
  };

  return (
    <section className="history-page" aria-label="Historia cen">
      <div className="history-shell">
        <div className="breadcrumb history-breadcrumb">
          <Link to={ROUTES.account}>Panel główny</Link>
          <Icon name="chevron" />
          <Link className="active" to={ROUTES.priceHistory}>Historia cen</Link>
        </div>

        <div className="history-title">
          <h1>Historia cen</h1>
          <p>Sprawdź, jak zmieniały się ceny mieszkań w czasie. Analizuj trendy i podejmuj lepsze decyzje.</p>
        </div>

        <section className="history-filter-panel" aria-label="Filtry historii cen">
          <div className="history-filter-grid">
            <label className="history-field location">
              <span>Lokalizacja</span>
              <div className={`history-location-picker ${suggestOpen ? 'active' : ''}`}>
                <button className={`history-location-display ${selectedMarket ? '' : 'empty'}`} type="button" onClick={() => setSuggestOpen((current) => !current)}>
                  <Icon name="pin" />
                  {/* Etykieta "Lokalizacja" stoi juz nad polem - w srodku zostaje sama wartosc. */}
                  <span>
                    <strong>{selectedMarket?.label ?? 'Wpisz miasto, dzielnicę lub miejscowość'}</strong>
                  </span>
                  <Icon name="chevron" />
                </button>
                {suggestOpen && (
                  <div className="history-location-pop" onMouseDown={(event) => event.preventDefault()}>
                    <div className="history-location-search">
                      <Icon name="search" />
                  <input
                    value={locationInput}
                    onChange={(event) => {
                      const nextValue = event.target.value;
                      setLocationInput(nextValue);
                      setSelectedMarket(null);
                      setSuggestOpen(true);
                    }}
                        autoFocus
                    onKeyDown={(event) => { if (event.key === 'Enter') { applyLocation(); } }}
                    placeholder="Wpisz miasto, dzielnicę lub miejscowość"
                  />
                      {suggestLoading && <span className="map-suggest-spinner" aria-hidden="true" />}
                    </div>
                    <div className="history-location-suggest" role="listbox" aria-label="Podpowiedzi lokalizacji">
                      {shownSuggestions.length > 0 ? shownSuggestions.map((place) => (
                        <button type="button" key={`${place.id}-${place.label}-${place.sublabel}`} onClick={() => selectSuggestion(place)}>
                          <Icon name="pin" />
                          <span><strong>{place.label}</strong><small>{place.sublabel || 'Polska'}</small></span>
                        </button>
                      )) : <p>Brak wyników dla „{locationQuery}"</p>}
                    </div>
                </div>
                )}
              </div>
            </label>
            <label className="history-field">
              <span>Rodzaj nieruchomości</span>
              <select value={propertyType} onChange={(event) => setPropertyType(event.target.value as HistoryPropertyType)}><option>Mieszkanie</option><option>Dom</option></select>
            </label>
            <label className="history-field">
              <span>Rynek</span>
              <select value={marketType} onChange={(event) => setMarketType(event.target.value as HistoryMarketType)}><option>Wtórny i pierwotny</option><option>Wtórny</option><option>Pierwotny</option></select>
            </label>
            <label className="history-field">
              <span>Okres</span>
              <select value={period} onChange={(event) => setPeriod(event.target.value as HistoryPeriod)}>{HISTORY_PERIOD_OPTIONS.map((option) => <option value={option.value} key={option.value}>{option.label}</option>)}</select>
            </label>
            <button className="history-search" type="button" onClick={applyLocation}><Icon name="search" /> Pokaż historię</button>
          </div>
          <div className="history-popular-row">
            <span>Popularne lokalizacje:</span>
            {HISTORY_POPULAR_MARKETS.map((item) => <button type="button" key={item} onClick={() => applyMarket(resolveHistoryMarket(item))}>{item}</button>)}
            <button className="history-clear" type="button" onClick={clearHistoryFilters}>Wyczyść filtry</button>
          </div>
        </section>

        <div className="history-layout">
          <div className="history-main-column">
            <section className="history-chart-card">
              <div className="history-chart-head">
                <div>
                  <h2>Średnia cena za {areaSuffix} w {activeLocationLabel}</h2>
                  <strong>{latestKnown ? formatPricePerArea(latestKnown.price) : '—'}</strong>
                  {changePercent != null && (
                    <p className={changePercent >= 0 ? 'positive' : 'negative'}>
                      {changePercent >= 0 ? '+' : ''}{changePercent.toFixed(1).replace('.', ',')}% <span>(od {historySlots[firstKnown!.slotIndex].sinceLabel})</span>
                    </p>
                  )}
                  <small className="history-source-note">
                    Średnie ceny ofertowe z ogłoszeń w serwisie Polska Lokalnie
                    {history?.trackedSince ? `, zapisywane codziennie od ${formatArticleDate(history.trackedSince)}` : ''}.
                  </small>
                </div>
                <span className="history-chart-mode">Cena za {areaSuffix}</span>
              </div>

              <div
                className={`history-chart-wrap ${hasHistoryData ? '' : 'empty'}`}
                onMouseMove={handleHistoryChartMouseMove}
                onMouseLeave={() => setHoveredHistoryIndex(null)}
              >
                <svg
                  viewBox={`0 0 ${chartWidth} ${chartHeight}`}
                  role="img"
                  aria-label="Wykres historii cen"
                  focusable="false"
                >
                  <defs>
                    <linearGradient id="historyArea" x1="0" x2="0" y1="0" y2="1">
                      <stop offset="0" stopColor="#10a15e" stopOpacity="0.18" />
                      <stop offset="1" stopColor="#10a15e" stopOpacity="0" />
                    </linearGradient>
                  </defs>
                  {hasHistoryData && (
                    <>
                      {chartTicks.map((tick) => {
                        const range = chartAxisMax - chartAxisMin || 1;
                        const y = chartPaddingTop + (1 - (tick - chartAxisMin) / range) * chartInnerHeight;
                        const labelY = Math.max(13, Math.min(chartHeight - 10, y - 7));
                        return <g key={tick}><line x1="0" x2={chartWidth} y1={y} y2={y} /><text x="0" y={labelY}>{formatPricePerArea(tick)}</text></g>;
                      })}
                      {nbpCoords.length > 1 && <path className="history-line history-line-nbp" d={nbpPath} />}
                      {gusCoords.length > 1 && <path className="history-line history-line-gus" d={gusPath} />}
                      {areaPath && <path className="history-area" d={areaPath} />}
                      {pointCoords.length > 1 && <path className="history-line" d={linePath} />}
                      {pointCoords.map((point) => <circle className={`history-dot ${point.slotIndex === hoveredHistoryIndex ? 'active' : ''}`} cx={point.x} cy={point.y} r={point.slotIndex === hoveredHistoryIndex ? '6' : '4'} key={`offer-${point.slotIndex}`} />)}
                      {/* Pojedynczy punkt zrodla zewnetrznego (np. okres 2026) - bez linii nie bylby widoczny. */}
                      {nbpCoords.length === 1 && <circle className="history-dot history-dot-nbp" cx={nbpCoords[0].x} cy={nbpCoords[0].y} r="4" />}
                      {gusCoords.length === 1 && <circle className="history-dot history-dot-gus" cx={gusCoords[0].x} cy={gusCoords[0].y} r="4" />}
                    </>
                  )}
                  {hasSelectedMarket && hoveredPoint && <line className="history-guide" x1={hoveredPoint.x} x2={hoveredPoint.x} y1={hoveredPoint.y} y2={chartBaseY} />}
                  {hasSelectedMarket && hoveredPoint && (
                    <foreignObject x={tooltipX} y={tooltipY} width={tooltipWidth} height={tooltipHeight + 8}>
                      <div className="history-tooltip">
                        <span>{hoveredDate}</span>
                        {hoveredValues.map((entry) => (
                          <small key={entry.label}>{entry.label}: <strong>{formatPricePerArea(entry.price)}</strong></small>
                        ))}
                      </div>
                    </foreignObject>
                  )}
                </svg>
                {!hasHistoryData && (
                  <div className="history-chart-empty">
                    {!hasSelectedMarket ? (
                      <><strong>Wybierz lokalizację</strong><span>Pokażemy średnie ceny ofertowe z ogłoszeń w wybranym mieście lub dzielnicy.</span></>
                    ) : historyLoading ? (
                      <><strong>Wczytywanie…</strong><span>Pobieramy historię cen.</span></>
                    ) : (
                      <><strong>Brak danych</strong><span>W tej lokalizacji nie ma jeszcze ogłoszeń spełniających wybrane filtry.</span></>
                    )}
                  </div>
                )}
                <div className="history-months" style={{ gridTemplateColumns: `repeat(${historySlots.length}, minmax(0, 1fr))` }}>{historySlots.map((slot) => <span key={slot.label}>{slot.axisLabel}</span>)}</div>
              </div>
              {(hasNbpData || hasGusData) && (
                <div className="history-legend" aria-label="Legenda wykresu">
                  {hasOfferData && <span className="offer">Ceny ofertowe z ogłoszeń (Polska Lokalnie)</span>}
                  {hasNbpData && <span className="nbp">Ceny transakcyjne NBP, rynek {nbpMarketLabel} - całe miasto</span>}
                  {hasGusData && <span className="gus">Ceny transakcyjne GUS, {gusMarketLabel} - całe miasto</span>}
                </div>
              )}

              <div className="history-stat-grid">
                <article><span>Najniższa cena</span><strong>{lowestKnown ? formatPricePerArea(lowestKnown.price) : '—'}</strong>{lowestKnown && <small>{historySlots[lowestKnown.slotIndex].label}</small>}</article>
                <article><span>Najwyższa cena</span><strong>{highestKnown ? formatPricePerArea(highestKnown.price) : '—'}</strong>{highestKnown && <small>{historySlots[highestKnown.slotIndex].label}</small>}</article>
                <article className={changePercent == null ? '' : changePercent >= 0 ? 'positive' : 'negative'}>
                  <span>Zmiana w okresie</span>
                  <strong>{changePercent == null ? '—' : `${changePercent >= 0 ? '+' : ''}${changePercent.toFixed(1).replace('.', ',')}%`}</strong>
                  {changePercent != null && firstKnown && latestKnown && <small>{formatPricePerArea(latestKnown.price - firstKnown.price)}</small>}
                </article>
                <article><span>Średnia cena</span><strong>{averageKnown != null ? formatPricePerArea(averageKnown) : '—'}</strong></article>
              </div>
            </section>

            <section className="history-alert-card">
              <span><Icon name="bell" /></span>
              <p><strong>Chcesz być na bieżąco?</strong><small>Ustaw alert cenowy i otrzymuj powiadomienia o zmianach cen w wybranej lokalizacji.</small></p>
              {selectedMarketAlreadyAlerted ? (
                <div className="history-alert-active">
                  <span><Icon name="check" /> Alert aktywny</span>
                  <button type="button" className="history-alert-remove" onClick={removeCityAlert}>
                    <Icon name="trash" /> Usuń alert
                  </button>
                </div>
              ) : (
                <button type="button" onClick={createCityAlert}><Icon name="bell" /> Utwórz alert cenowy</button>
              )}
              {createAlertFeedback && <small className="history-alert-feedback">{createAlertFeedback}</small>}
            </section>

            <section className="history-insights-card">
              <h2>Wnioski z analizy</h2>
              {!latestKnown && !latestNbp && !latestGus ? (
                <p className="history-side-empty">
                  {hasSelectedMarket ? 'Brak danych do analizy w tej lokalizacji.' : 'Wybierz lokalizację, aby zobaczyć wnioski.'}
                </p>
              ) : (
                <div>
                  {latestKnown ? (
                    <>
                      <article>
                        <span><Icon name="chart" /></span>
                        <p>
                          <strong>Aktualna cena ofertowa</strong>
                          <small>
                            {propertyType} ({marketType.toLowerCase()}) w lokalizacji {activeLocationLabel}: {formatPricePerArea(latestKnown.price)}
                            {history?.current ? `, liczona z ${history.current.listingsCount} ${history.current.listingsCount === 1 ? 'ogłoszenia' : 'ogłoszeń'}` : ''}.
                          </small>
                        </p>
                      </article>
                      <article>
                        <span><Icon name="trend" /></span>
                        <p>
                          <strong>{changePercent == null ? 'Trend' : changePercent > 0 ? 'Ceny rosną' : changePercent < 0 ? 'Ceny spadają' : 'Ceny bez zmian'}</strong>
                          <small>
                            {changePercent == null
                              ? `Za mało danych z ogłoszeń, aby ocenić trend${history?.trackedSince ? ` - zbieramy je od ${formatArticleDate(history.trackedSince)}` : ''}.`
                              : `Od ${historySlots[firstKnown!.slotIndex].sinceLabel} średnia zmieniła się o ${changePercent.toFixed(1).replace('.', ',')}%.`}
                          </small>
                        </p>
                      </article>
                    </>
                  ) : (
                    <article>
                      <span><Icon name="chart" /></span>
                      <p>
                        <strong>Brak ogłoszeń</strong>
                        <small>W tej lokalizacji nie ma teraz ogłoszeń spełniających filtry - poniżej ceny transakcyjne z danych publicznych.</small>
                      </p>
                    </article>
                  )}
                  {(latestNbp || latestGus) && (
                    <article>
                      <span><Icon name="scale" /></span>
                      <p>
                        <strong>Porównanie źródeł (ceny transakcyjne, całe miasto)</strong>
                        {latestNbp && (
                          <small>
                            NBP, rynek {nbpMarketLabel}, {quarterName(latestNbp)}: {formatPricePerArea(latestNbp.pricePerM2)}
                            {latestKnown ? ` - ceny w ogłoszeniach ${percentDiff(latestKnown.price, latestNbp.pricePerM2)}` : ''}.
                          </small>
                        )}
                        {latestGus && (
                          <small>
                            GUS, {gusMarketLabel}, {quarterName(latestGus)}: {formatPricePerArea(latestGus.pricePerM2)}
                            {latestKnown ? ` - ceny w ogłoszeniach ${percentDiff(latestKnown.price, latestGus.pricePerM2)}` : ''}.
                          </small>
                        )}
                        {commonExternalQuarter && commonExternalQuarter.nbp.pricePerM2 !== commonExternalQuarter.gus.pricePerM2 && (
                          <small>
                            W {quarterName(commonExternalQuarter.nbp)} źródła się różnią: NBP ({nbpMarketLabel}) {formatPricePerArea(commonExternalQuarter.nbp.pricePerM2)},
                            GUS ({gusMarketLabel}) {formatPricePerArea(commonExternalQuarter.gus.pricePerM2)} ({percentDiff(commonExternalQuarter.nbp.pricePerM2, commonExternalQuarter.gus.pricePerM2)}).
                            Średnia z obu: {formatPricePerArea(Math.round((commonExternalQuarter.nbp.pricePerM2 + commonExternalQuarter.gus.pricePerM2) / 2))}.
                          </small>
                        )}
                      </p>
                    </article>
                  )}
                </div>
              )}
            </section>
          </div>

          <aside className="history-sidebar">
            <section className="history-side-card compare">
              <h2>Porównaj lokalizacje</h2>
              {displayedComparisons.length === 0 ? (
                <p className="history-side-empty">Sprawdź cenę za {areaSuffix} w wybranej lokalizacji - pojawi się tutaj razem z {PRICE_HISTORY_MARKETS_LIMIT - 1} kolejnymi do porównania.</p>
              ) : displayedComparisons.map((market) => (
                <button
                  className={`history-compare-row ${selectedMarket?.key === market.key ? 'active' : ''}`}
                  key={market.key}
                  type="button"
                  onClick={() => applyMarket(market)}
                >
                  <span>{historyShortMarketLabel(market)}</span>
                  <strong>{comparisonPrices[market.key] != null ? formatPricePerArea(comparisonPrices[market.key] as number) : '—'}</strong>
                  <i
                    className="history-compare-remove"
                    role="button"
                    tabIndex={0}
                    aria-label={`Usuń ${market.label} z porównania`}
                    onClick={(event) => { event.stopPropagation(); removeComparison(market.key); }}
                    onKeyDown={(event) => {
                      if (event.key === 'Enter' || event.key === ' ') {
                        event.preventDefault();
                        event.stopPropagation();
                        removeComparison(market.key);
                      }
                    }}
                  >
                    ×
                  </i>
                </button>
              ))}
              {displayedComparisons.length > 0 && (
                <button type="button" className="history-compare-clear" onClick={clearComparisons}>
                  <Icon name="trash" /> Wyczyść listę
                </button>
              )}
            </section>

            <section className="history-side-card recent">
              <h2>Ostatnio przeglądane</h2>
              {recentListings.length === 0 ? (
                <p className="history-side-empty">Tu pojawią się ogłoszenia, które otworzysz na sprzedaży lub wynajmie.</p>
              ) : recentListings.map((item) => (
                <article key={item.id} onClick={() => navigate(listingPath(item.id))}>
                  <img src={item.photo || heroImage} alt="" />
                  <p>
                    <strong>{item.title}</strong>
                    <span>{[item.city, item.district].filter(Boolean).join(', ')} · {item.offerType === 'RENT' ? 'wynajem' : 'sprzedaż'}</span>
                    <small>{formatPrice(item.price)}{item.offerType === 'RENT' ? ' / mies.' : ''} · {formatArea(item.area)}</small>
                  </p>
                  <Icon name="chevron" />
                </article>
              ))}
            </section>
          </aside>
        </div>
      </div>
    </section>
  );
}

// Ile ofert na jednej stronie listy ogloszen (paginacja na /kupno i /wynajem).
const OFFERS_PER_PAGE = 8;

// Dostepne widoki prezentacji ofert. Wartosc trafia do query stringu (?widok=).
const OFFER_VIEW_OPTIONS: { mode: string; icon: string; label: string }[] = [
  { mode: 'lista', icon: 'list', label: 'Lista' },
  { mode: 'kompaktowa', icon: 'rows', label: 'Kompaktowa' },
  { mode: 'kafelki', icon: 'grid', label: 'Kafelki' },
];

/**
 * Slider zdjec na karcie oferty - pozwala przegladac galerie bez wchodzenia w oferte (jak Otodom).
 * Zdjecia sa juz pobrane w useLiveListings (razem z lat/lng), wiec nic dodatkowego nie sciagamy.
 * Wlasny stan indeksu wymaga osobnego komponentu - w .map() karty nie mozna uzyc hooka.
 */
function ResultCardGallery({ photos, cover, alt }: { photos: string[]; cover: string | null; alt: string }) {
  const images = photos.length > 0 ? photos : [cover ?? heroImage];
  const total = images.length;
  const [index, setIndex] = useState(0);
  const current = Math.min(index, total - 1);
  // Karta jest linkiem (nakladka ::after) - strzalki i kropki nie moga go wyzwalac.
  const step = (event: ReactMouseEvent, delta: number) => {
    event.preventDefault();
    event.stopPropagation();
    setIndex((prev) => (prev + delta + total) % total);
  };
  const jump = (event: ReactMouseEvent, target: number) => {
    event.preventDefault();
    event.stopPropagation();
    setIndex(target);
  };
  return (
    <>
      {images.map((src, i) => (
        <span
          key={i}
          className={`result-photo-slide ${i === current ? 'is-active' : ''}`}
          style={{ backgroundImage: `url(${src})` }}
          aria-hidden={i === current ? undefined : true}
          role="img"
          aria-label={i === current ? alt : undefined}
        />
      ))}
      {total > 1 && (
        <>
          <button type="button" className="result-photo-nav prev" aria-label="Poprzednie zdjęcie" onClick={(event) => step(event, -1)}>
            <Icon name="chevron" />
          </button>
          <button type="button" className="result-photo-nav next" aria-label="Następne zdjęcie" onClick={(event) => step(event, 1)}>
            <Icon name="chevron" />
          </button>
          <span className="result-photo-counter"><Icon name="camera" /> {current + 1} / {total}</span>
          <span className="result-photo-dots">
            {images.slice(0, 8).map((_, i) => (
              <button
                type="button"
                key={i}
                className={i === current ? 'is-active' : ''}
                aria-label={`Zdjęcie ${i + 1}`}
                onClick={(event) => jump(event, i)}
              />
            ))}
          </span>
        </>
      )}
    </>
  );
}

// Animacja wczytywania listy ofert - pokazywana zamiast pustego miejsca, dopoki backend nie odda
// ogloszen. Znika sama, gdy dane przyjda (komponent nadrzedny przestaje ja renderowac).
function ListingsLoader() {
  return (
    <div className="listings-loader" role="status" aria-live="polite">
      <div className="listings-loader-art" aria-hidden="true">
        <svg viewBox="0 0 240 150" width="200" height="125" role="img">
          <path d="M42 118a78 78 0 0 1 156 0Z" fill="#e8f5ed" />
          <g className="ll-cloud ll-cloud-a" fill="#eef2f6">
            <ellipse cx="58" cy="44" rx="17" ry="9" />
            <ellipse cx="70" cy="40" rx="12" ry="8" />
          </g>
          <g className="ll-cloud ll-cloud-b" fill="#eef2f6">
            <ellipse cx="188" cy="52" rx="15" ry="8" />
            <ellipse cx="177" cy="48" rx="10" ry="7" />
          </g>
          <g>
            <rect x="58" y="96" width="7" height="22" rx="3" fill="#c3ddca" />
            <circle cx="61.5" cy="90" r="16" fill="#d4ead9" />
          </g>
          <g className="ll-house">
            <rect x="96" y="86" width="60" height="34" rx="3" fill="#ffffff" stroke="#cadfd2" strokeWidth="2.5" />
            <path d="M126 58l34 30H92Z" fill="#d4ead9" stroke="#9ecfae" strokeWidth="2.5" strokeLinejoin="round" />
            <rect x="150" y="66" width="8" height="16" rx="2" fill="#c3ddca" />
            <rect x="118" y="98" width="16" height="22" rx="2" fill="#38b26a" />
            <circle cx="130" cy="109" r="1.6" fill="#ffffff" />
          </g>
          <rect x="42" y="117" width="156" height="3" rx="1.5" fill="#d9ebe0" />
        </svg>
      </div>
      <p className="listings-loader-title">Wczytujemy <span>ogłoszenia</span>…</p>
      <p className="listings-loader-sub">Zaraz pokażemy Ci najlepsze oferty dopasowane do Twoich kryteriów.</p>
      <div className="listings-loader-bars" aria-hidden="true">
        <span /><span /><span /><span />
      </div>
    </div>
  );
}

function RealListingsBand({
  offerType,
  onOpenListing,
  city,
  isFavorite,
  onToggleFavorite,
}: {
  offerType: ApiOfferType;
  onOpenListing: (id: number) => void;
  city?: string;
  isFavorite: (listingId: number) => boolean;
  onToggleFavorite: (listing: ApiListingSummary) => void;
}) {
  const { items, loading } = useLiveListings(offerType);
  const { formatPrice, formatArea } = useDisplay();
  const [searchParams, setSearchParams] = useSearchParams();
  const [sortOpen, setSortOpen] = useState(false);
  const sortRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!sortOpen) {
      return;
    }
    const handler = (event: MouseEvent) => {
      if (sortRef.current && !sortRef.current.contains(event.target as Node)) {
        setSortOpen(false);
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [sortOpen]);

  const cityFilter = (city ?? '').trim();
  const byCity = cityFilter ? items.filter((item) => cityStartsWith(item.city, cityFilter)) : items;
  // "Szukaj na bieżącej mapie" wpisuje numery widocznych ofert do adresu (?obszar=1,4,9),
  // dzieki czemu zawezony wynik przezywa odswiezenie i da sie go wyslac linkiem.
  const areaParam = searchParams.get('obszar');
  const areaIds = areaParam ? new Set(areaParam.split(',').map(Number).filter((id) => !Number.isNaN(id))) : null;
  const visible = areaIds ? byCity.filter((item) => areaIds.has(item.id)) : byCity;
  const clearArea = () => {
    const next = new URLSearchParams(searchParams);
    next.delete('obszar');
    setSearchParams(next);
  };

  // W trakcie ladowania pokazujemy animacje zamiast pustego miejsca; gdy dane przyjda i lista jest
  // pusta - nie pokazujemy nic (jak dotad).
  if (loading) {
    return (
      <div className="real-listings-section" aria-label="Ogłoszenia dodane w serwisie">
        <ListingsLoader />
      </div>
    );
  }
  if (visible.length === 0) {
    // Pusto po zawezeniu do obszaru mapy to co innego niz brak ofert - trzeba dac droge powrotna.
    return areaIds ? (
      <div className="real-listings-section" aria-label="Ogłoszenia dodane w serwisie">
        <p className="map-area-note" role="status">
          <Icon name="pin" />
          <span>Na widocznym fragmencie mapy nie ma żadnej oferty.</span>
          <button type="button" onClick={clearArea}>Pokaż wszystkie</button>
        </p>
      </div>
    ) : null;
  }

  // Widok prezentacji (lista/kompaktowa/kafelki) oraz numer strony trzymamy w query
  // stringu, dzieki czemu widok da sie skopiowac, odswiezyc i przejsc Wstecz/Dalej
  // (standard routingu projektu).
  const viewParam = searchParams.get('widok');
  const viewMode = viewParam === 'kompaktowa' || viewParam === 'kafelki' ? viewParam : 'lista';
  const sortParam = (searchParams.get('sortuj') ?? 'default') as SortKey;
  const sort: SortKey = SORT_OPTIONS.some((option) => option.value === sortParam) ? sortParam : 'default';
  // Ogloszenia wyroznione sa platne za pozycje - zawsze ida na gore listy, niezaleznie od wybranego
  // sortowania. Dopiero w obrebie tej samej grupy (wyroznione / zwykle) dziala wybrany porzadek.
  const isPromotedOffer = (offer: typeof visible[number]) =>
    !!offer.promotedUntil && new Date(offer.promotedUntil).getTime() > Date.now();
  const sorted = [...visible].sort((a, b) => {
    const promoDiff = (isPromotedOffer(b) ? 1 : 0) - (isPromotedOffer(a) ? 1 : 0);
    if (promoDiff !== 0) {
      return promoDiff;
    }
    const at = new Date(a.createdAt).getTime();
    const bt = new Date(b.createdAt).getTime();
    switch (sort) {
      case 'cheap': return a.price - b.price;
      case 'expensive': return b.price - a.price;
      case 'small': return a.area - b.area;
      case 'big': return b.area - a.area;
      case 'old': return at - bt;
      default: return bt - at; // 'new' i 'default' - najnowsze najpierw
    }
  });
  const totalPages = Math.max(1, Math.ceil(sorted.length / OFFERS_PER_PAGE));
  const pageParam = Number.parseInt(searchParams.get('strona') ?? '1', 10);
  const page = Math.min(Math.max(1, Number.isNaN(pageParam) ? 1 : pageParam), totalPages);
  const pageItems = sorted.slice((page - 1) * OFFERS_PER_PAGE, page * OFFERS_PER_PAGE);

  const updateOffersParams = (changes: Record<string, string | number>) => {
    setSearchParams((prev) => {
      const next = new URLSearchParams(prev);
      Object.entries(changes).forEach(([key, value]) => {
        const isDefault = (key === 'widok' && value === 'lista')
          || (key === 'strona' && Number(value) <= 1)
          || (key === 'sortuj' && value === 'default');
        if (isDefault) {
          next.delete(key);
        } else {
          next.set(key, String(value));
        }
      });
      return next;
    });
  };
  const selectView = (mode: string) => updateOffersParams({ widok: mode, strona: 1 });
  const selectSort = (value: string) => updateOffersParams({ sortuj: value, strona: 1 });
  const goToPage = (target: number) => updateOffersParams({ strona: Math.min(Math.max(1, target), totalPages) });

  return (
    <div className="real-listings-section" aria-label="Ogłoszenia dodane w serwisie">
      {areaIds && (
        <p className="map-area-note" role="status">
          <Icon name="pin" />
          <span>Pokazujemy oferty widoczne na mapie.</span>
          <button type="button" onClick={clearArea}>Pokaż wszystkie</button>
        </p>
      )}
      <div className="real-listings-heading">
        <h3>Ogłoszenia dodane w serwisie</h3>
        <span>{visible.length}</span>
        <div className="real-listings-tools">
          <div className={`sort-select ${sortOpen ? 'open' : ''}`} ref={sortRef}>
            <span className="sort-label">Sortuj:</span>
            <button type="button" className="sort-trigger" onClick={() => setSortOpen((open) => !open)}>
              <span>{SORT_OPTIONS.find((option) => option.value === sort)?.label}</span>
              <Icon name="chevron" />
            </button>
            {sortOpen && (
              <div className="sort-menu">
                {SORT_OPTIONS.map((option) => (
                  <button
                    type="button"
                    key={option.value}
                    className={option.value === sort ? 'active' : ''}
                    onClick={() => { selectSort(option.value); setSortOpen(false); }}
                  >
                    <span>{option.label}</span>
                    {option.value === sort && <Icon name="check" />}
                  </button>
                ))}
              </div>
            )}
          </div>
          <div className="view-switch" role="group" aria-label="Widok prezentacji ofert">
            {OFFER_VIEW_OPTIONS.map((option) => (
              <button
                type="button"
                key={option.mode}
                className={viewMode === option.mode ? 'active' : ''}
                aria-pressed={viewMode === option.mode}
                aria-label={option.label}
                title={option.label}
                onClick={() => selectView(option.mode)}
              >
                <Icon name={option.icon} />
              </button>
            ))}
          </div>
        </div>
      </div>
      <div className={`result-list view-${viewMode}`}>
        {pageItems.map((item) => {
          const favorite = isFavorite(item.id);
          const floor = listingFloorText(item.floor, item.buildingFloors);
          const resultSpecTiles: SpecTile[] = [
            { icon: 'area', value: formatArea(item.area), caption: 'Powierzchnia' },
            { icon: 'plan', value: `${item.rooms}`, caption: item.rooms === 1 ? 'Pokój' : 'Pokoje' },
            ...(floor ? [{ icon: 'stairs', value: `${floor}`, caption: 'Piętro' }] : []),
            ...(item.yearBuilt ? [{ icon: 'calendar', value: `${item.yearBuilt}`, caption: 'Rok budowy' }] : []),
          ];
          // Etykieta jak na Otodom: konto firmowe pokazuje nazwe firmy, kazde inne (prywatne lub
          // ogloszenie bez konta w serwisie) - "Oferta prywatna".
          const isCompanyOffer = item.ownerAccountType === 'COMPANY';
          const sellerTypeLabel = isCompanyOffer ? (item.ownerName?.trim() || 'Oferta firmowa') : 'Oferta prywatna';
          return (
            // Karta prowadzi do stron oferty. Tytul jest linkiem rozciagnietym na cala
            // karte (::after), dzieki czemu mamy prawdziwy <a href> - do skopiowania i
            // otwarcia w nowej karcie - bez zagniezdzania przyciskow w <a>.
            <article key={item.id} className="result-card real-result-card">
              {!!item.promotedUntil && new Date(item.promotedUntil).getTime() > Date.now() && (
                <span className="result-promoted-badge"><Icon name="spark" /> Wyróżnione</span>
              )}
              <div className="result-photo">
                <ResultCardGallery photos={item.photos} cover={item.coverPhoto} alt={item.title} />
                {offerType === 'SALE' && (
                  <div className="real-photo-badges">
                    <span className="green-tag">{listingMarketBadge(item.market)}</span>
                  </div>
                )}
                <button
                  type="button"
                  className={favorite ? 'real-favorite-button saved' : 'real-favorite-button'}
                  aria-label={favorite ? 'Usuń z ulubionych' : 'Dodaj do ulubionych'}
                  aria-pressed={favorite}
                  onClick={(event) => {
                    event.stopPropagation();
                    void onToggleFavorite(item);
                  }}
                >
                  <Icon name={favorite ? 'heart-filled' : 'heart'} />
                </button>
              </div>

              <div className="result-info">
                <h3><Link className="card-stretched-link" to={listingPath(item.id)}>{item.title}</Link></h3>
                <p>{[item.city, item.district].filter(Boolean).join(', ')}</p>
                <SpecTiles items={resultSpecTiles} className="compact result-specs" />
                {isCompanyOffer && item.ownerId != null ? (
                  // Oferta firmowa z kontem w serwisie - klik w nazwe firmy otwiera jej profil publiczny.
                  // stopPropagation, bo cala karta jest linkiem do oferty (nakladka ::after).
                  <Link
                    className="result-seller-type company is-link"
                    to={publicProfilePath(item.ownerId)}
                    onClick={(event) => event.stopPropagation()}
                  >
                    <Icon name="building" /> <span className="seller-name">{sellerTypeLabel}</span>
                  </Link>
                ) : (
                  <span className={`result-seller-type ${isCompanyOffer ? 'company' : 'private'}`}>
                    <Icon name={isCompanyOffer ? 'building' : 'user'} /> {sellerTypeLabel}
                  </span>
                )}
              </div>

              <div className="result-side">
                <strong>{formatPrice(item.price)}{item.offerType === 'RENT' ? ' /mc' : ''}</strong>
                <span>{listingRelativeDate(item.createdAt)}</span>
                <Link className="real-card-cta" to={listingPath(item.id)}>
                  Zobacz ogłoszenie
                </Link>
              </div>
            </article>
          );
        })}
      </div>
      {totalPages > 1 && (
        <nav className="offers-pagination" aria-label="Paginacja ofert">
          <button
            type="button"
            className="page-prev"
            disabled={page <= 1}
            aria-label="Poprzednia strona"
            onClick={() => goToPage(page - 1)}
          >
            <Icon name="chevron" />
          </button>
          {Array.from({ length: totalPages }, (_, index) => index + 1).map((number) => (
            <button
              type="button"
              key={number}
              className={number === page ? 'active' : ''}
              aria-current={number === page ? 'page' : undefined}
              onClick={() => goToPage(number)}
            >
              {number}
            </button>
          ))}
          <button
            type="button"
            className="page-next"
            disabled={page >= totalPages}
            aria-label="Następna strona"
            onClick={() => goToPage(page + 1)}
          >
            <Icon name="chevron" />
          </button>
        </nav>
      )}
    </div>
  );
}

// Modal mapy (jak na booking.com): duza mapa z cenami wszystkich ofert. Klik ceny
// otwiera oferte w nowej karcie. Zamkniecie: "X" u gory oraz "Zamknij" w stopce.
function OffersMapModal({
  city,
  offerType,
  onClose,
}: {
  city: string;
  offerType: ApiOfferType;
  onClose: () => void;
}) {
  useEffect(() => {
    const onKey = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };
    document.addEventListener('keydown', onKey);
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = previousOverflow;
    };
  }, [onClose]);

  return (
    <div className="map-modal-overlay" role="dialog" aria-modal="true" aria-label="Oferty na mapie" onClick={onClose}>
      <div className="map-modal map-modal-wide" onClick={(event) => event.stopPropagation()}>
        <div className="map-modal-head">
          <div className="map-modal-title">
            <strong>Szukaj ofert na mapie</strong>
            <small>Przesuwaj i przybliżaj mapę, filtruj i kliknij ofertę, aby otworzyć ją w nowej karcie.</small>
          </div>
          <button type="button" className="map-modal-x" onClick={onClose} aria-label="Zamknij">×</button>
        </div>
        <div className="map-modal-body map-modal-body-search">
          <MapSearchPage initialCity={city} offerType={offerType} embedded />
        </div>
        <div className="map-modal-foot">
          <button type="button" className="map-modal-close-btn" onClick={onClose}>Zamknij</button>
        </div>
      </div>
    </div>
  );
}

function BuyPage({
  filters,
  onOpenMap,
  onOpenListing,
  isFavorite,
  onToggleFavorite,
  savedSearchActive,
  onToggleSavedSearch,
}: {
  filters: FilterState;
  onOpenMap: (city: string, mode?: 'buy' | 'rent') => void;
  onOpenListing: (id: number) => void;
  isFavorite: (listingId: number) => boolean;
  onToggleFavorite: (listing: ApiListingSummary) => void;
  savedSearchActive: boolean;
  onToggleSavedSearch: () => void;
}) {
  const { city, propertyType, pMin, pMax, aMin, aMax, rooms, wtorny, pierwotny, noFeeOnly, chips, resetAll, fromPreferences } = filters;
  const [searchParams, setSearchParams] = useSearchParams();
  // "Szukaj na bieżącej mapie": numery ofert widocznych na mapie trafiaja do adresu (?obszar=...),
  // wiec zawezony wynik przezywa odswiezenie. Myslnik = na mapie nie bylo zadnej oferty.
  const searchVisibleOnMap = (offerIds: number[]) => {
    setSearchParams((prev) => {
      const next = new URLSearchParams(prev);
      next.set('obszar', offerIds.length > 0 ? offerIds.join(',') : '-');
      next.delete('strona');
      return next;
    });
  };
  const [isMapOpen, setIsMapOpen] = useState(false);

  // Miasto przekazane w adresie (np. z kafelka miasta na stronie glownej: /kupno?miasto=Warszawa)
  // przenosimy do filtrow. Dzieki temu link dziala tez po odswiezeniu i przy wejsciu z zewnatrz.
  const cityParam = searchParams.get('miasto') ?? '';
  useEffect(() => {
    if (cityParam) {
      filters.setCity(cityParam);
      filters.setCityInput(cityParam);
    }
    // Zalezymy tylko od wartosci parametru - settery useState sa stabilne. Nie reagujemy na reczne
    // czyszczenie pola miasta (parametr sie nie zmienia), wiec uzytkownik moze swobodnie edytowac filtr.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cityParam]);
  const applySort = (value: SortKey) => {
    setSearchParams((prev) => {
      const next = new URLSearchParams(prev);
      if (value === 'default') {
        next.delete('sortuj');
      } else {
        next.set('sortuj', value);
      }
      next.delete('strona');
      return next;
    });
  };

  const cityFilter = city.trim();
  const { items: liveSaleListings } = useLiveListings('SALE');
  const saleMapCenter = useResolvedCityCenter(city, CITY_COORDS.Warszawa);
  const saleGeoMarkers = useMemo(() => {
    const source = cityFilter
      ? liveSaleListings.filter((item) => cityStartsWith(item.city, cityFilter))
      : liveSaleListings;
    return source.map((item, index) => {
      const point = item.lat != null && item.lng != null ? clampCenter({ lat: item.lat, lng: item.lng }) : listingLatLng(item, index);
      return {
        id: `sale-${item.id}`,
        offerId: item.id,
        label: `${Math.round(item.price / 1000)} tys.`,
        lat: point.lat,
        lng: point.lng,
      };
    });
  }, [cityFilter, liveSaleListings]);

  const quickActions = [
    () => applySort('cheap'),
    () => filters.setNoFeeOnly(true),
    () => applySort('new'),
  ];

  return (
    <section className="buy-page" aria-label="Kup mieszkanie">
      <div className="buy-container">
        <div className="breadcrumb">
          <span>Strona główna</span>
          <Icon name="chevron" />
          <strong>Kup</strong>
        </div>

        <div className="buy-hero">
          <div>
            <h1>Kup <span>bez prowizji</span></h1>
            <p>Znajdź oferty prywatne, deweloperskie i okazje cenowe w całej Polsce.</p>
          </div>
        </div>

        <div className="buy-search-row">
          <MegaSearch filters={filters} onOpenMap={onOpenMap} />

          <button
            className={`save-search ${savedSearchActive ? 'saved' : ''}`}
            type="button"
            aria-pressed={savedSearchActive}
            onClick={onToggleSavedSearch}
          >
            <Icon name="bell" />
            <span>{savedSearchActive ? 'Zapisano wyszukiwanie' : 'Zapisz wyszukiwanie'}</span>
          </button>
        </div>

        <div className="quick-filter-row">
          {buyQuickFilters.map((filter, index) => (
            <button className="quick-filter" key={filter.title} type="button" onClick={quickActions[index]}>
              <Icon name={filter.icon} />
              <span>
                <strong>{filter.title}</strong>
                <small>{filter.text}</small>
              </span>
            </button>
          ))}
        </div>

        <section className="buy-results-zone" aria-label="Wyniki wyszukiwania">
          <div className="buy-layout buy-layout-results">
            <section className="results-column" aria-label="Lista mieszkań">
            <div className="results-head">
              <h2>Oferty sprzedaży</h2>
              {chips.map((chip) => (
                <button className="filter-chip" type="button" key={chip.label} onClick={chip.onRemove}>
                  {chip.label} ×
                </button>
              ))}
            </div>

            {/* Bez tego paska zawezona lista wyglada jak brak ofert w serwisie - uzytkownik musi
                wiedziec, ze to jego wlasne preferencje z ustawien konta, i moc je zdjac. */}
            {fromPreferences && (
              <p className="preferences-note" role="status">
                <Icon name="gear" />
                <span>Filtry ustawione według Twoich preferencji wyszukiwania.</span>
                <button type="button" onClick={resetAll}>Wyczyść</button>
                <Link to={ROUTES.accountSettings}>Zmień preferencje</Link>
              </p>
            )}

            <RealListingsBand
              offerType="SALE"
              onOpenListing={onOpenListing}
              city={city}
              isFavorite={isFavorite}
              onToggleFavorite={onToggleFavorite}
            />
            </section>

            <aside className="map-column" aria-label="Mapa ofert">
            <div className="map-card">
              <SatelliteMap
                markers={[]}
                center={saleMapCenter}
                cityLabel={city || 'Warszawa'}
                geoMarkers={saleGeoMarkers}
                onMapClick={() => setIsMapOpen(true)}
                onSearchVisible={searchVisibleOnMap}
              />
            </div>

            <div className="map-ai-card">
              <div className="ai-label">
                <Icon name="spark" />
                <span>AI Dopasowanie</span>
                <em className="soon-tag">Wkrótce</em>
              </div>
              <p>Powiedz nam czego szukasz, a AI znajdzie oferty idealnie dopasowane do Ciebie.</p>
              <button type="button" disabled title={SOON_HINT}>
                <Icon name="spark" />
                Dopasuj mi mieszkanie
              </button>
            </div>
            </aside>
          </div>
        </section>
      </div>
      {isMapOpen && (
        <OffersMapModal
          city={city}
          offerType="SALE"
          onClose={() => setIsMapOpen(false)}
        />
      )}
    </section>
  );
}

function DualRange({
  min,
  max,
  step,
  low,
  high,
  onChange,
}: {
  min: number;
  max: number;
  step: number;
  low: number;
  high: number;
  onChange: (low: number, high: number) => void;
}) {
  const pctLow = ((low - min) / (max - min)) * 100;
  const pctHigh = ((high - min) / (max - min)) * 100;

  return (
    <div className="dual-range">
      <span className="dual-track" />
      <span className="dual-fill" style={{ left: `${pctLow}%`, right: `${100 - pctHigh}%` }} />
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={low}
        onChange={(event) => onChange(Math.min(Number(event.target.value), high - step), high)}
      />
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={high}
        onChange={(event) => onChange(low, Math.max(Number(event.target.value), low + step))}
      />
    </div>
  );
}

function SatelliteMap({
  markers,
  center,
  cityLabel,
  centerMarkerLabel,
  initialZoom,
  showCityTitle,
  geoMarkers,
  onMapClick,
  onMarkerClick,
  onSearchVisible,
  size,
  areaRadiusMeters,
}: {
  markers: string[][];
  center?: LatLng;
  cityLabel?: string;
  centerMarkerLabel?: string;
  initialZoom?: number;
  showCityTitle?: boolean;
  geoMarkers?: { id: string; lat: number; lng: number; label: string; offerId?: number }[];
  onMapClick?: () => void;
  onMarkerClick?: (offerId: number) => void;
  // Zawezenie listy ofert do tych, ktore widac na mapie. Bez tej funkcji przycisku nie pokazujemy.
  onSearchVisible?: (offerIds: number[]) => void;
  size?: number;
  // Podany promien (w metrach) zastepuje pinezke kolem - uzywany dla przyblizonej lokalizacji.
  areaRadiusMeters?: number;
}) {
  const baseCenter = center ?? CITY_COORDS.Warszawa;
  const [mapCenter, setMapCenter] = useState(baseCenter);
  const [currentZoom, setCurrentZoom] = useState(initialZoom ?? 13);
  const mapSize = size ?? 640;
  const dragRef = useRef<{ startX: number; startY: number; originX: number; originY: number; moved: boolean } | null>(null);
  // Rzeczywisty rozmiar mapy (mierzony), aby kafelki wypelnily caly kontener - bez pustych paskow.
  const rootRef = useRef<HTMLDivElement>(null);
  const [measured, setMeasured] = useState<{ w: number; h: number } | null>(null);
  useLayoutEffect(() => {
    const el = rootRef.current;
    if (!el) {
      return;
    }
    const update = () => setMeasured({ w: Math.round(el.clientWidth), h: Math.round(el.clientHeight) });
    update();
    const observer = new ResizeObserver(update);
    observer.observe(el);
    return () => observer.disconnect();
  }, []);
  const viewW = measured?.w || mapSize;
  const viewH = measured?.h || mapSize;

  // Reset widoku, gdy zmieni sie zewnetrzny srodek/zoom (np. inne miasto). Samo przeciaganie
  // (pan) aktualizuje tylko lokalny mapCenter i NIE resetuje zoomu ani pozycji.
  useEffect(() => {
    setMapCenter(baseCenter);
    setCurrentZoom(initialZoom ?? 13);
  }, [initialZoom, baseCenter.lat, baseCenter.lng]);

  const tiles = useMemo(() => createSatelliteTiles({
    centerLat: mapCenter.lat,
    centerLng: mapCenter.lng,
    height: viewH,
    width: viewW,
    zoom: currentZoom,
  }), [currentZoom, mapCenter.lat, mapCenter.lng, viewW, viewH]);

  const positionedGeoMarkers = useMemo(() => {
    if (!geoMarkers || geoMarkers.length === 0) {
      return [] as { id: string; label: string; offerId?: number; left: number; top: number }[];
    }
    const worldCenter = projectToWorld(mapCenter.lat, mapCenter.lng, currentZoom);
    const tileCount = 2 ** currentZoom;
    const worldWidth = tileCount * 256;
    return geoMarkers
      .map((marker) => {
        const worldPoint = projectToWorld(marker.lat, marker.lng, currentZoom);
        let dx = worldPoint.x - worldCenter.x;
        if (dx > worldWidth / 2) {
          dx -= worldWidth;
        } else if (dx < -worldWidth / 2) {
          dx += worldWidth;
        }
        return {
          id: marker.id,
          label: marker.label,
          offerId: marker.offerId,
          left: viewW / 2 + dx,
          top: viewH / 2 + (worldPoint.y - worldCenter.y),
        };
      })
      .filter((marker) => marker.left >= 0 && marker.left <= viewW && marker.top >= 0 && marker.top <= viewH);
  }, [geoMarkers, mapCenter.lat, mapCenter.lng, currentZoom, viewW, viewH]);
  const shouldRenderStaticMarkers = geoMarkers == null;

  // Kolo przyblizonej lokalizacji: srednica wynika ze skali kafelkow (zoom i szerokosc geograficzna),
  // a pozycja z rzutowania punktu ogloszenia, dzieki czemu obszar trzyma sie mapy przy przesuwaniu.
  const areaCircle = useMemo(() => {
    if (!areaRadiusMeters) {
      return null;
    }
    const metersPerPixel = (156543.03392 * Math.cos((baseCenter.lat * Math.PI) / 180)) / 2 ** currentZoom;
    const worldCenter = projectToWorld(mapCenter.lat, mapCenter.lng, currentZoom);
    const worldPoint = projectToWorld(baseCenter.lat, baseCenter.lng, currentZoom);
    return {
      diameter: (2 * areaRadiusMeters) / metersPerPixel,
      left: viewW / 2 + (worldPoint.x - worldCenter.x),
      top: viewH / 2 + (worldPoint.y - worldCenter.y),
    };
  }, [areaRadiusMeters, baseCenter.lat, baseCenter.lng, mapCenter.lat, mapCenter.lng, currentZoom, viewW, viewH]);

  const changeZoom = (delta: number) => {
    setCurrentZoom((current) => Math.max(6, Math.min(19, current + delta)));
  };

  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
    // Klik w przyciski mapy (zoom, "Szukaj na biezacej mapie", klikalne markery) nie
    // rozpoczyna przeciagania - dzialaja normalnie, a mapa nie otwiera przez to modala.
    if ((event.target as HTMLElement).closest('button')) {
      return;
    }
    event.currentTarget.setPointerCapture(event.pointerId);
    const worldCenter = projectToWorld(mapCenter.lat, mapCenter.lng, currentZoom);
    dragRef.current = {
      startX: event.clientX,
      startY: event.clientY,
      originX: worldCenter.x,
      originY: worldCenter.y,
      moved: false,
    };
  };

  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
    const drag = dragRef.current;
    if (!drag) {
      return;
    }
    const dx = event.clientX - drag.startX;
    const dy = event.clientY - drag.startY;
    if (Math.abs(dx) + Math.abs(dy) > 3) {
      drag.moved = true;
    }
    const next = unprojectFromWorld(drag.originX - dx, drag.originY - dy, currentZoom);
    setMapCenter(clampCenter(next));
  };

  const onPointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {
    const drag = dragRef.current;
    dragRef.current = null;
    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
      event.currentTarget.releasePointerCapture(event.pointerId);
    }
    // Klik (bez przeciagniecia) otwiera modal; przeciagniecie tylko przesuwa mape.
    if (drag && !drag.moved && onMapClick) {
      onMapClick();
    }
  };

  return (
    <div
      ref={rootRef}
      className={`satellite-map satellite-map-pannable ${onMapClick ? 'satellite-map-clickable' : ''}`}
      style={size ? { width: mapSize, height: mapSize } : undefined}
      onWheel={(event) => {
        event.preventDefault();
        changeZoom(event.deltaY < 0 ? 1 : -1);
      }}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={onPointerUp}
      onPointerCancel={onPointerUp}
      role={onMapClick ? 'button' : undefined}
      tabIndex={onMapClick ? 0 : undefined}
      onKeyDown={(event) => {
        if (!onMapClick) {
          return;
        }
        if (event.key === 'Enter' || event.key === ' ') {
          event.preventDefault();
          onMapClick();
        }
      }}
      aria-label={onMapClick ? 'Otwórz lokalizację w mapach' : undefined}
    >
      <div className="satellite-tiles" aria-hidden="true">
        {tiles.map((tile) => (
          <img
            alt=""
            draggable={false}
            height="256"
            key={`${tile.z}-${tile.x}-${tile.y}`}
            loading="lazy"
            src={`https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/${tile.z}/${tile.y}/${tile.x}`}
            style={{ left: tile.left, top: tile.top }}
            width="256"
          />
        ))}
      </div>
      <div className="satellite-tiles satellite-labels" aria-hidden="true">
        {tiles.map((tile) => (
          <img
            alt=""
            draggable={false}
            height="256"
            key={`lbl-${tile.z}-${tile.x}-${tile.y}`}
            loading="lazy"
            src={`https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/${tile.z}/${tile.y}/${tile.x}`}
            style={{ left: tile.left, top: tile.top }}
            width="256"
          />
        ))}
      </div>
      <div className="satellite-map-shade" />
      {onSearchVisible && (
        <button
          type="button"
          className="map-current"
          onClick={(event) => {
            event.stopPropagation();
            onSearchVisible(positionedGeoMarkers
              .map((marker) => marker.offerId)
              .filter((offerId): offerId is number => offerId != null));
          }}
        >
          <span />
          Szukaj na bieżącej mapie
        </button>
      )}
      {areaCircle && (
        <span
          className="map-area-circle"
          style={{ left: `${areaCircle.left}px`, top: `${areaCircle.top}px`, width: areaCircle.diameter, height: areaCircle.diameter }}
          aria-hidden="true"
        />
      )}
      {centerMarkerLabel && (
        <>
          {/* Przy przyblizonej lokalizacji nie rysujemy pinezki - dokladny punkt zastepuje obszar. */}
          {!areaCircle && <span className="map-center-pin" style={{ left: '50%', top: '52%' }} aria-hidden="true" />}
          <span className="map-price map-price-center-label" style={{ left: '50%', top: '44%' }}>{centerMarkerLabel}</span>
        </>
      )}
      {positionedGeoMarkers.map((marker) => (
        onMarkerClick && marker.offerId != null ? (
          <button
            type="button"
            className="map-price map-price-clickable"
            style={{ left: `${marker.left}px`, top: `${marker.top}px` }}
            key={marker.id}
            onClick={(event) => {
              event.stopPropagation();
              onMarkerClick(marker.offerId as number);
            }}
          >
            {marker.label}
          </button>
        ) : (
          <span className="map-price" style={{ left: `${marker.left}px`, top: `${marker.top}px` }} key={marker.id}>
            {marker.label}
          </span>
        )
      ))}
      {shouldRenderStaticMarkers && markers.map(([label, left, top]) => (
        <span className="map-price" style={{ left, top }} key={`${label}-${left}-${top}`}>
          {label}
        </span>
      ))}
      <div className="map-zoom">
        <button
          type="button"
          onClick={(event) => {
            event.stopPropagation();
            changeZoom(1);
          }}
          aria-label="Przybliż mapę"
        >+</button>
        <button
          type="button"
          onClick={(event) => {
            event.stopPropagation();
            changeZoom(-1);
          }}
          aria-label="Oddal mapę"
        >−</button>
      </div>
      <a
        className="map-attribution"
        href="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
        rel="noreferrer"
        target="_blank"
      >
        Imagery © Esri
      </a>
    </div>
  );
}

type MapOfferPreview = {
  listingId?: number;
  title: string;
  city: string;
  district: string;
  rooms: number;
  area: number;
  priceValue: number;
  market: 'wtorny' | 'pierwotny';
  tags: string[];
  image: 'hero' | 'city';
  imageUrl?: string | null;
  lat?: number | null;
  lng?: number | null;
  meta: string;
};

type MapMarker = { id: number; lat: number; lng: number; label: string; offer: MapOfferPreview; ariaLabel?: string };

const MAP_MIN_ZOOM = 6;
const MAP_MAX_ZOOM = 15;

function InteractiveMap({
  center,
  zoom,
  onChange,
  markers,
  selectedId,
  onSelect,
}: {
  center: LatLng;
  zoom: number;
  onChange: (center: LatLng, zoom: number) => void;
  markers: MapMarker[];
  selectedId: number | null;
  onSelect: (id: number | null) => void;
}) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [size, setSize] = useState({ w: 960, h: 560 });
  const dragRef = useRef<{ startX: number; startY: number; originX: number; originY: number; moved: boolean } | null>(null);

  useEffect(() => {
    const node = containerRef.current;
    if (!node) {
      return;
    }
    const measure = () => setSize({ w: node.clientWidth, h: node.clientHeight });
    measure();
    const observer = new ResizeObserver(measure);
    observer.observe(node);
    return () => observer.disconnect();
  }, []);

  const worldCenter = projectToWorld(center.lat, center.lng, zoom);
  const originX = worldCenter.x - size.w / 2;
  const originY = worldCenter.y - size.h / 2;
  const tileCount = 2 ** zoom;
  const tileSize = 256;

  const startTileX = Math.floor(originX / tileSize);
  const endTileX = Math.floor((originX + size.w) / tileSize);
  const startTileY = Math.floor(originY / tileSize);
  const endTileY = Math.floor((originY + size.h) / tileSize);

  const tiles: { key: string; left: number; top: number; x: number; y: number }[] = [];
  for (let tx = startTileX; tx <= endTileX; tx += 1) {
    for (let ty = startTileY; ty <= endTileY; ty += 1) {
      if (ty < 0 || ty >= tileCount) {
        continue;
      }
      const wrappedX = ((tx % tileCount) + tileCount) % tileCount;
      tiles.push({
        key: `${zoom}-${tx}-${ty}`,
        left: tx * tileSize - originX,
        top: ty * tileSize - originY,
        x: wrappedX,
        y: ty,
      });
    }
  }

  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
    event.currentTarget.setPointerCapture(event.pointerId);
    dragRef.current = {
      startX: event.clientX,
      startY: event.clientY,
      originX: worldCenter.x,
      originY: worldCenter.y,
      moved: false,
    };
  };

  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
    const drag = dragRef.current;
    if (!drag) {
      return;
    }
    const dx = event.clientX - drag.startX;
    const dy = event.clientY - drag.startY;
    if (Math.abs(dx) + Math.abs(dy) > 3) {
      drag.moved = true;
    }
    const next = unprojectFromWorld(drag.originX - dx, drag.originY - dy, zoom);
    onChange(clampCenter(next), zoom);
  };

  const onPointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {
    const drag = dragRef.current;
    dragRef.current = null;
    if (drag && !drag.moved) {
      onSelect(null);
    }
    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
      event.currentTarget.releasePointerCapture(event.pointerId);
    }
  };

  const changeZoom = (delta: number) => {
    const next = Math.min(MAP_MAX_ZOOM, Math.max(MAP_MIN_ZOOM, zoom + delta));
    onChange(center, next);
  };

  const onWheel = (event: ReactWheelEvent<HTMLDivElement>) => {
    changeZoom(event.deltaY < 0 ? 1 : -1);
  };

  return (
    <div className="imap" ref={containerRef}>
      <div
        className="imap-surface"
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={onPointerUp}
        onPointerCancel={onPointerUp}
        onWheel={onWheel}
      >
        <div className="imap-tiles" aria-hidden="true">
          {tiles.map((tile) => (
            <img
              alt=""
              key={tile.key}
              draggable={false}
              height={tileSize}
              width={tileSize}
              loading="lazy"
              src={`https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/${zoom}/${tile.y}/${tile.x}`}
              style={{ left: tile.left, top: tile.top }}
            />
          ))}
        </div>

        <div className="imap-tiles imap-labels" aria-hidden="true">
          {tiles.map((tile) => (
            <img
              alt=""
              key={`label-${tile.key}`}
              draggable={false}
              height={tileSize}
              width={tileSize}
              loading="lazy"
              src={`https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/${zoom}/${tile.y}/${tile.x}`}
              style={{ left: tile.left, top: tile.top }}
            />
          ))}
        </div>

        {markers.map((marker) => {
          const world = projectToWorld(marker.lat, marker.lng, zoom);
          const left = world.x - originX;
          const top = world.y - originY;
          if (left < -60 || left > size.w + 60 || top < -60 || top > size.h + 60) {
            return null;
          }
          return (
            <button
              type="button"
              key={marker.id}
              className={`imap-marker rank-${marker.id} ${selectedId === marker.id ? 'active' : ''}`}
              style={{ left, top }}
              aria-label={marker.ariaLabel ?? marker.label}
              title={marker.ariaLabel}
              onPointerDown={(event) => event.stopPropagation()}
              onClick={(event) => {
                event.stopPropagation();
                onSelect(marker.id);
                onChange(clampCenter({ lat: marker.lat, lng: marker.lng }), zoom);
              }}
            >
              {marker.label}
            </button>
          );
        })}
      </div>

      <div className="imap-zoom">
        <button type="button" aria-label="Przybliż" onClick={() => changeZoom(1)}>+</button>
        <button type="button" aria-label="Oddal" onClick={() => changeZoom(-1)}>−</button>
      </div>

      <a
        className="map-attribution"
        href="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
        rel="noreferrer"
        target="_blank"
      >
        Imagery © Esri
      </a>
    </div>
  );
}

function LocationPickerMap({
  center,
  marker,
  zoom,
  label,
  onChange,
  onPick,
  approximate = false,
  radiusMeters = 300,
}: {
  center: LatLng;
  marker: LatLng;
  zoom: number;
  label: string;
  onChange: (center: LatLng, zoom: number) => void;
  onPick: (point: LatLng) => void;
  // approximate = pokazuj obszar (plame) zamiast dokladnej pinezki; radiusMeters = promien tego obszaru.
  approximate?: boolean;
  radiusMeters?: number;
}) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [size, setSize] = useState({ w: 720, h: 278 });
  // Podglad: mapa uliczna (OpenStreetMap) albo satelita (ArcGIS World Imagery).
  const [mapType, setMapType] = useState<'map' | 'satellite'>('map');
  const tileUrl = (tileX: number, tileY: number) => (mapType === 'satellite'
    ? `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/${zoom}/${tileY}/${tileX}`
    : `https://tile.openstreetmap.org/${zoom}/${tileX}/${tileY}.png`);
  const [draftMarker, setDraftMarker] = useState<LatLng | null>(null);
  const mapDragRef = useRef<{ startX: number; startY: number; originX: number; originY: number; moved: boolean } | null>(null);
  const markerDragRef = useRef<{ moved: boolean } | null>(null);

  useEffect(() => {
    const node = containerRef.current;
    if (!node) {
      return;
    }
    const measure = () => setSize({ w: node.clientWidth, h: node.clientHeight });
    measure();
    const observer = new ResizeObserver(measure);
    observer.observe(node);
    return () => observer.disconnect();
  }, []);

  // Scroll nad mapa zoomuje mapę i NIE przewija strony. React rejestruje onWheel jako pasywny,
  // wiec preventDefault nie zadziala - dlatego wpinamy natywny listener z passive: false. Poza
  // mapa (brak listenera) scroll dziala normalnie. Aktualne wartosci czytamy przez ref.
  const wheelStateRef = useRef({ zoom, center, onChange });
  wheelStateRef.current = { zoom, center, onChange };
  useEffect(() => {
    const node = containerRef.current;
    if (!node) {
      return;
    }
    const onWheelNative = (event: WheelEvent) => {
      event.preventDefault();
      const state = wheelStateRef.current;
      const nextZoom = Math.min(19, Math.max(5, state.zoom + (event.deltaY < 0 ? 1 : -1)));
      if (nextZoom !== state.zoom) {
        state.onChange(state.center, nextZoom);
      }
    };
    node.addEventListener('wheel', onWheelNative, { passive: false });
    return () => node.removeEventListener('wheel', onWheelNative);
  }, []);

  const worldCenter = projectToWorld(center.lat, center.lng, zoom);
  const originX = worldCenter.x - size.w / 2;
  const originY = worldCenter.y - size.h / 2;
  const tileSize = 256;
  const tileCount = 2 ** zoom;
  const startTileX = Math.floor(originX / tileSize);
  const endTileX = Math.floor((originX + size.w) / tileSize);
  const startTileY = Math.floor(originY / tileSize);
  const endTileY = Math.floor((originY + size.h) / tileSize);
  const tiles: { key: string; left: number; top: number; x: number; y: number }[] = [];

  for (let tx = startTileX; tx <= endTileX; tx += 1) {
    for (let ty = startTileY; ty <= endTileY; ty += 1) {
      if (ty < 0 || ty >= tileCount) {
        continue;
      }
      const wrappedX = ((tx % tileCount) + tileCount) % tileCount;
      tiles.push({
        key: `${zoom}-${tx}-${ty}`,
        left: tx * tileSize - originX,
        top: ty * tileSize - originY,
        x: wrappedX,
        y: ty,
      });
    }
  }

  const shownMarker = draftMarker ?? marker;
  const markerWorld = projectToWorld(shownMarker.lat, shownMarker.lng, zoom);
  const markerLeft = markerWorld.x - originX;
  const markerTop = markerWorld.y - originY;
  // Srednica plamy obszaru w pikselach: promien w metrach przeliczony na piksele w tej szerokosci i zoomie.
  const metersPerPixel = (156543.03392 * Math.cos((shownMarker.lat * Math.PI) / 180)) / (2 ** zoom);
  const areaDiameter = (2 * radiusMeters) / metersPerPixel;
  const changeZoom = (delta: number) => {
    const nextZoom = Math.min(19, Math.max(5, zoom + delta));
    onChange(center, nextZoom);
  };

  const pointFromEvent = (event: ReactPointerEvent<HTMLElement>) => {
    const node = containerRef.current;
    if (!node) {
      return marker;
    }
    const rect = node.getBoundingClientRect();
    const x = originX + event.clientX - rect.left;
    const y = originY + event.clientY - rect.top;
    return clampCenter(unprojectFromWorld(x, y, zoom));
  };

  const onMapPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
    event.currentTarget.setPointerCapture(event.pointerId);
    mapDragRef.current = {
      startX: event.clientX,
      startY: event.clientY,
      originX: worldCenter.x,
      originY: worldCenter.y,
      moved: false,
    };
  };

  const onMapPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
    const drag = mapDragRef.current;
    if (!drag) {
      return;
    }
    const dx = event.clientX - drag.startX;
    const dy = event.clientY - drag.startY;
    if (Math.abs(dx) + Math.abs(dy) > 4) {
      drag.moved = true;
    }
    const nextCenter = unprojectFromWorld(drag.originX - dx, drag.originY - dy, zoom);
    onChange(clampCenter(nextCenter), zoom);
  };

  const onMapPointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {
    const drag = mapDragRef.current;
    mapDragRef.current = null;
    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
      event.currentTarget.releasePointerCapture(event.pointerId);
    }
    if (drag && !drag.moved) {
      onPick(pointFromEvent(event));
    }
  };

  const onMarkerPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
    event.stopPropagation();
    event.currentTarget.setPointerCapture(event.pointerId);
    markerDragRef.current = { moved: false };
    setDraftMarker(marker);
  };

  const onToolPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
    event.stopPropagation();
    event.currentTarget.setPointerCapture(event.pointerId);
    markerDragRef.current = { moved: false };
    setDraftMarker(pointFromEvent(event));
  };

  const onMarkerPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
    const drag = markerDragRef.current;
    if (!drag) {
      return;
    }
    drag.moved = true;
    setDraftMarker(pointFromEvent(event));
  };

  const onMarkerPointerUp = (event: ReactPointerEvent<HTMLDivElement>) => {
    const drag = markerDragRef.current;
    markerDragRef.current = null;
    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
      event.currentTarget.releasePointerCapture(event.pointerId);
    }
    const point = pointFromEvent(event);
    setDraftMarker(null);
    if (drag) {
      onPick(point);
    }
  };

  return (
    <div className="add-location-map real-location-map" ref={containerRef}>
      <div
        className="real-location-surface"
        onPointerDown={onMapPointerDown}
        onPointerMove={onMapPointerMove}
        onPointerUp={onMapPointerUp}
        onPointerCancel={onMapPointerUp}
      >
        <div className="real-location-tiles" aria-hidden="true">
          {tiles.map((tile) => (
            <img
              alt=""
              draggable={false}
              height={tileSize}
              key={`${mapType}-${tile.key}`}
              loading="lazy"
              src={tileUrl(tile.x, tile.y)}
              style={{ left: tile.left, top: tile.top }}
              width={tileSize}
            />
          ))}
        </div>

        {approximate ? (
          // Przyblizona lokalizacja: zamiast pinezki rysujemy "plame" - obszar o zadanym promieniu.
          <div
            className="add-location-area"
            style={{ left: markerLeft, top: markerTop, width: areaDiameter, height: areaDiameter }}
            aria-hidden="true"
          />
        ) : (
          <>
            <div
              className="add-location-pin real-location-pin"
              style={{ left: markerLeft, top: markerTop }}
              onPointerDown={onMarkerPointerDown}
              onPointerMove={onMarkerPointerMove}
              onPointerUp={onMarkerPointerUp}
              onPointerCancel={onMarkerPointerUp}
            >
              <Icon name="pin" />
            </div>
            <span className="add-location-map-label real-location-label" style={{ left: markerLeft, top: markerTop - 36 }}>
              {label}
            </span>
          </>
        )}
      </div>

      <div className="real-location-maptype" role="group" aria-label="Rodzaj mapy">
        <button type="button" className={mapType === 'map' ? 'active' : ''} onClick={() => setMapType('map')}>Mapa</button>
        <button type="button" className={mapType === 'satellite' ? 'active' : ''} onClick={() => setMapType('satellite')}>Satelita</button>
      </div>

      {!approximate && (
        <div
          className="real-location-pin-tool"
          onPointerDown={onToolPointerDown}
          onPointerMove={onMarkerPointerMove}
          onPointerUp={onMarkerPointerUp}
          onPointerCancel={onMarkerPointerUp}
          title="Przeciągnij pinezkę na adres"
        >
          <Icon name="pin" />
        </div>
      )}

      <div className="real-location-zoom">
        <button type="button" aria-label="Przybliż" onClick={() => changeZoom(1)}>+</button>
        <button type="button" aria-label="Oddal" onClick={() => changeZoom(-1)}>−</button>
      </div>
      <a
        className="real-location-attribution"
        href={mapType === 'satellite' ? 'https://www.esri.com/' : 'https://www.openstreetmap.org/copyright'}
        rel="noreferrer"
        target="_blank"
      >
        {mapType === 'satellite' ? '© Esri, Maxar' : '© OpenStreetMap'}
      </a>
    </div>
  );
}

function MapSearchPage({ initialCity, offerType, embedded }: { initialCity: string; offerType: ApiOfferType; embedded?: boolean }) {
  const navigate = useNavigate();
  const display = useDisplay();
  const { formatPrice, formatPriceNumber } = display;
  const knownInitialCity = findKnownCityKey(initialCity);
  const startCity = knownInitialCity ?? '';
  const initialCityValue = initialCity.trim();
  const isRentMode = offerType === 'RENT';
  const { items: liveListings } = useLiveListings(offerType);
  const [cityInput, setCityInput] = useState(initialCity);
  const [city, setCity] = useState(initialCityValue);
  const [priceMin, setPriceMin] = useState('');
  const [priceMax, setPriceMax] = useState('');
  const [rooms, setRooms] = useState<number | null>(null);
  const [wtorny, setWtorny] = useState(true);
  const [pierwotny, setPierwotny] = useState(true);
  const [center, setCenter] = useState<LatLng>(startCity ? CITY_COORDS[startCity] : POLAND_CENTER);
  const [zoom, setZoom] = useState(startCity ? 12 : 6);
  const [selectedId, setSelectedId] = useState<number | null>(null);
  const [suggestions, setSuggestions] = useState<PlaceSuggestion[]>([]);
  const [suggestOpen, setSuggestOpen] = useState(false);
  const [suggestLoading, setSuggestLoading] = useState(false);
  const skipNextFetch = useRef(false);
  const autoCenteredRef = useRef(false);

  useEffect(() => {
    if (!initialCityValue || startCity) {
      return;
    }
    const controller = new AbortController();
    fetchPlaceSuggestions(initialCityValue, controller.signal)
      .then((places) => {
        if (places.length === 0) {
          return;
        }
        setCenter(clampCenter({ lat: places[0].lat, lng: places[0].lng }));
        setZoom(13);
      })
      .catch(() => undefined);
    return () => controller.abort();
  }, [initialCityValue, startCity]);

  useEffect(() => {
    if (autoCenteredRef.current || startCity || city.trim() || cityInput.trim() || liveListings.length === 0) {
      return;
    }

    const counts = new Map<string, number>();
    liveListings.forEach((listing) => {
      counts.set(listing.city, (counts.get(listing.city) ?? 0) + 1);
    });

    const topCity = Array.from(counts.entries())
      .sort((left, right) => right[1] - left[1])[0]?.[0] ?? '';
    const coords = topCity ? CITY_COORDS[topCity] : null;
    if (!coords) {
      return;
    }

    autoCenteredRef.current = true;
    skipNextFetch.current = true;
    setCityInput(topCity);
    setCity(topCity);
    setCenter(coords);
    setZoom(12);
    setSelectedId(null);
    setSuggestOpen(false);
    setSuggestions([]);
  }, [city, cityInput, liveListings, startCity]);

  useEffect(() => {
    const query = cityInput.trim();
    if (skipNextFetch.current) {
      skipNextFetch.current = false;
      return;
    }
    if (query.length < 2) {
      setSuggestions([]);
      setSuggestLoading(false);
      return;
    }
    const controller = new AbortController();
    setSuggestLoading(true);
    const timer = window.setTimeout(() => {
      fetchPlaceSuggestions(query, controller.signal)
        .then((places) => {
          setSuggestions(places);
          setSuggestOpen(true);
        })
        .catch((error) => {
          if ((error as Error).name !== 'AbortError') {
            setSuggestions([]);
          }
        })
        .finally(() => setSuggestLoading(false));
    }, 300);
    return () => {
      controller.abort();
      window.clearTimeout(timer);
    };
  }, [cityInput]);

  const pMin = parseNumber(priceMin);
  const pMax = parseNumber(priceMax);
  const cityFilter = city.trim();

  const sourceOffers = liveListings.map((listing) => toMapOfferPreview(listing, listing, display));

  const results = sourceOffers
    .map((offer, index) => ({ offer, index }))
    .filter(({ offer }) => {
      if (cityFilter && !cityStartsWith(offer.city, cityFilter)) {
        return false;
      }
      if (pMin != null && offer.priceValue < pMin) {
        return false;
      }
      if (pMax != null && offer.priceValue > pMax) {
        return false;
      }
      if (rooms != null && (rooms === 5 ? offer.rooms < 5 : offer.rooms !== rooms)) {
        return false;
      }
      if (offer.market === 'wtorny' && !wtorny) {
        return false;
      }
      if (offer.market === 'pierwotny' && !pierwotny) {
        return false;
      }
      return true;
    });

  const markers: MapMarker[] = results.map(({ offer, index }) => {
    const point = offer.lat != null && offer.lng != null
      ? clampCenter({ lat: offer.lat, lng: offer.lng })
      : listingLatLng(offer, index);
    return {
      id: index,
      lat: point.lat,
      lng: point.lng,
      label: isRentMode ? formatPrice(offer.priceValue) : `${formatPriceNumber(offer.priceValue / 1000)} tys.`,
      offer,
    };
  });

  const selectedMarker = markers.find((marker) => marker.id === selectedId) ?? null;

  const goToCity = (name: string) => {
    const coords = CITY_COORDS[name];
    skipNextFetch.current = true;
    setCityInput(name);
    setCity(name);
    setSelectedId(null);
    setSuggestOpen(false);
    setSuggestions([]);
    if (coords) {
      setCenter(coords);
      setZoom(12);
    }
  };

  const goToPlace = (place: PlaceSuggestion) => {
    skipNextFetch.current = true;
    setCityInput(place.label);
    setCity(place.label);
    setSelectedId(null);
    setSuggestOpen(false);
    setSuggestions([]);
    setCenter({ lat: place.lat, lng: place.lng });
    setZoom(13);
  };

  const applySearch = () => {
    const trimmed = cityInput.trim();
    if (!trimmed) {
      setCity('');
      setSuggestOpen(false);
      setCenter(POLAND_CENTER);
      setZoom(6);
      return;
    }

    const matchedKnownCity = findKnownCityKey(trimmed);
    if (matchedKnownCity) {
      goToCity(matchedKnownCity);
      return;
    }

    if (suggestions.length > 0) {
      goToPlace(suggestions[0]);
      return;
    }
    const controller = new AbortController();
    setSuggestLoading(true);
    fetchPlaceSuggestions(trimmed, controller.signal)
      .then((places) => {
        if (places.length > 0) {
          goToPlace(places[0]);
        } else {
          setCity(trimmed);
        }
      })
      .catch(() => setCity(trimmed))
      .finally(() => setSuggestLoading(false));
  };

  const resetView = () => {
    setCity('');
    setCityInput('');
    setPriceMin('');
    setPriceMax('');
    setRooms(null);
    setWtorny(true);
    setPierwotny(true);
    setSelectedId(null);
    setSuggestOpen(false);
    setSuggestions([]);
    setCenter(POLAND_CENTER);
    setZoom(6);
  };

  return (
    <section className="map-search-page" aria-label="Mapa ofert">
      <div className="map-search-bar">
        {!embedded && (
          <Link className="map-back" to={isRentMode ? ROUTES.rent : ROUTES.buy}>
            <Icon name="chevron" />
            <span>Wróć do listy</span>
          </Link>
        )}

        <div className="map-field map-field-city">
          <Icon name="search" />
          <input
            type="text"
            placeholder="Szukaj miasta, wsi lub miejscowości w Polsce"
            value={cityInput}
            onChange={(event) => { setCityInput(event.target.value); setSuggestOpen(true); }}
            onFocus={() => { if (suggestions.length > 0) { setSuggestOpen(true); } }}
            onBlur={() => window.setTimeout(() => setSuggestOpen(false), 150)}
            onKeyDown={(event) => { if (event.key === 'Enter') { applySearch(); } }}
          />
          {suggestLoading && <span className="map-suggest-spinner" aria-hidden="true" />}
          {suggestOpen && (suggestions.length > 0 || (!suggestLoading && cityInput.trim().length >= 2)) && (
            <div className="map-suggest">
              {suggestions.map((place) => (
                <button
                  type="button"
                  key={place.id}
                  onMouseDown={(event) => event.preventDefault()}
                  onClick={() => goToPlace(place)}
                >
                  <Icon name="pin" />
                  <span>
                    <strong>{place.label}</strong>
                    {place.sublabel && <small>{place.sublabel}</small>}
                  </span>
                </button>
              ))}
              {suggestions.length === 0 && !suggestLoading && (
                <p className="map-suggest-empty">Brak wyników dla „{cityInput.trim()}"</p>
              )}
            </div>
          )}
        </div>

        <div className="map-field map-field-num">
          <input inputMode="numeric" placeholder="Cena od" value={priceMin} onChange={(event) => setPriceMin(event.target.value)} />
        </div>
        <div className="map-field map-field-num">
          <input inputMode="numeric" placeholder="Cena do" value={priceMax} onChange={(event) => setPriceMax(event.target.value)} />
        </div>

        <div className="map-field map-field-select">
          <select value={rooms == null ? '' : String(rooms)} onChange={(event) => setRooms(event.target.value === '' ? null : Number(event.target.value))}>
            <option value="">Pokoje: dowolne</option>
            {ROOM_OPTIONS.map((value) => (
              <option key={value} value={value}>{value === 5 ? '5+ pokoi' : roomsLabel(value)}</option>
            ))}
          </select>
        </div>

        <div className="map-field map-field-select">
          <select
            value={wtorny && pierwotny ? 'both' : wtorny ? 'wtorny' : pierwotny ? 'pierwotny' : 'both'}
            onChange={(event) => {
              const value = event.target.value;
              setWtorny(value === 'both' || value === 'wtorny');
              setPierwotny(value === 'both' || value === 'pierwotny');
            }}
          >
            <option value="both">Rynek: dowolny</option>
            <option value="wtorny">Tylko wtórny</option>
            <option value="pierwotny">Tylko pierwotny</option>
          </select>
        </div>

        <button type="button" className="map-search-btn" onClick={applySearch}>
          <Icon name="search" />
          <span>Szukaj</span>
        </button>
        <button type="button" className="map-reset-btn" onClick={resetView}>
          Wyczyść
        </button>
      </div>

      <div className="map-city-chips">
        {POPULAR_CITIES.map((name) => (
          <button type="button" key={name} className={city === name ? 'active' : ''} onClick={() => goToCity(name)}>
            {name}
          </button>
        ))}
      </div>

      <div className="map-stage">
        <div className="map-count">
          <strong>{markers.length}</strong> {flatsWord(markers.length)} na mapie
        </div>

        <InteractiveMap
          center={center}
          zoom={zoom}
          onChange={(nextCenter, nextZoom) => { setCenter(nextCenter); setZoom(nextZoom); }}
          markers={markers}
          selectedId={selectedId}
          onSelect={setSelectedId}
        />

        {selectedMarker && (
          <article className="map-offer-card">
            <button type="button" className="map-offer-close" aria-label="Zamknij" onClick={() => setSelectedId(null)}>
              ×
            </button>
            <div className="map-offer-photo" style={{ backgroundImage: `url(${selectedMarker.offer.imageUrl ?? (selectedMarker.offer.image === 'hero' ? heroImage : cityImage)})` }} />
            <div className="map-offer-body">
              <strong>{formatPrice(selectedMarker.offer.priceValue)}{isRentMode ? ' /mc' : ''}</strong>
              <h3>{selectedMarker.offer.title}</h3>
              <p>{selectedMarker.offer.district}</p>
              <small>{selectedMarker.offer.meta}</small>
              <div className="map-offer-tags">
                {selectedMarker.offer.tags.map((tag) => (
                  <span key={tag}>{tag}</span>
                ))}
              </div>
              {selectedMarker.offer.listingId != null && (
                <a
                  className="map-offer-cta"
                  href={listingPath(selectedMarker.offer.listingId)}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Zobacz ogłoszenie <Icon name="arrow" />
                </a>
              )}
            </div>
          </article>
        )}
      </div>
    </section>
  );
}

function Header({
  onLogout,
  hasUnreadFavorites,
  onOpenNotification,
}: {
  onLogout: () => void;
  hasUnreadFavorites: boolean;
  onOpenNotification: (notification: DisplayNotification) => void;
}) {
  const navigate = useNavigate();
  const { user } = useAuth();
  const { notifications: serverNotifications, unreadCount } = useNotifications();
  const isLoggedIn = Boolean(user);
  const isAdmin = user?.role === 'ADMIN';
  const messagesUnreadCount = useMessagesUnreadCount();
  const [isNotificationsOpen, setIsNotificationsOpen] = useState(false);
  const notificationPopoverRef = useRef<HTMLDivElement | null>(null);
  const [isAccountMenuOpen, setIsAccountMenuOpen] = useState(false);
  const accountMenuRef = useRef<HTMLDivElement | null>(null);

  // Dane powiadomień z centralnego providera. W dzwonku pokazujemy nieprzeczytane (znikają po kliknięciu).
  const displayNotifications = toDisplayNotifications(serverNotifications);
  const previewNotifications = displayNotifications.filter((item) => item.unread).slice(0, 6);

  useEffect(() => {
    if (!isNotificationsOpen) {
      return;
    }

    const onPointerDown = (event: MouseEvent) => {
      if (!notificationPopoverRef.current) {
        return;
      }
      if (!notificationPopoverRef.current.contains(event.target as Node)) {
        setIsNotificationsOpen(false);
      }
    };

    const onEscape = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        setIsNotificationsOpen(false);
      }
    };

    window.addEventListener('pointerdown', onPointerDown);
    window.addEventListener('keydown', onEscape);
    return () => {
      window.removeEventListener('pointerdown', onPointerDown);
      window.removeEventListener('keydown', onEscape);
    };
  }, [isNotificationsOpen]);

  useEffect(() => {
    if (!isAccountMenuOpen) {
      return;
    }

    const onPointerDown = (event: MouseEvent) => {
      if (!accountMenuRef.current) {
        return;
      }
      if (!accountMenuRef.current.contains(event.target as Node)) {
        setIsAccountMenuOpen(false);
      }
    };

    const onEscape = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        setIsAccountMenuOpen(false);
      }
    };

    window.addEventListener('pointerdown', onPointerDown);
    window.addEventListener('keydown', onEscape);
    return () => {
      window.removeEventListener('pointerdown', onPointerDown);
      window.removeEventListener('keydown', onEscape);
    };
  }, [isAccountMenuOpen]);

  // Pozycje menu sa linkami; zamkniecie popovera to efekt uboczny kliknięcia, nie nawigacja.
  const closeAccountMenu = () => setIsAccountMenuOpen(false);

  return (
    <header className={isAdmin ? 'header header-admin' : 'header'}>
      <div className="brand-group">
        <Link className="brand" to={ROUTES.home} aria-label="Polska Lokalnie">
          <span className="brand-mark">
            <img src={isAdmin ? plLogoDark : plLogoLight} alt="Polska Lokalnie" className="brand-logo-img" />
          </span>
          <span>
            <strong>Polska <span className="brand-name-accent">Lokalnie</span></strong>
            <small>ogłoszenia za darmo</small>
          </span>
        </Link>

        {isAdmin && <span className="brand-admin-badge">ADMIN</span>}
      </div>

      <nav className="nav" aria-label="Główna nawigacja">
        <NavLink to={ROUTES.buy} className={navLinkClass}>
          Kupuję
        </NavLink>
        <NavLink to={ROUTES.rent} className={navLinkClass}>
          Wynajmuję
        </NavLink>
        <NavLink to={ROUTES.sell} className={navLinkClass}>
          Sprzedaję
        </NavLink>
        <NavLink to={ROUTES.valuation} className={navLinkClass}>
          Wycena mieszkania
        </NavLink>
        <NavLink to={ROUTES.services} className={navLinkClass}>
          Firmy i usługi
        </NavLink>
        <NavLink to={ROUTES.guides} className={navLinkClass}>
          Poradniki
        </NavLink>
      </nav>

      <div className="header-actions">
        <NavLink
          to={ROUTES.favorites}
          className={({ isActive }) => (isActive ? 'icon-text favorites-shortcut active' : 'icon-text favorites-shortcut')}
          // Na wezszych ekranach podpis jest ukryty - nazwa zostaje w dymku i dla czytnikow ekranu.
          aria-label="Ulubione"
          title="Ulubione"
        >
          <Icon name="heart" />
          <span>Ulubione</span>
          {hasUnreadFavorites && <i aria-hidden="true" />}
        </NavLink>
        {isLoggedIn && (
          <NavLink
            to={ROUTES.messages}
            className={({ isActive }) => (isActive ? 'icon-text messages-shortcut active' : 'icon-text messages-shortcut')}
            aria-label={messagesUnreadCount > 0 ? `Wiadomości, nieprzeczytane: ${messagesUnreadCount}` : 'Wiadomości'}
            title="Wiadomości"
          >
            <Icon name="message" />
            {messagesUnreadCount > 0 && <b aria-hidden="true">{messagesUnreadCount > 99 ? '99+' : messagesUnreadCount}</b>}
          </NavLink>
        )}
        {isLoggedIn && (
          <div className="notify-bell-wrap" ref={notificationPopoverRef}>
            <button
              className={isNotificationsOpen ? 'icon-text notify-bell open' : 'icon-text notify-bell'}
              type="button"
              aria-label="Powiadomienia"
              aria-expanded={isNotificationsOpen}
              aria-haspopup="dialog"
              onClick={() => setIsNotificationsOpen((current) => !current)}
            >
              <Icon name="bell" />
              {unreadCount > 0 && <i />}
            </button>

            {isNotificationsOpen && (
              <section className="notification-popover" aria-label="Powiadomienia">
                <div className="notification-popover-head">
                  <h3>Powiadomienia</h3>
                  <Link to={ROUTES.notifications} onClick={() => setIsNotificationsOpen(false)}>
                    Zobacz wszystkie
                  </Link>
                </div>

                <div className="notification-popover-list">
                  {previewNotifications.length === 0 && (
                    <p className="notification-popover-empty">Brak nowych powiadomień.</p>
                  )}
                  {previewNotifications.map((item) => (
                    <article
                      key={item.id}
                      className="notification-popover-item"
                      role="button"
                      tabIndex={0}
                      onClick={() => { setIsNotificationsOpen(false); onOpenNotification(item); }}
                    >
                      <span className={`notification-icon ${item.category}`}>
                        <Icon name={item.icon} />
                      </span>
                      <div>
                        <strong>{item.title}</strong>
                        <small>{item.description}</small>
                      </div>
                      <em>{item.timeLabel}</em>
                      {item.unread && <i className="notification-unread-dot" aria-hidden="true" />}
                    </article>
                  ))}
                </div>
              </section>
            )}
          </div>
        )}
        {!isLoggedIn && (
          <Link className="icon-text" to={ROUTES.login}>
            <Icon name="user" />
            <span>Moje konto</span>
          </Link>
        )}
        {isLoggedIn && (
          <div className="account-menu-wrap" ref={accountMenuRef}>
            <button
              className={isAccountMenuOpen ? 'icon-text account-menu-trigger open' : 'icon-text account-menu-trigger'}
              type="button"
              aria-haspopup="menu"
              aria-expanded={isAccountMenuOpen}
              onClick={() => setIsAccountMenuOpen((current) => !current)}
              aria-label={getDisplayName(user)}
            >
              <Avatar className="account-trigger-avatar" name={getDisplayName(user)} image={user?.avatarImage} />
              <Icon name="chevron" />
            </button>

            {isAccountMenuOpen && (
              <div className="account-popover" role="menu" aria-label="Menu konta">
                <Link role="menuitem" to={ROUTES.account} onClick={closeAccountMenu}>
                  <Icon name="house" /> Panel główny
                </Link>
                <Link role="menuitem" to={ROUTES.accountListings} onClick={closeAccountMenu}>
                  <Icon name="document" /> Moje oferty
                </Link>
                <Link role="menuitem" to={ROUTES.accountSettings} onClick={closeAccountMenu}>
                  <Icon name="gear" /> Dane i ustawienia
                </Link>
                {isAdmin && (
                  <Link role="menuitem" className="account-popover-admin" to={ROUTES.admin} onClick={closeAccountMenu}>
                    <Icon name="shield" /> Panel admina
                  </Link>
                )}
                <button
                  type="button"
                  role="menuitem"
                  className="account-popover-logout"
                  onClick={() => {
                    setIsAccountMenuOpen(false);
                    onLogout();
                  }}
                >
                  <Icon name="lock" /> Wyloguj
                </button>
              </div>
            )}
          </div>
        )}
        <Link className="post-button" to={ROUTES.add}>
          <span>Dodaj ogłoszenie za darmo</span>
          <small>0 zł • Bez prowizji</small>
        </Link>
      </div>
    </header>
  );
}

function NotificationsPage({ onOpenNotification }: { onOpenNotification: (notification: DisplayNotification) => void }) {
  const [activeTab, setActiveTab] = useState<'all' | NotificationCategory>('all');
  const { notifications: serverNotifications, unreadCount, markAllRead, clearAll } = useNotifications();

  // Cała historia z backendu (przeczytane pozostają na liście); mapowanie do kształtu widoku bez zmiany designu.
  const allNotifications = toDisplayNotifications(serverNotifications);
  const filteredNotifications = allNotifications.filter((item) => activeTab === 'all' || item.category === activeTab);
  const groupedNotifications = filteredNotifications.reduce<Record<'Dzisiaj' | 'Wczoraj', DisplayNotification[]>>((groups, item) => {
    groups[item.dayLabel].push(item);
    return groups;
  }, { Dzisiaj: [], Wczoraj: [] });

  return (
    <section className="notifications-page" aria-label="Powiadomienia użytkownika">
      <div className="notifications-shell">
        <div className="notifications-panel">
          <div className="notifications-head">
            <h1>Powiadomienia</h1>
            <div className="notifications-actions">
              <button
                type="button"
                className="notifications-mark-all"
                onClick={markAllRead}
                disabled={unreadCount === 0}
                aria-label="Oznacz wszystkie powiadomienia jako przeczytane"
              >
                <Icon name="check" />
                Odczytaj wszystkie
              </button>
              <button
                type="button"
                className="notifications-clear-all"
                onClick={() => {
                  if (window.confirm('Usunąć wszystkie powiadomienia? Tej operacji nie można cofnąć.')) {
                    clearAll();
                  }
                }}
                disabled={allNotifications.length === 0}
                aria-label="Usuń wszystkie powiadomienia"
              >
                <Icon name="trash" />
                Usuń wszystkie
              </button>
            </div>
          </div>

          <div className="notifications-tabs" role="tablist" aria-label="Filtr powiadomień">
            <button type="button" role="tab" aria-selected={activeTab === 'all'} className={activeTab === 'all' ? 'active' : ''} onClick={() => setActiveTab('all')}>Wszystkie</button>
            <button type="button" role="tab" aria-selected={activeTab === 'listing'} className={activeTab === 'listing' ? 'active' : ''} onClick={() => setActiveTab('listing')}>Ogłoszenia</button>
            <button type="button" role="tab" aria-selected={activeTab === 'messages'} className={activeTab === 'messages' ? 'active' : ''} onClick={() => setActiveTab('messages')}>Wiadomości</button>
            <button type="button" role="tab" aria-selected={activeTab === 'system'} className={activeTab === 'system' ? 'active' : ''} onClick={() => setActiveTab('system')}>System</button>
          </div>

          {(['Dzisiaj', 'Wczoraj'] as const).map((groupName) => (
            groupedNotifications[groupName].length > 0 ? (
              <div className="notifications-group" key={groupName}>
                <h2>{groupName}</h2>
                <div className="notifications-list">
                  {groupedNotifications[groupName].map((item) => (
                    <article
                      key={item.id}
                      className={`notification-row${item.unread ? ' unread' : ''}`}
                      role="button"
                      tabIndex={0}
                      onClick={() => onOpenNotification(item)}
                    >
                      <span className={`notification-icon ${item.category}`}>
                        <Icon name={item.icon} />
                      </span>
                      <div className="notification-copy">
                        <strong>{item.title}</strong>
                        <p>{item.description}</p>
                      </div>
                      <div className="notification-meta">
                        <small>{item.timeLabel}</small>
                        {item.unread && <i className="notification-unread-dot" aria-hidden="true" />}
                        {item.action === 'arrow' && <Icon name="arrow" />}
                      </div>
                    </article>
                  ))}
                </div>
              </div>
            ) : null
          ))}

        </div>
      </div>
    </section>
  );
}

// Wizytowka kontaktowa wysylana w rozmowie. Dane biora sie z konta (/auth/me):
// imie i nazwisko oraz e-mail zawsze, telefon tylko wtedy, gdy uzytkownik zapisal go w profilu.
type BusinessCard = {
  fullName: string;
  phone: string | null;
  email: string;
  // true = wizytowka firmy (etykieta "Nazwa firmy" w zapisie i podpis "Firma" na karcie).
  isCompany?: boolean;
};

// Watek z administracja jest trzymany na serwerze jako zwykly tekst wiadomosci, wiec wizytowke
// zapisujemy w czytelnym formacie z markerem i odczytujemy z powrotem przy wczytywaniu rozmowy.
const BUSINESS_CARD_MARKER = '[wizytówka]';
const BUSINESS_CARD_TEXT = 'Przesyłam wizytówkę kontaktową.';

// Etykieta nazwy w wizytowce: firma ma "Nazwa firmy", osoba prywatna "Imię i nazwisko".
const BUSINESS_CARD_COMPANY_LABEL = 'Nazwa firmy';
const BUSINESS_CARD_PERSON_LABEL = 'Imię i nazwisko';

function formatBusinessCard(card: BusinessCard): string {
  const lines = [
    `${BUSINESS_CARD_MARKER} Wizytówka kontaktowa`,
    `${card.isCompany ? BUSINESS_CARD_COMPANY_LABEL : BUSINESS_CARD_PERSON_LABEL}: ${card.fullName}`,
    `E-mail: ${card.email}`,
  ];
  if (card.phone) {
    lines.push(`Telefon: ${card.phone}`);
  }
  return lines.join('\n');
}

function parseBusinessCard(content: string): BusinessCard | null {
  if (!content.startsWith(BUSINESS_CARD_MARKER)) {
    return null;
  }

  const lines = content.split('\n');
  const readLine = (label: string) => {
    const line = lines.find((item) => item.startsWith(`${label}: `));
    return line ? line.slice(label.length + 2).trim() : '';
  };

  const email = readLine('E-mail');
  if (!email) {
    return null;
  }
  // Stare wizytowki maja tylko "Imię i nazwisko" - firmowa etykieta jest opcjonalna i wstecznie zgodna.
  const companyName = readLine(BUSINESS_CARD_COMPANY_LABEL);
  const isCompany = companyName.length > 0;
  const fullName = isCompany ? companyName : readLine(BUSINESS_CARD_PERSON_LABEL);
  return { fullName, email, phone: readLine('Telefon') || null, isCompany };
}

// Tresc wiadomosci z serwera zamieniona na czesci widoku: wizytowka renderuje sie jako karta,
// pozostale wiadomosci jako zwykly tekst.
function chatContentParts(content: string): { text: string; businessCard?: BusinessCard } {
  const card = parseBusinessCard(content);
  return card ? { text: BUSINESS_CARD_TEXT, businessCard: card } : { text: content };
}

type PublicProfile = {
  id: number;
  fullName: string;
  nick: string | null;
  bio: string | null;
  avatarImage: string | null;
  coverImage: string | null;
  accountType: AccountType;
  verified: boolean;
  memberSince: string;
  // Ostatnia aktywnosc wlasciciela profilu - null, gdy nieodnotowana.
  lastActiveAt: string | null;
  // Dane firmowe (konto COMPANY) - null dla kont prywatnych albo gdy nieuzupelnione.
  companyTagline: string | null;
  website: string | null;
  socialLinkedin: string | null;
  socialFacebook: string | null;
  socialInstagram: string | null;
  socialYoutube: string | null;
  // Telefon i adres - tylko gdy firma wlaczyla publiczny kontakt; inaczej null.
  publicPhone: string | null;
  publicAddress: string | null;
  // Profil prywatny ogladany przez kogos innego niz wlasciciel - reszta pol jest wtedy pusta.
  privateProfile: boolean;
  listingsCount: number;
  listings: {
    id: number;
    title: string;
    city: string;
    district: string | null;
    price: number;
    offerType: ApiOfferType;
    area: number | null;
    rooms: number | null;
    floor: string | null;
    buildingFloors: string | null;
    coverPhoto: string | null;
    createdAt: string;
  }[];
};

/**
 * Rozbudowany profil konta firmowego (deweloper/agencja) pod /profil/:id oraz /u/:nick. W odroznieniu
 * od profilu osoby prywatnej pokazuje baner z logo, dane firmy (haslo, www, social media, opcjonalny
 * kontakt), statystyki policzone z realnych ogloszen oraz zakladki. Zakladki trzymamy w query stringu
 * (?sekcja=), zgodnie ze standardem routingu - adres da sie skopiowac, odswiezyc i cofnac.
 */
function CompanyProfile({ profile }: { profile: PublicProfile }) {
  const { formatPrice, formatArea } = useDisplay();
  const [searchParams, setSearchParams] = useSearchParams();
  const [phoneRevealed, setPhoneRevealed] = useState(false);

  const TABS = [
    { key: 'o-firmie', label: 'O firmie' },
    { key: 'ogloszenia', label: `Ogłoszenia ${profile.listingsCount}` },
    { key: 'kontakt', label: 'Kontakt' },
  ];
  const activeTab = searchParams.get('sekcja') ?? 'o-firmie';
  const changeTab = (key: string) => {
    setSearchParams((prev) => {
      const next = new URLSearchParams(prev);
      if (key === 'o-firmie') {
        next.delete('sekcja');
      } else {
        next.set('sekcja', key);
      }
      return next;
    }, { replace: false });
  };

  const memberSinceLabel = new Date(profile.memberSince).toLocaleDateString('pl-PL', { month: 'long', year: 'numeric' });
  const lastActiveLabel = sellerLastActive(profile.lastActiveAt);
  // Statystyki wylacznie z realnych ogloszen firmy - zadnych zmyslonych liczb.
  const forSaleCount = profile.listings.filter((listing) => listing.offerType === 'SALE').length;
  const forRentCount = profile.listings.filter((listing) => listing.offerType === 'RENT').length;
  const cityCount = new Set(
    profile.listings.map((listing) => listing.city.trim().toLowerCase()).filter(Boolean),
  ).size;

  const socialLinks = [
    { key: 'linkedin', url: profile.socialLinkedin, label: 'LinkedIn' },
    { key: 'facebook', url: profile.socialFacebook, label: 'Facebook' },
    { key: 'instagram', url: profile.socialInstagram, label: 'Instagram' },
    { key: 'youtube', url: profile.socialYoutube, label: 'YouTube' },
  ].filter((item): item is { key: string; url: string; label: string } => Boolean(item.url));

  const hasContactData = Boolean(profile.website || profile.publicPhone || profile.publicAddress);

  const renderListingCard = (listing: PublicProfile['listings'][number]) => (
    <Link className="public-listing-card" key={listing.id} to={listingPath(listing.id)}>
      <div
        className="public-listing-photo"
        style={{ backgroundImage: `url(${listing.coverPhoto || heroImage})`, backgroundPosition: 'center center' }}
      >
        <span className={`public-listing-badge ${listing.offerType === 'RENT' ? 'rent' : 'sale'}`}>
          {listing.offerType === 'RENT' ? 'Na wynajem' : 'Na sprzedaż'}
        </span>
      </div>
      <div className="public-listing-body">
        <strong>{formatPrice(listing.price)}{listing.offerType === 'RENT' ? ' / mies.' : ''}</strong>
        <h3>{listing.title}</h3>
        <small><Icon name="pin" /> {[listing.city, listing.district].filter(Boolean).join(', ')}</small>
        <SpecTiles
          className="compact"
          items={[
            ...(listing.area !== null ? [{ icon: 'area', value: formatArea(listing.area), caption: 'Powierzchnia' }] : []),
            ...(listing.rooms !== null ? [{ icon: 'plan', value: `${listing.rooms}`, caption: listing.rooms === 1 ? 'Pokój' : 'Pokoje' }] : []),
            ...(listing.floor ? [{ icon: 'stairs', value: `${listingFloorText(listing.floor, listing.buildingFloors)}`, caption: 'Piętro' }] : []),
          ]}
        />
        <div className="public-listing-foot">
          <em>{listingRelativeDate(listing.createdAt) || 'Dodane niedawno'}</em>
        </div>
      </div>
    </Link>
  );

  // Karta "Szybki kontakt" - pokazywana obok zakladek "O firmie" i "Kontakt". Zawiera wylacznie
  // realnie dzialajace elementy: strone www, telefon (z odslanianiem numeru) i adres.
  const contactCard = (
    <aside className="company-profile-contact-card">
      <h2>Szybki kontakt</h2>
      {hasContactData ? (
        <>
          <p>Masz pytania? Skontaktuj się z firmą.</p>
          <ul className="company-contact-list">
            {profile.publicPhone && (
              <li>
                <Icon name="phone" />
                {phoneRevealed ? (
                  <a href={`tel:${profile.publicPhone.replace(/\s+/g, '')}`}>{profile.publicPhone}</a>
                ) : (
                  <button type="button" className="company-phone-reveal" onClick={() => setPhoneRevealed(true)}>
                    Pokaż numer
                  </button>
                )}
              </li>
            )}
            {profile.publicAddress && (
              <li><Icon name="pin" /> <span>{profile.publicAddress}</span></li>
            )}
          </ul>
          {profile.website && (
            <a className="company-contact-www" href={profile.website} target="_blank" rel="noopener noreferrer nofollow">
              <Icon name="globe" /> Zobacz stronę www
            </a>
          )}
        </>
      ) : (
        <p className="company-contact-empty">
          Aby napisać do firmy, otwórz jedno z jej ogłoszeń i użyj przycisku „Napisz wiadomość”.
        </p>
      )}
    </aside>
  );

  return (
    <div className="company-profile">
      <section className="company-profile-header">
        <div
          className="company-profile-banner"
          style={{ backgroundImage: `url(${profile.coverImage || cityImage})` }}
        />
        <div className="company-profile-head-row">
          <div className="company-profile-logo">
            <Avatar className="company-profile-logo-img" name={profile.fullName} image={profile.avatarImage} singleLetter />
          </div>
          <div className="company-profile-identity">
            {profile.verified && (
              <span className="company-verified-badge"><Icon name="shield" /> Adres e-mail potwierdzony</span>
            )}
            <h1>{profile.fullName}</h1>
            {profile.companyTagline && <p className="company-profile-tagline">{profile.companyTagline}</p>}
            <div className="company-profile-quicklinks">
              {profile.publicAddress && <span><Icon name="pin" /> {profile.publicAddress}</span>}
              {profile.publicPhone && (
                <span>
                  <Icon name="phone" />
                  {phoneRevealed ? profile.publicPhone : (
                    <button type="button" className="company-phone-reveal" onClick={() => setPhoneRevealed(true)}>Pokaż numer</button>
                  )}
                </span>
              )}
              {profile.website && (
                <a href={profile.website} target="_blank" rel="noopener noreferrer nofollow"><Icon name="globe" /> {companyWebsiteLabel(profile.website)}</a>
              )}
            </div>
          </div>
          {socialLinks.length > 0 && (
            <div className="company-profile-socials">
              {socialLinks.map((item) => (
                <a key={item.key} href={item.url} target="_blank" rel="noopener noreferrer nofollow" aria-label={item.label} title={item.label}>
                  <Icon name={item.key} />
                </a>
              ))}
            </div>
          )}
        </div>

        <nav className="company-profile-tabs" aria-label="Sekcje profilu firmy">
          {TABS.map((tab) => (
            <button
              key={tab.key}
              type="button"
              className={activeTab === tab.key ? 'active' : ''}
              onClick={() => changeTab(tab.key)}
            >
              {tab.label}
            </button>
          ))}
        </nav>
      </section>

      {activeTab === 'o-firmie' && (
        <div className="company-profile-body">
          <div className="company-profile-main">
            <section className="settings-card company-about">
              <h2>O firmie</h2>
              <p>{profile.bio || 'Ta firma nie dodała jeszcze opisu swojej działalności.'}</p>
              <div className="company-stats">
                <div><Icon name="pin" /><strong>{cityCount}</strong><small>{cityCount === 1 ? 'miasto' : 'miast(a)'}</small></div>
                <div><Icon name="house" /><strong>{profile.listingsCount}</strong><small>ogłoszeń</small></div>
                <div><Icon name="tag" /><strong>{forSaleCount}</strong><small>na sprzedaż</small></div>
                <div><Icon name="key" /><strong>{forRentCount}</strong><small>na wynajem</small></div>
              </div>
              <div className="company-profile-badges">
                <span><Icon name="calendar" /> W serwisie od {memberSinceLabel}</span>
                {lastActiveLabel && <span><Icon name="clock" /> {lastActiveLabel}</span>}
                {profile.verified && <span><Icon name="shield" /> Konto zweryfikowane</span>}
              </div>
            </section>

            <section className="settings-card">
              <div className="settings-card-head company-listings-head">
                <h2>Najnowsze ogłoszenia</h2>
                {profile.listingsCount > 3 && (
                  <button type="button" className="company-see-all" onClick={() => changeTab('ogloszenia')}>
                    Zobacz wszystkie <Icon name="arrow" />
                  </button>
                )}
              </div>
              {profile.listings.length === 0 ? (
                <p className="admin-empty">Ta firma nie ma obecnie opublikowanych ogłoszeń.</p>
              ) : (
                <div className="public-listing-grid">
                  {profile.listings.slice(0, 3).map(renderListingCard)}
                </div>
              )}
            </section>
          </div>
          {contactCard}
        </div>
      )}

      {activeTab === 'ogloszenia' && (
        <section className="settings-card">
          <div className="settings-card-head">
            <h2>Ogłoszenia ({profile.listingsCount})</h2>
          </div>
          {profile.listings.length === 0 ? (
            <p className="admin-empty">Ta firma nie ma obecnie opublikowanych ogłoszeń.</p>
          ) : (
            <div className="public-listing-grid">
              {profile.listings.map(renderListingCard)}
            </div>
          )}
        </section>
      )}

      {activeTab === 'kontakt' && (
        <div className="company-profile-body">
          <section className="settings-card company-about">
            <h2>Kontakt</h2>
            {hasContactData ? (
              <p>Skorzystaj z danych kontaktowych firmy lub napisz wiadomość z poziomu jej ogłoszenia.</p>
            ) : (
              <p>Ta firma nie udostępniła publicznie danych kontaktowych. Aby się z nią skontaktować, otwórz jedno z jej ogłoszeń i użyj przycisku „Napisz wiadomość”.</p>
            )}
            <div className="company-profile-badges">
              <span><Icon name="calendar" /> W serwisie od {memberSinceLabel}</span>
              {lastActiveLabel && <span><Icon name="clock" /> {lastActiveLabel}</span>}
            </div>
          </section>
          {contactCard}
        </div>
      )}
    </div>
  );
}

/**
 * Profil innego uzytkownika (/profil/:id) - otwierany z rozmowy w wiadomosciach.
 * Pokazuje wylacznie dane jawne; kontakt odbywa sie przez wiadomosci, nie przez e-mail.
 */
function PublicProfilePage() {
  // Ten sam widok obsluguje /profil/:id oraz /u/:nick - rozni sie tylko sposob wyszukania konta.
  const { id, nick } = useParams();
  const navigate = useNavigate();
  const { formatPrice, formatArea } = useDisplay();
  const [profile, setProfile] = useState<PublicProfile | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    setError('');

    const path = nick ? `/users/by-nick/${encodeURIComponent(nick)}/profile` : `/users/${id}/profile`;
    apiFetch<PublicProfile>(path)
      .then((data) => {
        if (!cancelled) {
          setProfile(data);
          setLoading(false);
        }
      })
      .catch((err) => {
        if (!cancelled) {
          setError(err instanceof Error ? err.message : 'Nie udało się wczytać profilu.');
          setLoading(false);
        }
      });

    return () => {
      cancelled = true;
    };
  }, [id, nick]);

  const memberSinceLabel = profile
    ? new Date(profile.memberSince).toLocaleDateString('pl-PL', { month: 'long', year: 'numeric' })
    : '';

  const forSaleCount = profile?.listings.filter((listing) => listing.offerType === 'SALE').length ?? 0;
  const forRentCount = profile?.listings.filter((listing) => listing.offerType === 'RENT').length ?? 0;

  return (
    <section className="public-profile-page standalone-profile" aria-label="Profil użytkownika">
      <div className="standalone-profile-inner">
        <button type="button" className="standalone-profile-back" onClick={() => navigate(-1)}>
          <Icon name="arrow" /> Wróć
        </button>

        {loading && <p className="admin-empty">Wczytywanie profilu...</p>}
        {!loading && error && <p className="admin-empty">{error}</p>}

        {/* Profil prywatny: serwer nie przysyla ogloszen ani danych profilu, wiec nie ma czego ukrywac
            w interfejsie - pokazujemy sama informacje, do kogo profil nalezy i ze jest prywatny. */}
        {!loading && !error && profile?.privateProfile && (
          <section className="settings-card private-profile-card" aria-label="Profil prywatny">
            <Avatar className="private-profile-avatar" name={profile.fullName} />
            <h1>{profile.fullName}</h1>
            <strong><Icon name="lock" /> Ten profil jest prywatny</strong>
            <p>
              Ogłoszenia, opis i pozostałe dane tego konta widzi wyłącznie jego właściciel.
              Jeśli chcesz się skontaktować, napisz wiadomość w serwisie.
            </p>
          </section>
        )}

        {/* Konto firmowe dostaje rozbudowany profil (banner, dane firmy, statystyki, oferty). */}
        {!loading && !error && profile && !profile.privateProfile && profile.accountType === 'COMPANY' && (
          <CompanyProfile profile={profile} />
        )}

        {!loading && !error && profile && !profile.privateProfile && profile.accountType !== 'COMPANY' && (
          <>
            <section className="public-profile-cover-card">
              {/* Zdjecie w tle ustawione przez wlasciciela; bez niego zostaje grafika serwisu. */}
              <div
                className="public-profile-cover"
                style={{ backgroundImage: `url(${profile.coverImage || cityImage})`, backgroundPosition: 'center center' }}
              />
              <div className="public-profile-summary">
                <Avatar className="public-profile-avatar" name={profile.fullName} image={profile.avatarImage} />
                <div className="public-profile-user">
                  <h1>{profile.fullName}</h1>
                  <div className="public-profile-meta">
                    {profile.nick && <span><Icon name="user" /> @{profile.nick}</span>}
                    <span><Icon name="calendar" /> W serwisie od {memberSinceLabel}</span>
                    <span><Icon name="house" /> Osoba prywatna</span>
                  </div>
                  {/* Opis "o mnie" z ustawien konta - pole opcjonalne, wiec pokazujemy tylko gdy wypelnione. */}
                  {profile.bio && <p className="public-profile-bio">{profile.bio}</p>}
                </div>
                <blockquote>
                  {profile.verified
                    ? 'Właściciel konta potwierdził adres e-mail podany przy rejestracji.'
                    : 'Adres e-mail tego konta nie został jeszcze potwierdzony.'}
                </blockquote>
                <div className="public-profile-stats">
                  <div><strong>{profile.listingsCount}</strong><small>Ogłoszenia</small></div>
                  <div><strong>{forSaleCount}</strong><small>Na sprzedaż</small></div>
                  <div><strong>{forRentCount}</strong><small>Na wynajem</small></div>
                </div>
              </div>
            </section>

            <section className="settings-card public-profile-listings">
                <div className="settings-card-head">
                  <h2>Ogłoszenia ({profile.listingsCount})</h2>
                </div>

                {profile.listings.length === 0 ? (
                  <p className="admin-empty">Ten użytkownik nie ma obecnie opublikowanych ogłoszeń.</p>
                ) : (
                  <div className="public-listing-grid">
                    {profile.listings.map((listing) => (
                      <Link className="public-listing-card" key={listing.id} to={listingPath(listing.id)}>
                        <div
                          className="public-listing-photo"
                          style={{ backgroundImage: `url(${listing.coverPhoto || heroImage})`, backgroundPosition: 'center center' }}
                        >
                          <span className={`public-listing-badge ${listing.offerType === 'RENT' ? 'rent' : 'sale'}`}>
                            {listing.offerType === 'RENT' ? 'Na wynajem' : 'Na sprzedaż'}
                          </span>
                        </div>
                        <div className="public-listing-body">
                          <strong>{formatPrice(listing.price)}{listing.offerType === 'RENT' ? ' / mies.' : ''}</strong>
                          <h3>{listing.title}</h3>
                          <small><Icon name="pin" /> {[listing.city, listing.district].filter(Boolean).join(', ')}</small>
                          <SpecTiles
                            className="compact"
                            items={[
                              ...(listing.area !== null ? [{ icon: 'area', value: formatArea(listing.area), caption: 'Powierzchnia' }] : []),
                              ...(listing.rooms !== null ? [{ icon: 'plan', value: `${listing.rooms}`, caption: listing.rooms === 1 ? 'Pokój' : 'Pokoje' }] : []),
                              ...(listing.floor ? [{ icon: 'stairs', value: `${listingFloorText(listing.floor, listing.buildingFloors)}`, caption: 'Piętro' }] : []),
                            ]}
                          />
                          <div className="public-listing-foot">
                            <em>{listingRelativeDate(listing.createdAt) || 'Dodane niedawno'}</em>
                          </div>
                        </div>
                      </Link>
                    ))}
                  </div>
                )}
            </section>

            <section className="settings-card public-profile-about">
              <h2>O użytkowniku</h2>
              <p>Ten użytkownik nie dodał jeszcze opisu swojego profilu.</p>
              <div className="public-profile-badges">
                <span><Icon name="user" /> Konto prywatne</span>
                <span><Icon name="calendar" /> W serwisie od {memberSinceLabel}</span>
                {profile.verified && <span><Icon name="shield" /> Potwierdzony e-mail</span>}
                <span><Icon name="message" /> Kontakt przez wiadomości</span>
              </div>
            </section>

            <footer className="settings-footer-note">
              <Icon name="lock" /> Dane kontaktowe użytkownika (e-mail, telefon) nie są widoczne publicznie.
              Napisz do niego przez wiadomości w serwisie.
            </footer>
          </>
        )}
      </div>
    </section>
  );
}

// Odczyt pliku jako dataURL - uzywane przy zalacznikach zgloszen i zdjeciach profilu.
function readFileAsDataUrl(file: File): Promise<string> {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      if (typeof reader.result !== 'string') {
        reject(new Error('Nie udało się odczytać pliku.'));
        return;
      }
      resolve(reader.result);
    };
    reader.onerror = () => reject(new Error('Nie udało się odczytać pliku.'));
    reader.readAsDataURL(file);
  });
}

// Etykieta czasu na liscie rozmow i przy wiadomosci: dzis sama godzina, starsze - sam dzien i miesiac.
// Krotki zapis miesci sie w waskiej kolumnie listy i jest zgodny z pozostalymi watkami.
function chatTimeLabel(date: Date): string {
  const isToday = date.toDateString() === new Date().toDateString();
  return isToday
    ? date.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' })
    : date.toLocaleDateString('pl-PL', { day: '2-digit', month: '2-digit' });
}

// Numer dopisywany z okna wizytowki: 9 cyfr w formacie polskim. Ten sam zapis co w ustawieniach
// konta ("+48 500100200"), zeby oba widoki pokazywaly identyczny numer.
const BUSINESS_CARD_PHONE_PREFIX = '+48';
const BUSINESS_CARD_PHONE_DIGITS = 9;

function formatPhoneDigits(digits: string): string {
  return digits.replace(/(\d{3})(?=\d)/g, '$1 ').trim();
}

function MessagesPage({
  onOpenListing,
}: {
  onOpenListing: (id: number) => void;
}) {
  const navigate = useNavigate();
  const { formatPrice, formatArea } = useDisplay();
  // Otwarta rozmowa wynika z adresu: /wiadomosci/:conversationId (numer z API albo "administracja")
  // lub /wiadomosci/nowa/:listingId - szkic rozmowy z ogloszenia, zapisany z pierwsza wiadomoscia.
  const { conversationId: conversationParam, listingId: newListingParam } = useParams();
  type ChatMessage = {
    id: string;
    text: string;
    time: string;
    mine: boolean;
    sentAt: number;
    readByRecipient?: boolean;
    unread?: boolean;
    businessCard?: BusinessCard;
  };

  type ChatThread = {
    id: string;
    name: string;
    avatarImage: string;
    status: string;
    // Konto rozmowcy - link do jego profilu publicznego.
    contactUserId?: number | null;
    listing: MessageThreadListing | null;
    messages: ChatMessage[];
    // Rozmowa o ogloszeniu zapisana na serwerze.
    conversationId?: number;
    // Szkic nowej rozmowy - ogloszenie, ktorego dotyczy pierwsza wiadomosc.
    draftListingId?: number;
    // Rozmowa o moim ogloszeniu (pisze kupujacy).
    selling?: boolean;
    // Dane z listy rozmow, zanim wczytamy wiadomosci watku.
    summary?: { preview: string; lastAt: number; unread: number };
    blocked?: boolean;
    blockedByMe?: boolean;
  };

  type ThreadFilter = 'all' | 'unread' | 'read';
  type ReportStep = 1 | 2 | 3;

  const reportReasons = [
    { id: 'fraud', icon: 'warning', title: 'Podejrzane lub oszukańcze działania', description: 'Użytkownik może próbować oszukać lub wyłudzić pieniądze.' },
    { id: 'inappropriate', icon: 'message', title: 'Nieodpowiednie treści', description: 'Ogłoszenia lub wiadomości zawierają treści obraźliwe lub nieodpowiednie.' },
    { id: 'harassment', icon: 'user', title: 'Nękanie lub zastraszanie', description: 'Użytkownik wysyła obraźliwe wiadomości lub nęka innych.' },
    { id: 'spam', icon: 'document', title: 'Spam lub duplikaty', description: 'Użytkownik publikuje wiele identycznych ogłoszeń lub spamuje.' },
    { id: 'other', icon: 'dots', title: 'Inny powód', description: 'Coś innego, o czym naszym zdaniem powinniśmy wiedzieć.' },
  ] as const;

  const [query, setQuery] = useState('');
  const [activeFilter, setActiveFilter] = useState<ThreadFilter>('all');
  const [isFiltersOpen, setIsFiltersOpen] = useState(false);
  const [composerValue, setComposerValue] = useState('');
  // Propozycja ogladania z poziomu rozmowy - termin trafia do kalendarza obu stron.
  const meetingToday = new Date().toISOString().slice(0, 10);
  const [meetingFormOpen, setMeetingFormOpen] = useState(false);
  const [meetingForm, setMeetingForm] = useState({ date: meetingToday, start: '17:00', end: '17:30', location: '' });
  const [meetingFeedback, setMeetingFeedback] = useState('');
  const [meetingError, setMeetingError] = useState('');
  const [meetingBusy, setMeetingBusy] = useState(false);
  const [isSending, setIsSending] = useState(false);
  const [moderationFeedback, setModerationFeedback] = useState('');
  const [isBlockModalOpen, setIsBlockModalOpen] = useState(false);
  // Pytanie o numer telefonu przed wyslaniem wizytowki z konta, ktore go nie ma.
  const [isPhonePromptOpen, setIsPhonePromptOpen] = useState(false);
  const [phonePromptDigits, setPhonePromptDigits] = useState('');
  const [phonePromptError, setPhonePromptError] = useState('');
  const [isSavingPhonePrompt, setIsSavingPhonePrompt] = useState(false);
  const [isDeleteChatModalOpen, setIsDeleteChatModalOpen] = useState(false);
  const [isReportModalOpen, setIsReportModalOpen] = useState(false);
  const [reportStep, setReportStep] = useState<ReportStep>(1);
  const [selectedReportReason, setSelectedReportReason] = useState<string>(reportReasons[0].id);
  const [reportDetails, setReportDetails] = useState('');
  const [reportAttachments, setReportAttachments] = useState<File[]>([]);
  const [reportAttachmentError, setReportAttachmentError] = useState('');
  const [reportCaseNumber, setReportCaseNumber] = useState('');
  const [reportSubmittedAt, setReportSubmittedAt] = useState('');
  const [reportSubmittedReasonTitle, setReportSubmittedReasonTitle] = useState('');
  const [isSubmittingReport, setIsSubmittingReport] = useState(false);
  const [reportSubmitError, setReportSubmitError] = useState('');
  const [threads, setThreads] = useState<ChatThread[]>([]);
  // Lista rozmow wczytana choc raz - do tego czasu nie wiemy, czy szkic ma juz swoja rozmowe.
  const [conversationsLoaded, setConversationsLoaded] = useState(false);
  const reportAttachmentInputRef = useRef<HTMLInputElement | null>(null);
  const { user, updateProfile } = useAuth();
  const ADMIN_THREAD_ID = 'admin-support';

  const routeThreadId = newListingParam
    ? `draft-${newListingParam}`
    : conversationParam === ADMIN_CONVERSATION_SLUG
      ? ADMIN_THREAD_ID
      : conversationParam ? `conv-${conversationParam}` : '';

  const threadPath = (thread: ChatThread) => {
    if (thread.id === ADMIN_THREAD_ID) {
      return conversationPath(ADMIN_CONVERSATION_SLUG);
    }
    if (thread.conversationId) {
      return conversationPath(thread.conversationId);
    }
    return thread.draftListingId ? newConversationPath(thread.draftListingId) : ROUTES.messages;
  };

  // Stan rozmowy z serwera -> watek w widoku. Wstawia go, jesli nie bylo go jeszcze na liscie.
  const applyConversationDetail = useCallback((detail: ApiConversationDetail) => {
    setThreads((current) => {
      const id = `conv-${detail.id}`;
      const messages: ChatMessage[] = detail.messages.map((message) => {
        const sentAt = new Date(message.createdAt).getTime();
        return {
          id: `conv-msg-${message.id}`,
          ...chatContentParts(message.content),
          time: chatTimeLabel(new Date(sentAt)),
          mine: message.mine,
          sentAt,
          readByRecipient: message.mine ? message.read : undefined,
        };
      });
      const last = messages[messages.length - 1];
      const thread: ChatThread = {
        ...conversationThreadBase(detail),
        messages,
        summary: { preview: last?.text ?? '', lastAt: last?.sentAt ?? 0, unread: 0 },
        blocked: detail.blocked,
        blockedByMe: detail.blockedByMe,
      };
      return current.some((item) => item.id === id)
        ? current.map((item) => (item.id === id ? thread : item))
        : [...current, thread];
    });
  }, []);

  const routeThreadIdRef = useRef(routeThreadId);
  routeThreadIdRef.current = routeThreadId;

  // Lista rozmow o ogloszeniach - odswiezana co 30 s, jak w Gieldzie Komunalnej.
  const loadConversations = useCallback(() => (
    apiFetch<ApiConversationSummary[]>('/conversations')
      .then((summaries) => {
        setThreads((current) => {
          const listed = summaries.map((summary): ChatThread => {
            const existing = current.find((item) => item.id === `conv-${summary.id}`);
            return {
              ...conversationThreadBase(summary),
              messages: existing?.messages ?? [],
              summary: {
                preview: summary.lastMessage,
                lastAt: new Date(summary.lastMessageAt).getTime(),
                unread: summary.unreadCount,
              },
              blocked: existing?.blocked,
              blockedByMe: existing?.blockedByMe,
            };
          });
          const listedIds = new Set(listed.map((item) => item.id));
          // Watek administracji i szkice nie pochodza z tej listy - zostaja bez zmian. Otwarta
          // rozmowa, ktorej nie ma na liscie (ukryta u siebie), zostaje do czasu opuszczenia jej adresu.
          const kept = current.filter((item) => !item.conversationId
            || (!listedIds.has(item.id) && item.id === routeThreadIdRef.current));
          return [...kept, ...listed];
        });
        setConversationsLoaded(true);
      })
      .catch(() => setConversationsLoaded(true))
  ), []);

  useEffect(() => {
    if (!user) {
      return;
    }
    void loadConversations();
    const intervalId = window.setInterval(() => { void loadConversations(); }, 30000);
    return () => window.clearInterval(intervalId);
  }, [user, loadConversations]);

  // Otwarta rozmowa: odswiezanie co 4 s. Pobranie oznacza wiadomosci od rozmowcy jako przeczytane.
  useEffect(() => {
    if (!user || !conversationParam || conversationParam === ADMIN_CONVERSATION_SLUG) {
      return;
    }
    const id = Number(conversationParam);
    if (!Number.isFinite(id) || id <= 0) {
      navigate(ROUTES.messages, { replace: true });
      return;
    }
    let cancelled = false;
    const loadDetail = () => {
      apiFetch<ApiConversationDetail>(`/conversations/${id}`)
        .then((detail) => {
          if (!cancelled) {
            applyConversationDetail(detail);
          }
        })
        .catch((error) => {
          const status = (error as { status?: number }).status;
          if (!cancelled && (status === 403 || status === 404)) {
            setThreads((current) => current.filter((item) => item.id !== `conv-${id}`));
            navigate(ROUTES.messages, { replace: true });
          }
        });
    };
    loadDetail();
    const intervalId = window.setInterval(loadDetail, 4000);
    return () => {
      cancelled = true;
      window.clearInterval(intervalId);
    };
  }, [user, conversationParam, applyConversationDetail, navigate]);

  // Szkic rozmowy z ogloszenia. Gdy kupujacy juz pisal w tej sprawie - przechodzimy do tamtej rozmowy.
  useEffect(() => {
    if (!user || !newListingParam || !conversationsLoaded) {
      return;
    }
    const listingId = Number(newListingParam);
    const existing = threads.find((item) => item.conversationId && item.listing?.listingId === listingId && !item.selling);
    if (existing?.conversationId) {
      navigate(conversationPath(existing.conversationId), { replace: true });
      return;
    }
    if (threads.some((item) => item.id === `draft-${listingId}`)) {
      return;
    }
    let cancelled = false;
    apiFetch<ApiListingDetail>(`/listings/${listingId}`)
      .then((listing) => {
        if (cancelled) {
          return;
        }
        const target = buildMessageThreadTargetFromListing(listing, user);
        setThreads((current) => (current.some((item) => item.id === `draft-${listingId}`) ? current : [...current, {
          id: `draft-${listingId}`,
          draftListingId: listingId,
          name: target.name,
          avatarImage: target.listing.thumbnail || heroImage,
          status: target.status,
          contactUserId: target.contactUserId,
          listing: target.listing,
          messages: [],
        }]));
      })
      .catch(() => {
        if (!cancelled) {
          navigate(ROUTES.messages, { replace: true });
        }
      });
    return () => {
      cancelled = true;
    };
  }, [user, newListingParam, conversationsLoaded, threads, navigate]);

  useEffect(() => {
    if (!user || user.role === 'ADMIN') {
      return;
    }

    let cancelled = false;

    const loadAdminThread = () => {
      apiFetch<{ id: number; senderId: number; recipientId: number; content: string; createdAt: string; mine: boolean }[]>('/messages/admin')
        .then((data) => {
          if (cancelled) {
            return;
          }

          const messages: ChatMessage[] = data.map((item) => ({
            id: `admin-msg-${item.id}`,
            ...chatContentParts(item.content),
            time: chatTimeLabel(new Date(item.createdAt)),
            mine: item.mine,
            sentAt: new Date(item.createdAt).getTime(),
          }));

          setThreads((current) => {
            const existingAdminThread = current.find((thread) => thread.id === ADMIN_THREAD_ID);
            const adminThread: ChatThread = {
              id: ADMIN_THREAD_ID,
              name: 'Administracja Polska Lokalnie',
              avatarImage: heroImage,
              status: 'Oficjalny kontakt z zespołem serwisu Polska Lokalnie',
              listing: existingAdminThread?.listing ?? null,
              messages,
            };
            if (!existingAdminThread) {
              return [adminThread, ...current];
            }
            return current.map((thread) => (thread.id === ADMIN_THREAD_ID ? adminThread : thread));
          });
        })
        .catch(() => {
          // Brak polaczenia z API - watek administracji zostaje pominiety/nieodswiezony.
        });
    };

    loadAdminThread();
    const intervalId = window.setInterval(loadAdminThread, 5000);

    return () => {
      cancelled = true;
      window.clearInterval(intervalId);
    };
  }, [user]);

  const threadItems = useMemo(() => threads.map((thread) => {
    const lastMessage = thread.messages[thread.messages.length - 1];
    // Przed wczytaniem wiadomosci watku korzystamy ze skrotu z listy rozmow.
    const lastActivityAt = lastMessage?.sentAt ?? thread.summary?.lastAt ?? 0;
    const unreadCount = thread.summary
      ? thread.summary.unread
      : thread.messages.filter((message) => !message.mine && message.unread).length;

    return {
      ...thread,
      preview: lastMessage?.text ?? thread.summary?.preview ?? '',
      time: lastActivityAt > 0 ? chatTimeLabel(new Date(lastActivityAt)) : '',
      lastActivityAt,
      unreadCount,
    };
  }), [threads]);

  const filteredThreads = threadItems.filter((thread) => {
    const value = `${thread.name} ${thread.preview}`.toLowerCase();
    const queryMatch = value.includes(query.trim().toLowerCase());
    if (!queryMatch) {
      return false;
    }
    if (activeFilter === 'unread') {
      return thread.unreadCount > 0;
    }
    if (activeFilter === 'read') {
      return thread.unreadCount === 0;
    }
    return true;
  }).sort((left, right) => right.lastActivityAt - left.lastActivityAt);

  const unreadThreadsCount = threadItems.filter((thread) => thread.unreadCount > 0).length;
  const readThreadsCount = threadItems.length - unreadThreadsCount;

  useEffect(() => {
    if (!moderationFeedback) {
      return;
    }

    const timeoutId = window.setTimeout(() => {
      setModerationFeedback('');
    }, 5000);

    return () => {
      window.clearTimeout(timeoutId);
    };
  }, [moderationFeedback]);

  // Bez rozmowy w adresie pokazujemy najnowsza z listy.
  const activeThread = routeThreadId
    ? threadItems.find((thread) => thread.id === routeThreadId)
    : [...threadItems].sort((left, right) => right.lastActivityAt - left.lastActivityAt)[0] as (typeof threadItems)[number] | undefined;

  if (!activeThread) {
    return (
      <section className="messages-page" aria-label="Wiadomości użytkownika">
        <div className="messages-shell">
          <div className="messages-header">
            <div className="messages-breadcrumb" aria-label="Nawigacja wiadomości">
              <Link to={ROUTES.account}>Panel główny</Link>
              <Icon name="chevron" />
              <Link className="active" to={ROUTES.messages}>Wiadomości</Link>
            </div>
            <h1>Wiadomości</h1>
          </div>
          <div className="listings-empty">
            {routeThreadId || !conversationsLoaded ? (
              <strong>Wczytywanie rozmowy…</strong>
            ) : (
              <>
                <strong>Nie masz jeszcze żadnych wiadomości.</strong>
                <small>Napisz do sprzedającego ze strony ogłoszenia.</small>
              </>
            )}
          </div>
        </div>
      </section>
    );
  }

  const activeThreadMessages = threads.find((thread) => thread.id === activeThread.id)?.messages ?? [];
  const activeThreadListing = activeThread.listing;
  const activeThreadListingFloor = activeThreadListing ? listingFloorText(activeThreadListing.floor, activeThreadListing.buildingFloors) : null;
  const activeThreadListingLocation = activeThreadListing
    ? [activeThreadListing.city, activeThreadListing.district].filter(Boolean).join(', ')
    : '';
  const activeThreadListingSpecs = activeThreadListing
    ? `${formatArea(activeThreadListing.area)} • ${listingRoomsText(activeThreadListing.rooms)}${activeThreadListingFloor ? ` • ${activeThreadListingFloor} piętro` : ''}`
    : '';
  const isAdminThread = activeThread.id === ADMIN_THREAD_ID;
  const isActiveThreadBlocked = Boolean(activeThread.blocked);
  const selectedReportReasonDetails = reportReasons.find((reason) => reason.id === selectedReportReason);
  const isOtherReasonSelected = selectedReportReason === 'other';
  const normalizedReportDetails = reportDetails.trim();
  const needsMoreDetails = isOtherReasonSelected && normalizedReportDetails.length < 10;
  const canSubmitReport = !isSubmittingReport && !reportAttachmentError && !needsMoreDetails;

  // Wiadomosci oznacza jako przeczytane serwer, gdy rozmowa zostanie otwarta pod swoim adresem.
  const openThread = (thread: ChatThread) => {
    navigate(threadPath(thread));
  };

  const nowTimeLabel = () => {
    const now = new Date();
    return now.toLocaleTimeString('pl-PL', { hour: '2-digit', minute: '2-digit' });
  };

  const sendAdminMessage = async (value: string) => {
    const tempId = `admin-temp-${Date.now()}`;
    const sentAt = Date.now();

    setThreads((current) => current.map((thread) => (
      thread.id === ADMIN_THREAD_ID
        ? { ...thread, messages: [...thread.messages, { id: tempId, ...chatContentParts(value), time: nowTimeLabel(), mine: true, sentAt, readByRecipient: true }] }
        : thread
    )));

    try {
      const sent = await apiFetch<{ id: number; content: string; createdAt: string; mine: boolean }>('/messages/admin', {
        method: 'POST',
        body: JSON.stringify({ content: value }),
      });

      setThreads((current) => current.map((thread) => (
        thread.id === ADMIN_THREAD_ID
          ? {
              ...thread,
              messages: thread.messages.map((message) => (
                message.id === tempId
                  ? { id: `admin-msg-${sent.id}`, ...chatContentParts(sent.content), time: nowTimeLabel(), mine: true, sentAt: new Date(sent.createdAt).getTime(), readByRecipient: true }
                  : message
              )),
            }
          : thread
      )));
    } catch (error) {
      setThreads((current) => current.map((thread) => (
        thread.id === ADMIN_THREAD_ID
          ? { ...thread, messages: thread.messages.filter((message) => message.id !== tempId) }
          : thread
      )));
      setModerationFeedback(error instanceof Error ? error.message : 'Nie udało się wysłać wiadomości. Spróbuj ponownie.');
    }
  };

  // Wysylka do otwartej rozmowy o ogloszeniu. Szkic zaklada rozmowe na serwerze pierwsza wiadomoscia
  // i przechodzi pod jej adres. Filtr slow i blokady sprawdza serwer - blad pokazujemy pod polem.
  const postToActiveThread = async (content: string) => {
    if (isAdminThread) {
      await sendAdminMessage(content);
      return;
    }
    setIsSending(true);
    try {
      if (activeThread.conversationId) {
        applyConversationDetail(await apiFetch<ApiConversationDetail>(`/conversations/${activeThread.conversationId}/messages`, {
          method: 'POST',
          body: JSON.stringify({ content }),
        }));
      } else if (activeThread.draftListingId) {
        const detail = await apiFetch<ApiConversationDetail>('/conversations', {
          method: 'POST',
          body: JSON.stringify({ listingId: activeThread.draftListingId, content }),
        });
        applyConversationDetail(detail);
        setThreads((current) => current.filter((thread) => thread.id !== activeThread.id));
        navigate(conversationPath(detail.id), { replace: true });
      }
      setComposerValue('');
    } catch (error) {
      setModerationFeedback(error instanceof Error ? error.message : 'Nie udało się wysłać wiadomości. Spróbuj ponownie.');
    } finally {
      setIsSending(false);
    }
  };

  // Wizytowka zawsze z aktualnego profilu konta. Telefon trafia do niej tylko wtedy,
  // gdy uzytkownik go poda - inaczej wysylamy sam adres e-mail.
  const myBusinessCard: BusinessCard | null = user
    ? { fullName: user.fullName, email: user.email, phone: user.phone, isCompany: user.accountType === 'COMPANY' }
    : null;

  const sendMessage = () => {
    if (isActiveThreadBlocked || isSending) {
      return;
    }
    const value = composerValue.trim();
    if (!value) {
      return;
    }
    void postToActiveThread(value);
  };

  // Propozycja terminu: zapisuje sie w kalendarzu obu stron i zostawia wpis w watku rozmowy.
  const proposeMeeting = () => {
    const conversationId = activeThread.conversationId;
    if (!conversationId || meetingBusy) {
      return;
    }
    if (meetingForm.end <= meetingForm.start) {
      setMeetingError('Godzina zakończenia musi być późniejsza niż rozpoczęcia.');
      return;
    }
    setMeetingBusy(true);
    setMeetingError('');
    apiFetch<ApiMeeting>('/meetings', {
      method: 'POST',
      body: JSON.stringify({
        conversationId,
        title: activeThreadListing?.title ? `Oglądanie: ${activeThreadListing.title}` : 'Oglądanie nieruchomości',
        location: meetingForm.location.trim(),
        date: meetingForm.date,
        start: meetingForm.start,
        end: meetingForm.end,
      }),
    })
      .then(() => apiFetch<ApiConversationDetail>(`/conversations/${conversationId}`))
      .then((detail) => {
        applyConversationDetail(detail);
        setMeetingFormOpen(false);
        setMeetingFeedback('Propozycja wysłana. Czekasz na potwierdzenie drugiej strony.');
      })
      .catch((error: Error) => setMeetingError(error.message || 'Nie udało się wysłać propozycji.'))
      .finally(() => setMeetingBusy(false));
  };

  // Wizytowka to zwykla wiadomosc tekstowa ze znacznikiem - zostaje w historii rozmowy na serwerze.
  const deliverBusinessCard = (card: BusinessCard) => {
    void postToActiveThread(formatBusinessCard(card));
  };

  const sendBusinessCard = () => {
    if (isActiveThreadBlocked) {
      setModerationFeedback('Ten użytkownik jest zablokowany. Odblokuj go, aby ponownie pisać wiadomości.');
      return;
    }

    if (!myBusinessCard) {
      setModerationFeedback('Zaloguj się, aby wysłać wizytówkę z danymi swojego konta.');
      return;
    }

    // Konto bez numeru telefonu: pytamy, czy dopisac numer, czy wyslac sam adres e-mail.
    if (!myBusinessCard.phone) {
      setPhonePromptDigits('');
      setPhonePromptError('');
      setIsPhonePromptOpen(true);
      return;
    }

    deliverBusinessCard(myBusinessCard);
  };

  const closePhonePrompt = () => {
    if (isSavingPhonePrompt) {
      return;
    }
    setIsPhonePromptOpen(false);
  };

  const sendBusinessCardWithoutPhone = () => {
    if (!myBusinessCard) {
      return;
    }
    setIsPhonePromptOpen(false);
    deliverBusinessCard(myBusinessCard);
  };

  // Numer trafia na konto (PUT /auth/me), a nie tylko do tej jednej wiadomosci - kolejna
  // wizytowka wyjdzie juz z telefonem bez pytania.
  const savePhoneAndSendBusinessCard = async () => {
    if (!user || !myBusinessCard) {
      return;
    }
    if (phonePromptDigits.length !== BUSINESS_CARD_PHONE_DIGITS) {
      setPhonePromptError(`Numer telefonu musi mieć ${BUSINESS_CARD_PHONE_DIGITS} cyfr.`);
      return;
    }

    const phone = `${BUSINESS_CARD_PHONE_PREFIX} ${phonePromptDigits}`;
    setIsSavingPhonePrompt(true);
    setPhonePromptError('');

    try {
      // Pozostale pola profilu przekazujemy bez zmian - PUT /auth/me nadpisuje caly profil.
      const updated = await updateProfile({
        fullName: user.fullName,
        phone,
        birthDate: user.birthDate ?? undefined,
        address: user.address ?? undefined,
        contactPreference: user.contactPreference,
        preferredLanguage: user.preferredLanguage,
      });

      setIsPhonePromptOpen(false);
      deliverBusinessCard({ fullName: updated.fullName, email: updated.email, phone: updated.phone, isCompany: user.accountType === 'COMPANY' });
    } catch (error) {
      setPhonePromptError(error instanceof Error ? error.message : 'Nie udało się zapisać numeru telefonu.');
    } finally {
      setIsSavingPhonePrompt(false);
    }
  };

  const applyFilter = (filter: ThreadFilter) => {
    setActiveFilter(filter);
    setIsFiltersOpen(false);
  };

  const openBlockModal = () => {
    setIsBlockModalOpen(true);
  };

  const closeBlockModal = () => {
    setIsBlockModalOpen(false);
  };

  const openDeleteChatModal = () => {
    setIsDeleteChatModalOpen(true);
  };

  const closeDeleteChatModal = () => {
    setIsDeleteChatModalOpen(false);
  };

  // Blokada dziala na serwerze w obu kierunkach; odblokowac moze tylko ten, kto zablokowal.
  const confirmToggleBlockUser = async () => {
    const conversationId = activeThread.conversationId;
    if (!conversationId) {
      setIsBlockModalOpen(false);
      return;
    }
    const unblocking = Boolean(activeThread.blockedByMe);
    try {
      await apiFetch<void>(`/conversations/${conversationId}/block`, { method: unblocking ? 'DELETE' : 'POST' });
      applyConversationDetail(await apiFetch<ApiConversationDetail>(`/conversations/${conversationId}`));
      if (!unblocking) {
        setComposerValue('');
      }
      setModerationFeedback(`Użytkownik ${activeThread.name} został ${unblocking ? 'odblokowany' : 'zablokowany'}.`);
    } catch (error) {
      setModerationFeedback(error instanceof Error ? error.message : 'Nie udało się zmienić blokady.');
    } finally {
      setIsBlockModalOpen(false);
    }
  };

  // Rozmowa znika tylko z mojej listy - nowa wiadomosc przywroci ja obu stronom.
  const confirmDeleteChat = async () => {
    const removedThreadName = activeThread.name;
    try {
      if (activeThread.conversationId) {
        await apiFetch<void>(`/conversations/${activeThread.conversationId}`, { method: 'DELETE' });
      }
      setThreads((current) => current.filter((thread) => thread.id !== activeThread.id));
      setComposerValue('');
      setModerationFeedback(`Czat z użytkownikiem ${removedThreadName} został usunięty.`);
      navigate(ROUTES.messages, { replace: true });
    } catch (error) {
      setModerationFeedback(error instanceof Error ? error.message : 'Nie udało się usunąć czatu.');
    } finally {
      setIsDeleteChatModalOpen(false);
    }
  };

  const openReportModal = () => {
    setReportStep(1);
    setSelectedReportReason(reportReasons[0].id);
    setReportDetails('');
    setReportAttachments([]);
    setReportAttachmentError('');
    setReportCaseNumber('');
    setReportSubmittedAt('');
    setReportSubmittedReasonTitle('');
    setIsSubmittingReport(false);
    setReportSubmitError('');
    setIsReportModalOpen(true);
  };

  const closeReportModal = () => {
    setReportStep(1);
    setSelectedReportReason(reportReasons[0].id);
    setReportDetails('');
    setReportAttachments([]);
    setReportAttachmentError('');
    setReportCaseNumber('');
    setReportSubmittedAt('');
    setReportSubmittedReasonTitle('');
    setIsSubmittingReport(false);
    setReportSubmitError('');
    setIsReportModalOpen(false);
  };

  const onChooseReportAttachments = () => {
    reportAttachmentInputRef.current?.click();
  };

  const onReportAttachmentsSelected = (event: ReactChangeEvent<HTMLInputElement>) => {
    const files = Array.from(event.target.files ?? []);
    event.target.value = '';

    if (files.length === 0) {
      return;
    }

    setReportSubmitError('');

    const allowedMimeTypes = new Set(['image/png', 'image/jpeg', 'application/pdf']);
    const allowedExtensions = ['.png', '.jpg', '.jpeg', '.pdf'];
    const maxFileSize = 10 * 1024 * 1024;
    const maxFiles = 5;

    const nextFiles = [...reportAttachments];
    let firstError = '';

    files.forEach((file) => {
      if (nextFiles.length >= maxFiles) {
        if (!firstError) {
          firstError = 'Możesz dodać maksymalnie 5 plików.';
        }
        return;
      }

      const fileName = file.name.toLowerCase();
      const hasAllowedExtension = allowedExtensions.some((extension) => fileName.endsWith(extension));
      const hasAllowedMime = allowedMimeTypes.has(file.type);

      if (!hasAllowedExtension && !hasAllowedMime) {
        if (!firstError) {
          firstError = 'Dozwolone formaty plików: PNG, JPG, PDF.';
        }
        return;
      }

      if (file.size > maxFileSize) {
        if (!firstError) {
          firstError = 'Maksymalny rozmiar pojedynczego pliku to 10 MB.';
        }
        return;
      }

      const alreadyAdded = nextFiles.some((addedFile) => (
        addedFile.name === file.name
        && addedFile.size === file.size
        && addedFile.lastModified === file.lastModified
      ));

      if (!alreadyAdded) {
        nextFiles.push(file);
      }
    });

    setReportAttachments(nextFiles);
    setReportAttachmentError(firstError);
  };

  const removeReportAttachment = (index: number) => {
    setReportAttachments((current) => current.filter((_, fileIndex) => fileIndex !== index));
    setReportAttachmentError('');
    setReportSubmitError('');
  };

  const submitReport = async () => {
    if (!canSubmitReport) {
      return;
    }

    if (!selectedReportReasonDetails) {
      setReportSubmitError('Wybierz powód zgłoszenia.');
      return;
    }

    if (needsMoreDetails) {
      setReportSubmitError('Dla opcji „Inny powód” podaj minimum 10 znaków opisu.');
      return;
    }

    setReportSubmitError('');
    setIsSubmittingReport(true);

    try {
      // Podglad zapisujemy tylko dla obrazow - typ rozpoznajemy tak samo jak przy zgloszeniu
      // ogloszenia (MIME albo rozszerzenie, bo nie kazda przegladarka ustawia typ pliku).
      const attachmentFiles = await Promise.all(reportAttachments.map(async (file) => {
        const lowerName = file.name.toLowerCase();
        const isImage = file.type.toLowerCase().startsWith('image/')
          || lowerName.endsWith('.png') || lowerName.endsWith('.jpg')
          || lowerName.endsWith('.jpeg') || lowerName.endsWith('.webp');
        return {
          fileName: file.name,
          fileType: file.type || null,
          dataUrl: isImage ? await readFileAsDataUrl(file) : null,
        };
      }));

      // Zgloszenie trafia do panelu administratora (/admin/zgloszenia) - numer sprawy
      // i date bierzemy z odpowiedzi serwera, zeby zgadzaly sie z tym, co widzi obsluga.
      const submitted = await apiFetch<{ id: number; createdAt: string; reasonTitle: string }>('/reports/users', {
        method: 'POST',
        body: JSON.stringify({
          reportedName: activeThread.name,
          // Zgloszonego, ogloszenie i tresc rozmowy serwer ustala sam na podstawie numeru rozmowy.
          reportedEmail: null,
          conversationId: activeThread.conversationId ? String(activeThread.conversationId) : activeThread.id,
          // Ogloszenie, w sprawie ktorego toczyla sie rozmowa - obsluga widzi kontekst zgloszenia.
          listingId: activeThreadListing?.listingId ?? null,
          listingTitle: activeThreadListing?.title ?? null,
          reasonId: selectedReportReason,
          reasonTitle: selectedReportReasonDetails.title,
          details: normalizedReportDetails || null,
          attachmentNames: reportAttachments.map((file) => file.name),
          attachmentFiles,
          // Migawka rozmowy dolaczona do zgloszenia - dowod dla obslugi (serwer bierze ostatnie 50).
          conversation: activeThreadMessages.map((message) => ({
            fromReporter: message.mine,
            content: message.text,
            sentAt: new Date(message.sentAt).toISOString(),
            hasPhoto: false,
          })),
        }),
      });

      setReportCaseNumber(String(submitted.id).padStart(6, '0'));
      setReportSubmittedReasonTitle(submitted.reasonTitle);
      setReportSubmittedAt(new Date(submitted.createdAt).toLocaleString('pl-PL', {
        day: 'numeric',
        month: 'long',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
      }));
      setReportStep(3);
    } catch (error) {
      setReportSubmitError(error instanceof Error ? error.message : 'Nie udało się wysłać zgłoszenia. Spróbuj ponownie.');
    } finally {
      setIsSubmittingReport(false);
    }
  };

  return (
    <section className="messages-page" aria-label="Wiadomości użytkownika">
      <div className="messages-shell">
        <div className="messages-header">
          <div className="messages-breadcrumb" aria-label="Nawigacja wiadomości">
            <Link to={ROUTES.account}>Panel główny</Link>
            <Icon name="chevron" />
            <Link className="active" to={ROUTES.messages}>Wiadomości</Link>
          </div>
          <h1>Wiadomości</h1>
        </div>

        <div className="messages-grid">
          <aside className="messages-threads">
            <div className="messages-search-row">
              <label className="messages-search-input">
                <input
                  type="text"
                  value={query}
                  onChange={(event) => setQuery(event.target.value)}
                  placeholder="Szukaj w wiadomościach..."
                />
                <Icon name="search" />
              </label>
              <button
                type="button"
                className={isFiltersOpen ? 'active' : ''}
                aria-label="Opcje listy wiadomości"
                aria-expanded={isFiltersOpen}
                onClick={() => setIsFiltersOpen((current) => !current)}
              >
                <Icon name="list" />
              </button>
            </div>

            <div className={isFiltersOpen ? 'messages-filters open' : 'messages-filters'} role="tablist" aria-label="Filtr konwersacji">
              <button type="button" role="tab" aria-selected={activeFilter === 'all'} className={activeFilter === 'all' ? 'active' : ''} onClick={() => applyFilter('all')}>Wszystkie <span>{threadItems.length}</span></button>
              <button type="button" role="tab" aria-selected={activeFilter === 'unread'} className={activeFilter === 'unread' ? 'active' : ''} onClick={() => applyFilter('unread')}>Nieodczytane <span>{unreadThreadsCount}</span></button>
              <button type="button" role="tab" aria-selected={activeFilter === 'read'} className={activeFilter === 'read' ? 'active' : ''} onClick={() => applyFilter('read')}>Odczytane <span>{readThreadsCount}</span></button>
            </div>

            <div className="messages-thread-list">
              {filteredThreads.length === 0 && <p className="messages-empty-list">Brak rozmów dla wybranego filtra.</p>}
              {filteredThreads.map((thread) => (
                <button
                  type="button"
                  key={thread.id}
                  className={thread.id === activeThread.id ? 'active' : ''}
                  onClick={() => openThread(thread)}
                >
                  <span className="messages-thread-avatar" style={{ backgroundImage: `url(${thread.avatarImage})` }} aria-hidden="true" />
                  <span className="messages-thread-copy">
                    <strong>{thread.name}</strong>
                    {/* Czego dotyczy rozmowa - widac od razu, bez wchodzenia w watek. */}
                    {thread.listing && (
                      <span className="messages-thread-offer" title={`${thread.listing.title} • ${formatPrice(thread.listing.price)}`}>
                        {/* Miniatura ogloszenia jest juz awatarem watku - tu sam tytul i cena. */}
                        <em>{thread.listing.title}</em>
                        <b>{formatPrice(thread.listing.price)}</b>
                      </span>
                    )}
                    <small>{thread.preview}</small>
                  </span>
                  <span className="messages-thread-meta">
                    <em>{thread.time}</em>
                    {thread.unreadCount > 0 && <i>{thread.unreadCount}</i>}
                  </span>
                </button>
              ))}
            </div>
          </aside>

          <section className="messages-chat" aria-label="Okno rozmowy">
            <header className="messages-chat-head">
              <div className="messages-chat-user">
                <span style={{ backgroundImage: `url(${activeThread.avatarImage})` }} aria-hidden="true" />
                <div>
                  {/* Nazwa prowadzi do profilu rozmowcy - tylko gdy rozmowa dotyczy realnego konta. */}
                  {activeThread.contactUserId ? (
                    <Link className="messages-chat-profile-link" to={publicProfilePath(activeThread.contactUserId)}>
                      {activeThread.name}
                    </Link>
                  ) : (
                    <strong>{activeThread.name}</strong>
                  )}
                  {activeThread.status && (
                    <small><span className="messages-chat-status-sep" aria-hidden="true"> - </span>{activeThread.status}</small>
                  )}
                </div>
              </div>
              <div className="messages-chat-listing">
                <img src={activeThreadListing?.thumbnail || heroImage} alt="Miniatura ogłoszenia" />
                <div>
                  <strong>{activeThreadListing?.title || 'Czat użytkownika'}</strong>
                  <small>{activeThreadListing ? formatPrice(activeThreadListing.price) : 'Brak powiązanego ogłoszenia'}</small>
                </div>
              </div>
            </header>

            <div className="messages-bubbles">
              {activeThreadMessages.map((message) => (
                <div key={message.id} className={message.mine ? 'message-row mine' : 'message-row'}>
                  {!message.mine && <span className="message-avatar" style={{ backgroundImage: `url(${activeThread.avatarImage})` }} aria-hidden="true" />}
                  <article>
                    {message.businessCard && (
                      <div className="message-business-card" role="group" aria-label="Wizytówka kontaktowa">
                        <div className="message-business-card-top">
                          <span className="message-business-card-badge"><Icon name={message.businessCard.isCompany ? 'building' : 'user'} /></span>
                          <div>
                            <em>Wizytówka kontaktowa</em>
                            <strong>{message.businessCard.fullName}</strong>
                            {message.businessCard.isCompany && <small className="message-business-card-type">Firma</small>}
                          </div>
                        </div>
                        <div className="message-business-card-grid">
                          {message.businessCard.phone && (
                            <a href={`tel:${message.businessCard.phone.replace(/\s+/g, '')}`} aria-label={`Zadzwoń: ${message.businessCard.phone}`}>
                              <Icon name="phone" />
                              <span>{message.businessCard.phone}</span>
                            </a>
                          )}
                          <a href={`mailto:${message.businessCard.email}`} aria-label={`Wyślij e-mail: ${message.businessCard.email}`}>
                            <Icon name="mail" />
                            <span>{message.businessCard.email}</span>
                          </a>
                        </div>
                      </div>
                    )}
                    {message.text && <p>{message.text}</p>}
                    <small className={message.mine ? (message.readByRecipient ? 'message-meta read' : 'message-meta pending') : ''}>
                      {message.time}
                      {message.mine && (
                        <span className={message.readByRecipient ? 'message-checks read' : 'message-checks pending'} aria-label={message.readByRecipient ? 'Odczytano' : 'Wysłano'}>
                          <Icon name="check" />
                          {message.readByRecipient && <Icon name="check" />}
                        </span>
                      )}
                    </small>
                  </article>
                </div>
              ))}
            </div>

            <footer className="messages-composer">
              <button type="button" className="card-action" aria-label="Wyślij wizytówkę" onClick={sendBusinessCard} disabled={isActiveThreadBlocked || !myBusinessCard}>Wizytówka</button>
              <input
                type="text"
                value={composerValue}
                disabled={isActiveThreadBlocked}
                onChange={(event) => setComposerValue(event.target.value)}
                onKeyDown={(event) => {
                  if (event.key === 'Enter') {
                    event.preventDefault();
                    sendMessage();
                  }
                }}
                // Puste pole do pisania; podpowiedz zostaje tylko przy blokadzie, zeby bylo jasne, czemu nie da sie pisac.
                placeholder={isActiveThreadBlocked
                  ? (activeThread.blockedByMe ? 'Zablokowałeś tego użytkownika. Odblokuj go, aby pisać.' : 'Nie możesz pisać do tego użytkownika.')
                  : ''}
                aria-label={`Wiadomość do ${activeThread.name}`}
                maxLength={2000}
              />
              <button type="button" className="send" aria-label="Wyślij wiadomość" onClick={sendMessage} disabled={isActiveThreadBlocked || isSending}><Icon name="arrow" /></button>
            </footer>
            {moderationFeedback && <p className="messages-composer-note moderation">{moderationFeedback}</p>}
          </section>

          <aside className="messages-details">
            <h2>Szczegóły</h2>
            <article>
              <img src={activeThreadListing?.thumbnail || heroImage} alt="Podgląd ogłoszenia" />
              <div>
                <strong>{activeThreadListing?.title || 'Brak powiązanego ogłoszenia'}</strong>
                <em>{activeThreadListing ? formatPrice(activeThreadListing.price) : '-'}</em>
                <p>{activeThreadListingLocation || 'Szczegóły lokalizacji niedostępne'}</p>
                <small>{activeThreadListingSpecs || 'Brak szczegółów technicznych'}</small>
              </div>
            </article>
            <button
              type="button"
              onClick={() => {
                if (activeThreadListing) {
                  onOpenListing(activeThreadListing.listingId);
                }
              }}
              disabled={!activeThreadListing}
            ><span><Icon name="house" /> Zobacz ogłoszenie</span><Icon name="link" /></button>
            {/* Termin ogladania uzgadniamy w rozmowie - druga strona potwierdza go w swoim kalendarzu. */}
            {!isAdminThread && activeThread.conversationId && (
              <>
                <button type="button" onClick={() => { setMeetingFormOpen((open) => !open); setMeetingError(''); setMeetingFeedback(''); }}>
                  <span><Icon name="calendar" /> Zaproponuj oglądanie</span><Icon name="chevron" />
                </button>
                {meetingFormOpen && (
                  <div className="messages-meeting-form">
                    <label>Data<input type="date" min={meetingToday} value={meetingForm.date} onChange={(event) => setMeetingForm((current) => ({ ...current, date: event.target.value }))} /></label>
                    <div className="messages-meeting-times">
                      <label>Od<input type="time" value={meetingForm.start} onChange={(event) => setMeetingForm((current) => ({ ...current, start: event.target.value }))} /></label>
                      <label>Do<input type="time" value={meetingForm.end} onChange={(event) => setMeetingForm((current) => ({ ...current, end: event.target.value }))} /></label>
                    </div>
                    <label>Miejsce<input type="text" value={meetingForm.location} placeholder="Np. adres z ogłoszenia" onChange={(event) => setMeetingForm((current) => ({ ...current, location: event.target.value }))} /></label>
                    {meetingError && <p className="messages-meeting-error">{meetingError}</p>}
                    <button type="button" className="messages-meeting-send" disabled={meetingBusy} onClick={proposeMeeting}>Wyślij propozycję</button>
                    <small>Druga strona potwierdzi termin albo zaproponuje inny. Wszystkie terminy zobaczysz w <Link to={ROUTES.accountMeetings}>kalendarzu spotkań</Link>.</small>
                  </div>
                )}
                {meetingFeedback && <p className="messages-meeting-ok" role="status">{meetingFeedback}</p>}
              </>
            )}
            {/* Rozmowy z obsluga serwisu nie blokujemy, nie zglaszamy ani nie usuwamy. */}
            {!isAdminThread && (
              <>
                {activeThread.conversationId && (
                  <button type="button" onClick={openBlockModal}><span><Icon name="lock" /> {activeThread.blockedByMe ? 'Odblokuj użytkownika' : 'Zablokuj użytkownika'}</span></button>
                )}
                {activeThread.conversationId && (
                  <button type="button" onClick={openReportModal}><span><Icon name="warning" /> Zgłoś użytkownika</span></button>
                )}
                <button type="button" onClick={openDeleteChatModal}><span><Icon name="trash" /> Usuń czat</span></button>
              </>
            )}
            <div className="messages-safety-tip">
              <strong><Icon name="shield" /> Pamiętaj o bezpieczeństwie!</strong>
              <p>Nigdy nie podawaj swoich danych osobowych, numeru konta ani kodów BLIK na czacie.</p>
            </div>
          </aside>
        </div>

        {isDeleteChatModalOpen && (
          <div className="delete-chat-overlay" role="dialog" aria-modal="true" aria-label="Usuń czat">
            <div className="delete-chat-modal">
              <button type="button" className="delete-chat-close" onClick={closeDeleteChatModal}>×</button>
              <span className="delete-chat-badge" aria-hidden="true"><Icon name="trash" /></span>
              <h2>Usuń czat</h2>
              <p>Czy na pewno chcesz usunąć czat z użytkownikiem <strong>{activeThread.name}</strong>? Czat zniknie z Twojej listy - nowa wiadomość go przywróci.</p>
              <div className="delete-chat-actions">
                <button type="button" className="delete-chat-confirm" onClick={() => { void confirmDeleteChat(); }}>Tak, usuń</button>
                <button type="button" className="delete-chat-cancel" onClick={closeDeleteChatModal}>Anuluj</button>
              </div>
            </div>
          </div>
        )}

        {isBlockModalOpen && (
          <div className="block-user-overlay" role="dialog" aria-modal="true" aria-label={activeThread.blockedByMe ? 'Odblokuj użytkownika' : 'Zablokuj wszelką komunikację'}>
            <div className="block-user-modal">
              <button type="button" className="block-user-close" onClick={closeBlockModal}>×</button>
              <span className="block-user-badge" aria-hidden="true"><Icon name="lock" /></span>
              <h2>{activeThread.blockedByMe ? 'Odblokuj użytkownika' : 'Zablokuj wszelką komunikację'}</h2>
              <p>
                {activeThread.blockedByMe
                  ? <>Czy chcesz przywrócić możliwość komunikacji z użytkownikiem <strong>{activeThread.name}</strong>?</>
                  : <>Czy chcesz zablokować wszelką komunikację z użytkownikiem <strong>{activeThread.name}</strong>?</>}
              </p>
              <div className="block-user-actions">
                <button type="button" className="block-user-confirm" onClick={() => { void confirmToggleBlockUser(); }}>
                  {activeThread.blockedByMe ? 'Tak, odblokuj' : 'Tak, zablokuj'}
                </button>
                <button type="button" className="block-user-cancel" onClick={closeBlockModal}>Anuluj</button>
              </div>
            </div>
          </div>
        )}

        {isPhonePromptOpen && (
          <div className="card-phone-overlay" role="dialog" aria-modal="true" aria-labelledby="card-phone-title">
            <div className="card-phone-modal">
              <button type="button" className="card-phone-close" onClick={closePhonePrompt} disabled={isSavingPhonePrompt}>×</button>
              <span className="card-phone-badge" aria-hidden="true"><Icon name="phone" /></span>
              <h2 id="card-phone-title">Twoje konto nie ma numeru telefonu</h2>
              <p>
                Wizytówka wyjdzie z samym adresem <strong>{myBusinessCard?.email}</strong>. Możesz teraz dopisać numer –
                zapiszemy go w koncie, więc kolejne wizytówki wyślą się już z telefonem.
              </p>

              <label className="card-phone-field">
                <span>Numer telefonu</span>
                <div className="card-phone-input">
                  <em>{BUSINESS_CARD_PHONE_PREFIX}</em>
                  <input
                    type="tel"
                    inputMode="numeric"
                    autoFocus
                    value={formatPhoneDigits(phonePromptDigits)}
                    placeholder="500 100 200"
                    disabled={isSavingPhonePrompt}
                    aria-invalid={Boolean(phonePromptError)}
                    onChange={(event) => {
                      setPhonePromptDigits(event.target.value.replace(/\D/g, '').slice(0, BUSINESS_CARD_PHONE_DIGITS));
                      setPhonePromptError('');
                    }}
                    onKeyDown={(event) => {
                      if (event.key === 'Enter') {
                        event.preventDefault();
                        void savePhoneAndSendBusinessCard();
                      }
                    }}
                  />
                </div>
              </label>

              {phonePromptError && <p className="card-phone-error" role="alert">{phonePromptError}</p>}

              <p className="card-phone-hint">
                Masz numer zagraniczny? Wybierzesz kierunkowy w <Link to={ROUTES.accountSettings}>ustawieniach konta</Link>.
              </p>

              <div className="card-phone-actions">
                <button type="button" className="card-phone-confirm" onClick={() => { void savePhoneAndSendBusinessCard(); }} disabled={isSavingPhonePrompt}>
                  {isSavingPhonePrompt ? 'Zapisywanie…' : 'Zapisz numer i wyślij'}
                </button>
                <button type="button" className="card-phone-skip" onClick={sendBusinessCardWithoutPhone} disabled={isSavingPhonePrompt}>
                  Wyślij bez numeru
                </button>
              </div>
            </div>
          </div>
        )}

        {isReportModalOpen && (
          <div className="report-user-overlay" role="dialog" aria-modal="true" aria-label="Zgłoś użytkownika">
            <div className={reportStep === 3 ? 'report-user-modal step-3' : 'report-user-modal'}>
              <button type="button" className="report-user-close" onClick={closeReportModal} disabled={isSubmittingReport}>×</button>

              <h2>Zgłoś użytkownika</h2>

              {reportStep !== 3 && (
                <div className="report-user-progress" aria-label="Postęp zgłoszenia">
                  <span className={reportStep >= 1 ? 'report-user-progress-segment active' : 'report-user-progress-segment'} />
                  <span className={reportStep >= 2 ? 'report-user-progress-segment active' : 'report-user-progress-segment'} />
                  <span className={reportStep >= 3 ? 'report-user-progress-segment active' : 'report-user-progress-segment'} />
                </div>
              )}

              {reportStep === 1 && (
                <>
                  <h3>Dlaczego zgłaszasz tego użytkownika?</h3>
                  <p className="report-user-anon-note">Twoje zgłoszenie jest anonimowe. Dziękujemy za pomoc w utrzymaniu bezpiecznej społeczności.</p>

                  <div className="report-user-reasons" role="radiogroup" aria-label="Wybierz powód zgłoszenia">
                    {reportReasons.map((reason) => (
                      <button
                        type="button"
                        key={reason.id}
                        className={selectedReportReason === reason.id ? 'active' : ''}
                        role="radio"
                        aria-checked={selectedReportReason === reason.id}
                        onClick={() => {
                          setSelectedReportReason(reason.id);
                          setReportSubmitError('');
                        }}
                      >
                        <span className="report-user-reason-icon"><Icon name={reason.icon} /></span>
                        <span className="report-user-reason-copy">
                          <strong>{reason.title}</strong>
                          <small>{reason.description}</small>
                        </span>
                        <i />
                      </button>
                    ))}
                  </div>

                  <button type="button" className="report-user-primary" onClick={() => setReportStep(2)}>Dalej</button>
                </>
              )}

              {reportStep === 2 && (
                <>
                  <h3 className="report-user-step2-title">Podaj więcej szczegółów <em>(opcjonalnie)</em></h3>
                  <p className="report-user-step2-intro">Im więcej informacji przekażesz, tym łatwiej będzie nam rozpatrzyć zgłoszenie.</p>

                  <label className="report-user-field-label" htmlFor="report-details">Dodatkowe informacje</label>

                  <div className="report-user-textarea-wrap">
                    <textarea
                      id="report-details"
                      className="report-user-textarea"
                      placeholder="Opisz, co się stało..."
                      value={reportDetails}
                      onChange={(event) => {
                        setReportDetails(event.target.value);
                        setReportSubmitError('');
                      }}
                      maxLength={500}
                    />
                    <small>{reportDetails.length}/500</small>
                  </div>

                  {needsMoreDetails && <p className="report-user-error">Dla opcji „Inny powód” wpisz minimum 10 znaków opisu.</p>}

                  <label className="report-user-field-label">Dodaj zrzuty ekranu (opcjonalnie)</label>
                  <p className="report-user-upload-note">Możesz dodać maks. 5 plików</p>

                  <button type="button" className="report-user-upload" onClick={onChooseReportAttachments}>
                    <span><Icon name="document" /></span>
                    <strong>Kliknij lub przeciągnij pliki tutaj</strong>
                    <small>PNG, JPG, PDF do 10 MB</small>
                  </button>
                  <input
                    ref={reportAttachmentInputRef}
                    type="file"
                    accept=".png,.jpg,.jpeg,.pdf,image/png,image/jpeg,application/pdf"
                    multiple
                    onChange={onReportAttachmentsSelected}
                    hidden
                  />

                  {reportAttachments.length > 0 && (
                    <div className="report-user-files" aria-label="Dodane pliki">
                      {reportAttachments.map((file, index) => (
                        <p key={`${file.name}-${file.lastModified}`}>
                          <span>{file.name}</span>
                          <button type="button" onClick={() => removeReportAttachment(index)} aria-label={`Usuń plik ${file.name}`}>Usuń</button>
                        </p>
                      ))}
                    </div>
                  )}

                  {reportAttachmentError && <p className="report-user-error">{reportAttachmentError}</p>}
                  {reportSubmitError && <p className="report-user-error">{reportSubmitError}</p>}

                  <div className="report-user-actions">
                    <button type="button" className="report-user-secondary" onClick={() => setReportStep(1)} disabled={isSubmittingReport}>Wróć</button>
                    <button type="button" className="report-user-primary" onClick={() => void submitReport()} disabled={!canSubmitReport}>
                      {isSubmittingReport ? 'Wysyłanie...' : 'Dalej'}
                    </button>
                  </div>
                </>
              )}

              {reportStep === 3 && (
                <>
                  <div className="report-user-finish-hero" aria-hidden="true">
                    <span className="report-user-finish-icon"><Icon name="shield" /></span>
                  </div>

                  <h3 className="report-user-finish-title">Dziękujemy!<br />Twoje zgłoszenie zostało wysłane.</h3>
                  <p className="report-user-finish-intro">Sprawdzimy je tak szybko, jak to możliwe.<br />W razie potrzeby podejmiemy odpowiednie kroki.</p>

                  <div className="report-user-summary">
                    <strong>Podsumowanie zgłoszenia</strong>
                    <div className="report-user-summary-grid">
                      <span>Powód zgłoszenia:</span>
                      <b>{reportSubmittedReasonTitle || selectedReportReasonDetails?.title || 'Nie podano'}</b>
                      <span>Data zgłoszenia:</span>
                      <b>{reportSubmittedAt || 'Nie podano'}</b>
                    </div>
                    <p><Icon name="lock" /> Zgłoszenie jest anonimowe</p>
                    <small>Numer sprawy: #{reportCaseNumber || String(Date.now()).slice(-6)}</small>
                  </div>

                  <button type="button" className="report-user-primary" onClick={closeReportModal}>Zakończ</button>
                </>
              )}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function FavoritesPage({
  onOpenListing,
  onStartChat,
  favoritesState,
  setFavoritesState,
  preferredTab,
}: {
  onOpenListing: (id: number) => void;
  onStartChat: (target: MessageThreadTarget) => void;
  favoritesState: FavoriteListing[];
  setFavoritesState: Dispatch<SetStateAction<FavoriteListing[]>>;
  preferredTab: FavoriteTab;
}) {
  const { formatPrice, formatMonthlyPrice, formatArea } = useDisplay();
  const navigate = useNavigate();
  const { user } = useAuth();
  const [activeTab, setActiveTab] = useState<FavoriteTab>('buy');
  const [menuListingId, setMenuListingId] = useState<string | null>(null);
  const [favoritesFeedback, setFavoritesFeedback] = useState('');
  const [contactPreview, setContactPreview] = useState<{ listingTitle: string; sellerName: string; phone: string } | null>(null);
  const [contactLoadingListingId, setContactLoadingListingId] = useState<number | null>(null);
  const [messageLoadingListingId, setMessageLoadingListingId] = useState<number | null>(null);
  const [sortMode, setSortMode] = useState<'' | 'newest' | 'priceAsc' | 'priceDesc' | 'areaDesc'>('');
  const [filtersOpen, setFiltersOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [onlyManyPhotos, setOnlyManyPhotos] = useState(false);
  const [onlyThreePlusRooms, setOnlyThreePlusRooms] = useState(false);
  const [onlyRecent, setOnlyRecent] = useState(false);
  const totalFavoritesCount = favoritesState.length;
  const buyFavoritesCount = favoritesState.filter((item) => item.mode === 'buy').length;
  const rentFavoritesCount = favoritesState.filter((item) => item.mode === 'rent').length;
  const activeFiltersCount = Number(onlyManyPhotos) + Number(onlyThreePlusRooms) + Number(onlyRecent);
  const hasActiveControls = sortMode !== '' || searchQuery.trim().length > 0 || activeFiltersCount > 0;

  // Sortujemy po wartosciach zrodlowych. Ulubione zapisane przed dodaniem pol liczbowych maja tylko
  // gotowy tekst ceny, wiec dla nich zostaje odczyt z etykiety - stad ten zapasowy parser.
  const parsePriceValue = (listing: FavoriteListing) => {
    if (Number.isFinite(listing.priceValue)) {
      return listing.priceValue;
    }
    const normalized = listing.price
      .toLowerCase()
      .replace('/ mies.', '')
      .replace('/mies.', '')
      .replace(/\s+/g, '')
      .replace(',', '.')
      .replace('zł', '')
      .replace(/[^\d.]/g, '');

    const value = Number(normalized);
    return Number.isFinite(value) ? value : 0;
  };

  const parseAreaValue = (listing: FavoriteListing) => {
    if (Number.isFinite(listing.areaValue)) {
      return listing.areaValue;
    }
    const numeric = Number(listing.area.replace(',', '.').replace(/[^\d.]/g, ''));
    return Number.isFinite(numeric) ? numeric : 0;
  };

  const parseRoomsValue = (rooms: string) => {
    const match = rooms.match(/\d+/);
    return match ? Number(match[0]) : 0;
  };

  const parseAddedRank = (added: string) => {
    const normalized = added.toLowerCase();

    if (normalized.includes('dzisiaj')) {
      return 100;
    }
    if (normalized.includes('wczoraj')) {
      return 90;
    }
    if (normalized.includes('tydzień')) {
      return 30;
    }

    const dayMatch = normalized.match(/(\d+)\s*dni/);
    if (dayMatch) {
      return Math.max(1, 100 - Number(dayMatch[1]));
    }

    return 10;
  };

  const visibleListings = useMemo(() => {
    const query = searchQuery.trim().toLowerCase();
    const base = favoritesState.filter((item) => item.mode === activeTab);

    const filtered = base.filter((listing) => {
      if (onlyManyPhotos && listing.photos < 10) {
        return false;
      }
      if (onlyThreePlusRooms && parseRoomsValue(listing.rooms) < 3) {
        return false;
      }
      if (onlyRecent && parseAddedRank(listing.added) < 95) {
        return false;
      }
      if (query && !`${listing.title} ${listing.location}`.toLowerCase().includes(query)) {
        return false;
      }
      return true;
    });

    const sorted = [...filtered];
    if (sortMode === 'priceAsc') {
      sorted.sort((a, b) => parsePriceValue(a) - parsePriceValue(b));
    } else if (sortMode === 'priceDesc') {
      sorted.sort((a, b) => parsePriceValue(b) - parsePriceValue(a));
    } else if (sortMode === 'areaDesc') {
      sorted.sort((a, b) => parseAreaValue(b) - parseAreaValue(a));
    } else if (sortMode === 'newest') {
      sorted.sort((a, b) => parseAddedRank(b.added) - parseAddedRank(a.added));
    }

    return sorted;
  }, [activeTab, favoritesState, onlyManyPhotos, onlyRecent, onlyThreePlusRooms, searchQuery, sortMode]);

  useEffect(() => {
    if (!menuListingId) {
      return;
    }

    const onPointerDown = (event: PointerEvent) => {
      const target = event.target as HTMLElement;
      if (!target.closest('.favorite-actions')) {
        setMenuListingId(null);
      }
    };

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

  useEffect(() => {
    setActiveTab(preferredTab);
  }, [preferredTab]);

  useEffect(() => {
    if (!favoritesFeedback) {
      return;
    }

    const timeoutId = window.setTimeout(() => setFavoritesFeedback(''), 5000);
    return () => window.clearTimeout(timeoutId);
  }, [favoritesFeedback]);

  // Usuniecie idzie takze na serwer - ulubione sa na koncie, nie w tej jednej przegladarce.
  const forgetOnServer = (listingId: number) => {
    apiFetch<void>(`/listings/${listingId}/favorite`, { method: 'DELETE' })
      .catch(() => { /* brak sieci - wpis wroci przy nastepnym wejsciu */ });
  };

  const removeFavoriteListing = (id: string) => {
    const removed = favoritesState.find((listing) => listing.id === id);
    if (removed) {
      forgetOnServer(removed.listingId);
    }
    setFavoritesState((current) => current.filter((listing) => listing.id !== id));
    setMenuListingId((current) => (current === id ? null : current));
    setFavoritesFeedback('Usunięto ogłoszenie z ulubionych.');
  };

  const resetFilters = () => {
    setSearchQuery('');
    setOnlyManyPhotos(false);
    setOnlyThreePlusRooms(false);
    setOnlyRecent(false);
    setSortMode('');
    setFavoritesFeedback('Wyczyszczono filtry i sortowanie.');
  };

  const handleShowContact = async (listing: FavoriteListing) => {
    setMenuListingId(null);
    setFavoritesFeedback('');
    setContactLoadingListingId(listing.listingId);

    try {
      const fullListing = await apiFetch<ApiListingDetail>(`/listings/${listing.listingId}`);
      const phone = fullListing.contactPhone?.trim();
      if (!phone) {
        setFavoritesFeedback('Ten użytkownik nie udostępnił numeru telefonu.');
        return;
      }

      setContactPreview({
        listingTitle: fullListing.title,
        sellerName: fullListing.contactName?.trim() || 'Administracja Polska Lokalnie',
        phone,
      });
    } catch {
      setFavoritesFeedback('Nie udało się pobrać numeru telefonu. Spróbuj ponownie.');
    } finally {
      setContactLoadingListingId(null);
    }
  };

  const handleStartMessage = async (listing: FavoriteListing) => {
    setMenuListingId(null);
    setFavoritesFeedback('');
    setMessageLoadingListingId(listing.listingId);

    try {
      const fullListing = await apiFetch<ApiListingDetail>(`/listings/${listing.listingId}`);
      onStartChat(buildMessageThreadTargetFromListing(fullListing, user));
    } catch {
      setFavoritesFeedback('Nie udało się otworzyć czatu dla tego ogłoszenia.');
    } finally {
      setMessageLoadingListingId(null);
    }
  };

  const clearAllFavorites = () => {
    if (favoritesState.length === 0) {
      setFavoritesFeedback('Brak ogłoszeń w ulubionych.');
      return;
    }

    const confirmed = window.confirm('Czy na pewno chcesz usunąć wszystkie ulubione ogłoszenia?');
    if (!confirmed) {
      return;
    }

    favoritesState.forEach((listing) => forgetOnServer(listing.listingId));
    setFavoritesState([]);
    setMenuListingId(null);
    setFavoritesFeedback('Usunięto wszystkie ogłoszenia z ulubionych.');
  };

  const moveListing = (id: string, direction: 'top' | 'bottom') => {
    setFavoritesState((current) => {
      const itemIndex = current.findIndex((listing) => listing.id === id);
      if (itemIndex === -1) {
        return current;
      }

      const item = current[itemIndex];
      const updated = [...current];
      updated.splice(itemIndex, 1);

      if (direction === 'top') {
        const firstSameModeIndex = updated.findIndex((listing) => listing.mode === item.mode);
        updated.splice(firstSameModeIndex === -1 ? updated.length : firstSameModeIndex, 0, item);
        return updated;
      }

      let lastSameModeIndex = -1;
      for (let index = 0; index < updated.length; index += 1) {
        if (updated[index].mode === item.mode) {
          lastSameModeIndex = index;
        }
      }
      updated.splice(lastSameModeIndex === -1 ? updated.length : lastSameModeIndex + 1, 0, item);
      return updated;
    });
  };

  return (
    <section className="favorites-page" aria-label="Ulubione ogłoszenia">
      <div className="favorites-shell">
        <div className="favorites-head">
          <div>
            <h1>Ulubione ogłoszenia</h1>
            <p>Zapisane ogłoszenia, które Cię zainteresowały.</p>
          </div>
          <span className="favorites-saved-pill"><Icon name="heart" /> {totalFavoritesCount} zapisanych</span>
        </div>

        <div className="favorites-toolbar">
          <div className="favorites-tabs" role="tablist" aria-label="Rodzaj ulubionych ogłoszeń">
            <button type="button" role="tab" aria-selected={activeTab === 'buy'} className={activeTab === 'buy' ? 'active' : ''} onClick={() => setActiveTab('buy')}>Kupuję ({buyFavoritesCount})</button>
            <button type="button" role="tab" aria-selected={activeTab === 'rent'} className={activeTab === 'rent' ? 'active' : ''} onClick={() => setActiveTab('rent')}>Wynajmuję ({rentFavoritesCount})</button>
          </div>

          <div className="favorites-controls">
            <label className="favorites-sort-control">
              <span>Sortuj:</span>
              <select value={sortMode} onChange={(event) => setSortMode(event.target.value as '' | 'newest' | 'priceAsc' | 'priceDesc' | 'areaDesc')}>
                <option value="" disabled hidden>Wybierz</option>
                <option value="newest">Dodane najpierw</option>
                <option value="priceAsc">Cena rosnąco</option>
                <option value="priceDesc">Cena malejąco</option>
                <option value="areaDesc">Największy metraż</option>
              </select>
            </label>
            <button type="button" className={`favorites-filter-button ${filtersOpen ? 'active' : ''}`} onClick={() => setFiltersOpen((current) => !current)}><Icon name="list" /> Filtry {activeFiltersCount > 0 ? `(${activeFiltersCount})` : ''}</button>
            {hasActiveControls && <button type="button" className="favorites-filter-button subtle" onClick={resetFilters}>Wyczyść filtry</button>}
          </div>
        </div>

        {filtersOpen && (
          <section className="favorites-filters-panel" aria-label="Filtry ulubionych ogłoszeń">
            <label className="favorites-search-input">
              <Icon name="search" />
              <input
                type="text"
                placeholder="Szukaj po tytule lub lokalizacji"
                value={searchQuery}
                onChange={(event) => setSearchQuery(event.target.value)}
              />
            </label>
            <div className="favorites-quick-toggles">
              <button type="button" className={onlyManyPhotos ? 'active' : ''} aria-pressed={onlyManyPhotos} onClick={() => setOnlyManyPhotos((current) => !current)}><Icon name="camera" /> Min. 10 zdjęć</button>
              <button type="button" className={onlyThreePlusRooms ? 'active' : ''} aria-pressed={onlyThreePlusRooms} onClick={() => setOnlyThreePlusRooms((current) => !current)}><Icon name="group" /> Min. 3 pokoje</button>
              <button type="button" className={onlyRecent ? 'active' : ''} aria-pressed={onlyRecent} onClick={() => setOnlyRecent((current) => !current)}><Icon name="clock" /> Dodane ostatnio</button>
            </div>
          </section>
        )}
        {favoritesFeedback && <p className="favorites-feedback">{favoritesFeedback}</p>}

        <div className="favorites-layout">
          <div className="favorites-list">
            {visibleListings.length === 0 && (
              <article className="favorite-card empty" aria-live="polite">
                <div className="favorite-content">
                  <h3>Brak ogłoszeń w tej kategorii</h3>
                  <p>{searchQuery || activeFiltersCount > 0 ? 'Zmień filtry lub frazę wyszukiwania, aby zobaczyć więcej ofert.' : 'Dodaj nowe oferty do ulubionych, aby pojawiły się na tej liście.'}</p>
                  <Link className="favorite-empty-cta" to={activeTab === 'buy' ? ROUTES.buy : ROUTES.rent}><Icon name="plus" /> {activeTab === 'buy' ? 'Przejdź do ofert Kupuję' : 'Przejdź do ofert Wynajmuję'}</Link>
                </div>
              </article>
            )}
            {visibleListings.map((listing, index) => {
              const isMenuOpen = menuListingId === listing.id;
              const canMoveToTop = index > 0;
              const canMoveToBottom = index < visibleListings.length - 1;

              return (
              <article
                key={listing.id}
                className="favorite-card"
                role="button"
                tabIndex={0}
                onClick={() => onOpenListing(listing.listingId)}
                onKeyDown={(event) => {
                  if (event.key === 'Enter' || event.key === ' ') {
                    event.preventDefault();
                    onOpenListing(listing.listingId);
                  }
                }}
              >
                <div className="favorite-photo" style={{ backgroundImage: `url(${listing.image})` }}>
                  <span className={`favorite-badge ${listing.mode}`}>{listing.badge}</span>
                  <span className="favorite-photos-count"><Icon name="camera" /> {listing.photos}</span>
                </div>

                <div className="favorite-content">
                  <strong>{Number.isFinite(listing.priceValue) ? (listing.isRent ? formatMonthlyPrice(listing.priceValue) : formatPrice(listing.priceValue)) : listing.price}</strong>
                  <h3>{listing.title}</h3>
                  <p><Icon name="pin" /> {listing.location}</p>
                  <ul>
                    <li><Icon name="house" /> {Number.isFinite(listing.areaValue) ? formatArea(listing.areaValue) : listing.area}</li>
                    <li><Icon name="group" /> {listing.rooms}</li>
                    <li><Icon name="list" /> {listing.floor}</li>
                    <li><Icon name="calendar" /> {listing.year}</li>
                  </ul>
                  <small>{listing.added}</small>
                </div>

                <div className="favorite-actions">
                  <button
                    type="button"
                    className="favorite-like"
                    aria-label="Usuń z ulubionych"
                    onClick={(event) => {
                      event.stopPropagation();
                      removeFavoriteListing(listing.id);
                    }}
                  ><Icon name="heart-filled" /></button>
                  <button
                    type="button"
                    className="favorite-more"
                    aria-label="Więcej opcji"
                    aria-expanded={isMenuOpen}
                    onClick={(event) => {
                      event.stopPropagation();
                      setMenuListingId((current) => (current === listing.id ? null : listing.id));
                    }}
                  >
                    <Icon name="dots-vertical" />
                  </button>

                  {isMenuOpen && (
                    <div className="favorite-menu" role="menu" aria-label="Opcje ogłoszenia">
                      <button
                        type="button"
                        role="menuitem"
                        disabled={messageLoadingListingId === listing.listingId || contactLoadingListingId === listing.listingId}
                        onClick={(event) => {
                          event.stopPropagation();
                          void handleStartMessage(listing);
                        }}
                      >
                        {messageLoadingListingId === listing.listingId ? 'Otwieranie czatu...' : 'Napisz wiadomość'}
                      </button>
                      <button
                        type="button"
                        role="menuitem"
                        disabled={messageLoadingListingId === listing.listingId || contactLoadingListingId === listing.listingId}
                        onClick={(event) => {
                          event.stopPropagation();
                          void handleShowContact(listing);
                        }}
                      >
                        {contactLoadingListingId === listing.listingId ? 'Pobieranie numeru...' : 'Skontaktuj się'}
                      </button>
                      <button
                        type="button"
                        role="menuitem"
                        disabled={!canMoveToTop || (sortMode !== '' && sortMode !== 'newest')}
                        onClick={() => {
                          moveListing(listing.id, 'top');
                          setMenuListingId(null);
                          setFavoritesFeedback('Przeniesiono ogłoszenie na górę listy.');
                        }}
                      >
                        Przenieś na górę
                      </button>
                      <button
                        type="button"
                        role="menuitem"
                        disabled={!canMoveToBottom || (sortMode !== '' && sortMode !== 'newest')}
                        onClick={() => {
                          moveListing(listing.id, 'bottom');
                          setMenuListingId(null);
                          setFavoritesFeedback('Przeniesiono ogłoszenie na dół listy.');
                        }}
                      >
                        Przenieś na dół
                      </button>
                    </div>
                  )}
                </div>
              </article>
            );
            })}

          </div>

          <aside className="favorites-sidebar">
            <section className="favorites-side-card">
              <h2>Zarządzaj ulubionymi</h2>
              <ul>
                <li><span><Icon name="heart" /> Wszystkie ulubione</span><strong>{totalFavoritesCount}</strong></li>
                <li><span><Icon name="house" /> Na sprzedaż</span><strong>{buyFavoritesCount}</strong></li>
                <li><span><Icon name="key" /> Na wynajem</span><strong>{rentFavoritesCount}</strong></li>
              </ul>
              <button type="button" onClick={clearAllFavorites}><Icon name="trash" /> Usuń wszystkie</button>
            </section>

            <section className="favorites-side-note">
              <span className="favorites-side-note-icon"><Icon name="heart" /></span>
              <div className="favorites-side-note-copy">
                <strong>Zapisuj ogłoszenia, które Ci się podobają</strong>
                <p>Dodawaj oferty do ulubionych i wracaj do nich w każdej chwili.</p>
              </div>
            </section>
          </aside>
        </div>
      </div>

      {contactPreview && (
        <div className="favorites-contact-overlay" role="dialog" aria-modal="true" aria-label="Dane kontaktowe sprzedającego" onClick={() => setContactPreview(null)}>
          <div className="favorites-contact-modal" onClick={(event) => event.stopPropagation()}>
            <button type="button" className="favorites-contact-close" onClick={() => setContactPreview(null)} aria-label="Zamknij panel kontaktu">×</button>
            <span className="favorites-contact-badge"><Icon name="phone" /></span>
            <h2>Kontakt do sprzedającego</h2>
            <p><strong>{contactPreview.sellerName}</strong><small>{contactPreview.listingTitle}</small></p>
            <a href={`tel:${contactPreview.phone.replace(/\s+/g, '')}`} className="favorites-contact-phone"><Icon name="phone" /> {contactPreview.phone}</a>
            <div className="favorites-contact-actions">
              <button type="button" onClick={() => setContactPreview(null)}>Zamknij</button>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

function SearchField({ icon, label, value }: { icon: string; label: string; value: string }) {
  return (
    <button className="search-field">
      <Icon name={icon} />
      <span>
        {label && <small>{label}</small>}
        <strong>{value}</strong>
      </span>
    </button>
  );
}

// Wspolny wiersz "kafelkow" ze specyfikacja: ikona -> duza wartosc -> maly podpis. Uzywany na stronie
// ogloszenia, na kartach wynikow i w podgladzie kreatora, zeby wszedzie wygladalo tak samo.
type SpecTile = { icon: string; value: string; caption: string };
function SpecTiles({ items, className }: { items: SpecTile[]; className?: string }) {
  return (
    <div className={className ? `spec-tiles ${className}` : 'spec-tiles'}>
      {items.map((item) => (
        <div className="spec-tile" key={item.caption}>
          <Icon name={item.icon} />
          <strong>{item.value}</strong>
          <span>{item.caption}</span>
        </div>
      ))}
    </div>
  );
}

function AddSelect({ label, value, options = [value], onChange }: { label: string; value: string; options?: string[]; onChange?: (value: string) => void }) {
  return (
    <label className="add-field">
      <span>{label}</span>
      <select {...(onChange ? { value, onChange: (event) => onChange(event.target.value) } : { defaultValue: value })}>
        {options.map((option) => (
          <option key={option} value={option}>{option}</option>
        ))}
      </select>
    </label>
  );
}

function AddInput({ label, value, suffix, type = 'text', placeholder, readOnly, onChange, numeric }: { label: string; value: string; suffix?: string; type?: string; placeholder?: string; readOnly?: boolean; onChange?: (value: string) => void; numeric?: 'integer' | 'decimal' }) {
  // Pola liczbowe (cena, powierzchnia, rok budowy) przyjmuja tylko cyfry - litery i inne znaki sa
  // odrzucane od razu. Tryb "decimal" dopuszcza jeden separator dziesietny (kropka lub przecinek).
  const sanitize = (raw: string): string => {
    if (numeric === 'integer') {
      return raw.replace(/\D/g, '');
    }
    if (numeric === 'decimal') {
      const cleaned = raw.replace(/[^\d.,]/g, '');
      const sep = cleaned.search(/[.,]/);
      if (sep === -1) {
        return cleaned;
      }
      return cleaned.slice(0, sep + 1) + cleaned.slice(sep + 1).replace(/[.,]/g, '');
    }
    return raw;
  };
  const inputMode = numeric === 'integer' ? 'numeric' : numeric === 'decimal' ? 'decimal' : undefined;
  return (
    <label className="add-field">
      <span>{label}</span>
      <div className="input-with-suffix">
        <input type={type} inputMode={inputMode} placeholder={placeholder} readOnly={readOnly} {...(onChange || readOnly ? { value, onChange: (event) => onChange?.(sanitize(event.target.value)) } : { defaultValue: value })} />
        {suffix && <em>{suffix}</em>}
      </div>
    </label>
  );
}

function FilterGroup({ title, children }: { title: string; children: ReactNode }) {
  return (
    <div className="filter-group">
      <h3>{title}</h3>
      {children}
    </div>
  );
}

function CheckRow({ label, checked = false }: { label: string; checked?: boolean }) {
  return (
    <label className="check-row">
      <input type="checkbox" defaultChecked={checked} />
      <span>{label}</span>
    </label>
  );
}

function createSatelliteTiles({
  centerLat,
  centerLng,
  height,
  width,
  zoom,
}: {
  centerLat: number;
  centerLng: number;
  height: number;
  width: number;
  zoom: number;
}) {
  const tileSize = 256;
  const scale = 2 ** zoom;
  const centerX = ((centerLng + 180) / 360) * scale * tileSize;
  const latRad = (centerLat * Math.PI) / 180;
  const centerY =
    ((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2) *
    scale *
    tileSize;
  const topLeftX = centerX - width / 2;
  const topLeftY = centerY - height / 2;
  const startX = Math.floor(topLeftX / tileSize);
  const endX = Math.floor((topLeftX + width) / tileSize);
  const startY = Math.floor(topLeftY / tileSize);
  const endY = Math.floor((topLeftY + height) / tileSize);
  const tiles = [];

  for (let x = startX; x <= endX; x += 1) {
    for (let y = startY; y <= endY; y += 1) {
      tiles.push({
        left: x * tileSize - topLeftX,
        top: y * tileSize - topLeftY,
        x,
        y,
        z: zoom,
      });
    }
  }

  return tiles;
}

const OFFER_TYPE_LABELS: Record<ApiOfferType, string> = { SALE: 'Sprzedaż', RENT: 'Wynajem' };
const PROPERTY_TYPE_LABELS: Record<ApiPropertyType, string> = { APARTMENT: 'Mieszkanie', HOUSE: 'Dom' };
const LISTING_STATUS_LABELS: Record<ApiListingStatus, string> = {
  PENDING: 'Oczekuje na moderację',
  APPROVED: 'Opublikowane',
  REJECTED: 'Odrzucone',
  PAUSED: 'Wstrzymane',
};

function listingRoomsText(rooms: number): string {
  if (rooms === 1) return '1 pokój';
  if (rooms >= 2 && rooms <= 4) return `${rooms} pokoje`;
  return `${rooms} pokoi`;
}

// Formater przychodzi z useDisplay(), bo cena za metr zalezy od waluty i jednostki wybranej w ustawieniach.
function listingPerMeter(price: number, area: number, formatPricePerArea: (plnPerSquareMeter: number) => string): string | null {
  if (!area || area <= 0) return null;
  return formatPricePerArea(price / area);
}

function listingFloorText(floor: string | null, buildingFloors: string | null): string | null {
  if (!floor) return null;
  return buildingFloors ? `${floor}/${buildingFloors}` : floor;
}

function listingRelativeDate(createdAt: string): string {
  const created = new Date(createdAt).getTime();
  if (Number.isNaN(created)) return '';
  const days = Math.floor((Date.now() - created) / (1000 * 60 * 60 * 24));
  if (days <= 0) return 'Dodane dziś';
  if (days === 1) return 'Dodane wczoraj';
  return `Dodane ${days} dni temu`;
}

function listingMarketBadge(market: string | null): string {
  if (!market) {
    return 'Wtórny';
  }
  const normalized = market.toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu, '');
  if (normalized.includes('pierwot')) {
    return 'Pierwotny';
  }
  if (normalized.includes('wtor')) {
    return 'Wtórny';
  }
  return market;
}

function toMapOfferPreview(summary: ApiListingSummary, detail: { lat: number | null; lng: number | null } | null, fmt: PriceFormatters): MapOfferPreview {
  const floor = listingFloorText(summary.floor, summary.buildingFloors);
  const meta = [
    fmt.formatArea(summary.area),
    listingRoomsText(summary.rooms),
    floor ? `${floor} piętro` : null,
  ].filter(Boolean).join(' • ');

  return {
    listingId: summary.id,
    title: summary.title,
    city: summary.city,
    district: [summary.city, summary.district].filter(Boolean).join(', '),
    rooms: summary.rooms,
    area: summary.area,
    priceValue: summary.price,
    market: summary.market === 'pierwotny' ? 'pierwotny' : 'wtorny',
    tags: [listingMarketBadge(summary.market)],
    image: 'hero',
    imageUrl: summary.coverPhoto,
    lat: detail?.lat ?? null,
    lng: detail?.lng ?? null,
    meta,
  };
}

function useLiveListings(offerType: ApiOfferType, refreshMs = LIVE_LISTINGS_REFRESH_MS) {
  const { directOffersOnly } = useDisplay();
  const [items, setItems] = useState<LiveListingSummary[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    let timerId: number | null = null;

    const load = async () => {
      try {
        const query = directOffersOnly ? `/listings?offerType=${offerType}&directOnly=true` : `/listings?offerType=${offerType}`;
        const summaries = await apiFetch<ApiListingSummary[]>(query);
        const resolved = await Promise.all(
          summaries.map(async (summary) => {
            try {
              const detail = await apiFetch<ApiListingDetail>(`/listings/${summary.id}`);
              return {
                ...summary,
                lat: detail.lat,
                lng: detail.lng,
                photos: detail.photos ?? [],
                ownerAccountType: detail.ownerAccountType ?? null,
                ownerName: detail.ownerName ?? null,
                ownerId: detail.ownerId ?? null,
              } as LiveListingSummary;
            } catch {
              return {
                ...summary,
                lat: null,
                lng: null,
                photos: [],
                ownerAccountType: null,
                ownerName: null,
                ownerId: null,
              } as LiveListingSummary;
            }
          }),
        );

        if (!cancelled) {
          setItems(resolved);
          setLoading(false);
        }
      } catch {
        if (!cancelled) {
          setLoading(false);
        }
      } finally {
        if (!cancelled) {
          timerId = window.setTimeout(() => {
            void load();
          }, refreshMs);
        }
      }
    };

    setLoading(true);
    void load();

    return () => {
      cancelled = true;
      if (timerId !== null) {
        window.clearTimeout(timerId);
      }
    };
  }, [offerType, refreshMs, directOffersOnly]);

  return { items, loading };
}

// Funkcje zapowiedziane, ale jeszcze niezbudowane - przycisk jest nieaktywny i ma plakietke "Wkrotce".
const SOON_HINT = 'Ta funkcja jest w przygotowaniu.';

// Jeden adres i jeden numer kontaktowy w calym serwisie - te same co w stopce i na stronach prawnych.
const SUPPORT_EMAIL = 'info@polskalokalnie.pl';
const SUPPORT_PHONE = '+48 453 193 605';
const SUPPORT_PHONE_HREF = 'tel:+48453193605';

// Podpowiedz przy narzedziach wylaczonych we wlasnym ogloszeniu (kontakt, ulubione, alert ceny, zgloszenie).
const OWNER_TOOL_HINT ='To Twoje ogłoszenie - ta opcja jest dostępna tylko dla innych użytkowników.';

function ListingDetailPage({
  listingId,
  onStartChat,
  isFavorite,
  onToggleFavorite,
  isListingAlertEnabled,
  onToggleListingAlert,
}: {
  listingId: number | null;
  onStartChat: (target: MessageThreadTarget) => void;
  isFavorite: (listingId: number) => boolean;
  onToggleFavorite: (listing: ApiListingDetail) => void;
  isListingAlertEnabled: (listingId: number) => boolean;
  onToggleListingAlert: (listing: ApiListingDetail) => void;
}) {
  const navigate = useNavigate();
  const { user, loading: authLoading } = useAuth();
  const { formatPrice, formatPricePerArea, formatArea, areaSuffix } = useDisplay();
  const [listing, setListing] = useState<ApiListingDetail | null>(null);
  // Historia ogladania jest per konto, wiec zapisujemy ja dopiero, gdy wiadomo, kto oglada -
  // inaczej oferta obejrzana zaraz po wejsciu trafilaby do historii "goscia".
  useEffect(() => {
    if (!listing || authLoading) {
      return;
    }
    pushRecentlyViewed({
      id: listing.id,
      title: listing.title,
      city: listing.city,
      district: listing.district,
      price: listing.price,
      offerType: listing.offerType,
      area: listing.area,
      rooms: listing.rooms,
      photo: listing.photos[0] ?? null,
    }, user);
  }, [listing, authLoading, user]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [activePhoto, setActivePhoto] = useState(0);
  // Proporcje glownego zdjecia - ramka galerii dopasowuje sie do zdjecia (bez pustej przestrzeni).
  const [mainRatio, setMainRatio] = useState(1.6);
  const [sellerListings, setSellerListings] = useState<ApiListingSummary[]>([]);
  const [isLightboxOpen, setIsLightboxOpen] = useState(false);
  const [lightboxPhotoIndex, setLightboxPhotoIndex] = useState(0);
  const [isPhoneRevealed, setIsPhoneRevealed] = useState(false);
  const [shareHint, setShareHint] = useState<string | null>(null);
  const [resolvedMapCenter, setResolvedMapCenter] = useState<LatLng | null>(null);
  type ReportStep = 1 | 2 | 3;
  const [isReportModalOpen, setIsReportModalOpen] = useState(false);
  const [reportStep, setReportStep] = useState<ReportStep>(1);
  const [selectedReportReason, setSelectedReportReason] = useState<string>('fraud');
  const [reportDetails, setReportDetails] = useState('');
  const [reportAttachments, setReportAttachments] = useState<File[]>([]);
  const [reportAttachmentError, setReportAttachmentError] = useState('');
  const [reportCaseNumber, setReportCaseNumber] = useState('');
  const [reportSubmittedAt, setReportSubmittedAt] = useState('');
  const [reportSubmittedReasonTitle, setReportSubmittedReasonTitle] = useState('');
  const [reportSubmitting, setReportSubmitting] = useState(false);
  const [reportSubmitError, setReportSubmitError] = useState('');
  const reportAttachmentInputRef = useRef<HTMLInputElement | null>(null);

  const listingReportReasons = [
    {
      id: 'fraud',
      icon: 'warning',
      title: 'Podejrzane lub oszukańcze działania',
      description: 'Ogłoszenie może zawierać próbę wyłudzenia pieniędzy lub fałszywe informacje.',
    },
    {
      id: 'duplicate',
      icon: 'document',
      title: 'Spam lub duplikaty',
      description: 'To ogłoszenie jest duplikatem albo zostało opublikowane wielokrotnie.',
    },
    {
      id: 'wrong',
      icon: 'message',
      title: 'Nieprawidłowe treści',
      description: 'Opis, zdjęcia lub dane kontaktowe są niezgodne z rzeczywistością.',
    },
    {
      id: 'other',
      icon: 'dots',
      title: 'Inny powód',
      description: 'Wskaż inny problem, który wymaga interwencji zespołu moderacji.',
    },
  ];

  useEffect(() => {
    if (listingId == null) {
      setError('Nie wybrano ogłoszenia.');
      setLoading(false);
      return;
    }
    let cancelled = false;
    setLoading(true);
    setError(null);
    setActivePhoto(0);
    apiFetch<ApiListingDetail>(`/listings/${listingId}?incrementView=true`)
      .then((data) => {
        if (!cancelled) {
          setListing(data);
          setLoading(false);
        }
      })
      .catch((err) => {
        if (!cancelled) {
          setError(err instanceof Error ? err.message : 'Nie udało się wczytać ogłoszenia.');
          setLoading(false);
        }
      });
    return () => {
      cancelled = true;
    };
  }, [listingId]);

  // Inne oferty tego samego sprzedajacego - minimalistyczna lista na dole strony. Dopasowanie po
  // wlascicielu robi serwer, bo e-mail wlasciciela nie jest publiczny.
  useEffect(() => {
    const currentId = listing?.id;
    if (currentId == null) {
      setSellerListings([]);
      return;
    }
    let cancelled = false;
    apiFetch<ApiListingSummary[]>(`/listings/${currentId}/seller-listings`)
      .then((items) => {
        if (!cancelled) {
          setSellerListings(items);
        }
      })
      .catch(() => {
        if (!cancelled) {
          setSellerListings([]);
        }
      });
    return () => {
      cancelled = true;
    };
  }, [listing?.id]);

  useEffect(() => {
    if (!listing) {
      setResolvedMapCenter(null);
      return;
    }
    if (listing.lat != null && listing.lng != null) {
      setResolvedMapCenter(clampCenter({ lat: listing.lat, lng: listing.lng }));
      return;
    }

    const hasAddress = Boolean(listing.city || listing.street || listing.district);
    if (!hasAddress) {
      setResolvedMapCenter(null);
      return;
    }

    const controller = new AbortController();
    geocodeListingLocation({
      city: listing.city,
      district: listing.district ?? '',
      estate: '',
      street: listing.street ?? '',
      building: listing.building ?? '',
      unit: '',
      approximateLocation: false,
    }, controller.signal)
      .then((result) => {
        if (result) {
          setResolvedMapCenter(clampCenter(result.point));
        }
      })
      .catch(() => {
        setResolvedMapCenter(null);
      });

    return () => controller.abort();
  }, [listing]);

  const gallery = listing?.photos.length ? listing.photos : [heroImage];

  const openLightbox = (index: number) => {
    setLightboxPhotoIndex(index);
    setIsLightboxOpen(true);
  };

  const closeLightbox = () => {
    setIsLightboxOpen(false);
  };

  const showPreviousLightboxPhoto = () => {
    setLightboxPhotoIndex((current) => (current - 1 + gallery.length) % gallery.length);
  };

  const showNextLightboxPhoto = () => {
    setLightboxPhotoIndex((current) => (current + 1) % gallery.length);
  };

  useEffect(() => {
    if (!isLightboxOpen) {
      return;
    }

    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        closeLightbox();
        return;
      }
      if (event.key === 'ArrowLeft') {
        showPreviousLightboxPhoto();
        return;
      }
      if (event.key === 'ArrowRight') {
        showNextLightboxPhoto();
      }
    };

    window.addEventListener('keydown', onKeyDown);
    return () => window.removeEventListener('keydown', onKeyDown);
  }, [isLightboxOpen, gallery.length]);

  if (loading) {
    return (
      <section className="listing-detail-page">
        <div className="listing-detail-state">Wczytywanie ogłoszenia…</div>
      </section>
    );
  }

  if (error || !listing) {
    return (
      <section className="listing-detail-page">
        <div className="listing-detail-state">
          <p>{error ?? 'Nie znaleziono ogłoszenia.'}</p>
          <Link className="listing-detail-back" to={ROUTES.buy}>
            <Icon name="arrow" /> Wróć do ofert
          </Link>
        </div>
      </section>
    );
  }
  const perMeter = listingPerMeter(listing.price, listing.area, formatPricePerArea);
  const floorText = listingFloorText(listing.floor, listing.buildingFloors);
  const locationLine = [listing.city, listing.district, listing.street && listing.building ? `${listing.street} ${listing.building}` : listing.street]
    .filter(Boolean)
    .join(', ');
  const sellerName = listing.contactName?.trim() || 'Administracja Polska Lokalnie';
  // Wlasciciela rozpoznajemy po koncie powiazanym z ogloszeniem, a dla wpisow bez konta - po adresie e-mail.
  const isOwner = Boolean(user && ((listing.ownerId != null && listing.ownerId === user.id)
    || (listing.ownerEmail && user.email.toLowerCase() === listing.ownerEmail.toLowerCase())));
  // Podpis pod nazwa sprzedajacego: dla firmy "Firma", dla osoby "Osoba prywatna", a dla ogloszen
  // bez konta w serwisie (dane demo) - dotychczasowy kontakt zespolu serwisu.
  const sellerRole = isOwner
    ? 'To Twoje ogłoszenie'
    : listing.ownerAccountType === 'COMPANY'
      ? 'Firma'
      : listing.ownerAccountType === 'PERSONAL'
        ? 'Osoba prywatna'
        : 'Oficjalny kontakt zespołem serwisu Polska Lokalnie';
  // Dodatkowe wiersze na karcie sprzedajacego - realne dane konta wlasciciela (nie pokazujemy ich
  // przy wlasnym ogloszeniu ani dla wpisow bez konta w serwisie, gdzie oba pola sa puste).
  const sellerLastActiveText = isOwner ? '' : sellerLastActive(listing.ownerLastActiveAt);
  const sellerMemberSinceText = isOwner ? '' : sellerMemberSince(listing.ownerCreatedAt);
  const favorite = isFavorite(listing.id);
  const listingAlertEnabled = isListingAlertEnabled(listing.id);
  const virtualTourEmbed = listing.virtualTourUrl ? getVirtualTourEmbed(listing.virtualTourUrl) : null;
  const shareUrl = typeof window !== 'undefined' ? window.location.href : `https://polskalokalnie.pl/oferta/${listing.id}`;

  const copyShareLink = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl);
      setShareHint('Link został skopiowany');
      window.setTimeout(() => setShareHint(null), 1800);
    } catch {
      setShareHint('Nie udało się skopiować');
      window.setTimeout(() => setShareHint(null), 1800);
    }
  };

  const openShareWindow = (url: string) => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  // Udostepnianie e-mailem: domyslny klient poczty z tytulem oferty w temacie i linkiem w tresci.
  const shareByEmail = () => {
    const subject = encodeURIComponent(listing.title);
    const body = encodeURIComponent(`${listing.title}\n${shareUrl}`);
    window.location.href = `mailto:?subject=${subject}&body=${body}`;
  };

  // Systemowe udostepnianie (telefon) - a gdy niedostepne albo uzytkownik anuluje, kopiujemy link.
  const shareViaSystem = async () => {
    if (typeof navigator !== 'undefined' && typeof navigator.share === 'function') {
      try {
        await navigator.share({ title: listing.title, text: listing.city, url: shareUrl });
      } catch {
        // Uzytkownik zamknal panel udostepniania - nic nie robimy.
      }
      return;
    }
    await copyShareLink();
  };

  // Przycisk glowny pokazuje numer telefonu (wiadomosci obsluguje osobny przycisk "Napisz wiadomosc").
  const revealContact = () => {
    setIsPhoneRevealed(true);
  };

  const startChatWithSeller = () => {
    onStartChat(buildMessageThreadTargetFromListing(listing, user));
  };

  const detailRows: Array<{ label: string; value: string }> = [];
  const pushRow = (label: string, value: string | number | null | undefined) => {
    if (value !== null && value !== undefined && `${value}`.trim() !== '') {
      detailRows.push({ label, value: `${value}` });
    }
  };
  pushRow('Rynek', listing.market);
  pushRow('Cena', formatPrice(listing.price));
  if (perMeter) pushRow(`Cena za ${areaSuffix}`, perMeter);
  pushRow('Powierzchnia', formatArea(listing.area));
  pushRow('Liczba pokoi', listing.rooms);
  if (floorText) pushRow('Piętro', floorText);
  pushRow('Rok budowy', listing.yearBuilt);
  pushRow('Stan', listing.condition);
  pushRow('Forma własności', listing.ownership);
  pushRow('Typ budynku', listing.buildingType);
  pushRow('Materiał budynku', listing.buildingMaterial);
  pushRow('Okna', listing.windows);
  pushRow('Ekspozycja', listing.exposure);
  pushRow('Wysokość pomieszczeń', listing.roomHeight ? `${listing.roomHeight} m` : null);
  pushRow('Umeblowanie', listing.furnishing);
  pushRow('Dostępne od', listing.availableFrom);
  if (listing.offerType === 'RENT' && listing.rentExtra) pushRow('Czynsz', formatPrice(listing.rentExtra));

  const priceSuffix = listing.offerType === 'RENT' ? ' /mc' : '';
  const listingMapCenter = resolvedMapCenter ?? CITY_COORDS[listing.city] ?? POLAND_CENTER;
  // Przy ukrytym adresie cofamy zoom, zeby cale kolo przyblizonego obszaru zmiescilo sie w kadrze.
  const approximateLocation = Boolean(listing.approximateLocation);
  const listingMapZoom = approximateLocation
    ? 14
    : listing.street && listing.building ? 16 : listing.street ? 15 : listing.district ? 14 : 12;
  const openLocationInMaps = () => {
    const query = `${listingMapCenter.lat},${listingMapCenter.lng}`;
    window.open(`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`, '_blank', 'noopener,noreferrer');
  };

  const openReportModal = () => {
    if (!user) {
      navigate(ROUTES.login);
      return;
    }
    setReportStep(1);
    setSelectedReportReason('fraud');
    setReportDetails('');
    setReportAttachments([]);
    setReportAttachmentError('');
    setReportCaseNumber('');
    setReportSubmittedAt('');
    setReportSubmittedReasonTitle('');
    setReportSubmitting(false);
    setReportSubmitError('');
    setIsReportModalOpen(true);
  };

  const closeReportModal = () => {
    if (reportSubmitting) {
      return;
    }
    setReportStep(1);
    setSelectedReportReason('fraud');
    setReportDetails('');
    setReportAttachments([]);
    setReportAttachmentError('');
    setReportCaseNumber('');
    setReportSubmittedAt('');
    setReportSubmittedReasonTitle('');
    setReportSubmitError('');
    setIsReportModalOpen(false);
  };

  const selectedReportReasonDetails = listingReportReasons.find((reason) => reason.id === selectedReportReason);
  const isOtherReasonSelected = selectedReportReason === 'other';
  const normalizedReportDetails = reportDetails.trim();
  const needsMoreDetails = isOtherReasonSelected && normalizedReportDetails.length < 10;
  const canSubmitReport = !reportSubmitting && !reportAttachmentError && !needsMoreDetails;

  const onChooseReportAttachments = () => {
    reportAttachmentInputRef.current?.click();
  };

  const onReportAttachmentsSelected = (event: ReactChangeEvent<HTMLInputElement>) => {
    const files = Array.from(event.target.files ?? []);
    event.target.value = '';

    if (files.length === 0) {
      return;
    }

    setReportSubmitError('');

    const allowedMimeTypes = new Set(['image/png', 'image/jpeg', 'application/pdf']);
    const allowedExtensions = ['.png', '.jpg', '.jpeg', '.pdf'];
    const maxFileSize = 10 * 1024 * 1024;
    const maxFiles = 5;

    const nextFiles = [...reportAttachments];
    let firstError = '';

    files.forEach((file) => {
      if (nextFiles.length >= maxFiles) {
        if (!firstError) {
          firstError = 'Możesz dodać maksymalnie 5 plików.';
        }
        return;
      }

      const fileName = file.name.toLowerCase();
      const hasAllowedExtension = allowedExtensions.some((extension) => fileName.endsWith(extension));
      const hasAllowedMime = allowedMimeTypes.has(file.type);

      if (!hasAllowedExtension && !hasAllowedMime) {
        if (!firstError) {
          firstError = 'Dozwolone formaty plików: PNG, JPG, PDF.';
        }
        return;
      }

      if (file.size > maxFileSize) {
        if (!firstError) {
          firstError = 'Maksymalny rozmiar pojedynczego pliku to 10 MB.';
        }
        return;
      }

      const alreadyAdded = nextFiles.some((addedFile) => (
        addedFile.name === file.name
        && addedFile.size === file.size
        && addedFile.lastModified === file.lastModified
      ));

      if (!alreadyAdded) {
        nextFiles.push(file);
      }
    });

    setReportAttachments(nextFiles);
    setReportAttachmentError(firstError);
  };

  const removeReportAttachment = (index: number) => {
    setReportAttachments((current) => current.filter((_, fileIndex) => fileIndex !== index));
    setReportAttachmentError('');
    setReportSubmitError('');
  };

  const submitReport = async () => {
    if (!canSubmitReport) {
      return;
    }

    if (!selectedReportReasonDetails) {
      setReportSubmitError('Wybierz powód zgłoszenia.');
      return;
    }

    if (needsMoreDetails) {
      setReportSubmitError('Dla opcji „Inny powód” podaj minimum 10 znaków opisu.');
      return;
    }

    setReportSubmitError('');
    setReportSubmitting(true);
    try {
      const attachmentFiles = await Promise.all(reportAttachments.map(async (file) => {
        const fileName = file.name.toLowerCase();
        const isImageByExtension = fileName.endsWith('.png') || fileName.endsWith('.jpg') || fileName.endsWith('.jpeg') || fileName.endsWith('.webp');
        const isImageByMime = file.type.toLowerCase().startsWith('image/');
        const isImage = isImageByMime || isImageByExtension;
        const dataUrl = isImage ? await readFileAsDataUrl(file) : null;
        return {
          fileName: file.name,
          fileType: file.type || null,
          dataUrl,
        };
      }));

      const submitted = await apiFetch<{ id: number; createdAt: string; reasonTitle: string }>('/reports/listings', {
        method: 'POST',
        body: JSON.stringify({
          listingId: listing.id,
          reasonId: selectedReportReason,
          reasonTitle: selectedReportReasonDetails.title,
          details: normalizedReportDetails || null,
          attachmentNames: reportAttachments.map((file) => file.name),
          attachmentFiles,
        }),
      });

      const submittedAt = new Date(submitted.createdAt);

      setReportCaseNumber(String(submitted.id));
      setReportSubmittedReasonTitle(selectedReportReasonDetails.title);
      setReportSubmittedAt(submittedAt.toLocaleString('pl-PL', {
        day: 'numeric',
        month: 'long',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
      }));
      setReportStep(3);
    } catch (err) {
      const status = (err as Error & { status?: number }).status;
      if (status === 401 || status === 403) {
        setReportSubmitError('Aby wysłać zgłoszenie, zaloguj się na konto użytkownika.');
      } else if (status === 404) {
        setReportSubmitError('Backend nie ma jeszcze endpointu zgłoszeń. Zrestartuj backend (lub docker-compose z build), a następnie spróbuj ponownie.');
      } else {
        setReportSubmitError(err instanceof Error ? err.message : 'Nie udało się wysłać zgłoszenia. Spróbuj ponownie.');
      }
    } finally {
      setReportSubmitting(false);
    }
  };

  return (
    <section className="listing-detail-page">
      <div className="listing-detail-topbar">
        <button type="button" className="ld-back" onClick={() => navigate(-1)}>
          <span className="ld-back-icon"><Icon name="chevron" /></span>
          Wróć
        </button>
      </div>

      <div className="listing-detail-headline">
        <div className="ld-headline-tags">
          <span className="ld-badge ld-badge-green">{OFFER_TYPE_LABELS[listing.offerType]}</span>
          <span className="ld-badge">{PROPERTY_TYPE_LABELS[listing.propertyType]}</span>
          {!!listing.promotedUntil && new Date(listing.promotedUntil).getTime() > Date.now() && (
            <span className="ld-badge ld-badge-promoted"><Icon name="spark" /> Wyróżnione</span>
          )}
        </div>
        <h1>{listing.title}</h1>
        <div className="ld-headline-row">
          <p className="ld-headline-loc"><Icon name="pin" /> {locationLine || listing.city}</p>
        </div>
      </div>

      <div className="listing-detail-layout">
        <div className="listing-detail-main">
          <div className="listing-detail-gallery">
            <div className="listing-detail-gallery-main">
              <button
                type="button"
                className="listing-detail-gallery-main-image"
                onClick={() => openLightbox(activePhoto)}
                aria-label="Powiększ zdjęcie"
                style={{ aspectRatio: String(mainRatio) }}
              >
                <img
                  src={gallery[activePhoto] ?? gallery[0]}
                  alt={listing.title}
                  onLoad={(event) => {
                    const el = event.currentTarget;
                    if (el.naturalWidth > 0 && el.naturalHeight > 0) {
                      const ratio = el.naturalWidth / el.naturalHeight;
                      // Ograniczenie do rozsadnego zakresu (od ~4:5 do ~2:1), by uniknac skrajnosci.
                      setMainRatio(Math.min(Math.max(ratio, 0.8), 2.0));
                    }
                  }}
                />
              </button>
              {gallery.length > 1 && (
                <>
                  <button
                    type="button"
                    className="ld-gallery-arrow ld-gallery-prev"
                    onClick={() => setActivePhoto((index) => (index - 1 + gallery.length) % gallery.length)}
                    aria-label="Poprzednie zdjęcie"
                  ><span className="ld-gallery-arrow-icon"><Icon name="chevron" /></span></button>
                  <button
                    type="button"
                    className="ld-gallery-arrow ld-gallery-next"
                    onClick={() => setActivePhoto((index) => (index + 1) % gallery.length)}
                    aria-label="Następne zdjęcie"
                  ><span className="ld-gallery-arrow-icon"><Icon name="chevron" /></span></button>
                </>
              )}
              <span className="listing-detail-gallery-count">{activePhoto + 1} / {gallery.length}</span>
            </div>
            {gallery.length > 1 && (
              <div className="listing-detail-thumbs">
                {gallery.map((photo, index) => (
                  <button
                    type="button"
                    key={index}
                    className={index === activePhoto ? 'active' : ''}
                    onClick={() => setActivePhoto(index)}
                    aria-label={`Pokaż zdjęcie ${index + 1}`}
                  >
                    <img src={photo} alt="" />
                  </button>
                ))}
              </div>
            )}
          </div>

          <div className="listing-detail-card">
            <h2>Szczegóły</h2>
            <div className="listing-detail-specs">
              {detailRows.map((row) => (
                <div className="listing-detail-spec" key={row.label}>
                  <span>{row.label}</span>
                  <strong>{row.value}</strong>
                </div>
              ))}
            </div>
          </div>

          <div className="listing-detail-card">
            <h2>Opis</h2>
            <SafeHtml className="listing-detail-description rich-text" html={listing.description} />
          </div>

          {listing.virtualTourUrl && (
            <div className="listing-detail-card">
              <h2>Wirtualny spacer 3D</h2>
              {virtualTourEmbed ? (
                <div className="listing-detail-tour-embed">
                  <iframe
                    src={virtualTourEmbed.embedUrl}
                    title={`Wirtualny spacer (${virtualTourEmbed.providerLabel})`}
                    loading="lazy"
                    allow="xr-spatial-tracking; vr; gyroscope; accelerometer; fullscreen"
                    allowFullScreen
                  />
                </div>
              ) : (
                <p className="listing-detail-description">Ten typ linku nie obsługuje osadzenia w karcie. Otwórz spacer w nowej karcie.</p>
              )}
              <a
                className="listing-detail-tour-link"
                href={listing.virtualTourUrl}
                target="_blank"
                rel="noopener noreferrer"
              >
                Otwórz wirtualny spacer <Icon name="arrow" />
              </a>
            </div>
          )}

          <div className="listing-detail-card">
            <h2>Media i udogodnienia</h2>
            <div className="listing-detail-chips">
              {listing.media.map((item) => (
                <span key={`m-${item}`}><Icon name="spark" /> {item}</span>
              ))}
              {listing.amenities.map((item) => (
                <span key={`a-${item}`}><Icon name="check" /> {item}</span>
              ))}
              {listing.media.length === 0 && listing.amenities.length === 0 && (
                <span><Icon name="list" /> Brak dodanych informacji o mediach i udogodnieniach</span>
              )}
            </div>
          </div>

          <div className="listing-detail-card">
            <h2>Lokalizacja</h2>
            <p className="listing-detail-address">{locationLine || listing.city}</p>
            <div className="listing-detail-map">
              <SatelliteMap
                markers={[]}
                center={listingMapCenter}
                cityLabel={listing.city}
                centerMarkerLabel={formatPrice(listing.price)}
                initialZoom={listingMapZoom}
                showCityTitle={false}
                onMapClick={openLocationInMaps}
                areaRadiusMeters={approximateLocation ? APPROXIMATE_LOCATION_RADIUS_M : undefined}
              />
            </div>
            <p className="listing-detail-map-hint">
              {approximateLocation
                ? `Sprzedający nie udostępnia dokładnego adresu - zaznaczony obszar to okolica nieruchomości (promień ok. ${APPROXIMATE_LOCATION_RADIUS_M} m).`
                : 'Kliknij mapę, aby otworzyć dokładny punkt w Google Maps.'}
            </p>
            <div className="listing-detail-meta-actions">
              <div className="listing-detail-meta">
                <span><Icon name="clock" /> {listingRelativeDate(listing.createdAt)}</span>
                <span>ID ogłoszenia: {listing.id}</span>
                <span><Icon name="eye" /> Wyświetlenia: {(listing.viewsCount ?? 0).toLocaleString('pl-PL')}</span>
                {listing.status !== 'APPROVED' && (
                  <span className={`ld-status ld-status-${listing.status.toLowerCase()}`}>{LISTING_STATUS_LABELS[listing.status]}</span>
                )}
              </div>
              <button
                type="button"
                className="listing-detail-report-btn"
                onClick={openReportModal}
                disabled={isOwner}
                title={isOwner ? OWNER_TOOL_HINT : undefined}
              >
                <Icon name="warning" /> Zgłoś
              </button>
            </div>
          </div>
        </div>

        <aside className="listing-detail-side">
          <div className="listing-detail-price-card">
            <div className="listing-detail-price-row">
              <strong>{formatPrice(listing.price)}{priceSuffix}</strong>
              {perMeter && <span>{perMeter}</span>}
            </div>

            <div className="listing-detail-stats">
              <div><Icon name="area" /><strong>{formatArea(listing.area)}</strong><span>Powierzchnia</span></div>
              <div><Icon name="plan" /><strong>{listing.rooms}</strong><span>Pokoje</span></div>
              {floorText && <div><Icon name="stairs" /><strong>{floorText}</strong><span>Piętro</span></div>}
              {listing.yearBuilt && <div><Icon name="calendar" /><strong>{listing.yearBuilt}</strong><span>Rok budowy</span></div>}
            </div>

            {isOwner && (
              <p className="listing-detail-owner-note">
                <Icon name="user" /> To Twoje ogłoszenie. Widzisz je dokładnie tak jak inni, ale narzędzia dla kupujących - kontakt, ulubione, alert ceny i zgłoszenie - są wyłączone.
              </p>
            )}

            <button
              type="button"
              className="listing-detail-primary"
              onClick={revealContact}
              disabled={isOwner}
              title={isOwner ? OWNER_TOOL_HINT : undefined}
            >
              {isPhoneRevealed
                ? (listing.contactPhone
                    ? <><Icon name="phone" /> {listing.contactPhone}</>
                    : <><Icon name="phone" /> Numer niedostępny - napisz wiadomość</>)
                : <><Icon name="phone" /> Skontaktuj się ze sprzedającym</>}
            </button>

            <button
              type="button"
              className="listing-detail-secondary"
              onClick={startChatWithSeller}
              disabled={isOwner}
              title={isOwner ? OWNER_TOOL_HINT : undefined}
            >
              <Icon name="message" /> Napisz wiadomość
            </button>

            {listing.offerType === 'SALE' && !isOwner && (
              <Link className="listing-detail-secondary" to={negotiationPath(listing.id)}>
                <Icon name="coin" /> Ile mogę utargować?
              </Link>
            )}

            <div className="listing-detail-seller-card">
              <Avatar className="listing-detail-seller-avatar" name={sellerName} image={listing.ownerAvatar} singleLetter />
              <div>
                <strong>{sellerName}</strong>
                <small>{sellerRole}</small>
                {sellerLastActiveText && <small className="listing-detail-seller-meta">{sellerLastActiveText}</small>}
                {sellerMemberSinceText && <small className="listing-detail-seller-meta">{sellerMemberSinceText}</small>}
                {isPhoneRevealed && listing.contactPhone && (
                  <a href={`tel:${listing.contactPhone.replace(/\s+/g, '')}`}><Icon name="phone" /> {listing.contactPhone}</a>
                )}
              </div>
            </div>

            {/* Profil sprzedajacego - ten sam widok, ktory otwiera sie z rozmowy w wiadomosciach.
                Ogloszenia bez konta w serwisie (dane demonstracyjne) nie maja profilu do pokazania. */}
            {listing.ownerId !== null && (
              <Link className="listing-detail-profile-btn" to={publicProfilePath(listing.ownerId)}>
                Wyświetl profil
              </Link>
            )}

            <div className="listing-detail-share">
              <strong>Udostępnij ofertę</strong>
              <div className="listing-detail-share-actions">
                <button type="button" onClick={copyShareLink} aria-label="Kopiuj link"><Icon name="link" /></button>
                <button type="button" onClick={() => openShareWindow(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`)} aria-label="Udostępnij na Facebooku"><Icon name="facebook" /></button>
                <button type="button" onClick={shareByEmail} aria-label="Udostępnij przez e-mail"><Icon name="message" /></button>
                <button type="button" onClick={() => openShareWindow(`https://wa.me/?text=${encodeURIComponent(`${listing.title} ${shareUrl}`)}`)} aria-label="Udostępnij na WhatsApp"><Icon name="whatsapp" /></button>
                <button type="button" onClick={shareViaSystem} aria-label="Więcej opcji">
                  <Icon name="dots" />
                </button>
              </div>
              {shareHint && <small className="listing-detail-share-hint">{shareHint}</small>}
            </div>

            <button
              type="button"
              className={`listing-detail-fav ${favorite ? 'active' : ''}`}
              onClick={() => onToggleFavorite(listing)}
              disabled={isOwner}
              title={isOwner ? OWNER_TOOL_HINT : undefined}
            >
              <Icon name={favorite ? 'heart-filled' : 'heart'} /> {favorite ? 'W ulubionych' : 'Dodaj do ulubionych'}
            </button>

            <button
              type="button"
              className={`listing-detail-alert ${listingAlertEnabled ? 'active' : ''}`}
              onClick={() => onToggleListingAlert(listing)}
              disabled={isOwner}
              title={isOwner ? OWNER_TOOL_HINT : undefined}
            >
              <Icon name="clock" /> {listingAlertEnabled ? 'Alert aktywny' : 'Utwórz alert ceny'}
            </button>
          </div>
          <BannerSlot slot="SIDEBAR" />
        </aside>
      </div>

      {sellerListings.length > 0 && (
        <section className="listing-detail-more">
          <h2>Inne oferty tego sprzedającego</h2>
          <div className="ld-more-list">
            {sellerListings.map((item) => (
              <Link key={item.id} className="ld-more-item" to={listingPath(item.id)}>
                <span className="ld-more-thumb" style={{ backgroundImage: `url(${item.coverPhoto ?? heroImage})` }} />
                <span className="ld-more-info">
                  <strong>{item.title}</strong>
                  <small>{[item.city, item.district].filter(Boolean).join(', ')}</small>
                  <small>{formatArea(item.area)} · {listingRoomsText(item.rooms)}</small>
                </span>
                <span className="ld-more-price">
                  {formatPrice(item.price)}{item.offerType === 'RENT' ? ' /mc' : ''}
                </span>
              </Link>
            ))}
          </div>
        </section>
      )}

      {isReportModalOpen && (
        <div className="report-user-overlay" role="dialog" aria-modal="true" aria-label="Zgłoś ogłoszenie" onClick={closeReportModal}>
          <div className={reportStep === 3 ? 'report-user-modal step-3' : 'report-user-modal'} onClick={(event) => event.stopPropagation()}>
            <button type="button" className="report-user-close" onClick={closeReportModal} disabled={reportSubmitting}>×</button>

            <h2>Zgłoś ogłoszenie</h2>

            {reportStep !== 3 && (
              <div className="report-user-progress" aria-label="Postęp zgłoszenia">
                <span className={reportStep >= 1 ? 'report-user-progress-segment active' : 'report-user-progress-segment'} />
                <span className={reportStep >= 2 ? 'report-user-progress-segment active' : 'report-user-progress-segment'} />
                <span className={reportStep >= 3 ? 'report-user-progress-segment active' : 'report-user-progress-segment'} />
              </div>
            )}

            {reportStep === 1 && (
              <>
                <h3>Dlaczego zgłaszasz to ogłoszenie?</h3>
                <p className="report-user-anon-note">Twoje zgłoszenie jest anonimowe. Dziękujemy za pomoc w utrzymaniu bezpiecznej społeczności.</p>

                <div className="report-user-reasons" role="radiogroup" aria-label="Wybierz powód zgłoszenia">
                  {listingReportReasons.map((reason) => (
                    <button
                      type="button"
                      key={reason.id}
                      className={selectedReportReason === reason.id ? 'active' : ''}
                      role="radio"
                      aria-checked={selectedReportReason === reason.id}
                      onClick={() => {
                        setSelectedReportReason(reason.id);
                        setReportSubmitError('');
                      }}
                    >
                      <span className="report-user-reason-icon"><Icon name={reason.icon} /></span>
                      <span className="report-user-reason-copy">
                        <strong>{reason.title}</strong>
                        <small>{reason.description}</small>
                      </span>
                      <i />
                    </button>
                  ))}
                </div>

                <button type="button" className="report-user-primary" onClick={() => setReportStep(2)}>Dalej</button>
              </>
            )}

            {reportStep === 2 && (
              <>
                <h3 className="report-user-step2-title">Podaj więcej szczegółów <em>(opcjonalnie)</em></h3>
                <p className="report-user-step2-intro">Im więcej informacji przekażesz, tym łatwiej będzie nam rozpatrzyć zgłoszenie ogłoszenia.</p>
                <p className="report-user-step2-intro"><strong>Ogłoszenie:</strong> {listing.title}</p>

                <label className="report-user-field-label" htmlFor="listing-report-details">Dodatkowe informacje</label>

                <div className="report-user-textarea-wrap">
                  <textarea
                    id="listing-report-details"
                    className="report-user-textarea"
                    placeholder="Opisz, co jest nieprawidłowe..."
                    value={reportDetails}
                    onChange={(event) => {
                      setReportDetails(event.target.value);
                      setReportSubmitError('');
                    }}
                    maxLength={500}
                  />
                  <small>{reportDetails.length}/500</small>
                </div>

                {needsMoreDetails && <p className="report-user-error">Dla opcji „Inny powód” wpisz minimum 10 znaków opisu.</p>}

                <label className="report-user-field-label">Dodaj zrzuty ekranu (opcjonalnie)</label>
                <p className="report-user-upload-note">Możesz dodać maks. 5 plików</p>

                <button type="button" className="report-user-upload" onClick={onChooseReportAttachments}>
                  <span><Icon name="document" /></span>
                  <strong>Kliknij lub przeciągnij pliki tutaj</strong>
                  <small>PNG, JPG, PDF do 10 MB</small>
                </button>
                <input
                  ref={reportAttachmentInputRef}
                  type="file"
                  accept=".png,.jpg,.jpeg,.pdf,image/png,image/jpeg,application/pdf"
                  multiple
                  onChange={onReportAttachmentsSelected}
                  hidden
                />

                {reportAttachments.length > 0 && (
                  <div className="report-user-files" aria-label="Dodane pliki">
                    {reportAttachments.map((file, index) => (
                      <p key={`${file.name}-${file.lastModified}`}>
                        <span>{file.name}</span>
                        <button type="button" onClick={() => removeReportAttachment(index)} aria-label={`Usuń plik ${file.name}`}>Usuń</button>
                      </p>
                    ))}
                  </div>
                )}

                {reportAttachmentError && <p className="report-user-error">{reportAttachmentError}</p>}
                {reportSubmitError && <p className="report-user-error">{reportSubmitError}</p>}

                <div className="report-user-actions">
                  <button type="button" className="report-user-secondary" onClick={() => setReportStep(1)} disabled={reportSubmitting}>Wróć</button>
                  <button type="button" className="report-user-primary" onClick={() => void submitReport()} disabled={!canSubmitReport}>
                    {reportSubmitting ? 'Wysyłanie...' : 'Dalej'}
                  </button>
                </div>
              </>
            )}

            {reportStep === 3 && (
              <>
                <div className="report-user-finish-hero" aria-hidden="true">
                  <span className="report-user-finish-icon"><Icon name="shield" /></span>
                </div>

                <h3 className="report-user-finish-title">Dziękujemy!<br />Twoje zgłoszenie zostało wysłane.</h3>
                <p className="report-user-finish-intro">Sprawdzimy je tak szybko, jak to możliwe.<br />W razie potrzeby podejmiemy odpowiednie kroki.</p>

                <div className="report-user-summary">
                  <strong>Podsumowanie zgłoszenia</strong>
                  <div className="report-user-summary-grid">
                    <span>Powód zgłoszenia:</span>
                    <b>{reportSubmittedReasonTitle || selectedReportReasonDetails?.title || 'Nie podano'}</b>
                    <span>Data zgłoszenia:</span>
                    <b>{reportSubmittedAt || 'Nie podano'}</b>
                  </div>
                  <p><Icon name="lock" /> Zgłoszenie jest anonimowe</p>
                  <small>Numer sprawy: #{reportCaseNumber || String(Date.now()).slice(-6)}</small>
                </div>

                <button type="button" className="report-user-primary" onClick={closeReportModal}>Zakończ</button>
              </>
            )}
          </div>
        </div>
      )}

      {isLightboxOpen && (
        <div className="listing-lightbox-overlay" role="dialog" aria-modal="true" aria-label="Podgląd zdjęcia" onClick={closeLightbox}>
          <div className="listing-lightbox-modal" onClick={(event) => event.stopPropagation()}>
            <button type="button" className="listing-lightbox-close" onClick={closeLightbox} aria-label="Zamknij podgląd">×</button>

            {gallery.length > 1 && (
              <button
                type="button"
                className="listing-lightbox-arrow listing-lightbox-prev"
                onClick={showPreviousLightboxPhoto}
                aria-label="Poprzednie zdjęcie"
              >
                <Icon name="chevron" />
              </button>
            )}

            <img className="listing-lightbox-image" src={gallery[lightboxPhotoIndex] ?? gallery[0]} alt={`Zdjęcie ${lightboxPhotoIndex + 1}`} />

            {gallery.length > 1 && (
              <button
                type="button"
                className="listing-lightbox-arrow listing-lightbox-next"
                onClick={showNextLightboxPhoto}
                aria-label="Następne zdjęcie"
              >
                <Icon name="chevron" />
              </button>
            )}

            <span className="listing-lightbox-counter">{lightboxPhotoIndex + 1} / {gallery.length}</span>
          </div>
        </div>
      )}
    </section>
  );
}

function AdminReportDetailsModal({
  report,
  onClose,
  onPreviewListing,
  isImageAttachment,
}: {
  report: AdminReportDetails;
  onClose: () => void;
  onPreviewListing: (() => void) | null;
  isImageAttachment: (attachment: AdminListingReportAttachment) => boolean;
}) {
  const attachments = report.attachments ?? [];
  const details = report.details?.trim() || 'Brak dodatkowego opisu od użytkownika.';
  const [activeAttachmentPreview, setActiveAttachmentPreview] = useState<string | null>(null);

  return (
    <div className="admin-preview-overlay" role="dialog" aria-modal="true" aria-label="Szczegóły zgłoszenia" onClick={onClose}>
      <div className="admin-report-details-modal" onClick={(event) => event.stopPropagation()}>
        <button type="button" className="admin-preview-close" onClick={onClose} aria-label="Zamknij szczegóły zgłoszenia">×</button>

        <div className="admin-report-details-head">
          <h2>Szczegóły zgłoszenia #{report.id}</h2>
          <em className={`admin-status ${report.status === 'OPEN' ? 'pending' : 'approved'}`}>
            {ADMIN_REPORT_STATUS_LABELS[report.status]}
          </em>
        </div>

        <div className="admin-report-details-grid">
          <article>
            <span>Powód zgłoszenia</span>
            <strong>{report.reasonTitle}</strong>
            <small>ID powodu: {report.reasonId}</small>
          </article>
          <article>
            <span>Zgłaszający</span>
            <strong>{report.reporterName || report.reporterEmail}</strong>
            <small>{report.reporterEmail}</small>
          </article>
          {report.facts.map((fact) => (
            <article key={fact.label}>
              <span>{fact.label}</span>
              <strong>{fact.title}</strong>
              <small>{fact.meta}</small>
            </article>
          ))}
        </div>

        <section className="admin-report-details-section">
          <h3>Opis od użytkownika</h3>
          <p>{details}</p>
        </section>

        {report.conversation && (
          <section className="admin-report-details-section">
            <h3>Rozmowa w chwili zgłoszenia</h3>
            {report.conversation.length === 0 ? (
              <p className="admin-empty" style={{ padding: 0, textAlign: 'left' }}>Zgłoszenie wysłano z pustej rozmowy.</p>
            ) : (
              <div className="admin-report-conversation">
                {report.conversation.map((message, index) => (
                  <article key={index} className={message.fromReporter ? 'from-reporter' : ''}>
                    <header>
                      <strong>{message.fromReporter ? (report.reporterName || report.reporterEmail) : report.conversationPartner}</strong>
                      {message.sentAt && <small>{formatAdminDate(message.sentAt)}</small>}
                    </header>
                    <p>{message.content || '(pusta wiadomość)'}</p>
                    {message.hasPhoto && <em><Icon name="upload" /> Wiadomość zawierała zdjęcie</em>}
                  </article>
                ))}
              </div>
            )}
          </section>
        )}

        <section className="admin-report-details-section">
          <h3>Załączniki</h3>
          {attachments.length === 0 && report.attachmentNames.length === 0 ? (
            <p className="admin-empty" style={{ padding: 0, textAlign: 'left' }}>Brak załączników.</p>
          ) : attachments.length === 0 ? (
            <div className="admin-report-attachments admin-report-attachments-fallback">
              {report.attachmentNames.map((name) => (
                <article key={name}>
                  <div className="admin-report-attachment-placeholder">
                    <Icon name="document" />
                  </div>
                  <strong>{name}</strong>
                  <small>Brak podglądu (starsze zgłoszenie)</small>
                </article>
              ))}
            </div>
          ) : (
            <div className="admin-report-attachments">
              {attachments.map((attachment, index) => {
                const imageAttachment = isImageAttachment(attachment) && Boolean(attachment.dataUrl);
                return (
                  <article key={`${attachment.fileName}-${index}`}>
                    {imageAttachment ? (
                      <button
                        type="button"
                        className="admin-report-attachment-preview"
                        onClick={() => setActiveAttachmentPreview(attachment.dataUrl ?? null)}
                        aria-label={`Powiększ załącznik ${attachment.fileName}`}
                      >
                        <img src={attachment.dataUrl ?? ''} alt={attachment.fileName} loading="lazy" />
                      </button>
                    ) : (
                      <div className="admin-report-attachment-placeholder">
                        <Icon name="document" />
                      </div>
                    )}
                    <strong>{attachment.fileName}</strong>
                    <small>{attachment.fileType || 'Nieznany typ pliku'}</small>
                  </article>
                );
              })}
            </div>
          )}
        </section>

        <div className="admin-preview-actions">
          {onPreviewListing && (
            <button type="button" className="admin-btn view" onClick={onPreviewListing}>
              Podgląd ogłoszenia
            </button>
          )}
          <button type="button" className="admin-btn" onClick={onClose}>Zamknij</button>
        </div>

        {activeAttachmentPreview && (
          <div
            className="admin-attachment-lightbox"
            role="dialog"
            aria-modal="true"
            aria-label="Powiększony podgląd załącznika"
            onClick={(event) => {
              event.stopPropagation();
              setActiveAttachmentPreview(null);
            }}
          >
            <div className="admin-attachment-lightbox-modal" onClick={(event) => event.stopPropagation()}>
              <button
                type="button"
                className="admin-attachment-lightbox-close"
                onClick={() => setActiveAttachmentPreview(null)}
                aria-label="Zamknij podgląd załącznika"
              >
                ×
              </button>
              <img src={activeAttachmentPreview} alt="Powiększony załącznik" />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function AdminListingPreviewModal({ listingId, busy, onClose, onApprove, onReject }: {
  listingId: number;
  busy: boolean;
  onClose: () => void;
  onApprove: () => void;
  onReject: () => void;
}) {
  const [listing, setListing] = useState<ApiListingDetail | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [activePhoto, setActivePhoto] = useState(0);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    setError(null);
    setActivePhoto(0);
    apiFetch<ApiListingDetail>(`/listings/${listingId}`)
      .then((data) => { if (!cancelled) { setListing(data); setLoading(false); } })
      .catch((err) => { if (!cancelled) { setError(err instanceof Error ? err.message : 'Nie udało się wczytać ogłoszenia.'); setLoading(false); } });
    return () => { cancelled = true; };
  }, [listingId]);

  const gallery = listing && listing.photos.length > 0 ? listing.photos : [heroImage];

  const rows: Array<{ label: string; value: string }> = [];
  if (listing) {
    const pushRow = (label: string, value: string | number | null | undefined) => {
      if (value !== null && value !== undefined && `${value}`.trim() !== '') {
        rows.push({ label, value: `${value}` });
      }
    };
    const perMeter = listingPerMeter(listing.price, listing.area, basePricePerMeter);
    pushRow('Typ oferty', OFFER_TYPE_LABELS[listing.offerType]);
    pushRow('Nieruchomość', PROPERTY_TYPE_LABELS[listing.propertyType]);
    pushRow('Rynek', listing.market);
    if (perMeter) pushRow('Cena za m²', perMeter);
    pushRow('Powierzchnia', `${`${listing.area}`.replace('.', ',')} m²`);
    pushRow('Liczba pokoi', listing.rooms);
    const floorText = listingFloorText(listing.floor, listing.buildingFloors);
    if (floorText) pushRow('Piętro', floorText);
    pushRow('Rok budowy', listing.yearBuilt);
    pushRow('Stan', listing.condition);
    pushRow('Forma własności', listing.ownership);
    pushRow('Typ budynku', listing.buildingType);
    pushRow('Materiał', listing.buildingMaterial);
    pushRow('Okna', listing.windows);
    pushRow('Ekspozycja', listing.exposure);
    pushRow('Wysokość', listing.roomHeight ? `${listing.roomHeight} m` : null);
    pushRow('Umeblowanie', listing.furnishing);
    pushRow('Dostępne od', listing.availableFrom);
    if (listing.offerType === 'RENT' && listing.rentExtra) pushRow('Czynsz', formatPln(listing.rentExtra));
  }

  return (
    <div className="admin-preview-overlay" role="dialog" aria-modal="true" aria-label="Podgląd ogłoszenia" onClick={onClose}>
      <div className="admin-preview-modal" onClick={(event) => event.stopPropagation()}>
        <button type="button" className="admin-preview-close" onClick={onClose} aria-label="Zamknij podgląd">×</button>

        {loading ? (
          <p className="admin-empty">Wczytywanie ogłoszenia…</p>
        ) : error || !listing ? (
          <p className="admin-empty">{error ?? 'Nie znaleziono ogłoszenia.'}</p>
        ) : (
          <>
            <div className="admin-preview-content">
              <div className="admin-preview-gallery">
                <div className="admin-preview-main" style={{ backgroundImage: `url(${gallery[activePhoto] ?? gallery[0]})` }} />
                {gallery.length > 1 && (
                  <div className="admin-preview-thumbs">
                    {gallery.map((photo, index) => (
                      <button
                        type="button"
                        key={index}
                        className={index === activePhoto ? 'active' : ''}
                        style={{ backgroundImage: `url(${photo})` }}
                        onClick={() => setActivePhoto(index)}
                        aria-label={`Zdjęcie ${index + 1}`}
                      />
                    ))}
                  </div>
                )}
              </div>

              <div className="admin-preview-info">
                <div className="admin-preview-head">
                  <h2>{listing.title}</h2>
                  <em className={`admin-status ${listing.status.toLowerCase()}`}>{LISTING_STATUS_LABELS[listing.status]}</em>
                </div>
                <p className="admin-preview-loc">
                  {[listing.city, listing.district, listing.street && listing.building ? `${listing.street} ${listing.building}` : listing.street].filter(Boolean).join(', ') || listing.city}
                </p>
                <div className="admin-preview-price">
                  <strong>{formatPln(listing.price)}{listing.offerType === 'RENT' ? ' /mc' : ''}</strong>
                </div>

                <div className="admin-preview-specs">
                  {rows.map((row) => (
                    <div key={row.label}><span>{row.label}</span><strong>{row.value}</strong></div>
                  ))}
                </div>

                <div className="admin-preview-desc">
                  <h3>Opis</h3>
                  <SafeHtml className="rich-text" html={listing.description} />
                </div>

                {(listing.media.length > 0 || listing.amenities.length > 0) && (
                  <div className="admin-preview-chips">
                    {[...listing.media, ...listing.amenities].map((item) => (<span key={item}>{item}</span>))}
                  </div>
                )}

                <div className="admin-preview-contact">
                  <strong>Kontakt:</strong> {listing.contactName || '-'} {listing.contactPhone ? `• ${listing.contactPhone}` : ''} {listing.contactEmail ? `• ${listing.contactEmail}` : ''}
                  <br /><strong>Autor:</strong> {listing.ownerEmail || '-'}
                </div>
              </div>
            </div>

            <div className="admin-preview-actions">
              {listing.status !== 'APPROVED' && (
                <button type="button" className="admin-btn approve" disabled={busy} onClick={onApprove}>Zatwierdź</button>
              )}
              {listing.status !== 'REJECTED' && (
                <button type="button" className="admin-btn reject" disabled={busy} onClick={onReject}>Odrzuć</button>
              )}
              <button type="button" className="admin-btn" onClick={onClose}>Zamknij</button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

function Icon({ name }: { name: string }) {
  switch (name) {
    // Logotypy marek - wypelniane (fill), a nie obrysowane jak reszta ikon, wiec inline style
    // nadpisuje globalna regule `svg { fill:none; stroke:currentColor }`. Kolory oryginalne marek.
    case 'facebook':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true" style={{ fill: '#1877F2', stroke: 'none' }}>
          <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073Z" />
        </svg>
      );
    case 'whatsapp':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true" style={{ fill: '#25D366', stroke: 'none' }}>
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.885-9.885 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.359.101 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.335-1.652a11.882 11.882 0 005.71 1.446h.006c6.585 0 11.946-5.359 11.949-11.893a11.821 11.821 0 00-3.481-8.413Z" />
        </svg>
      );
    case 'linkedin':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true" style={{ fill: 'currentColor', stroke: 'none' }}>
          <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
        </svg>
      );
    case 'instagram':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true" style={{ fill: 'currentColor', stroke: 'none' }}>
          <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
        </svg>
      );
    case 'youtube':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true" style={{ fill: 'currentColor', stroke: 'none' }}>
          <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
        </svg>
      );
    case 'globe':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="12" cy="12" r="9" />
          <path d="M3 12h18M12 3c2.6 2.7 2.6 15.3 0 18M12 3c-2.6 2.7-2.6 15.3 0 18" />
        </svg>
      );
    case 'logo':
      return (
        <svg viewBox="0 0 28 28" aria-hidden="true">
          <path d="M4 13.2 14 5l10 8.2v9.3a1.5 1.5 0 0 1-1.5 1.5h-5.8v-7.2H11.3V24H5.5A1.5 1.5 0 0 1 4 22.5v-9.3Z" />
        </svg>
      );
    case 'heart':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M20.1 5.8a5.1 5.1 0 0 0-7.2 0l-.9.9-.9-.9a5.1 5.1 0 0 0-7.2 7.2L12 21l8.1-8a5.1 5.1 0 0 0 0-7.2Z" />
        </svg>
      );
    case 'heart-filled':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 21 3.9 13a5.1 5.1 0 0 1 7.2-7.2l.9.9.9-.9a5.1 5.1 0 1 1 7.2 7.2L12 21Z" />
        </svg>
      );
    case 'wifi':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 9a12 12 0 0 1 16 0M7.5 12.5a7 7 0 0 1 9 0M10.5 16a3 3 0 0 1 3 0M12 19h.1" />
        </svg>
      );
    case 'screen':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 5h16v12H4V5ZM9 21h6M12 17v4" />
        </svg>
      );
    case 'snow':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 3v18M5 7l14 10M19 7 5 17M8 4.5 12 8l4-3.5M8 19.5l4-3.5 4 3.5" />
        </svg>
      );
    case 'user':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 12.5a4.2 4.2 0 1 0 0-8.4 4.2 4.2 0 0 0 0 8.4Zm7.1 7.4a7.1 7.1 0 0 0-14.2 0" />
        </svg>
      );
    case 'search':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="m21 21-4.4-4.4m2.4-5.1a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z" />
        </svg>
      );
    case 'pin':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M19 10.2c0 5-7 10.8-7 10.8s-7-5.8-7-10.8a7 7 0 1 1 14 0Z" />
          <path d="M12 12.6a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Z" />
        </svg>
      );
    case 'tree':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 2.5c1.9 0 3.5 1.2 4.1 2.9 1.9.3 3.4 2 3.4 4 0 2.3-1.9 4.1-4.1 4.1H8.6C6.4 13.5 4.5 11.7 4.5 9.4c0-2 1.5-3.6 3.4-3.9C8.5 3.7 10.1 2.5 12 2.5Z" />
          <path d="M12 13.5V21M9.3 21h5.4" />
        </svg>
      );
    case 'apartment':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M6 21V4.5A1.5 1.5 0 0 1 7.5 3h9A1.5 1.5 0 0 1 18 4.5V21M3.5 21h17M9.5 7h.1M14.5 7h.1M9.5 11h.1M14.5 11h.1M9.5 15h.1M14.5 15h.1M10 21v-3.5h4V21" />
        </svg>
      );
    case 'building':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M5 21V5.8L12 3l7 2.8V21M9 9h.1M9 13h.1M9 17h.1M15 9h.1M15 13h.1M15 17h.1M3 21h18" />
        </svg>
      );
    case 'chevron':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="m7 10 5 5 5-5" />
        </svg>
      );
    case 'spark':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 3 9.9 9.9 3 12l6.9 2.1L12 21l2.1-6.9L21 12l-6.9-2.1L12 3Z" />
        </svg>
      );
    case 'chart':
    case 'trend':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 19V5M4 19h16M8 15l3.2-3.4 3 2.2L20 7" />
          <path d="M17 7h3v3" />
        </svg>
      );
    // Odpowiednik 'trend' dla spadkow - osie zostaja na miejscu, opada sama linia.
    case 'trend-down':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 19V5M4 19h16M8 9l3.2 3.4 3-2.2L20 17" />
          <path d="M17 17h3v-3" />
        </svg>
      );
    case 'target':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" />
          <path d="M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM12 2v4M12 18v4M2 12h4M18 12h4" />
        </svg>
      );
    case 'shuffle':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 7h3.2c2.4 0 3.7 1.3 5.1 3.8l.9 1.6c1.3 2.4 2.8 3.6 5.2 3.6H20" />
          <path d="m17 13 3 3-3 3" />
          <path d="M4 17h3.2c1.8 0 3-.7 4.1-2.1" />
          <path d="M13.3 9.1c1.2-1.4 2.6-2.1 4.5-2.1H20" />
          <path d="m17 4 3 3-3 3" />
        </svg>
      );
    case 'shield':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 21s7-3.6 7-10V5.8L12 3 5 5.8V11c0 6.4 7 10 7 10Z" />
          <path d="m9.2 12 1.8 1.8 4-4" />
        </svg>
      );
    case 'gear':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" />
          <path d="m19.4 15.2 1.1 1.9-2.3 2.3-1.9-1.1a8.5 8.5 0 0 1-2 .8l-.6 2.2h-3.4l-.6-2.2a8.5 8.5 0 0 1-2-.8l-1.9 1.1-2.3-2.3 1.1-1.9a8.5 8.5 0 0 1-.8-2l-2.2-.6V9.2l2.2-.6a8.5 8.5 0 0 1 .8-2L2.5 4.7l2.3-2.3 1.9 1.1a8.5 8.5 0 0 1 2-.8l.6-2.2h3.4l.6 2.2a8.5 8.5 0 0 1 2 .8l1.9-1.1 2.3 2.3-1.1 1.9a8.5 8.5 0 0 1 .8 2l2.2.6v3.4l-2.2.6a8.5 8.5 0 0 1-.8 2Z" />
        </svg>
      );
    case 'house':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M3 11.5 12 4l9 7.5V21h-6v-6H9v6H3v-9.5Z" />
        </svg>
      );
    case 'coin':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" />
          <path d="M14.8 8.8c-.7-.6-1.6-.9-2.7-.9-1.5 0-2.7.7-2.7 1.9 0 1.3 1.5 1.7 2.9 2 1.4.3 2.7.7 2.7 2.1s-1.3 2.2-3 2.2c-1.2 0-2.3-.4-3.1-1.2M12 6.5v11" />
        </svg>
      );
    case 'arrow':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M5 12h14M13 6l6 6-6 6" />
        </svg>
      );
    case 'flame':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 22c4.4-1.2 7-4.2 7-8.2 0-3.5-2.1-5.9-5-8.8.1 2-.8 3.5-2.4 4.8C10.5 7.9 9.4 6.2 8 5c.3 3.2-3 5.3-3 9 0 3.9 2.8 6.8 7 8Z" />
        </svg>
      );
    case 'sun':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10ZM12 1.8v2.4M12 19.8v2.4M4.8 4.8l1.7 1.7M17.5 17.5l1.7 1.7M1.8 12h2.4M19.8 12h2.4M4.8 19.2l1.7-1.7M17.5 6.5l1.7-1.7" />
        </svg>
      );
    case 'student':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="m3 8.5 9-4.5 9 4.5-9 4.5-9-4.5Z" />
          <path d="M7 11v4.2c0 1.6 2.2 2.8 5 2.8s5-1.2 5-2.8V11M21 8.5v5" />
        </svg>
      );
    case 'paw':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M8.6 10.5c1.1 0 2-1.2 2-2.8S9.7 4.9 8.6 4.9s-2 1.2-2 2.8.9 2.8 2 2.8ZM15.4 10.5c1.1 0 2-1.2 2-2.8s-.9-2.8-2-2.8-2 1.2-2 2.8.9 2.8 2 2.8ZM5.2 14.1c.9 0 1.7-1 1.7-2.2s-.8-2.2-1.7-2.2-1.7 1-1.7 2.2.8 2.2 1.7 2.2ZM18.8 14.1c.9 0 1.7-1 1.7-2.2s-.8-2.2-1.7-2.2-1.7 1-1.7 2.2.8 2.2 1.7 2.2Z" />
          <path d="M8 16.3c.6-1.8 2-3.2 4-3.2s3.4 1.4 4 3.2c.7 2.1-.8 3.7-2.5 2.9-.9-.4-2.1-.4-3 0-1.7.8-3.2-.8-2.5-2.9Z" />
        </svg>
      );
    case 'car':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 13.5 5.8 8c.3-.9 1.1-1.5 2-1.5h8.4c.9 0 1.7.6 2 1.5l1.8 5.5M3 13.5h18v5H3v-5Z" />
          <path d="M7 18.5v1M17 18.5v1M7.5 16h.1M16.5 16h.1" />
        </svg>
      );
    case 'bell':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M18 9a6 6 0 0 0-12 0c0 7-3 7-3 7h18s-3 0-3-7ZM13.7 21a2 2 0 0 1-3.4 0" />
        </svg>
      );
    case 'credit-card':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M3.5 6.5h17v11h-17v-11ZM3.5 10h17M7 15h3" />
        </svg>
      );
    case 'scale':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 3v18M5 7h14M7 7l-4 7h8L7 7ZM17 7l-4 7h8l-4-7ZM9 21h6" />
        </svg>
      );
    case 'paint':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 4h12v6H4V4ZM7 10v3h8v-3M11 13v7" />
          <path d="M9.5 20h3" />
        </svg>
      );
    case 'truck':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M3 6h11v9H3V6ZM14 9h4l3 3v3h-7V9Z" />
          <path d="M7 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM18 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
        </svg>
      );
    case 'sofa':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M6 11V8a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v3M4.5 11.5A2.5 2.5 0 0 0 2 14v4h20v-4a2.5 2.5 0 0 0-4.9-.7H6.9a2.5 2.5 0 0 0-2.4-1.8ZM5 18v2M19 18v2" />
        </svg>
      );
    case 'camera':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 8h4l1.5-2h5L16 8h4v11H4V8Z" />
          <path d="M12 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" />
        </svg>
      );
    case 'upload':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M7 18.5H6.4A4.4 4.4 0 0 1 6 9.7 6.2 6.2 0 0 1 18 8.4a4.8 4.8 0 0 1-.7 10.1H17" />
          <path d="M12 12v8M8.8 15.2 12 12l3.2 3.2" />
        </svg>
      );
    case 'city':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 21V7h6v14M10 21V3h10v18M2 21h20M7 11h.1M7 15h.1M14 7h.1M14 11h.1M14 15h.1M17 7h.1M17 11h.1M17 15h.1" />
        </svg>
      );
    case 'dots':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M5 12h.1M12 12h.1M19 12h.1" />
        </svg>
      );
    case 'dots-vertical':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 5h.1M12 12h.1M12 19h.1" />
        </svg>
      );
    case 'plus':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 5v14M5 12h14" />
        </svg>
      );
    case 'check':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="m5 12 4 4L19 6" />
        </svg>
      );
    case 'hammer':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="m14 5 5 5M12 7l5 5M4 20l8.5-8.5M14 5l2-2 5 5-2 2" />
        </svg>
      );
    case 'letter':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M6 20V4l12 16V4" />
        </svg>
      );
    case 'star':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="m12 3 2.7 5.5 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.8 1-6.1-4.4-4.3 6.1-.9L12 3Z" />
        </svg>
      );
    case 'phone':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 3.1 5.2 2 2 0 0 1 5.1 3h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.4 2.1L9.2 10.9a16 16 0 0 0 3.9 3.9l1.2-1.2a2 2 0 0 1 2.1-.4c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2Z" />
        </svg>
      );
    case 'message':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 5h16v11H8l-4 4V5Z" />
        </svg>
      );
    case 'group':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M16 20a4 4 0 0 0-8 0M12 12a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM20 20a3 3 0 0 0-3-3M17 5.4a3 3 0 0 1 0 5.2M4 20a3 3 0 0 1 3-3M7 5.4a3 3 0 0 0 0 5.2" />
        </svg>
      );
    case 'calendar':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M5 4h14v16H5V4ZM5 9h14M8 2v4M16 2v4" />
        </svg>
      );
    case 'document':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M7 3h7l4 4v14H7V3Z" />
          <path d="M14 3v5h5M10 13h6M10 17h4" />
        </svg>
      );
    case 'calculator':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M6 3h12v18H6V3ZM9 7h6M9 11h.1M12 11h.1M15 11h.1M9 15h.1M12 15h.1M15 15h.1M9 18h.1M12 18h.1M15 18h.1" />
        </svg>
      );
    case 'money':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 7h16v10H4V7ZM8 17a4 4 0 0 0-4-4M20 13a4 4 0 0 0-4 4M8 7a4 4 0 0 1-4 4M20 11a4 4 0 0 1-4-4" />
          <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
        </svg>
      );
    case 'warning':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 3 2.5 20h19L12 3Z" />
          <path d="M12 9v4M12 17h.1" />
        </svg>
      );
    case 'trash':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 7h16" />
          <path d="M9 7V5.5a1.5 1.5 0 0 1 1.5-1.5h3A1.5 1.5 0 0 1 15 5.5V7" />
          <path d="M7 7l.7 12.1A2 2 0 0 0 9.7 21h4.6a2 2 0 0 0 2-1.9L17 7" />
          <path d="M10 11v6M14 11v6" />
        </svg>
      );
    case 'mail':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 6h16v12H4V6Z" />
          <path d="m4 7 8 6 8-6" />
        </svg>
      );
    case 'tour':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 8a8 4 0 0 1 16 0c0 2.2-3.6 4-8 4S4 10.2 4 8Z" />
          <path d="M4 8v8c0 2.2 3.6 4 8 4s8-1.8 8-4V8M9 15l3-2 3 2" />
        </svg>
      );
    case 'tag':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M11 3.5H3.5V11l9.5 9.5 7.5-7.5L11 3.5Z" />
          <path d="M7.3 7.3h.01" />
        </svg>
      );
    case 'building-plus':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 20.5V6.2l8-2.7v10.1" />
          <path d="M4 20.5h7M7 8.4h.01M7 12h.01M7 15.6h.01" />
          <path d="M17 13.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Z" />
          <path d="M17 15.9v4.2M14.9 18h4.2" />
        </svg>
      );
    case 'megaphone':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 10v4a1 1 0 0 0 1 1h3l7 4V5L8 9H5a1 1 0 0 0-1 1Z" />
          <path d="M8 15v4h3v-3.3M18 9.5a3.2 3.2 0 0 1 0 5" />
        </svg>
      );
    case 'send':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M21 3 3 10.5l7 2.6L12.5 21 21 3Z" />
          <path d="M10 13.1 21 3" />
        </svg>
      );
    case 'lock':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M6 10h12v10H6V10ZM8.5 10V7.5a3.5 3.5 0 0 1 7 0V10" />
        </svg>
      );
    case 'clock':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" />
          <path d="M12 7v5l3 2" />
        </svg>
      );
    case 'link':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M10 13a5 5 0 0 0 7.1 0l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1" />
          <path d="M14 11a5 5 0 0 0-7.1 0l-2 2A5 5 0 0 0 12 20.1l1.1-1.1" />
        </svg>
      );
    case 'percent':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M19 5 5 19M7.5 9.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM16.5 18.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
        </svg>
      );
    case 'key':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M14.5 9.5a4.5 4.5 0 1 0-3.2 4.3L13 15.5h2v2h2v2h3v-3.2l-5.5-5.5Z" />
          <path d="M7.5 10.5h.1" />
        </svg>
      );
    case 'eye':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z" />
          <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
        </svg>
      );
    case 'list':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M8 6h13M8 12h13M8 18h13M3 6h.1M3 12h.1M3 18h.1" />
        </svg>
      );
    case 'rows':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      );
    case 'grid':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" />
        </svg>
      );
    case 'moon':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M19 14.5A8.5 8.5 0 1 1 9.5 5a7 7 0 0 0 9.5 9.5Z" />
        </svg>
      );
    // Powierzchnia (metraz) - naroznikowe ramki jak "obszar", czysty styl liniowy.
    case 'area':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 9V5a1 1 0 0 1 1-1h4M15 4h4a1 1 0 0 1 1 1v4M20 15v4a1 1 0 0 1-1 1h-4M9 20H5a1 1 0 0 1-1-1v-4" />
        </svg>
      );
    // Liczba pokoi - rzut pomieszczen (plan) ze scianka i przejsciem.
    case 'plan':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 4h16v16H4Z M12 4v7 M4 14h6 M14 14h6" />
        </svg>
      );
    // Pietro - schody.
    case 'stairs':
      return (
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M3 19h4v-4h4v-4h4v-4h4" />
        </svg>
      );
    default:
      return null;
  }
}

export default App;