// Brisas do Lago — mapa técnico do empreendimento
// Posições dos lotes calculadas a partir de quadras em coords mundo (1400x1000).
// Style modes: 'tecnico' (planta técnica), 'esquematico' (cards limpos), 'isometrico' (3D leve).

// ─────────────────────────────────────────────────────────────────────────
// LAYOUT DAS QUADRAS — cada quadra é um polígono em coords mundo
// Lotes são fatiados ao longo de uma "direção" dada por dois pontos âncora
// ─────────────────────────────────────────────────────────────────────────

// Define cada quadra como uma sequência de 4 vértices (polígono) + a direção
// de fatiamento (qual aresta corresponde à frente dos lotes).
// O fatiamento é feito proporcionalmente à frente de cada lote.

const QLAYOUTS = {
  // Quadra A: arco curvado superior, lotes 1-20 (20 lotes)
  // Posicionada em cima formando um arco suave
  A: {
    // 20 segmentos ao longo de uma curva — vamos definir como uma sequência de
    // polígonos individuais ao invés de um único polígono fatiado, porque é uma curva
    type: 'arc',
    range: [1, 20],
    // anchor points para o arco (frente dos lotes)
    front: [
      [100, 110], [180, 105], [260, 102], [340, 100], [420, 100],
      [500, 102], [580, 106], [660, 112], [740, 120], [820, 132]
    ],
    // back: fundo (mais para cima)
    back: [
      [100, 60], [180, 55], [260, 52], [340, 50], [420, 50],
      [500, 52], [580, 55], [660, 60], [740, 66], [820, 76]
    ],
    // segunda metade do arco — desce pela direita
    front2: [
      [820, 132], [880, 160], [925, 200], [955, 250], [970, 305],
      [970, 360], [955, 415], [925, 465], [880, 510], [820, 545],
      [740, 565]
    ],
    back2: [
      [820, 76], [890, 100], [945, 145], [985, 205], [1010, 280],
      [1015, 360], [1005, 440], [975, 510], [930, 575], [865, 620],
      [780, 642]
    ]
  },
  // Quadra B: bloco abaixo da extremidade leste de A (lotes 21-25)
  B: {
    type: 'rect',
    range: [21, 25],
    p: [[200, 200], [600, 200], [600, 290], [200, 290]],
    sliceAxis: 'x', // horizontal: lotes lado a lado
  },
  // Quadra C: pequeno bloco (lotes 26-30)
  C: {
    type: 'rect',
    range: [26, 30],
    p: [[200, 320], [600, 320], [600, 410], [200, 410]],
    sliceAxis: 'x',
  },
  // Quadra D: bloco vertical à direita (lotes 31-40)
  D: {
    type: 'rect',
    range: [31, 40],
    p: [[640, 200], [840, 200], [840, 720], [640, 720]],
    sliceAxis: 'y',
  },
  // Quadra E: bloco horizontal meio (lotes 41-48)
  E: {
    type: 'rect',
    range: [41, 48],
    p: [[120, 450], [580, 450], [580, 540], [120, 540]],
    sliceAxis: 'x',
  },
  // Quadra F: pequeno bloco (lotes 49-52)
  F: {
    type: 'rect',
    range: [49, 52],
    p: [[120, 570], [380, 570], [380, 660], [120, 660]],
    sliceAxis: 'x',
  },
  // Quadra G: bloco horizontal lower (lotes 53-62)
  G: {
    type: 'rect',
    range: [53, 62],
    p: [[120, 690], [600, 690], [600, 780], [120, 780]],
    sliceAxis: 'x',
  },
  // Quadra H: lote único grande perto do lago (63)
  H: {
    type: 'rect',
    range: [63, 63],
    p: [[640, 750], [840, 750], [840, 870], [640, 870]],
    sliceAxis: 'x',
  },
  // Quadra I: bloco perto do lago (64-74)
  I: {
    type: 'rect',
    range: [64, 74],
    p: [[880, 200], [1080, 200], [1080, 720], [880, 720]],
    sliceAxis: 'y',
  },
  // Quadra J: lakeside row (75-83)
  J: {
    type: 'rect',
    range: [75, 83],
    p: [[1140, 200], [1320, 200], [1320, 720], [1140, 720]],
    sliceAxis: 'y',
  },
  // Quadra K: lakeside premium (84-91)
  K: {
    type: 'rect',
    range: [84, 91],
    p: [[120, 820], [880, 820], [880, 920], [120, 920]],
    sliceAxis: 'x',
  },
  // Quadra L: lakeside end (92-95)
  L: {
    type: 'rect',
    range: [92, 95],
    p: [[920, 800], [1320, 800], [1320, 920], [920, 920]],
    sliceAxis: 'x',
  },
};

