import React, { useMemo, useState } from "react";
import { Search, Star, ShieldCheck, Clock3, Coins, MapPin, MessageCircle, Send, Info, Building2, HelpCircle, ChevronRight, Menu, X, Image as ImageIcon, Heart } from "lucide-react";

const cities = ["호치민", "다낭", "하노이", "나트랑"];

const categories = [
  { group: "밤문화", items: [{ name: "한인 가라오케", count: 8 }, { name: "로컬 가라오케", count: 8 }, { name: "클럽", count: 19 }, { name: "바", count: 11 }, { name: "라운지", count: 3 }] },
  { group: "힐링", items: [{ name: "남성전용마사지", count: 18 }, { name: "건전마사지", count: 8 }, { name: "이발소", count: 13 }, { name: "스파", count: 19 }] },
  { group: "레저", items: [{ name: "골프", count: 8 }, { name: "카지노", count: 7 }] },
];

const listings = [
  {
    id: 1,
    name: "22스파",
    city: "호치민",
    category: "스파",
    subtitle: "호치민 알러진마사지, 프리미엄, 호치민3대마사지 스파",
    rating: 4.6,
    service: 4.8,
    safety: 4.8,
    verified: true,
    hours: "10:00–23:00",
    price: "700,000–3,000,000 VND",
    date: "2026-03-26",
    tags: ["알러진마사지", "프리미엄", "호치민3대마사지", "단골많음"],
  },
  {
    id: 2,
    name: "골든 릴렉스",
    city: "다낭",
    category: "건전마사지",
    subtitle: "다낭 여행객에게 인기 있는 깔끔한 마사지 샵",
    rating: 4.4,
    service: 4.5,
    safety: 4.7,
    verified: true,
    hours: "11:00–24:00",
    price: "500,000–1,800,000 VND",
    date: "2026-03-18",
    tags: ["예약가능", "청결", "커플룸", "픽업문의"],
  },
];

function Pill({ children, active = false, className = "" }) {
  return (
    <span className={`inline-flex items-center rounded-full border px-4 py-2 text-sm font-semibold ${active ? "border-yellow-500/60 bg-yellow-500/10 text-yellow-200" : "border-white/10 bg-white/5 text-zinc-300"} ${className}`}>
      {children}
    </span>
  );
}

function Header({ mobileOpen, setMobileOpen }) {
  return (
    <header className="sticky top-0 z-40 border-b border-yellow-500/20 bg-[#0b0b0a]/90 backdrop-blur-xl">
      <div className="mx-auto flex h-20 max-w-[1440px] items-center justify-between px-5 lg:px-8">
        <div className="flex items-center gap-4">
          <button className="rounded-xl border border-white/10 p-2 text-zinc-200 lg:hidden" onClick={() => setMobileOpen(!mobileOpen)}>
            {mobileOpen ? <X size={22} /> : <Menu size={22} />}
          </button>
          <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br from-yellow-200 to-yellow-600 font-black text-black shadow-lg shadow-yellow-900/20">V</div>
          <div className="text-2xl font-black tracking-[0.18em] text-zinc-100">VIETNER</div>
        </div>
        <nav className="hidden items-center gap-8 text-[15px] font-bold text-zinc-300 lg:flex">
          {cities.map((city) => <a key={city} className="transition hover:text-yellow-200" href="#">{city}</a>)}
          <a className="transition hover:text-yellow-200" href="#">블로그</a>
          <a className="transition hover:text-yellow-200" href="#">소개</a>
          <a className="transition hover:text-yellow-200" href="#">FAQ</a>
        </nav>
        <button className="grid h-12 w-12 place-items-center rounded-full border border-yellow-500/30 text-yellow-200 transition hover:bg-yellow-500/10">
          <Search size={21} />
        </button>
      </div>
    </header>
  );
}

