import React, { useState, useEffect, useMemo, useRef } from 'react';
import { 
  Truck, X, Check, Phone, ChevronRight, ChevronLeft, Loader2, 
  Monitor, Wind, Tv, Zap, Layout, Archive, Bike, Laptop, Music,
  Sofa, Bed, Search, Calendar, History, AlertCircle
} from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, collection, addDoc, query, getDocs, where
} from 'firebase/firestore';
import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth';

// --- Configuration & Constants ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'kamitsudo-app';

const CITIES = ['下関市', '宇部市', '山陽小野田市', '美祢市', '長門市'];
const TIME_SLOTS = ['10:00~12:00', '12:00~14:00', '14:00~16:00', '16:00~18:00'];

const ITEM_CATEGORIES = [
  {
    name: '主要家電',
    items: [
      { id: 'ref_l', label: '冷蔵庫(大型)', icon: <Monitor className="w-5 h-5" /> },
      { id: 'ref_s', label: '冷蔵庫(小型)', icon: <Monitor className="w-5 h-5" /> },
      { id: 'wm', label: '洗濯機', icon: <Wind className="w-5 h-5" /> },
      { id: 'tv', label: 'テレビ', icon: <Tv className="w-5 h-5" /> },
      { id: 'ac', label: 'エアコン', icon: <Zap className="w-5 h-5" /> },
    ]
  },
  {
    name: '家具',
    items: [
      { id: 'table', label: 'テーブル', icon: <Layout className="w-5 h-5" /> },
      { id: 'sofa', label: 'ソファー', icon: <Sofa className="w-5 h-5" /> },
      { id: 'bed', label: 'ベッドフレーム', icon: <Bed className="w-5 h-5" /> },
      { id: 'cabinet', label: '棚・キャビネット', icon: <Archive className="w-5 h-5" /> },
    ]
  },
  {
    name: 'その他',
    items: [
      { id: 'bicycle', label: '自転車', icon: <Bike className="w-5 h-5" /> },
      { id: 'pc', label: 'パソコン', icon: <Laptop className="w-5 h-5" /> },
      { id: 'instrument', label: '楽器', icon: <Music className="w-5 h-5" /> },
    ]
  }
];

