import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
import { initializeApp, getApps } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, doc, setDoc, addDoc, updateDoc, deleteDoc, collection, onSnapshot } from 'firebase/firestore';

// ── NEIS 설정 ──
const NEIS_URL   = 'https://open.neis.go.kr/hub';
const ATPT_CODE  = 'J10';
const SCHUL_CODE = '7531375';
const NEIS_KEY   = '4b9aa5aa974e4963ab8714cfb9850e41';

const PERIODS = [
    { label:'1교시', start:'08:30', end:'09:20' },
    { label:'2교시', start:'09:30', end:'10:20' },
    { label:'3교시', start:'10:30', end:'11:20' },
    { label:'4교시', start:'11:30', end:'12:20' },
    { label:'5교시', start:'13:10', end:'14:00' },
    { label:'6교시', start:'14:10', end:'15:00' },
    { label:'7교시', start:'15:10', end:'16:00' },
];

// 타임아웃을 지원하는 안전한 fetch 래퍼
const fetchWithTimeout = async (url, options = {}, timeout = 10000) => {
    const controller = new AbortController();
    const id = setTimeout(() => controller.abort(), timeout);
    try {
        const response = await fetch(url, { ...options, signal: controller.signal });
        clearTimeout(id);
        return response;
    } catch (error) {
        clearTimeout(id);
        throw error;
    }
};

async function fetchNEIS(endpoint, params) {
    const qs = Object.entries({ KEY: NEIS_KEY, Type: 'json', pIndex: '1', pSize: '100', ...params })
        .map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join('&');
    const url = `${NEIS_URL}/${endpoint}?${qs}`;
    const attempts = [
        url,
        `https://api.allorigins.win/raw?url=${encodeURIComponent(url)}`,
    ];
    for (const u of attempts) {
        try {
            const res = await fetchWithTimeout(u, {}, 10000);
            if (!res.ok) continue;
            const data = await res.json();
            if (data) return data;
        } catch (e) {
            console.warn('NEIS fetch 실패, 다음 시도:', e.message);
        }
    }
    throw new Error('NEIS 연결 실패');
}

function parseMealMenu(raw) {
    return raw.replace(/\([^)]*\)/g, '').replace(/<br\/>/gi, ',')
        .split(',').map(s => s.trim()).filter(Boolean).join(', ');
}

function getKSTDateStr(offset = 0) {
    const d = new Date(Date.now() + 9 * 3600000 + offset * 86400000);
    return `${d.getUTCFullYear()}-${String(d.getUTCMonth()+1).padStart(2,'0')}-${String(d.getUTCDate()).padStart(2,'0')}`;
}

function fmtDate(d) {
    return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
}

function getCurrentPeriod() {
    const now = new Date();
    const hhmm = now.getHours() * 60 + now.getMinutes();
    for (let i = 0; i < PERIODS.length; i++) {
        const [sh, sm] = PERIODS[i].start.split(':').map(Number);
        const [eh, em] = PERIODS[i].end.split(':').map(Number);
        if (hhmm >= sh * 60 + sm && hhmm <= eh * 60 + em) return i;
    }
    return -1;
}

// ── 진동 피드백 ──
function vibrate(type) {
    if (!navigator.vibrate) return;
    if (type === 'click')   navigator.vibrate(20);
    if (type === 'success') navigator.vibrate([30,40,30]);
    if (type === 'delete')  navigator.vibrate([80,50,80]);
}

// ── Neumorphic Icons ──
const Icons = {
    Home: ({size=22}) => <svg width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>,
    Clock: ({size=22}) => <svg width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>,
    Meal: ({size=22}) => <svg width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>,
    Class: ({size=22}) => <svg width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 002-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>,
    Calendar: ({size=22}) => <svg width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>,
    Trash: () => <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>,
    Plus: () => <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>,
    Alert: () => <svg className="w-12 h-12 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>,
    Refresh: () => <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>,
    ChevL: () => <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="15 18 9 12 15 6"/></svg>,
    ChevR: () => <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="9 18 15 12 9 6"/></svg>,
    X: () => <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>,
};

// ── Firebase 연동 초기화 ──
const firebaseConfig = typeof __firebase_config !== 'undefined'
    ? JSON.parse(__firebase_config)
    : {
        apiKey: "AIzaSyAP8WRXAjmPdmATfWKnCrCRQNH0ftbBV9w",
        authDomain: "duru108.firebaseapp.com",
        projectId: "duru108",
        storageBucket: "duru108.firebasestorage.app",
        messagingSenderId: "669255987956",
        appId: "1:669255987956:web:7479e73d084a2faafb24a1"
      };

const app  = !getApps().length ? initializeApp(firebaseConfig) : getApps()[0];
const auth = getAuth(app);
const db   = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'duru-stable-v1';

// RULE 1: 지켜야 할 엄격한 수집 경로 정의
const getPubColRef = (collectionName) => collection(db, 'artifacts', appId, 'public', 'data', collectionName);
const getPrivColRef = (userId, collectionName) => collection(db, 'artifacts', appId, 'users', userId, collectionName);

