import React, { useState, useEffect, useRef, useMemo } from 'react';
import { format, parseISO } from 'date-fns';
import { X, MapPin, Loader2, Clock, Map as MapIcon, Navigation, Search } from 'lucide-react';
import { useTourStore } from '@/store/useTourStore';
import { useNotification } from '@/hooks/useNotification';
import { MapContainer, TileLayer, Marker, useMapEvents, useMap } from 'react-leaflet';
import L from 'leaflet';

// Cấu hình Icon mặc định để tránh crash Marker trong Modal
delete (L.Icon.Default.prototype as any)._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
});

// Component Helper xử lý việc chọn vị trí trên mini map bằng chuột phải
const MapPicker = ({ onPick, center }: { onPick: (latlng: L.LatLng) => void, center: [number, number] }) => {
  const [menuPos, setMenuPos] = useState<{ x: number, y: number, latlng: L.LatLng } | null>(null);
  const menuRef = useRef<HTMLDivElement>(null);
  const map = useMap();

  useMapEvents({
    contextmenu: (e) => {
      L.DomEvent.preventDefault(e.originalEvent);
      L.DomEvent.stopPropagation(e.originalEvent);
      setMenuPos({ x: e.containerPoint.x, y: e.containerPoint.y, latlng: e.latlng });
    },
    click: () => setMenuPos(null),
    dragstart: () => setMenuPos(null),
  });

  useEffect(() => {
    if (menuPos && menuRef.current) {
      L.DomEvent.disableClickPropagation(menuRef.current);
    }
  }, [menuPos]);

  useEffect(() => {
    map.setView(center, map.getZoom());
  }, [center]);

  return (
    <>
      {menuPos && (
        <div 
          ref={menuRef}
          className="absolute z-[3000] bg-white rounded-xl shadow-xl border border-gray-100 py-1 w-44 animate-in zoom-in-95 duration-200"
          style={{ top: menuPos.y, left: menuPos.x }}
        >
          <button 
            type="button"
            onClick={() => { onPick(menuPos.latlng); setMenuPos(null); }}
            className="w-full text-left px-4 py-2 hover:bg-blue-50 text-xs font-bold text-blue-600 flex items-center gap-2"
          >
            <MapPin className="w-3 h-3" /> Thêm vào chặng hiện tại
          </button>
        </div>
      )}
    </>
  );
};

