// community.jsx — Firebase Realtime DB 기반 커뮤니티 (localStorage 폴백)
// Firebase 9 compat (CDN) 사용

const { useState, useEffect, useRef, useCallback, useMemo } = React;

// ── Firebase Init ─────────────────────────────────────────
const FIREBASE_CONFIG = {
  apiKey: "AIzaSyBOfKufthNE1LlqSTxfDe7LKmaB9QJ0KqY",
  authDomain: "dddd-d294a.firebaseapp.com",
  databaseURL: "https://dddd-d294a-default-rtdb.firebaseio.com",
  projectId: "dddd-d294a",
  storageBucket: "dddd-d294a.firebasestorage.app",
  messagingSenderId: "1049374044986",
  appId: "1:1049374044986:web:760cae3ac8e2a6e4b69603",
  measurementId: "G-6B5LSXNS5J"
};

// Lazy init — will be called once Firebase SDK loads
let _fbApp = null;
let _fbDb = null;
let _fbFailed = false;

function getFirebaseApp() {
  if (_fbFailed) return null;
  if (_fbApp) return _fbApp;
  if (typeof firebase === 'undefined') { _fbFailed = true; return null; }
  try {
    _fbApp = firebase.apps.length ? firebase.app() : firebase.initializeApp(FIREBASE_CONFIG);
    _fbDb = firebase.database(_fbApp);
  } catch (e) {
    console.warn('Firebase init failed:', e.message);
    _fbFailed = true;
  }
  return _fbApp;
}

function getDb() {
  if (_fbFailed) return null;
  if (_fbDb) return _fbDb;
  getFirebaseApp();
  return _fbDb;
}

// ── localStorage 폴백 스토리지 ────────────────────────────
function _lsRead(key) {
  try { const v = localStorage.getItem('eco-' + key); return v ? JSON.parse(v) : {}; } catch { return {}; }
}
function _lsWrite(key, data) {
  try { localStorage.setItem('eco-' + key, JSON.stringify(data)); } catch {}
}
function _lsGenId() {
  return 'ls_' + Date.now() + '_' + Math.random().toString(36).slice(2, 6);
}

// localStorage 기반 실시간(polling) 리스너 대체
function useLsCollection(collectionKey) {
  const [data, setData] = useState({});
  useEffect(() => {
    const load = () => setData(_lsRead(collectionKey));
    load();
    const timer = setInterval(load, 1000); // 1초 폴링
    return () => clearInterval(timer);
  }, [collectionKey]);
  return data;
}

function lsPush(collectionKey, item) {
  const data = _lsRead(collectionKey);
  const id = _lsGenId();
  data[id] = item;
  _lsWrite(collectionKey, data);
  return id;
}

function lsRemove(collectionKey, id) {
  const data = _lsRead(collectionKey);
  delete data[id];
  _lsWrite(collectionKey, data);
}

function lsTransaction(collectionKey, id, field, fn) {
  const data = _lsRead(collectionKey);
  if (data[id]) {
    data[id][field] = fn(data[id][field]);
    _lsWrite(collectionKey, data);
  }
}

// ── 30일 보존 정책 (localStorage + Firebase) ─────────────
const THIRTY_DAYS_MS = 30 * 24 * 60 * 60 * 1000;

function lsCleanupOld(collectionKey) {
  const data = _lsRead(collectionKey);
  const cutoff = Date.now() - THIRTY_DAYS_MS;
  let changed = false;
  for (const id in data) {
    if (data[id] && data[id].ts && data[id].ts < cutoff) {
      delete data[id];
      changed = true;
    }
  }
  if (changed) _lsWrite(collectionKey, data);
}

function fbCleanupOld(refPath) {
  const db = getDb();
  if (!db) return;
  const cutoff = Date.now() - THIRTY_DAYS_MS;
  const ref = db.ref(refPath);
  ref.orderByChild('ts').endAt(cutoff).once('value').then(snap => {
    const data = snap.val();
    if (!data) return;
    const updates = {};
    Object.keys(data).forEach(k => { updates[k] = null; });
    ref.update(updates).catch(() => {});
    console.log(`[Retention] ${refPath}: ${Object.keys(updates).length}건 정리`);
  }).catch(() => {});
}

