import React, { useState, useEffect, useRef } from 'react';
import { 
  Plane, 
  Train, 
  Utensils, 
  Camera, 
  MapPin, 
  Hotel, 
  Coffee, 
  Sun, 
  CloudRain, 
  Navigation, 
  X, 
  Ticket, 
  Info,
  Map as MapIcon,
  ChevronRight
} from 'lucide-react';

// --- 模擬資料結構 (13天行程範例) ---
// 實際應用中，這裡可以替換為從 Firebase 或 JSON 檔案讀取的資料
const TRIP_DATA = Array.from({ length: 13 }, (_, i) => {
  const dayNum = i + 1;
  const isFlightDay = dayNum === 1 || dayNum === 13;
  
  // 產生每天的假資料
  return {
    id: dayNum,
    date: `2025-10-${10 + i}`,
    location: dayNum === 1 ? "台北 -> 東京" : dayNum === 13 ? "東京 -> 台北" : "東京, 日本",
    weather: dayNum % 3 === 0 ? "rainy" : "sunny", 
    temp: dayNum % 3 === 0 ? "18°C" : "24°C",
    events: [
      {
        time: "09:00",
        type: isFlightDay ? "flight" : "breakfast",
        title: isFlightDay ? (dayNum === 1 ? "出發：桃園機場 (TPE)" : "返程：成田機場 (NRT)") : "飯店早餐",
        location: isFlightDay ? "Terminal 2" : "Hotel Metropolitan",
        desc: isFlightDay ? "航班 BR198 | 座位 42A" : "享受豐盛的日式自助餐",
        coords: "Tokyo", // 用於 Google Maps 搜尋
        detail: isFlightDay 
          ? { type: "ticket", label: "電子機票", info: "訂位代號: 6XQ29Z\n登機門: C4\n登機時間: 08:30" } 
          : null
      },
      {
        time: "11:30",
        type: "sightseeing",
        title: isFlightDay ? "抵達東京" : `探索景點 - Day ${dayNum}`,
        location: isFlightDay ? "Narita Airport" : "淺草寺 (Senso-ji)",
        desc: "雷門拍照、仲見世通逛街吃人形燒。",
        coords: "Senso-ji Tokyo",
        detail: { type: "info", label: "景點介紹", info: "東京都內最古老的寺院。參拜前記得先在手水舍洗手。" }
      },
      {
        time: "13:00",
        type: "food",
        title: "午餐時間",
        location: "今半 壽喜燒",
        desc: "預約編號: #9921，百年老店頂級黑毛和牛。",
        coords: "Asakusa Imahan",
        detail: { type: "info", label: "預約資訊", info: "已預付訂金 5000日圓。\n請出示 Email 確認信。" }
      },
      {
        time: "15:30",
        type: "transport",
        title: "移動",
        location: "東京地鐵",
        desc: "搭乘銀座線前往澀谷 (G19 -> G01)",
        coords: "Shibuya Station",
      },
      {
        time: "19:00",
        type: "hotel",
        title: "飯店 Check-in",
        location: "Shibuya Stream Excel Hotel",
        desc: "絕佳視野，直通地鐵站。",
        coords: "Shibuya Stream Excel Hotel Tokyu",
        detail: { type: "hotel", label: "訂房憑證", info: "訂單編號: 12345678\n房型: 標準雙人房\n含早餐: 是" }
      }
    ]
  };
});

// --- 元件：圖示選擇器 ---
const getIcon = (type) => {
  switch (type) {
    case 'flight': return <Plane className="w-5 h-5 text-blue-500" />;
    case 'train':
    case 'transport': return <Train className="w-5 h-5 text-indigo-500" />;
    case 'food':
    case 'breakfast': return <Utensils className="w-5 h-5 text-orange-500" />;
    case 'sightseeing': return <Camera className="w-5 h-5 text-emerald-500" />;
    case 'hotel': return <Hotel className="w-5 h-5 text-purple-500" />;
    case 'coffee': return <Coffee className="w-5 h-5 text-amber-700" />;
    default: return <MapPin className="w-5 h-5 text-gray-500" />;
  }
};

