import React, { useState, useEffect, useMemo, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInAnonymously, 
  onAuthStateChanged, 
  signInWithCustomToken,
  signOut,
  GoogleAuthProvider,
  signInWithPopup,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  updateProfile,
  updatePassword,
  RecaptchaVerifier,
  signInWithPhoneNumber
} from 'firebase/auth';
import { 
  getFirestore, 
  doc, 
  setDoc, 
  updateDoc, 
  onSnapshot,
  collection,
  addDoc,
  serverTimestamp,
  getDoc
} from 'firebase/firestore';
import { 
  MapPin, 
  Utensils, 
  Coffee, 
  Beer, 
  Music, 
  Scissors, 
  Sparkles, 
  User, 
  Ticket, 
  MessageCircle, 
  ChevronRight, 
  X, 
  Star, 
  Map as MapIcon, 
  RotateCcw, 
  Home, 
  PlusCircle, 
  Heart, 
  Send, 
  Store, 
  Clock, 
  QrCode, 
  LogOut, 
  Mail, 
  Lock, 
  Phone, 
  Plus, 
  MessageSquare, 
  Edit, 
  HelpCircle, 
  Bell, 
  Gift, 
  ChevronLeft, 
  CreditCard, 
  AlertCircle, 
  GraduationCap, 
  Image as ImageIcon,
  Users,
  CheckCircle,
  ChevronDown,
  ChevronUp,
  PawPrint,
  Plane,
  Navigation,
  Siren,      // For Report
  Smartphone, // For Phone Auth
  Camera,     // For Image Upload
  Car,        // For Grab
  Shield,     // For Admin
  Briefcase,  // For Boss
  Calendar    // For DOB
} from 'lucide-react';

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

// --- Global Constants ---
const fontStyle = { fontFamily: "'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif" };
const GOOGLE_MAPS_API_KEY = ""; // TODO: 나중에 여기에 실제 Google Maps API Key를 넣으세요.

const LANGUAGES = [
    { code: 'ko', flag: '🇰🇷' },
    { code: 'en', flag: '🇺🇸' },
    { code: 'vn', flag: '🇻🇳' }
];

// Updated Categories with Pet and Travel
const CATEGORIES_DATA = [
  { id: 'food', Icon: Utensils },
  { id: 'cafe', Icon: Coffee },
  { id: 'pub', Icon: Beer },
  { id: 'club', Icon: Music },
  { id: 'massage', Icon: Sparkles },
  { id: 'barber', Icon: Scissors },
  { id: 'beauty', Icon: User },
  { id: 'shopping', Icon: Store },
  { id: 'pet', Icon: PawPrint },
  { id: 'travel', Icon: Plane },
];

const CITIES = [
  { id: 'hcm', name: '호치민 (HCM)', icon: '🏙️', lat: 10.7769, lng: 106.7009 },
  { id: 'hanoi', name: '하노이', icon: '🏯', lat: 21.0285, lng: 105.8542 },
  { id: 'danang', name: '다낭', icon: '🏖️', lat: 16.0544, lng: 108.2022 },
  { id: 'nhatrang', name: '나트랑', icon: '🌴', lat: 12.2388, lng: 109.1967 },
];

// 레슨용 지역 상수 (달랏 포함)
const LESSON_LOCATIONS = [
    { id: 'hcm', name: '호치민' },
    { id: 'hanoi', name: '하노이' },
    { id: 'danang', name: '다낭' },
    { id: 'nhatrang', name: '나트랑' },
    { id: 'dalat', name: '달랏' },
];

// Updated MOCK_BUSINESSES with REAL Coordinates for Google Maps
const MOCK_BUSINESSES = [
  {
    id: 'b1',
    name: 'Pho Quynh',
    category: 'food',
    city: 'hcm',
    rating: 4.8,
    reviewCount: 128,
    image: 'https://images.unsplash.com/photo-1582878826629-29b7ad1cdc43?auto=format&fit=crop&q=80&w=800',
    desc: {
        ko: '부이비엔 근처 가장 유명한 24시간 쌀국수 맛집.',
        en: 'Famous 24h Pho restaurant near Bui Vien walking street.',
        vn: 'Quán phở 24h nổi tiếng nhất gần phố đi bộ Bùi Viện.'
    },
    hours: '10:00 ~ 02:00',
    phone: '028 3836 8515',
    address: '323 Phạm Ngũ Lão, Phường Phạm Ngũ Lão, Quận 1, Hồ Chí Minh',
    coupon: {
        ko: '음료 1잔 무료',
        en: 'Free Drink',
        vn: 'Miễn phí 1 đồ uống'
    },
    couponDesc: {
        ko: '직원에게 이 화면을 보여주세요.',
        en: 'Show this screen to the staff.',
        vn: 'Vui lòng đưa màn hình này cho nhân viên.'
    },
    lat: 10.7676, lng: 106.6935 // Real coordinates
  },
  {
    id: 'b2',
    name: 'Bun Cha 145',
    category: 'food',
    city: 'hcm',
    rating: 4.5,
    reviewCount: 856,
    image: 'https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?auto=format&fit=crop&q=80&w=800',
    desc: { ko: '부이비엔 분짜 맛집', en: 'Bun Cha 145', vn: 'Bun Cha Ngon' },
    hours: '12:30 ~ 20:00',
    phone: '028 3837 3474',
    address: '145 Bùi Viện, Phường Phạm Ngũ Lão, Quận 1, Hồ Chí Minh',
    coupon: { ko: '10% 할인', en: '10% Discount', vn: 'Giảm giá 10%' },
    couponDesc: { ko: '메인 메뉴 주문 시', en: 'Main dish order', vn: 'Khi gọi món chính' },
    lat: 10.7671, lng: 106.6943
  },
  { id: 'b3', name: 'Pizza 4P\'s', category: 'food', city: 'hcm', image: 'https://images.unsplash.com/photo-1574071318508-1cdbab80d002?auto=format&fit=crop&q=80&w=800', desc: { ko: '화덕 피자', en: 'Pizza', vn: 'Pizza' }, hours: '11:00~22:00', phone: '1900 6043', address: '8/15 Le Thanh Ton', coupon: { ko: '디저트 증정', en: 'Free Dessert', vn: 'Tặng tráng miệng' }, couponDesc: { ko: '설명', en: 'Desc', vn: 'Mô tả' }, lat: 10.7797, lng: 106.7045 },
  { id: 'b4', name: 'Cong Cafe', category: 'cafe', city: 'danang', image: 'https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&q=80&w=800', desc: { ko: '코코넛 커피', en: 'Coconut Coffee', vn: 'Cà phê cốt dừa' }, hours: '07:00~23:00', phone: '0236 6553', address: '98 Bach Dang', coupon: { ko: '사이즈 업', en: 'Size up', vn: 'Up size' }, couponDesc: { ko: '설명', en: 'Desc', vn: 'Mô tả' }, lat: 16.0688, lng: 108.2238 },
  { id: 'b5', name: 'Miu Miu Spa', category: 'massage', city: 'hcm', image: 'https://images.unsplash.com/photo-1600334089648-b0d9d3028eb2?auto=format&fit=crop&q=80&w=800', desc: { ko: '마사지', en: 'Massage', vn: 'Massage' }, hours: '09:30~23:00', phone: '028 6659', address: '4 Chu Manh Trinh', coupon: { ko: '20% 할인', en: '20% DC', vn: 'Giảm 20%' }, couponDesc: { ko: '설명', en: 'Desc', vn: 'Mô tả' }, lat: 10.7810, lng: 106.7040 },
];

const MOCK_POSTS = [
  {
    id: 'p1',
    author: '여행자123',
    city: 'hcm',
    title: '호치민 1군 맛집 추천 좀 해주세요!',
    content: '부모님 모시고 가는데 깔끔한 곳 찾습니다.',
    likes: 12,
    isLiked: false,
    comments: [],
    timestamp: '방금 전'
  }
];

// Updated Mock Winners to support Multi-language
const MOCK_WINNERS = {
    ko: ["🔥 [호치민] user82**님 'Pizza 4P's' 무료 피자 당첨!"],
    en: ["🔥 [HCMC] user82** won 'Free Pizza' at 'Pizza 4P's'!"],
    vn: ["🔥 [TP.HCM] user82** đã trúng 'Pizza miễn phí' tại 'Pizza 4P's'!"]
};

const COUNTRY_CODES = [
    { code: '+84', name: '베트남', flag: '🇻🇳' },
    { code: '+82', name: '대한민국', flag: '🇰🇷' },
    { code: '+1', name: '미국', flag: '🇺🇸' },
];

const SLOT_OPTIONS = [
    { count: 1, price: 2, label: '1개 확장' },
    { count: 3, price: 3, label: '3개 확장' },
    { count: 5, price: 5, label: '5개 확장' },
    { count: 10, price: 8, label: '10개 확장' },
];

const RESIDENCE_OPTIONS = [
    { id: 'hanoi', label: '하노이' },
    { id: 'danang', label: '다낭' },
    { id: 'nhatrang', label: '나트랑' },
    { id: 'dalat', label: '달랏' },
    { id: 'hcm', label: '호치민' },
    { id: 'custom', label: '직접 입력' }
];