export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editingLocation, isStartPoint = false, isEndPoint = false, isPublicView = false, onSuccess }: { isOpen: boolean, onClose: () => void, tourId: string, initialLegId?: string, editingLocation?: any, isStartPoint?: boolean, isEndPoint?: boolean, isPublicView?: boolean, onSuccess?: () => void }) => {
  const [formData, setFormData] = useState({
    name: '',
    address: '',
    latitude: 10.7769,
    longitude: 106.7009,
    type: 'VISIT',
    legId: '',
    note: '',
    expenseAmount: '',
    expenseCategory: 'OTHER',
    expenseDescription: '',
    expenseNote: '',
    paidById: '',
    plannedStart: '',
    plannedEnd: ''
  });
  const [isLoading, setIsLoading] = useState(false);
  const [searchResults, setSearchResults] = useState<any[]>([]);
  const [hasNoResults, setHasNoResults] = useState(false);
  const [isSearching, setIsSearching] = useState(false);
  const searchTimeout = useRef<any>(null);
  
  // Gom các selector lại để giảm số lượng Hook gọi nội bộ và tăng hiệu năng
  const { legs, addLocation, updateLocation, updateTourStartPoint, updateTourEndPoint, mapCenter, currentTour, userRole } = useTourStore();
  const notify = useNotification();

  // 1. Luôn khai báo Hook ở cấp cao nhất, không đặt code logic/return giữa các Hook
  useEffect(() => {
    if (isOpen) {
      if (editingLocation) {
        const leg = legs.find(l => l.id === editingLocation.legId);
        const expense = leg?.expenses?.find((e: any) => e.locationId === editingLocation.id);

        setFormData({
          name: editingLocation.name || '',
          address: editingLocation.address || '',
          latitude: editingLocation.latitude,
          longitude: editingLocation.longitude,
          type: editingLocation.type || 'VISIT',
          legId: editingLocation.legId || '',
          note: editingLocation.note || '',
          expenseAmount: expense?.amount ? Number(expense.amount).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") : '',
          expenseCategory: expense?.category || 'OTHER',
          expenseDescription: expense?.description || '',
          expenseNote: expense?.note || '',
          paidById: expense?.paidById || '',
          plannedStart: isStartPoint 
            ? (editingLocation.plannedEnd ? editingLocation.plannedEnd.slice(0, 16) : '')
            : (editingLocation.plannedStart ? editingLocation.plannedStart.slice(0, 16) : ''),
          plannedEnd: editingLocation.plannedEnd ? editingLocation.plannedEnd.slice(0, 16) : ''
        });
      } else {
        setFormData(prev => ({ 
          ...prev, 
          name: '', address: '', 
          legId: initialLegId || (legs.length > 0 ? legs[0].id : ''),
          note: '', expenseAmount: '', expenseCategory: 'OTHER',
          expenseDescription: '', expenseNote: '', paidById: '',
          plannedStart: '', plannedEnd: '' 
        }));
      }
    }
  }, [initialLegId, editingLocation, isOpen]);

  // Memoize tọa độ để tránh việc bản đồ tự động reset tâm khi re-render (ví dụ khi gõ tìm kiếm)
  const currentCoords = useMemo<[number, number]>(
    () => [formData.latitude, formData.longitude],
    [formData.latitude, formData.longitude]
  );

  // Tự động cập nhật vị trí bản đồ theo chặng được chọn (Lấy điểm cuối của chặng trước/hiện tại làm tham chiếu tiếp nối)
  useEffect(() => {
    if (isOpen && !editingLocation && formData.legId && !formData.name) {
      const selectedLeg = legs.find(l => l.id === formData.legId);
      
      if (selectedLeg) {
        if (selectedLeg.locations && selectedLeg.locations.length > 0) {
          // Di chuyển đến địa điểm cuối cùng của chặng hiện tại để người dùng thấy điểm nối tiếp
          const lastLoc = selectedLeg.locations[selectedLeg.locations.length - 1];
          setFormData(prev => ({
            ...prev,
            latitude: lastLoc.latitude,
            longitude: lastLoc.longitude
          }));
        } else {
          // Chặng trống -> Lấy địa điểm cuối của chặng trước làm tọa độ tiếp nối
          const currentLegIdx = legs.findIndex(l => l.id === formData.legId);
          const prevLeg = currentLegIdx > 0 ? legs[currentLegIdx - 1] : null;
          if (prevLeg && prevLeg.locations && prevLeg.locations.length > 0) {
            const lastLoc = prevLeg.locations[prevLeg.locations.length - 1];
            setFormData(prev => ({
              ...prev,
              latitude: lastLoc.latitude,
              longitude: lastLoc.longitude
            }));
          } else {
            // Nếu không có chặng trước hoặc chặng trước trống, mặc định dùng vị trí trung tâm hiện tại của tour
            setFormData(prev => ({ ...prev, latitude: mapCenter[0], longitude: mapCenter[1] }));
          }
        }
      }
    }
  }, [formData.legId, isOpen, editingLocation, legs, mapCenter]);

  // 2. Thực hiện các tính toán và hàm xử lý
  const currentLegId = formData.legId || (legs.length > 0 ? legs[0].id : '');
  const targetLeg = legs.find(l => l.id === currentLegId);
  const titleText = isStartPoint ? 'Thiết lập Điểm xuất phát' : 
                   isEndPoint ? 'Thiết lập Điểm kết thúc' :
                   editingLocation ? `Sửa địa điểm: ${editingLocation.name}` : 
                   (initialLegId ? `Thêm địa điểm cho ${targetLeg?.note || `Chặng ${targetLeg?.sequence}`}` : 'Thêm địa điểm mới');
  const buttonText = isStartPoint ? 'Xác nhận Điểm xuất phát' : 
                    isEndPoint ? 'Xác nhận Điểm kết thúc' :
                    editingLocation ? 'Cập nhật thay đổi' : (initialLegId ? 'Xác nhận thêm vào chặng' : 'Thêm địa điểm');

  const handleSearchLocation = (query: string) => {
    setFormData(prev => ({ ...prev, name: query }));

    if (searchTimeout.current) clearTimeout(searchTimeout.current);

    if (query.trim().length < 2) {
      setSearchResults([]);
      setIsSearching(false);
      setHasNoResults(false);
      return;
    }

    setIsSearching(true);
    setHasNoResults(false);
    searchTimeout.current = setTimeout(async () => {
      try {
        // Loại bỏ countrycodes=vn để tìm kiếm rộng hơn, thêm namedetails=1 để lấy tên chính xác
        const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=15&addressdetails=1&namedetails=1&accept-language=vi`, {
          headers: {
            'Accept-Language': 'vi'
          }
        });
        const data = await res.json();
        setSearchResults(data);
        setHasNoResults(data.length === 0);
      } catch (e) {
        console.error("Lỗi tìm kiếm địa điểm:", e);
      } finally {
        setIsSearching(false);
      }
    }, 500);
  };

  const selectSearchResult = (result: any) => {
    const lat = parseFloat(result.lat);
    const lon = parseFloat(result.lon);
    // Ưu tiên lấy tên từ namedetails nếu có, nếu không lấy phần đầu của display_name
    const locationName = result.namedetails?.name || result.display_name.split(',')[0];
    
    setFormData(prev => ({
      ...prev,
      name: locationName,
      address: result.display_name,
      latitude: lat,
      longitude: lon
    }));
    setSearchResults([]);
  };

  const handlePickLocation = async (latlng: L.LatLng) => {
    setFormData(prev => ({ ...prev, latitude: latlng.lat, longitude: latlng.lng }));
    
    // Tự động lấy tên địa điểm từ tọa độ vừa chọn
    try {
      const res = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${latlng.lat}&lon=${latlng.lng}`);
      const data = await res.json();
      const addr = data.address;
      const detectedName = addr.amenity || addr.building || addr.historic || addr.tourist || 
                    addr.shop || addr.office || addr.leisure || addr.attraction ||
                    addr.road || addr.neighbourhood || addr.suburb || 
                    data.display_name?.split(',')[0] || "";
      
      setFormData(prev => ({ ...prev, name: detectedName || prev.name, address: data.display_name || prev.address }));
    } catch (e) {}
  };

  const handleUseCurrentLocation = () => {
    if (!navigator.geolocation) {
      notify({ title: 'Thông báo', message: "Trình duyệt hoặc thiết bị của bạn không hỗ trợ định vị GPS.", type: 'info' });
      return;
    }

    // Kiểm tra môi trường Secure Context (HTTPS) - Bắt buộc cho Geolocation trên Mobile
    if (!window.isSecureContext) {
      alert("Tính năng định vị GPS yêu cầu kết nối bảo mật (HTTPS). Nếu bạn đang truy cập qua địa chỉ IP, vui lòng sử dụng HTTPS hoặc Localhost.");
      return;
    }

    navigator.geolocation.getCurrentPosition(
      async (pos) => {
        const latlng = L.latLng(pos.coords.latitude, pos.coords.longitude);
        const now = new Date();
        const formattedTime = format(now, "yyyy-MM-dd'T'HH:mm");

        setFormData(prev => ({
          ...prev,
          latitude: latlng.lat,
          longitude: latlng.lng,
          plannedStart: formattedTime
        }));

        // Tự động thực hiện reverse geocoding để lấy tên địa điểm và địa chỉ
        handlePickLocation(latlng);
      },
      (err) => {
        let errorMessage = "Không thể lấy vị trí: ";
        switch(err.code) {
          case err.PERMISSION_DENIED:
            errorMessage += "Bạn đã từ chối quyền truy cập vị trí.";
            break;
          case err.POSITION_UNAVAILABLE:
            errorMessage += "Thông tin vị trí không khả dụng.";
            break;
          case err.TIMEOUT:
            errorMessage += "Hết thời gian chờ yêu cầu định vị.";
            break;
          default: errorMessage += err.message;
        }
        notify({ title: 'Lỗi định vị', message: errorMessage, type: 'error' });
      },
      {
        enableHighAccuracy: true, // Ưu tiên dùng GPS thay vì Wifi/Cell tower
        timeout: 10000,           // Chờ tối đa 10 giây
        maximumAge: 0             // Không dùng vị trí cũ trong cache
      }
    );
  };

  // 3. Early return phải nằm SAU tất cả các khai báo Hook
  if (!isOpen || isPublicView) return null; // Do not render if public view

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    try {
      if (isStartPoint) {
        await updateTourStartPoint(tourId, {
          name: formData.name || "Điểm xuất phát",
          latitude: parseFloat(formData.latitude as any),
          longitude: parseFloat(formData.longitude as any),
          plannedEnd: formData.plannedStart,
        });
      } else if (isEndPoint) {
        await updateTourEndPoint(tourId, {
          name: formData.name || "Điểm kết thúc",
          latitude: parseFloat(formData.latitude as any),
          longitude: parseFloat(formData.longitude as any),
          plannedStart: formData.plannedStart,
        });
      } else {
        const payload: any = {
          ...formData,
          expenseAmount: formData.expenseAmount.replace(/\./g, ''), // Loại bỏ dấu chấm trước khi gửi
          legId: currentLegId,
          latitude: parseFloat(formData.latitude as any),
          longitude: parseFloat(formData.longitude as any),
        };

        if (editingLocation) {
          await updateLocation(editingLocation.id, payload);
        } else {
          await addLocation(tourId, payload);
        }
      }
      notify({ 
        title: 'Thành công', 
        message: isStartPoint ? 'Đã thiết lập điểm xuất phát.' : isEndPoint ? 'Đã thiết lập điểm kết thúc.' : editingLocation ? 'Đã cập nhật địa điểm.' : 'Đã thêm địa điểm mới.', 
        type: 'success' 
      });
      onSuccess?.(); // Gọi callback onSuccess sau khi thành công
      onClose();
    } catch (error) {
      notify({ title: 'Lỗi', message: 'Lỗi khi lưu địa điểm', type: 'error' });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 z-[2000] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" onClick={onClose} />
      <div className="relative w-full max-w-lg bg-white rounded-3xl shadow-2xl overflow-hidden p-8 max-h-[90vh] overflow-y-auto">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
            <MapIcon className="w-6 h-6 text-blue-600" /> {titleText}
          </h2>
          <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
            <X className="w-6 h-6 text-gray-400" />
          </button>
        </div>

        {/* Mini Map Picker */}
        <div className="h-64 w-full rounded-3xl overflow-hidden mb-6 border border-gray-100 relative shadow-xl group">
          {/* Map Search Bar Overlay - Tích hợp tìm kiếm trực tiếp trên bản đồ */}
          <div className="absolute top-3 left-3 right-3 z-[1001] pointer-events-none">
            <div className="relative max-w-sm pointer-events-auto">
              <div className="relative group">
                <input 
                  type="text"
                  placeholder="Tìm địa điểm trên bản đồ..."
                  className="w-full pl-11 pr-10 py-3 bg-white/95 backdrop-blur-md border border-white/20 rounded-2xl shadow-lg outline-none focus:ring-2 focus:ring-blue-500 transition-all text-sm font-bold text-gray-800"
                  value={formData.name}
                  onChange={e => handleSearchLocation(e.target.value)}
                />
                <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-500" />
                {isSearching ? (
                  <Loader2 className="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 animate-spin text-blue-500" />
                ) : formData.name && (
                  <button 
                    type="button"
                    onClick={() => { setFormData({...formData, name: ''}); setSearchResults([]); setHasNoResults(false); }}
                    className="absolute right-3 top-1/2 -translate-y-1/2 p-1.5 hover:bg-gray-100 rounded-full text-gray-400 transition-colors"
                  >
                    <X className="w-4 h-4" />
                  </button>
                )}
              </div>

              {/* Dropdown kết quả tìm kiếm ngay trong khung bản đồ */}
              {(searchResults.length > 0 || hasNoResults) && (
                <div className="absolute left-0 right-0 mt-2 bg-white/95 backdrop-blur-md border border-gray-100 rounded-2xl shadow-2xl overflow-hidden max-h-40 overflow-y-auto animate-in slide-in-from-top-2 duration-200">
                  {hasNoResults ? (
                    <div className="px-4 py-4 text-center text-gray-400 text-xs italic">Không tìm thấy địa điểm phù hợp...</div>
                  ) : (
                    searchResults.map((result, idx) => (
                      <button
                        key={idx}
                        type="button"
                        onClick={() => selectSearchResult(result)}
                        className="w-full text-left px-4 py-3 hover:bg-blue-50 border-b border-gray-50 last:border-0 transition-colors flex flex-col gap-0.5"
                      >
                        <div className="flex items-center justify-between gap-2">
                          <div className="font-bold text-xs text-gray-900 truncate">{result.namedetails?.name || result.display_name.split(',')[0]}</div>
                          {result.type && (
                            <span className="text-[8px] font-black uppercase text-blue-400 bg-blue-50 px-1.5 py-0.5 rounded border border-blue-100 shrink-0">{result.type}</span>
                          )}
                        </div>
                        <div className="text-[10px] text-gray-500 truncate leading-tight">{result.display_name}</div>
                      </button>
                    ))
                  )}
                </div>
              )}
            </div>
          </div>

          <MapContainer center={currentCoords} zoom={13} className="h-full w-full" zoomControl={false} attributionControl={false}>
            <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="" />
            <Marker position={currentCoords} />
            <MapPicker center={currentCoords} onPick={handlePickLocation} />
          </MapContainer>
          <div className="absolute bottom-2 left-2 z-[1000] bg-white/90 backdrop-blur-sm px-2 py-1 rounded-lg text-[10px] font-black text-gray-500 shadow-sm border border-gray-100">
            CHUỘT PHẢI ĐỂ CHỌN VỊ TRÍ
          </div>
        </div>

        {/* Nút lấy vị trí và thời gian hiện tại - Chỉ dành cho OWNER/MANAGER khi thêm mới */}
        {!editingLocation && (userRole === 'OWNER' || userRole === 'MANAGER') && (
          <button
            type="button"
            onClick={handleUseCurrentLocation}
            className="w-full mb-6 py-4 bg-indigo-50 hover:bg-indigo-100 text-indigo-600 rounded-2xl flex items-center justify-center gap-2 text-xs font-black uppercase tracking-widest border border-indigo-100 transition-all active:scale-95 shadow-sm"
          >
            <Navigation className="w-4 h-4 fill-current" /> Sử dụng vị trí & thời gian hiện tại
          </button>
        )}

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-bold text-gray-700 mb-1">Tên địa điểm</label>
            <input 
              required 
              placeholder="Tên địa điểm..."
              className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all font-bold" 
              value={formData.name} 
              onChange={e => setFormData({...formData, name: e.target.value})} 
            />
          </div>
          <div>
            <label className="block text-sm font-bold text-gray-700 mb-1">Địa chỉ</label>
            <input className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none" 
              value={formData.address} onChange={e => setFormData({...formData, address: e.target.value})} />
          </div>
          <div>
            <label className="block text-sm font-bold text-gray-700 mb-1">Ghi chú địa điểm / Dịch vụ sử dụng</label>
            <textarea className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none resize-none" rows={2}
              placeholder="Ví dụ: Ăn trưa tại quán X, thuê hướng dẫn viên..."
              value={formData.note} onChange={e => setFormData({...formData, note: e.target.value})} />
          </div>
          <div className="bg-blue-50/60 border border-blue-100 rounded-2xl p-4 space-y-3">
            <p className="text-xs font-black text-blue-500 uppercase tracking-widest">Chi phí nhanh tại điểm này</p>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-bold text-gray-600 mb-1">Số tiền (VNĐ)</label>
                <input type="text" className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
                  placeholder="0"
                  value={formData.expenseAmount} onChange={e => {
                    const rawValue = e.target.value.replace(/\D/g, ""); // Chỉ lấy số
                    const formattedValue = rawValue.replace(/\B(?=(\d{3})+(?!\d))/g, "."); // Thêm dấu chấm
                    setFormData({...formData, expenseAmount: formattedValue});
                  }} />
              </div>
              <div>
                <label className="block text-xs font-bold text-gray-600 mb-1">Loại dịch vụ</label>
                <select className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
                  value={formData.expenseCategory} onChange={e => setFormData({...formData, expenseCategory: e.target.value})}>
                  <option value="FOOD">Ăn uống</option>
                  <option value="TRANSPORT">Di chuyển</option>
                  <option value="ACCOMMODATION">Chỗ ở</option>
                  <option value="TICKET">Vé tham quan</option>
                  <option value="OTHER">Khác</option>
                </select>
              </div>
            </div>
            <div>
              <label className="block text-xs font-bold text-gray-600 mb-1">Dịch vụ / Mô tả</label>
              <input className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
                placeholder="Ví dụ: Ăn trưa, taxi, vé..."
                value={formData.expenseDescription} onChange={e => setFormData({...formData, expenseDescription: e.target.value})} />
            </div>
            <div>
              <label className="block text-xs font-bold text-gray-600 mb-1">Ghi chú chi phí</label>
              <textarea className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none resize-none text-sm" rows={2}
                placeholder="Ghi chú thêm..."
                value={formData.expenseNote} onChange={e => setFormData({...formData, expenseNote: e.target.value})} />
            </div>
            <div>
              <label className="block text-xs font-bold text-gray-600 mb-1">Thành viên đã thanh toán</label>
               <select className="w-full px-3 py-2 bg-white border border-gray-200 rounded-xl outline-none text-sm" 
                 value={formData.paidById} onChange={e => setFormData({...formData, paidById: e.target.value})}>
                 <option value="">-- Chọn người thanh toán --</option>
                 {currentTour?.participants?.filter((p: any) => p.user || p.displayName)?.map((p: any) => {
                   const name = p.user?.name || p.displayName;
                   const email = p.user?.email;
                   const label = [name, email && name ? `(${email})` : email].filter(Boolean).join(' ');
                   return (
                   <option key={p.id} value={p.userId || p.id}>{label || p.userId || p.id}</option>
                   );
                 })}
               </select>
            </div>
          </div>
          <div>
            <label className="block text-sm font-bold text-gray-700 mb-1">Gán vào chặng</label>
            <select required className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none"
              value={currentLegId} onChange={e => setFormData({...formData, legId: e.target.value})}>
              {legs.map(leg => (
                <option key={leg.id} value={leg.id}>
                  Chặng {leg.sequence}: {leg.note || 'Không có tên'} 
                  {leg.startDate ? ` (${format(parseISO(leg.startDate), 'dd/MM')})` : ''}
                </option>
              ))}
            </select>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-bold text-gray-700 mb-1">Vĩ độ</label>
              <input type="number" step="any" required className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none" 
                value={formData.latitude} onChange={e => setFormData({...formData, latitude: e.target.value as any})} />
            </div>
            <div>
              <label className="block text-sm font-bold text-gray-700 mb-1">Kinh độ</label>
              <input type="number" step="any" required className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none" 
                value={formData.longitude} onChange={e => setFormData({...formData, longitude: e.target.value as any})} />
            </div>
          </div>
          <div>
            <label className="block text-sm font-bold text-gray-700 mb-1">Loại</label>
            <select className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none" 
              value={formData.type} onChange={e => setFormData({...formData, type: e.target.value as any})}>
              <option value="VISIT">Tham quan</option>
              <option value="EAT">Ăn uống</option>
              <option value="REST">Nghỉ ngơi</option>
              <option value="MOVE">Di chuyển</option>
            </select>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-bold text-gray-700 mb-1">Bắt đầu</label>
              <input type="datetime-local" className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none" 
                value={formData.plannedStart} onChange={e => setFormData({...formData, plannedStart: e.target.value})} />
            </div>
          </div>
          <button disabled={isLoading} className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl flex items-center justify-center gap-2 mt-4">
            {isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : buttonText}
          </button>
        </form>
      </div>
    </div>
  );
};