// --- 元件：天氣 Widget (Hero Section) ---
const WeatherWidget = ({ weather, temp, location, date }) => {
  return (
    <div className="relative overflow-hidden rounded-b-3xl bg-gradient-to-br from-blue-600 to-indigo-800 text-white shadow-lg p-6 pb-12 transition-all duration-500">
      {/* 背景裝飾 */}
      <div className="absolute top-0 right-0 -mr-8 -mt-8 w-32 h-32 bg-white opacity-10 rounded-full blur-2xl"></div>
      
      <div className="flex justify-between items-start pt-4">
        <div>
          <p className="text-blue-100 text-sm font-medium tracking-wider uppercase">{date}</p>
          <h1 className="text-3xl font-bold mt-1 flex items-center gap-2">
            <MapPin className="w-6 h-6" /> {location}
          </h1>
        </div>
        <div className="flex flex-col items-end">
          {weather === 'sunny' ? (
            <Sun className="w-10 h-10 text-yellow-300 animate-pulse" />
          ) : (
            <CloudRain className="w-10 h-10 text-gray-300" />
          )}
          <span className="text-2xl font-semibold mt-1">{temp}</span>
        </div>
      </div>
      
      {/* 搜尋欄位模擬 (視覺用) */}
      <div className="absolute -bottom-6 left-6 right-6">
        <div className="bg-white text-gray-800 p-3 rounded-xl shadow-md flex items-center gap-3">
            <div className="bg-blue-100 p-2 rounded-full">
                <Navigation className="w-5 h-5 text-blue-600" />
            </div>
            <div className="text-sm">
                <p className="font-bold text-gray-700">今日旅程進度</p>
                <p className="text-xs text-gray-500">Day {location.includes("->") ? "Movement" : "Exploring"}</p>
            </div>
            <div className="ml-auto bg-gray-100 px-3 py-1 rounded-full text-xs font-bold text-gray-600">
                13 Days Trip
            </div>
        </div>
      </div>
    </div>
  );
};

// --- 元件：詳細資訊 Modal ---
const DetailModal = ({ isOpen, onClose, data }) => {
  if (!isOpen || !data) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center px-4 animate-in fade-in duration-200">
      {/* 背景遮罩 */}
      <div 
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      
      {/* 彈窗內容 */}
      <div className="relative bg-white w-full max-w-md rounded-2xl shadow-2xl overflow-hidden transform transition-all scale-100">
        <div className={`h-24 ${data.type === 'ticket' ? 'bg-blue-600' : 'bg-orange-500'} flex items-center justify-center`}>
            {data.type === 'ticket' ? <Ticket className="w-12 h-12 text-white/80" /> : <Info className="w-12 h-12 text-white/80" />}
        </div>
        
        <button 
          onClick={onClose}
          className="absolute top-4 right-4 p-1 bg-black/20 rounded-full text-white hover:bg-black/40 transition-colors"
        >
          <X className="w-5 h-5" />
        </button>

        <div className="p-6">
          <h3 className="text-xl font-bold text-gray-800 mb-2">{data.label}</h3>
          <div className="bg-gray-50 rounded-xl p-4 border border-gray-100">
            <pre className="whitespace-pre-wrap font-mono text-sm text-gray-600 leading-relaxed">
              {data.info}
            </pre>
          </div>
          
          <div className="mt-6 flex gap-3">
             <button 
                onClick={onClose}
                className="flex-1 py-3 rounded-xl bg-gray-100 text-gray-700 font-semibold hover:bg-gray-200 transition-colors"
             >
                關閉
             </button>
             {data.type === 'ticket' && (
                 <button className="flex-1 py-3 rounded-xl bg-blue-600 text-white font-semibold hover:bg-blue-700 transition-colors shadow-lg shadow-blue-200">
                    下載 PDF
                 </button>
             )}
          </div>
        </div>
      </div>
    </div>
  );
};

