import React from 'react';
import { ENDING_CATALOG } from '../data/endings';
import './EndingCodex.css';

export const ENDINGS_STORAGE_KEY = 'ss_endings_v2';

export default function EndingCodex({ onClose }) {
  const unlocked = JSON.parse(localStorage.getItem(ENDINGS_STORAGE_KEY) || '[]');

  return (
    <div className="codex-overlay" onClick={onClose}>
      <div className="codex-panel" onClick={(e) => e.stopPropagation()}>
        <div className="codex-header">
          <h2>엔딩 도감 ({unlocked.length}/{ENDING_CATALOG.length})</h2>
          <button className="close-btn" onClick={onClose}>&times;</button>
        </div>
        <div className="codex-content">
          <div className="codex-grid">
            {ENDING_CATALOG.map((e) => {
              const isUnlocked = unlocked.includes(e.id);
              return (
                <div key={e.id} className={`codex-entry ${isUnlocked ? 'unlocked' : 'locked'}`}>
                  <div className="codex-title">{isUnlocked ? e.title : '??? (미확인)'}</div>
                  <div className="codex-desc">{isUnlocked ? e.reason : '아직 발견하지 못한 결말입니다.'}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}