export default function App() {
    const [user, setUser] = useState(null);
    const [activeTab, setActiveTab]       = useState('home');
    const [isLoading, setIsLoading]       = useState(true);
    const [statusText, setStatusText]     = useState('CONNECTING');
    const [notiPerm, setNotiPerm]         = useState('default');
    const [isScrolled, setIsScrolled]     = useState(false);
    const [isDesktop, setIsDesktop]       = useState(window.innerWidth >= 768);

    const [announcements, setAnnouncements] = useState([]);
    const [schedules, setSchedules]         = useState([]);
    const [materials, setMaterials]         = useState([]);
    const [messages, setMessages]           = useState([]);
    const [links, setLinks]                 = useState([]);
    const [planner, setPlanner]             = useState([]);
    const [memos, setMemos]                 = useState({});
    const [meals, setMeals]                 = useState({});
    const [timetables, setTimetables]       = useState({});

    const [showModal, setShowModal]     = useState(false);
    const [modalType, setModalType]     = useState('');
    const [modalTarget, setModalTarget] = useState('');
    const [val1, setVal1] = useState('');
    const [val2, setVal2] = useState('');
    const [file, setFile] = useState('');
    const [customDialog, setCustomDialog] = useState(null);

    const today    = getKSTDateStr();
    const [ttDate, setTtDate]     = useState(today);
    const [mealDate, setMealDate] = useState(today);

    // ── 캘린더 상태 ──
    const initToday = new Date();
    const [calYear, setCalYear]       = useState(initToday.getFullYear());
    const [calMonth, setCalMonth]     = useState(initToday.getMonth()); // 0~11
    const [selectedDate, setSelectedDate] = useState(null);

    const synced = useRef(new Set());
    const [syncState, setSyncState] = useState({});
    const [installPrompt, setInstallPrompt] = useState(null);

    const schedulesRef   = useRef([]);
    const mealsRef       = useRef({});
    const memosRef       = useRef({});
    const timetablesRef  = useRef({});
    const firedRef       = useRef({});

    useEffect(() => { schedulesRef.current  = schedules;  }, [schedules]);
    useEffect(() => { mealsRef.current      = meals;      }, [meals]);
    useEffect(() => { memosRef.current      = memos;      }, [memos]);
    useEffect(() => { timetablesRef.current = timetables; }, [timetables]);

    // Google 폰트 강제 로드 및 화면 설정
    useEffect(() => {
        const link = document.createElement('link');
        link.href = "https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap";
        link.rel = "stylesheet";
        document.head.appendChild(link);

        const resizeHandler = () => setIsDesktop(window.innerWidth >= 768);
        const scrollHandler = () => setIsScrolled(window.scrollY > 40);

        window.addEventListener('resize', resizeHandler);
        window.addEventListener('scroll', scrollHandler);

        return () => {
            window.removeEventListener('resize', resizeHandler);
            window.removeEventListener('scroll', scrollHandler);
        };
    }, []);

    const setTab = (tab) => {
        setActiveTab(tab);
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };

    useEffect(() => {
        if ('Notification' in window) setNotiPerm(Notification.permission);
        const handler = (e) => { e.preventDefault(); setInstallPrompt(e); };
        window.addEventListener('beforeinstallprompt', handler);
        return () => window.removeEventListener('beforeinstallprompt', handler);
    }, []);

    const fireNotif = (title, body) => {
        if (!('Notification' in window) || Notification.permission !== 'granted') return;
        const opts = { body, icon: './duru-icon-192.png', badge: './duru-icon-192.png' };
        try { new Notification(title, opts); } catch (e) {}
    };

    const NOTIF_SCHEDULE = [
        { hhmm: '08:40', type: 'schedule' },
        { hhmm: '09:25', type: 'memo', periodIdx: 1 },
        { hhmm: '10:25', type: 'memo', periodIdx: 2 },
        { hhmm: '11:25', type: 'memo', periodIdx: 3 },
        { hhmm: '13:15', type: 'meal' },
        { hhmm: '14:05', type: 'memo', periodIdx: 5 },
        { hhmm: '15:05', type: 'memo', periodIdx: 6 },
    ];

    useEffect(() => {
        const tick = () => {
            if (!('Notification' in window) || Notification.permission !== 'granted') return;
            const todayKey = getKSTDateStr();
            const now = new Date();
            const hhmm = `${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}`;
            for (const n of NOTIF_SCHEDULE) {
                const key = `${todayKey}_${n.hhmm}`;
                if (hhmm !== n.hhmm || firedRef.current[key]) continue;
                firedRef.current[key] = true;
                if (n.type === 'schedule') {
                    const list = schedulesRef.current.filter(s => s.date === todayKey);
                    if (list.length) fireNotif('📅 오늘 학급 일정', list.map(s => s.title).join(', '));
                } else if (n.type === 'meal') {
                    const menu = mealsRef.current[todayKey];
                    if (menu) fireNotif('🍱 오늘 점심 급식', menu);
                } else if (n.type === 'memo') {
                    const memo = memosRef.current[`${todayKey}_${n.periodIdx + 1}`];
                    if (memo) fireNotif(`📝 ${n.periodIdx + 1}교시 메모`, memo);
                }
            }
        };
        const id = setInterval(tick, 30000);
        tick();
        return () => clearInterval(id);
    }, []);

    // ── RULE 3: 선인증 실행 & UI 바인딩 ──
    useEffect(() => {
        const initAuth = async () => {
            try {
                if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
                    await signInWithCustomToken(auth, __initial_auth_token);
                } else {
                    await signInAnonymously(auth);
                }
            } catch (e) {
                console.error("Auth init error:", e);
                setStatusText('ERROR');
            } finally {
                setIsLoading(false);
            }
        };
        initAuth();

        const unsubscribe = onAuthStateChanged(auth, (u) => {
            setUser(u);
            if (u) setStatusText('LIVE');
        });
        return () => unsubscribe();
    }, []);

    // ── 실시간 데이터 구독 ──
    useEffect(() => {
        if (!user) return;

        // RULE 2: 클라이언트 측 정렬/필터링을 위해 단순 수집 후 클라이언트 연산 수행
        const unsubAnnouncements = onSnapshot(getPubColRef('announcements'), (s) => {
            setAnnouncements(s.docs.map(d => ({ id: d.id, ...d.data() })).sort((a,b) => b.at - a.at));
        }, (err) => console.error("Announcements error", err));

        const unsubSchedules = onSnapshot(getPubColRef('schedules'), (s) => {
            setSchedules(s.docs.map(d => ({ id: d.id, ...d.data() })).sort((a,b) => new Date(a.date) - new Date(b.date)));
        }, (err) => console.error("Schedules error", err));

        const unsubMaterials = onSnapshot(getPubColRef('materials'), (s) => {
            setMaterials(s.docs.map(d => ({ id: d.id, ...d.data() })).sort((a,b) => b.at - a.at));
        }, (err) => console.error("Materials error", err));

        const unsubMessages = onSnapshot(getPubColRef('messages'), (s) => {
            setMessages(s.docs.map(d => ({ id: d.id, ...d.data() })).sort((a,b) => b.at - a.at));
        }, (err) => console.error("Messages error", err));

        const unsubLinks = onSnapshot(getPubColRef('links'), (s) => {
            setLinks(s.docs.map(d => ({ id: d.id, ...d.data() })).sort((a,b) => a.at - b.at));
        }, (err) => console.error("Links error", err));

        const unsubMemos = onSnapshot(getPubColRef('memos'), (s) => {
            const t = {}; s.docs.forEach(d => t[d.id] = d.data().content); setMemos(t);
        }, (err) => console.error("Memos error", err));

        const unsubMeals = onSnapshot(getPubColRef('meals'), (s) => {
            const t = {}; s.docs.forEach(d => t[d.id] = d.data().menu); setMeals(t);
        }, (err) => console.error("Meals error", err));

        const unsubTimetables = onSnapshot(getPubColRef('timetables'), (s) => {
            const t = {}; s.docs.forEach(d => t[d.id] = d.data().periods); setTimetables(t);
        }, (err) => console.error("Timetables error", err));

        const unsubPlanner = onSnapshot(getPrivColRef(user.uid, 'planner'), (s) => {
            setPlanner(s.docs.map(d => ({ id: d.id, ...d.data() })).sort((a,b) => b.at - a.at));
        }, (err) => console.error("Planner error", err));

        return () => {
            unsubAnnouncements();
            unsubSchedules();
            unsubMaterials();
            unsubMessages();
            unsubLinks();
            unsubMemos();
            unsubMeals();
            unsubTimetables();
            unsubPlanner();
        };
    }, [user]);

    const syncMeal = useCallback(async (dateStr) => {
        if (!user) return;
        if (synced.current.has('meal_'+dateStr)) return;
        synced.current.add('meal_'+dateStr);
        try {
            const data = await fetchNEIS('mealServiceDietInfo', {
                ATPT_OFCDC_SC_CODE: ATPT_CODE, SD_SCHUL_CODE: SCHUL_CODE,
                MMEAL_SC_CODE: '2', MLSV_YMD: dateStr.replace(/-/g,'')
            });
            const rows = data?.mealServiceDietInfo?.[1]?.row;
            if (rows?.length) {
                const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'meals', dateStr);
                await setDoc(docRef, { menu: parseMealMenu(rows[0].DDISH_NM), at: Date.now() });
            }
        } catch(e) { console.error('급식 조회 실패:', e.message); }
    }, [user]);

    const syncTimetable = useCallback(async (dateStr) => {
        if (!user) return;
        if (synced.current.has('tt_'+dateStr)) return;
        synced.current.add('tt_'+dateStr);

        setSyncState(p => ({...p, [dateStr]: 'loading'}));
        try {
            const d = new Date(dateStr + 'T00:00:00');
            const dow = d.getDay() || 7;
            const mon = new Date(d); mon.setDate(d.getDate() - dow + 1);
            const fri = new Date(d); fri.setDate(d.getDate() - dow + 5);
            const fmt = x => `${x.getFullYear()}${String(x.getMonth()+1).padStart(2,'0')}${String(x.getDate()).padStart(2,'0')}`;

            const data = await fetchNEIS('hisTimetable', {
                ATPT_OFCDC_SC_CODE: ATPT_CODE, SD_SCHUL_CODE: SCHUL_CODE,
                GRADE: '1', CLASS_NM: '8',
                TI_FROM_YMD: fmt(mon), TI_TO_YMD: fmt(fri)
            });

            const rows = data?.hisTimetable?.[1]?.row;
            if (rows?.length) {
                const map = {};
                rows.forEach(item => {
                    const ymd = item.ALL_TI_YMD;
                    const ds  = `${ymd.slice(0,4)}-${ymd.slice(4,6)}-${ymd.slice(6,8)}`;
                    const idx = parseInt(item.PERIO) - 1;
                    const sub = item.ITRT_CNTNT.replace(/\d+$/, '').trim();
                    if (!map[ds]) map[ds] = Array(7).fill('-');
                    if (idx >= 0 && idx < 7) map[ds][idx] = sub;
                });
                await Promise.all(Object.entries(map).map(([ds, periods]) => {
                    const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'timetables', ds);
                    return setDoc(docRef, { periods, at: Date.now() });
                }));
                setSyncState(p => ({...p, [dateStr]: 'done'}));
            } else {
                setSyncState(p => ({...p, [dateStr]: 'done'}));
            }
        } catch(e) {
            console.error('시간표 조회 실패:', e.message);
            setSyncState(p => ({...p, [dateStr]: 'error'}));
        }
    }, [user]);

    useEffect(() => {
        if (!user) return;
        syncMeal(mealDate);
    }, [mealDate, syncMeal, user]);

    useEffect(() => {
        if (!user) return;
        syncTimetable(ttDate);
    }, [ttDate, syncTimetable, user]);

    useEffect(() => {
        if (statusText !== 'LIVE') return;
        syncMeal(today);
        syncTimetable(today);
    }, [statusText, today, syncMeal, syncTimetable]);

    useEffect(() => {
        if (!selectedDate || !user) return;
        syncMeal(selectedDate);
        syncTimetable(selectedDate);
    }, [selectedDate, syncMeal, syncTimetable, user]);

    useEffect(() => {
        if (activeTab !== 'cal' || statusText !== 'LIVE') return;
        const last = new Date(calYear, calMonth + 1, 0).getDate();
        for (let day = 1; day <= last; day++) {
            const d = new Date(calYear, calMonth, day);
            const dow = d.getDay();
            if (dow === 0 || dow === 6) continue;
            const ds = fmtDate(d);
            syncMeal(ds);
            syncTimetable(ds);
        }
    }, [activeTab, calYear, calMonth, statusText, syncMeal, syncTimetable]);

    const forceResync = (dateStr) => {
        synced.current.delete('tt_'+dateStr);
        setSyncState(p => ({...p, [dateStr]: undefined}));
        syncTimetable(dateStr);
        vibrate('success');
    };

    const handleDelete = (col, id, isPrivate=false) => {
        vibrate('delete');
        setCustomDialog({
            type: 'confirm',
            message: '이 데이터를 영구히 삭제할까요?',
            onConfirm: async () => {
                try {
                    const ref = isPrivate
                        ? doc(db, 'artifacts', appId, 'users', user.uid, col, id)
                        : doc(db, 'artifacts', appId, 'public', 'data', col, id);
                    await deleteDoc(ref);
                } catch(e) {
                    console.error("삭제 중 오류 발생:", e);
                }
                setCustomDialog(null);
            }
        });
    };

    const openModal = (type, target='', presetVal2='') => {
        vibrate('click');
        setModalType(type); setModalTarget(target);
        if (type==='MEMO') setVal1(memos[target]||'');
        else if (type==='MEAL') setVal1(meals[target]||'');
        else if (type==='TIME') setVal1((timetables[target]||[]).join(', '));
        else { setVal1(''); }
        setVal2(presetVal2); setFile('');
        setShowModal(true);
    };

    const submitModal = async () => {
        if (!user) return;
        vibrate('success');
        try {
            if (modalType==='NOTICE') {
                await addDoc(getPubColRef('announcements'), {title:val1, content:val2, image:file, at:Date.now()});
            }
            else if (modalType==='PLAN') {
                await addDoc(getPrivColRef(user.uid, 'planner'), {text:val1, done:false, date:today, at:Date.now()});
            }
            else if (modalType==='SCHED') {
                await addDoc(getPubColRef('schedules'), {title:val1, date:val2, at:Date.now()});
            }
            else if (modalType==='FILE') {
                await addDoc(getPubColRef('materials'), {title:val1, subject:val2, file, at:Date.now()});
            }
            else if (modalType==='MEMO') {
                const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'memos', modalTarget);
                await setDoc(docRef, {content:val1, at:Date.now()});
            }
            else if (modalType==='MEAL') {
                const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'meals', modalTarget);
                await setDoc(docRef, {menu:val1, at:Date.now()});
            }
            else if (modalType==='TIME') {
                const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'timetables', modalTarget);
                await setDoc(docRef, {periods:val1.split(',').map(s=>s.trim()), at:Date.now()});
            }
            else if (modalType==='MSG') {
                if(!val2.trim()) return;
                await addDoc(getPubColRef('messages'), {author:val1.trim()||'익명', content:val2.trim(), at:Date.now()});
            }
            else if (modalType==='LINK') {
                if(!val1.trim() || !val2.trim()) return;
                await addDoc(getPubColRef('links'), {title:val1.trim(), url:val2.trim(), at:Date.now()});
            }
        } catch(e) { console.error("제출 중 오류 발생:", e); }
        setShowModal(false);
    };

    const dday = (ds) => {
        const [y1, m1, d1] = ds.split('-').map(Number);
        const [y2, m2, d2] = today.split('-').map(Number);
        const targetDate = new Date(y1, m1 - 1, d1);
        const currentDate = new Date(y2, m2 - 1, d2);
        const diffDays = Math.round((targetDate - currentDate) / 86400000);
        return diffDays === 0 ? 'D-Day' : diffDays > 0 ? `D-${diffDays}` : `D+${Math.abs(diffDays)}`;
    };

    const nextSchedule = useMemo(() => {
        return schedules.find(s => s.date >= today);
    }, [schedules, today]);

    const todayTt = timetables[today] || [];
    const curPeriod = getCurrentPeriod();

    const calCells = useMemo(() => {
        const first = new Date(calYear, calMonth, 1);
        const startDow = first.getDay();
        const last = new Date(calYear, calMonth + 1, 0).getDate();
        const cells = [];
        for (let i = startDow - 1; i >= 0; i--) {
            const d = new Date(calYear, calMonth, -i);
            cells.push({ date: d, current: false });
        }
        for (let i = 1; i <= last; i++) {
            cells.push({ date: new Date(calYear, calMonth, i), current: true });
        }
        while (cells.length < 42) {
            const idx = cells.length - startDow - last + 1;
            cells.push({ date: new Date(calYear, calMonth + 1, idx), current: false });
        }
        return cells;
    }, [calYear, calMonth]);

    const goPrevMonth = () => {
        vibrate('click');
        if (calMonth === 0) { setCalYear(y => y - 1); setCalMonth(11); }
        else setCalMonth(m => m - 1);
    };
    const goNextMonth = () => {
        vibrate('click');
        if (calMonth === 11) { setCalYear(y => y + 1); setCalMonth(0); }
        else setCalMonth(m => m + 1);
    };
    const goToday = () => {
        vibrate('click');
        const d = new Date();
        setCalYear(d.getFullYear()); setCalMonth(d.getMonth());
    };

    if (isLoading) return (
        <div className="flex items-center justify-center h-screen bg-[#E5E9F0]">
            <style dangerouslySetInnerHTML={{__html: `
                .tactile-plate {
                    background: linear-gradient(145deg,#EEF2F6,#D8DFE8);
                    border: 1.5px solid rgba(255,255,255,0.85);
                    box-shadow: 8px 10px 24px rgba(163,177,198,0.55), -8px -8px 24px rgba(255,255,255,0.95), inset 1px 1px 2px rgba(255,255,255,0.9);
                    border-radius: 32px;
                }
                @keyframes spin { to { transform: rotate(360deg); } }
            `}} />
            <div className="tactile-plate p-10 flex flex-col items-center gap-6">
                <div className="relative w-24 h-24 flex items-center justify-center">
                    <div className="absolute inset-0 rounded-full border-4 border-[#E2E8F0] border-t-[#2563EB]" style={{animation: 'spin 1s linear infinite'}}></div>
                    <span className="text-lg font-black text-[#1E293B]">DURU</span>
                </div>
                <p className="text-xs font-bold text-slate-500">고촌고 기판 부팅 중...</p>
            </div>
        </div>
    );

    const TAB_HOME = (
        <div className="space-y-6">
            <div className={`grid gap-4 ${isDesktop ? 'grid-cols-2' : 'grid-cols-1'}`}>
                <div className="tactile-card p-6">
                    <div className="flex items-center justify-between mb-4">
                        <h3 className="font-[900] text-[18px]">오늘 시간표</h3>
                        <button onClick={() => setTab('time')} className="tactile-pill-btn px-3 py-1.5 text-xs">상세</button>
                    </div>
                    <div className="space-y-2">
                        {todayTt.filter(t => t !== '-').length ? todayTt.map((t, i) => t !== '-' && (
                            <div key={i} className={`flex items-center gap-3 px-4 py-2.5 rounded-2xl transition-all ${curPeriod === i ? 'bg-blue-100 border border-blue-200' : 'bg-white/60'}`}>
                                <span className={`text-xs font-black w-8 ${curPeriod===i ? 'text-blue-600' : 'text-slate-400'}`}>{i+1}교시</span>
                                <span className={`font-[900] text-[15px] ${curPeriod===i ? 'text-blue-700' : 'text-slate-700'}`}>{t}</span>
                                {curPeriod===i && <span className="ml-auto text-[10px] font-black text-blue-500 bg-blue-50 px-2 py-0.5 rounded-full">진행중</span>}
                            </div>
                        )) : <p className="text-center text-gray-400 py-4 font-bold text-sm">시간표 불러오는 중...</p>}
                    </div>
                </div>

                <div className="tactile-card p-6">
                    <div className="flex items-center justify-between mb-4">
                        <h3 className="font-[900] text-[18px]">오늘 급식 🍱</h3>
                        <button onClick={() => setTab('meal')} className="tactile-pill-btn px-3 py-1.5 text-xs">상세</button>
                    </div>
                    <div className="debossed-well p-4 flex flex-wrap gap-2 justify-center">
                        {meals[today] ? meals[today].split(',').map((m,i) => (
                            <span key={i} className="bg-white px-3 py-1.5 rounded-full text-[13px] font-[900] shadow-sm">{m.trim()}</span>
                        )) : <p className="text-gray-400 font-bold text-sm py-2">급식 조회 중...</p>}
                    </div>
                </div>
            </div>

            <div className="tactile-card p-6">
                <div className="flex justify-between items-center mb-4">
                    <h2 className="font-[900] text-[20px]">바로가기 🔗</h2>
                    <button onClick={() => openModal('LINK')} className="tactile-pill-btn px-3 py-1.5 text-xs">추가</button>
                </div>
                <div className="flex flex-wrap gap-2.5">
                    {links.length ? links.map(l => (
                        <div key={l.id} className="flex items-center bg-white rounded-[20px] border-2 border-slate-200 shadow-sm pr-1 transition-all hover:border-blue-300">
                            <a href={l.url} target={l.url.startsWith('/') ? '_self' : '_blank'} rel="noopener noreferrer" className="px-4 py-2.5 text-[14px] font-[900] text-slate-700 hover:text-blue-600 transition-colors">
                                {l.title}
                            </a>
                            <button onClick={() => handleDelete('links', l.id)} className="w-8 h-8 flex items-center justify-center text-slate-300 hover:text-red-500 font-black text-lg rounded-full transition-colors pb-0.5">
                                ×
                            </button>
                        </div>
                    )) : <p className="text-[13px] text-slate-400 font-bold w-full py-2">등록된 바로가기가 없습니다.</p>}
                </div>
            </div>

            <div className="tactile-card p-6 bg-gradient-to-br from-blue-50 to-white text-center">
                <p className="text-[11px] font-[900] text-blue-600 tracking-widest uppercase mb-1">다가오는 학급 일정</p>
                <div className="font-[900] text-[22px] text-slate-800">{nextSchedule?.title ?? '예정된 일정 없음'}</div>
                {nextSchedule && (
                    <span className="inline-block mt-2 text-[13px] font-[800] text-blue-600 bg-blue-100 px-3 py-1 rounded-full">
                        {dday(nextSchedule.date)} ({nextSchedule.date})
                    </span>
                )}
                <div className="mt-4">
                    <button onClick={() => setTab('cal')} className="tactile-pill-btn-primary px-5 py-2 text-xs">📅 전체 캘린더 보기</button>
                </div>
            </div>

            <div className="tactile-card p-6">
                <div className="flex justify-between items-center mb-4">
                    <h2 className="font-[900] text-[22px]">학급 알림</h2>
                    <button onClick={() => openModal('NOTICE')} className="tactile-pill-btn px-4 py-2 text-xs">알림 쓰기</button>
                </div>
                <div className="space-y-3">
                    {announcements.length ? announcements.map(a => (
                        <div key={a.id} className="debossed-well p-5 relative">
                            <h3 className="font-[900] text-[16px] pr-8">{a.title}</h3>
                            <p className="text-[13px] text-slate-600 mt-1 font-[600] leading-relaxed whitespace-pre-wrap">{a.content}</p>
                            {a.image && <img src={a.image} alt="알림 이미지" className="mt-3 rounded-xl max-h-48 object-cover w-full"/>}
                            <button onClick={() => handleDelete('announcements', a.id)} className="absolute top-4 right-4 tactile-pill-btn p-1.5 text-red-500" style={{minWidth:28,minHeight:28}}><Icons.Trash/></button>
                        </div>
                    )) : <p className="text-center text-gray-400 py-4 font-[600]">등록된 공지사항이 없습니다.</p>}
                </div>
            </div>
        </div>
    );

    const DOW_LABEL = ['일','월','화','수','목','금','토'];
    const TAB_CAL = (
        <div className="space-y-4">
            <div className="tactile-card p-4 flex items-center justify-between">
                <button onClick={goPrevMonth} className="tactile-pill-btn w-11 h-11"><Icons.ChevL/></button>
                <div className="text-center">
                    <div className="font-[900] text-[22px] text-slate-800 leading-tight">{calYear}년 {calMonth+1}월</div>
                    <button onClick={goToday} className="text-[11px] font-black text-blue-600 mt-0.5">오늘로 이동</button>
                </div>
                <button onClick={goNextMonth} className="tactile-pill-btn w-11 h-11"><Icons.ChevR/></button>
            </div>

            <div className="tactile-card p-3">
                <div className="grid grid-cols-7 mb-2 px-1">
                    {DOW_LABEL.map((d,i) => (
                        <div key={i} className={`text-center text-[11px] font-[900] py-2 ${i===0?'text-red-500':i===6?'text-blue-500':'text-slate-600'}`}>{d}</div>
                    ))}
                </div>
                <div className="grid grid-cols-7 gap-1">
                    {calCells.map((cell, i) => {
                        const ds = fmtDate(cell.date);
                        const events = schedules.filter(s => s.date === ds);
                        const hasMeal = !!meals[ds];
                        const hasTt = (timetables[ds] || []).some(t => t && t !== '-');
                        const isToday = ds === today;
                        const isSelected = selectedDate === ds;
                        const dow = cell.date.getDay();
                        const dayNumColor = !cell.current ? 'text-slate-400' : (isToday ? 'text-white' : dow===0 ? 'text-red-500' : dow===6 ? 'text-blue-500' : 'text-slate-700');
                        return (
                            <button key={i}
                                onClick={() => { vibrate('click'); setSelectedDate(ds); }}
                                className={`cal-cell ${!cell.current ? 'cal-cell-other' : ''} ${isToday ? 'cal-cell-today' : ''} ${isSelected && !isToday ? 'cal-cell-selected' : ''}`}>
                                <span className={`text-[13px] font-[900] ${dayNumColor}`}>{cell.date.getDate()}</span>
                                {cell.current && (
                                    <>
                                        {events[0] && (
                                            <span className={`mt-0.5 text-[9px] font-[900] truncate max-w-full px-1 rounded ${isToday ? 'bg-white/30 text-white' : 'bg-red-100 text-red-600'}`}>
                                                {events[0].title.length > 4 ? events[0].title.slice(0,4)+'…' : events[0].title}
                                            </span>
                                        )}
                                        <div className="flex gap-1 mt-auto pb-0.5">
                                            {events.length > 0 && <div className="cal-dot" style={{background: isToday ? '#FFF' : '#EF4444'}}></div>}
                                            {hasTt && <div className="cal-dot" style={{background: isToday ? '#FFF' : '#3B82F6'}}></div>}
                                            {hasMeal && <div className="cal-dot" style={{background: isToday ? '#FFF' : '#10B981'}}></div>}
                                        </div>
                                    </>
                                )}
                            </button>
                        );
                    })}
                </div>
                <div className="mt-3 flex gap-4 justify-center text-[10px] font-bold text-slate-500 flex-wrap">
                    <span className="flex items-center gap-1"><div className="cal-dot" style={{background:'#EF4444'}}></div>학급일정</span>
                    <span className="flex items-center gap-1"><div className="cal-dot" style={{background:'#3B82F6'}}></div>시간표</span>
                    <span className="flex items-center gap-1"><div className="cal-dot" style={{background:'#10B981'}}></div>급식</span>
                </div>
            </div>

            <div className="tactile-card p-5">
                <div className="flex items-center justify-between mb-3">
                    <h3 className="font-[900] text-[16px]">{calMonth+1}월 일정 한눈에</h3>
                    <button onClick={() => openModal('SCHED')} className="tactile-pill-btn px-3 py-1.5 text-xs">등록</button>
                </div>
                <div className="space-y-2">
                    {schedules.filter(s => {
                        const d = new Date(s.date + 'T00:00:00');
                        return d.getFullYear() === calYear && d.getMonth() === calMonth;
                    }).length ? schedules.filter(s => {
                        const d = new Date(s.date + 'T00:00:00');
                        return d.getFullYear() === calYear && d.getMonth() === calMonth;
                    }).map(s => (
                        <button key={s.id} onClick={() => { vibrate('click'); setSelectedDate(s.date); }}
                            className="w-full debossed-well p-3 flex items-center justify-between text-left hover:bg-white transition-all">
                            <div className="flex items-center gap-3">
                                <div className="w-10 h-10 bg-white rounded-xl flex flex-col items-center justify-center shadow-sm">
                                    <span className="text-[9px] font-black text-slate-400 leading-none">{s.date.slice(5,7)}월</span>
                                    <span className="text-[15px] font-[900] text-slate-800 leading-tight">{s.date.slice(8,10)}</span>
                                </div>
                                <div>
                                    <h4 className="font-[900] text-[14px] text-slate-800">{s.title}</h4>
                                    <p className="text-[11px] text-blue-600 font-bold">{dday(s.date)}</p>
                                </div>
                            </div>
                        </button>
                    )) : <p className="text-center text-gray-400 py-3 font-bold text-sm">이 달에 등록된 일정이 없습니다.</p>}
                </div>
            </div>
        </div>
    );

    const TAB_TIME = (
        <div className="space-y-4">
            <div className="debossed-well p-4 flex flex-col gap-3">
                <div className="flex justify-between items-center">
                    <span className="text-xs font-black text-slate-500">시간표 조회 날짜</span>
                    <div className="flex gap-2 items-center">
                        <span className={`text-xs font-black px-2 py-1 rounded-md border bg-white ${syncState[ttDate]==='loading' ? 'text-amber-500' : syncState[ttDate]==='error' ? 'text-red-500' : 'text-blue-600'}`}>
                            {syncState[ttDate]==='loading' ? 'NEIS 조회중...' : syncState[ttDate]==='error' ? '조회 실패' : ttDate}
                        </span>
                        <button onClick={() => forceResync(ttDate)} className="tactile-pill-btn p-2" title="강제 재조회"><Icons.Refresh/></button>
                    </div>
                </div>
                <input type="date" value={ttDate} onChange={e => { vibrate('click'); setTtDate(e.target.value); }}
                    className="w-full bg-white border-2 border-slate-300 rounded-xl p-3 text-sm font-bold text-center outline-none"/>
                <div className="flex gap-2">
                    <button onClick={() => { vibrate('click'); setTtDate(today); }} className="tactile-pill-btn flex-1 py-2 text-xs">오늘</button>
                    <button onClick={() => openModal('TIME', ttDate)} className="tactile-pill-btn flex-1 py-2 text-xs flex items-center justify-center gap-1"><Icons.Plus/>수동 편집</button>
                </div>
            </div>

            {(timetables[ttDate] || Array(7).fill('-')).map((subj, idx) => (
                <div key={idx} className={`tactile-card p-5 flex items-center justify-between transition-all ${curPeriod===idx && ttDate===today ? 'ring-2 ring-blue-400 ring-offset-2' : ''}`}>
                    <div className="flex items-center gap-4">
                        <div className={`w-12 h-12 debossed-well flex items-center justify-center font-[900] text-[20px] ${curPeriod===idx && ttDate===today ? 'text-blue-600' : 'text-slate-500'}`} style={{borderRadius:16}}>
                            {idx+1}
                        </div>
                        <div>
                            <div className="flex items-center gap-2">
                                <h4 className="font-[900] text-[18px] text-slate-800">{subj === '-' ? '—' : subj}</h4>
                                {curPeriod===idx && ttDate===today && <span className="text-[10px] font-black text-blue-500 bg-blue-100 px-2 py-0.5 rounded-full">진행중</span>}
                            </div>
                            <p className="text-[11px] text-slate-400 font-bold">{PERIODS[idx].start} ~ {PERIODS[idx].end}</p>
                            {memos[ttDate+'_'+(idx+1)] && <p className="text-[12px] text-blue-600 font-[900] mt-0.5">💡 {memos[ttDate+'_'+(idx+1)]}</p>}
                        </div>
                    </div>
                    <button onClick={() => openModal('MEMO', ttDate+'_'+(idx+1))} className="tactile-pill-btn p-2"><Icons.Plus/></button>
                </div>
            ))}
        </div>
    );

    const TAB_MEAL = (
        <div className="space-y-5">
            <div className="debossed-well p-4 flex flex-col gap-3">
                <div className="flex justify-between items-center">
                    <span className="text-xs font-black text-slate-500">급식 조회 날짜</span>
                    <span className="text-xs font-black text-emerald-600 bg-white px-2 py-1 rounded-md border">{mealDate}</span>
                </div>
                <input type="date" value={mealDate} onChange={e => { vibrate('click'); setMealDate(e.target.value); }}
                    className="w-full bg-white border-2 border-slate-300 rounded-xl p-3 text-sm font-bold text-center outline-none"/>
                <div className="flex gap-2">
                    <button onClick={() => { vibrate('click'); setMealDate(today); }} className="tactile-pill-btn flex-1 py-2 text-xs">오늘</button>
                    <button onClick={() => openModal('MEAL', mealDate)} className="tactile-pill-btn flex-1 py-2 text-xs">수동 입력</button>
                </div>
            </div>
            <div className="tactile-card p-7">
                <h2 className="text-[19px] font-black mb-5 text-slate-800">점심 메뉴 🍱</h2>
                <div className="debossed-well p-6 flex flex-wrap justify-center gap-2">
                    {meals[mealDate] ? meals[mealDate].split(',').map((it,i) => (
                        <span key={i} className="bg-white px-5 py-2 rounded-full text-[15px] font-[900] shadow-sm">{it.trim()}</span>
                    )) : <p className="text-gray-400 font-bold py-4">급식 정보가 없습니다.</p>}
                </div>
            </div>
        </div>
    );

    const TAB_CLASS = (
        <div className="space-y-6 pb-8">
            <div className="tactile-card p-6">
                <div className="flex justify-between items-center mb-4">
                    <h2 className="text-[20px] font-[900]">내 플래너</h2>
                    <button onClick={() => openModal('PLAN')} className="tactile-pill-btn w-9 h-9 text-xl font-bold">+</button>
                </div>
                <div className="space-y-3">
                    {planner.length ? planner.map(t => (
                        <div key={t.id} className="bg-white border border-slate-200 rounded-[22px] p-4 flex items-center justify-between shadow-sm">
                            <button onClick={async () => { vibrate('click'); await updateDoc(doc(db, 'artifacts', appId, 'users', user.uid, 'planner', t.id), {done: !t.done}); }} className="flex items-center gap-3 flex-1 text-left">
                                <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center text-xs ${t.done ? 'bg-blue-600 border-blue-600 text-white' : 'border-slate-300'}`}>
                                    {t.done ? '✓' : ''}
                                </div>
                                <span className={`font-[900] text-[15px] ${t.done ? 'line-through text-gray-400' : ''}`}>{t.text}</span>
                            </button>
                            <button onClick={() => handleDelete('planner', t.id, true)} className="text-red-400 p-1 font-bold text-lg">×</button>
                        </div>
                    )) : <p className="text-center text-gray-400 py-4 font-bold text-sm">오늘 할 일을 추가하세요.</p>}
                </div>
            </div>

            <div className={`grid gap-6 ${isDesktop ? 'grid-cols-2' : 'grid-cols-1'}`}>
                <div className="tactile-card p-6">
                    <div className="flex justify-between items-center mb-4">
                        <h2 className="text-[20px] font-[900]">학급 일정</h2>
                        <button onClick={() => openModal('SCHED')} className="tactile-pill-btn px-3 py-1.5 text-xs">등록</button>
                    </div>
                    <div className="space-y-3">
                        {schedules.length ? schedules.map(s => (
                            <div key={s.id} className="debossed-well p-4 flex justify-between items-center">
                                <div>
                                    <h3 className="font-[900] text-slate-800 text-[15px]">{s.title}</h3>
                                    <p className="text-[12px] text-slate-500 font-bold mt-0.5">{s.date} · <span className="text-blue-600">{dday(s.date)}</span></p>
                                </div>
                                <button onClick={() => handleDelete('schedules', s.id)} className="text-red-500 p-1 font-black text-lg">×</button>
                            </div>
                        )) : <p className="text-center text-gray-400 py-4 font-bold text-sm">일정이 없습니다.</p>}
                    </div>
                </div>

                <div className="tactile-card p-6">
                    <div className="flex justify-between items-center mb-4">
                        <h2 className="text-[20px] font-[900]">자료 보관함</h2>
                        <button onClick={() => openModal('FILE')} className="tactile-pill-btn px-3 py-1.5 text-xs">보관</button>
                    </div>
                    <div className="space-y-3">
                        {materials.length ? materials.map(m => (
                            <div key={m.id} className="debossed-well p-4 flex items-center justify-between">
                                <div className="flex-1 min-w-0">
                                    <h3 className="font-[900] text-slate-800 truncate text-[15px]">{m.title}</h3>
                                    <p className="text-[12px] text-slate-500 font-bold">{m.subject}</p>
                                    {m.file && <a href={m.file} download={`${m.title}.jpg`} className="inline-block mt-2 bg-white border px-3 py-1 rounded-full text-[11px] font-black text-blue-600">📥 받기</a>}
                                </div>
                                <button onClick={() => handleDelete('materials', m.id)} className="text-red-500 p-1 font-black text-lg shrink-0">×</button>
                            </div>
                        )) : <p className="text-center text-gray-400 py-4 font-bold text-sm">공유 자료가 없습니다.</p>}
                    </div>
                </div>
            </div>

            <div className="tactile-card p-6 mt-6">
                <div className="flex justify-between items-center mb-4">
                    <h2 className="text-[20px] font-[900]">학급 톡톡 💬</h2>
                    <button onClick={() => openModal('MSG')} className="tactile-pill-btn px-4 py-2 text-xs">글쓰기</button>
                </div>
                <div className="space-y-4">
                    {messages.length ? messages.map(m => (
                        <div key={m.id} className="bg-white border border-slate-200 rounded-[22px] p-5 shadow-sm relative">
                            <div className="flex items-center gap-2 mb-2">
                                <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-black text-xs">
                                    {m.author ? m.author[0] : '익'}
                                </div>
                                <div>
                                    <span className="font-[900] text-[13px] text-slate-700">{m.author || '익명'}</span>
                                    <span className="text-[10px] text-slate-400 font-bold ml-2">
                                        {new Date(m.at).toLocaleString('ko-KR', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
                                    </span>
                                </div>
                            </div>
                            <p className="text-[14px] font-[600] text-slate-800 leading-relaxed whitespace-pre-wrap">{m.content}</p>
                            <button onClick={() => handleDelete('messages', m.id)} className="absolute top-4 right-4 tactile-pill-btn p-1.5 text-red-400" style={{minWidth:28,minHeight:28}}><Icons.Trash/></button>
                        </div>
                    )) : <p className="text-center text-gray-400 py-6 font-bold text-sm">자유롭게 의견이나 건의사항을 남겨보세요!</p>}
                </div>
            </div>
        </div>
    );

    const TABS = [
        { id:'home',  label:'홈',     Icon:Icons.Home     },
        { id:'cal',   label:'캘린더', Icon:Icons.Calendar },
        { id:'time',  label:'시간표', Icon:Icons.Clock    },
        { id:'meal',  label:'급식',   Icon:Icons.Meal     },
        { id:'class', label:'학급',   Icon:Icons.Class    },
    ];

    const CONTENT = { home: TAB_HOME, cal: TAB_CAL, time: TAB_TIME, meal: TAB_MEAL, class: TAB_CLASS };

    const selDate = selectedDate;
    const selSchedules = selDate ? schedules.filter(s => s.date === selDate) : [];
    const selTt = selDate ? (timetables[selDate] || []) : [];
    const selMeal = selDate ? meals[selDate] : null;
    const selDayName = (() => {
        if (!selDate) return '';
        const d = new Date(selDate + 'T00:00:00');
        return DOW_LABEL[d.getDay()] + '요일';
    })();

    return (
        <div className="min-h-screen flex bg-[#E5E9F0]">
            <style dangerouslySetInnerHTML={{__html: `
                body {
                    background-color: #E5E9F0;
                    color: #1E293B;
                    font-family: 'Noto Sans KR', sans-serif;
                    -webkit-tap-highlight-color: transparent;
                    overflow-x: hidden;
                    margin: 0;
                }
                .tactile-card {
                    background: linear-gradient(145deg, #EEF2F6, #D8DFE8);
                    border: 1.5px solid rgba(255,255,255,0.9);
                    box-shadow: 6px 8px 18px rgba(163,177,198,0.55), -6px -6px 18px rgba(255,255,255,0.95), inset 1px 1px 2px rgba(255,255,255,0.9);
                    border-radius: 28px;
                }
                .tactile-pill-btn {
                    background: linear-gradient(180deg, #F1F5F9 0%, #D8DFE8 100%);
                    border: 3px solid #CBD5E1;
                    outline: 1.5px solid #F1F5F9;
                    box-shadow: inset 0px 2.5px 5px rgba(0,0,0,0.1), inset 0px -2.5px 5px rgba(255,255,255,0.95), 0px 5px 12px rgba(148,163,184,0.45);
                    border-radius: 9999px;
                    transition: all 0.1s cubic-bezier(0.2,0.8,0.2,1);
                    color: #475569; font-weight: 800;
                    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
                }
                .tactile-pill-btn:hover { background: linear-gradient(180deg,#F8FAFC 0%,#D1D5DB 100%); transform: translateY(-1px); }
                .tactile-pill-btn:active {
                    background: linear-gradient(180deg,#CBD5E1 0%,#94A3B8 100%);
                    border-color: #94A3B8; box-shadow: inset 0px 4px 8px rgba(0,0,0,0.24); transform: translateY(1.5px); color: #1E293B;
                }
                .tactile-pill-btn-primary {
                    background: linear-gradient(180deg,#93C5FD 0%,#2563EB 100%);
                    border: 3px solid #1D4ED8; outline: 1.5px solid #93C5FD;
                    box-shadow: inset 0px 2.5px 5px rgba(0,0,0,0.15), inset 0px -2.5px 5px rgba(255,255,255,0.45), 0px 5px 12px rgba(37,99,235,0.35);
                    border-radius: 9999px; transition: all 0.1s cubic-bezier(0.2,0.8,0.2,1);
                    color: white; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
                }
                .tactile-pill-btn-primary:hover:not(:disabled) { background: linear-gradient(180deg,#A1CFFF 0%,#1D4ED8 100%); transform: translateY(-1px); }
                .tactile-pill-btn-primary:active:not(:disabled) { background: linear-gradient(180deg,#2563EB 0%,#1E3A8A 100%); transform: translateY(1.5px); }
                .tactile-plate {
                    background: linear-gradient(145deg,#EEF2F6,#D8DFE8);
                    border: 1.5px solid rgba(255,255,255,0.85);
                    box-shadow: 8px 10px 24px rgba(163,177,198,0.55), -8px -8px 24px rgba(255,255,255,0.95), inset 1px 1px 2px rgba(255,255,255,0.9);
                    border-radius: 32px;
                }
                .debossed-well {
                    background: #E2E8F0; border-radius: 24px;
                    box-shadow: inset 3.5px 3.5px 8px rgba(163,177,198,0.8), inset -3.5px -3.5px 8px rgba(255,255,255,0.95), 1px 1.5px 2px rgba(255,255,255,0.75);
                    border: 1px solid rgba(255,255,255,0.45);
                }
                .tactile-nav-container {
                    background: linear-gradient(145deg,#EEF2F6,#D8DFE8);
                    border: 2px solid rgba(255,255,255,0.9);
                    box-shadow: 0px 10px 32px rgba(163,177,198,0.45), inset 1px 1.5px 3px rgba(255,255,255,0.9);
                    border-radius: 40px; transition: all 0.3s cubic-bezier(0.2,0.8,0.2,1);
                }
                .tactile-nav-btn {
                    border-radius: 32px; transition: all 0.2s cubic-bezier(0.2,0.8,0.2,1);
                    color: #64748B; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; cursor: pointer;
                }
                .tactile-nav-btn-active {
                    background: #E2E8F0;
                    box-shadow: inset 3.5px 3.5px 8px rgba(163,177,198,0.85), inset -3.5px -3.5px 8px rgba(255,255,255,0.95);
                    color: #2563EB; transform: translateY(1.5px);
                }
                .sidebar {
                    background: linear-gradient(180deg,#EEF2F6,#D8DFE8);
                    border-right: 1.5px solid rgba(255,255,255,0.9);
                    box-shadow: 4px 0 24px rgba(163,177,198,0.3);
                }
                .sidebar-btn {
                    display: flex; flex-direction: column; align-items: center; justify-content: center;
                    padding: 14px 8px; border-radius: 20px; cursor: pointer;
                    transition: all 0.15s cubic-bezier(0.2,0.8,0.2,1); color: #64748B; gap: 6px;
                }
                .sidebar-btn:hover { background: rgba(255,255,255,0.6); color: #1E293B; }
                .sidebar-btn-active {
                    background: #E2E8F0;
                    box-shadow: inset 3px 3px 7px rgba(163,177,198,0.85), inset -3px -3px 7px rgba(255,255,255,0.95);
                    color: #2563EB; transform: translateY(1px);
                }
                .cal-cell {
                    aspect-ratio: 1 / 1;
                    border-radius: 14px;
                    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
                    padding: 6px 2px 4px; cursor: pointer;
                    transition: all 0.12s cubic-bezier(0.2,0.8,0.2,1);
                    background: rgba(255,255,255,0.5);
                    border: 1.5px solid transparent;
                    position: relative;
                    min-height: 56px;
                }
                .cal-cell:hover { background: #FFFFFF; border-color: #CBD5E1; transform: translateY(-1px); }
                .cal-cell:active { transform: translateY(1px) scale(0.97); }
                .cal-cell-other { background: transparent; opacity: 0.35; }
                .cal-cell-today {
                    background: linear-gradient(180deg,#93C5FD 0%,#2563EB 100%);
                    color: #FFF;
                    border: 1.5px solid #1D4ED8;
                    box-shadow: 0 4px 10px rgba(37,99,235,0.35), inset 0 1px 2px rgba(255,255,255,0.4);
                }
                .cal-cell-today:hover { background: linear-gradient(180deg,#A1CFFF 0%,#1D4ED8 100%); }
                .cal-cell-selected {
                    background: #FFFFFF;
                    border: 2px solid #2563EB;
                    box-shadow: 0 4px 12px rgba(37,99,235,0.3);
                }
                .cal-dot { width: 6px; height: 6px; border-radius: 50%; }
                .live-badge { display: flex; align-items: center; gap: 6px; background: white; padding: 6px 12px; border-radius: 100px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
                .pulse-dot { width: 6px; height: 6px; border-radius: 50%; animation: pulse 1.5s infinite; }
                @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
                .hidden-text { max-height:0; opacity:0; margin-top:0; pointer-events:none; }
            `}} />

            {/* 데스크톱 사이드바 */}
            {isDesktop && (
                <aside className="sidebar fixed left-0 top-0 bottom-0 w-[200px] flex flex-col items-center py-8 px-3 z-40 gap-2">
                    <div className="mb-6 text-center">
                        <div className="tactile-pill-btn w-14 h-14 text-[18px] font-black pointer-events-none mb-2">DURU</div>
                        <p className="text-[10px] font-black text-slate-500">고촌고 1-8반</p>
                    </div>

                    {TABS.map(({id, label, Icon}) => (
                        <button key={id} onClick={() => setTab(id)}
                            className={`sidebar-btn w-full ${activeTab===id ? 'sidebar-btn-active' : ''}`}>
                            <Icon size={20}/>
                            <span className="text-[12px] font-[900]">{label}</span>
                        </button>
                    ))}

                    <div className="mt-auto flex flex-col items-center gap-3">
                        <div className="live-badge">
                            <div className="pulse-dot" style={{backgroundColor: statusText==='LIVE' ? '#10B981' : '#F59E0B'}}></div>
                            <span className="text-[10px] font-[900]" style={{color: statusText==='LIVE' ? '#10B981' : '#F59E0B'}}>{statusText}</span>
                        </div>
                        {notiPerm !== 'granted' && (
                            <button onClick={() => Notification.requestPermission().then(p => setNotiPerm(p))}
                                className="tactile-pill-btn-primary px-3 py-2 text-[10px] font-black w-full">알림 허용</button>
                        )}
                        {installPrompt && (
                            <button onClick={() => { installPrompt.prompt(); installPrompt.userChoice.then(() => setInstallPrompt(null)); }}
                                className="tactile-pill-btn px-3 py-2 text-[10px] font-black w-full text-indigo-600">앱으로 설치</button>
                        )}
                    </div>
                </aside>
            )}

            {/* 메인 영역 */}
            <div className={`flex-1 flex flex-col min-h-screen ${isDesktop ? 'ml-[200px]' : ''}`}>
                <header className={`sticky top-0 z-30 bg-[#E5E9F0]/90 backdrop-blur-xl px-6 pt-10 pb-4 flex items-center justify-between ${isDesktop ? 'max-w-4xl w-full mx-auto' : ''}`}>
                    <div>
                        <h1 className="text-[28px] font-[900] tracking-tight text-slate-800">
                            {TABS.find(t=>t.id===activeTab)?.label}
                        </h1>
                        <p className="text-[11px] font-bold text-slate-400">고촌고등학교 1학년 8반</p>
                    </div>
                    <div className="flex items-center gap-2">
                        {!isDesktop && (
                            <div className="live-badge">
                                <div className="pulse-dot" style={{backgroundColor: statusText==='LIVE' ? '#10B981' : '#F59E0B'}}></div>
                                <span className="text-[11px] font-[900]" style={{color: statusText==='LIVE' ? '#10B981' : '#F59E0B'}}>{statusText}</span>
                            </div>
                        )}
                    </div>
                </header>

                {!isDesktop && (notiPerm !== 'granted' || installPrompt) && (
                    <div className="mx-5 mb-4 p-3 bg-white rounded-2xl shadow flex items-center justify-between gap-2 border border-white/50">
                        <span className="text-xs font-[800] text-slate-600 truncate">
                            {notiPerm !== 'granted' ? '🔔 스마트 알림 활성화' : '📲 앱으로 설치하기'}
                        </span>
                        <div className="flex gap-2 shrink-0">
                            {notiPerm !== 'granted' && (
                                <button onClick={() => Notification.requestPermission().then(p => setNotiPerm(p))}
                                    className="tactile-pill-btn-primary px-4 py-1.5 text-[11px] font-black">알림 허용</button>
                            )}
                            {installPrompt && (
                                <button onClick={() => { installPrompt.prompt(); installPrompt.userChoice.then(() => setInstallPrompt(null)); }}
                                    className="tactile-pill-btn px-4 py-1.5 text-[11px] font-black text-indigo-600">앱 설치</button>
                            )}
                        </div>
                    </div>
                )}

                <main className={`px-5 pb-36 mt-2 flex-1 ${isDesktop ? 'max-w-4xl w-full mx-auto' : ''}`}>
                    {CONTENT[activeTab]}
                </main>
            </div>

            {/* 모바일 하단 네비게이션 */}
            {!isDesktop && (
                <div className="fixed left-1/2 -translate-x-1/2 bottom-6 z-50 transition-all duration-300"
                     style={{width: isScrolled ? '260px' : 'calc(100% - 32px)'}}>
                    <nav className="tactile-nav-container flex items-center justify-between p-2"
                         style={{height: isScrolled ? '56px' : '72px'}}>
                        {TABS.map(({id, label, Icon}) => (
                            <button key={id} onClick={() => setTab(id)}
                                className={`tactile-nav-btn flex-1 h-full ${activeTab===id ? 'tactile-nav-btn-active' : ''}`}>
                                <Icon/>
                                <span className={`text-[10px] font-[900] mt-0.5 transition-all ${isScrolled ? 'hidden-text' : ''}`}>{label}</span>
                            </button>
                        ))}
                    </nav>
                </div>
            )}

            {/* ── 입력 모달 ── */}
            {showModal && (
                <div className="fixed inset-0 z-[100] bg-black/20 backdrop-blur-sm flex items-end md:items-center justify-center p-0 md:p-6">
                    <div className="tactile-card w-full max-w-md p-7 m-4">
                        <h3 className="text-[20px] font-[900] mb-6 text-center">
                            {{NOTICE:'새 공지',SCHED:'일정 등록',FILE:'자료 공유',PLAN:'할 일 추가',MEMO:'수업 메모',MEAL:'식단 입력',TIME:'시간표 편집', MSG:'학급 톡톡 쓰기', LINK:'바로가기 추가'}[modalType]}
                        </h3>
                        <div className="space-y-3">
                            {['PLAN','MEMO','MEAL','TIME'].includes(modalType) && (
                                <input value={val1} onChange={e=>setVal1(e.target.value)}
                                    placeholder={modalType==='MEAL'?'메뉴를 쉼표로 구분':modalType==='TIME'?'과목을 쉼표로 구분':'내용'}
                                    className="w-full debossed-well p-4 text-sm font-bold text-slate-800 outline-none"/>
                            )}
                            {modalType==='NOTICE' && <>
                                <input value={val1} onChange={e=>setVal1(e.target.value)} placeholder="제목" className="w-full debossed-well p-4 text-sm font-bold outline-none"/>
                                <textarea value={val2} onChange={e=>setVal2(e.target.value)} placeholder="내용" className="w-full debossed-well p-4 min-h-[80px] text-sm font-bold resize-none outline-none"/>
                                <label className="block p-4 border-2 border-dashed border-slate-300 rounded-2xl text-center cursor-pointer text-sm text-gray-500 font-bold relative">
                                    🖼️ 이미지 첨부
                                    <input type="file" accept="image/*" className="absolute inset-0 opacity-0 cursor-pointer"
                                        onChange={e => { const f=e.target.files[0]; if(!f) return; const r=new FileReader(); r.onload=ev=>setFile(ev.target.result); r.readAsDataURL(f); }}/>
                                </label>
                            </>}
                            {modalType==='SCHED' && <>
                                <input value={val1} onChange={e=>setVal1(e.target.value)} placeholder="일정 이름" className="w-full debossed-well p-4 text-sm font-bold outline-none"/>
                                <input type="date" value={val2} onChange={e=>setVal2(e.target.value)} className="w-full debossed-well p-4 text-sm font-bold outline-none"/>
                            </>}
                            {modalType==='FILE' && <>
                                <input value={val1} onChange={e=>setVal1(e.target.value)} placeholder="자료 이름" className="w-full debossed-well p-4 text-sm font-bold outline-none"/>
                                <input value={val2} onChange={e=>setVal2(e.target.value)} placeholder="과목" className="w-full debossed-well p-4 text-sm font-bold outline-none"/>
                                <label className="block p-4 border-2 border-dashed border-slate-300 rounded-2xl text-center cursor-pointer text-sm text-gray-500 font-bold relative">
                                    📄 파일 선택
                                    <input type="file" accept="image/*" className="absolute inset-0 opacity-0 cursor-pointer"
                                        onChange={e => { const f=e.target.files[0]; if(!f) return; const r=new FileReader(); r.onload=ev=>setFile(ev.target.result); r.readAsDataURL(f); }}/>
                                </label>
                            </>}
                            {modalType==='MSG' && <>
                                <input value={val1} onChange={e=>setVal1(e.target.value)} placeholder="닉네임 (비워두면 익명)" className="w-full debossed-well p-4 text-sm font-bold outline-none"/>
                                <textarea value={val2} onChange={e=>setVal2(e.target.value)} placeholder="친구들에게 전할 말이나 건의사항을 남겨주세요." className="w-full debossed-well p-4 min-h-[100px] text-sm font-bold resize-none outline-none"/>
                            </>}
                            {modalType==='LINK' && <>
                                <input value={val1} onChange={e=>setVal1(e.target.value)} placeholder="버튼 이름 (예: 성적확인)" className="w-full debossed-well p-4 text-sm font-bold outline-none"/>
                                <input value={val2} onChange={e=>setVal2(e.target.value)} placeholder="연결할 주소 (예: /grades 또는 https://...)" className="w-full debossed-well p-4 text-sm font-bold outline-none"/>
                            </>}
                        </div>
                        <div className="flex gap-3 mt-6">
                            <button onClick={() => setShowModal(false)} className="flex-1 tactile-pill-btn py-4 font-[900]">취소</button>
                            <button onClick={submitModal} className="flex-1 tactile-pill-btn-primary py-4 font-[900]">확인</button>
                        </div>
                    </div>
                </div>
            )}

            {/* ── 캘린더 날짜 상세 모달 ── */}
            {selectedDate && (
                <div className="fixed inset-0 z-[105] bg-black/30 backdrop-blur-sm flex items-end md:items-center justify-center p-0 md:p-6"
                    onClick={() => setSelectedDate(null)}>
                    <div className="tactile-card w-full max-w-lg p-6 m-4 max-h-[85vh] overflow-y-auto"
                        onClick={e => e.stopPropagation()}>
                        <div className="flex justify-between items-start mb-5">
                            <div>
                                <p className="text-[11px] font-[900] text-blue-600 tracking-widest uppercase mb-1">DATE</p>
                                <h3 className="text-[22px] font-[900] text-slate-800 leading-tight">{selDate}</h3>
                                <p className="text-[12px] font-bold text-slate-500 mt-0.5">{selDayName} · {selDate === today ? '오늘' : dday(selDate)}</p>
                            </div>
                            <button onClick={() => setSelectedDate(null)} className="tactile-pill-btn w-9 h-9"><Icons.X/></button>
                        </div>

                        {/* 학급 일정 */}
                        <div className="mb-4">
                            <div className="flex items-center justify-between mb-2">
                                <h4 className="font-[900] text-[14px] text-red-500 flex items-center gap-1">📅 학급 일정</h4>
                                <button onClick={() => openModal('SCHED', '', selDate)} className="tactile-pill-btn px-3 py-1 text-[10px]">+ 추가</button>
                            </div>
                            <div className="debossed-well p-3 space-y-1.5">
                                {selSchedules.length ? selSchedules.map(s => (
                                    <div key={s.id} className="bg-white px-3 py-2 rounded-xl flex items-center justify-between shadow-sm">
                                        <span className="font-[900] text-[14px] text-slate-800">{s.title}</span>
                                        <button onClick={() => handleDelete('schedules', s.id)} className="text-red-400 text-sm font-black px-1">×</button>
                                    </div>
                                )) : <p className="text-[12px] text-slate-400 font-bold text-center py-2">등록된 일정이 없습니다.</p>}
                            </div>
                        </div>

                        {/* 시간표 */}
                        <div className="mb-4">
                            <div className="flex items-center justify-between mb-2">
                                <h4 className="font-[900] text-[14px] text-blue-500 flex items-center gap-1">📚 시간표</h4>
                                <button onClick={() => openModal('TIME', selDate)} className="tactile-pill-btn px-3 py-1 text-[10px]">편집</button>
                            </div>
                            <div className="debossed-well p-3 space-y-1">
                                {(selTt.length ? selTt : Array(7).fill('-')).map((subj, i) => (
                                    <div key={i} className="flex items-center gap-2 bg-white px-3 py-1.5 rounded-xl">
                                        <span className="text-[10px] font-black text-slate-400 w-10 shrink-0">{i+1}교시</span>
                                        <span className="font-[900] text-[13px] text-slate-800 flex-1 truncate">{subj === '-' ? '—' : subj}</span>
                                        <span className="text-[9px] font-bold text-slate-400 shrink-0">{PERIODS[i].start}</span>
                                    </div>
                                ))}
                            </div>
                        </div>

                        {/* 급식 */}
                        <div className="mb-2">
                            <div className="flex items-center justify-between mb-2">
                                <h4 className="font-[900] text-[14px] text-emerald-500 flex items-center gap-1">🍱 점심 급식</h4>
                                <button onClick={() => openModal('MEAL', selDate)} className="tactile-pill-btn px-3 py-1 text-[10px]">편집</button>
                            </div>
                            <div className="debossed-well p-3 flex flex-wrap gap-1.5">
                                {selMeal ? selMeal.split(',').map((m,i) => (
                                    <span key={i} className="bg-white px-3 py-1.5 rounded-full text-[12px] font-[900] shadow-sm">{m.trim()}</span>
                                )) : <p className="text-[12px] text-slate-400 font-bold text-center py-2 w-full">급식 정보가 없습니다.</p>}
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* ── 커스텀 다이얼로그 ── */}
            {customDialog && (
                <div className="fixed inset-0 z-[110] bg-black/20 backdrop-blur-sm flex items-center justify-center p-4">
                    <div className="tactile-card w-full max-w-xs p-6 flex flex-col text-center">
                        <div className="w-14 h-14 bg-amber-50 rounded-full mx-auto mb-3 flex items-center justify-center"><Icons.Alert/></div>
                        <h3 className="text-lg font-black mb-1">Duru 안내</h3>
                        <p className="text-xs font-bold text-slate-500 leading-relaxed mb-5 whitespace-pre-wrap">{customDialog.message}</p>
                        <div className="flex gap-3">
                            {customDialog.type==='confirm' ? <>
                                <button onClick={() => setCustomDialog(null)} className="tactile-pill-btn flex-1 py-3 text-xs">취소</button>
                                <button onClick={customDialog.onConfirm} className="tactile-pill-btn-primary flex-1 py-3 text-xs">확인</button>
                            </> : (
                                <button onClick={() => setCustomDialog(null)} className="tactile-pill-btn-primary w-full py-3 text-xs">확인</button>
                            )}
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}