"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { GoogleLogin } from "@react-oauth/google";
import { api } from "@/lib/api";
import type { Restaurant, Channel, Review } from "@/lib/api";
import { useAuth } from "@/lib/auth-context";
import MapView, { MapBounds, FlyTo } from "@/components/MapView";
import SearchBar from "@/components/SearchBar";
import RestaurantList from "@/components/RestaurantList";
import RestaurantDetail from "@/components/RestaurantDetail";
import MyReviewsList from "@/components/MyReviewsList";
import BottomSheet from "@/components/BottomSheet";
import { getCuisineIcon } from "@/lib/cuisine-icons";

const CUISINE_GROUPS: { label: string; prefix: string }[] = [
  { label: "한식", prefix: "한식" },
  { label: "일식", prefix: "일식" },
  { label: "중식", prefix: "중식" },
  { label: "양식", prefix: "양식" },
  { label: "아시아", prefix: "아시아" },
  { label: "기타", prefix: "기타" },
];

function matchCuisineGroup(cuisineType: string | null, group: string): boolean {
  if (!cuisineType) return false;
  const g = CUISINE_GROUPS.find((g) => g.label === group);
  if (!g) return false;
  return cuisineType.startsWith(g.prefix);
}

const PRICE_GROUPS: { label: string; test: (p: string) => boolean }[] = [
  {
    label: "저렴 (~1만원)",
    test: (p) => /저렴|가성비|착한|만원 이하|[3-9]천원|^\d[,.]?\d*천원/.test(p) || /^[1]만원대$/.test(p) || /^[5-9],?\d{3}원/.test(p),
  },
  {
    label: "보통 (1~3만원)",
    test: (p) => /[1-2]만원대|1-[23]만|인당 [12]\d?,?\d*원|1[2-9],?\d{3}원|2[0-9],?\d{3}원/.test(p),
  },
  {
    label: "고가 (3만원~)",
    test: (p) => /[3-9]만원|고가|높은|묵직|살벌|10만원|5만원|4만원|6만원/.test(p),
  },
];

function matchPriceGroup(priceRange: string | null, group: string): boolean {
  if (!priceRange) return false;
  const g = PRICE_GROUPS.find((g) => g.label === group);
  if (!g) return false;
  return g.test(priceRange);
}

/** Parse pipe-delimited region "나라|시|구" into parts. */
function parseRegion(region: string | null): { country: string; city: string; district: string } | null {
  if (!region) return null;
  const parts = region.split("|");
  return {
    country: parts[0] || "",
    city: parts[1] || "",
    district: parts[2] || "",
  };
}

/** Build 3-level tree: country → city → district[] */
function buildRegionTree(restaurants: Restaurant[]) {
  const tree = new Map<string, Map<string, Set<string>>>();
  for (const r of restaurants) {
    const p = parseRegion(r.region);
    if (!p || !p.country) continue;
    if (!tree.has(p.country)) tree.set(p.country, new Map());
    const cityMap = tree.get(p.country)!;
    if (p.city) {
      if (!cityMap.has(p.city)) cityMap.set(p.city, new Set());
      if (p.district) cityMap.get(p.city)!.add(p.district);
    }
  }
  return tree;
}

/** Compute centroid + appropriate zoom from a set of restaurants. */
function computeFlyTo(rests: Restaurant[]): FlyTo | null {
  if (rests.length === 0) return null;
  const lat = rests.reduce((s, r) => s + r.latitude, 0) / rests.length;
  const lng = rests.reduce((s, r) => s + r.longitude, 0) / rests.length;
  // Pick zoom based on geographic spread
  const latSpread = Math.max(...rests.map((r) => r.latitude)) - Math.min(...rests.map((r) => r.latitude));
  const lngSpread = Math.max(...rests.map((r) => r.longitude)) - Math.min(...rests.map((r) => r.longitude));
  const spread = Math.max(latSpread, lngSpread);
  let zoom = 13;
  if (spread > 2) zoom = 8;
  else if (spread > 1) zoom = 9;
  else if (spread > 0.5) zoom = 10;
  else if (spread > 0.2) zoom = 11;
  else if (spread > 0.1) zoom = 12;
  else if (spread > 0.02) zoom = 14;
  else zoom = 15;
  return { lat, lng, zoom };
}