// 앱 시작 시 한 번 + 1시간마다 정리
let _retentionStarted = false;
function startRetentionCleanup() {
  if (_retentionStarted) return;
  _retentionStarted = true;
  const run = () => {
    lsCleanupOld('board');
    fbCleanupOld('board');
    // comments는 키 형태가 comments/{articleId} 이므로 최상위에서 정리
    const db = getDb();
    if (db) {
      db.ref('comments').once('value').then(snap => {
        const all = snap.val();
        if (!all) return;
        const cutoff = Date.now() - THIRTY_DAYS_MS;
        const updates = {};
        for (const artId in all) {
          for (const cId in all[artId]) {
            if (all[artId][cId].ts && all[artId][cId].ts < cutoff) {
              updates[`${artId}/${cId}`] = null;
            }
          }
        }
        if (Object.keys(updates).length > 0) {
          db.ref('comments').update(updates).catch(() => {});
          console.log(`[Retention] comments: ${Object.keys(updates).length}건 정리`);
        }
      }).catch(() => {});
    }
  };
  run();
  setInterval(run, 60 * 60 * 1000); // 1시간마다
}

// ── Nickname (localStorage) ──────────────────────────────
function getStoredNickname() {
  try { return localStorage.getItem('eco-nickname') || ''; } catch { return ''; }
}
function storeNickname(n) {
  try { localStorage.setItem('eco-nickname', n); } catch {}
}
function getUserId() {
  try {
    let id = localStorage.getItem('eco-uid');
    if (!id) { id = 'u_' + Date.now() + '_' + Math.random().toString(36).slice(2, 8); localStorage.setItem('eco-uid', id); }
    return id;
  } catch { return 'anon'; }
}

// ── 닉네임 설정 모달 ─────────────────────────────────────
function NicknameModal({ onSave, onClose }) {
  const [name, setName] = useState(getStoredNickname());
  const inputRef = useRef(null);
  useEffect(() => { inputRef.current?.focus(); }, []);

  const save = () => {
    const trimmed = name.trim();
    if (!trimmed) return;
    storeNickname(trimmed);
    onSave(trimmed);
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal community-modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 400 }}>
        <div className="modal-head">
          <div className="modal-head-meta"><span style={{ color: 'var(--accent)', fontWeight: 700 }}>닉네임 설정</span></div>
          <button className="modal-close" onClick={onClose} aria-label="닫기">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
          </button>
        </div>
        <div className="modal-body" style={{ padding: '24px 32px 32px' }}>
          <p style={{ fontSize: 14, color: 'var(--muted)', margin: '0 0 16px' }}>커뮤니티에서 사용할 닉네임을 입력하세요.</p>
          <input
            ref={inputRef}
            className="community-input"
            type="text"
            value={name}
            onChange={e => setName(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter') save(); }}
            placeholder="닉네임 (2~12자)"
            maxLength={12}
          />
          <button className="community-btn primary" onClick={save} disabled={name.trim().length < 2} style={{ marginTop: 12, width: '100%' }}>
            저장
          </button>
        </div>
      </div>
    </div>
  );
}