// --- 主應用程式 ---
export default function App() {
  const [currentDay, setCurrentDay] = useState(1);
  const [activeModal, setActiveModal] = useState(null); // 儲存當前打開的 modal 資料
  const scrollRef = useRef(null);

  // 取得當前日期的資料
  const currentData = TRIP_DATA.find(d => d.id === currentDay);

  // 開啟 Google Maps
  const openMap = (query) => {
    const encodedQuery = encodeURIComponent(query);
    window.open(`https://www.google.com/maps/search/?api=1&query=${encodedQuery}`, '_blank');
  };

  // 自動捲動到底部導航的選中項目
  useEffect(() => {
    if (scrollRef.current) {
        const selectedBtn = scrollRef.current.children[currentDay - 1];
        if (selectedBtn) {
            selectedBtn.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
        }
    }
  }, [currentDay]);

  return (
    <div className="min-h-screen bg-gray-50 font-sans pb-24 md:max-w-md md:mx-auto md:shadow-2xl md:min-h-[800px] md:rounded-3xl md:overflow-hidden relative">
      
      {/* 1. Hero Section */}
      <WeatherWidget 
        weather={currentData.weather} 
        temp={currentData.temp} 
        location={currentData.location}
        date={currentData.date}
      />

      {/* 2. Timeline Content */}
      <div className="px-4 mt-10 pb-4 space-y-0">
        {currentData.events.map((event, index) => {
            const isLast = index === currentData.events.length - 1;
            
            return (
              <div key={index} className="flex group">
                {/* 左側：時間軸與線條 */}
                <div className="flex flex-col items-center mr-4 min-w-[60px]">
                  <span className="text-sm font-bold text-gray-500 mb-1">{event.time}</span>
                  <div className="relative flex items-center justify-center w-10 h-10 rounded-full bg-white border-2 border-gray-100 shadow-sm z-10 group-hover:border-blue-400 transition-colors">
                    {getIcon(event.type)}
                  </div>
                  {/* 連接線 */}
                  {!isLast && (
                    <div className="w-0.5 h-full bg-gray-200 my-1 group-hover:bg-blue-200 transition-colors"></div>
                  )}
                </div>

                {/* 右側：活動卡片 */}
                <div className="flex-1 mb-8">
                  <div className="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 hover:shadow-md transition-shadow active:scale-[0.98] transition-transform">
                    <div className="flex justify-between items-start mb-2">
                        <h3 className="font-bold text-gray-800 text-lg">{event.title}</h3>
                        <button 
                            onClick={(e) => { e.stopPropagation(); openMap(event.coords); }}
                            className="text-gray-400 hover:text-blue-500 transition-colors p-1"
                            title="Open in Google Maps"
                        >
                            <MapPin className="w-5 h-5" />
                        </button>
                    </div>
                    
                    <p className="text-sm text-gray-600 mb-3 flex items-center gap-1">
                        <MapIcon className="w-3 h-3" /> {event.location}
                    </p>
                    
                    <p className="text-sm text-gray-500 leading-relaxed border-l-2 border-gray-100 pl-3 mb-3">
                        {event.desc}
                    </p>

                    {/* 關鍵字按鈕 (如果有 detail) */}
                    {event.detail && (
                        <button 
                            onClick={() => setActiveModal(event.detail)}
                            className="mt-1 inline-flex items-center gap-1 px-3 py-1.5 bg-blue-50 text-blue-600 text-xs font-bold rounded-lg hover:bg-blue-100 transition-colors"
                        >
                            {event.detail.type === 'ticket' ? <Ticket className="w-3 h-3" /> : <Info className="w-3 h-3" />}
                            查看{event.detail.label}
                            <ChevronRight className="w-3 h-3" />
                        </button>
                    )}
                  </div>
                </div>
              </div>
            );
        })}
        
        {/* End of Day Marker */}
        <div className="flex items-center justify-center py-4 text-gray-400 text-sm">
            <div className="h-px bg-gray-300 w-12 mr-3"></div>
            End of Day {currentDay}
            <div className="h-px bg-gray-300 w-12 ml-3"></div>
        </div>
      </div>

      {/* 3. Bottom Navigation (Sticky) */}
      <div className="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-md border-t border-gray-200 pb-safe md:absolute md:rounded-b-3xl">
        <div className="flex flex-col">
            {/* Action Bar */}
            <div className="flex justify-between items-center px-4 py-2 border-b border-gray-100">
                <button className="text-xs font-bold text-gray-500 hover:text-blue-600 flex items-center gap-1">
                    <MapIcon className="w-4 h-4" /> 總地圖
                </button>
                <span className="text-xs font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded-md">
                    Day {currentDay} / 13
                </span>
            </div>

            {/* Scrollable Days */}
            <div 
                ref={scrollRef}
                className="flex overflow-x-auto py-3 px-2 gap-2 no-scrollbar"
                style={{ scrollSnapType: 'x mandatory' }}
            >
            {TRIP_DATA.map((day) => (
                <button
                key={day.id}
                onClick={() => setCurrentDay(day.id)}
                className={`
                    flex-shrink-0 flex flex-col items-center justify-center w-14 h-16 rounded-xl transition-all duration-300 snap-center
                    ${currentDay === day.id 
                    ? 'bg-blue-600 text-white shadow-lg shadow-blue-200 scale-105' 
                    : 'bg-white text-gray-400 hover:bg-gray-100 border border-gray-100'}
                `}
                >
                <span className="text-xs font-medium">Day</span>
                <span className="text-lg font-bold">{day.id}</span>
                </button>
            ))}
            </div>
        </div>
      </div>

      {/* Modal Render */}
      <DetailModal 
        isOpen={!!activeModal} 
        onClose={() => setActiveModal(null)} 
        data={activeModal} 
      />

      {/* Custom Styles for hidden scrollbar */}
      <style>{`
        .no-scrollbar::-webkit-scrollbar {
          display: none;
        }
        .no-scrollbar {
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
        .pb-safe {
            padding-bottom: env(safe-area-inset-bottom, 20px);
        }
      `}</style>
    </div>
  );
}

<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>