import { useState, useEffect, useRef } from "react";

const STORAGE_KEY = "yongdae_reading_marathon";
const MAX_BOOKS = 50;
const ADMIN_PASSWORD = "yongdae2026";

const pastelColors = [
  { bg: "#FFD6D6", accent: "#FF6B6B", text: "#c0392b" },
  { bg: "#D6EDFF", accent: "#4A90E2", text: "#1a5fa0" },
  { bg: "#D6FFE4", accent: "#27AE60", text: "#1a7a42" },
  { bg: "#FFF3D6", accent: "#F39C12", text: "#c07a00" },
  { bg: "#EDD6FF", accent: "#9B59B6", text: "#6c3483" },
  { bg: "#D6FFFA", accent: "#1ABC9C", text: "#0e8a6e" },
  { bg: "#FFE4D6", accent: "#E67E22", text: "#b35a10" },
  { bg: "#F0FFD6", accent: "#82C91E", text: "#5a8c0e" },
];

function getColor(index) {
  return pastelColors[index % pastelColors.length];
}

// localStorage 저장/불러오기
function loadFromStorage() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (raw) {
      const parsed = JSON.parse(raw);
      return parsed.participants || [];
    }
  } catch (e) {
    console.error("불러오기 실패", e);
  }
  return [];
}

function saveToStorage(participants) {
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify({ participants }));
  } catch (e) {
    console.error("저장 실패", e);
  }
}

function AdminLoginModal({ onClose, onSuccess }) {
  const [pw, setPw] = useState("");
  const [error, setError] = useState("");
  const [shake, setShake] = useState(false);

  function handleLogin() {
    if (pw === ADMIN_PASSWORD) {
      onSuccess();
    } else {
      setError("비밀번호가 틀렸습니다.");
      setShake(true);
      setTimeout(() => setShake(false), 500);
      setPw("");
    }
  }

  return (
    <div style={{
      position:"fixed", inset:0,
      background:"rgba(0,0,0,0.5)",
      display:"flex", alignItems:"center", justifyContent:"center",
      zIndex:200, padding:16,
    }} onClick={e => { if(e.target===e.currentTarget) onClose(); }}>
      <div style={{
        background:"#fff", borderRadius:24,
        padding:"36px 28px", maxWidth:340, width:"100%",
        boxShadow:"0 24px 64px rgba(0,0,0,0.2)",
        animation: shake ? "shake 0.4s ease" : "slideUp 0.25s ease",
      }}>
        <div style={{textAlign:"center", marginBottom:24}}>
          <div style={{
            width:64, height:64, borderRadius:"50%",
            background:"linear-gradient(135deg,#ff7043,#ff9800)",
            display:"flex", alignItems:"center", justifyContent:"center",
            fontSize:30, margin:"0 auto 12px",
            boxShadow:"0 4px 16px rgba(255,112,67,0.35)",
          }}>🔐</div>
          <h2 style={{margin:0, fontSize:20, fontWeight:800, color:"#222"}}>관리자 로그인</h2>
          <p style={{margin:"6px 0 0", fontSize:13, color:"#999"}}>관리자만 내용을 수정할 수 있어요</p>
        </div>
        <input
          type="password"
          placeholder="비밀번호 입력"
          value={pw}
          onChange={e => { setPw(e.target.value); setError(""); }}
          onKeyDown={e => e.key==="Enter" && handleLogin()}
          autoFocus
          style={{
            width:"100%", padding:"13px 16px",
            border: error ? "2px solid #ef5350" : "2px solid #e0e0e0",
            borderRadius:12, fontSize:16, fontWeight:600,
            outline:"none", boxSizing:"border-box", letterSpacing:4,
          }}
          onFocus={e => e.target.style.border="2px solid #ff9800"}
          onBlur={e => e.target.style.border=error?"2px solid #ef5350":"2px solid #e0e0e0"}
        />
        {error && (
          <div style={{color:"#ef5350", fontSize:12, marginTop:6, fontWeight:600, textAlign:"center"}}>
            ❌ {error}
          </div>
        )}
        <div style={{display:"flex", gap:10, marginTop:16}}>
          <button onClick={onClose} style={{
            flex:1, padding:"13px",
            background:"#f5f5f5", border:"none",
            borderRadius:12, fontSize:15, fontWeight:700,
            color:"#888", cursor:"pointer",
          }}>취소</button>
          <button onClick={handleLogin} style={{
            flex:2, padding:"13px",
            background:"linear-gradient(135deg,#ff7043,#ff9800)",
            border:"none", borderRadius:12,
            fontSize:15, fontWeight:800, color:"#fff", cursor:"pointer",
            boxShadow:"0 4px 14px rgba(255,112,67,0.3)",
          }}>🔓 로그인</button>
        </div>
      </div>
    </div>
  );
}

