import React, { useState, useEffect, useMemo } from 'react';
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, 
  Image as ImageIcon, 
  Calendar, 
  Users,
  ChevronLeft,
  Settings,
  Quote,
  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, legs } = useTourStore();

  useEffect(() => {
    const loadData = async () => {
      // Nếu chưa có tour nào trong store, thử tải danh sách public trước
      if (publicTours.length === 0) {
        await fetchPublicTours();
      }
    };
    loadData();
  }, []);

  useEffect(() => {
    // Lấy tour đầu tiên từ danh sách khám phá để hiển thị demo
    if (publicTours.length > 0 && !currentTour) {
      fetchTour(publicTours[0].id);
    }
  }, [publicTours, currentTour, fetchTour]);

  // Định nghĩa các tab dựa trên quyền hạn (RBAC) từ store
  const tabs = [
    { id: 'plan', label: 'Lộ trình', icon: MapIcon, visible: true },
    { id: 'expense', label: 'Chi phí', icon: Wallet, visible: ['OWNER', 'MANAGER', 'MEMBER'].includes(userRole || '') },
    { id: 'photo', label: 'Ảnh', icon: ImageIcon, visible: true },
    { id: 'settings', label: 'Cài đặt', icon: Settings, visible: ['OWNER', 'MANAGER'].includes(userRole || '') },
  ].filter(t => t.visible);

  const hasFinanceAccess = ['OWNER', 'MANAGER', 'MEMBER'].includes(userRole || '');

  const travelQuotes = [
    "Đừng nghe họ nói, hãy tự mình đi xem.",
    "Thế giới là một cuốn sách, và ai không đi du lịch thì chỉ mới đọc được một trang.",
    "Hành trình ngàn dặm bắt đầu từ một bước chân.",
    "Đi là để trở về, nhưng với một tâm hồn mới."
  ];

  const randomQuote = useMemo(() => travelQuotes[Math.floor(Math.random() * travelQuotes.length)], []);

  const tourInfo = {
    title: currentTour?.title || "Hành trình khám phá TP.HCM",
    date: currentTour?.startDate ? `${new Date(currentTour.startDate).toLocaleDateString('vi-VN')} - ${new Date(currentTour.endDate).toLocaleDateString('vi-VN')}` : "Chưa xác định ngày",
    membersCount: currentTour?.participants?.length || 0,
    budget: currentTour?.totalCost ? `${Number(currentTour.totalCost).toLocaleString()} VND` : "0 VND",
    coverImage: currentTour?.photos?.[0]?.imageUrl || "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=2070&auto=format&fit=crop"
  };

  return (
    <div className="min-h-screen bg-gray-50 pb-20">
      {/* Top Navigation Bar */}
      <div className="sticky top-0 z-30 bg-white/80 backdrop-blur-md border-b border-gray-100 px-4 py-3 flex items-center justify-between">
        <button onClick={onBack} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
          <ChevronLeft className="w-6 h-6 text-gray-600" />
        </button>
        <h1 className="text-lg font-bold text-gray-800 truncate px-4">
          {tourInfo.title}
        </h1>
        <div className="w-10" /> {/* Spacer */}
      </div>

      {/* Tour Header Info */}
      <div className="relative h-64 w-full bg-blue-900">
        <img 
          src={tourInfo.coverImage} 
          className="w-full h-full object-cover opacity-60" 
          alt="Tour Cover" 
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
        
        <div className="absolute bottom-16 left-0 right-0 p-6 text-white">
          <div className="max-w-2xl mx-auto space-y-2">
            <h2 className="text-3xl font-black tracking-tight drop-shadow-md">{tourInfo.title}</h2>
            <div className="flex flex-wrap gap-4 text-sm font-medium opacity-90">
              <div className="flex items-center bg-black/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/10">
                <Calendar className="w-4 h-4 mr-1.5" />
                {tourInfo.date}
              </div>
              <div className="flex items-center bg-black/20 backdrop-blur-sm px-3 py-1 rounded-full border border-white/10">
                <Users className="w-4 h-4 mr-1.5" />
                {tourInfo.membersCount} thành viên
              </div>
            </div>

            {/* Member Avatars Stack */}
            <div className="flex items-center gap-2 mt-4">
              <div className="flex -space-x-3">
                {currentTour?.participants?.slice(0, 5).map((p: any, i: number) => (
                  <div key={i} className="w-10 h-10 rounded-full border-2 border-white bg-blue-100 flex items-center justify-center text-blue-600 font-bold overflow-hidden shadow-lg">
                    <img src={`https://i.pravatar.cc/100?u=${p.userId}`} alt="Avatar" />
                  </div>
                ))}
                {tourInfo.membersCount > 5 && (
                  <div className="w-10 h-10 rounded-full border-2 border-white bg-gray-800 flex items-center justify-center text-[10px] font-bold text-white shadow-lg">
                    +{tourInfo.membersCount - 5}
                  </div>
                )}
              </div>
              <button className="p-2 bg-white/10 hover:bg-white/20 rounded-full border border-white/20 backdrop-blur-sm transition-all ml-2">
                <Plus className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Financial Quick-View Widget or Quote */}
      <div className="max-w-2xl mx-auto -mt-10 px-4 relative z-10">
        <div className={`rounded-3xl p-6 shadow-2xl transition-all duration-500 ${hasFinanceAccess ? 'bg-indigo-600 text-white shadow-indigo-200' : 'bg-white text-gray-600 border border-gray-100'}`}>
          <div className="flex justify-between items-center">
            {hasFinanceAccess ? (
              <>
                <div>
                  <p className="text-indigo-100 text-xs font-black uppercase tracking-widest mb-1">Tổng chi tiêu hiện tại</p>
                  <h3 className="text-3xl font-black">{tourInfo.budget}</h3>
                </div>
                <div className="p-4 bg-white/10 rounded-2xl backdrop-blur-md"><Wallet className="w-8 h-8" /></div>
              </>
            ) : (
              <div className="flex items-start gap-4 py-2">
                <Quote className="w-8 h-8 text-blue-500 opacity-30 flex-shrink-0" />
                <p className="italic text-lg font-medium leading-relaxed">"{randomQuote}"</p>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* 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) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id as any)}
              className={`flex-1 flex items-center justify-center py-3 rounded-xl text-sm font-semibold transition-all ${
                activeTab === tab.id 
                  ? 'bg-blue-50 text-blue-600 shadow-sm' 
                  : 'text-gray-400 hover:text-gray-500 hover:bg-gray-50'
              }`}
            >
              <tab.icon className={`w-4 h-4 mr-2 ${activeTab === tab.id ? 'scale-110' : ''}`} />
              {tab.label}
            </button>
          ))}
        </div>

        {/* Tab Panels */}
        <div className="transition-opacity duration-300">
          {activeTab === 'plan' && (
            <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>
          )}

          {activeTab === 'expense' && (
            <div className="animate-in fade-in slide-in-from-bottom-4">
              <ExpenseManager />
            </div>
          )}

          {activeTab === 'photo' && (
            <div className="grid grid-cols-3 gap-1.5 animate-in fade-in">
              {[1, 2, 3, 4, 5, 6].map((i) => (
                <div key={i} className="aspect-square bg-gray-200 rounded-xl overflow-hidden relative group border border-white">
                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" />
                  <img 
                    src={`https://picsum.photos/seed/${i + 10}/400/400`} 
                    alt="Tour photo"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                </div>
              ))}
            </div>
          )}

          {activeTab === 'settings' && (
            <div className="p-8 text-center bg-white rounded-3xl border border-dashed border-gray-200 animate-in zoom-in-95">
              <Settings className="w-12 h-12 text-gray-300 mx-auto mb-4" />
              <p className="text-gray-500 font-medium">Tính năng quản lý thành viên đang được cập nhật...</p>
            </div>
          )}
        </div>
      </div>

      {/* Floating Action Button (Mobile) */}
      <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-40">
        <button 
          onClick={() => activeTab === 'plan' ? setIsAddLocationOpen(true) : null}
          className="bg-blue-600 text-white px-6 py-3 rounded-full shadow-lg hover:bg-blue-700 transition-all flex items-center font-bold">
          {activeTab === 'plan' ? 'Thêm địa điểm' : activeTab === 'expense' ? 'Thêm chi phí' : 'Đăng ảnh'}
        </button>
      </div>

      {/* Add Location Modal */}
      {currentTour && (
        <AddLocationModal 
          isOpen={isAddLocationOpen} 
          onClose={() => setIsAddLocationOpen(false)} 
          tourId={currentTour.id} 
        />
      )}
    </div>
  );
};