// ─────────────────────────────────────────────────────────────────────────
// Gera os polígonos individuais de cada lote
// ─────────────────────────────────────────────────────────────────────────
function gerarPolígonosLotes(LOTES) {
  const result = {};

  for (const [quadra, layout] of Object.entries(QLAYOUTS)) {
    const lotesDestaQ = LOTES.filter(l => l.quadra === quadra)
      .sort((a, b) => a.numero - b.numero);

    if (layout.type === 'arc') {
      // 20 lotes na Quadra A: 10 no arco superior (front+back) + 10 na descida (front2+back2)
      // Distribuir proporcionalmente à frente
      const primeiros10 = lotesDestaQ.slice(0, 10);
      const segundos10 = lotesDestaQ.slice(10, 20);
      sliceArc(primeiros10, layout.front, layout.back, result);
      sliceArc(segundos10, layout.front2, layout.back2, result);
    } else if (layout.type === 'rect') {
      sliceRect(lotesDestaQ, layout.p, layout.sliceAxis, result);
    }
  }
  return result;
}

function sliceArc(lotes, front, back, result) {
  // front e back têm N+1 pontos âncora; queremos N segmentos
  // se o número de pontos < lotes+1, interpolar
  const nLotes = lotes.length;
  const totalFrente = lotes.reduce((s, l) => s + l.frente, 0);
  // Compute cumulative fractions
  let cum = 0;
  // Build smooth bezier-like sample points
  const frontPts = sampleCurve(front, nLotes + 1);
  const backPts = sampleCurve(back, nLotes + 1);

  // Atribuir cada lote a um segmento (sem proporcionalidade complexa — segmentos iguais)
  for (let i = 0; i < nLotes; i++) {
    const lote = lotes[i];
    const poly = [
      frontPts[i],
      frontPts[i + 1],
      backPts[i + 1],
      backPts[i]
    ];
    result[lote.numero] = poly;
  }
}

function sampleCurve(pts, n) {
  // Interpola linearmente entre os pontos âncora para n+1 amostras igualmente espaçadas
  if (pts.length === n) return pts;
  const result = [];
  for (let i = 0; i < n; i++) {
    const t = (i / (n - 1)) * (pts.length - 1);
    const idx = Math.floor(t);
    const frac = t - idx;
    if (idx >= pts.length - 1) {
      result.push(pts[pts.length - 1]);
    } else {
      const a = pts[idx], b = pts[idx + 1];
      result.push([a[0] + (b[0] - a[0]) * frac, a[1] + (b[1] - a[1]) * frac]);
    }
  }
  return result;
}

function sliceRect(lotes, p, axis, result) {
  // p = [tl, tr, br, bl]
  const [tl, tr, br, bl] = p;
  const nLotes = lotes.length;
  const totalFrente = lotes.reduce((s, l) => s + l.frente, 0);

  let cum = 0;
  for (let i = 0; i < nLotes; i++) {
    const lote = lotes[i];
    const t0 = cum / totalFrente;
    cum += lote.frente;
    const t1 = cum / totalFrente;

    let poly;
    if (axis === 'x') {
      // fatia vertical
      const x0_top = tl[0] + (tr[0] - tl[0]) * t0;
      const x1_top = tl[0] + (tr[0] - tl[0]) * t1;
      const x0_bot = bl[0] + (br[0] - bl[0]) * t0;
      const x1_bot = bl[0] + (br[0] - bl[0]) * t1;
      const y_top = tl[1] + (tr[1] - tl[1]) * ((t0 + t1) / 2);
      const y_bot = bl[1] + (br[1] - bl[1]) * ((t0 + t1) / 2);
      poly = [
        [x0_top, tl[1]],
        [x1_top, tr[1]],
        [x1_bot, br[1]],
        [x0_bot, bl[1]]
      ];
    } else {
      // fatia horizontal
      const y0_l = tl[1] + (bl[1] - tl[1]) * t0;
      const y1_l = tl[1] + (bl[1] - tl[1]) * t1;
      const y0_r = tr[1] + (br[1] - tr[1]) * t0;
      const y1_r = tr[1] + (br[1] - tr[1]) * t1;
      poly = [
        [tl[0], y0_l],
        [tr[0], y0_r],
        [tr[0], y1_r],
        [tl[0], y1_l]
      ];
    }
    result[lote.numero] = poly;
  }
}