function Sidebar({ selectedCategory, setSelectedCategory, mobileOpen }) {
  return (
    <aside className={`${mobileOpen ? "block" : "hidden"} fixed inset-x-4 top-24 z-30 max-h-[75vh] overflow-y-auto rounded-3xl border border-yellow-500/20 bg-[#0d0d0b] p-5 shadow-2xl lg:sticky lg:top-24 lg:block lg:max-h-[calc(100vh-7rem)] lg:w-[270px] lg:rounded-none lg:border-0 lg:bg-transparent lg:p-0 lg:shadow-none`}>
      <div className="mb-5 text-sm font-black text-yellow-300">카테고리</div>
      <div className="mb-8 grid grid-cols-2 gap-3">
        {cities.map((city, index) => <button key={city} className={`rounded-xl border px-4 py-3 font-bold ${index === 0 ? "border-yellow-500/50 bg-yellow-500/10 text-yellow-100" : "border-white/10 text-zinc-300 hover:bg-white/5"}`}>{city}</button>)}
      </div>
      <div className="space-y-8">
        {categories.map((section) => (
          <div key={section.group}>
            <div className="mb-3 flex items-center gap-2 text-sm font-black text-yellow-300">{section.group === "밤문화" ? "☾" : section.group === "힐링" ? "♛" : "♜"} {section.group}</div>
            <div className="space-y-1">
              {section.items.map((item) => (
                <button key={item.name} onClick={() => setSelectedCategory(item.name)} className={`flex w-full items-center justify-between rounded-xl px-4 py-3 text-left font-semibold transition ${selectedCategory === item.name ? "bg-yellow-500/15 text-yellow-100" : "text-zinc-400 hover:bg-white/5 hover:text-zinc-100"}`}>
                  <span>{item.name}</span>
                  <span className="text-sm text-yellow-400/70">{item.count}</span>
                </button>
              ))}
            </div>
          </div>
        ))}
      </div>
    </aside>
  );
}

function Gallery() {
  return (
    <div className="space-y-5">
      <div className="relative h-[260px] overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-stone-700 via-zinc-800 to-black md:h-[330px]">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(250,204,21,.28),transparent_28%),radial-gradient(circle_at_70%_70%,rgba(168,85,247,.22),transparent_32%)]" />
        <div className="absolute inset-8 rounded-[2rem] border border-white/10 bg-black/20 backdrop-blur-sm" />
        <div className="absolute left-8 top-8 rounded-2xl bg-green-500 px-3 py-1 text-xs font-black text-white">VIETNER 검증</div>
        <div className="absolute bottom-7 right-7 rounded-full bg-black/70 px-4 py-2 font-black text-white">1 / 5</div>
        <div className="absolute inset-0 grid place-items-center text-zinc-300/70"><ImageIcon size={56} /></div>
      </div>
      <div className="grid grid-cols-3 gap-4">
        {[1, 2, 3].map((n) => (
          <div key={n} className="h-24 overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-zinc-700 to-zinc-950 md:h-28">
            <div className="h-full w-full bg-[radial-gradient(circle_at_40%_35%,rgba(234,179,8,.26),transparent_34%)]" />
          </div>
        ))}
      </div>
    </div>
  );
}