function AddParticipantModal({ participants, onClose, onAdd }) {
  const [newName, setNewName] = useState("");
  const [nameError, setNameError] = useState("");

  function handleAdd() {
    const trimmed = newName.trim();
    if (!trimmed) { setNameError("이름을 입력해주세요."); return; }
    if (participants.some(p => p.name === trimmed)) { setNameError("이미 참여 중인 이름입니다."); return; }
    onAdd(trimmed);
  }

  return (
    <div style={{
      position:"fixed", inset:0,
      background:"rgba(0,0,0,0.45)",
      display:"flex", alignItems:"center", justifyContent:"center",
      zIndex:100, padding:16,
    }} onClick={e => { if(e.target===e.currentTarget) onClose(); }}>
      <div style={{
        background:"#fff", borderRadius:24,
        padding:"32px 28px", maxWidth:360, width:"100%",
        boxShadow:"0 20px 60px rgba(0,0,0,0.18)",
        animation:"slideUp 0.25s ease",
      }}>
        <div style={{textAlign:"center", marginBottom:20}}>
          <div style={{fontSize:40, marginBottom:6}}>🏃‍♂️</div>
          <h2 style={{margin:0, fontSize:20, fontWeight:800, color:"#333"}}>참여자 추가</h2>
          <p style={{margin:"6px 0 0", fontSize:13, color:"#888"}}>이름을 입력하고 참여 버튼을 눌러주세요</p>
        </div>
        <input
          type="text"
          placeholder="이름 입력"
          value={newName}
          onChange={e => { setNewName(e.target.value); setNameError(""); }}
          onKeyDown={e => e.key==="Enter" && handleAdd()}
          autoFocus
          style={{
            width:"100%", padding:"13px 16px",
            border: nameError ? "2px solid #ef5350" : "2px solid #e0e0e0",
            borderRadius:12, fontSize:16, fontWeight:600,
            outline:"none", boxSizing:"border-box",
          }}
          onFocus={e => e.target.style.border="2px solid #ff9800"}
          onBlur={e => e.target.style.border=nameError?"2px solid #ef5350":"2px solid #e0e0e0"}
        />
        {nameError && <div style={{color:"#ef5350", fontSize:12, marginTop:6, fontWeight:600}}>{nameError}</div>}
        <div style={{display:"flex", gap:10, marginTop:16}}>
          <button onClick={onClose} style={{
            flex:1, padding:"13px",
            background:"#f5f5f5", border:"none",
            borderRadius:12, fontSize:15, fontWeight:700,
            color:"#888", cursor:"pointer",
          }}>취소</button>
          <button onClick={handleAdd} style={{
            flex:2, padding:"13px",
            background:"linear-gradient(135deg,#ff7043,#ff9800)",
            border:"none", borderRadius:12,
            fontSize:15, fontWeight:800, color:"#fff", cursor:"pointer",
            boxShadow:"0 4px 14px rgba(255,112,67,0.35)",
          }}>🏁 참여하기</button>
        </div>
      </div>
    </div>
  );
}