// Cálculo do centroide de um polígono (para colocar números/marcadores)
function centroid(poly) {
  let x = 0, y = 0;
  for (const [px, py] of poly) {
    x += px;
    y += py;
  }
  return [x / poly.length, y / poly.length];
}

// ─────────────────────────────────────────────────────────────────────────
// CORES POR STATUS
// ─────────────────────────────────────────────────────────────────────────
const STATUS_COLORS = {
  disponivel: { fill: '#FBF6EC', stroke: '#2D4F3C', text: '#1A2E2A' },
  reservado:  { fill: '#F5C99A', stroke: '#A8632F', text: '#5C2F12' },
  negociacao: { fill: '#BFD4DD', stroke: '#3B6B7E', text: '#1F3D49' },
  vendido:    { fill: '#C7CFC8', stroke: '#6E7B72', text: '#3A4640' },
};

const STATUS_LABELS = {
  disponivel: 'Disponível',
  reservado:  'Reservado',
  negociacao: 'Em negociação',
  vendido:    'Vendido',
};

// ─────────────────────────────────────────────────────────────────────────
// MAPA — componente principal
// ─────────────────────────────────────────────────────────────────────────
function MapaLoteamento({
  estilo = 'tecnico',
  filtroStatus = null,
  filtroVista = null,
  selecionado = null,
  hover = null,
  onSelect,
  onHover,
  className,
  compacto = false,
}) {
  const LOTES = window.BL.LOTES;
  const poligonos = React.useMemo(() => gerarPolígonosLotes(LOTES), [LOTES]);

  const isIso = estilo === 'isometrico';

  // Aplicar transformação isométrica
  const transform = isIso
    ? 'matrix(1, 0.18, -0.55, 0.78, 350, -40)'
    : '';

  return (
    <svg
      className={className}
      viewBox="0 0 1400 1000"
      xmlns="http://www.w3.org/2000/svg"
      style={{display:'block', width:'100%', height:'auto'}}
    >
      <defs>
        <pattern id="grass" width="40" height="40" patternUnits="userSpaceOnUse">
          <rect width="40" height="40" fill="#E4DFCC"/>
          <circle cx="10" cy="14" r="1.2" fill="#A8B89A" opacity="0.5"/>
          <circle cx="28" cy="8" r="0.9" fill="#A8B89A" opacity="0.4"/>
          <circle cx="22" cy="32" r="1.1" fill="#A8B89A" opacity="0.5"/>
          <circle cx="6" cy="34" r="0.8" fill="#A8B89A" opacity="0.4"/>
        </pattern>
        <pattern id="water" width="60" height="20" patternUnits="userSpaceOnUse">
          <rect width="60" height="20" fill="#7FA7B8"/>
          <path d="M0 10 Q15 6, 30 10 T60 10" stroke="#A6C2CF" strokeWidth="1" fill="none" opacity="0.6"/>
          <path d="M0 16 Q15 12, 30 16 T60 16" stroke="#A6C2CF" strokeWidth="1" fill="none" opacity="0.4"/>
        </pattern>
        <pattern id="forest" width="30" height="30" patternUnits="userSpaceOnUse">
          <rect width="30" height="30" fill="#7A9070"/>
          <circle cx="8" cy="10" r="4" fill="#5E7558" opacity="0.5"/>
          <circle cx="22" cy="20" r="5" fill="#5E7558" opacity="0.5"/>
          <circle cx="14" cy="24" r="3" fill="#5E7558" opacity="0.5"/>
        </pattern>
        <pattern id="hatch" width="6" height="6" patternUnits="userSpaceOnUse">
          <path d="M-1,1 l2,-2 M0,6 l6,-6 M5,7 l2,-2" stroke="#6E7B72" strokeWidth="0.8" opacity="0.3"/>
        </pattern>
        <filter id="lotShadow" x="-10%" y="-10%" width="120%" height="120%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
          <feOffset dx="0" dy="2" result="offsetblur"/>
          <feComponentTransfer><feFuncA type="linear" slope="0.3"/></feComponentTransfer>
          <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </defs>

      {/* Fundo: terreno */}
      <rect width="1400" height="1000" fill={estilo === 'esquematico' ? '#F3EDE0' : 'url(#grass)'}/>

      {/* Cinturão verde APP (norte) */}
      <path d="M 0 0 L 1400 0 L 1400 50 Q 700 80, 0 50 Z"
            fill={estilo === 'esquematico' ? '#D4E0CB' : 'url(#forest)'} opacity="0.85"/>

      {/* Cinturão verde APP (oeste/leste laterais) */}
      <path d="M 0 50 L 60 80 L 70 800 L 0 950 Z"
            fill={estilo === 'esquematico' ? '#D4E0CB' : 'url(#forest)'} opacity="0.85"/>

      <g transform={transform}>

      {/* Lago (Lagoa do Cassó) — borda sul/sudeste */}
      <path d="M 100 950 Q 700 970, 1300 940 L 1400 980 L 1400 1000 L 0 1000 L 0 950 Z"
            fill={estilo === 'esquematico' ? '#A8C8D8' : 'url(#water)'} />

      {/* Píer */}
      <g>
        <rect x="700" y="935" width="14" height="60" fill="#8B6F47" stroke="#5C4730" strokeWidth="1"/>
        <rect x="685" y="990" width="44" height="8" fill="#8B6F47" stroke="#5C4730" strokeWidth="1"/>
        {!compacto && (
          <text x="740" y="980" fontSize="13" fill="#F3EDE0" fontFamily="Manrope, sans-serif" fontWeight="600">
            Píer privativo
          </text>
        )}
      </g>

      {/* Ruas — desenhar como linhas com nomes */}
      <g stroke="#D9CDB4" strokeWidth="22" fill="none" opacity="0.9">
        {/* Av. Fátima Costa — entrada esquerda */}
        <line x1="60" y1="0" x2="60" y2="950"/>
        {/* Rua das Trilhas — entre A e B/C */}
        <path d="M 80 180 L 620 180"/>
        {/* Rua das Árvores — entre B/C/E... */}
        <path d="M 80 430 L 620 430"/>
        {/* Rua dos Ventos — entre E e G */}
        <path d="M 80 560 L 620 560"/>
        {/* Rua do Lago — entre G e K */}
        <path d="M 80 800 L 880 800"/>
        {/* Rua dos Pássaros — vertical entre A/D/I/J */}
        <path d="M 620 180 L 620 800"/>
        {/* Rua do Sol — vertical entre D e I */}
        <path d="M 860 180 L 860 800"/>
        {/* Rua da Lua — vertical entre I e J */}
        <path d="M 1110 180 L 1110 800"/>
        {/* Rua dos Peixes — borda leste */}
        <path d="M 1340 180 L 1340 800"/>
        {/* Rua dos Lençóis — interna pequena */}
        <path d="M 380 560 L 380 800"/>
        {/* Rua Cassó — paralela ao lago */}
        <path d="M 80 940 L 1340 940"/>
      </g>
      <g stroke="#F3EDE0" strokeWidth="1" strokeDasharray="6 4" fill="none">
        {/* Linha tracejada central das ruas */}
        <line x1="60" y1="0" x2="60" y2="950"/>
        <path d="M 80 180 L 620 180"/>
        <path d="M 80 430 L 620 430"/>
        <path d="M 80 560 L 620 560"/>
        <path d="M 80 800 L 880 800"/>
        <path d="M 620 180 L 620 800"/>
        <path d="M 860 180 L 860 800"/>
        <path d="M 1110 180 L 1110 800"/>
        <path d="M 1340 180 L 1340 800"/>
        <path d="M 380 560 L 380 800"/>
        <path d="M 80 940 L 1340 940"/>
      </g>

      {/* Portaria */}
      <g>
        <rect x="36" y="478" width="48" height="44" fill="#2D4F3C" stroke="#1A2E2A" strokeWidth="1"/>
        {!compacto && (
          <text x="38" y="540" fontSize="10" fill="#1A2E2A" fontFamily="Manrope, sans-serif" fontWeight="600">
            Portaria 24h
          </text>
        )}
      </g>

      {/* Estacionamento 40 vagas */}
      <g>
        <rect x="100" y="800" width="280" height="20" fill="#C9BFA8" stroke="#9B927A" strokeWidth="1"/>
        {Array.from({length: 14}).map((_, i) => (
          <line key={i} x1={100 + 20 * (i+1)} y1="800" x2={100 + 20 * (i+1)} y2="820" stroke="#9B927A" strokeWidth="0.7"/>
        ))}
        {!compacto && (
          <text x="106" y="830" fontSize="9" fill="#5C6B62" fontFamily="Manrope, sans-serif">40 vagas</text>
        )}
      </g>

      {/* Quadra poliesportiva */}
      <g>
        <rect x="420" y="800" width="180" height="30" fill="#C97B4A" stroke="#8B5024" strokeWidth="1" opacity="0.85"/>
        {!compacto && (
          <text x="430" y="820" fontSize="10" fill="#F3EDE0" fontFamily="Manrope, sans-serif" fontWeight="600">
            Quadra poliesportiva
          </text>
        )}
      </g>

      {/* LOTES */}
      <g>
        {LOTES.map(lote => {
          const poly = poligonos[lote.numero];
          if (!poly) return null;
          const isSel = selecionado === lote.numero;
          const isHov = hover === lote.numero;
          const dimmed = (filtroStatus && filtroStatus !== lote.status) ||
                         (filtroVista === 'lago' && !lote.vistaLago) ||
                         (filtroVista === 'interior' && lote.vistaLago);
          const colors = STATUS_COLORS[lote.status];
          const cent = centroid(poly);
          const pathD = 'M ' + poly.map(p => p.join(',')).join(' L ') + ' Z';
          return (
            <g key={lote.numero}
               style={{cursor:'pointer', opacity: dimmed ? 0.2 : 1, transition:'opacity .2s'}}
               onMouseEnter={() => onHover?.(lote.numero)}
               onMouseLeave={() => onHover?.(null)}
               onClick={() => onSelect?.(lote.numero)}>
              <path d={pathD}
                    fill={colors.fill}
                    stroke={isSel ? '#C97B4A' : colors.stroke}
                    strokeWidth={isSel ? 3 : isHov ? 1.8 : 1}
                    filter={isSel || isHov ? 'url(#lotShadow)' : undefined}/>
              {lote.status === 'vendido' && (
                <path d={pathD} fill="url(#hatch)"/>
              )}
              {!compacto && (poly[1][0] - poly[0][0] > 12 || poly[2][1] - poly[0][1] > 20) && (
                <text x={cent[0]} y={cent[1] + 3}
                      fontSize="9" fontFamily="Manrope, sans-serif" fontWeight="600"
                      textAnchor="middle" fill={colors.text}
                      pointerEvents="none">
                  {lote.numero}
                </text>
              )}
            </g>
          );
        })}
      </g>

      {/* Rótulos das quadras */}
      {!compacto && (
        <g fontFamily="'Cormorant Garamond', serif" fontSize="32" fontWeight="600" fill="#1A2E2A" opacity="0.18" pointerEvents="none">
          <text x="460" y="100">A</text>
          <text x="400" y="260">B</text>
          <text x="400" y="380">C</text>
          <text x="740" y="470">D</text>
          <text x="340" y="510">E</text>
          <text x="250" y="630">F</text>
          <text x="340" y="750">G</text>
          <text x="740" y="820">H</text>
          <text x="980" y="470">I</text>
          <text x="1230" y="470">J</text>
          <text x="490" y="890">K</text>
          <text x="1100" y="880">L</text>
        </g>
      )}

      </g> {/* fim isometric transform */}

      {/* Rótulos de ruas (não-isométricos sempre) */}
      {!compacto && estilo !== 'isometrico' && (
        <g fontFamily="Manrope, sans-serif" fontSize="9" fill="#5C6B62" fontWeight="500" letterSpacing="0.5" pointerEvents="none">
          <text x="64" y="20" transform="rotate(-90 64 20)" style={{transformOrigin: '64px 20px'}}>AV. FÁTIMA COSTA</text>
          <text x="220" y="176">RUA DAS TRILHAS</text>
          <text x="220" y="426">RUA DAS ÁRVORES</text>
          <text x="220" y="556">RUA DOS VENTOS</text>
          <text x="220" y="796">RUA DO LAGO</text>
          <text x="940" y="936">RUA CASSÓ</text>
          <text x="624" y="500" transform="rotate(-90 624 500)">RUA DOS PÁSSAROS</text>
          <text x="864" y="500" transform="rotate(-90 864 500)">RUA DO SOL</text>
          <text x="1114" y="500" transform="rotate(-90 1114 500)">RUA DA LUA</text>
        </g>
      )}

      {/* Bússola */}
      {!compacto && (
        <g transform="translate(1320, 60)" fontFamily="Manrope, sans-serif">
          <circle cx="0" cy="0" r="26" fill="#FBF6EC" stroke="#2D4F3C" strokeWidth="1"/>
          <path d="M 0 -18 L 5 0 L 0 18 L -5 0 Z" fill="#2D4F3C"/>
          <path d="M 0 -18 L 5 0 L 0 -2 Z" fill="#C97B4A"/>
          <text x="0" y="-32" fontSize="11" fontWeight="700" textAnchor="middle" fill="#2D4F3C">N</text>
        </g>
      )}
    </svg>
  );
}

// expose
window.MapaLoteamento = MapaLoteamento;
window.STATUS_COLORS = STATUS_COLORS;
window.STATUS_LABELS = STATUS_LABELS;