function ListingCard({ listing }) {
  return (
    <article className="rounded-3xl border border-white/10 bg-[#171712] p-5 shadow-2xl shadow-black/30 md:p-7">
      <div className="grid gap-8 xl:grid-cols-[580px_1fr]">
        <Gallery />
        <div className="flex flex-col justify-between gap-6">
          <div>
            <div className="mb-3 flex items-center justify-between gap-3">
              <h1 className="text-3xl font-black tracking-tight text-zinc-100 md:text-4xl">{listing.name}</h1>
              <button className="rounded-full border border-white/10 p-3 text-zinc-300 transition hover:bg-white/5 hover:text-rose-300"><Heart size={21} /></button>
            </div>
            <div className="mb-5 text-sm font-bold text-zinc-400">22 Spa</div>
            <div className="mb-5 flex flex-wrap gap-3">
              <Pill active>{listing.city}</Pill>
              <Pill>{listing.category}</Pill>
            </div>
            <p className="mb-5 border-b border-white/10 pb-5 text-lg font-semibold text-zinc-300">{listing.subtitle}</p>
            <div className="mb-5 rounded-2xl border border-yellow-500/20 bg-yellow-500/5 p-5">
              <div className="flex flex-wrap items-center gap-5">
                <div className="flex items-center gap-3 text-3xl font-black text-yellow-100"><Star className="fill-yellow-300 text-yellow-300" size={27} /> {listing.rating}</div>
                <div className="text-sm font-bold text-zinc-400">
                  <div>VIETNER 검증 평가</div>
                  <div>시설 {listing.rating} · 서비스 {listing.service} · 안전 {listing.safety}</div>
                </div>
              </div>
            </div>
            <div className="mb-5 flex flex-wrap gap-3">
              <Pill><ShieldCheck className="mr-2" size={16} /> 베트너 직접 검증</Pill>
              <Pill><Clock3 className="mr-2" size={16} /> {listing.hours}</Pill>
              <Pill><Coins className="mr-2" size={16} /> {listing.price}</Pill>
            </div>
            <div className="mb-5 flex items-center gap-3 border-y border-white/10 py-4 text-sm font-bold text-zinc-400">
              <span className="rounded-md bg-emerald-500 px-2 py-1 text-white">검증됨</span>
              <span>{listing.date}</span>
              <span>│</span>
              <span className="flex items-center gap-1"><MapPin size={15} /> 위치 문의</span>
            </div>
            <div className="flex flex-wrap gap-3">
              {listing.tags.map((tag) => <span key={tag} className="rounded-full border border-purple-400/30 bg-purple-500/10 px-4 py-2 font-black text-purple-200">{tag}</span>)}
            </div>
          </div>
        </div>
      </div>
    </article>
  );
}

function ContactBox() {
  return (
    <section className="rounded-3xl border border-white/10 bg-[#171712] px-6 py-12 text-center shadow-2xl shadow-black/20">
      <h2 className="mb-2 text-3xl font-black text-zinc-100">22스파가 궁금하신가요?</h2>
      <p className="mb-8 text-lg font-semibold text-zinc-400">가격·예약·위치 정보를 상담으로 안내해드립니다.</p>
      <div className="mx-auto grid max-w-xl gap-4 sm:grid-cols-2">
        <button className="inline-flex items-center justify-center gap-2 rounded-2xl bg-yellow-400 px-6 py-4 font-black text-black shadow-lg shadow-yellow-900/20 transition hover:-translate-y-0.5 hover:bg-yellow-300"><MessageCircle size={19} /> 카카오톡 상담</button>
        <button className="inline-flex items-center justify-center gap-2 rounded-2xl bg-sky-500 px-6 py-4 font-black text-white shadow-lg shadow-sky-900/20 transition hover:-translate-y-0.5 hover:bg-sky-400"><Send size={18} /> 텔레그램 상담</button>
      </div>
    </section>
  );
}