export default function App() {
  const [participants, setParticipants] = useState(() => loadFromStorage());
  const [isAdmin, setIsAdmin] = useState(false);
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [showAddModal, setShowAddModal] = useState(false);
  const [editingId, setEditingId] = useState(null);
  const [editValue, setEditValue] = useState("");
  const [savedFlash, setSavedFlash] = useState(null);
  const [pendingEdits, setPendingEdits] = useState({}); // 저장 전 임시 수정값
  const [saveAllFlash, setSaveAllFlash] = useState(false);

  // participants 변경 시 자동 저장 (참여자 추가/삭제만)
  // 독서량은 "저장" 버튼 클릭 시만 저장

  function handleAddParticipant(name) {
    const updated = [...participants, { id: Date.now(), name, books: 0 }];
    setParticipants(updated);
    saveToStorage(updated);
    setShowAddModal(false);
  }

  function handleEditStart(p) {
    setEditingId(p.id);
    setEditValue(String(p.books));
  }

  // 개별 저장
  function handleEditSave(id) {
    const val = Math.min(MAX_BOOKS, Math.max(0, Number(editValue) || 0));
    const updated = participants.map(p => p.id === id ? { ...p, books: val } : p);
    setParticipants(updated);
    saveToStorage(updated);
    setEditingId(null);
    setSavedFlash(id);
    setTimeout(() => setSavedFlash(null), 1400);
  }

  function handleLogout() {
    setIsAdmin(false);
    setEditingId(null);
  }

  const sorted = [...participants].sort((a, b) => b.books - a.books);

  return (
    <div style={{
      minHeight:"100vh",
      background:"linear-gradient(135deg,#fff9f0 0%,#fff0e6 40%,#f0f4ff 100%)",
      fontFamily:"'Noto Sans KR','Apple SD Gothic Neo',sans-serif",
      padding:"0 0 60px 0",
    }}>

      {/* 헤더 */}
      <div style={{
        background:"linear-gradient(135deg,#ff7043 0%,#ff9800 50%,#ffc107 100%)",
        padding:"36px 24px 28px",
        textAlign:"center", position:"relative",
        overflow:"hidden",
        boxShadow:"0 4px 24px rgba(255,112,67,0.25)",
      }}>
        <div style={{position:"absolute",top:-30,left:-30,width:120,height:120,borderRadius:"50%",background:"rgba(255,255,255,0.10)"}}/>
        <div style={{position:"absolute",bottom:-40,right:-20,width:160,height:160,borderRadius:"50%",background:"rgba(255,255,255,0.08)"}}/>
        <div style={{position:"absolute",top:10,right:30,width:60,height:60,borderRadius:"50%",background:"rgba(255,255,255,0.12)"}}/>
        <div style={{position:"relative",zIndex:1}}>
          <div style={{fontSize:44,marginBottom:6}}>📚🏃</div>
          <h1 style={{
            color:"#fff",fontSize:"clamp(22px,5vw,32px)",
            fontWeight:900,margin:0,letterSpacing:"-0.5px",
            textShadow:"0 2px 8px rgba(0,0,0,0.15)",
          }}>용대초등학교 독서 마라톤</h1>
          <div style={{color:"rgba(255,255,255,0.85)",fontSize:14,marginTop:8,fontWeight:500}}>
            🎯 목표: <strong style={{color:"#fff"}}>50권</strong> · 현재 참여자 {participants.length}명
          </div>
          <div style={{marginTop:14}}>
            {isAdmin ? (
              <div style={{display:"inline-flex",alignItems:"center",gap:8}}>
                <span style={{
                  background:"rgba(255,255,255,0.25)",backdropFilter:"blur(4px)",
                  color:"#fff",padding:"5px 14px",borderRadius:20,
                  fontSize:13,fontWeight:700,border:"1px solid rgba(255,255,255,0.4)",
                }}>🔓 관리자 모드</span>
                <button onClick={handleLogout} style={{
                  background:"rgba(0,0,0,0.2)",color:"rgba(255,255,255,0.9)",
                  border:"1px solid rgba(255,255,255,0.3)",borderRadius:20,
                  padding:"5px 14px",fontSize:12,fontWeight:600,cursor:"pointer",
                }}>로그아웃</button>
              </div>
            ) : (
              <button onClick={() => setShowLoginModal(true)} style={{
                background:"rgba(255,255,255,0.18)",backdropFilter:"blur(4px)",
                color:"rgba(255,255,255,0.9)",border:"1px solid rgba(255,255,255,0.35)",
                borderRadius:20,padding:"5px 16px",fontSize:13,fontWeight:600,cursor:"pointer",
              }}>🔐 관리자 로그인</button>
            )}
          </div>
        </div>
      </div>

      <div style={{maxWidth:600,margin:"0 auto",padding:"0 16px"}}>

        {/* 관리자 전용 추가 버튼 */}
        {isAdmin && (
          <div style={{textAlign:"center",margin:"28px 0 16px"}}>
            <button
              onClick={() => setShowAddModal(true)}
              style={{
                background:"linear-gradient(135deg,#43a047,#66bb6a)",
                color:"#fff",border:"none",borderRadius:40,padding:"14px 36px",
                fontSize:16,fontWeight:700,cursor:"pointer",
                boxShadow:"0 4px 16px rgba(67,160,71,0.35)",
                display:"inline-flex",alignItems:"center",gap:8,
                transition:"transform 0.15s",
              }}
              onMouseEnter={e => e.currentTarget.style.transform="scale(1.04)"}
              onMouseLeave={e => e.currentTarget.style.transform="scale(1)"}
            >
              <span style={{fontSize:20}}>➕</span> 추가하기
            </button>
          </div>
        )}

        {/* 읽기 전용 안내 */}
        {!isAdmin && participants.length > 0 && (
          <div style={{
            margin:"18px 0 14px",padding:"10px 16px",
            background:"rgba(255,152,0,0.08)",
            border:"1px solid rgba(255,152,0,0.2)",
            borderRadius:12,textAlign:"center",
            fontSize:13,color:"#b26a00",fontWeight:600,
          }}>
            👀 현재 읽기 전용 모드입니다
          </div>
        )}

        {/* 순위 목록 */}
        {participants.length === 0 ? (
          <div style={{textAlign:"center",padding:"60px 20px",color:"#aaa"}}>
            <div style={{fontSize:56,marginBottom:12}}>📖</div>
            <div style={{fontSize:18,fontWeight:700,color:"#bbb"}}>아직 참여자가 없어요</div>
            <div style={{fontSize:14,marginTop:6,color:"#ccc"}}>
              {isAdmin ? "위의 추가하기 버튼으로 참여자를 등록하세요!" : "관리자가 참여자를 등록하면 여기에 표시됩니다."}
            </div>
          </div>
        ) : (
          <>
            {/* 1등 스포트라이트 */}
            {sorted[0] && (
              <div style={{
                background:"linear-gradient(135deg,#fffde7,#fff8e1)",
                border:"2px solid #ffd54f",borderRadius:20,
                padding:"20px 24px",marginBottom:16,
                marginTop: isAdmin ? 0 : 4,
                boxShadow:"0 4px 20px rgba(255,193,7,0.2)",
                display:"flex",alignItems:"center",gap:16,
                position:"relative",overflow:"hidden",
              }}>
                <div style={{position:"absolute",top:-10,right:-10,fontSize:80,opacity:0.08}}>🏆</div>
                <div style={{
                  width:52,height:52,borderRadius:"50%",
                  background:"linear-gradient(135deg,#ffd700,#ff8f00)",
                  display:"flex",alignItems:"center",justifyContent:"center",
                  fontSize:26,color:"#fff",
                  boxShadow:"0 3px 10px rgba(255,160,0,0.4)",flexShrink:0,
                }}>🥇</div>
                <div style={{flex:1}}>
                  <div style={{fontWeight:800,fontSize:20,color:"#5d4037"}}>{sorted[0].name}</div>
                  <div style={{display:"flex",alignItems:"center",gap:3,marginTop:4,flexWrap:"wrap"}}>
                    {Array.from({length:MAX_BOOKS}).map((_,i) => (
                      <div key={i} style={{
                        width:8,height:8,borderRadius:2,
                        background: i < sorted[0].books ? "#ff8f00" : "#ffe082",
                        transition:"background 0.3s",
                      }}/>
                    ))}
                  </div>
                  <div style={{fontSize:13,color:"#a07000",marginTop:4,fontWeight:600}}>
                    {sorted[0].books} / {MAX_BOOKS}권 완독
                  </div>
                </div>
                <div style={{fontSize:28,fontWeight:900,color:"#ff8f00"}}>{sorted[0].books}권</div>
              </div>
            )}

            <div style={{display:"flex",flexDirection:"column",gap:10}}>
              {sorted.map((p, idx) => {
                const color = getColor(idx);
                const pct = (p.books / MAX_BOOKS) * 100;
                const isEditing = editingId === p.id;
                const medals = ["🥇","🥈","🥉"];
                return (
                  <div key={p.id} style={{
                    background:"#fff",borderRadius:16,
                    padding:"14px 18px",
                    boxShadow:"0 2px 12px rgba(0,0,0,0.07)",
                    border:`1.5px solid ${color.bg}`,
                    display:"flex",alignItems:"center",gap:14,
                  }}>
                    <div style={{
                      width:36,height:36,borderRadius:10,
                      background:color.bg,color:color.text,
                      display:"flex",alignItems:"center",justifyContent:"center",
                      fontWeight:800,fontSize:idx<3?20:15,flexShrink:0,
                    }}>
                      {idx < 3 ? medals[idx] : idx+1}
                    </div>

                    <div style={{flex:1,minWidth:0}}>
                      <div style={{fontWeight:700,fontSize:16,color:"#333",marginBottom:6}}>{p.name}</div>
                      <div style={{height:8,borderRadius:8,background:"#f0f0f0",overflow:"hidden"}}>
                        <div style={{
                          height:"100%",width:`${pct}%`,
                          background:`linear-gradient(90deg,${color.accent},${color.accent}cc)`,
                          borderRadius:8,
                          transition:"width 0.6s cubic-bezier(0.34,1.56,0.64,1)",
                          minWidth:p.books>0?8:0,
                        }}/>
                      </div>
                      <div style={{fontSize:12,color:"#999",marginTop:3}}>{p.books} / {MAX_BOOKS}권</div>
                    </div>

                    {isAdmin ? (
                      isEditing ? (
                        <div style={{display:"flex",alignItems:"center",gap:6,flexShrink:0}}>
                          <input
                            type="number" min={0} max={MAX_BOOKS}
                            value={editValue}
                            onChange={e => setEditValue(e.target.value)}
                            onKeyDown={e => { if(e.key==="Enter") handleEditSave(p.id); if(e.key==="Escape") setEditingId(null); }}
                            autoFocus
                            style={{
                              width:60,padding:"6px 8px",
                              border:`2px solid ${color.accent}`,
                              borderRadius:8,fontSize:15,fontWeight:700,
                              color:color.text,textAlign:"center",outline:"none",
                            }}
                          />
                          <span style={{fontSize:13,color:"#888"}}>권</span>
                          {/* ✅ 저장 버튼 */}
                          <button onClick={() => handleEditSave(p.id)} style={{
                            background:"linear-gradient(135deg,#43a047,#66bb6a)",
                            color:"#fff", border:"none", borderRadius:8,
                            padding:"7px 14px", fontSize:13, fontWeight:800,
                            cursor:"pointer",
                            boxShadow:"0 2px 8px rgba(67,160,71,0.35)",
                            display:"flex", alignItems:"center", gap:4,
                          }}>
                            💾 저장
                          </button>
                          <button onClick={() => setEditingId(null)} style={{
                            background:"#f0f0f0",color:"#888",
                            border:"none",borderRadius:8,
                            padding:"7px 10px",fontSize:13,cursor:"pointer",
                          }}>✕</button>
                        </div>
                      ) : (
                        <div style={{display:"flex",alignItems:"center",gap:8,flexShrink:0}}>
                          {savedFlash===p.id && (
                            <span style={{
                              fontSize:12,color:"#43a047",fontWeight:700,
                              animation:"fadeIn 0.2s ease",
                            }}>✅ 저장됨!</span>
                          )}
                          <div style={{fontWeight:800,fontSize:18,color:color.text,minWidth:36,textAlign:"right"}}>
                            {p.books}
                          </div>
                          <button onClick={() => handleEditStart(p)} style={{
                            background:color.bg,
                            border:`1.5px solid ${color.accent}`,
                            borderRadius:10,padding:"6px 14px",
                            fontSize:13,fontWeight:700,color:color.text,cursor:"pointer",
                            transition:"transform 0.1s",
                          }}
                          onMouseEnter={e => e.currentTarget.style.transform="scale(1.05)"}
                          onMouseLeave={e => e.currentTarget.style.transform="scale(1)"}
                          >
                            독서량 업데이트
                          </button>
                        </div>
                      )
                    ) : (
                      <div style={{
                        fontWeight:800,fontSize:20,
                        color:color.text,flexShrink:0,
                        minWidth:40,textAlign:"right",
                      }}>
                        {p.books}<span style={{fontSize:13,fontWeight:600,marginLeft:2}}>권</span>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </>
        )}
      </div>

      {showLoginModal && (
        <AdminLoginModal
          onClose={() => setShowLoginModal(false)}
          onSuccess={() => { setIsAdmin(true); setShowLoginModal(false); }}
        />
      )}
      {showAddModal && isAdmin && (
        <AddParticipantModal
          participants={participants}
          onClose={() => setShowAddModal(false)}
          onAdd={handleAddParticipant}
        />
      )}

      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;600;700;800;900&display=swap');
        * { box-sizing: border-box; }
        input[type=number]::-webkit-outer-spin-button,
        input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        @keyframes slideUp {
          from { transform: translateY(30px); opacity: 0; }
          to { transform: translateY(0); opacity: 1; }
        }
        @keyframes shake {
          0%,100% { transform: translateX(0); }
          20%,60% { transform: translateX(-8px); }
          40%,80% { transform: translateX(8px); }
        }
        @keyframes fadeIn {
          from { opacity: 0; transform: scale(0.8); }
          to { opacity: 1; transform: scale(1); }
        }
      `}</style>
    </div>
  );
}