goodgo-platform/apps/web/components/map/listing-map.tsx

'use client';

import * as React from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import type { ListingDetail } from '@/lib/listings-api';

function formatPrice(priceVND: string): string {
  const num = Number(priceVND);
  if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)} tỷ`;
  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(0)} tr`;
  return num.toLocaleString('vi-VN');
}

interface ListingMapProps {
  listings: ListingDetail[];
  onMarkerClick?: (listing: ListingDetail) => void;
  className?: string;
}

interface MapMarker {
  listing: ListingDetail;
  lat: number;
  lng: number;
}

export function ListingMap({ listings, onMarkerClick, className }: ListingMapProps) {
  const [selectedMarker, setSelectedMarker] = React.useState<MapMarker | null>(null);
  const mapRef = React.useRef<HTMLDivElement>(null);

  // Parse listings with valid coordinates
  const markers = React.useMemo(() => {
    return listings
      .filter((l) => {
        // ListingDetail doesn't expose lat/lng directly, but the property might have it
        // For now we'll use a simple city-based mapping as fallback
        return true;
      })
      .map((listing, index) => {
        // Generate approximate coordinates based on city/district for demo
        // In production, these would come from the API
        const cityCoords: Record<string, [number, number]> = {
          'Hồ Chí Minh': [10.8231, 106.6297],
          'Hà Nội': [21.0285, 105.8542],
          'Đà Nẵng': [16.0544, 108.2022],
          'Nha Trang': [12.2388, 109.1967],
          'Cần Thơ': [10.0452, 105.7469],
        };
        const base = cityCoords[listing.property.city] || [10.8231, 106.6297];
        // Add small random offset per listing for visual spread
        const seed = listing.id.charCodeAt(0) + index;
        const lat = base[0] + ((seed % 100) - 50) * 0.001;
        const lng = base[1] + ((seed % 73) - 36) * 0.001;
        return { listing, lat, lng };
      });
  }, [listings]);

  const handleMarkerClick = (marker: MapMarker) => {
    setSelectedMarker(marker);
    onMarkerClick?.(marker.listing);
  };

  // CSS-based map visualization (no Mapbox dependency required)
  // Uses a relative coordinate system to position markers
  const bounds = React.useMemo(() => {
    if (markers.length === 0) return { minLat: 10, maxLat: 22, minLng: 102, maxLng: 110 };
    const lats = markers.map((m) => m.lat);
    const lngs = markers.map((m) => m.lng);
    const padding = 0.01;
    return {
      minLat: Math.min(...lats) - padding,
      maxLat: Math.max(...lats) + padding,
      minLng: Math.min(...lngs) - padding,
      maxLng: Math.max(...lngs) + padding,
    };
  }, [markers]);

  return (
    <div
      ref={mapRef}
      className={`relative overflow-hidden rounded-lg border bg-gradient-to-b from-blue-50 to-green-50 ${className || 'h-[500px]'}`}
    >
      {/* Grid lines for visual reference */}
      <div className="absolute inset-0 opacity-10">
        <div className="h-full w-full"
          style={{
            backgroundImage: 'linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px)',
            backgroundSize: '50px 50px',
          }}
        />
      </div>

      {/* Markers */}
      {markers.map((marker) => {
        const x = ((marker.lng - bounds.minLng) / (bounds.maxLng - bounds.minLng)) * 100;
        const y = ((bounds.maxLat - marker.lat) / (bounds.maxLat - bounds.minLat)) * 100;
        const isSelected = selectedMarker?.listing.id === marker.listing.id;

        return (
          <button
            key={marker.listing.id}
            className={`absolute z-10 -translate-x-1/2 -translate-y-full cursor-pointer transition-all hover:z-20 hover:scale-110 ${
              isSelected ? 'z-20 scale-110' : ''
            }`}
            style={{ left: `${Math.min(Math.max(x, 5), 95)}%`, top: `${Math.min(Math.max(y, 5), 90)}%` }}
            onClick={() => handleMarkerClick(marker)}
          >
            <div
              className={`rounded-full px-2 py-1 text-xs font-bold shadow-md ${
                isSelected
                  ? 'bg-primary text-primary-foreground ring-2 ring-primary/30'
                  : 'bg-white text-foreground hover:bg-primary hover:text-primary-foreground'
              }`}
            >
              {formatPrice(marker.listing.priceVND)}
            </div>
            <div className="mx-auto h-2 w-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-current" />
          </button>
        );
      })}

      {/* Selected marker popup */}
      {selectedMarker && (
        <div
          className="absolute z-30 w-64 -translate-x-1/2 rounded-lg border bg-white p-3 shadow-lg"
          style={{
            left: `${Math.min(Math.max(((selectedMarker.lng - bounds.minLng) / (bounds.maxLng - bounds.minLng)) * 100, 15), 85)}%`,
            top: `${Math.min(Math.max(((bounds.maxLat - selectedMarker.lat) / (bounds.maxLat - bounds.minLat)) * 100 - 15, 2), 60)}%`,
          }}
        >
          <button
            className="absolute right-1 top-1 rounded p-1 text-muted-foreground hover:bg-muted"
            onClick={(e) => { e.stopPropagation(); setSelectedMarker(null); }}
          >
            <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
          {selectedMarker.listing.property.media.length > 0 && (
            <img
              src={selectedMarker.listing.property.media[0]?.url}
              alt={selectedMarker.listing.property.title}
              className="mb-2 h-24 w-full rounded object-cover"
            />
          )}
          <p className="text-sm font-bold text-primary">
            {formatPrice(selectedMarker.listing.priceVND)} VNĐ
          </p>
          <p className="line-clamp-1 text-sm font-medium">{selectedMarker.listing.property.title}</p>
          <p className="line-clamp-1 text-xs text-muted-foreground">
            {selectedMarker.listing.property.district}, {selectedMarker.listing.property.city}
          </p>
          <div className="mt-2 flex gap-1">
            <Badge variant="secondary" className="text-xs">{selectedMarker.listing.property.areaM2} m²</Badge>
            {selectedMarker.listing.property.bedrooms != null && (
              <Badge variant="secondary" className="text-xs">{selectedMarker.listing.property.bedrooms} PN</Badge>
            )}
          </div>
          <a
            href={`/listings/${selectedMarker.listing.id}`}
            className="mt-2 block text-center text-xs font-medium text-primary hover:underline"
          >
            Xem chi tiết
          </a>
        </div>
      )}

      {/* Map controls */}
      <div className="absolute bottom-3 left-3 flex flex-col gap-1">
        <div className="rounded bg-white/90 px-2 py-1 text-xs text-muted-foreground shadow">
          {markers.length} bất động sản trên bản đồ
        </div>
      </div>

      {/* Empty state */}
      {markers.length === 0 && (
        <div className="absolute inset-0 flex items-center justify-center">
          <p className="text-muted-foreground">Không có bất động sản để hiển thị trên bản đồ</p>
        </div>
      )}
    </div>
  );
}