const TRANSLATIONS = {
  ko: {
    home: '룰렛', map: '지도', coupon: '내 쿠폰함', community: '커뮤니티', mypage: '마이',
    login_needed: '로그인이 필요해요', login_btn: '로그인 / 회원가입', login: '로그인', signup: '회원가입',
    id_placeholder: '아이디', pw_placeholder: '비밀번호', email_placeholder: '이메일 (연락용)', phone_placeholder: '핸드폰 번호',
    spin_left: '오늘 남은 기회', daily_user: '오늘 {n}명이 룰렛으로 결정했어요!', lineup: '이달의 라인업', click_info: '클릭하여 업체 정보 보기', boss_only: '사장님 전용',
    store_inquiry: '입점 신청하기', inquiry_desc: '100만 동으로 우리 가게를\nDealBox 룰렛에 올리세요!', apply: '입점 신청하기',
    spin_msg_login: '로그인하고 룰렛 돌리기', spin_msg_no_chance: '스핀 기회가 없나요? 광고보고 충전하기 (+1)',
    slot_add: '슬롯 추가', my_slot: 'MY 쿠폰 슬롯', spin_free: '무제한', spin_no: '기회없음',
    coupon_validity: '* 쿠폰은 발급 후 24시간 동안 유효합니다.', use_coupon: '사용하기', save_coupon: '쿠폰 담기',
    available: '사용가능', hours_left: '시간 남음', congrats: '🎉 당첨을 축하합니다!', saved_msg: '쿠폰함에 저장하여 매장 방문 시 사용하세요!',
    boss_check: '사장님 확인 완료', boss_check_title: '쿠폰 사용 확인 (사장님 보여주기)',
    write_title: '글쓰기', write_placeholder_title: '제목', write_placeholder_content: '내용 입력', register: '등록하기',
    comments: '댓글', likes: '공감', city_select: '지역 선택', traveler_talk: '트래블러 톡', talk_placeholder: '정보 공유하기...',
    cat_food: '맛집', cat_cafe: '카페', cat_pub: '펍/바', cat_club: '클럽', cat_massage: '마사지', cat_barber: '이발소', cat_beauty: '뷰티', cat_shopping: '쇼핑', cat_pet: '애완동물', cat_travel: '여행사',
    tag_food: '오늘 뭐 먹지?', tag_cafe: '분위기 좋은 카페', tag_pub: '한잔 할까?', tag_club: '오늘 밤 파티?', tag_massage: '피로 풀기', tag_barber: '깔끔하게 변신', tag_beauty: '더 예뻐지기', tag_shopping: '기념품 & 쇼핑', tag_pet: '댕댕이와 함께', tag_travel: '여행 떠나볼까?',
    city_hcm: '호치민', city_hanoi: '하노이', city_danang: '다낭', city_nhatrang: '나트랑',
    menu_edit: '내 정보 수정', menu_inquiry: '신고/문의 센터', menu_notice: '공지사항', menu_event: '이벤트', menu_lesson: '개인레슨', logout: '로그아웃',
    lesson_write: '레슨 등록하기', lesson_price: '시간당 가격 (VND)', lesson_contact: '연락처', lesson_apply: '신청하기', lesson_applicants: '신청자',
    lesson_apply_title: '레슨 신청', lesson_apply_btn: '신청 완료', lesson_apply_msg_placeholder: '선생님께 남길 메시지',
    lesson_applicants_view: '신청자 명단',
    google_fail: '구글 로그인 실패', login_fail: '로그인 실패', signup_success: '회원가입 성공',
    map_view: '구글 지도로 보기', review: '리뷰',
    ticker_format: "🎉 [{city}] {user}님 '{shop}' {coupon} 당첨!",
    business_hours: '영업시간:', address_label: '주소:', phone_label: '전화:',
    map_guide: '지도를 움직여 업체를 확인하세요',
    map_key_missing: '지도를 불러오지 못했습니다. API 키를 확인해주세요.',
    grab_go: 'Grab으로 이동', report: '신고하기', report_title: '신고하기', report_reason: '신고 사유', report_btn: '신고 접수',
    push_setting: '알림 설정', admin_page: '관리자 페이지', boss_page: '사장님 페이지',
    zalo_login: 'Zalo로 로그인', phone_verify: '인증',
    name_placeholder: '이름', dob_placeholder: '생년월일 (YYYY-MM-DD)', residence_label: '거주지역'
  },
  en: {
    home: 'Roulette', map: 'Map', coupon: 'My Coupons', community: 'Community', mypage: 'My',
    login_needed: 'Login Required', login_btn: 'Login / Signup', login: 'Login', signup: 'Signup',
    id_placeholder: 'ID', pw_placeholder: 'Password', email_placeholder: 'Email', phone_placeholder: 'Phone Number',
    spin_left: 'Spins Left', daily_user: '{n} users decided with Roulette today!', lineup: 'Lineup of the Month', click_info: 'Click for info', boss_only: 'Partners',
    store_inquiry: 'Join DealBox', inquiry_desc: 'Promote your shop on DealBox\nfor 1M VND!', apply: 'Apply to Join',
    spin_msg_login: 'Login to Spin', spin_msg_no_chance: 'No spins left? Watch Ad to recharge (+1)',
    slot_add: 'Add Slots', my_slot: 'My Slots', spin_free: 'Free', spin_no: '0',
    coupon_validity: '* Coupon valid for 24 hours after issuance.', use_coupon: 'Use Coupon', save_coupon: 'Save',
    available: 'Available', hours_left: 'h left', congrats: '🎉 Congratulations!', saved_msg: 'Saved to your wallet!',
    boss_check: 'Verified by Staff', boss_check_title: 'Use Coupon (Show Staff)',
    write_title: 'Write Post', write_placeholder_title: 'Title', write_placeholder_content: 'Content', register: 'Post',
    comments: 'Comments', likes: 'Likes', city_select: 'Select City', traveler_talk: 'Traveler Talk', talk_placeholder: 'Share info...',
    cat_food: 'Food', cat_cafe: 'Cafe', cat_pub: 'Pub/Bar', cat_club: 'Club', cat_massage: 'Massage', cat_barber: 'Barber', cat_beauty: 'Beauty', cat_shopping: 'Shopping', cat_pet: 'Pet', cat_travel: 'Travel',
    tag_food: 'Hungry?', tag_cafe: 'Nice Vibes', tag_pub: 'Drink?', tag_club: 'Party Tonight?', tag_massage: 'Relax', tag_barber: 'Haircut', tag_beauty: 'Beauty', tag_shopping: 'Shopping', tag_pet: 'With Pets', tag_travel: 'Let\'s go!',
    city_hcm: 'HCMC', city_hanoi: 'Hanoi', city_danang: 'Danang', city_nhatrang: 'Nha Trang',
    menu_edit: 'Edit Profile', menu_inquiry: 'Report/Support', menu_notice: 'Notices', menu_event: 'Events', menu_lesson: 'Lessons', logout: 'Logout',
    lesson_write: 'Post Lesson', lesson_price: 'Price/Hr (VND)', lesson_contact: 'Contact', lesson_apply: 'Apply', lesson_applicants: 'Applicants',
    lesson_apply_title: 'Apply for Lesson', lesson_apply_btn: 'Submit', lesson_apply_msg_placeholder: 'Message to Tutor',
    lesson_applicants_view: 'Applicant List',
    google_fail: 'Google Login Failed', login_fail: 'Login Failed', signup_success: 'Signup Success',
    map_view: 'Open in Google Maps', review: 'Reviews',
    ticker_format: "🎉 [{city}] {user} won '{coupon}' at '{shop}'!",
    business_hours: 'Hours:', address_label: 'Address:', phone_label: 'Phone:',
    map_guide: 'Move map to explore',
    map_key_missing: 'Map unavailable. Check API Key.',
    grab_go: 'Open Grab', report: 'Report', report_title: 'Report', report_reason: 'Reason', report_btn: 'Submit',
    push_setting: 'Push Notifications', admin_page: 'Admin Page', boss_page: 'Partner Page',
    zalo_login: 'Login with Zalo', phone_verify: 'Verify',
    name_placeholder: 'Name', dob_placeholder: 'DOB (YYYY-MM-DD)', residence_label: 'Residence'
  },
  vn: {
    home: 'Vòng quay', map: 'Bản đồ', coupon: 'Kho Coupon', community: 'Cộng đồng', mypage: 'Tôi',
    login_needed: 'Cần đăng nhập', login_btn: 'Đăng nhập / Đăng ký', login: 'Đăng nhập', signup: 'Đăng ký',
    id_placeholder: 'Tài khoản', pw_placeholder: 'Mật khẩu', email_placeholder: 'Email', phone_placeholder: 'Số điện thoại',
    spin_left: 'Lượt quay', daily_user: '{n} người đã quay hôm nay!', lineup: 'Địa điểm nổi bật', click_info: 'Xem chi tiết', boss_only: 'Đối tác',
    store_inquiry: 'Hợp tác', inquiry_desc: 'Quảng bá cửa hàng trên DealBox\nchỉ với 1tr VNĐ!', apply: 'Đăng ký ngay',
    spin_msg_login: 'Đăng nhập để quay', spin_msg_no_chance: 'Hết lượt? Xem QC để thêm lượt (+1)',
    slot_add: 'Thêm ô', my_slot: 'Ô chứa Coupon', spin_free: 'Miễn phí', spin_no: 'Hết',
    coupon_validity: '* Coupon có hiệu lực trong 24h.', use_coupon: 'Sử dụng', save_coupon: 'Lưu',
    available: 'Có sẵn', hours_left: 'giờ', congrats: '🎉 Chúc mừng!', saved_msg: 'Đã lưu vào ví!',
    boss_check: 'Xác nhận', boss_check_title: 'Dùng Coupon (Đưa nhân viên)',
    write_title: 'Viết bài', write_placeholder_title: 'Tiêu đề', write_placeholder_content: 'Nội dung', register: 'Đăng',
    comments: 'Bình luận', likes: 'Thích', city_select: 'Chọn TP', traveler_talk: 'Chat Du lịch', talk_placeholder: 'Chia sẻ...',
    cat_food: 'Ăn uống', cat_cafe: 'Cafe', cat_pub: 'Pub/Bar', cat_club: 'Club', cat_massage: 'Massage', cat_barber: 'Hớt tóc', cat_beauty: 'Làm đẹp', cat_shopping: 'Mua sắm', cat_pet: 'Thú cưng', cat_travel: 'Du lịch',
    tag_food: 'Đói chưa?', tag_cafe: 'Cafe đẹp', tag_pub: 'Đi nhậu?', tag_club: 'Quẩy nào', tag_massage: 'Thư giãn', tag_barber: 'Cắt tóc', tag_beauty: 'Làm đẹp', tag_shopping: 'Mua sắm', tag_pet: 'Với thú cưng', tag_travel: 'Đi du lịch nào',
    city_hcm: 'TP.HCM', city_hanoi: 'Hà Nội', city_danang: 'Đà Nẵng', city_nhatrang: 'Nha Trang',
    menu_edit: 'Sửa hồ sơ', menu_inquiry: 'Hỗ trợ', menu_notice: 'Thông báo', menu_event: 'Sự kiện', menu_lesson: 'Gia sư', logout: 'Đăng xuất',
    lesson_write: 'Đăng bài', lesson_price: 'Giá/giờ (VND)', lesson_contact: 'Liên hệ', lesson_apply: 'Đăng ký', lesson_applicants: 'Người đăng ký',
    lesson_apply_title: 'Đăng ký học', lesson_apply_btn: 'Gửi', lesson_apply_msg_placeholder: 'Tin nhắn cho giáo viên',
    lesson_applicants_view: 'Danh sách đăng ký',
    google_fail: 'Lỗi đăng nhập Google', login_fail: 'Lỗi đăng nhập', signup_success: 'Đăng ký thành công',
    map_view: 'Mở Google Maps', review: 'Đánh giá',
    ticker_format: "🎉 [{city}] {user} đã trúng '{coupon}' tại '{shop}'!",
    business_hours: 'Giờ mở cửa:', address_label: 'Địa chỉ:', phone_label: 'Điện thoại:',
    map_guide: 'Di chuyển bản đồ để khám phá',
    map_key_missing: 'Không thể tải bản đồ. Kiểm tra API Key.',
    grab_go: 'Mở Grab', report: 'Báo cáo', report_title: 'Báo cáo', report_reason: 'Lý do', report_btn: 'Gửi',
    push_setting: 'Thông báo', admin_page: 'Trang Quản trị', boss_page: 'Trang Đối tác',
    zalo_login: 'Đăng nhập Zalo', phone_verify: 'Xác thực',
    name_placeholder: 'Tên', dob_placeholder: 'Ngày sinh (YYYY-MM-DD)', residence_label: 'Nơi ở'
  }
};

// --- Confetti Component ---
const Confetti = () => {
    // ... (Same as before)
    const particles = Array.from({ length: 50 }).map((_, i) => {
        const style = {
            left: '50%',
            top: '50%',
            '--x': `${(Math.random() - 0.5) * 600}px`,
            '--y': `${(Math.random() - 0.5) * 600}px`,
            '--rotate': `${Math.random() * 360}deg`,
            backgroundColor: ['#EC4899', '#8B5CF6', '#3B82F6', '#F59E0B', '#10B981'][Math.floor(Math.random() * 5)],
            animationDelay: `${Math.random() * 0.2}s`
        };
        return <div key={i} className="confetti-particle" style={style}></div>;
    });
    return (
        <div className="fixed inset-0 pointer-events-none z-[150] overflow-hidden">
            <style>{`.confetti-particle { position: absolute; width: 8px; height: 8px; border-radius: 2px; animation: explode 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; opacity: 0; } @keyframes explode { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--rotate)); opacity: 0; } }`}</style>
            {particles}
        </div>
    );
};

// --- Helper Components ---
const Modal = ({ isOpen, onClose, children, title, hideClose = false, bgColor="bg-[#1f2937]" }) => {
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center px-4 bg-black/80 backdrop-blur-sm animate-in fade-in duration-200 font-sans">
      <div className={`${bgColor} w-full max-w-md rounded-2xl overflow-hidden shadow-2xl border border-gray-700 relative animate-in zoom-in-95 duration-200 max-h-[85vh] flex flex-col`}>
        {!hideClose && <button onClick={onClose} className="absolute top-3 right-3 p-2 rounded-full bg-gray-800/80 text-gray-400 hover:text-white z-10 active:scale-90"><X size={20} /></button>}
        {title && <div className="p-4 border-b border-gray-700 font-bold text-white text-lg text-center shrink-0">{title}</div>}
        <div className="overflow-y-auto p-5 scroll-smooth">{children}</div>
      </div>
    </div>
  );
};

const BusinessCard = ({ data, onClick, lang = 'ko' }) => {
  const currentDesc = typeof data.desc === 'string' ? data.desc : (data.desc[lang] || data.desc['ko']);
  const currentCoupon = typeof data.coupon === 'string' ? data.coupon : (data.coupon[lang] || data.coupon['ko']);

  return (
    <div onClick={() => onClick(data)} className="bg-[#1f2937] rounded-xl p-3 flex items-center gap-4 mb-3 border border-gray-800 hover:border-pink-500/50 transition-all cursor-pointer active:scale-95 touch-manipulation">
      <img src={data.image} alt={data.name} className="w-16 h-16 rounded-lg object-cover shrink-0 bg-gray-700" />
      <div className="flex-1 min-w-0">
        <div className="flex justify-between items-start"><h3 className="font-bold text-white truncate text-base">{data.name}</h3></div>
        <p className="text-pink-500 text-xs font-medium mt-1">{currentCoupon}</p>
      </div>
      <ChevronRight size={20} className="text-gray-600" />
    </div>
  );
};

const RouletteWheel = ({ items, onSpinComplete, canSpin, t }) => {
  const [spinning, setSpinning] = useState(false);
  const [rotation, setRotation] = useState(0);
   
  const handleSpin = () => {
    if (!canSpin || spinning) return;
    setSpinning(true);
    const newRotation = rotation + 1800 + Math.random() * 360; 
    setRotation(newRotation);
    setTimeout(() => {
      setSpinning(false);
      const degrees = newRotation % 360;
      const sliceAngle = 360 / items.length;
      const index = Math.floor(((360 - degrees) % 360) / sliceAngle);
      onSpinComplete(items[index]);
    }, 3000);
  };

  return (
    <div className="relative w-72 h-72 mx-auto my-4 touch-none">
      <div className="absolute -top-5 left-1/2 -translate-x-1/2 z-20 text-white filter drop-shadow-lg"><MapPin className="fill-pink-500 text-pink-600 stroke-white" size={48} strokeWidth={1.5} /></div>
      <div className="w-full h-full rounded-full overflow-hidden shadow-[0_0_40px_rgba(236,72,153,0.2)] border-[6px] border-[#1f2937] relative" style={{ transform: `rotate(${rotation}deg)`, transition: 'transform 3s cubic-bezier(0.25, 0.1, 0.25, 1)' }}>
        <svg viewBox="0 0 200 200" className="w-full h-full transform -rotate-90">
           {/* SVG content omitted for brevity as it's same as before */}
           <defs>
             {items.map((_, i) => {
                const sliceAngle = 360 / items.length;
                const x1 = 100 + 100 * Math.cos(Math.PI * (i * sliceAngle) / 180);
                const y1 = 100 + 100 * Math.sin(Math.PI * (i * sliceAngle) / 180);
                const x2 = 100 + 100 * Math.cos(Math.PI * ((i + 1) * sliceAngle) / 180);
                const y2 = 100 + 100 * Math.sin(Math.PI * ((i + 1) * sliceAngle) / 180);
                return (
                    <clipPath key={`clip-${i}`} id={`slice-clip-${i}`}>
                        <path d={`M100,100 L${x1},${y1} A100,100 0 0,1 ${x2},${y2} Z`} />
                    </clipPath>
                );
             })}
           </defs>
           {items.map((item, i) => {
             const sliceAngle = 360 / items.length;
             const textAngle = (i * sliceAngle) + sliceAngle / 2;
             const tx = 100 + 65 * Math.cos(Math.PI * textAngle / 180);
             const ty = 100 + 65 * Math.sin(Math.PI * textAngle / 180);
             return (
               <g key={i}>
                 {item.image ? (
                     <>
                        <image href={item.image} x="0" y="0" width="200" height="200" preserveAspectRatio="xMidYMid slice" clipPath={`url(#slice-clip-${i})`} />
                        <path d={`M100,100 L${100 + 100 * Math.cos(Math.PI * (i * sliceAngle) / 180)},${100 + 100 * Math.sin(Math.PI * (i * sliceAngle) / 180)} A100,100 0 0,1 ${100 + 100 * Math.cos(Math.PI * ((i + 1) * sliceAngle) / 180)},${100 + 100 * Math.sin(Math.PI * ((i + 1) * sliceAngle) / 180)} Z`} fill="black" fillOpacity="0.4" />
                     </>
                 ) : (
                     <path d={`M100,100 L${100 + 100 * Math.cos(Math.PI * (i * sliceAngle) / 180)},${100 + 100 * Math.sin(Math.PI * (i * sliceAngle) / 180)} A100,100 0 0,1 ${100 + 100 * Math.cos(Math.PI * ((i + 1) * sliceAngle) / 180)},${100 + 100 * Math.sin(Math.PI * ((i + 1) * sliceAngle) / 180)} Z`} fill={['#EC4899', '#8B5CF6', '#3B82F6', '#F59E0B', '#10B981'][i%5]} stroke="#1f2937" strokeWidth="1" />
                 )}
                 <path d={`M100,100 L${100 + 100 * Math.cos(Math.PI * (i * sliceAngle) / 180)},${100 + 100 * Math.sin(Math.PI * (i * sliceAngle) / 180)}`} stroke="#1f2937" strokeWidth="1.5" />
                 <text x={tx} y={ty} fill="white" fontSize="8.5" fontWeight="800" textAnchor="middle" alignmentBaseline="middle" transform={`rotate(${textAngle}, ${tx}, ${ty})`} style={{ textShadow: '0 1px 3px rgba(0,0,0,0.9)' }}>{item.name}</text>
               </g>
             );
           })}
        </svg>
      </div>
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
        <button onClick={handleSpin} disabled={!canSpin || spinning} className={`w-20 h-20 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 border-4 border-white flex flex-col items-center justify-center shadow-xl transition-transform active:scale-95 touch-manipulation ${!canSpin ? 'grayscale opacity-80' : ''}`}>
          <span className="text-white font-black text-lg leading-none italic drop-shadow-md">SPIN</span>
          <span className="text-white/90 text-[10px] font-bold mt-0.5">{canSpin ? t('spin_free') : t('spin_no')}</span>
        </button>
      </div>
    </div>
  );
};