// ── 댓글 컴포넌트 (기사 모달 안에 표시) ──────────────────
function ArticleComments({ articleId }) {
  const [comments, setComments] = useState([]);
  const [text, setText] = useState('');
  const [nickname, setNickname] = useState(getStoredNickname());
  const [showNickModal, setShowNickModal] = useState(false);
  const [loading, setLoading] = useState(true);
  const [useLocal, setUseLocal] = useState(false);
  const uid = getUserId();
  const lsKey = 'comments-' + articleId;
  const lsData = useLsCollection(lsKey);

  // Firebase realtime listener with fallback
  useEffect(() => {
    const db = getDb();
    if (!db) {
      setUseLocal(true);
      setLoading(false);
      return;
    }
    const ref = db.ref('comments/' + articleId);
    let settled = false;
    const timeout = setTimeout(() => {
      if (!settled) { setUseLocal(true); setLoading(false); }
    }, 3000);
    const handler = ref.orderByChild('ts').on('value', snap => {
      settled = true;
      clearTimeout(timeout);
      const data = snap.val();
      if (data) {
        const arr = Object.entries(data).map(([k, v]) => ({ id: k, ...v }));
        arr.sort((a, b) => b.ts - a.ts);
        setComments(arr);
      } else {
        setComments([]);
      }
      setLoading(false);
    }, () => {
      settled = true;
      clearTimeout(timeout);
      setUseLocal(true);
      setLoading(false);
    });
    return () => { clearTimeout(timeout); ref.off('value', handler); };
  }, [articleId]);

  // Merge localStorage data when in local mode
  useEffect(() => {
    if (!useLocal) return;
    const arr = Object.entries(lsData).map(([k, v]) => ({ id: k, ...v }));
    arr.sort((a, b) => b.ts - a.ts);
    setComments(arr);
  }, [useLocal, lsData]);

  const postComment = () => {
    if (!text.trim()) return;
    if (!nickname) { setShowNickModal(true); return; }
    if (useLocal) {
      lsPush(lsKey, { uid, nickname, text: text.trim(), ts: Date.now(), likes: 0 });
      setText('');
      return;
    }
    const db = getDb();
    if (!db) {
      lsPush(lsKey, { uid, nickname, text: text.trim(), ts: Date.now(), likes: 0 });
      setUseLocal(true);
      setText('');
      return;
    }
    db.ref('comments/' + articleId).push({ uid, nickname, text: text.trim(), ts: Date.now(), likes: 0 });
    setText('');
  };

  const likeComment = (commentId) => {
    if (useLocal) {
      lsTransaction(lsKey, commentId, 'likes', v => (v || 0) + 1);
      return;
    }
    const db = getDb();
    if (!db) return;
    db.ref('comments/' + articleId + '/' + commentId + '/likes').transaction(v => (v || 0) + 1);
  };

  const deleteComment = (commentId, commentUid) => {
    if (commentUid !== uid) return;
    if (useLocal) {
      lsRemove(lsKey, commentId);
      return;
    }
    const db = getDb();
    if (!db) return;
    db.ref('comments/' + articleId + '/' + commentId).remove();
  };

  const timeSince = (ts) => {
    const diff = Math.floor((Date.now() - ts) / 1000);
    if (diff < 60) return '방금 전';
    if (diff < 3600) return Math.floor(diff / 60) + '분 전';
    if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';
    return Math.floor(diff / 86400) + '일 전';
  };

  return (
    <div className="article-comments">
      <div className="comments-header">
        <h4>댓글 <span className="comment-count">{comments.length}</span></h4>
        {!nickname && (
          <button className="community-btn small" onClick={() => setShowNickModal(true)}>닉네임 설정</button>
        )}
        {nickname && (
          <span className="my-nickname" onClick={() => setShowNickModal(true)}>{nickname}</span>
        )}
      </div>

      <div className="comment-input-row">
        <input
          className="community-input"
          type="text"
          value={text}
          onChange={e => setText(e.target.value)}
          onKeyDown={e => { if (e.key === 'Enter') postComment(); }}
          placeholder={nickname ? '댓글을 입력하세요...' : '닉네임을 먼저 설정하세요'}
          disabled={!nickname}
        />
        <button className="community-btn primary" onClick={postComment} disabled={!text.trim() || !nickname}>등록</button>
      </div>

      {loading ? (
        <div className="comments-loading">댓글을 불러오는 중...</div>
      ) : comments.length === 0 ? (
        <div className="comments-empty">첫 댓글을 남겨보세요!</div>
      ) : (
        <div className="comments-list">
          {comments.map(c => (
            <div key={c.id} className="comment-item">
              <div className="comment-top">
                <span className="comment-nick">{c.nickname}</span>
                <span className="comment-time">{timeSince(c.ts)}</span>
              </div>
              <p className="comment-text">{c.text}</p>
              <div className="comment-actions">
                <button className="comment-action-btn" onClick={() => likeComment(c.id)}>
                  ♥ {c.likes || 0}
                </button>
                {c.uid === uid && (
                  <button className="comment-action-btn delete" onClick={() => deleteComment(c.id, c.uid)}>삭제</button>
                )}
              </div>
            </div>
          ))}
        </div>
      )}

      {showNickModal && (
        <NicknameModal
          onSave={(n) => { setNickname(n); setShowNickModal(false); }}
          onClose={() => setShowNickModal(false)}
        />
      )}
    </div>
  );
}