function RightPanel() {
  return (
    <aside className="space-y-5 xl:w-[320px]">
      <div className="rounded-3xl border border-white/10 bg-[#171712] p-6">
        <a className="flex items-center gap-4 rounded-2xl px-3 py-4 font-black text-zinc-300 hover:bg-white/5" href="#"><Info className="text-sky-400" size={20} /> 안내</a>
        <a className="flex items-center gap-4 rounded-2xl px-3 py-4 font-black text-zinc-300 hover:bg-white/5" href="#"><Building2 className="text-sky-400" size={20} /> 베트너 소개</a>
        <a className="flex items-center gap-4 rounded-2xl px-3 py-4 font-black text-zinc-300 hover:bg-white/5" href="#"><HelpCircle className="text-rose-400" size={20} /> 자주 묻는 질문</a>
      </div>
      <div className="overflow-hidden rounded-3xl border border-yellow-500/15 bg-[#171712]">
        <div className="grid h-28 place-items-center bg-yellow-500/10"><Star className="fill-yellow-300 text-yellow-300" size={42} /></div>
        <div className="p-6">
          <h3 className="mb-2 text-xl font-black text-zinc-100">이달의 추천 업소</h3>
          <p className="mb-5 font-semibold text-zinc-400">현지인이 엄선한 프리미엄 업체</p>
          <button className="flex w-full items-center justify-center gap-2 rounded-xl border border-yellow-500/30 px-4 py-3 font-black text-yellow-100 hover:bg-yellow-500/10">자세히 보기 <ChevronRight size={17} /></button>
        </div>
      </div>
      <div className="overflow-hidden rounded-3xl border border-sky-500/15 bg-[#171712]">
        <div className="grid h-28 place-items-center bg-sky-500/10 text-4xl">💰</div>
        <div className="p-6">
          <h3 className="mb-2 text-xl font-black text-zinc-100">가격 가이드</h3>
          <p className="mb-5 font-semibold text-zinc-400">도시·카테고리별 평균 가격</p>
          <button className="flex w-full items-center justify-center gap-2 rounded-xl border border-sky-500/30 bg-sky-500/10 px-4 py-3 font-black text-sky-100 hover:bg-sky-500/20">가격 확인</button>
        </div>
      </div>
    </aside>
  );
}

export default function App() {
  const [selectedCategory, setSelectedCategory] = useState("스파");
  const [query, setQuery] = useState("");
  const [mobileOpen, setMobileOpen] = useState(false);

  const filteredListings = useMemo(() => {
    return listings.filter((item) => {
      const matchesCategory = selectedCategory ? item.category === selectedCategory || item.tags.join(" ").includes(selectedCategory) || selectedCategory === "스파" : true;
      const matchesQuery = query.trim() ? `${item.name} ${item.subtitle} ${item.city} ${item.category} ${item.tags.join(" ")}`.toLowerCase().includes(query.toLowerCase()) : true;
      return matchesCategory && matchesQuery;
    });
  }, [selectedCategory, query]);

  return (
    <main className="min-h-screen bg-[#080807] text-zinc-100">
      <Header mobileOpen={mobileOpen} setMobileOpen={setMobileOpen} />
      <div className="mx-auto grid max-w-[1440px] gap-8 px-5 py-8 lg:grid-cols-[270px_1fr] lg:px-8 xl:grid-cols-[270px_1fr_320px]">
        <Sidebar selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory} mobileOpen={mobileOpen} />
        <section className="min-w-0 space-y-8">
          <div className="rounded-3xl border border-white/10 bg-[#171712] p-5 md:p-6">
            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
              <div>
                <p className="mb-1 text-sm font-black text-yellow-300">VIETNER DIRECTORY</p>
                <h2 className="text-2xl font-black md:text-3xl">검증된 현지 업체를 빠르게 찾아보세요</h2>
              </div>
              <label className="relative block md:w-80">
                <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500" size={18} />
                <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="업소, 지역, 태그 검색" className="w-full rounded-2xl border border-white/10 bg-black/30 py-4 pl-12 pr-4 font-semibold text-zinc-100 outline-none ring-yellow-500/20 transition placeholder:text-zinc-600 focus:border-yellow-500/40 focus:ring-4" />
              </label>
            </div>
          </div>
          {filteredListings.length > 0 ? filteredListings.map((listing) => <ListingCard key={listing.id} listing={listing} />) : (
            <div className="rounded-3xl border border-white/10 bg-[#171712] p-10 text-center text-zinc-400">검색 결과가 없습니다.</div>
          )}
          <ContactBox />
        </section>
        <RightPanel />
      </div>
      <div className="fixed bottom-6 right-6 z-40 flex flex-col gap-4">
        <button className="grid h-16 w-16 place-items-center rounded-full bg-yellow-400 text-2xl shadow-xl shadow-yellow-900/30 transition hover:-translate-y-1">💬</button>
        <button className="grid h-16 w-16 place-items-center rounded-full bg-sky-500 text-2xl shadow-xl shadow-sky-900/30 transition hover:-translate-y-1">✈️</button>
      </div>
    </main>
  );
}