/** Find best matching country + city from user's coordinates using restaurant data. */
function findRegionFromCoords(
  lat: number,
  lng: number,
  restaurants: Restaurant[],
): { country: string; city: string } | null {
  // Group restaurants by country|city and compute centroids
  const groups = new Map<string, { country: string; city: string; lats: number[]; lngs: number[] }>();
  for (const r of restaurants) {
    const p = parseRegion(r.region);
    if (!p || !p.country || !p.city) continue;
    const key = `${p.country}|${p.city}`;
    if (!groups.has(key)) groups.set(key, { country: p.country, city: p.city, lats: [], lngs: [] });
    const g = groups.get(key)!;
    g.lats.push(r.latitude);
    g.lngs.push(r.longitude);
  }
  let best: { country: string; city: string } | null = null;
  let bestDist = Infinity;
  for (const g of groups.values()) {
    const cLat = g.lats.reduce((a, b) => a + b, 0) / g.lats.length;
    const cLng = g.lngs.reduce((a, b) => a + b, 0) / g.lngs.length;
    const dist = (cLat - lat) ** 2 + (cLng - lng) ** 2;
    if (dist < bestDist) {
      bestDist = dist;
      best = { country: g.country, city: g.city };
    }
  }
  return best;
}

export default function Home() {
  const { user, login, logout, isLoading: authLoading } = useAuth();
  const [restaurants, setRestaurants] = useState<Restaurant[]>([]);
  const [selected, setSelected] = useState<Restaurant | null>(null);
  const [loading, setLoading] = useState(true);
  const [showDetail, setShowDetail] = useState(false);
  const [channels, setChannels] = useState<Channel[]>([]);
  const [channelFilter, setChannelFilter] = useState("");
  const [cuisineFilter, setCuisineFilter] = useState("");
  const [priceFilter, setPriceFilter] = useState("");
  const [viewMode, setViewMode] = useState<"map" | "list">("list");
  const [showMobileFilters, setShowMobileFilters] = useState(false);
  const [mapBounds, setMapBounds] = useState<MapBounds | null>(null);
  const [boundsFilterOn, setBoundsFilterOn] = useState(false);
  const [countryFilter, setCountryFilter] = useState("");
  const [cityFilter, setCityFilter] = useState("");
  const [districtFilter, setDistrictFilter] = useState("");
  const [regionFlyTo, setRegionFlyTo] = useState<FlyTo | null>(null);
  const [showFavorites, setShowFavorites] = useState(false);
  const [showMyReviews, setShowMyReviews] = useState(false);
  const [myReviews, setMyReviews] = useState<(Review & { restaurant_id: string; restaurant_name: string | null })[]>([]);
  const [visits, setVisits] = useState<{ today: number; total: number } | null>(null);
  const geoApplied = useRef(false);

  const regionTree = useMemo(() => buildRegionTree(restaurants), [restaurants]);
  const countries = useMemo(() => [...regionTree.keys()].sort(), [regionTree]);
  const cities = useMemo(() => {
    if (!countryFilter) return [];
    const cityMap = regionTree.get(countryFilter);
    return cityMap ? [...cityMap.keys()].sort() : [];
  }, [regionTree, countryFilter]);
  const districts = useMemo(() => {
    if (!countryFilter || !cityFilter) return [];
    const cityMap = regionTree.get(countryFilter);
    if (!cityMap) return [];
    const set = cityMap.get(cityFilter);
    return set ? [...set].sort() : [];
  }, [regionTree, countryFilter, cityFilter]);

  const filteredRestaurants = useMemo(() => {
    return restaurants.filter((r) => {
      if (channelFilter && !(r.channels || []).includes(channelFilter)) return false;
      if (cuisineFilter && !matchCuisineGroup(r.cuisine_type, cuisineFilter)) return false;
      if (priceFilter && !matchPriceGroup(r.price_range, priceFilter)) return false;
      if (countryFilter) {
        const parsed = parseRegion(r.region);
        if (!parsed || parsed.country !== countryFilter) return false;
        if (cityFilter && parsed.city !== cityFilter) return false;
        if (districtFilter && parsed.district !== districtFilter) return false;
      }
      if (boundsFilterOn && mapBounds) {
        if (r.latitude < mapBounds.south || r.latitude > mapBounds.north) return false;
        if (r.longitude < mapBounds.west || r.longitude > mapBounds.east) return false;
      }
      return true;
    });
  }, [restaurants, channelFilter, cuisineFilter, priceFilter, countryFilter, cityFilter, districtFilter, boundsFilterOn, mapBounds]);

  // Set desktop default to map mode on mount
  useEffect(() => {
    if (window.innerWidth >= 768) setViewMode("map");
  }, []);

  // Load channels + record visit on mount
  useEffect(() => {
    api.getChannels().then(setChannels).catch(console.error);
    api.recordVisit().then(() => api.getVisits().then(setVisits)).catch(console.error);
  }, []);

  // Load restaurants on mount and when channel filter changes
  useEffect(() => {
    setLoading(true);
    api
      .getRestaurants({ limit: 500, channel: channelFilter || undefined })
      .then(setRestaurants)
      .catch(console.error)
      .finally(() => setLoading(false));
  }, [channelFilter]);

  // Auto-select region from user's geolocation (once)
  useEffect(() => {
    if (geoApplied.current || restaurants.length === 0) return;
    if (!navigator.geolocation) return;
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        if (geoApplied.current) return;
        geoApplied.current = true;
        const match = findRegionFromCoords(pos.coords.latitude, pos.coords.longitude, restaurants);
        if (match) {
          setCountryFilter(match.country);
          setCityFilter(match.city);
          const matched = restaurants.filter((r) => {
            const p = parseRegion(r.region);
            return p && p.country === match.country && p.city === match.city;
          });
          setRegionFlyTo(computeFlyTo(matched));
        }
      },
      () => { /* user denied or error — do nothing */ },
      { timeout: 5000 },
    );
  }, [restaurants]);

  const handleSearch = useCallback(
    async (query: string, mode: "keyword" | "semantic" | "hybrid") => {
      setLoading(true);
      try {
        const results = await api.search(query, mode);
        setRestaurants(results);
        setSelected(null);
        setShowDetail(false);
      } catch (e) {
        console.error("Search failed:", e);
      } finally {
        setLoading(false);
      }
    },
    []
  );

  const handleSelectRestaurant = useCallback((r: Restaurant) => {
    setSelected(r);
    setShowDetail(true);
  }, []);

  const handleCloseDetail = useCallback(() => {
    setShowDetail(false);
  }, []);

  const handleBoundsChanged = useCallback((bounds: MapBounds) => {
    setMapBounds(bounds);
  }, []);

  const handleCountryChange = useCallback((country: string) => {
    setCountryFilter(country);
    setCityFilter("");
    setDistrictFilter("");
    if (!country) { setRegionFlyTo(null); return; }
    const matched = restaurants.filter((r) => {
      const p = parseRegion(r.region);
      return p && p.country === country;
    });
    setRegionFlyTo(computeFlyTo(matched));
  }, [restaurants]);

  const handleCityChange = useCallback((city: string) => {
    setCityFilter(city);
    setDistrictFilter("");
    if (!city) {
      // Re-fly to country level
      const matched = restaurants.filter((r) => {
        const p = parseRegion(r.region);
        return p && p.country === countryFilter;
      });
      setRegionFlyTo(computeFlyTo(matched));
      return;
    }
    const matched = restaurants.filter((r) => {
      const p = parseRegion(r.region);
      return p && p.country === countryFilter && p.city === city;
    });
    setRegionFlyTo(computeFlyTo(matched));
  }, [restaurants, countryFilter]);

  const handleDistrictChange = useCallback((district: string) => {
    setDistrictFilter(district);
    if (!district) {
      const matched = restaurants.filter((r) => {
        const p = parseRegion(r.region);
        return p && p.country === countryFilter && p.city === cityFilter;
      });
      setRegionFlyTo(computeFlyTo(matched));
      return;
    }
    const matched = restaurants.filter((r) => {
      const p = parseRegion(r.region);
      return p && p.country === countryFilter && p.city === cityFilter && p.district === district;
    });
    setRegionFlyTo(computeFlyTo(matched));
  }, [restaurants, countryFilter, cityFilter]);

  const handleReset = useCallback(() => {
    setLoading(true);
    setChannelFilter("");
    setCuisineFilter("");
    setPriceFilter("");
    setCountryFilter("");
    setCityFilter("");
    setDistrictFilter("");
    setRegionFlyTo(null);
    setBoundsFilterOn(false);
    setShowFavorites(false);
    setShowMyReviews(false);
    api
      .getRestaurants({ limit: 500 })
      .then((data) => {
        setRestaurants(data);
        setSelected(null);
        setShowDetail(false);
      })
      .catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  const handleToggleFavorites = async () => {
    if (showFavorites) {
      setShowFavorites(false);
      const data = await api.getRestaurants({ limit: 500, channel: channelFilter || undefined });
      setRestaurants(data);
    } else {
      try {
        const favs = await api.getMyFavorites();
        setRestaurants(favs);
        setShowFavorites(true);
        setShowMyReviews(false);
        setMyReviews([]);
        setSelected(null);
        setShowDetail(false);
      } catch { /* ignore */ }
    }
  };

  const handleToggleMyReviews = async () => {
    if (showMyReviews) {
      setShowMyReviews(false);
      setMyReviews([]);
    } else {
      try {
        const reviews = await api.getMyReviews();
        setMyReviews(reviews);
        setShowMyReviews(true);
        setShowFavorites(false);
        setSelected(null);
        setShowDetail(false);
      } catch { /* ignore */ }
    }
  };

  // Desktop sidebar: shows detail inline
  const sidebarContent = showMyReviews ? (
    <MyReviewsList
      reviews={myReviews}
      onClose={() => { setShowMyReviews(false); setMyReviews([]); }}
      onSelectRestaurant={async (restaurantId) => {
        try {
          const r = await api.getRestaurant(restaurantId);
          handleSelectRestaurant(r);
          setShowMyReviews(false);
          setMyReviews([]);
        } catch { /* ignore */ }
      }}
    />
  ) : showDetail && selected ? (
    <RestaurantDetail
      restaurant={selected}
      onClose={handleCloseDetail}
    />
  ) : (
    <RestaurantList
      restaurants={filteredRestaurants}
      selectedId={selected?.id}
      onSelect={handleSelectRestaurant}
      loading={loading}
      keyPrefix="d-"
    />
  );

  // Mobile list: always shows list (detail goes to bottom sheet)
  const mobileListContent = showMyReviews ? (
    <MyReviewsList
      reviews={myReviews}
      onClose={() => { setShowMyReviews(false); setMyReviews([]); }}
      onSelectRestaurant={async (restaurantId) => {
        try {
          const r = await api.getRestaurant(restaurantId);
          handleSelectRestaurant(r);
          setShowMyReviews(false);
          setMyReviews([]);
        } catch { /* ignore */ }
      }}
    />
  ) : (
    <RestaurantList
      restaurants={filteredRestaurants}
      selectedId={selected?.id}
      onSelect={handleSelectRestaurant}
      loading={loading}
      keyPrefix="m-"
    />
  );

  return (
    <div className="h-screen flex flex-col bg-white dark:bg-gray-950">
      {/* ── Header row 1: Logo + User ── */}
      <header className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b dark:border-gray-800 shrink-0">
        <div className="px-5 py-3 flex items-center justify-between">
          <button onClick={handleReset} className="text-lg font-bold whitespace-nowrap">
            Tasteby
          </button>

          {/* Desktop: search + filters — two rows */}
          <div className="hidden md:flex flex-col gap-2.5 mx-6">
            {/* Row 1: Search + dropdown filters */}
            <div className="flex items-center gap-3">
              <div className="w-96 shrink-0">
                <SearchBar onSearch={handleSearch} isLoading={loading} />
              </div>
              <select
                value={channelFilter}
                onChange={(e) => {
                  setChannelFilter(e.target.value);
                  setSelected(null);
                  setShowDetail(false);
                }}
                className="border dark:border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 dark:bg-gray-800"
              >
                <option value="">📺 전체 채널</option>
                {channels.map((ch) => (
                  <option key={ch.id} value={ch.channel_name}>
                    📺 {ch.channel_name}
                  </option>
                ))}
              </select>
              <select
                value={cuisineFilter}
                onChange={(e) => setCuisineFilter(e.target.value)}
                className="border dark:border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 dark:bg-gray-800"
              >
                <option value="">🍽 전체 장르</option>
                {CUISINE_GROUPS.map((g) => (
                  <option key={g.label} value={g.label}>🍽 {g.label}</option>
                ))}
              </select>
              <select
                value={priceFilter}
                onChange={(e) => setPriceFilter(e.target.value)}
                className="border dark:border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 dark:bg-gray-800"
              >
                <option value="">💰 전체 가격</option>
                {PRICE_GROUPS.map((g) => (
                  <option key={g.label} value={g.label}>{g.label}</option>
                ))}
              </select>
            </div>
            {/* Row 2: Region filters + Toggle buttons + count */}
            <div className="flex items-center gap-3">
              <select
                value={countryFilter}
                onChange={(e) => handleCountryChange(e.target.value)}
                className="border dark:border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 dark:bg-gray-800"
              >
                <option value="">🌍 전체 나라</option>
                {countries.map((c) => (
                  <option key={c} value={c}>🌍 {c}</option>
                ))}
              </select>
              {countryFilter && cities.length > 0 && (
                <select
                  value={cityFilter}
                  onChange={(e) => handleCityChange(e.target.value)}
                  className="border dark:border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 dark:bg-gray-800"
                >
                  <option value="">🏙 전체 시/도</option>
                  {cities.map((c) => (
                    <option key={c} value={c}>🏙 {c}</option>
                  ))}
                </select>
              )}
              {cityFilter && districts.length > 0 && (
                <select
                  value={districtFilter}
                  onChange={(e) => handleDistrictChange(e.target.value)}
                  className="border dark:border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 dark:bg-gray-800"
                >
                  <option value="">🏘 전체 구/군</option>
                  {districts.map((d) => (
                    <option key={d} value={d}>🏘 {d}</option>
                  ))}
                </select>
              )}
              <div className="w-px h-5 bg-gray-200 dark:bg-gray-700" />
              <button
                onClick={() => setBoundsFilterOn(!boundsFilterOn)}
                className={`px-3 py-1.5 text-sm border rounded-lg transition-colors ${
                  boundsFilterOn
                    ? "bg-orange-50 dark:bg-orange-900/30 border-orange-300 dark:border-orange-700 text-orange-600 dark:text-orange-400"
                    : "hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-400"
                }`}
                title="지도 영역 내 식당만 표시"
              >
                {boundsFilterOn ? "📍 영역 필터" : "📍 영역"}
              </button>
              <button
                onClick={() => setViewMode(viewMode === "map" ? "list" : "map")}
                className="px-3 py-1.5 text-sm border rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-600 dark:text-gray-400"
                title={viewMode === "map" ? "리스트 우선" : "지도 우선"}
              >
                {viewMode === "map" ? "🗺 지도" : "☰ 리스트"}
              </button>
              {user && (
                <>
                  <button
                    onClick={handleToggleFavorites}
                    className={`px-3.5 py-1.5 text-sm rounded-full border transition-colors ${
                      showFavorites
                        ? "bg-rose-50 dark:bg-rose-900/30 border-rose-300 dark:border-rose-700 text-rose-600 dark:text-rose-400"
                        : "border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-100"
                    }`}
                  >
                    {showFavorites ? "♥ 내 찜" : "♡ 찜"}
                  </button>
                  <button
                    onClick={handleToggleMyReviews}
                    className={`px-3.5 py-1.5 text-sm rounded-full border transition-colors ${
                      showMyReviews
                        ? "bg-orange-50 dark:bg-orange-900/30 border-orange-300 dark:border-orange-700 text-orange-600 dark:text-orange-400"
                        : "border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-100"
                    }`}
                  >
                    {showMyReviews ? "✎ 내 리뷰" : "✎ 리뷰"}
                  </button>
                </>
              )}
              <span className="text-sm text-gray-500 whitespace-nowrap">
                {filteredRestaurants.length}개
              </span>
            </div>
          </div>

          {/* User area */}
          <div className="shrink-0 flex items-center gap-3 ml-auto">
            {authLoading ? null : user ? (
              <div className="flex items-center gap-2">
                {user.avatar_url ? (
                  <img
                    src={user.avatar_url}
                    alt=""
                    className="w-8 h-8 rounded-full border border-gray-200"
                  />
                ) : (
                  <div className="w-8 h-8 rounded-full bg-orange-100 text-orange-700 flex items-center justify-center text-sm font-semibold border border-orange-200">
                    {(user.nickname || user.email || "?").charAt(0).toUpperCase()}
                  </div>
                )}
                <span className="hidden sm:inline text-sm font-medium text-gray-700 dark:text-gray-300">
                  {user.nickname || user.email}
                </span>
                <button
                  onClick={logout}
                  className="ml-1 px-2.5 py-1 text-xs text-gray-500 dark:text-gray-400 border border-gray-300 dark:border-gray-700 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
                >
                  로그아웃
                </button>
              </div>
            ) : (
              <GoogleLogin
                onSuccess={(credentialResponse) => {
                  if (credentialResponse.credential) {
                    login(credentialResponse.credential).catch(console.error);
                  }
                }}
                onError={() => console.error("Google login failed")}
                size="small"
              />
            )}
          </div>
        </div>

        {/* ── Header row 2 (mobile only): search + toolbar ── */}
        <div className="md:hidden px-4 pb-3 space-y-2">
          {/* Row 1: Search */}
          <SearchBar onSearch={handleSearch} isLoading={loading} />
          {/* Row 2: Toolbar */}
          <div className="flex items-center gap-2">
            <button
              onClick={() => setViewMode(viewMode === "map" ? "list" : "map")}
              className={`px-3 py-1.5 text-xs border rounded-lg transition-colors ${
                viewMode === "map"
                  ? "bg-orange-50 dark:bg-orange-900/30 border-orange-300 dark:border-orange-700 text-orange-600 dark:text-orange-400"
                  : "text-gray-600"
              }`}
            >
              {viewMode === "map" ? "🗺 지도" : "☰ 리스트"}
            </button>
            <button
              onClick={() => setShowMobileFilters(!showMobileFilters)}
              className={`px-3 py-1.5 text-xs border rounded-lg transition-colors relative ${
                showMobileFilters || channelFilter || cuisineFilter || priceFilter || countryFilter || boundsFilterOn
                  ? "bg-orange-50 dark:bg-orange-900/30 border-orange-300 dark:border-orange-700 text-orange-600 dark:text-orange-400"
                  : "text-gray-600"
              }`}
            >
              {showMobileFilters ? "✕ 닫기" : "🔽 필터"}
              {!showMobileFilters && (channelFilter || cuisineFilter || priceFilter || countryFilter || boundsFilterOn) && (
                <span className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-orange-500 text-white rounded-full text-[9px] flex items-center justify-center">
                  {[channelFilter, cuisineFilter, priceFilter, countryFilter, boundsFilterOn].filter(Boolean).length}
                </span>
              )}
            </button>
            {user && (
              <>
                <button
                  onClick={handleToggleFavorites}
                  className={`px-3 py-1.5 text-xs rounded-full border transition-colors ${
                    showFavorites
                      ? "bg-rose-50 dark:bg-rose-900/30 border-rose-300 dark:border-rose-700 text-rose-600 dark:text-rose-400"
                      : "border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-400"
                  }`}
                >
                  {showFavorites ? "♥ 찜" : "♡ 찜"}
                </button>
                <button
                  onClick={handleToggleMyReviews}
                  className={`px-3 py-1.5 text-xs rounded-full border transition-colors ${
                    showMyReviews
                      ? "bg-orange-50 dark:bg-orange-900/30 border-orange-300 dark:border-orange-700 text-orange-600 dark:text-orange-400"
                      : "border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-400"
                  }`}
                >
                  {showMyReviews ? "✎ 리뷰" : "✎ 리뷰"}
                </button>
              </>
            )}
            <span className="text-xs text-gray-400 ml-auto">
              {filteredRestaurants.length}개
            </span>
          </div>

          {/* Collapsible filter panel */}
          {showMobileFilters && (
            <div className="bg-white/70 dark:bg-gray-900/70 backdrop-blur-md rounded-xl p-3.5 space-y-3 border border-white/50 dark:border-gray-700/50 shadow-sm">
              {/* Dropdown filters */}
              <div className="flex items-center gap-2 flex-wrap">
                <select
                  value={channelFilter}
                  onChange={(e) => {
                    setChannelFilter(e.target.value);
                    setSelected(null);
                    setShowDetail(false);
                  }}
                  className="border dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800"
                >
                  <option value="">📺 전체 채널</option>
                  {channels.map((ch) => (
                    <option key={ch.id} value={ch.channel_name}>
                      📺 {ch.channel_name}
                    </option>
                  ))}
                </select>
                <select
                  value={cuisineFilter}
                  onChange={(e) => setCuisineFilter(e.target.value)}
                  className="border dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800"
                >
                  <option value="">🍽 전체 장르</option>
                  {CUISINE_GROUPS.map((g) => (
                    <option key={g.label} value={g.label}>🍽 {g.label}</option>
                  ))}
                </select>
                <select
                  value={priceFilter}
                  onChange={(e) => setPriceFilter(e.target.value)}
                  className="border dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800"
                >
                  <option value="">💰 전체 가격</option>
                  {PRICE_GROUPS.map((g) => (
                    <option key={g.label} value={g.label}>💰 {g.label}</option>
                  ))}
                </select>
              </div>
              {/* Region filters */}
              <div className="flex items-center gap-2 flex-wrap">
                <select
                  value={countryFilter}
                  onChange={(e) => handleCountryChange(e.target.value)}
                  className="border dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800"
                >
                  <option value="">🌍 전체 나라</option>
                  {countries.map((c) => (
                    <option key={c} value={c}>🌍 {c}</option>
                  ))}
                </select>
                {countryFilter && cities.length > 0 && (
                  <select
                    value={cityFilter}
                    onChange={(e) => handleCityChange(e.target.value)}
                    className="border dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800"
                  >
                    <option value="">🏙 전체 시/도</option>
                    {cities.map((c) => (
                      <option key={c} value={c}>🏙 {c}</option>
                    ))}
                  </select>
                )}
                {cityFilter && districts.length > 0 && (
                  <select
                    value={districtFilter}
                    onChange={(e) => handleDistrictChange(e.target.value)}
                    className="border dark:border-gray-700 rounded-lg px-2.5 py-1.5 text-xs text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800"
                  >
                    <option value="">🏘 전체 구/군</option>
                    {districts.map((d) => (
                      <option key={d} value={d}>🏘 {d}</option>
                    ))}
                  </select>
                )}
              </div>
              {/* Toggle buttons */}
              <div className="flex items-center gap-2 flex-wrap">
                <button
                  onClick={() => setBoundsFilterOn(!boundsFilterOn)}
                  className={`px-2.5 py-1.5 text-xs border rounded-lg transition-colors ${
                    boundsFilterOn
                      ? "bg-orange-50 dark:bg-orange-900/30 border-orange-300 dark:border-orange-700 text-orange-600 dark:text-orange-400"
                      : "text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800"
                  }`}
                >
                  {boundsFilterOn ? "📍 영역 ON" : "📍 영역"}
                </button>
              </div>
            </div>
          )}
        </div>
      </header>

      {/* ── Body: Desktop = side-by-side, Mobile = stacked ── */}

      {/* Desktop layout */}
      <div className="hidden md:flex flex-1 overflow-hidden">
        {viewMode === "map" ? (
          <>
            <aside className="w-80 bg-white dark:bg-gray-950 border-r dark:border-gray-800 overflow-y-auto shrink-0">
              {sidebarContent}
            </aside>
            <main className="flex-1 relative">
              <MapView
                restaurants={filteredRestaurants}
                selected={selected}
                onSelectRestaurant={handleSelectRestaurant}
                onBoundsChanged={handleBoundsChanged}
                flyTo={regionFlyTo}
              />
              {visits && (
                <div className="absolute bottom-1 right-2 bg-white/60 backdrop-blur-sm text-gray-700 text-[10px] px-2.5 py-1 rounded-lg shadow-sm">
                  오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
                </div>
              )}
            </main>
          </>
        ) : (
          <>
            <aside className="flex-1 bg-white dark:bg-gray-950 overflow-y-auto">
              {sidebarContent}
            </aside>
            <main className="w-[40%] shrink-0 relative border-l dark:border-gray-800">
              <MapView
                restaurants={filteredRestaurants}
                selected={selected}
                onSelectRestaurant={handleSelectRestaurant}
                onBoundsChanged={handleBoundsChanged}
                flyTo={regionFlyTo}
              />
              {visits && (
                <div className="absolute bottom-1 right-2 bg-white/60 backdrop-blur-sm text-gray-700 text-[10px] px-2.5 py-1 rounded-lg shadow-sm">
                  오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
                </div>
              )}
            </main>
          </>
        )}
      </div>

      {/* Mobile layout */}
      <div className="md:hidden flex-1 flex flex-col overflow-hidden">
        {viewMode === "map" ? (
          <>
            <div className="flex-1 relative">
              <MapView
                restaurants={filteredRestaurants}
                selected={selected}
                onSelectRestaurant={handleSelectRestaurant}
                onBoundsChanged={handleBoundsChanged}
                flyTo={regionFlyTo}
              />
              {visits && (
                <div className="absolute bottom-1 right-2 bg-white/60 backdrop-blur-sm text-gray-700 text-[10px] px-2.5 py-1 rounded-lg shadow-sm z-10">
                  오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
                </div>
              )}
            </div>
          </>
        ) : (
          <>
            {/* List area — if selected, show single row; otherwise full list */}
            {selected ? (
              <div
                className="shrink-0 bg-white dark:bg-gray-950 border-b dark:border-gray-800 px-3 py-2 flex items-center gap-2 cursor-pointer"
                onClick={() => { setSelected(null); setShowDetail(false); }}
              >
                <span className="text-base">{getCuisineIcon(selected.cuisine_type)}</span>
                <span className="font-semibold text-sm truncate flex-1">{selected.name}</span>
                {selected.rating && (
                  <span className="text-xs text-gray-500"><span className="text-yellow-500">★</span> {selected.rating}</span>
                )}
                {selected.cuisine_type && (
                  <span className="text-xs text-gray-400">{selected.cuisine_type}</span>
                )}
                <button
                  onClick={(e) => { e.stopPropagation(); setSelected(null); setShowDetail(false); }}
                  className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-lg leading-none ml-1"
                >
                  ✕
                </button>
              </div>
            ) : (
              <div className="max-h-[360px] bg-white dark:bg-gray-950 overflow-y-auto border-b dark:border-gray-800">
                {mobileListContent}
              </div>
            )}
            {/* Map fills remaining space below the list */}
            <div className="flex-1 relative">
              <MapView
                restaurants={filteredRestaurants}
                selected={selected}
                onSelectRestaurant={handleSelectRestaurant}
                onBoundsChanged={handleBoundsChanged}
                flyTo={regionFlyTo}
              />
              {visits && (
                <div className="absolute bottom-1 right-2 bg-white/60 backdrop-blur-sm text-gray-700 text-[10px] px-2.5 py-1 rounded-lg shadow-sm z-10">
                  오늘 {visits.today} · 전체 {visits.total.toLocaleString()}
                </div>
              )}
            </div>
          </>
        )}

        {/* Mobile Bottom Sheet for restaurant detail */}
        <BottomSheet open={showDetail && !!selected} onClose={handleCloseDetail}>
          {selected && (
            <RestaurantDetail restaurant={selected} onClose={handleCloseDetail} />
          )}
        </BottomSheet>
      </div>

      {/* Footer */}
      <footer className="shrink-0 border-t dark:border-gray-800 bg-white/60 dark:bg-gray-900/60 backdrop-blur-sm py-2.5 flex items-center justify-center gap-2 text-[11px] text-gray-400 dark:text-gray-500 group">
        <div className="relative">
          <img
            src="/icon.jpg"
            alt="SDJ Labs"
            className="w-6 h-6 rounded-full border-2 border-orange-200 shadow-sm group-hover:scale-110 group-hover:rotate-12 transition-all duration-300"
          />
          <span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-orange-300 rounded-full animate-ping opacity-75" />
          <span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-orange-400 rounded-full" />
        </div>
        <span className="font-medium tracking-wide group-hover:text-gray-600 transition-colors">
          SDJ Labs Co., Ltd.
        </span>
      </footer>
    </div>
  );
}