Cho phép chọn trực tiếp điểm trên bản đồ

TourDetailPage.tsx

@@ -3,6 +3,7 @@ import { ItineraryTimeline } from './ItineraryTimeline.js';
 import { ExpenseManager } from './ExpenseManager.js';
 import { useTourStore } from './useTourStore.js';
 import { AddLocationModal } from './AddLocationModal.js';
+import { MapContainer, TileLayer, Marker, Popup, useMapEvents, Polyline } from 'react-leaflet';
 import { 
   Map as MapIcon, 
   Wallet, 
@@ -12,13 +13,57 @@ import {
   ChevronLeft,
   Settings,
   Quote,
-  Plus
+  Plus,
+  List,
+  Map as MapIconLucide
 } from 'lucide-react';
+import L from 'leaflet';
+
+// Menu ngữ cảnh cho bản đồ
+const MapContextMenu = ({ onAction }: { onAction: (action: string, latlng: L.LatLng) => void }) => {
+  const [menuPos, setMenuPos] = useState<{ x: number, y: number, latlng: L.LatLng } | null>(null);
+  const { legs } = useTourStore();
+
+  useMapEvents({
+    contextmenu: (e) => {
+      setMenuPos({ x: e.containerPoint.x, y: e.containerPoint.y, latlng: e.latlng });
+    },
+    click: () => setMenuPos(null),
+    dragstart: () => setMenuPos(null)
+  });
+
+  if (!menuPos) return null;
+
+  return (
+    <div 
+      className="absolute z-[2000] bg-white rounded-2xl shadow-2xl border border-gray-100 py-2 w-48 animate-in zoom-in-95 duration-200"
+      style={{ top: menuPos.y, left: menuPos.x }}
+    >
+      <button onClick={() => { onAction('START', menuPos.latlng); setMenuPos(null); }} className="w-full text-left px-4 py-2 hover:bg-blue-50 text-sm font-bold text-gray-700 flex items-center gap-2">
+        <div className="w-2 h-2 rounded-full bg-green-500" /> Bắt đầu từ đây
+      </button>
+      <button onClick={() => { onAction('END', menuPos.latlng); setMenuPos(null); }} className="w-full text-left px-4 py-2 hover:bg-blue-50 text-sm font-bold text-gray-700 flex items-center gap-2 border-b border-gray-50">
+        <div className="w-2 h-2 rounded-full bg-red-500" /> Kết thúc ở đây
+      </button>
+      <div className="px-4 py-2 text-[10px] font-black text-gray-400 uppercase tracking-widest">Thêm vào chặng</div>
+      {legs.map(leg => (
+        <button 
+          key={leg.id}
+          onClick={() => { onAction(`ADD_TO_LEG_${leg.id}`, menuPos.latlng); setMenuPos(null); }}
+          className="w-full text-left px-4 py-2 hover:bg-blue-50 text-sm font-medium text-gray-600 truncate"
+        >
+          Chặng {leg.sequence}: {leg.note || 'Không có ghi chú'}
+        </button>
+      ))}
+    </div>
+  );
+};
 
 export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
   const [activeTab, setActiveTab] = useState<'plan' | 'expense' | 'photo' | 'settings'>('plan');
+  const [viewMode, setViewMode] = useState<'map' | 'timeline'>('timeline');
   const [isAddLocationOpen, setIsAddLocationOpen] = useState(false);
-  const { currentTour, fetchTour, fetchPublicTours, publicTours, userRole } = useTourStore();
+  const { currentTour, fetchTour, fetchPublicTours, publicTours, userRole, legs } = useTourStore();
 
   useEffect(() => {
     const loadData = async () => {
@@ -144,8 +189,8 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
         </div>
       </div>
 
-      {/* Main Content Area */}
-      <div className="max-w-2xl mx-auto mt-6 px-4 pb-24">
+      {/* Main Content Area - Điều chỉnh max-width khi ở chế độ bản đồ */}
+      <div className={`${activeTab === 'plan' && viewMode === 'map' ? 'w-full' : 'max-w-2xl mx-auto'} mt-6 px-4 pb-24`}>
         {/* Tab Switcher */}
         <div className="bg-white rounded-2xl shadow-lg border border-gray-100 p-1 flex mb-6 sticky top-20 z-20">
           {tabs.map((tab) => (
@@ -167,8 +212,53 @@ export const TourDetailPage = ({ onBack }: { onBack: () => void }) => {
         {/* Tab Panels */}
         <div className="transition-opacity duration-300">
           {activeTab === 'plan' && (
-            <div className="animate-in fade-in slide-in-from-bottom-4">
-              <ItineraryTimeline />
+            <div className="animate-in fade-in slide-in-from-bottom-2">
+              {/* View Mode Toggle */}
+              <div className="flex justify-center mb-6">
+                <div className="bg-gray-100 p-1 rounded-2xl flex gap-1">
+                  <button 
+                    onClick={() => setViewMode('timeline')}
+                    className={`flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition-all ${viewMode === 'timeline' ? 'bg-white shadow-sm text-blue-600' : 'text-gray-500'}`}
+                  >
+                    <List className="w-3.5 h-3.5" /> Danh sách
+                  </button>
+                  <button 
+                    onClick={() => setViewMode('map')}
+                    className={`flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-bold transition-all ${viewMode === 'map' ? 'bg-white shadow-sm text-blue-600' : 'text-gray-500'}`}
+                  >
+                    <MapIconLucide className="w-3.5 h-3.5" /> Bản đồ
+                  </button>
+                </div>
+              </div>
+
+              {viewMode === 'timeline' ? (
+                <ItineraryTimeline />
+              ) : (
+                <div className="h-[60vh] w-full rounded-3xl overflow-hidden shadow-xl border-4 border-white relative">
+                  <MapContainer center={[10.7769, 106.7009]} zoom={13} className="h-full w-full">
+                    <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+                    <MapContextMenu onAction={(action, latlng) => console.log(action, latlng)} />
+                    
+                    {/* Vẽ đường Polyline nối các điểm */}
+                    {legs.map(leg => {
+                      const positions = leg.locations.map((l: any) => [l.latitude, l.longitude]);
+                      return <Polyline key={leg.id} positions={positions as any} color="#3b82f6" weight={3} dashArray="5, 10" />;
+                    })}
+
+                    {legs.flatMap(l => l.locations).map((loc: any) => (
+                      <Marker key={loc.id} position={[loc.latitude, loc.longitude]}>
+                        <Popup>
+                          <div className="font-bold">{loc.name}</div>
+                          <div className="text-xs text-gray-500">{loc.type}</div>
+                        </Popup>
+                      </Marker>
+                    ))}
+                  </MapContainer>
+                  <div className="absolute top-4 left-4 z-[1000] bg-white/90 backdrop-blur-md p-3 rounded-2xl text-[10px] font-bold text-gray-500 shadow-lg border border-white">
+                    Mẹo: Nhấn giữ (Mobile) hoặc Chuột phải để ghim địa điểm
+                  </div>
+                </div>
+              )}
             </div>
           )}