gendesign/frontend/src/app/site-finder/page.tsx

"use client";

import Link from "next/link";
import { MapPin } from "lucide-react";

// ── Placeholder components ─────────────────────────────────────────────────
// Replaced in A2 with <EntryMap/>, <MapFilterBar/>, <RecentParcels/>

function MapPlaceholder() {
  return (
    <div
      style={{
        flex: 1,
        minHeight: 480,
        background: "var(--bg-card-alt)",
        border: "1px dashed var(--border-strong)",
        borderRadius: 12,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 8,
        color: "var(--fg-tertiary)",
        fontSize: 14,
      }}
    >
      <MapPin
        size={32}
        strokeWidth={1.5}
        style={{ color: "var(--fg-tertiary)" }}
      />
      <span>TODO A2: EntryMap — Leaflet full-screen ЕКБ + parcel layers</span>
      <span style={{ fontSize: 12 }}>
        Данные: GET /api/v1/parcels/by-bbox (B1 ready)
      </span>
    </div>
  );
}

function SidebarPlaceholder() {
  return (
    <aside
      style={{
        width: 360,
        flexShrink: 0,
        display: "flex",
        flexDirection: "column",
        gap: 12,
      }}
    >
      {/* TODO A2: <MapFilterBar/> */}
      <div
        style={{
          background: "var(--bg-card)",
          border: "1px solid var(--border-card)",
          borderRadius: 12,
          padding: "12px 16px",
          color: "var(--fg-tertiary)",
          fontSize: 13,
        }}
      >
        TODO A2: MapFilterBar — chips free / area / vri / district + counter
      </div>

      {/* TODO A2: <RecentParcels/> */}
      <div
        style={{
          background: "var(--bg-card)",
          border: "1px solid var(--border-card)",
          borderRadius: 12,
          padding: "12px 16px",
          color: "var(--fg-tertiary)",
          fontSize: 13,
        }}
      >
        TODO A2: RecentParcels — 3 строки из localStorage gd_recent_parcels
      </div>

      {/* TODO A2: <ParcelLegend/> */}
      <div
        style={{
          background: "var(--bg-card)",
          border: "1px solid var(--border-card)",
          borderRadius: 12,
          padding: "12px 16px",
          color: "var(--fg-tertiary)",
          fontSize: 13,
        }}
      >
        TODO A2: ParcelLegend — расраска статусов (свободные / в работе / ...)
      </div>
    </aside>
  );
}

// ── Page ──────────────────────────────────────────────────────────────────────

export default function SiteFinderPage() {
  return (
    <main
      style={{
        minHeight: "100vh",
        background: "var(--bg-app)",
        display: "flex",
        flexDirection: "column",
      }}
    >
      {/* Header */}
      <header
        style={{
          background: "var(--bg-card)",
          borderBottom: "1px solid var(--border-card)",
          padding: "12px 24px",
          display: "flex",
          alignItems: "center",
          gap: 16,
        }}
      >
        <Link
          href="/"
          style={{
            fontSize: 13,
            color: "var(--fg-secondary)",
            textDecoration: "none",
          }}
        >
          ← Главная
        </Link>
        <span style={{ color: "var(--border-soft)" }}>·</span>
        <h1
          style={{
            margin: 0,
            fontSize: 16,
            fontWeight: 600,
            color: "var(--fg-primary)",
          }}
        >
          SiteFinder · карта участков
        </h1>
        {/* TODO A4: <UserAvatar/> справа */}
      </header>

      {/* TODO A2: MapFilterBar top-bar с chips (free/area/vri/district) + counter «148 / 34 подходят» */}

      {/* Main layout: карта слева, sidebar справа */}
      <div
        style={{
          flex: 1,
          display: "flex",
          gap: 0,
          overflow: "hidden",
        }}
      >
        {/* Map area */}
        <div
          style={{
            flex: 1,
            display: "flex",
            padding: 16,
          }}
        >
          {/* TODO A2: replace with <EntryMap/> */}
          <MapPlaceholder />
        </div>

        {/* Right sidebar */}
        <div
          style={{
            padding: "16px 16px 16px 0",
          }}
        >
          {/* TODO A2: <MapFilterBar/> + <RecentParcels/> + <ParcelLegend/> */}
          <SidebarPlaceholder />
        </div>
      </div>

      {/* TODO A2: <ParcelDrawer/> — slide-in справа при клике на парцель (query ?selected=cad) */}
    </main>
  );
}