// ============ Daily Journal page ============
const JournalPage = () => {
  const { t, lang } = useI18n();
  const [sel, setSel] = useState(new Date(2026, 3, 21));
  const [cur, setCur] = useState(new Date(2026, 3, 1));
  const [entries, setEntries] = useState(() => {
    try { return JSON.parse(localStorage.getItem('edgebook:journal') || '{}'); } catch { return {}; }
  });
  const key = sel.toISOString().slice(0,10);
  const entry = entries[key] || { market: '', lessons: '', plan: '', mood: 3 };
  const set = (patch) => {
    const next = { ...entries, [key]: { ...entry, ...patch } };
    setEntries(next);
  };
  const save = () => {
    try { localStorage.setItem('edgebook:journal', JSON.stringify(entries)); } catch {}
  };

  // Calendar cells for date picker
  const y = cur.getFullYear(), m = cur.getMonth();
  const first = new Date(y, m, 1);
  const last = new Date(y, m+1, 0);
  const startDow = (first.getDay() + 6) % 7;
  const daysInMonth = last.getDate();
  const prevMonthDays = new Date(y, m, 0).getDate();
  const cells = [];
  for (let i=0;i<startDow;i++){ cells.push({ d: new Date(y, m-1, prevMonthDays - startDow + i + 1), out:true }); }
  for (let i=1;i<=daysInMonth;i++){ cells.push({ d: new Date(y, m, i), out:false }); }
  while (cells.length < 42) {
    const last = cells[cells.length-1].d;
    cells.push({ d: new Date(last.getFullYear(), last.getMonth(), last.getDate()+1), out:true });
  }

  const dowLabels = lang==='mn' ? ['Да','Мя','Лх','Пү','Ба','Бя','Ня'] : ['Mo','Tu','We','Th','Fr','Sa','Su'];
  const monthName = cur.toLocaleDateString(lang==='mn'?'mn-MN':'en-US',{month:'long',year:'numeric'});
  const selName = sel.toLocaleDateString(lang==='mn'?'mn-MN':'en-US',{weekday:'long',month:'long',day:'numeric',year:'numeric'});

  const entryCount = Object.keys(entries).filter(k => k.startsWith(`${y}-${String(m+1).padStart(2,'0')}`)).length;

  return (
    <div className="page">
      <PageHead
        title={t('nav_journal')}
        sub={t('journal_sub')}
        actions={<>
          <span className="tiny muted">{t('entries_this_month')}: <span className="mono" style={{fontWeight:600,color:'var(--text)'}}>{entryCount}</span></span>
          <button className="btn btn-primary" onClick={save}><Icon name="check" size={13}/> {t('save')}</button>
        </>}
      />

      <div className="journal-shell" style={{display:'grid',gridTemplateColumns:'300px 1fr',gap:16,alignItems:'start'}}>
        {/* Left: mini date picker */}
        <div>
          <div className="card" style={{padding:14}}>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:10}}>
              <button className="icon-btn" onClick={()=>setCur(new Date(y, m-1, 1))}><Icon name="chevron-left" size={14}/></button>
              <div style={{fontWeight:600,fontSize:13,letterSpacing:'-0.005em'}}>{monthName}</div>
              <button className="icon-btn" onClick={()=>setCur(new Date(y, m+1, 1))}><Icon name="chevron-right" size={14}/></button>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:2,marginBottom:4}}>
              {dowLabels.map(d => <div key={d} style={{fontSize:10,color:'var(--text-3)',textAlign:'center',padding:'4px 0',fontFamily:'JetBrains Mono'}}>{d}</div>)}
            </div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:2}}>
              {cells.map((c,i) => {
                const k = c.d.toISOString().slice(0,10);
                const has = !!entries[k];
                const isSel = k === key;
                const isToday = c.d.toDateString() === new Date(2026,3,21).toDateString();
                return (
                  <button key={i} onClick={()=>setSel(c.d)} style={{
                    padding:'7px 0',fontSize:12,borderRadius:6,
                    background: isSel ? '#10b981' : has ? 'rgba(16,185,129,0.12)' : 'transparent',
                    color: isSel ? '#042f1c' : c.out ? 'var(--text-3)' : isToday ? 'var(--text)' : 'var(--text-2)',
                    fontFamily:'JetBrains Mono',
                    fontWeight: isSel ? 700 : has ? 600 : 400,
                    opacity: c.out && !has ? 0.4 : 1,
                    border: isToday && !isSel ? '1px solid #333' : 'none',
                  }}>{c.d.getDate()}</button>
                );
              })}
            </div>
          </div>
          <div className="card" style={{padding:14,marginTop:12}}>
            <div className="tiny muted" style={{textTransform:'uppercase',letterSpacing:'0.08em',fontWeight:500,marginBottom:8}}>Recent</div>
            {Object.keys(entries).sort().reverse().slice(0,5).map(k => (
              <button key={k} onClick={()=>setSel(new Date(k+'T00:00:00'))} style={{display:'block',width:'100%',textAlign:'left',padding:'8px 10px',borderRadius:6,marginBottom:2,background:k===key?'#1a1a1a':'transparent'}}>
                <div className="mono tiny" style={{color:'var(--text)'}}>{k}</div>
                <div className="tiny muted" style={{marginTop:2,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{(entries[k].market||entries[k].lessons||'—').slice(0,40)}</div>
              </button>
            ))}
            {Object.keys(entries).length===0 && <div className="tiny muted">No entries yet</div>}
          </div>
        </div>

        {/* Right: editor */}
        <div>
          <div className="card" style={{padding:'18px 20px 22px'}}>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:16}}>
              <div>
                <div style={{fontSize:16,fontWeight:600,letterSpacing:'-0.01em'}}>{selName}</div>
                <div className="tiny muted" style={{marginTop:2}}>{entries[key] ? '✓ Saved' : '○ New entry'}</div>
              </div>
              <div className="seg">
                <button className="on">Write</button>
                <button>Preview</button>
              </div>
            </div>

            <label className="label" style={{fontSize:13,fontWeight:600,color:'var(--text)',marginBottom:8,display:'flex',alignItems:'center',gap:8}}>
              <span style={{width:4,height:14,background:'#3b82f6',borderRadius:2}}/>{t('market_obs')}
            </label>
            <textarea className="input textarea" style={{width:'100%',minHeight:110}} placeholder={t('journal_ph_market')} value={entry.market} onChange={e=>set({market:e.target.value})}/>

            <label className="label" style={{fontSize:13,fontWeight:600,color:'var(--text)',margin:'20px 0 8px',display:'flex',alignItems:'center',gap:8}}>
              <span style={{width:4,height:14,background:'#f59e0b',borderRadius:2}}/>{t('lessons_learned')}
            </label>
            <textarea className="input textarea" style={{width:'100%',minHeight:110}} placeholder={t('journal_ph_lessons')} value={entry.lessons} onChange={e=>set({lessons:e.target.value})}/>

            <label className="label" style={{fontSize:13,fontWeight:600,color:'var(--text)',margin:'20px 0 8px',display:'flex',alignItems:'center',gap:8}}>
              <span style={{width:4,height:14,background:'#8b5cf6',borderRadius:2}}/>{t('mood')} <span className="mono muted" style={{marginLeft:4}}>{entry.mood}/5 · {t('mood_labels')[entry.mood-1]}</span>
            </label>
            <input type="range" className="slider" min="1" max="5" value={entry.mood} onChange={e=>set({mood:+e.target.value})}/>
            <div style={{display:'flex',justifyContent:'space-between',fontSize:11,color:'var(--text-3)',marginTop:6,fontFamily:'JetBrains Mono'}}>
              {t('mood_labels').map((l,i)=><span key={i} style={{color: entry.mood===i+1?'var(--text)':undefined}}>{l}</span>)}
            </div>

            <label className="label" style={{fontSize:13,fontWeight:600,color:'var(--text)',margin:'20px 0 8px',display:'flex',alignItems:'center',gap:8}}>
              <span style={{width:4,height:14,background:'#10b981',borderRadius:2}}/>{t('tomorrow_plan')}
            </label>
            <textarea className="input textarea" style={{width:'100%',minHeight:110}} placeholder={t('journal_ph_plan')} value={entry.plan} onChange={e=>set({plan:e.target.value})}/>

            <div style={{display:'flex',justifyContent:'flex-end',gap:8,marginTop:20}}>
              <button className="btn btn-ghost">{t('cancel')}</button>
              <button className="btn btn-primary" onClick={save}><Icon name="check" size={13}/> {t('save')}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.JournalPage = JournalPage;