// admin-board.jsx — 관리자 추천 종목/코멘트 섹션 + 인라인 편집기
//
// 데이터는 localStorage 'dmr-admin-picks' 키에 저장 (현재 기기에만 반영).
// - AdminBoard : 페이지 7에 표시되는 읽기 전용 카드 + "편집" 버튼
// - AdminPanel : 편집 버튼 누르면 열리는 오버레이 폼 (비밀번호 없음)
//
// window.ADMIN_PICKS 에 항상 최신값 캐시, 'admin-picks-updated' 이벤트 dispatch.

const ADMIN_STORAGE_KEY = 'dmr-admin-picks';

function loadAdminPicks() {
  try {
    const raw = localStorage.getItem(ADMIN_STORAGE_KEY);
    if (!raw) return { updatedAt: null, picks: [], commentary: '' };
    const data = JSON.parse(raw);
    return {
      updatedAt: data.updatedAt || null,
      picks: Array.isArray(data.picks) ? data.picks : [],
      commentary: typeof data.commentary === 'string' ? data.commentary : '',
    };
  } catch (e) {
    return { updatedAt: null, picks: [], commentary: '' };
  }
}

function saveAdminPicks(next) {
  try {
    localStorage.setItem(ADMIN_STORAGE_KEY, JSON.stringify(next));
  } catch (e) { /* storage quota / private mode — ignore */ }
  window.ADMIN_PICKS = next;
  window.dispatchEvent(new CustomEvent('admin-picks-updated'));
}