// --- Utilities ---
const formatDate = (date) => {
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();

// --- Main App Component ---
export default function App() {
  const [user, setUser] = useState(null);
  const [activeView, setActiveView] = useState('booking');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) {
        console.error("Auth error:", err);
      } finally {
        setLoading(false);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  if (loading) {
    return (
      <div className="fixed inset-0 flex items-center justify-center bg-gray-50">
        <div className="text-center">
          <Loader2 className="animate-spin text-yellow-500 mx-auto mb-4" size={48} />
          <p className="font-black italic text-gray-400 uppercase tracking-widest">Loading 神集...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#FDFDFD] text-slate-900 font-sans selection:bg-yellow-100">
      <nav className="bg-white/80 backdrop-blur-md border-b border-gray-100 px-6 py-4 flex justify-between items-center sticky top-0 z-[100] shadow-sm">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 bg-yellow-500 rounded-xl flex items-center justify-center text-white shadow-lg rotate-3">
            <Truck size={24} />
          </div>
          <div className="flex flex-col">
            <h1 className="text-xl font-black italic uppercase leading-none text-slate-800">KAMITSUDO</h1>
            <span className="text-[10px] font-bold text-yellow-600 tracking-tighter uppercase">Shimonoseki Regional Services</span>
          </div>
        </div>
        <div className="bg-gray-100 p-1 rounded-xl flex gap-1">
          <button 
            onClick={() => setActiveView('booking')} 
            className={`px-4 sm:px-6 py-2 rounded-lg text-xs font-black transition-all ${activeView === 'booking' ? 'bg-white shadow-md text-yellow-600' : 'text-gray-400 hover:text-gray-600'}`}
          >
            予約する
          </button>
          <button 
            onClick={() => setActiveView('lookup')} 
            className={`px-4 sm:px-6 py-2 rounded-lg text-xs font-black transition-all ${activeView === 'lookup' ? 'bg-white shadow-md text-yellow-600' : 'text-gray-400 hover:text-gray-600'}`}
          >
            確認する
          </button>
        </div>
      </nav>

      <main className="max-w-4xl mx-auto p-4 md:p-8 pb-24 sm:pb-8">
        {activeView === 'booking' ? <BookingView user={user} /> : <LookupView user={user} />}
      </main>

      {/* Mobile Nav */}
      <div className="sm:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 flex justify-around p-3 z-[100] shadow-[0_-4px_10px_rgba(0,0,0,0.05)]">
        <button onClick={() => setActiveView('booking')} className={`flex flex-col items-center gap-1 ${activeView === 'booking' ? 'text-yellow-600' : 'text-gray-400'}`}>
          <Calendar size={20} />
          <span className="text-[10px] font-black uppercase">Book</span>
        </button>
        <button onClick={() => setActiveView('lookup')} className={`flex flex-col items-center gap-1 ${activeView === 'lookup' ? 'text-yellow-600' : 'text-gray-400'}`}>
          <History size={20} />
          <span className="text-[10px] font-black uppercase">History</span>
        </button>
      </div>
    </div>
  );
}

function BookingView({ user }) {
  const [step, setStep] = useState(1);
  const [items, setItems] = useState({});
  const [bookingDate, setBookingDate] = useState(null);
  const [bookingTime, setBookingTime] = useState(null);
  const [formData, setFormData] = useState({
    city: '下関市',
    address: '',
    phone: '',
    name: ''
  });
  const [submitting, setSubmitting] = useState(false);
  const [completedId, setCompletedId] = useState(null);

  const totalItems = Object.values(items).reduce((a, b) => a + b, 0);

  const handleBooking = async () => {
    if (!user) return;
    setSubmitting(true);
    try {
      const bookingData = {
        userId: user.uid,
        items,
        date: formatDate(bookingDate),
        time: bookingTime,
        ...formData,
        status: 'pending',
        createdAt: new Date().toISOString()
      };
      const docRef = await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'bookings'), bookingData);
      setCompletedId(docRef.id);
      setStep(5);
    } catch (err) {
      console.error(err);
    } finally {
      setSubmitting(false);
    }
  };

  if (step === 5) {
    return (
      <div className="bg-white rounded-[3rem] shadow-2xl p-12 text-center border border-gray-50 flex flex-col items-center gap-6 animate-in">
        <div className="w-20 h-20 bg-green-100 text-green-500 rounded-full flex items-center justify-center animate-bounce">
          <Check size={48} strokeWidth={3} />
        </div>
        <div>
          <h2 className="text-3xl font-black italic text-slate-800 mb-2">ご予約を受け付けました！</h2>
          <p className="text-gray-500 text-sm">担当者より内容確認のお電話を差し上げます。</p>
        </div>
        <div className="bg-gray-50 p-6 rounded-3xl w-full max-w-sm border border-gray-100">
          <p className="text-[10px] font-black text-gray-400 uppercase mb-1">Reservation ID</p>
          <p className="font-mono font-bold text-xl text-yellow-600">{completedId}</p>
        </div>
        <button 
          onClick={() => { setStep(1); setItems({}); setBookingDate(null); }} 
          className="bg-slate-900 text-white px-8 py-4 rounded-2xl font-black transition-all hover:opacity-90 active:scale-95 shadow-xl"
        >
          ホームに戻る
        </button>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-[2rem] sm:rounded-[3rem] shadow-xl overflow-hidden border border-gray-50">
      <div className="bg-gray-50 h-2 w-full">
        <div className="bg-yellow-500 h-full transition-all duration-500" style={{ width: `${(step / 4) * 100}%` }}></div>
      </div>

      <div className="p-6 sm:p-10">
        <div className="flex justify-between items-center mb-8">
          <h2 className="text-2xl font-black italic text-slate-800">
            {step === 1 && "買取品目の選択"}
            {step === 2 && "訪問日時の選択"}
            {step === 3 && "連絡先情報の入力"}
            {step === 4 && "ご予約内容の確認"}
          </h2>
          <span className="text-[10px] font-black bg-yellow-100 text-yellow-600 px-3 py-1 rounded-full uppercase tracking-widest">Step {step} / 4</span>
        </div>

        {step === 1 && (
          <div className="space-y-8 animate-in">
            {ITEM_CATEGORIES.map(cat => (
              <div key={cat.name} className="space-y-3">
                <div className="flex items-center gap-2 border-b border-gray-100 pb-2">
                  <div className="w-1.5 h-1.5 bg-yellow-500 rounded-full"></div>
                  <h3 className="text-xs font-black text-gray-400 uppercase tracking-widest">{cat.name}</h3>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {cat.items.map(item => (
                    <div key={item.id} className="bg-gray-50 p-4 rounded-2xl flex justify-between items-center border border-transparent hover:border-yellow-200 transition-colors">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 bg-white rounded-xl shadow-sm flex items-center justify-center text-slate-400">{item.icon}</div>
                        <span className="text-sm font-bold text-slate-700">{item.label}</span>
                      </div>
                      <div className="flex gap-4 items-center bg-white px-3 py-1 rounded-xl shadow-sm border border-gray-100">
                        <button 
                          onClick={() => setItems(p => ({...p, [item.id]: Math.max(0, (p[item.id]||0)-1)}))} 
                          className="w-6 h-6 flex items-center justify-center font-black text-gray-300 hover:text-yellow-500 transition-colors"
                        >
                          －
                        </button>
                        <span className="w-6 text-center font-black text-slate-800">{items[item.id] || 0}</span>
                        <button 
                          onClick={() => setItems(p => ({...p, [item.id]: (p[item.id]||0)+1}))} 
                          className="w-6 h-6 flex items-center justify-center font-black text-gray-300 hover:text-yellow-500 transition-colors"
                        >
                          ＋
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
            <div className="pt-4">
              <button 
                disabled={totalItems === 0}
                onClick={() => setStep(2)} 
                className={`w-full py-5 rounded-2xl font-black transition-all flex items-center justify-center gap-2 shadow-xl ${totalItems > 0 ? 'bg-yellow-500 text-white hover:opacity-90 shadow-yellow-200' : 'bg-gray-200 text-gray-400 cursor-not-allowed'}`}
              >
                <span>日時を選択する</span>
                <ChevronRight size={20} />
              </button>
            </div>
          </div>
        )}

        {step === 2 && (
          <div className="space-y-6 animate-in">
            <div className="bg-gray-50 rounded-3xl p-6 border border-gray-100">
              <CalendarComponent onSelect={setBookingDate} selected={bookingDate} />
            </div>
            {bookingDate && (
              <div className="space-y-3 animate-in">
                <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest">希望の時間帯を選択</p>
                <div className="grid grid-cols-2 gap-3">
                  {TIME_SLOTS.map(slot => (
                    <button 
                      key={slot}
                      onClick={() => setBookingTime(slot)}
                      className={`p-4 rounded-2xl font-bold text-sm transition-all border-2 ${bookingTime === slot ? 'bg-yellow-500 border-yellow-500 text-white shadow-lg' : 'bg-white border-gray-100 text-slate-600 hover:border-yellow-200'}`}
                    >
                      {slot}
                    </button>
                  ))}
                </div>
              </div>
            )}
            <div className="flex gap-4 pt-4">
              <button onClick={() => setStep(1)} className="flex-1 py-5 rounded-2xl font-black bg-gray-100 text-gray-500 hover:bg-gray-200 transition-all">戻る</button>
              <button 
                disabled={!bookingDate || !bookingTime}
                onClick={() => setStep(3)} 
                className={`flex-[2] py-5 rounded-2xl font-black transition-all ${bookingDate && bookingTime ? 'bg-yellow-500 text-white shadow-xl shadow-yellow-200 hover:opacity-90' : 'bg-gray-200 text-gray-400 cursor-not-allowed'}`}
              >
                詳細情報を入力
              </button>
            </div>
          </div>
        )}

        {step === 3 && (
          <div className="space-y-6 animate-in">
            <div className="space-y-4">
              <div>
                <label className="text-[10px] font-black text-gray-400 uppercase mb-2 block tracking-widest">お住まいの市町村</label>
                <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
                  {CITIES.map(c => (
                    <button 
                      key={c}
                      onClick={() => setFormData(p => ({...p, city: c}))}
                      className={`py-3 rounded-xl text-xs font-bold border-2 transition-all ${formData.city === c ? 'border-yellow-500 bg-yellow-50 text-yellow-700' : 'border-gray-100 bg-white text-gray-400'}`}
                    >
                      {c}
                    </button>
                  ))}
                </div>
              </div>
              <div>
                <label className="text-[10px] font-black text-gray-400 uppercase mb-2 block tracking-widest">お名前</label>
                <input 
                  type="text" 
                  value={formData.name} 
                  onChange={e => setFormData(p => ({...p, name: e.target.value}))} 
                  placeholder="神集 太郎"
                  className="w-full bg-gray-50 border-none rounded-2xl px-5 py-4 text-sm focus:ring-2 focus:ring-yellow-500 transition-all outline-none"
                />
              </div>
              <div>
                <label className="text-[10px] font-black text-gray-400 uppercase mb-2 block tracking-widest">詳しいご住所</label>
                <input 
                  type="text" 
                  value={formData.address} 
                  onChange={e => setFormData(p => ({...p, address: e.target.value}))} 
                  placeholder="町名、番地、建物名など"
                  className="w-full bg-gray-50 border-none rounded-2xl px-5 py-4 text-sm focus:ring-2 focus:ring-yellow-500 transition-all outline-none"
                />
              </div>
              <div>
                <label className="text-[10px] font-black text-gray-400 uppercase mb-2 block tracking-widest">お電話番号</label>
                <input 
                  type="tel" 
                  value={formData.phone} 
                  onChange={e => setFormData(p => ({...p, phone: e.target.value}))} 
                  placeholder="083-XXX-XXXX"
                  className="w-full bg-gray-50 border-none rounded-2xl px-5 py-4 text-sm focus:ring-2 focus:ring-yellow-500 transition-all outline-none"
                />
              </div>
            </div>
            <div className="flex gap-4 pt-4">
              <button onClick={() => setStep(2)} className="flex-1 py-5 rounded-2xl font-black bg-gray-100 text-gray-500 hover:bg-gray-200 transition-all">戻る</button>
              <button 
                disabled={!formData.name || !formData.address || !formData.phone}
                onClick={() => setStep(4)} 
                className={`flex-[2] py-5 rounded-2xl font-black transition-all ${formData.name && formData.address && formData.phone ? 'bg-yellow-500 text-white shadow-xl shadow-yellow-200 hover:opacity-90' : 'bg-gray-200 text-gray-400 cursor-not-allowed'}`}
              >
                最終確認へ
              </button>
            </div>
          </div>
        )}

        {step === 4 && (
          <div className="space-y-6 animate-in">
            <div className="bg-gray-50 p-8 rounded-[2.5rem] space-y-6 border border-gray-100">
              <div className="flex justify-between items-start border-b border-gray-200 pb-6">
                <div>
                  <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">訪問予定日時</p>
                  <p className="text-xl font-black text-slate-800 italic">{formatDate(bookingDate)}</p>
                  <p className="text-sm font-bold text-yellow-600">{bookingTime}</p>
                </div>
                <div className="text-right">
                  <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">エリア</p>
                  <p className="text-lg font-bold text-slate-800">{formData.city}</p>
                </div>
              </div>
              
              <div className="space-y-4">
                <div>
                  <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-2">買取品目リスト</p>
                  <div className="flex flex-wrap gap-2">
                    {Object.entries(items).map(([id, qty]) => {
                      if (qty === 0) return null;
                      const label = ITEM_CATEGORIES.flatMap(c => c.items).find(i => i.id === id)?.label;
                      return (
                        <span key={id} className="bg-white px-4 py-2 rounded-xl text-xs font-bold border border-gray-200 flex items-center gap-2">
                          <Check size={12} className="text-green-500" />
                          {label} <span className="text-yellow-600">x{qty}</span>
                        </span>
                      );
                    })}
                  </div>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 pt-4">
                  <div>
                    <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">お客様名</p>
                    <p className="text-sm font-bold text-slate-700">{formData.name} 様</p>
                  </div>
                  <div>
                    <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">連絡先電話番号</p>
                    <p className="text-sm font-bold text-slate-700">{formData.phone}</p>
                  </div>
                  <div className="sm:col-span-2">
                    <p className="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">ご住所</p>
                    <p className="text-sm font-bold text-slate-700">{formData.city} {formData.address}</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-yellow-50 p-4 rounded-2xl flex items-start gap-3 border border-yellow-100">
              <AlertCircle className="text-yellow-600 shrink-0 mt-0.5" size={18} />
              <p className="text-[10px] text-yellow-700 font-medium leading-relaxed">
                ※予約後、買取スタッフよりお電話にてご連絡をさせていただきます。品目の状態によっては買取ができない場合もございますので、あらかじめご了承ください。
              </p>
            </div>

            <div className="flex gap-4 pt-4">
              <button onClick={() => setStep(3)} className="flex-1 py-5 rounded-2xl font-black bg-gray-100 text-gray-500 hover:bg-gray-200 transition-all">修正する</button>
              <button 
                disabled={submitting}
                onClick={handleBooking} 
                className={`flex-[2] py-5 rounded-2xl font-black flex items-center justify-center gap-2 shadow-xl shadow-yellow-200 ${submitting ? 'bg-yellow-200 cursor-not-allowed text-white' : 'bg-yellow-500 text-white hover:opacity-90'}`}
              >
                {submitting ? <Loader2 className="animate-spin" size={24} /> : <span>予約を確定する</span>}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function CalendarComponent({ onSelect, selected }) {
  const [currentDate, setCurrentDate] = useState(new Date());
  const year = currentDate.getFullYear();
  const month = currentDate.getMonth();

  const firstDay = new Date(year, month, 1).getDay();
  const daysInMonth = getDaysInMonth(year, month);
  const today = new Date();
  today.setHours(0, 0, 0, 0);

  const prevMonth = () => setCurrentDate(new Date(year, month - 1, 1));
  const nextMonth = () => setCurrentDate(new Date(year, month + 1, 1));

  const days = [];
  for (let i = 0; i < firstDay; i++) days.push(null);
  for (let i = 1; i <= daysInMonth; i++) days.push(new Date(year, month, i));

  return (
    <div className="w-full">
      <div className="flex justify-between items-center mb-6">
        <button onClick={prevMonth} className="p-2 hover:bg-white rounded-xl transition-all"><ChevronLeft /></button>
        <h3 className="text-lg font-black italic">{year}年 {month + 1}月</h3>
        <button onClick={nextMonth} className="p-2 hover:bg-white rounded-xl transition-all"><ChevronRight /></button>
      </div>
      <div className="grid grid-cols-7 gap-2 mb-2">
        {['日', '月', '火', '水', '木', '金', '土'].map((d, i) => (
          <div key={d} className={`text-center text-[10px] font-black uppercase ${i === 0 ? 'text-red-400' : i === 6 ? 'text-blue-400' : 'text-gray-300'}`}>{d}</div>
        ))}
      </div>
      <div className="grid grid-cols-7 gap-2">
        {days.map((date, i) => {
          if (!date) return <div key={`empty-${i}`} />;
          const isSelected = selected && date.getTime() === selected.getTime();
          const isPast = date < today;
          const isSunday = date.getDay() === 0;

          return (
            <button
              key={i}
              disabled={isPast || isSunday}
              onClick={() => onSelect(date)}
              className={`
                aspect-square rounded-xl text-xs font-bold flex items-center justify-center transition-all relative
                ${isSelected ? 'bg-yellow-500 text-white shadow-lg' : 'hover:bg-white'}
                ${isPast || isSunday ? 'text-gray-200 cursor-not-allowed' : 'text-slate-600'}
                ${!isSelected && !isPast && !isSunday ? 'bg-white shadow-sm' : ''}
              `}
            >
              {date.getDate()}
              {!isPast && !isSunday && !isSelected && <div className="absolute bottom-1 w-1 h-1 bg-yellow-400 rounded-full"></div>}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function LookupView({ user }) {
  const [phone, setPhone] = useState('');
  const [bookings, setBookings] = useState([]);
  const [searching, setSearching] = useState(false);
  const [hasSearched, setHasSearched] = useState(false);

  const handleSearch = async () => {
    if (!phone || !user) return;
    setSearching(true);
    try {
      const q = query(
        collection(db, 'artifacts', appId, 'public', 'data', 'bookings'),
        where('phone', '==', phone)
      );
      const snapshot = await getDocs(q);
      const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setBookings(data);
      setHasSearched(true);
    } catch (err) {
      console.error(err);
    } finally {
      setSearching(false);
    }
  };

  return (
    <div className="bg-white rounded-[2.5rem] shadow-xl p-8 sm:p-12 border border-gray-50 animate-in">
      <div className="max-w-md mx-auto space-y-8">
        <div className="text-center space-y-2">
          <div className="w-16 h-16 bg-yellow-100 text-yellow-500 rounded-3xl flex items-center justify-center mx-auto mb-4 rotate-6 shadow-sm">
            <Search size={32} />
          </div>
          <h2 className="text-2xl font-black italic text-slate-800">予約情報の確認</h2>
          <p className="text-gray-400 text-sm">登録した電話番号で予約状況を確認できます。</p>
        </div>

        <div className="space-y-4">
          <div className="relative">
            <input 
              type="tel" 
              value={phone} 
              onChange={e => setPhone(e.target.value)}
              placeholder="09012345678"
              className="w-full bg-gray-100 border-none rounded-2xl px-6 py-5 text-lg font-bold tracking-widest focus:ring-2 focus:ring-yellow-500 transition-all outline-none"
            />
            <div className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-300">
              <Phone size={20} />
            </div>
          </div>
          <button 
            onClick={handleSearch}
            disabled={searching || !phone}
            className="w-full bg-slate-900 text-white py-5 rounded-2xl font-black shadow-xl hover:opacity-90 transition-all flex items-center justify-center gap-2"
          >
            {searching ? <Loader2 className="animate-spin" size={24} /> : <span>予約を検索する</span>}
          </button>
        </div>

        {hasSearched && (
          <div className="pt-8 space-y-4 animate-in">
            <div className="flex items-center gap-2 border-b border-gray-100 pb-2">
              <h3 className="text-[10px] font-black text-gray-400 uppercase tracking-widest">検索結果: {bookings.length}件</h3>
            </div>
            {bookings.length === 0 ? (
              <div className="bg-gray-50 p-8 rounded-3xl text-center border border-dashed border-gray-200">
                <p className="text-sm font-bold text-gray-400">該当する予約が見つかりませんでした。</p>
              </div>
            ) : (
              bookings.map(b => (
                <div key={b.id} className="bg-white p-6 rounded-3xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
                  <div className="flex justify-between items-start mb-4">
                    <div>
                      <span className={`text-[9px] font-black px-2 py-0.5 rounded-full uppercase tracking-tighter ${b.status === 'pending' ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600'}`}>
                        {b.status === 'pending' ? 'Confirmation Pending' : 'Confirmed'}
                      </span>
                      <p className="text-lg font-black italic text-slate-800 mt-1">{b.date}</p>
                      <p className="text-xs font-bold text-yellow-600">{b.time}</p>
                    </div>
                    <div className="text-right">
                      <p className="text-[9px] font-black text-gray-300 uppercase">City</p>
                      <p className="text-sm font-bold text-slate-600">{b.city}</p>
                    </div>
                  </div>
                  <div className="flex flex-wrap gap-1 mb-4">
                    {Object.entries(b.items).map(([id, qty]) => {
                      if (qty === 0) return null;
                      const label = ITEM_CATEGORIES.flatMap(c => c.items).find(i => i.id === id)?.label;
                      return (
                        <span key={id} className="text-[10px] bg-gray-50 px-2 py-1 rounded-lg text-gray-500 font-bold border border-gray-100">
                          {label} x{qty}
                        </span>
                      );
                    })}
                  </div>
                  <div className="bg-yellow-50 p-3 rounded-xl border border-yellow-100">
                    <p className="text-[9px] font-black text-yellow-600 uppercase mb-1">Reservation Key</p>
                    <p className="font-mono text-[10px] text-yellow-700 truncate">{b.id}</p>
                  </div>
                </div>
              ))
            )}
          </div>
        )}
      </div>
    </div>
  );
}