/* global React, RIcons, TRACKER_CATS, JOURNAL_TODAY, JOURNAL_SUMMARY, WEEK_STRIP, JOURNAL_BUNDLE_HINTS, LOG_DETAIL_OPTS, SOLIDS_FOODS, COACHING_INSIGHTS, PATTERNS_TRENDS, PAST_BRIEFS */
// Journal, habit tracker, patterns — RoundsFuture only.

const { useState: useJ, useEffect: useJE, useRef: useJR } = React;

function catColor(id) {
  const c = TRACKER_CATS.find(t => t.id === id);
  return c ? c.color : 'var(--foreground-muted)';
}

function CatIcon({ cat, size = 15 }) {
  const map = {
    feed: <RIcons.Bottle size={size} />, solids: <RIcons.Apple size={size} />,
    cry: <RIcons.Cry size={size} />, diaper: <RIcons.Diaper size={size} />,
    temp: <RIcons.Thermometer size={size} />, nap: <RIcons.Moon size={size} />,
    med: <RIcons.Pill size={size} />, bath: <RIcons.Bath size={size} />,
    note: <RIcons.Note size={size} />,
  };
  return map[cat] || <RIcons.Note size={size} />;
}

/* ── Week strip ── */
function WeekStrip() {
  return (
    <div className="week-strip">
      {WEEK_STRIP.map((d, i) => (
        <div key={i} className={`week-day ${d.today ? 'today' : ''}`}>
          <div className="wd-dow">{d.dow}</div>
          <div className="wd-num">{d.date}</div>
          <div className="wd-dots">
            {d.dots.slice(0, 3).map((cat, j) => (
              <div key={j} className="wd-dot" style={{ background: catColor(cat) }} />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

/* ── Day summary chips ── */
function DaySummary() {
  const s = JOURNAL_SUMMARY;
  const chips = [
    { color: 'var(--cat-feed)',   count: s.feeds,   lbl: 'feeds' },
    { color: 'var(--cat-nap)',    count: s.naps,    lbl: 'naps' },
    { color: 'var(--cat-solids)', count: s.solids,  lbl: 'solids' },
    { color: 'var(--cat-cry)',    count: s.cries,   lbl: 'cries' },
    { color: 'var(--cat-diaper)', count: s.diapers, lbl: 'diapers' },
  ];
  return (
    <div className="day-summary">
      {chips.map((c, i) => (
        <div key={i} className="day-summary-chip">
          <div className="dsc-dot" style={{ background: c.color }} />
          <span className="dsc-count">{c.count}</span>
          <span className="dsc-lbl">{c.lbl}</span>
        </div>
      ))}
      {JOURNAL_SUMMARY.tempFlag && (
        <div className="day-summary-chip" style={{ borderColor: 'rgba(247,200,123,0.28)' }}>
          <div className="dsc-dot" style={{ background: 'var(--cat-temp)' }} />
          <span className="dsc-count" style={{ color: 'var(--cat-temp)' }}>100.4°</span>
          <span className="dsc-lbl">temp</span>
        </div>
      )}
    </div>
  );
}

/* ── Rhythms-style coaching insight card ── */
function InsightCard({ insight }) {
  return (
    <div className="insight-card">
      <div className="ic-h">{insight.title}</div>
      <div className="ic-b">{insight.body}</div>
      <div className="ic-cite">
        <div className="ic-av" />
        {insight.cite}
      </div>
    </div>
  );
}

/* ── Journal → bundle hints ── */
function JournalBundleHints() {
  return (
    <div className="journal-suggests" style={{ margin: '0 16px 14px' }}>
      <div className="js-h">
        <RIcons.Sparkles size={12} />
        Flagged for tomorrow's round
      </div>
      {JOURNAL_BUNDLE_HINTS.map((h, i) => (
        <div key={i} className="js-item">
          <div className="jsi-dot" style={{ background: h.color }} />
          <span>{h.text}</span>
        </div>
      ))}
    </div>
  );
}

/* ── Timeline entry ── */
function TimelineEntry({ entry }) {
  const color = catColor(entry.cat);
  const cat = TRACKER_CATS.find(t => t.id === entry.cat);
  return (
    <div className={`timeline-entry ${entry.flag ? 'flagged' : ''}`}>
      <div className="te-time">{entry.time}<br />{entry.ampm}</div>
      <div className="te-icon" style={{ background: color + '18' }}>
        <span style={{ color }}><CatIcon cat={entry.cat} size={16} /></span>
      </div>
      <div className="te-body">
        <div className="te-cat" style={{ color }}>{cat ? cat.label : entry.cat}</div>
        <div className="te-note">{entry.note}</div>
      </div>
      {entry.flag && <div className="te-flag" />}
    </div>
  );
}

/* ── Full journal screen ── */
function JournalScreen({ onBack, onLog, onPatterns }) {
  const groups = ['Morning', 'Afternoon', 'Evening'];
  return (
    <div className="journal-page pg" data-screen-label="Journal">
      <div className="pg-top">
        <button className="doc-iconbtn" onClick={onBack}><RIcons.ChevronLeft /></button>
        <div className="doc-pill" style={{ color: 'var(--primary)', background: 'rgba(157,227,205,0.10)', borderColor: 'rgba(157,227,205,0.25)' }}>
          Today · 15 entries
        </div>
        <button onClick={onPatterns} style={{
          background: 'none', border: 'none', cursor: 'pointer', font: 'inherit',
          fontSize: 12, fontWeight: 700, letterSpacing: '0.06em',
          color: 'var(--accent)',
        }}>Trends →</button>
      </div>

      <WeekStrip />
      <DaySummary />

      <JournalBundleHints />

      <div className="journal-timeline">
        {groups.map(group => {
          const entries = JOURNAL_TODAY.filter(e => e.group === group);
          if (!entries.length) return null;
          return (
            <div key={group}>
              <div className="timeline-group-label">{group}</div>
              {entries.map(e => <TimelineEntry key={e.id} entry={e} />)}
            </div>
          );
        })}
      </div>

    </div>
  );
}

/* ── Patterns & Trends screen ── */
function TrendSparkline({ data, color }) {
  const w = 280, h = 34, padX = 4, padY = 4;
  const minV = Math.min(...data), maxV = Math.max(...data);
  const span = Math.max(1, maxV - minV);
  const step = (w - padX * 2) / (data.length - 1);
  const pts = data.map((v, i) => {
    const x = padX + step * i;
    const y = padY + (h - padY * 2) * (1 - (v - minV) / span);
    return x + ',' + y;
  }).join(' ');
  return (
    <svg className="trend-spark" viewBox={'0 0 ' + w + ' ' + h} preserveAspectRatio="none">
      <polyline points={pts} fill="none" stroke={color || 'var(--primary)'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      <polyline points={pts} fill="none" stroke={color || 'var(--primary)'} strokeWidth="10" strokeLinecap="round" strokeLinejoin="round" opacity="0.08" />
    </svg>
  );
}

function PatternsScreen({ onBack }) {
  return (
    <div className="patterns-page pg" data-screen-label="Patterns">
      <div className="pg-top">
        <button className="doc-iconbtn" onClick={onBack}><RIcons.ChevronLeft /></button>
        <div className="doc-pill" style={{ color: 'var(--accent)', background: 'rgba(125,128,230,0.10)', borderColor: 'rgba(125,128,230,0.28)' }}>
          Patterns · last 14 days
        </div>
        <div style={{ width: 36 }} />
      </div>

      <div className="pg-title">Nora's trends.</div>
      <div className="pg-sub">The longer you log, the smarter this gets.</div>

      {/* Trend cards */}
      <div style={{ padding: '0 0 4px' }}>
        <div className="kicker" style={{ padding: '0 20px 10px' }}>Trends</div>
        {PATTERNS_TRENDS.map(t => (
          <div key={t.id} className="trend-card">
            <div className="tc-head">
              <div className="tc-title">{t.label}</div>
              <div className={'tc-delta ' + t.dir}>{t.delta}</div>
            </div>
            <div className="tc-sub">{t.sub} · now <strong style={{ color: '#fff' }}>{t.value}</strong></div>
            <TrendSparkline data={t.spark} color={t.dir === 'flat' ? 'var(--accent)' : 'var(--primary)'} />
          </div>
        ))}
      </div>

      {/* Saved coaching */}
      <div style={{ padding: '14px 0 4px' }}>
        <div className="kicker" style={{ padding: '0 20px 10px' }}>Saved coaching</div>
        {COACHING_INSIGHTS.map(ci => <InsightCard key={ci.id} insight={ci} />)}
      </div>

      {/* Past morning briefs */}
      <div style={{ padding: '14px 0 4px' }}>
        <div className="kicker" style={{ padding: '0 20px 10px' }}>Past morning rounds</div>
        {PAST_BRIEFS.map((b, i) => (
          <div key={i} className="brief-row-p">
            <div className="brp-date">
              <div className="brd">{b.date}</div>
              <div className="brm">{b.month}</div>
            </div>
            <div className="brp-body">
              <div className="brt">{b.title}</div>
              <div className="brs">{b.sub}</div>
            </div>
            <div style={{ color: 'var(--foreground-muted)' }}><RIcons.ChevronRight size={15} /></div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ── Feed sub-panel: Breast ── */
function BreastPanel() {
  const [active, setActive] = useJ('L');
  const [running, setRunning] = useJ(false);
  const [secs, setSecs] = useJ({ L: 0, R: 0 });
  const tickRef = useJR(null);

  function fmt(n) {
    return String(Math.floor(n / 60)).padStart(2, '0') + ':' + String(n % 60).padStart(2, '0');
  }
  function toggle() {
    if (running) {
      clearInterval(tickRef.current);
      setRunning(false);
    } else {
      setRunning(true);
      tickRef.current = setInterval(() => {
        setSecs(prev => ({ ...prev, [active]: prev[active] + 1 }));
      }, 1000);
    }
  }
  useJE(() => () => clearInterval(tickRef.current), []);

  return (
    <div>
      <div className="breast-sides">
        {['L', 'R'].map(side => (
          <div key={side} className={'breast-side ' + (active === side ? 'on' : '')} onClick={() => setActive(side)}>
            <div className="bs-letter">{side === 'L' ? 'Left' : 'Right'}</div>
            <div className="bs-timer">{fmt(secs[side])}</div>
            <div className="bs-lbl">{side === 'L' ? 'Left' : 'Right'}</div>
          </div>
        ))}
      </div>
      <button onClick={toggle} style={{
        width: '100%', height: 44, borderRadius: 8, border: 'none', fontFamily: 'inherit',
        background: running ? 'rgba(157,227,205,0.15)' : 'var(--primary)',
        color: running ? 'var(--primary)' : 'var(--on-primary)',
        fontWeight: 700, fontSize: 15, cursor: 'pointer', marginBottom: 14,
        outline: running ? '1px solid var(--primary)' : 'none',
        transition: '180ms',
      }}>
        {running ? '⏸ Stop timer' : '▶ Start timer'}
      </button>
    </div>
  );
}

/* ── Feed sub-panel: Bottle ── */
function BottlePanel({ oz, setOz }) {
  return (
    <div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--foreground-muted)', marginBottom: 8 }}>How much?</div>
      <div className="oz-stepper">
        <button className="oz-btn" onClick={() => setOz(o => Math.max(0.5, Math.round((o - 0.5) * 2) / 2))}>−</button>
        <div className="oz-val-wrap">
          <div className="oz-val-num">{oz.toFixed(1)}</div>
          <div className="oz-val-unit">oz</div>
        </div>
        <button className="oz-btn" onClick={() => setOz(o => Math.round((o + 0.5) * 2) / 2)}>+</button>
      </div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--foreground-muted)', marginBottom: 8 }}>What's in it?</div>
      <QuickChips opts={['Breast milk', 'Formula', 'Mixed']} solo />
    </div>
  );
}

/* ── Feed sub-panel: Pump ── */
function PumpPanel({ oz, setOz }) {
  return (
    <div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--foreground-muted)', marginBottom: 8 }}>How much pumped?</div>
      <div className="oz-stepper">
        <button className="oz-btn" onClick={() => setOz(o => Math.max(0.5, Math.round((o - 0.5) * 2) / 2))}>−</button>
        <div className="oz-val-wrap">
          <div className="oz-val-num">{oz.toFixed(1)}</div>
          <div className="oz-val-unit">oz</div>
        </div>
        <button className="oz-btn" onClick={() => setOz(o => Math.round((o + 0.5) * 2) / 2)}>+</button>
      </div>
      <div className="seg-row">
        {['Left', 'Both', 'Right'].map((s, i) => (
          <SegChipSingle key={s} label={s} defaultOn={i === 1} />
        ))}
      </div>
    </div>
  );
}

/* ── Feed sub-panel: Solids ── */
function SolidsPanel() {
  const [newFood, setNewFood] = useJ(false);
  return (
    <div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--foreground-muted)', marginBottom: 8 }}>What did Nora eat?</div>
      <QuickChips opts={SOLIDS_FOODS} multi />
      <div className="nfw-row">
        <button className={'nfw-sw ' + (newFood ? 'on' : '')} style={{ background: newFood ? 'var(--primary)' : 'rgba(212,212,249,0.18)' }} onClick={() => setNewFood(v => !v)}>
          <div className="knob" />
        </button>
        <div className="nfw-text">
          <strong>First time trying this?</strong> We'll quietly watch for gas, rash, or stool changes over the next 3 days and flag anything worth a pediatrician's eye.
        </div>
      </div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--foreground-muted)', marginBottom: 8 }}>How much?</div>
      <div className="seg-row">
        {['A few bites', 'Half', 'Full serving'].map((s, i) => (
          <SegChipSingle key={s} label={s} defaultOn={i === 0} />
        ))}
      </div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--foreground-muted)', marginBottom: 8 }}>Reaction?</div>
      <QuickChips opts={['Loved it', 'Refused', 'Gassy', 'Spit-up', 'Rash']} multi />
    </div>
  );
}

/* ── Diaper sub-panel ── */
function DiaperPanel() {
  const [redBlack, setRedBlack] = useJ(false);
  return (
    <div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--foreground-muted)', marginBottom: 8 }}>What was in it?</div>
      <div className="breast-sides" style={{ gap: 8 }}>
        {[{ label: '💧 Wet', id: 'wet' }, { label: '💩 Dirty', id: 'dirty' }, { label: '💧💩 Both', id: 'both' }].map(o => (
          <div key={o.id} className="breast-side" style={{ flex: 1, padding: '12px 0 10px' }}>
            <div style={{ fontSize: 18 }}>{o.label.split(' ')[0]}</div>
            <div className="bs-lbl" style={{ marginTop: 5 }}>{o.label.split(' ').slice(1).join(' ')}</div>
          </div>
        ))}
      </div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--foreground-muted)', marginBottom: 8 }}>Consistency</div>
      <QuickChips opts={['Normal', 'Loose', 'Hard', 'Mucousy']} solo />
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--foreground-muted)', marginBottom: 8, marginTop: 4 }}>Color</div>
      <QuickChips opts={['Yellow', 'Green', 'Brown', 'Red / black']} solo onSelect={v => setRedBlack(v === 'Red / black')} />
      {redBlack && (
        <div className="reaction-alert">
          Red or black stool can signal something a pediatrician should see. Consider starting a visit if you see this more than once.
        </div>
      )}
    </div>
  );
}

/* ── Shared chip helpers ── */
function QuickChips({ opts, solo, onSelect }) {
  const [sel, setSel] = useJ(solo ? opts[0] : []);
  function pick(o) {
    if (solo) { setSel(o); if (onSelect) onSelect(o); }
    else { setSel(prev => prev.includes(o) ? prev.filter(x => x !== o) : [...prev, o]); }
  }
  function isOn(o) { return solo ? sel === o : sel.includes(o); }
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7, marginBottom: 14 }}>
      {opts.map(o => (
        <button key={o} onClick={() => pick(o)} style={{
          display: 'inline-flex', alignItems: 'center', padding: '7px 12px',
          borderRadius: 999, fontFamily: 'inherit', fontSize: 13, fontWeight: 600,
          cursor: 'pointer', transition: '140ms',
          background: isOn(o) ? 'rgba(157,227,205,0.14)' : 'var(--surface)',
          border: '1px solid ' + (isOn(o) ? 'rgba(157,227,205,0.4)' : 'rgba(212,212,249,0.08)'),
          color: isOn(o) ? 'var(--primary)' : 'var(--foreground)',
        }}>{o}</button>
      ))}
    </div>
  );
}

function SegChipSingle({ label, defaultOn }) {
  const [on, setOn] = useJ(defaultOn || false);
  return (
    <button className={'seg-chip ' + (on ? 'on' : '')} onClick={() => setOn(v => !v)}>{label}</button>
  );
}

/* ── Log entry sheet — Rhythms-enhanced ── */
function LogEntrySheet({ open, onClose }) {
  const [cat, setCat] = useJ('feed');
  const [feedTab, setFeedTab] = useJ('breast');
  const [oz, setOz] = useJ(4.0);
  const [note, setNote] = useJ('');
  const [saved, setSaved] = useJ(false);
  const [timeStr, setTimeStr] = useJ('');

  useJE(() => {
    if (open) {
      setTimeStr(new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }));
    } else {
      setCat('feed'); setFeedTab('breast'); setOz(4.0); setNote(''); setSaved(false);
    }
  }, [open]);

  function save() {
    setSaved(true);
    setTimeout(() => onClose && onClose(), 1300);
  }

  const color = catColor(cat);
  const catLabel = (TRACKER_CATS.find(t => t.id === cat) || {}).label || cat;

  function renderFeedPanel() {
    if (feedTab === 'breast') return <BreastPanel />;
    if (feedTab === 'bottle') return <BottlePanel oz={oz} setOz={setOz} />;
    if (feedTab === 'pump') return <PumpPanel oz={oz} setOz={setOz} />;
    if (feedTab === 'solids') return <SolidsPanel />;
    return null;
  }

  return (
    <>
      <div className={`scrim ${open ? 'open' : ''}`} onClick={onClose} />
      <div className={`sheet sheet--log ${open ? 'open' : ''}`}>
        <div className="sheet-handle" />
        {saved ? (
          <div className="log-sheet-saved-wrap">
            <div className="log-saved">
              <div className="ls-check"><RIcons.Check size={28} /></div>
              <h3>Logged to journal</h3>
              <p>{catLabel} entry saved.<br />It'll be included in tomorrow's round.</p>
            </div>
          </div>
        ) : (
          <div className="log-sheet-flow">
            <div className="log-sheet-top">
              <div className="log-sheet-title">Log to Nora's journal</div>

              <div className="log-cats">
                {TRACKER_CATS.map(c => (
                  <button key={c.id} className={'log-cat ' + (cat === c.id ? 'on' : '')}
                    style={cat === c.id ? { borderColor: c.color, color: c.color, background: c.color + '18' } : {}}
                    onClick={() => setCat(c.id)}>
                    <span style={{ color: cat === c.id ? c.color : 'var(--foreground-muted)', display: 'inline-flex' }}>
                      <CatIcon cat={c.id} size={14} />
                    </span>
                    {c.label}
                  </button>
                ))}
              </div>

              <div className="log-time">
                <span className="lt-lbl">Time</span>
                <span className="lt-val">Now · {timeStr}</span>
              </div>
            </div>

            <div className="log-sheet-panel">
              {cat === 'feed' && (
                <>
                  <div className="feed-tabs">
                    {['breast', 'bottle', 'pump', 'solids'].map(t => (
                      <button key={t} className={'feed-tab ' + (feedTab === t ? 'on' : '')} onClick={() => setFeedTab(t)}>
                        {t.charAt(0).toUpperCase() + t.slice(1)}
                      </button>
                    ))}
                  </div>
                  {renderFeedPanel()}
                </>
              )}

              {cat === 'diaper' && <DiaperPanel />}

              {cat === 'temp' && (
                <div>
                  <div className="log-panel-label">Temperature range</div>
                  <QuickChips opts={['Under 99°F', '99–100.3°F', '100.4–101°F', 'Over 101°F']} solo />
                </div>
              )}

              {cat === 'cry' && (
                <div>
                  <div className="log-panel-label">How resolved?</div>
                  <QuickChips opts={['Self-soothed', 'Held', 'Fed', 'Pacifier', 'Unknown']} solo />
                </div>
              )}

              {cat === 'nap' && (
                <div>
                  <div className="log-panel-label">Duration</div>
                  <QuickChips opts={['Under 30 min', '30–60 min', '60–90 min', '90+ min']} solo />
                </div>
              )}

              {cat === 'med' && (
                <div>
                  <div className="log-panel-label">Medicine</div>
                  <QuickChips opts={['Tylenol', 'Ibuprofen', 'Gripe water', 'Vitamin D', 'Other']} solo />
                </div>
              )}

              {(cat === 'bath' || cat === 'note') && (
                <div className="log-sheet-panel-hint muted">
                  Add details below — optional notes help tomorrow&apos;s round.
                </div>
              )}
            </div>

            <div className="log-sheet-footer">
              <textarea className="log-note" rows={2}
                placeholder={
                  cat === 'temp' ? 'Enter reading…' : cat === 'cry' ? 'Duration, notes…' :
                  cat === 'bath' ? 'Calm, fussy, loved it…' : 'Any notes…'
                }
                value={note}
                onChange={e => setNote(e.target.value)}
              />

              <div className="log-sheet-actions">
                <button type="button" className="log-sheet-cancel" onClick={onClose}>Cancel</button>
                <button type="button" className="log-sheet-save" onClick={save}>
                  <RIcons.Check size={16} />Save to journal
                </button>
              </div>

              <p className="log-sheet-fine">
                Saved entries feed into tomorrow's round automatically.
              </p>
            </div>
          </div>
        )}
      </div>
    </>
  );
}

const RJournal = { JournalScreen, LogEntrySheet, PatternsScreen };