// ── 페이지 7 카드 ─────────────────────────────────────
function AdminBoard() {
  const { dark, lang } = useTheme();
  const p = palette(dark);

  const [state, setState] = React.useState(() =>
    window.ADMIN_PICKS && (window.ADMIN_PICKS.picks?.length || window.ADMIN_PICKS.commentary)
      ? window.ADMIN_PICKS
      : loadAdminPicks()
  );
  const [editing, setEditing] = React.useState(false);

  React.useEffect(() => {
    const sync = () => setState({
      updatedAt: window.ADMIN_PICKS?.updatedAt || null,
      picks: window.ADMIN_PICKS?.picks || [],
      commentary: window.ADMIN_PICKS?.commentary || '',
    });
    window.addEventListener('admin-picks-updated', sync);
    return () => window.removeEventListener('admin-picks-updated', sync);
  }, []);

  const isEmpty = !state.picks.length && !state.commentary;
  const ts = state.updatedAt
    ? new Date(state.updatedAt).toLocaleString(lang==='ko'?'ko-KR':'en-US', {
        year:'numeric', month:'2-digit', day:'2-digit',
        hour:'2-digit', minute:'2-digit', hour12:false,
      })
    : '';

  const editBtnStyle = {
    appearance:'none', border:`1px solid ${p.line2}`,
    background: p.surface, color: p.text,
    padding:'6px 12px', borderRadius: 10,
    cursor:'pointer', fontSize:11, fontWeight:600,
    fontFamily:'"Inter Tight", system-ui', letterSpacing:'0.02em',
  };

  return (
    <div style={{ padding:'4px 0 14px' }} role="region" aria-label={lang==='ko'?'관리자 추천':'Editor Picks'}>
      <Card>
        <div style={{
          display:'flex', alignItems:'center', justifyContent:'space-between',
          gap:10, marginBottom: 14,
        }}>
          <div style={{ minWidth:0 }}>
            <div style={{
              fontSize:10, letterSpacing:'0.16em', color:p.faint,
              fontFamily:'"JetBrains Mono", monospace',
            }}>{lang==='ko'?'관리자 의견':'EDITORIAL'}</div>
            <div style={{
              fontSize:18, fontWeight:600, color:p.text, marginTop:2,
              fontFamily:'"Inter Tight", system-ui', letterSpacing:-0.4,
            }}>{lang==='ko'?'오늘의 추천':"Today's Picks"}</div>
          </div>
          <button
            onClick={()=>setEditing(true)}
            aria-label={lang==='ko'?'관리자 편집 열기':'Open editor'}
            style={editBtnStyle}
          >
            {lang==='ko'?'편집':'Edit'}
          </button>
        </div>

        {isEmpty && (
          <div style={{
            padding:'24px 10px', textAlign:'center',
            color:p.faint, fontSize:12, letterSpacing:'0.08em',
            fontFamily:'"JetBrains Mono", monospace',
          }}>
            {lang==='ko'
              ? '우측 상단 [편집]을 눌러 추천 종목과 코멘트를 작성하세요.'
              : 'Tap [Edit] to write picks and commentary.'}
          </div>
        )}

        {state.picks.length > 0 && (
          <ul style={{
            listStyle:'none', margin:0, padding:0,
            display:'flex', flexDirection:'column', gap:10,
          }}>
            {state.picks.map((pk, i) => (
              <li key={i} style={{
                background: p.surface2, borderRadius: 14,
                padding:'12px 14px',
                display:'flex', flexDirection:'column', gap:4,
              }}>
                <div style={{ display:'flex', alignItems:'baseline', gap:10, flexWrap:'wrap' }}>
                  <span style={{
                    fontSize:15, fontWeight:600, color:p.text,
                    fontFamily:'"Inter Tight", system-ui',
                  }}>{pk.name || pk.sym}</span>
                  {pk.sym && pk.name && (
                    <span style={{
                      fontSize:10, color:p.faint, letterSpacing:'0.1em',
                      fontFamily:'"JetBrains Mono", monospace',
                    }}>{pk.sym}</span>
                  )}
                  {typeof pk.target === 'number' && (
                    <span style={{
                      marginLeft:'auto', fontSize:11, color:p.muted,
                      fontFamily:'"JetBrains Mono", monospace',
                    }}>
                      {lang==='ko'?'목표':'TGT'} {pk.target.toLocaleString('en-US', {maximumFractionDigits: pk.target>=1000?0:2})}
                    </span>
                  )}
                </div>
                {pk.comment && (
                  <div style={{ fontSize:12.5, color:p.muted, lineHeight:1.5 }}>{pk.comment}</div>
                )}
              </li>
            ))}
          </ul>
        )}

        {state.commentary && (
          <div style={{
            marginTop: state.picks.length ? 16 : 0,
            padding:'14px 2px 2px',
            borderTop: state.picks.length ? `0.5px solid ${p.line}` : 'none',
          }}>
            <div style={{
              fontSize:10, letterSpacing:'0.16em', color:p.faint,
              fontFamily:'"JetBrains Mono", monospace', marginBottom:8,
            }}>{lang==='ko'?'코멘트':'COMMENTARY'}</div>
            <div style={{ fontSize:13, color:p.text, lineHeight:1.65, whiteSpace:'pre-wrap' }}>
              {state.commentary}
            </div>
          </div>
        )}

        <div style={{
          marginTop: 16, paddingTop: 12,
          borderTop:`0.5px solid ${p.line}`,
          fontSize:9, letterSpacing:'0.14em', color:p.faint,
          fontFamily:'"JetBrains Mono", monospace',
          display:'flex', justifyContent:'space-between', alignItems:'center', gap:8,
        }}>
          <span>{lang==='ko'?'로컬 저장':'LOCAL'}</span>
          <span>{ts}</span>
          <span>{state.picks.length} {lang==='ko'?'종목':'PICKS'}</span>
        </div>
      </Card>

      {editing && <AdminPanel initial={state} onClose={()=>setEditing(false)}/>}
    </div>
  );
}