// Real-time Winner Ticker Component
const WinnerTicker = ({ lang }) => {
    const [winners, setWinners] = useState([]);

    useEffect(() => {
        const winnersRef = collection(db, 'artifacts', appId, 'public', 'data', 'winners');
        const unsubscribe = onSnapshot(winnersRef, (snapshot) => {
            let newWinners = snapshot.docs.map(doc => doc.data());
            newWinners.sort((a, b) => {
                const tA = a.timestamp?.seconds || 0;
                const tB = b.timestamp?.seconds || 0;
                return tB - tA;
            });
            newWinners = newWinners.slice(0, 10);
            
            if (newWinners.length > 0) setWinners(newWinners);
            else setWinners([]); 
        }, (error) => console.log("Ticker Error:", error));
        return () => unsubscribe();
    }, []);

    const formatWinner = (item) => {
        if (typeof item === 'string') return item; 
        const currentLang = TRANSLATIONS[lang] ? lang : 'ko';
        const format = TRANSLATIONS[currentLang].ticker_format;
        const city = TRANSLATIONS[currentLang][`city_${item.cityId}`] || item.cityId;
        const couponName = (typeof item.coupon === 'object') ? (item.coupon[currentLang] || item.coupon['ko']) : item.coupon;
        
        return format
            .replace('{city}', city)
            .replace('{user}', item.userName)
            .replace('{shop}', item.businessName)
            .replace('{coupon}', couponName);
    };

    let displayList = [];
    if (winners.length > 0) {
        displayList = winners.map(formatWinner);
    } else {
        displayList = MOCK_WINNERS[lang] || MOCK_WINNERS['ko'];
    }

    let animatedList = [];
    if (displayList.length > 0) {
        animatedList = [...displayList];
        while (animatedList.length < 20) {
            animatedList = [...animatedList, ...displayList];
        }
    }
    
    const duration = Math.max(animatedList.length * 2, 20);

    return (
        <div className="w-full bg-gradient-to-r from-purple-900 via-pink-900 to-purple-900 border-b border-white/10 overflow-hidden py-2 relative z-10">
            <style>{`@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .ticker-wrap { width: 200%; display: flex; overflow: hidden; } .ticker-content { display: flex; white-space: nowrap; animation: ticker ${duration}s linear infinite; }`}</style>
            <div className="ticker-wrap"><div className="ticker-content">{animatedList.map((text, i) => (<span key={i} className="mr-8 text-xs font-bold text-white/90 whitespace-nowrap inline-block">{text}</span>))}</div></div>
        </div>
    );
};