// ── 커뮤니티 게시판 (메인 페이지 탭) ─────────────────────
function CommunityBoard() {
  const [posts, setPosts] = useState([]);
  const [text, setText] = useState('');
  const [nickname, setNickname] = useState(getStoredNickname());
  const [showNickModal, setShowNickModal] = useState(false);
  const [loading, setLoading] = useState(true);
  const [useLocal, setUseLocal] = useState(false);
  const uid = getUserId();
  const lsKey = 'board';
  const lsData = useLsCollection(lsKey);

  // Firebase realtime listener with fallback
  useEffect(() => {
    const db = getDb();
    if (!db) {
      setUseLocal(true);
      setLoading(false);
      return;
    }
    const ref = db.ref('board');
    let settled = false;
    const timeout = setTimeout(() => {
      if (!settled) { setUseLocal(true); setLoading(false); }
    }, 3000);
    const handler = ref.orderByChild('ts').limitToLast(50).on('value', snap => {
      settled = true;
      clearTimeout(timeout);
      const data = snap.val();
      if (data) {
        const arr = Object.entries(data).map(([k, v]) => ({ id: k, ...v }));
        arr.sort((a, b) => b.ts - a.ts);
        setPosts(arr);
      } else {
        setPosts([]);
      }
      setLoading(false);
    }, () => {
      settled = true;
      clearTimeout(timeout);
      setUseLocal(true);
      setLoading(false);
    });
    return () => { clearTimeout(timeout); ref.off('value', handler); };
  }, []);

  // Merge localStorage data when in local mode
  useEffect(() => {
    if (!useLocal) return;
    const arr = Object.entries(lsData).map(([k, v]) => ({ id: k, ...v }));
    arr.sort((a, b) => b.ts - a.ts);
    setPosts(arr);
  }, [useLocal, lsData]);

  const postMessage = () => {
    if (!text.trim()) return;
    if (!nickname) { setShowNickModal(true); return; }
    if (useLocal) {
      lsPush(lsKey, { uid, nickname, text: text.trim(), ts: Date.now(), likes: 0, replies: null });
      setText('');
      return;
    }
    const db = getDb();
    if (!db) {
      lsPush(lsKey, { uid, nickname, text: text.trim(), ts: Date.now(), likes: 0, replies: null });
      setUseLocal(true);
      setText('');
      return;
    }
    db.ref('board').push({ uid, nickname, text: text.trim(), ts: Date.now(), likes: 0, replies: null });
    setText('');
  };

  const likePost = (postId) => {
    if (useLocal) {
      lsTransaction(lsKey, postId, 'likes', v => (v || 0) + 1);
      return;
    }
    const db = getDb();
    if (!db) return;
    db.ref('board/' + postId + '/likes').transaction(v => (v || 0) + 1);
  };

  const deletePost = (postId, postUid) => {
    if (postUid !== uid) return;
    if (useLocal) {
      lsRemove(lsKey, postId);
      return;
    }
    const db = getDb();
    if (!db) return;
    db.ref('board/' + postId).remove();
  };

  const timeSince = (ts) => {
    const diff = Math.floor((Date.now() - ts) / 1000);
    if (diff < 60) return '방금 전';
    if (diff < 3600) return Math.floor(diff / 60) + '분 전';
    if (diff < 86400) return Math.floor(diff / 3600) + '시간 전';
    return Math.floor(diff / 86400) + '일 전';
  };

  return (
    <div className="community-board">
      <div className="section-head">
        <h2>커뮤니티</h2>
        <span className="meta">실시간 토론 · {posts.length}건</span>
      </div>

      <div className="board-composer">
        <div className="composer-top">
          {nickname ? (
            <span className="my-nickname" onClick={() => setShowNickModal(true)}>{nickname}</span>
          ) : (
            <button className="community-btn small" onClick={() => setShowNickModal(true)}>닉네임 설정</button>
          )}
        </div>
        <div className="composer-input-row">
          <textarea
            className="community-textarea"
            value={text}
            onChange={e => setText(e.target.value)}
            placeholder={nickname ? '경제 이슈에 대한 의견을 나눠보세요...' : '닉네임을 먼저 설정하세요'}
            disabled={!nickname}
            rows={3}
          />
        </div>
        <div className="composer-actions">
          <span className="char-count">{text.length}/500</span>
          <button className="community-btn primary" onClick={postMessage} disabled={!text.trim() || !nickname || text.length > 500}>
            게시
          </button>
        </div>
      </div>

      {loading ? (
        <div className="comments-loading">게시물을 불러오는 중...</div>
      ) : posts.length === 0 ? (
        <div className="comments-empty" style={{ padding: '60px 0' }}>
          <div style={{ fontSize: 32, marginBottom: 8, opacity: 0.3 }}>💬</div>
          첫 번째 글을 작성해보세요!
        </div>
      ) : (
        <div className="board-posts">
          {posts.map(p => (
            <div key={p.id} className="board-post">
              <div className="post-header">
                <span className="post-nick">{p.nickname}</span>
                <span className="post-time">{timeSince(p.ts)}</span>
              </div>
              <p className="post-text">{p.text}</p>
              <div className="post-actions">
                <button className="comment-action-btn" onClick={() => likePost(p.id)}>♥ {p.likes || 0}</button>
                {p.uid === uid && (
                  <button className="comment-action-btn delete" onClick={() => deletePost(p.id, p.uid)}>삭제</button>
                )}
              </div>
            </div>
          ))}
        </div>
      )}

      {showNickModal && (
        <NicknameModal
          onSave={(n) => { setNickname(n); setShowNickModal(false); }}
          onClose={() => setShowNickModal(false)}
        />
      )}
    </div>
  );
}

// Export to window
Object.assign(window, {
  ArticleComments, CommunityBoard,
  NicknameModal, getFirebaseApp, getDb,
  getStoredNickname, storeNickname, getUserId,
  startRetentionCleanup,
});