// ── 편집 오버레이 ─────────────────────────────────────
function AdminPanel({ initial, onClose }) {
  const { dark, lang } = useTheme();
  const p = palette(dark);

  const [picks, setPicks]           = React.useState(initial?.picks || []);
  const [commentary, setCommentary] = React.useState(initial?.commentary || '');
  const [toast, setToast]           = React.useState('');

  const addPick = () =>
    setPicks((a) => [...a, { sym:'', name:'', comment:'', target:null }]);
  const updatePick = (i, field, val) =>
    setPicks((a) => a.map((p, idx) => idx === i ? { ...p, [field]: val } : p));
  const removePick = (i) =>
    setPicks((a) => a.filter((_, idx) => idx !== i));

  const save = () => {
    const cleaned = picks
      .map((pk) => ({
        sym:     (pk.sym ?? '').toString().trim().slice(0, 20),
        name:    (pk.name ?? '').toString().trim().slice(0, 40),
        comment: (pk.comment ?? '').toString().trim().slice(0, 300),
        target:  pk.target === '' || pk.target == null ? null
               : (typeof pk.target === 'number' ? pk.target : Number(pk.target)),
      }))
      .filter((pk) => pk.name || pk.sym);
    const next = {
      updatedAt: new Date().toISOString(),
      picks: cleaned,
      commentary: (commentary || '').trim().slice(0, 3000),
    };
    saveAdminPicks(next);
    setToast(lang==='ko'?'저장되었습니다':'Saved');
    setTimeout(() => { setToast(''); onClose && onClose(); }, 700);
  };

  const inputStyle = {
    width:'100%', boxSizing:'border-box',
    background: p.surface2, color: p.text,
    border:`1px solid ${p.line2}`, borderRadius: 10,
    padding:'8px 10px', fontSize: 13,
    fontFamily:'"Inter Tight", system-ui',
    outline:'none',
  };
  const labelStyle = {
    fontSize: 9, letterSpacing:'0.14em', color: p.faint,
    fontFamily:'"JetBrains Mono", monospace', marginBottom: 4,
  };

  return (
    <div style={{
      position:'fixed', inset:0, zIndex:200,
      background:'rgba(0,0,0,0.55)', backdropFilter:'blur(4px)',
      display:'flex', alignItems:'stretch', justifyContent:'center',
      padding:'20px 10px',
    }}
    role="dialog" aria-modal="true"
    aria-label={lang==='ko'?'관리자 편집':'Editor'}>
      <div style={{
        background: p.bg, color: p.text,
        width:'100%', maxWidth: 520, borderRadius: 18,
        display:'flex', flexDirection:'column',
        boxShadow:'0 20px 48px rgba(0,0,0,0.35)', overflow:'hidden',
      }}>
        {/* header */}
        <div style={{
          padding:'14px 18px', borderBottom:`0.5px solid ${p.line}`,
          display:'flex', alignItems:'center', justifyContent:'space-between',
        }}>
          <div>
            <div style={{
              fontSize:10, letterSpacing:'0.16em', color:p.faint,
              fontFamily:'"JetBrains Mono", monospace',
            }}>EDITOR</div>
            <div style={{
              fontSize:17, fontWeight:600,
              fontFamily:'"Inter Tight", system-ui',
            }}>{lang==='ko'?'추천 종목 · 코멘트 편집':'Picks & Commentary'}</div>
          </div>
          <button onClick={onClose} aria-label={lang==='ko'?'닫기':'Close'} style={{
            width:32, height:32, borderRadius:'50%', border:'none', cursor:'pointer',
            background: p.surface2, color: p.muted,
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            <svg width="12" height="12" viewBox="0 0 14 14" aria-hidden="true">
              <path d="M1 1l12 12M13 1L1 13" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
            </svg>
          </button>
        </div>

        {/* body */}
        <div style={{ flex:1, overflow:'auto', padding:'14px 18px' }}>
          <div style={{
            display:'flex', alignItems:'center', justifyContent:'space-between',
            marginBottom:10,
          }}>
            <div style={{ ...labelStyle, marginBottom:0 }}>
              {lang==='ko'?'추천 종목':'PICKS'} ({picks.length})
            </div>
            <button onClick={addPick} style={{
              border:`1px solid ${p.line2}`, background:'transparent',
              color:p.text, padding:'4px 10px', borderRadius:8,
              cursor:'pointer', fontSize:11, fontWeight:600,
              fontFamily:'"Inter Tight", system-ui',
            }}>+ {lang==='ko'?'추가':'Add'}</button>
          </div>

          <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
            {picks.map((pk, i) => (
              <div key={i} style={{
                background: p.surface, borderRadius: 12,
                padding: 12, border:`1px solid ${p.line}`,
                display:'flex', flexDirection:'column', gap:8,
              }}>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
                  <div>
                    <div style={labelStyle}>{lang==='ko'?'종목명':'NAME'}</div>
                    <input
                      value={pk.name || ''}
                      onChange={(e)=>updatePick(i,'name',e.target.value)}
                      style={inputStyle}
                      placeholder={lang==='ko'?'삼성전자':'Samsung'}
                    />
                  </div>
                  <div>
                    <div style={labelStyle}>{lang==='ko'?'티커':'TICKER'}</div>
                    <input
                      value={pk.sym || ''}
                      onChange={(e)=>updatePick(i,'sym',e.target.value)}
                      style={inputStyle}
                      placeholder="005930 / AAPL"
                    />
                  </div>
                </div>
                <div>
                  <div style={labelStyle}>{lang==='ko'?'목표가 (선택)':'TARGET (optional)'}</div>
                  <input
                    type="number"
                    value={pk.target ?? ''}
                    onChange={(e)=>updatePick(i,'target', e.target.value===''?null:Number(e.target.value))}
                    style={inputStyle}
                    placeholder="92000"
                  />
                </div>
                <div>
                  <div style={labelStyle}>{lang==='ko'?'한 줄 코멘트':'COMMENT'}</div>
                  <textarea
                    value={pk.comment || ''}
                    onChange={(e)=>updatePick(i,'comment',e.target.value)}
                    rows={2}
                    style={{ ...inputStyle, resize:'vertical', lineHeight:1.45 }}
                    placeholder={lang==='ko'?'HBM 수혜, PBR 1.2x 저평가':'HBM beneficiary...'}
                  />
                </div>
                <button onClick={()=>removePick(i)} style={{
                  alignSelf:'flex-end',
                  background:'transparent', border:'none', cursor:'pointer',
                  color: p.inkDown, fontSize:11, fontWeight:600,
                  fontFamily:'"Inter Tight", system-ui',
                }}>{lang==='ko'?'삭제':'Remove'}</button>
              </div>
            ))}
            {picks.length === 0 && (
              <div style={{
                padding:'18px 10px', textAlign:'center',
                color:p.faint, fontSize:12,
                fontFamily:'"JetBrains Mono", monospace', letterSpacing:'0.06em',
              }}>
                {lang==='ko'?'[+추가] 눌러 첫 종목을 추가하세요':'Tap [+Add] to begin'}
              </div>
            )}
          </div>

          {/* commentary */}
          <div style={{ marginTop: 18 }}>
            <div style={labelStyle}>{lang==='ko'?'코멘트 (전체)':'COMMENTARY'}</div>
            <textarea
              value={commentary}
              onChange={(e)=>setCommentary(e.target.value)}
              rows={6}
              style={{ ...inputStyle, resize:'vertical', lineHeight:1.55 }}
              placeholder={lang==='ko'
                ? '이번 주는 반도체·2차전지 주목. 원·달러 환율 안정화에 따른 외국인 수급 개선 기대.'
                : 'This week focus: semiconductors and batteries...'
              }
            />
            <div style={{
              marginTop:4, textAlign:'right', fontSize:10, color:p.faint,
              fontFamily:'"JetBrains Mono", monospace',
            }}>{commentary.length} / 3000</div>
          </div>

          {toast && (
            <div style={{
              marginTop:12, fontSize:12, color:p.inkUp,
              textAlign:'center',
            }}>{toast}</div>
          )}
        </div>

        {/* footer */}
        <div style={{
          padding:'12px 18px', borderTop:`0.5px solid ${p.line}`,
          display:'flex', gap:8, justifyContent:'space-between', alignItems:'center',
        }}>
          <span style={{
            fontSize:9, letterSpacing:'0.14em', color:p.faint,
            fontFamily:'"JetBrains Mono", monospace',
          }}>
            {lang==='ko'?'이 기기에만 저장됩니다':'Saved to this device only'}
          </span>
          <div style={{ display:'flex', gap:8 }}>
            <button onClick={onClose} style={{
              padding:'9px 14px', border:`1px solid ${p.line2}`,
              background:'transparent', color:p.text,
              borderRadius:10, cursor:'pointer', fontSize:13, fontWeight:600,
              fontFamily:'"Inter Tight", system-ui',
            }}>{lang==='ko'?'취소':'Cancel'}</button>
            <button onClick={save} style={{
              padding:'9px 18px',
              background: p.text, color: p.bg, border:'none',
              borderRadius:10, cursor:'pointer',
              fontSize:13, fontWeight:700,
              fontFamily:'"Inter Tight", system-ui',
            }}>{lang==='ko'?'저장':'Save'}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AdminBoard, AdminPanel, loadAdminPicks, saveAdminPicks });