export default function DealBoxApp() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
   
  const [selectedCity, setSelectedCity] = useState('hcm');
  const [selectedCategory, setSelectedCategory] = useState('food');
  const [activeTab, setActiveTab] = useState('home'); 
  const [viewMode, setViewMode] = useState('roulette');
  const [lang, setLang] = useState('ko');
  const [showLangMenu, setShowLangMenu] = useState(false);
  const [myPageView, setMyPageView] = useState('main'); 
   
  const [showCityModal, setShowCityModal] = useState(false);
  const [selectedBusiness, setSelectedBusiness] = useState(null);
  const [spinResult, setSpinResult] = useState(null);
  const [isAdWatching, setIsAdWatching] = useState(false);
  const [showConfetti, setShowConfetti] = useState(false);
  const [showChat, setShowChat] = useState(false);
  const [chatMessages, setChatMessages] = useState([]);
  const [chatInput, setChatInput] = useState('');
  const [showInquiryModal, setShowInquiryModal] = useState(false);
  const [showWriteModal, setShowWriteModal] = useState(false);
  const [showAuthModal, setShowAuthModal] = useState(false);
  const [showSlotShop, setShowSlotShop] = useState(false);
  const [focusedBusiness, setFocusedBusiness] = useState(null);
  
  // New Feature States
  const [showReportModal, setShowReportModal] = useState(false); 
  const [reportTarget, setReportTarget] = useState(null);
  const [reportReason, setReportReason] = useState('');
  const [pushEnabled, setPushEnabled] = useState(false);
  const [deviceId, setDeviceId] = useState('');
  const [userRole, setUserRole] = useState('user'); 
  const [postImagePreview, setPostImagePreview] = useState(null); 
  
  // Map Logic
  const mapRef = useRef(null);
  const mapInstanceRef = useRef(null);
  const markersRef = useRef([]);

  // Lesson States
  const [showLessonWriteModal, setShowLessonWriteModal] = useState(false);
  const [showLessonApplyModal, setShowLessonApplyModal] = useState(false);
  const [showApplicantListModal, setShowApplicantListModal] = useState(false); 
  const [selectedLesson, setSelectedLesson] = useState(null);
  const [lessons, setLessons] = useState([]); 
  
  // Lesson Forms
  const [lessonForm, setLessonForm] = useState({ title: '', category: 'academic', city: 'hanoi', price: '', desc: '' });
  const [lessonApplyForm, setLessonApplyForm] = useState({ name: '', region: 'hanoi', phone: '', messengerId: '' });
  const [lessonApplicants, setLessonApplicants] = useState([]); 
  const [applicantCount, setApplicantCount] = useState(0);
   
  const [posts, setPosts] = useState(MOCK_POSTS);
  const [expandedPostId, setExpandedPostId] = useState(null); 
  const [dailyParticipants, setDailyParticipants] = useState(0);
  const [selectedCoupon, setSelectedCoupon] = useState(null);
  const [authMode, setAuthMode] = useState('login'); 
   
  const [inquiryForm, setInquiryForm] = useState({ storeName: '', category: 'food', city: 'hcm', discountInfo: '', contact: '', representativeName: '', googleMapUrl: '' });
  const [postForm, setPostForm] = useState({ title: '', content: '' });
  const [commentText, setCommentText] = useState('');
  const [loginId, setLoginId] = useState('');
  const [loginPassword, setLoginPassword] = useState('');
  
  // Updated Signup Form
  const [signupForm, setSignupForm] = useState({ 
      id: '', password: '', email: '', 
      name: '', dob: '', residence: 'hanoi', residenceCustom: '', 
      countryCode: '+84', phone: '' 
  });
  
  const [changePw, setChangePw] = useState('');
  const [myInquiry, setMyInquiry] = useState('');
  const [userData, setUserData] = useState({ spinsLeft: 3, maxCoupons: 3, lastSpinDate: null, savedCoupons: [], usedCoupons: [] }); 
  const [savedBusinesses, setSavedBusinesses] = useState([]);

  const fileInputRef = useRef(null);

  // Category Scroll Logic
  const scrollRef = React.useRef(null);
  const [isDragging, setIsDragging] = useState(false);
  const [startX, setStartX] = useState(0);
  const [scrollLeft, setScrollLeft] = useState(0);

  const onMouseDown = (e) => { setIsDragging(true); setStartX(e.pageX - scrollRef.current.offsetLeft); setScrollLeft(scrollRef.current.scrollLeft); };
  const onMouseLeave = () => { setIsDragging(false); };
  const onMouseUp = () => { setIsDragging(false); };
  const onMouseMove = (e) => { if (!isDragging) return; e.preventDefault(); const x = e.pageX - scrollRef.current.offsetLeft; const walk = (x - startX) * 2; scrollRef.current.scrollLeft = scrollLeft - walk; };

  const t = (key) => (TRANSLATIONS[lang] ? TRANSLATIONS[lang][key] : TRANSLATIONS['ko'][key]) || '';
  const categories = useMemo(() => CATEGORIES_DATA.map(cat => ({ ...cat, name: t(`cat_${cat.id}`), tagline: t(`tag_${cat.id}`) })), [lang]);
  const currentBusinesses = useMemo(() => MOCK_BUSINESSES.filter(b => b.city === selectedCity && b.category === selectedCategory), [selectedCity, selectedCategory]);
  const rouletteItems = useMemo(() => currentBusinesses.length > 0 ? currentBusinesses.slice(0, 6) : [{name: '업체 없음', id: 'none'}], [currentBusinesses]);
  const filteredPosts = useMemo(() => posts.filter(p => p.city === selectedCity), [posts, selectedCity]);

  // --- Handlers ---
  const handleCitySelect = (cityId) => { setSelectedCity(cityId); setShowCityModal(false); };
  
  const handleSpinComplete = async (winner) => {
    if (!user || winner.id === 'none') return;
    if (userData.savedCoupons?.includes(winner.id)) { alert("이미 쿠폰을 받은 업체입니다."); return; }
    if (userData.usedCoupons?.includes(winner.id)) { alert("이미 쿠폰을 사용한 업체입니다."); return; }
    await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'data'), { spinsLeft: userData.spinsLeft - 1 });
    const maskedName = (user.displayName || 'User').substring(0, 2) + '**';
    await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'winners'), {
        cityId: selectedCity, userName: maskedName, businessName: winner.name, coupon: winner.coupon, timestamp: serverTimestamp()
    });
    setSpinResult(winner);
    setShowConfetti(true);
    setTimeout(() => setShowConfetti(false), 2500);
  };

  const handleSaveCoupon = async (businessId) => {
      if (!user) return;
      if (userData.savedCoupons.length >= userData.maxCoupons) { alert("슬롯이 가득 찼습니다!"); return; }
      const userDocRef = doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'data');
      if (!userData.savedCoupons.includes(businessId) && !userData.usedCoupons?.includes(businessId)) {
          await updateDoc(userDocRef, { savedCoupons: [...userData.savedCoupons, businessId] });
          alert("쿠폰이 저장되었습니다.");
      } else { alert("이미 저장된 쿠폰입니다."); }
  };

  const handleUseCoupon = (business) => setSelectedCoupon(business);
  
  const handleUseCouponConfirm = async () => {
      if (!user || !selectedCoupon) return;
      const newSaved = userData.savedCoupons.filter(id => id !== selectedCoupon.id);
      const newUsed = [...(userData.usedCoupons || []), selectedCoupon.id];
      await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'data'), { savedCoupons: newSaved, usedCoupons: newUsed });
      alert("쿠폰 사용 완료!");
      setSelectedCoupon(null);
  };

  const handleBuySlot = async (option) => {
      if (!user || user.isAnonymous) { setShowAuthModal(true); return; }
      if (userData.maxCoupons + option.count > 15) { alert("최대 슬롯 제한."); return; }
      if (confirm(`${option.label} ($${option.price}) 결제하시겠습니까?`)) {
          await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'data'), { maxCoupons: userData.maxCoupons + option.count });
          alert("슬롯 확장 완료!");
          setShowSlotShop(false);
      }
  };
  
  const handleWatchAd = async () => {
      setIsAdWatching(true);
      setTimeout(async () => {
          setIsAdWatching(false);
          if (!user) return;
          await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'data'), { spinsLeft: (userData.spinsLeft || 0) + 1 });
          alert("스핀 기회가 충전되었습니다!");
      }, 2000);
  };
  
  const handleSendChat = async () => {
      if (!chatInput.trim() || !user) return;
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', `chat_${selectedCity}`), {
          text: chatInput, userId: user.uid, userName: user.displayName || 'Traveler', timestamp: serverTimestamp()
      });
      setChatInput('');
  };

  const handleGoogleLogin = async () => { try { await signInWithPopup(auth, new GoogleAuthProvider()); setShowAuthModal(false); } catch (error) { alert(t('google_fail') + ": " + error.message); } };
  const handleIdLogin = async () => { try { await signInWithEmailAndPassword(auth, `${loginId}@dealbox.vn`, loginPassword); setShowAuthModal(false); } catch (error) { alert(t('login_fail')); } };
  
  const handlePhoneLogin = () => {
      alert("휴대폰 인증은 실제 배포 환경에서 Firebase Phone Auth를 통해 작동합니다.\n(인증 완료 시뮬레이션)");
  };

  const handleZaloLogin = () => {
      alert("Zalo 로그인은 실제 배포 시 Zalo SDK 연동이 필요합니다.\n(로그인 성공 시뮬레이션)");
  };

  const handleSignup = async () => {
      // Check Required Fields
      if (!signupForm.id || !signupForm.email || !signupForm.password || !signupForm.name || !signupForm.dob || !signupForm.phone) return alert("모든 정보를 입력해주세요.");
      
      try {
          const cred = await createUserWithEmailAndPassword(auth, `${signupForm.id}@dealbox.vn`, signupForm.password);
          await updateProfile(cred.user, { displayName: signupForm.id }); // Using ID as DisplayName for now
          
          // Determine Residence
          const finalResidence = signupForm.residence === 'custom' ? signupForm.residenceCustom : signupForm.residence;

          await setDoc(doc(db, 'artifacts', appId, 'users', cred.user.uid, 'profile', 'data'), {
              id: signupForm.id, 
              name: signupForm.name,
              dob: signupForm.dob,
              contactEmail: signupForm.email, 
              phone: `${signupForm.countryCode} ${signupForm.phone}`,
              residence: finalResidence,
              spinsLeft: 3, maxCoupons: 3, savedCoupons: [], usedCoupons: [], lastSpinDate: new Date().toISOString().split('T')[0],
              role: 'user', 
              deviceId: deviceId 
          });
          alert(t('signup_success')); setShowAuthModal(false);
      } catch (error) { alert("회원가입 실패: " + error.message); }
  };

  const handleLogout = async () => { try { await signOut(auth); alert("로그아웃 완료"); } catch (e) {} };
  const handleLike = (postId) => { setPosts(posts.map(p => { if (p.id === postId) return { ...p, likes: (p.isLiked ? p.likes - 1 : p.likes + 1), isLiked: !p.isLiked }; return p; })); };
  const handleAddComment = (postId) => { if (!commentText.trim()) return; setPosts(posts.map(p => { if (p.id === postId) return { ...p, comments: [...p.comments, { id: Date.now(), user: '나', text: commentText }] }; return p; })); setCommentText(''); };
  
  const handleSubmitPost = () => { 
      if (!postForm.title || !postForm.content) return; 
      setPosts([{ id: Date.now(), author: user.displayName || '나', city: selectedCity, title: postForm.title, content: postForm.content, likes: 0, comments: [], timestamp: '방금 전', imageUrl: postImagePreview }, ...posts]); 
      setShowWriteModal(false); 
      setPostForm({ title: '', content: '' });
      setPostImagePreview(null);
  };
  
  const handleSubmitInquiry = () => { 
      if (!inquiryForm.storeName || !inquiryForm.discountInfo || !inquiryForm.contact || !inquiryForm.representativeName) { alert("필수 항목을 모두 입력해주세요."); return; } 
      alert("승인 대기중입니다."); 
      setShowInquiryModal(false); 
      setInquiryForm({ storeName: '', category: 'food', city: 'hcm', discountInfo: '', contact: '', representativeName: '', googleMapUrl: '' }); 
  };
  
  const handleChangePassword = async () => {
      if(!changePw) return;
      try { await updatePassword(user, changePw); alert("비밀번호가 변경되었습니다."); setChangePw(''); } catch(e) { alert("변경 실패: " + e.message); }
  };
  
  const handleSubmitMyInquiry = async () => { 
      if(!myInquiry) return; 
      // Store report to Firestore with detailed info for Admin
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'reports'), {
          type: 'inquiry_1on1', 
          content: myInquiry, 
          userId: user.uid, 
          userName: user.displayName,
          status: 'pending', // For Admin to track
          timestamp: serverTimestamp()
      });
      alert("문의/신고가 접수되었습니다."); 
      setMyInquiry(''); 
  };
  
  const handleWritePost = () => { if(!user || user.isAnonymous) { alert("회원만 글을 쓸 수 있습니다."); setShowAuthModal(true); return; } setShowWriteModal(true); };
  const handleWriteLesson = () => { if(!user || user.isAnonymous) { alert("회원만 등록할 수 있습니다."); setShowAuthModal(true); return; } setShowLessonWriteModal(true); };
   
  const handleSubmitLesson = async () => {
      if (!lessonForm.title || !lessonForm.price || !lessonForm.desc) { alert("모든 항목을 입력해주세요."); return; }
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'lessons'), {
          ...lessonForm, authorId: user.uid, tutor: user.displayName || 'Teacher', timestamp: serverTimestamp()
      });
      setShowLessonWriteModal(false);
      setLessonForm({ title: '', category: 'academic', city: 'hanoi', price: '', desc: '' });
      alert("레슨이 등록되었습니다.");
  };

  const handleApplyLesson = (lesson) => { if(!user || user.isAnonymous) { setShowAuthModal(true); return; } setSelectedLesson(lesson); setShowLessonApplyModal(true); };
  const handleShowApplicants = (lesson) => { setSelectedLesson(lesson); setShowApplicantListModal(true); };

  const handleSubmitApplication = async () => {
      if (!lessonApplyForm.name || !lessonApplyForm.phone || !lessonApplyForm.messengerId) { alert("필수 정보를 입력해주세요."); return; }
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', `lesson_applicants_${selectedLesson.id}`), {
          ...lessonApplyForm, applicantId: user.uid, timestamp: serverTimestamp()
      });
      alert("신청이 완료되었습니다.");
      setShowLessonApplyModal(false);
      setLessonApplyForm({ name: '', region: 'hanoi', phone: '', messengerId: '' });
  };

  // --- New Features Handlers ---
  const handleReport = (post) => {
      setReportTarget(post);
      setShowReportModal(true);
  };

  const submitReport = async () => {
      if(!reportReason) return alert("사유를 입력해주세요");
      // Store Report with 'pending' status for Admin
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'reports'), {
          type: 'post_report', 
          targetId: reportTarget.id, 
          reason: reportReason, 
          reporterId: user.uid, 
          status: 'pending',
          timestamp: serverTimestamp()
      });
      alert("신고가 접수되었습니다.");
      setShowReportModal(false);
      setReportReason('');
  };

  const handlePushToggle = () => {
      if (!("Notification" in window)) {
          alert("이 브라우저는 알림을 지원하지 않습니다.");
          return;
      }
      if (Notification.permission === "granted") {
          setPushEnabled(!pushEnabled);
          alert("알림 설정이 변경되었습니다.");
      } else if (Notification.permission !== "denied") {
          Notification.requestPermission().then((permission) => {
              if (permission === "granted") {
                  setPushEnabled(true);
                  alert("알림이 켜졌습니다.");
              }
          });
      } else {
          alert("알림 권한이 차단되어 있습니다. 브라우저 설정에서 허용해주세요.");
      }
  };

  const handleImageUpload = (e) => {
      const file = e.target.files[0];
      if (file) {
          const reader = new FileReader();
          reader.onloadend = () => {
              setPostImagePreview(reader.result);
          };
          reader.readAsDataURL(file);
      }
  };
  
  const openGrab = () => {
      let grabUrl = "https://grab.onelink.me/2695613898?pid=website&c=footer_logo&is_retargeting=true"; 
      
      // If selected business has coordinates, try to use them (Note: Deep linking to specific coords in universal link varies by OS)
      // This is a standard universal link fallback to store if app not present
      if (selectedBusiness && selectedBusiness.lat && selectedBusiness.lng) {
           // Attempt to use a google maps link that Grab might intercept or user can choose app
           // But standard Grab deep link is 'grab://open?screenType=BOOKING'
           // Here we use the universal link as requested for general compatibility
      }

      if (confirm("Grab 앱을 여시겠습니까? (설치되어 있지 않으면 스토어로 이동합니다)")) {
          window.open(grabUrl, '_blank');
      }
  };

  // --- Logic Hooks ---
  useEffect(() => {
    // Generate Device ID if not exists
    let storedDeviceId = localStorage.getItem('dealbox_device_id');
    if (!storedDeviceId) {
        storedDeviceId = 'device_' + Math.random().toString(36).substr(2, 9);
        localStorage.setItem('dealbox_device_id', storedDeviceId);
    }
    setDeviceId(storedDeviceId);

    const initAuth = async () => {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) await signInWithCustomToken(auth, __initial_auth_token);
        else await signInAnonymously(auth);
    };
    initAuth();
    onAuthStateChanged(auth, (u) => { setUser(u); setLoading(false); });
    
    const today = new Date().toLocaleDateString();
    const storedDate = localStorage.getItem('dealbox_date');
    let count = parseInt(localStorage.getItem('dealbox_count'));
    if (storedDate !== today || !count) {
        count = Math.floor(Math.random() * (1000 - 50 + 1)) + 50;
        localStorage.setItem('dealbox_date', today);
        localStorage.setItem('dealbox_count', count);
    }
    setDailyParticipants(count);
  }, []);

  // ... (Existing Hooks for data fetching kept as is)
  useEffect(() => {
    if (!user) return;
    const lessonRef = collection(db, 'artifacts', appId, 'public', 'data', 'lessons');
    const unsubscribe = onSnapshot(lessonRef, (snapshot) => {
        const lessonList = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
        lessonList.sort((a, b) => (b.timestamp?.seconds || 0) - (a.timestamp?.seconds || 0));
        setLessons(lessonList);
    });
    return () => unsubscribe();
  }, [user]);

  useEffect(() => {
      if (!selectedLesson || !user) return;
      const applyRef = collection(db, 'artifacts', appId, 'public', 'data', `lesson_applicants_${selectedLesson.id}`);
      const unsubscribe = onSnapshot(applyRef, (snapshot) => {
          setApplicantCount(snapshot.size);
          setLessonApplicants(snapshot.docs.map(d => ({ id: d.id, ...d.data() })));
      });
      return () => unsubscribe();
  }, [selectedLesson, user]);

  useEffect(() => {
    if (!user) return;
    const userDocRef = doc(db, 'artifacts', appId, 'users', user.uid, 'profile', 'data');
    const unsubscribe = onSnapshot(userDocRef, (docSnap) => {
      if (docSnap.exists()) {
        const data = docSnap.data();
        if (data.role) setUserRole(data.role); 
        
        const today = new Date().toISOString().split('T')[0];
        if (data.lastSpinDate !== today) {
           updateDoc(userDocRef, { spinsLeft: 3, lastSpinDate: today });
           setUserData({ ...data, spinsLeft: 3, lastSpinDate: today });
        } else { setUserData(data); }
      } else {
        setDoc(userDocRef, { spinsLeft: 3, maxCoupons: 3, lastSpinDate: new Date().toISOString().split('T')[0], savedCoupons: [], usedCoupons: [], role: 'user', deviceId: deviceId });
        setUserData({ spinsLeft: 3, maxCoupons: 3, lastSpinDate: new Date().toISOString().split('T')[0], savedCoupons: [], usedCoupons: [] });
      }
    });
    return () => unsubscribe();
  }, [user, deviceId]);

  useEffect(() => {
    if (userData.savedCoupons?.length > 0) {
        setSavedBusinesses(MOCK_BUSINESSES.filter(b => userData.savedCoupons.includes(b.id)));
    } else { setSavedBusinesses([]); }
  }, [userData.savedCoupons]);

  useEffect(() => {
    if (!user || !showChat) return;
    const chatRef = collection(db, 'artifacts', appId, 'public', 'data', `chat_${selectedCity}`);
    const unsubscribe = onSnapshot(chatRef, (snapshot) => {
        let msgs = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
        msgs.sort((a, b) => (b.timestamp?.seconds || 0) - (a.timestamp?.seconds || 0));
        msgs = msgs.slice(0, 50); 
        setChatMessages(msgs.reverse()); 
    });
    return () => unsubscribe();
  }, [selectedCity, showChat, user]);

  // Google Maps Hooks
  useEffect(() => {
    if (!window.google && viewMode === 'map') {
        const script = document.createElement('script');
        script.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&callback=initMap&libraries=places`;
        script.async = true;
        script.defer = true;
        window.initMap = () => { console.log("Google Maps loaded"); };
        document.head.appendChild(script);
    }
  }, [viewMode]);

  useEffect(() => {
      if (viewMode === 'map' && mapRef.current && window.google && !mapInstanceRef.current) {
          const cityInfo = CITIES.find(c => c.id === selectedCity);
          const center = { lat: cityInfo?.lat || 10.7769, lng: cityInfo?.lng || 106.7009 };
          mapInstanceRef.current = new window.google.maps.Map(mapRef.current, { center: center, zoom: 14, disableDefaultUI: true, zoomControl: true });
      }
  }, [viewMode, selectedCity]);

  useEffect(() => {
    if (!mapInstanceRef.current || !window.google) return;
    markersRef.current.forEach(marker => marker.setMap(null));
    markersRef.current = [];
    currentBusinesses.forEach(biz => {
        const marker = new window.google.maps.Marker({
            position: { lat: biz.lat, lng: biz.lng }, map: mapInstanceRef.current, title: biz.name, icon: { url: "http://maps.google.com/mapfiles/ms/icons/pink-dot.png" }
        });
        marker.addListener("click", () => {
            setSelectedBusiness(biz);
            mapInstanceRef.current.panTo(marker.getPosition());
            mapInstanceRef.current.setZoom(16);
        });
        markersRef.current.push(marker);
    });
    if (!focusedBusiness) {
        const cityInfo = CITIES.find(c => c.id === selectedCity);
        if (cityInfo) {
             mapInstanceRef.current.panTo({ lat: cityInfo.lat, lng: cityInfo.lng });
             mapInstanceRef.current.setZoom(14);
        }
    }
  }, [currentBusinesses, selectedCity, focusedBusiness]);

  useEffect(() => {
     if(focusedBusiness && mapInstanceRef.current) {
         mapInstanceRef.current.panTo({ lat: focusedBusiness.lat, lng: focusedBusiness.lng });
         mapInstanceRef.current.setZoom(16);
     }
  }, [focusedBusiness]);

  // ... (Renderers stay mostly same, added new UI elements in return) ...
  // For brevity, only showing changed parts in Renderers within the full file context

  const renderMap = () => {
    return (
        <div className="relative w-full h-[calc(100vh-160px)] bg-[#1a202c] overflow-hidden rounded-b-3xl mb-4 flex flex-col">
             <div ref={mapRef} style={{ width: '100%', flex: 1, background: '#1a202c' }}>
                 {!window.google && (<div className="w-full h-full flex items-center justify-center text-gray-500 text-sm flex-col"><MapPin size={32} className="mb-2 opacity-50" /><p>{t('map_key_missing')}</p></div>)}
             </div>
            <div className="absolute bottom-4 left-0 right-0 px-4 overflow-x-auto flex gap-3 scrollbar-hide z-10 pb-2">
                {currentBusinesses.map((biz, i) => (
                    <div key={biz.id} onClick={() => setFocusedBusiness(biz)} className={`min-w-[280px] bg-[#1f2937] rounded-xl p-3 border transition-all cursor-pointer shadow-xl ${focusedBusiness?.id === biz.id ? 'border-pink-500 ring-2 ring-pink-500/50' : 'border-gray-700'}`}>
                        <div className="flex items-center gap-3"><img src={biz.image} alt={biz.name} className="w-12 h-12 rounded-lg object-cover bg-gray-700 shrink-0" /><div className="min-w-0"><h3 className="font-bold text-white text-sm truncate">{biz.name}</h3><p className="text-pink-500 text-xs truncate">{typeof biz.coupon === 'string' ? biz.coupon : (biz.coupon[lang] || biz.coupon['ko'])}</p></div></div>
                    </div>
                ))}
            </div>
            <div className="absolute top-4 left-4 bg-black/70 backdrop-blur px-3 py-1.5 rounded-full text-xs text-white z-10 shadow-lg flex items-center gap-1 pointer-events-none"><Navigation size={12} className="text-pink-500" /><span>{t('map_guide')}</span></div>
        </div>
    );
  };

  const renderHome = () => (
    <div className="pb-32 animate-in fade-in" style={fontStyle}>
      <style>{`.scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }`}</style>
      <WinnerTicker lang={lang} />
      <div className="bg-[#0f1521] px-4 py-3 flex items-center justify-between border-b border-gray-800/50">
          <div className="flex items-center gap-2"><span className="text-gray-400 text-xs font-medium">{t('my_slot')}</span><div className="flex items-center gap-1"><button onClick={() => setShowSlotShop(true)} className="w-5 h-5 rounded-full bg-[#F59E0B] flex items-center justify-center text-black hover:bg-yellow-400 transition-colors shadow-lg shadow-yellow-500/30 animate-pulse"><Plus size={12} strokeWidth={3} /></button>{Array.from({ length: 10 }).map((_, i) => ( i < userData.maxCoupons && (<div key={i} className={`w-2.5 h-2.5 rounded-full border border-gray-600 ${i < userData.savedCoupons?.length ? 'bg-pink-500 border-pink-500 shadow-[0_0_5px_rgba(236,72,153,0.8)]' : 'bg-transparent'}`}></div>) ))}</div></div>
           <div className="flex bg-[#1f2937] rounded-full p-0.5 border border-gray-700"><button onClick={() => setViewMode('roulette')} className={`px-3 py-1 rounded-full text-[10px] font-bold transition-all ${viewMode === 'roulette' ? 'bg-pink-500 text-white shadow' : 'text-gray-400'}`}>{t('home')}</button><button onClick={() => setViewMode('map')} className={`px-3 py-1 rounded-full text-[10px] font-bold transition-all ${viewMode === 'map' ? 'bg-pink-500 text-white shadow' : 'text-gray-400'}`}>{t('map')}</button></div>
      </div>
      <div ref={scrollRef} onMouseDown={onMouseDown} onMouseLeave={onMouseLeave} onMouseUp={onMouseUp} onMouseMove={onMouseMove} className="flex overflow-x-auto px-2 py-4 gap-3 scrollbar-hide bg-[#0B101A] w-full whitespace-nowrap cursor-grab active:cursor-grabbing">
        {categories.map(cat => (<button key={cat.id} onClick={() => setSelectedCategory(cat.id)} className={`flex-shrink-0 flex flex-col items-center min-w-[68px] gap-2 transition-all group active:scale-95`}><div className={`w-14 h-14 rounded-2xl flex items-center justify-center text-xl transition-all ${selectedCategory === cat.id ? 'bg-pink-500 text-white shadow-lg shadow-pink-500/30 scale-105' : 'bg-[#1f2937] text-gray-400 border border-gray-700 group-hover:border-gray-500'}`}><cat.Icon size={20} /></div><span className={`text-xs font-medium tracking-tight ${selectedCategory === cat.id ? 'text-white' : 'text-gray-500'}`}>{cat.name}</span></button>))}
        <div className="w-2 flex-shrink-0"></div>
      </div>
      {viewMode === 'roulette' ? (
        <div className="bg-[#0B101A] pt-6 pb-10 relative">
            <div className="text-center mb-4 relative z-10"><p className="text-pink-500 text-xs font-bold mb-1 tracking-wide">{t(`city_${selectedCity}`)} • {categories.find(c => c.id === selectedCategory)?.name}</p><h2 className="text-2xl font-bold text-white tracking-tight drop-shadow-lg">{categories.find(c => c.id === selectedCategory)?.tagline}</h2></div>
            <RouletteWheel items={rouletteItems} canSpin={user && !user.isAnonymous && userData.spinsLeft > 0 && rouletteItems[0].id !== 'none'} spinCount={userData.spinsLeft} onSpinComplete={handleSpinComplete} lang={lang} t={t} />
            <div className="text-center space-y-1">
                {!user || user.isAnonymous ? <button onClick={() => setShowAuthModal(true)} className="text-pink-400 text-xs underline cursor-pointer p-2">{t('spin_msg_login')}</button> : userData.spinsLeft <= 0 ? <button onClick={handleWatchAd} className="text-pink-400 text-xs underline cursor-pointer p-2">{t('spin_msg_no_chance')}</button> : <p className="text-gray-600 text-xs">{t('spin_left')}: {userData.spinsLeft}회</p>}
                <p className="text-gray-500 text-[10px]">{t('daily_user').replace('{n}', dailyParticipants)}</p>
            </div>
        </div>
      ) : ( renderMap() )}
      <div className="px-4 mt-2">
        <div className="flex items-center gap-2 mb-3"><div className="bg-pink-500 rounded-full p-1"><Star size={12} className="text-white fill-white" /></div><h2 className="text-base font-bold text-white">{t('lineup')}</h2><span className="ml-auto text-gray-500 text-[10px]">{t('click_info')}</span></div>
        <div className="space-y-3">{currentBusinesses.length > 0 ? currentBusinesses.map(biz => <BusinessCard key={biz.id} data={biz} onClick={setSelectedBusiness} lang={lang} />) : <div className="text-center py-8 text-gray-500 bg-[#1f2937] rounded-xl border border-gray-800 text-sm">등록된 업체가 없습니다.</div>}</div>
        <div onClick={() => setShowInquiryModal(true)} className="mt-6 p-5 rounded-xl bg-[#1f2937] border border-gray-700 text-center relative overflow-hidden cursor-pointer active:scale-98 transition-transform"><div className="absolute top-2 right-2 bg-yellow-400 text-black text-[9px] font-bold px-2 py-1 rounded">{t('boss_only')}</div><div className="relative z-10"><p className="text-pink-500 text-xs font-bold mb-1">🛍️ {t('store_inquiry')}</p><p className="text-white text-sm font-bold leading-snug mb-3 whitespace-pre-line">{t('inquiry_desc')}</p><button className="bg-gray-700 hover:bg-gray-600 text-gray-200 text-xs py-2 px-4 rounded-full border border-gray-600 transition-colors">{t('apply')}</button></div></div>
      </div>
    </div>
  );

  // ... CouponBox, Community, MyPage (with added Report Button in MyPage) ...
  const renderCommunity = () => (
      <div className="px-4 pt-6 pb-32 animate-in fade-in font-sans">
          <div className="flex justify-between items-center mb-4"><h2 className="text-xl font-bold text-white">{t('community')}</h2><span className="text-gray-500 text-xs bg-gray-800 px-2 py-1 rounded-lg">📍 {t(`city_${selectedCity}`)}</span></div>
          <div className="space-y-4">
              {filteredPosts.length > 0 ? filteredPosts.map(post => (
                  <div key={post.id} className="bg-[#1f2937] p-4 rounded-xl border border-gray-700 transition-all">
                      <div className="flex items-center gap-2 cursor-pointer" onClick={() => setExpandedPostId(expandedPostId === post.id ? null : post.id)}>
                          <span className="bg-gray-800 text-gray-400 text-[10px] px-2 py-0.5 rounded border border-gray-600 shrink-0">{t(`city_${post.city}`)}</span>
                          <h3 className="text-white text-sm font-bold truncate flex-1">{post.title}</h3>
                          <div className="flex items-center gap-3 text-gray-500 text-xs shrink-0">
                              <span className="flex items-center gap-1"><Heart size={12}/> {post.likes}</span>
                              <span className="flex items-center gap-1"><MessageCircle size={12}/> {post.comments.length}</span>
                              {expandedPostId === post.id ? <ChevronUp size={14}/> : <ChevronDown size={14}/>}
                          </div>
                      </div>
                      {expandedPostId === post.id && (
                          <div className="mt-3 animate-in fade-in slide-in-from-top-2">
                              <p className="text-gray-300 text-sm mb-4 leading-relaxed border-t border-gray-700 pt-3">{post.content}</p>
                              {post.imageUrl && <img src={post.imageUrl} alt="Post" className="w-full rounded-lg mb-3 object-cover max-h-48"/>}
                              <span className="text-gray-500 text-[10px] block mb-3">{post.timestamp}</span>
                              <div className="flex gap-3 border-b border-gray-700 pb-3 mb-3">
                                  <button onClick={(e) => { e.stopPropagation(); handleLike(post.id); }} className={`flex items-center gap-1 text-xs px-3 py-1.5 rounded-full border ${post.isLiked ? 'border-pink-500 text-pink-500 bg-pink-500/10' : 'border-gray-600 text-gray-400 hover:bg-gray-700'}`}><Heart size={14} className={post.isLiked ? 'fill-pink-500' : ''} /> <span>{t('likes')} {post.likes}</span></button>
                                  <button onClick={(e) => { e.stopPropagation(); handleReport(post); }} className="flex items-center gap-1 text-xs px-3 py-1.5 rounded-full border border-gray-600 text-red-400 hover:bg-red-900/30"><Siren size={14} /> <span>{t('report')}</span></button>
                              </div>
                              <div className="bg-gray-800/50 rounded-lg p-3">
                                  {post.comments.length > 0 ? ( post.comments.map(c => ( <div key={c.id} className="mb-2 text-sm last:mb-0"><span className="text-pink-500 font-bold mr-2 text-xs">{c.user}</span><span className="text-gray-300">{c.text}</span></div> )) ) : <p className="text-gray-500 text-xs mb-2">첫 댓글을 남겨보세요!</p>}
                                  <div className="flex gap-2 mt-2"><input type="text" value={commentText} onChange={(e) => setCommentText(e.target.value)} placeholder={t('comments')} className="flex-1 bg-gray-700 border-none rounded-lg px-3 py-2 text-xs text-white focus:ring-1 focus:ring-pink-500 outline-none" /><button onClick={(e) => { e.stopPropagation(); handleAddComment(post.id); }} className="bg-pink-600 text-white p-2 rounded-lg"><Send size={14} /></button></div>
                              </div>
                          </div>
                      )}
                  </div>
              )) : <div className="text-center py-10 text-gray-500">이 지역에 작성된 글이 없습니다.</div>}
          </div>
      </div>
  );

  const renderCouponBox = () => (
    <div className="px-4 pt-6 pb-32 animate-in slide-in-from-right-10 font-sans">
      <div className="flex justify-between items-end mb-6"><h2 className="text-xl font-bold text-white">{t('coupon')}</h2><span className="text-gray-500 text-xs">{userData.savedCoupons?.length || 0} / {userData.maxCoupons} 사용중</span></div>
      {savedBusinesses.length > 0 ? savedBusinesses.map(biz => (
           <div key={biz.id} className="bg-white rounded-xl overflow-hidden mb-4 flex shadow-lg relative min-h-[110px]"><div className="bg-pink-500 w-2.5 flex-shrink-0"></div><div className="p-4 flex-1 flex flex-col justify-center relative"><div className="flex justify-between items-start mb-1"><div className="flex flex-col"><h3 className="font-bold text-gray-900 text-base">{biz.name}</h3><span className="text-gray-500 text-xs mt-0.5">{t(`city_${biz.city}`)}</span></div><span className="text-pink-600 text-[10px] font-bold border border-pink-200 bg-pink-50 px-2 py-0.5 rounded-full">{t('available')}</span></div><div className="text-xl font-black text-pink-600 mb-3 mt-1">
             {typeof biz.coupon === 'string' ? biz.coupon : (biz.coupon[lang] || biz.coupon['ko'])}
           </div><div className="flex items-end justify-between"><div className="flex items-center gap-1 text-gray-500 text-[11px]"><Clock size={12} /><span>23{t('hours_left')}</span></div><button onClick={() => handleUseCoupon(biz)} className="bg-[#111827] text-white text-xs font-bold px-4 py-2.5 rounded-lg hover:bg-black transition-colors active:scale-95">{t('use_coupon')}</button></div></div><div className="absolute -right-2.5 top-1/2 -translate-y-1/2 w-5 h-5 bg-[#111827] rounded-full"></div></div> 
        )) : <div className="flex flex-col items-center justify-center h-64 text-gray-500"><Ticket size={40} className="mb-3 opacity-30" /><p className="text-sm">저장된 쿠폰이 없습니다.</p></div>}
    </div>
  );

  const renderMyPage = () => {
    const subPageHeader = (title) => (
        <div className="flex items-center gap-4 mb-6"><button onClick={() => setMyPageView('main')} className="bg-gray-800 p-2 rounded-full text-white"><ChevronLeft size={20}/></button><h2 className="text-xl font-bold text-white">{title}</h2></div>
    );
    
    if (myPageView === 'edit') return ( <div className="px-4 pt-6 pb-32 animate-in fade-in font-sans">{subPageHeader(t('menu_edit'))}<div className="space-y-4"><div className="space-y-2"><label className="text-gray-400 text-sm">새 비밀번호</label><input type="password" className="w-full bg-gray-800 p-4 rounded-xl text-white outline-none" placeholder="변경할 비밀번호 입력" value={changePw} onChange={e => setChangePw(e.target.value)}/></div><button onClick={handleChangePassword} className="w-full bg-pink-600 text-white font-bold py-4 rounded-xl mt-4">변경 저장</button></div></div> );
    
    // Updated Inquiry/Report Center
    if (myPageView === 'inquiry') return ( 
        <div className="px-4 pt-6 pb-32 animate-in fade-in font-sans">
            {subPageHeader(t('menu_inquiry'))}
            <div className="space-y-4">
                <div className="bg-gray-800/50 p-4 rounded-xl border border-gray-700 mb-2">
                    <h3 className="text-white font-bold mb-2 flex items-center gap-2"><Siren size={18} className="text-red-400"/> 신고/문의 하기</h3>
                    <p className="text-gray-400 text-xs mb-4">서비스 이용 중 불편한 점이나 신고할 내용이 있다면 관리자에게 직접 보내주세요.</p>
                    <textarea className="w-full bg-gray-900 p-4 rounded-xl text-white outline-none h-48 resize-none text-base border border-gray-700 focus:border-pink-500 transition-colors" placeholder="내용을 입력해주세요." value={myInquiry} onChange={e => setMyInquiry(e.target.value)}/>
                    <div className="flex gap-2 mt-3">
                        <input type="file" ref={fileInputRef} className="hidden" accept="image/*" onChange={handleImageUpload} />
                        <button onClick={() => fileInputRef.current.click()} className="flex items-center gap-1 bg-gray-700 px-3 py-2 rounded-lg text-gray-300 text-xs border border-gray-600 hover:bg-gray-600">
                            <Camera size={16} /> {postImagePreview ? '사진 변경' : '사진 첨부'}
                        </button>
                    </div>
                     {postImagePreview && (
                       <div className="w-20 h-20 rounded-lg overflow-hidden border border-gray-600 mt-2">
                           <img src={postImagePreview} alt="Preview" className="w-full h-full object-cover" />
                       </div>
                    )}
                </div>
                <button onClick={handleSubmitMyInquiry} className="w-full bg-pink-600 text-white font-bold py-4 rounded-xl shadow-lg active:scale-98 hover:bg-pink-500 transition-colors">문의/신고 접수</button>
            </div>
        </div> 
    );
    
    if (myPageView === 'notice') return ( <div className="px-4 pt-6 pb-32 animate-in fade-in font-sans">{subPageHeader(t('menu_notice'))}<div className="space-y-3"><div className="bg-gray-800 p-4 rounded-xl"><h3 className="text-white font-bold mb-1">서비스 오픈 안내</h3><p className="text-gray-400 text-sm">DealBox 서비스가 정식 오픈되었습니다.</p><span className="text-gray-500 text-xs block mt-2">2025.11.20</span></div></div></div> );
    if (myPageView === 'event') return ( <div className="px-4 pt-6 pb-32 animate-in fade-in font-sans">{subPageHeader(t('menu_event'))}<div className="space-y-3"><div className="bg-gray-800 p-4 rounded-xl border border-pink-500/30"><h3 className="text-white font-bold mb-1">오픈 기념 룰렛 이벤트</h3><p className="text-gray-400 text-sm">매일매일 무료 스핀을 드립니다!</p><span className="text-gray-500 text-xs block mt-2">진행중</span></div></div></div> );
    if (myPageView === 'lesson') return ( 
        <div className="px-4 pt-6 pb-32 animate-in fade-in font-sans">
            {subPageHeader(t('menu_lesson'))}
            <div className="space-y-4">
                <button onClick={handleWriteLesson} className="w-full bg-pink-600 hover:bg-pink-500 p-4 rounded-xl flex items-center justify-center gap-2 text-white font-bold shadow-lg transition-all active:scale-98"><Edit size={18} /> {t('lesson_write')}</button>
                {lessons.length > 0 ? lessons.map(l => (
                    <div key={l.id} className="bg-gray-800 p-4 rounded-xl border border-gray-700">
                        <div className="flex justify-between items-start mb-2"><div className="flex flex-col"><span className="text-pink-500 text-[10px] font-bold mb-0.5 border border-pink-500/30 rounded px-1.5 py-0.5 self-start w-fit">{LESSON_LOCATIONS.find(loc => loc.id === l.city)?.name} • {l.category}</span><h3 className="text-white font-bold text-base">{l.title}</h3></div><span className="text-white font-bold text-sm bg-gray-700 px-2 py-1 rounded">{Number(l.price).toLocaleString()} <span className="text-[10px]">VND/H</span></span></div>
                        <p className="text-gray-400 text-sm mb-3 line-clamp-2">{l.desc}</p>
                        <div className="flex justify-between items-center text-xs text-gray-500 border-t border-gray-700 pt-3"><span className="flex items-center gap-1"><User size={12}/> {l.tutor}</span><div className="flex gap-2">{user && user.uid === l.authorId && (<button onClick={() => handleShowApplicants(l)} className="bg-gray-700 px-3 py-1.5 rounded text-yellow-400 hover:bg-gray-600 transition-colors font-bold flex items-center gap-1"><Users size={12}/> 신청확인</button>)}<button onClick={() => handleApplyLesson(l)} className="bg-pink-600 px-3 py-1.5 rounded text-white hover:bg-pink-500 transition-colors font-bold">{t('lesson_apply')}</button></div></div>
                    </div>
                )) : <div className="text-center py-10 text-gray-500 text-sm">등록된 레슨이 없습니다.</div>}
            </div>
        </div> 
    );

    return (
        <div className="px-4 pt-6 pb-32 animate-in slide-in-from-right-10 font-sans">
        {!user || user.isAnonymous ? (
            <div className="bg-[#1f2937] rounded-2xl p-8 text-center mb-6 border border-gray-700">
                <h3 className="text-white font-bold text-xl mb-2">{t('login_needed')}</h3>
                <button onClick={() => setShowAuthModal(true)} className="w-full bg-pink-500 text-white py-3.5 rounded-xl font-bold text-base mt-6 active:scale-98 transition-transform">{t('login_btn')}</button>
            </div>
        ) : (
            <>
            <div className="bg-[#1f2937] rounded-2xl p-5 mb-6 border border-gray-700 flex items-center gap-4">
                <div className="w-14 h-14 rounded-full bg-pink-500 flex items-center justify-center text-white font-bold text-xl">{user.displayName ? user.displayName[0] : 'D'}</div>
                <div className="flex-1">
                    <div className="flex justify-between items-start">
                        <h3 className="text-white font-bold text-lg">{user.displayName || 'Member'}</h3>
                        <button onClick={handlePushToggle} className={`p-1.5 rounded-full ${pushEnabled ? 'bg-pink-500 text-white' : 'bg-gray-700 text-gray-400'}`} title={t('push_setting')}><Bell size={14}/></button>
                    </div>
                    <div className="flex items-center gap-2 mt-0.5">
                        <p className="text-gray-400 text-sm">{t('spin_left')}: {userData.spinsLeft}회</p>
                        <button onClick={handleWatchAd} className="bg-pink-600 text-white rounded-full p-0.5 hover:bg-pink-500 transition-colors shadow-lg active:scale-90"><PlusCircle size={16} /></button>
                    </div>
                </div>
            </div>
            <div className="space-y-3">
                <button onClick={() => setMyPageView('edit')} className="w-full bg-[#1f2937] hover:bg-gray-800 p-4 rounded-xl flex items-center justify-between text-gray-300 transition-colors text-base font-medium active:bg-gray-800"><div className="flex items-center gap-3"><Edit size={20}/><span className="pt-0.5">{t('menu_edit')}</span></div><ChevronRight size={20} className="text-gray-600" /></button>
                <button onClick={() => setMyPageView('inquiry')} className="w-full bg-[#1f2937] hover:bg-gray-800 p-4 rounded-xl flex items-center justify-between text-gray-300 transition-colors text-base font-medium active:bg-gray-800"><div className="flex items-center gap-3"><Siren size={20}/><span className="pt-0.5">{t('menu_inquiry')}</span></div><ChevronRight size={20} className="text-gray-600" /></button>
                <button onClick={() => setMyPageView('notice')} className="w-full bg-[#1f2937] hover:bg-gray-800 p-4 rounded-xl flex items-center justify-between text-gray-300 transition-colors text-base font-medium active:bg-gray-800"><div className="flex items-center gap-3"><Bell size={20}/><span className="pt-0.5">{t('menu_notice')}</span></div><ChevronRight size={20} className="text-gray-600" /></button>
                <button onClick={() => setMyPageView('event')} className="w-full bg-[#1f2937] hover:bg-gray-800 p-4 rounded-xl flex items-center justify-between text-gray-300 transition-colors text-base font-medium active:bg-gray-800"><div className="flex items-center gap-3"><Gift size={20}/><span className="pt-0.5">{t('menu_event')}</span></div><ChevronRight size={20} className="text-gray-600" /></button>
                <button onClick={() => setMyPageView('lesson')} className="w-full bg-[#1f2937] hover:bg-gray-800 p-4 rounded-xl flex items-center justify-between text-gray-300 transition-colors text-base font-medium active:bg-gray-800"><div className="flex items-center gap-3"><GraduationCap size={20}/><span className="pt-0.5">{t('menu_lesson')}</span></div><ChevronRight size={20} className="text-gray-600" /></button>
            </div>
            
            {/* Admin & Boss Access Buttons */}
            <div className="mt-6 space-y-2">
                {userRole === 'admin' && (
                     <button onClick={() => alert("관리자 페이지로 이동합니다 (준비중)")} className="w-full bg-blue-900/50 border border-blue-700 p-3 rounded-xl flex items-center justify-center gap-2 text-blue-200 font-bold hover:bg-blue-900"><Shield size={18}/> {t('admin_page')}</button>
                )}
                {(userRole === 'boss' || userRole === 'admin') && (
                     <button onClick={() => alert("사장님 페이지로 이동합니다 (준비중)")} className="w-full bg-yellow-900/50 border border-yellow-700 p-3 rounded-xl flex items-center justify-center gap-2 text-yellow-200 font-bold hover:bg-yellow-900"><Briefcase size={18}/> {t('boss_page')}</button>
                )}
                <button onClick={handleLogout} className="w-full bg-gray-800 border border-gray-700 hover:bg-gray-700 p-4 rounded-xl flex items-center justify-center gap-2 text-gray-400 transition-colors text-base font-medium active:bg-gray-700"><LogOut size={20} /><span>{t('logout')}</span></button>
            </div>
            </>
        )}
        </div>
    );
  };

  if (loading) return <div className="min-h-screen bg-[#111827] flex items-center justify-center text-pink-500">Loading...</div>;

  return (
    <div className="min-h-screen bg-[#111827] text-gray-100 max-w-md mx-auto relative shadow-2xl overflow-hidden" style={fontStyle}>
      {showConfetti && <Confetti />}
      <header className="sticky top-0 z-40 bg-[#111827] border-b border-gray-800">
        {/* Header Content (Same as before) */}
        <div className="flex justify-between items-center px-4 h-14">
          <div className="flex items-center gap-1.5">
            <div className="w-7 h-7 bg-gradient-to-br from-pink-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold shadow-lg"><div className="w-3 h-3 border-2 border-white rounded-sm"></div></div>
            <span className="font-black text-xl tracking-tight text-white">DealBox<span className="text-pink-500 text-xs font-normal ml-0.5">.vn</span></span>
          </div>
          <div className="flex items-center gap-2">
             <div className="relative">
                  <button onClick={() => setShowLangMenu(!showLangMenu)} className="flex items-center justify-center w-8 h-8 rounded-full bg-[#1f2937] border border-gray-700 text-lg active:scale-95 hover:bg-gray-800 transition-colors">{LANGUAGES.find(l => l.code === lang)?.flag}</button>
                  {showLangMenu && (<><div className="fixed inset-0 z-40" onClick={() => setShowLangMenu(false)}></div><div className="absolute right-0 top-full mt-1 bg-[#1f2937] border border-gray-700 rounded-lg shadow-xl overflow-hidden w-12 z-50 animate-in fade-in zoom-in-95 duration-100">{LANGUAGES.map(l => ( <button key={l.code} onClick={() => { setLang(l.code); setShowLangMenu(false); }} className="w-full py-2 hover:bg-gray-700 text-lg flex justify-center active:bg-gray-600">{l.flag}</button> ))}</div></>)}
             </div>
             <button onClick={() => setShowCityModal(true)} className="flex items-center gap-1 bg-[#1f2937] px-2 py-1.5 rounded-full text-xs font-bold hover:bg-gray-700 transition-colors border border-gray-700 text-gray-200 active:scale-95"><MapPin size={12} className="text-pink-500" />{t(`city_${selectedCity}`)}</button>
          </div>
        </div>
      </header>
      
      <main className="min-h-[calc(100vh-60px)]">
        {activeTab === 'home' && renderHome()}
        {activeTab === 'coupons' && renderCouponBox()}
        {activeTab === 'community' && renderCommunity()}
        {activeTab === 'mypage' && renderMyPage()}
      </main>

      {/* Nav & Floating Buttons (Same as before) */}
      <nav className="fixed bottom-0 w-full max-w-md bg-[#111827]/95 backdrop-blur-md border-t border-gray-800 px-6 pb-6 pt-3 flex justify-between items-center z-50 text-[10px]">
        <button onClick={() => setActiveTab('home')} className={`flex flex-col items-center gap-1 p-2 min-w-[50px] ${activeTab === 'home' ? 'text-pink-500' : 'text-gray-500'}`}><div className={`p-1 rounded-full ${activeTab === 'home' ? 'bg-pink-500/20' : ''}`}><Home size={24} className={activeTab === 'home' ? 'fill-pink-500' : ''} /></div><span className="font-medium text-xs">{t('home')}</span></button>
        <button onClick={() => setActiveTab('coupons')} className={`flex flex-col items-center gap-1 p-2 min-w-[50px] ${activeTab === 'coupons' ? 'text-pink-500' : 'text-gray-500'}`}><div className={`p-1 rounded-full ${activeTab === 'coupons' ? 'bg-pink-500/20' : ''}`}><Ticket size={24} className={activeTab === 'coupons' ? 'fill-pink-500' : ''} /></div><span className="font-medium text-xs">{t('coupon')}</span></button>
        <button onClick={() => setActiveTab('community')} className={`flex flex-col items-center gap-1 p-2 min-w-[50px] ${activeTab === 'community' ? 'text-pink-500' : 'text-gray-500'}`}><div className={`p-1 rounded-full ${activeTab === 'community' ? 'bg-pink-500/20' : ''}`}><MessageCircle size={24} className={activeTab === 'community' ? 'fill-pink-500' : ''} /></div><span className="font-medium text-xs">{t('community')}</span></button>
        <button onClick={() => setActiveTab('mypage')} className={`flex flex-col items-center gap-1 p-2 min-w-[50px] ${activeTab === 'mypage' ? 'text-pink-500' : 'text-gray-500'}`}><div className={`p-1 rounded-full ${activeTab === 'mypage' ? 'bg-pink-500/20' : ''}`}><User size={24} className={activeTab === 'mypage' ? 'fill-pink-500' : ''} /></div><span className="font-medium text-xs">{t('mypage')}</span></button>
      </nav>
      
      <div className="fixed bottom-[120px] right-0 left-0 mx-auto max-w-md pointer-events-none z-40 px-4 flex justify-end gap-3">
         <div className="flex flex-col gap-3 items-end pointer-events-auto">
            {activeTab === 'community' && (<button onClick={handleWritePost} className="bg-pink-600 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg shadow-pink-600/40 hover:scale-105 transition-transform active:scale-90"><PlusCircle size={24} /></button>)}
            <button onClick={() => { if(!user || user.isAnonymous) { alert(t('login_needed')); return; } setShowChat(!showChat); }} className="bg-[#1f2937] border border-pink-500/50 text-pink-500 w-12 h-12 rounded-full flex flex-col items-center justify-center shadow-lg shadow-pink-500/20 hover:scale-105 transition-transform active:scale-90">
                {showChat ? <X size={20}/> : <MessageSquare size={20} />}
                <span className="text-[8px] font-bold mt-0.5">{t('traveler_talk')}</span>
            </button>
         </div>
      </div>

      {showChat && (<div className="fixed bottom-44 right-0 left-0 mx-auto max-w-[340px] w-full h-80 bg-[#1f2937] border border-gray-700 rounded-2xl shadow-2xl z-40 flex flex-col overflow-hidden animate-in slide-in-from-bottom-10 fade-in"><div className="bg-gray-800 p-3 border-b border-gray-700 flex justify-between items-center"><div className="flex items-center gap-2"><div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div><span className="text-white font-bold text-xs">{t(`city_${selectedCity}`)} Talk</span></div><span className="text-gray-500 text-[10px]">124명 접속</span></div><div className="flex-1 overflow-y-auto p-3 space-y-2 bg-[#0f1521]">{chatMessages.map(msg => (<div key={msg.id} className={`flex flex-col ${msg.userId === user.uid ? 'items-end' : 'items-start'}`}><span className="text-[9px] text-gray-500 mb-0.5">{msg.userName}</span><div className={`px-3 py-1.5 rounded-lg text-xs max-w-[80%] ${msg.userId === user.uid ? 'bg-pink-600 text-white rounded-tr-none' : 'bg-gray-700 text-gray-200 rounded-tl-none'}`}>{msg.text}</div></div>))}</div><div className="p-2 bg-gray-800 flex gap-2"><input className="flex-1 bg-[#0f1521] text-white text-base px-3 py-2 rounded-full outline-none border border-gray-700 focus:border-pink-500" placeholder={t('talk_placeholder')} value={chatInput} onChange={e => setChatInput(e.target.value)} onKeyPress={e => e.key === 'Enter' && handleSendChat()} /><button onClick={handleSendChat} className="w-8 h-8 bg-pink-600 rounded-full flex items-center justify-center text-white"><Send size={14}/></button></div></div>)}
      
      {/* Existing Modals */}
      <Modal isOpen={!!selectedCoupon} onClose={() => setSelectedCoupon(null)} title={t('boss_check_title')} bgColor="bg-white">
          {selectedCoupon && (
              <div className="text-center pb-4">
                  <div className="bg-gray-100 p-4 rounded-xl mb-4"><h3 className="text-gray-500 text-xs font-bold mb-1">사용처</h3><h2 className="text-gray-900 text-2xl font-black">{selectedCoupon.name}</h2></div>
                  <div className="border-2 border-dashed border-pink-200 bg-pink-50 rounded-xl p-6 mb-6 relative overflow-hidden"><p className="text-pink-500 font-bold text-sm mb-2">제공 혜택</p><p className="text-gray-900 text-3xl font-black mb-2 tracking-tight">{typeof selectedCoupon.coupon === 'string' ? selectedCoupon.coupon : (selectedCoupon.coupon[lang] || selectedCoupon.coupon['ko'])}</p><p className="text-gray-500 text-xs">{typeof selectedCoupon.couponDesc === 'string' ? selectedCoupon.couponDesc : (selectedCoupon.couponDesc[lang] || selectedCoupon.couponDesc['ko'])}</p></div>
                  <div className="flex justify-center mb-6"><div className="bg-white p-2 border rounded-lg"><QrCode size={120} className="text-gray-900"/></div></div>
                  <div className="flex items-center justify-center gap-2 text-red-500 font-bold animate-pulse mb-6"><Clock size={20} /><span>남은 시간: 23:59:45</span></div>
                  <button onClick={handleUseCouponConfirm} className="w-full bg-[#111827] text-white font-bold py-4 rounded-xl text-lg shadow-lg active:scale-98">{t('boss_check')}</button>
                  <p className="text-gray-400 text-[10px] mt-3 text-center">{t('coupon_validity')}</p>
              </div>
          )}
      </Modal>
      
      {/* Updated Signup Modal */}
      <Modal isOpen={showAuthModal} onClose={() => setShowAuthModal(false)} title={authMode === 'login' ? t('login') : t('signup')}>
         <div className="p-4">
            <div className="flex gap-2 mb-6 p-1 bg-gray-800 rounded-xl">
              <button onClick={() => setAuthMode('login')} className={`flex-1 py-2.5 text-sm font-bold rounded-lg transition-all ${authMode === 'login' ? 'bg-[#1f2937] text-white' : 'text-gray-400'}`}>{t('login')}</button>
              <button onClick={() => setAuthMode('signup')} className={`flex-1 py-2.5 text-sm font-bold rounded-lg transition-all ${authMode === 'signup' ? 'bg-[#1f2937] text-white' : 'text-gray-400'}`}>{t('signup')}</button>
            </div>
            {authMode === 'login' ? (
              <div className="space-y-3">
                  <input type="text" placeholder={t('id_placeholder')} className="w-full bg-gray-800 p-3.5 rounded-lg text-white outline-none text-base" value={loginId} onChange={e => setLoginId(e.target.value)} />
                  <input type="password" placeholder={t('pw_placeholder')} className="w-full bg-gray-800 p-3.5 rounded-lg text-white outline-none text-base" value={loginPassword} onChange={e => setLoginPassword(e.target.value)} />
                  <button onClick={handleIdLogin} className="w-full bg-pink-600 text-white font-bold py-3 rounded-lg mt-2">{t('login')}</button>
                  <div className="flex gap-2">
                     <button onClick={handleGoogleLogin} className="flex-1 bg-white text-gray-900 font-bold py-3 rounded-lg mt-2 flex justify-center gap-2 items-center text-sm"><span className="text-lg">G</span> Google</button>
                     <button onClick={handleZaloLogin} className="flex-1 bg-blue-600 text-white font-bold py-3 rounded-lg mt-2 flex justify-center gap-2 items-center text-sm">Zalo</button>
                  </div>
              </div>
            ) : (
              <div className="space-y-3">
                    <input type="text" placeholder={t('id_placeholder')} className="w-full bg-gray-800 p-3.5 rounded-lg text-white outline-none text-base" value={signupForm.id} onChange={e => setSignupForm({...signupForm, id: e.target.value})} />
                    <input type="password" placeholder={t('pw_placeholder')} className="w-full bg-gray-800 p-3.5 rounded-lg text-white outline-none text-base" value={signupForm.password} onChange={e => setSignupForm({...signupForm, password: e.target.value})} />
                    
                    {/* Name */}
                    <input type="text" placeholder={t('name_placeholder')} className="w-full bg-gray-800 p-3.5 rounded-lg text-white outline-none text-base" value={signupForm.name} onChange={e => setSignupForm({...signupForm, name: e.target.value})} />
                    
                    {/* DOB */}
                    <div className="flex items-center bg-gray-800 p-3.5 rounded-lg border border-transparent focus-within:border-gray-600">
                        <Calendar size={18} className="text-gray-400 mr-2" />
                        <input type="date" placeholder={t('dob_placeholder')} className="w-full bg-transparent text-white outline-none text-base" value={signupForm.dob} onChange={e => setSignupForm({...signupForm, dob: e.target.value})} />
                    </div>

                    <input type="email" placeholder={t('email_placeholder')} className="w-full bg-gray-800 p-3.5 rounded-lg text-white outline-none text-base" value={signupForm.email} onChange={e => setSignupForm({...signupForm, email: e.target.value})} />
                    
                    {/* Residence */}
                    <div className="space-y-2">
                        <label className="text-xs text-gray-400 ml-1">{t('residence_label')}</label>
                        <select className="w-full bg-gray-800 p-3.5 rounded-lg text-white outline-none text-base appearance-none" value={signupForm.residence} onChange={e => setSignupForm({...signupForm, residence: e.target.value})}>
                            {RESIDENCE_OPTIONS.map(opt => <option key={opt.id} value={opt.id}>{opt.label}</option>)}
                        </select>
                        {signupForm.residence === 'custom' && (
                            <input type="text" placeholder="거주지역 직접 입력" className="w-full bg-gray-800 p-3.5 rounded-lg text-white outline-none text-base mt-2" value={signupForm.residenceCustom} onChange={e => setSignupForm({...signupForm, residenceCustom: e.target.value})} />
                        )}
                    </div>

                    {/* Phone Auth UI */}
                    <div className="flex gap-2">
                        <input type="tel" placeholder={t('phone_placeholder')} className="w-full bg-gray-800 p-3.5 rounded-lg text-white outline-none text-base" value={signupForm.phone} onChange={e => setSignupForm({...signupForm, phone: e.target.value})} />
                        <button onClick={handlePhoneLogin} className="bg-gray-700 text-gray-300 px-3 rounded-lg whitespace-nowrap text-xs font-bold"><Smartphone size={14} className="inline mr-1"/>{t('phone_verify')}</button>
                    </div>

                    <button onClick={handleSignup} className="w-full bg-pink-600 text-white font-bold py-3 rounded-lg mt-2">{t('signup')}</button>
              </div>
            )}
         </div>
      </Modal>
      
      {/* ... Other Modals (City, Congrats, Inquiry, Write, Lesson) ... */}
      <Modal isOpen={showCityModal} onClose={() => setShowCityModal(false)} title={t('city_select')}>
        <div className="grid grid-cols-2 gap-3 p-2">{CITIES.map(city => (<button key={city.id} onClick={() => handleCitySelect(city.id)} className={`p-5 rounded-xl flex flex-col items-center gap-2 border ${selectedCity === city.id ? 'bg-pink-500/10 border-pink-500' : 'bg-[#1f2937] border-gray-700'}`}><span className="text-3xl">{city.icon}</span><span className="font-bold text-base">{t(`city_${city.id}`)}</span></button>))}</div>
      </Modal>

      <Modal isOpen={!!spinResult} onClose={() => setSpinResult(null)} title={t('congrats')}>
         {spinResult && (
             <div className="p-6 text-center bg-[#1f2937]">
                 <div className="w-24 h-24 rounded-full overflow-hidden mx-auto mb-5 border-4 border-pink-500 shadow-xl"><img src={spinResult.image} alt={spinResult.name} className="w-full h-full object-cover" /></div>
                 <h3 className="text-xl font-bold text-white mb-1">{spinResult.name}</h3>
                 <p className="text-pink-400 font-black text-2xl mb-4">
                     {typeof spinResult.coupon === 'string' ? spinResult.coupon : (spinResult.coupon[lang] || spinResult.coupon['ko'])}
                 </p>
                 <button onClick={() => { handleSaveCoupon(spinResult.id); setSpinResult(null); }} className="w-full bg-gradient-to-r from-pink-600 to-purple-600 text-white font-bold py-4 rounded-xl shadow-lg text-lg active:scale-98">{t('save_coupon')}</button>
             </div>
         )}
      </Modal>

      <Modal isOpen={showInquiryModal} onClose={() => setShowInquiryModal(false)} title={t('boss_only')}>
          {/* Existing Inquiry Form */}
          <div className="space-y-4 text-sm">
               <div><label className="block text-gray-400 mb-1.5 text-xs">업체명</label><input type="text" className="w-full bg-gray-800 border border-gray-600 rounded-lg p-3.5 text-white outline-none text-base" placeholder="예: 맛있는 쌀국수" value={inquiryForm.storeName} onChange={e => setInquiryForm({...inquiryForm, storeName: e.target.value})} /></div>
               <div className="grid grid-cols-2 gap-3">
                  <div><label className="block text-gray-400 mb-1.5 text-xs">지역</label><select className="w-full bg-gray-800 border border-gray-600 rounded-lg p-3.5 text-white outline-none text-base" value={inquiryForm.city} onChange={e => setInquiryForm({...inquiryForm, city: e.target.value})}>{CITIES.map(c => <option key={c.id} value={c.id}>{c.name.split(' ')[0]}</option>)}</select></div>
                  <div><label className="block text-gray-400 mb-1.5 text-xs">카테고리</label><select className="w-full bg-gray-800 border border-gray-600 rounded-lg p-3.5 text-white outline-none text-base" value={inquiryForm.category} onChange={e => setInquiryForm({...inquiryForm, category: e.target.value})}>{CATEGORIES_DATA.map(c => <option key={c.id} value={c.id}>{t(`cat_${c.id}`)}</option>)}</select></div>
               </div>
               <div><label className="block text-pink-500 font-bold mb-1.5 text-xs">할인/혜택 (필수)</label><textarea className="w-full bg-gray-800 border border-pink-500/50 rounded-lg p-3.5 text-white h-24 resize-none text-base" placeholder="제공 혜택 입력" value={inquiryForm.discountInfo} onChange={e => setInquiryForm({...inquiryForm, discountInfo: e.target.value})} /></div>
               <div><label className="block text-gray-400 mb-1.5 text-xs">연락처</label><input type="text" className="w-full bg-gray-800 border border-gray-600 rounded-lg p-3.5 text-white outline-none text-base" placeholder="전화번호/카톡" value={inquiryForm.contact} onChange={e => setInquiryForm({...inquiryForm, contact: e.target.value})} /></div>
               <button onClick={handleSubmitInquiry} className="w-full bg-pink-600 hover:bg-pink-500 text-white font-bold py-4 rounded-xl mt-2 transition-colors active:scale-98 text-base">{t('apply')}</button>
          </div>
      </Modal>

      {/* Report Modal */}
      <Modal isOpen={showReportModal} onClose={() => setShowReportModal(false)} title={t('report_title')}>
          <div className="space-y-4 text-sm">
              <p className="text-gray-300 text-sm">신고 대상: <span className="font-bold">{reportTarget?.title || '게시글'}</span></p>
              <textarea className="w-full bg-gray-800 border border-gray-600 rounded-lg p-3.5 text-white h-32 resize-none text-base" placeholder="신고 사유를 입력해주세요." value={reportReason} onChange={e => setReportReason(e.target.value)} />
              
              {/* Report Image Upload */}
              <div className="flex gap-2">
                   <input type="file" ref={fileInputRef} className="hidden" accept="image/*" onChange={handleImageUpload} />
                   <button onClick={() => fileInputRef.current.click()} className="flex items-center gap-1 bg-gray-800 px-4 py-3 rounded-xl text-gray-400 text-sm border border-gray-600 hover:bg-gray-700">
                       <Camera size={18} /> {postImagePreview ? '사진 변경' : '증거 사진 첨부'}
                   </button>
               </div>
               {postImagePreview && (
                   <div className="w-20 h-20 rounded-lg overflow-hidden border border-gray-600">
                       <img src={postImagePreview} alt="Preview" className="w-full h-full object-cover" />
                   </div>
               )}

              <button onClick={submitReport} className="w-full bg-red-600 hover:bg-red-500 text-white font-bold py-4 rounded-xl mt-2 active:scale-98 text-base">{t('report_btn')}</button>
          </div>
      </Modal>

      {/* Business Detail Modal with Grab Link */}
      <Modal isOpen={!!selectedBusiness} onClose={() => setSelectedBusiness(null)} hideClose>
        {selectedBusiness && (
            <div className="relative pb-4 bg-[#1f2937]">
                <button onClick={() => setSelectedBusiness(null)} className="absolute top-3 right-3 p-2 rounded-full bg-black/50 text-white z-10 backdrop-blur-sm active:scale-90"><X size={24} /></button>
                <div className="h-64 w-full relative">
                    <img src={selectedBusiness.image} className="w-full h-full object-cover" alt={selectedBusiness.name} />
                    <div className="absolute inset-0 bg-gradient-to-t from-[#1f2937] via-transparent to-transparent"></div>
                    <div className="absolute bottom-0 left-0 p-6 w-full">
                        <span className="px-2.5 py-1 bg-pink-500 text-white text-xs font-bold rounded mb-2 inline-block">{t(`cat_${selectedBusiness.category}`)}</span>
                        <h2 className="text-3xl font-bold text-white leading-tight mb-1.5">{selectedBusiness.name}</h2>
                        <div className="flex items-center gap-1.5 text-yellow-400 text-sm">
                            {/* Removed Star Rating */}
                        </div>
                    </div>
                </div>
                <div className="px-6 mt-5">
                    <div className="bg-gray-800/50 border border-gray-700 rounded-xl p-5 mb-6 text-center">
                         <p className="text-gray-400 text-xs">이달의 라인업 업체입니다.</p>
                         <p className="text-pink-500 font-bold text-sm mt-1">쿠폰은 룰렛을 통해서만 획득 가능합니다!</p>
                    </div>
                    <div className="space-y-4 text-gray-300 text-sm mb-8">
                        <p className="flex gap-3 items-start">
                            <MapPin size={18} className="text-gray-500 shrink-0 mt-0.5" />
                            <span className="font-light text-base">
                                {typeof selectedBusiness.desc === 'string' ? selectedBusiness.desc : (selectedBusiness.desc[lang] || selectedBusiness.desc['ko'])}
                            </span>
                        </p>
                        <div className="border-t border-gray-700/50 my-2 pt-2">
                            <p className="flex gap-3 items-start mb-2">
                                <span className="text-gray-500 text-xs shrink-0 w-12 font-bold mt-0.5">{t('address_label')}</span>
                                <span className="font-light text-sm">{selectedBusiness.address || '주소 정보 없음'}</span>
                            </p>
                            <p className="flex gap-3 items-center mb-2">
                                <span className="text-gray-500 text-xs shrink-0 w-12 font-bold">{t('phone_label')}</span>
                                <span className="font-light text-sm">{selectedBusiness.phone || '전화번호 없음'}</span>
                            </p>
                            <p className="flex gap-3 items-center">
                                <span className="text-gray-500 text-xs shrink-0 w-12 font-bold">{t('business_hours')}</span>
                                <span className="font-light text-sm">{selectedBusiness.hours}</span>
                            </p>
                        </div>
                    </div>
                    <div className="flex gap-2">
                        <button 
                            onClick={() => window.open(`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(selectedBusiness.address || selectedBusiness.name + ' ' + selectedBusiness.city)}`, '_blank')}
                            className="flex-1 py-4 rounded-xl bg-[#111827] text-gray-300 font-bold text-base flex items-center justify-center gap-2 hover:bg-black border border-gray-700 active:scale-98"
                        >
                            <MapIcon size={20} />{t('map_view')}
                        </button>
                        <button 
                            onClick={openGrab}
                            className="flex-1 py-4 rounded-xl bg-green-600 text-white font-bold text-base flex items-center justify-center gap-2 hover:bg-green-700 border border-green-500 active:scale-98"
                        >
                            <Car size={20} />{t('grab_go')}
                        </button>
                    </div>
                </div>
            </div>
        )}
      </Modal>

      <Modal isOpen={showSlotShop} onClose={() => setShowSlotShop(false)} title="슬롯 확장 (결제)">
          <div className="p-2 space-y-3">
              {SLOT_OPTIONS.map((option, i) => (
                  <button key={i} onClick={() => handleBuySlot(option)} className="w-full bg-gray-800 hover:bg-gray-700 p-4 rounded-xl flex justify-between items-center border border-gray-600 transition-colors group active:scale-98">
                      <div className="flex items-center gap-3"><div className="bg-yellow-500/20 p-2 rounded-lg text-yellow-500 group-hover:bg-yellow-500 group-hover:text-black transition-colors"><CreditCard size={24} /></div><div className="text-left"><p className="text-white font-bold">{option.label}</p><p className="text-gray-400 text-xs">최대 15개까지 보유 가능</p></div></div><span className="text-pink-500 font-bold text-lg">${option.price}</span>
                  </button>
              ))}
              <div className="mt-4 bg-blue-500/10 border border-blue-500/30 p-3 rounded-lg flex gap-2 items-start"><AlertCircle size={16} className="text-blue-400 shrink-0 mt-0.5" /><p className="text-blue-300 text-xs leading-relaxed">결제 기능은 추후 PayPal/Firebase와 연동될 예정입니다. 현재는 테스트 모드로 동작합니다.</p></div>
          </div>
      </Modal>
      {/* Other modals like Lesson Write/Apply are kept but omitted in this snippet for brevity if unchanged */}
      <Modal isOpen={showLessonWriteModal} onClose={() => setShowLessonWriteModal(false)} title={t('lesson_write')}>
           <div className="space-y-4 text-sm">
              <input type="text" className="w-full bg-gray-800 border border-gray-600 rounded-lg p-3.5 text-white outline-none font-bold text-base" placeholder="레슨 제목 (예: 초보자 수영 레슨)" value={lessonForm.title} onChange={e => setLessonForm({...lessonForm, title: e.target.value})} />
              <div className="grid grid-cols-2 gap-3">
                  <div><label className="block text-gray-400 mb-1.5 text-xs">지역</label><select className="w-full bg-gray-800 border border-gray-600 rounded-lg p-3.5 text-white outline-none text-base" value={lessonForm.city} onChange={e => setLessonForm({...lessonForm, city: e.target.value})}>{LESSON_LOCATIONS.map(loc => <option key={loc.id} value={loc.id}>{loc.name}</option>)}</select></div>
                  <div><label className="block text-gray-400 mb-1.5 text-xs">종류</label><select className="w-full bg-gray-800 border border-gray-600 rounded-lg p-3.5 text-white outline-none text-base" value={lessonForm.category} onChange={e => setLessonForm({...lessonForm, category: e.target.value})}><option value="academic">어학/학업</option><option value="sports">운동/스포츠</option><option value="music">음악/악기</option><option value="art">미술/예술</option><option value="etc">기타</option></select></div>
              </div>
              <input type="number" className="w-full bg-gray-800 border border-gray-600 rounded-lg p-3.5 text-white outline-none text-base" placeholder="시간당 가격 (VND)" value={lessonForm.price} onChange={e => setLessonForm({...lessonForm, price: e.target.value})} />
              <textarea className="w-full bg-gray-800 border border-gray-600 rounded-lg p-3.5 text-white h-48 resize-none text-base" placeholder="레슨 소개 및 커리큘럼 내용을 상세하게 적어주세요." value={lessonForm.desc} onChange={e => setLessonForm({...lessonForm, desc: e.target.value})} />
              
              {/* Lesson Image Upload */}
               <div className="flex gap-2">
                   <input type="file" ref={fileInputRef} className="hidden" accept="image/*" onChange={handleImageUpload} />
                   <button onClick={() => fileInputRef.current.click()} className="flex items-center gap-1 bg-gray-800 px-4 py-3 rounded-xl text-gray-400 text-sm border border-gray-600 hover:bg-gray-700">
                       <Camera size={18} /> {postImagePreview ? '사진 변경' : '사진 첨부'}
                   </button>
               </div>
               {postImagePreview && (
                   <div className="w-20 h-20 rounded-lg overflow-hidden border border-gray-600">
                       <img src={postImagePreview} alt="Preview" className="w-full h-full object-cover" />
                   </div>
               )}

              <button onClick={handleSubmitLesson} className="w-full bg-pink-600 hover:bg-pink-500 text-white font-bold py-4 rounded-xl mt-2 active:scale-98 text-base">{t('register')}</button>
          </div>
      </Modal>

      <Modal isOpen={showLessonApplyModal} onClose={() => setShowLessonApplyModal(false)} title={t('lesson_apply_title')}>
          <div className="space-y-4 text-sm">
             <div className="bg-gray-800 p-4 rounded-xl border border-gray-700 mb-2">
                 <h3 className="text-white font-bold text-lg">{selectedLesson?.title}</h3>
                 <p className="text-pink-500 font-bold mt-1">{selectedLesson ? Number(selectedLesson.price).toLocaleString() : 0} VND/H</p>
             </div>
             <div><label className="block text-gray-400 mb-1.5 text-xs">이름</label><input type="text" className="w-full bg-gray-800 border border-gray-600 rounded-lg p-3.5 text-white outline-none text-base" placeholder="신청자 성함" value={lessonApplyForm.name} onChange={e => setLessonApplyForm({...lessonApplyForm, name: e.target.value})} /></div>
             <div><label className="block text-gray-400 mb-1.5 text-xs">거주 지역</label><select className="w-full bg-gray-800 border border-gray-600 rounded-lg p-3.5 text-white outline-none text-base" value={lessonApplyForm.region} onChange={e => setLessonApplyForm({...lessonApplyForm, region: e.target.value})}>{LESSON_LOCATIONS.map(loc => <option key={loc.id} value={loc.id}>{loc.name}</option>)}</select></div>
             <div><label className="block text-gray-400 mb-1.5 text-xs">핸드폰 번호</label><input type="tel" className="w-full bg-gray-800 border border-gray-600 rounded-lg p-3.5 text-white outline-none text-base" placeholder="연락 가능한 번호" value={lessonApplyForm.phone} onChange={e => setLessonApplyForm({...lessonApplyForm, phone: e.target.value})} /></div>
             <div><label className="block text-gray-400 mb-1.5 text-xs">카톡 / 잘로 ID</label><input type="text" className="w-full bg-gray-800 border border-gray-600 rounded-lg p-3.5 text-white outline-none text-base" placeholder="ID 입력" value={lessonApplyForm.messengerId} onChange={e => setLessonApplyForm({...lessonApplyForm, messengerId: e.target.value})} /></div>
             <button onClick={handleSubmitApplication} className="w-full bg-pink-600 hover:bg-pink-500 text-white font-bold py-4 rounded-xl mt-4 active:scale-98 text-base">{t('lesson_apply_btn')}</button>
          </div>
      </Modal>

      <Modal isOpen={showApplicantListModal} onClose={() => setShowApplicantListModal(false)} title={t('lesson_applicants_view')}>
          <div className="space-y-4">
              <div className="bg-gray-800 p-3 rounded-xl border border-gray-700 text-center mb-4"><p className="text-gray-400 text-xs">현재 신청자 수</p><p className="text-pink-500 font-bold text-2xl">{applicantCount}명</p></div>
              {lessonApplicants.length > 0 ? ( lessonApplicants.map(applicant => ( <div key={applicant.id} className="bg-[#111827] p-4 rounded-xl border border-gray-700 flex flex-col gap-2"><div className="flex justify-between items-start border-b border-gray-800 pb-2 mb-1"><span className="text-white font-bold text-lg">{applicant.name}</span><span className="text-gray-400 text-xs bg-gray-800 px-2 py-1 rounded">{LESSON_LOCATIONS.find(l => l.id === applicant.region)?.name || applicant.region}</span></div><div className="grid grid-cols-2 gap-2 text-sm"><div className="flex flex-col"><span className="text-gray-500 text-xs">연락처</span><span className="text-gray-300">{applicant.phone}</span></div><div className="flex flex-col"><span className="text-gray-500 text-xs">메신저 ID</span><span className="text-pink-400 font-medium">{applicant.messengerId}</span></div></div><div className="text-right mt-1"><span className="text-gray-600 text-[10px]">{applicant.timestamp ? new Date(applicant.timestamp.seconds * 1000).toLocaleString() : ''}</span></div></div> )) ) : ( <div className="text-center py-10 text-gray-500 text-sm">아직 신청자가 없습니다.</div> )}
          </div>
      </Modal>
    </div>
  );
}