/* global React, RIcons, DOCTORS, TODAY_ROUND, JOURNAL_SUMMARY, JOURNAL_TODAY, TRACKER_CATS */
// Home screen — Round hero + journal strip.

const { useState, useEffect } = React;

const STAR_DOTS = [
  { x: 12, y: 18, r: 2, d: 0.0 }, { x: 24, y: 70, r: 1.5, d: 1.4 },
  { x: 40, y: 32, r: 1.5, d: 2.1 }, { x: 58, y: 14, r: 2, d: 0.6 },
  { x: 72, y: 60, r: 1.5, d: 3.0 }, { x: 88, y: 28, r: 2, d: 1.0 },
  { x: 92, y: 76, r: 1.5, d: 2.6 }, { x: 8,  y: 100, r: 1.5, d: 1.7 },
  { x: 50, y: 110, r: 1.5, d: 0.4 }, { x: 78, y: 130, r: 2, d: 2.3 },
];

function Greeting() {
  return (
    <div style={{ padding: '4px 20px 12px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
        <div style={{
          width: 40, height: 40, borderRadius: 999,
          background: "#1a1c4a url('assets/baby-nora.png') center/cover no-repeat",
          boxShadow: '0 0 0 2px rgba(212,212,249,0.12)',
        }} />
        <div>
          <div className="kicker" style={{ marginBottom: 2 }}>Nora · 7 months</div>
          <div className="body-title" style={{ whiteSpace: 'nowrap' }}>Good morning.</div>
        </div>
      </div>
    </div>
  );
}

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

function LogCatIcon({ cat, size = 14 }) {
  const icons = {
    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 icons[cat] || <RIcons.Note size={size} />;
}

function TodayLogSection({ onOpenJournal, onLog }) {
  const s = JOURNAL_SUMMARY;
  const entryCount = JOURNAL_TODAY.length;
  const preview = JOURNAL_TODAY.slice(-3);

  const stats = [
    { count: s.feeds, lbl: 'feeds', color: 'var(--cat-feed)' },
    { count: s.naps, lbl: 'naps', color: 'var(--cat-nap)' },
    { count: s.solids, lbl: 'solids', color: 'var(--cat-solids)' },
    { count: s.cries, lbl: 'fussy', color: 'var(--cat-cry)' },
    { count: s.diapers, lbl: 'diapers', color: 'var(--cat-diaper)' },
  ];

  return (
    <section className="home-log" aria-label="Today's log">
      <div className="home-log-head">
        <div>
          <h3>Today&apos;s log</h3>
          <p className="sub">{entryCount} entries · last updated 8:42 PM</p>
        </div>
        <button type="button" className="home-log-view" onClick={onOpenJournal}>
          View all
          <RIcons.ChevronRight size={14} />
        </button>
      </div>

      <div className="home-log-stats">
        {stats.map((c, i) => (
          <button key={i} type="button" className="home-log-stat" onClick={onOpenJournal}>
            <span className="home-log-stat-dot" style={{ background: c.color }} />
            <span className="home-log-stat-num">{c.count}</span>
            <span className="home-log-stat-lbl">{c.lbl}</span>
          </button>
        ))}
        {s.tempFlag && (
          <button type="button" className="home-log-stat home-log-stat--flag" onClick={onOpenJournal}>
            <span className="home-log-stat-dot" style={{ background: 'var(--cat-temp)' }} />
            <span className="home-log-stat-num">100.4°</span>
            <span className="home-log-stat-lbl">temp</span>
          </button>
        )}
      </div>

      <div className="home-log-preview">
        {preview.map((e) => {
          const color = logCatColor(e.cat);
          const cat = TRACKER_CATS.find(t => t.id === e.cat);
          return (
            <button
              key={e.id}
              type="button"
              className={`home-log-row ${e.flag ? 'home-log-row--flag' : ''}`}
              onClick={onOpenJournal}
            >
              <span className="home-log-row-time">{e.time} {e.ampm}</span>
              <span className="home-log-row-icon" style={{ background: color + '18', color }}>
                <LogCatIcon cat={e.cat} size={15} />
              </span>
              <span className="home-log-row-body">
                <span className="home-log-row-cat" style={{ color }}>{cat ? cat.label : e.cat}</span>
                <span className="home-log-row-note">{e.note}</span>
              </span>
              {e.flag && <span className="home-log-row-flag" />}
            </button>
          );
        })}
      </div>

      <div className="home-log-foot">
        <button type="button" className="home-log-logbtn" onClick={onLog}>
          <RIcons.Plus size={16} />
          Log something
        </button>
      </div>
    </section>
  );
}

function DirectConsultCard({ onConsult }) {
  const providers = ['patel', 'senior', 'okafor'].map((id) => DOCTORS[id]);
  return (
    <div onClick={onConsult} style={{
      margin: '0 16px 14px', padding: '16px 18px',
      background: 'var(--surface)', borderRadius: 20,
      border: '1px solid rgba(212,212,249,0.08)',
      cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 14,
      transition: '160ms ease-out', boxShadow: '0 8px 24px rgba(0,0,0,0.2)',
    }}>
      <div style={{ display: 'flex', flexShrink: 0 }} aria-hidden="true">
        {providers.map((p, i) => (
          <div
            key={p.id}
            style={{
              width: 40, height: 40, borderRadius: 999,
              background: `var(--surface-elevated) url('${p.ava}') center/cover no-repeat`,
              border: '2px solid var(--background)',
              marginLeft: i === 0 ? 0 : -14,
              boxShadow: '0 4px 12px rgba(0,0,0,0.28)',
              position: 'relative', zIndex: 3 - i,
            }}
          />
        ))}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 700, color: '#fff', marginBottom: 2 }}>Talk to a doctor</div>
        <div style={{ fontSize: 12, color: 'var(--foreground-muted)', lineHeight: 1.4 }}>No setup needed — just start a conversation.</div>
      </div>
      <div style={{ color: 'var(--foreground-muted)', flexShrink: 0 }} aria-hidden="true">
        <RIcons.ChevronRight size={16} />
      </div>
    </div>
  );
}

function TodayRoundCard({ onOpen, onDiscuss }) {
  const doc = DOCTORS[TODAY_ROUND.by];
  const handleDiscuss = (e) => {
    e.stopPropagation();
    onDiscuss();
  };
  return (
    <div className="round-hero" onClick={() => { window.haptics?.trigger('light'); onOpen(); }} role="button">
      <div className="meta">
        <div className="kicker-row">
          <span className="dot" />
          Morning Round · Today
        </div>
        <div className="chev"><RIcons.ChevronRight size={16} /></div>
      </div>
      <h2>Dr. Patel reviewed Nora last night.</h2>
      <p className="sub">All clear — nothing to flag.</p>
      <div className="vitals">
        <div className="v">
          <span className="ic"><RIcons.Heart size={14} /></span>
          <span className="lbl">HR avg</span>
          <span className="val">102</span>
        </div>
        <div className="v">
          <span className="ic"><RIcons.Lungs size={14} /></span>
          <span className="lbl">SpO₂</span>
          <span className="val">97%</span>
        </div>
        <div className="v">
          <span className="ic"><RIcons.Moon size={14} /></span>
          <span className="lbl">Sleep</span>
          <span className="val">10h 12m</span>
        </div>
      </div>
      <div className="signer">
        <div className="ava" style={{ backgroundImage: `url('${doc.ava}')` }} />
        <div className="who">
          <b>Signed by {doc.short}</b>
          <span className="m">{doc.role}</span>
        </div>
        <button
          type="button"
          className="round-hero-chat"
          onClick={handleDiscuss}
        >
          <RIcons.Chat size={14} />
          Discuss this round
        </button>
      </div>
    </div>
  );
}

function PushNotif({ show, onTap }) {
  return (
    <div className={`notif ${show ? 'show' : ''}`} onClick={onTap}>
      <div className="icon">F</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="title">
          <span>Your round is ready</span>
          <span className="time">now</span>
        </div>
        <div className="body">Reviewed by Dr. Patel · all clear.</div>
      </div>
    </div>
  );
}

function HomeScreen({ onOpenRound, onDiscussRound, onOpenJournal, onLog, onConsult, nwSlot }) {
  return (
    <div className="screen-enter" data-screen-label="Home">
      <div className="header-glow" />
      <div className="stars" aria-hidden="true">
        {STAR_DOTS.map((s, i) => (
          <span key={i} style={{
            left: s.x + '%', top: s.y + 'px',
            width: s.r + 'px', height: s.r + 'px',
            animationDelay: s.d + 's',
          }} />
        ))}
      </div>

      <div style={{ position: 'relative', zIndex: 5, paddingTop: 6 }}>
        <Greeting />
        {nwSlot}
        <TodayRoundCard onOpen={onOpenRound} onDiscuss={onDiscussRound} />
        <DirectConsultCard onConsult={onConsult} />
        <TodayLogSection onOpenJournal={onOpenJournal} onLog={onLog} />
      </div>
    </div>
  );
}

function BottomNav({ tab, onTab }) {
  const items = [
    { id: 'home',       label: 'Home',  icon: <RIcons.Stethoscope size={20} /> },
    { id: 'chat',       label: 'Chat',  icon: <RIcons.Chat size={20} /> },
    { id: 'nightwatch', label: 'Care+', icon: <RIcons.Sparkles size={20} /> },
    { id: 'journal',    label: 'Log',   icon: <RIcons.Journal size={20} /> },
  ];
  return (
    <nav className="bottom-nav" aria-label="Main">
      {items.map((it) => (
        <button
          key={it.id}
          type="button"
          className={`nav-btn ${tab === it.id ? 'active' : ''}`}
          aria-label={it.label}
          aria-current={tab === it.id ? 'page' : undefined}
          onClick={() => { window.haptics?.trigger('selection'); onTab(it.id); }}
        >
          <span className="nav-btn-icon">{it.icon}</span>
          <span className="nav-btn-label">{it.label}</span>
        </button>
      ))}
    </nav>
  );
}

const RHome = { HomeScreen, BottomNav, PushNotif };