// Screens 20-22: Reminders, Notifications, Help & chat

// ═════════════════════════════════════════════════════════════
// 20) MEDICINE REMINDERS / SCHEDULE
// ═════════════════════════════════════════════════════════════
function ScreenReminders() {
  const schedule = [
    { time: '08:00 AM', label: 'Morning · After breakfast', meds: [
      { name: 'Metformin SR 500mg', dose: '1 tab', hue: 'blue', taken: true },
      { name: 'Atorvastatin 10mg',  dose: '1 tab', hue: 'mint', taken: true },
    ]},
    { time: '01:30 PM', label: 'Lunch', meds: [
      { name: 'Metformin SR 500mg', dose: '1 tab', hue: 'blue', taken: true },
    ]},
    { time: '06:30 PM', label: 'Evening · 30 min before dinner', meds: [
      { name: 'Pan-D', dose: '1 cap', hue: 'mint', taken: false, due: true },
      { name: 'Vitamin D3 60K', dose: '1 cap · weekly', hue: 'amber', taken: false, due: true },
    ]},
    { time: '10:00 PM', label: 'Bedtime', meds: [
      { name: 'Metformin SR 500mg', dose: '1 tab', hue: 'blue', taken: false },
    ]},
  ];
  return (
    <div className="screen" style={{ height: '100%', overflow: 'auto', background: C.ink50, paddingTop: 50, paddingBottom: 110 }}>
      <div style={{ padding: '8px 20px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 6px rgba(11,31,77,0.06)' }}>
          <IconChevL size={20} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 18, fontWeight: 700, color: C.ink900, letterSpacing: -0.02 }}>Medicine reminders</div>
          <div style={{ fontSize: 12, color: C.ink500 }}>Today, Wed 28 May</div>
        </div>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 6px rgba(11,31,77,0.06)' }}>
          <IconPlus size={20} style={{ color: C.blue600 }} />
        </div>
      </div>

      {/* Adherence ring */}
      <div style={{
        margin: '14px 20px 0', padding: 18, borderRadius: 20,
        background: `linear-gradient(160deg, ${C.navy800}, ${C.blue600})`,
        color: 'white', display: 'flex', alignItems: 'center', gap: 16, position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', right: -40, top: -30, width: 140, height: 140, borderRadius: 100, background: 'rgba(255,255,255,0.07)' }}/>
        {/* SVG ring */}
        <div style={{ position: 'relative', width: 86, height: 86 }}>
          <svg viewBox="0 0 86 86" width="86" height="86">
            <circle cx="43" cy="43" r="36" stroke="rgba(255,255,255,0.18)" strokeWidth="9" fill="none" />
            <circle cx="43" cy="43" r="36" stroke={C.mint500} strokeWidth="9" fill="none"
              strokeDasharray={`${226 * 0.6} 226`} strokeDashoffset="0"
              strokeLinecap="round" transform="rotate(-90 43 43)" />
          </svg>
          <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
            <div className="mono" style={{ fontSize: 20, fontWeight: 700 }}>60%</div>
            <div style={{ fontSize: 9, opacity: 0.8 }}>TODAY</div>
          </div>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 700 }}>3 of 5 doses taken</div>
          <div style={{ fontSize: 12, opacity: 0.85, marginTop: 4 }}>2 doses due at <span style={{ fontWeight: 700 }}>6:30 PM</span></div>
          <div style={{ fontSize: 11, opacity: 0.7, marginTop: 2 }}>14-day streak · keep going!</div>
        </div>
      </div>

      {/* Week strip */}
      <div style={{ padding: '14px 20px 0', display: 'flex', justifyContent: 'space-between', gap: 6 }}>
        {[
          { d: 'M', n: 26, p: 100, today: false },
          { d: 'T', n: 27, p: 80,  today: false },
          { d: 'W', n: 28, p: 60,  today: true  },
          { d: 'T', n: 29, p: 0,   today: false, future: true },
          { d: 'F', n: 30, p: 0,   today: false, future: true },
          { d: 'S', n: 31, p: 0,   today: false, future: true },
          { d: 'S', n: 1,  p: 0,   today: false, future: true },
        ].map((day, i) => (
          <div key={i} style={{
            flex: 1, padding: '8px 4px', borderRadius: 12, textAlign: 'center',
            background: day.today ? C.blue600 : 'white',
            color: day.today ? 'white' : (day.future ? C.ink400 : C.ink900),
          }}>
            <div style={{ fontSize: 10, opacity: 0.7, fontWeight: 600 }}>{day.d}</div>
            <div className="mono" style={{ fontSize: 14, fontWeight: 700, marginTop: 2 }}>{day.n}</div>
            {!day.future && (
              <div style={{ marginTop: 4, height: 3, background: day.today ? 'rgba(255,255,255,0.3)' : C.ink100, borderRadius: 2, overflow: 'hidden' }}>
                <div style={{ width: day.p + '%', height: '100%', background: day.today ? 'white' : C.mint500 }}/>
              </div>
            )}
          </div>
        ))}
      </div>

      {/* Schedule */}
      <SectionHeader title="Today's schedule" action={null} />
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {schedule.map((slot, si) => (
          <div key={si}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 8 }}>
              <div className="mono" style={{ fontSize: 14, fontWeight: 700, color: slot.meds.some(m => m.due) ? C.blue600 : C.ink700 }}>{slot.time}</div>
              <div style={{ fontSize: 11, color: C.ink500 }}>{slot.label}</div>
              {slot.meds.some(m => m.due) && <span className="pill" style={{ background: C.blue50, color: C.blue600, padding: '2px 8px', fontSize: 9 }}>NOW</span>}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {slot.meds.map((m, mi) => (
                <div key={mi} style={{
                  background: 'white', borderRadius: 14, padding: 12,
                  display: 'flex', alignItems: 'center', gap: 12,
                  opacity: m.taken ? 0.62 : 1,
                  border: m.due ? `2px solid ${C.blue600}` : '2px solid transparent',
                }}>
                  <ProductPlaceholder hue={m.hue} w={40} h={40} radius={10} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 700, color: C.ink900, textDecoration: m.taken ? 'line-through' : 'none' }}>{m.name}</div>
                    <div style={{ fontSize: 11, color: C.ink500, marginTop: 2 }}>{m.dose}</div>
                  </div>
                  {m.taken ? (
                    <div style={{ width: 28, height: 28, borderRadius: 14, background: C.mint500, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <IconCheck size={16} />
                    </div>
                  ) : (
                    <button style={{
                      background: m.due ? C.blue600 : 'white',
                      color: m.due ? 'white' : C.blue600,
                      border: m.due ? 'none' : `1.5px solid ${C.blue300}`,
                      borderRadius: 10, padding: '8px 12px', fontSize: 11, fontWeight: 700,
                    }}>Mark taken</button>
                  )}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      <BottomNav active="profile" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 21) NOTIFICATIONS
// ═════════════════════════════════════════════════════════════
function ScreenNotifications() {
  const notifs = [
    { group: 'Today', items: [
      { kind: 'order', title: 'Your order is being packed', sub: '#JN-2841-09 · 3 items · est 6:40 PM', time: '5:55 PM', unread: true, Icon: IconBox, hue: 'blue' },
      { kind: 'rx', title: 'Rx verified by Dr. Mehta', sub: '"Looks good. Refill safe to dispense."', time: '5:48 PM', unread: true, Icon: IconRx, hue: 'mint' },
      { kind: 'reminder', title: '6:30 PM — Time for Pan-D', sub: '1 capsule, 30 min before dinner', time: '6:30 PM', unread: false, Icon: IconClock, hue: 'amber' },
    ]},
    { group: 'Yesterday', items: [
      { kind: 'offer', title: '20% off on vitamins this week', sub: 'Use code VIT20 · ends Sunday', time: '11:24 AM', unread: false, Icon: IconStar, hue: 'amber' },
      { kind: 'refill', title: 'Time to refill Metformin SR', sub: '3 days of stock left', time: '9:00 AM', unread: false, Icon: IconRx, hue: 'blue' },
    ]},
    { group: 'This week', items: [
      { kind: 'doctor', title: 'Dr. Priya replied to your follow-up', sub: '"Continue current dosage..."', time: 'Mon, 3:12 PM', unread: false, Icon: IconUser, hue: 'rose' },
    ]},
  ];
  const palettes = {
    blue: { bg: C.blue50, fg: C.blue600 },
    mint: { bg: C.mint100, fg: C.mint500 },
    amber:{ bg: C.amber100, fg: C.amber500 },
    rose: { bg: C.rose100, fg: C.rose500 },
  };
  return (
    <div className="screen" style={{ height: '100%', overflow: 'auto', background: C.ink50, paddingTop: 50, paddingBottom: 110 }}>
      <div style={{ padding: '8px 20px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 6px rgba(11,31,77,0.06)' }}>
          <IconChevL size={20} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 18, fontWeight: 700, color: C.ink900, letterSpacing: -0.02 }}>Notifications</div>
          <div style={{ fontSize: 12, color: C.ink500 }}>2 unread</div>
        </div>
        <span style={{ fontSize: 12, fontWeight: 700, color: C.blue600 }}>Mark all read</span>
      </div>

      {/* Filter row */}
      <div style={{ display: 'flex', gap: 8, padding: '14px 20px 4px' }}>
        {['All', 'Orders', 'Reminders', 'Offers'].map((f, i) => (
          <div key={f} style={{
            padding: '7px 13px', borderRadius: 10,
            background: i === 0 ? C.navy800 : 'white', color: i === 0 ? 'white' : C.ink700,
            fontSize: 12, fontWeight: 600,
            boxShadow: i === 0 ? 'none' : '0 1px 3px rgba(11,31,77,0.05)',
          }}>{f}</div>
        ))}
      </div>

      {/* Groups */}
      <div style={{ padding: '14px 20px 0', display: 'flex', flexDirection: 'column', gap: 18 }}>
        {notifs.map((g, gi) => (
          <div key={gi}>
            <div style={{ fontSize: 11, fontWeight: 700, color: C.ink500, letterSpacing: 0.5, marginBottom: 8 }}>{g.group.toUpperCase()}</div>
            <div style={{ background: 'white', borderRadius: 18, overflow: 'hidden' }}>
              {g.items.map((n, ni, a) => {
                const p = palettes[n.hue];
                return (
                  <div key={ni} style={{
                    display: 'flex', alignItems: 'flex-start', gap: 12, padding: 14,
                    borderBottom: ni < a.length - 1 ? `1px solid ${C.ink100}` : 'none',
                    background: n.unread ? C.blue25 : 'white',
                    position: 'relative',
                  }}>
                    {n.unread && <div style={{ position: 'absolute', top: 18, right: 14, width: 8, height: 8, borderRadius: 4, background: C.blue600 }}/>}
                    <div style={{
                      width: 40, height: 40, borderRadius: 12, background: p.bg, color: p.fg,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}><n.Icon size={20} /></div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: n.unread ? 700 : 600, color: C.ink900, paddingRight: n.unread ? 14 : 0 }}>{n.title}</div>
                      <div style={{ fontSize: 12, color: C.ink500, marginTop: 2, lineHeight: 1.4 }}>{n.sub}</div>
                      <div className="mono" style={{ fontSize: 10, color: C.ink400, marginTop: 6 }}>{n.time}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>

      <BottomNav active="home" />
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 22) HELP & SUPPORT (Chat)
// ═════════════════════════════════════════════════════════════
function ScreenHelpChat() {
  return (
    <div className="screen" style={{ height: '100%', overflow: 'hidden', background: 'white', paddingTop: 50, paddingBottom: 0, display: 'flex', flexDirection: 'column' }}>
      {/* App bar */}
      <div style={{ padding: '8px 20px 12px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: `1px solid ${C.ink100}` }}>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: C.ink50, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <IconChevL size={20} />
        </div>
        <div style={{
          width: 40, height: 40, borderRadius: 20, position: 'relative',
          background: `linear-gradient(160deg, ${C.blue400}, ${C.blue600})`,
          color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700,
        }}>
          J
          <div style={{ position: 'absolute', bottom: 0, right: 0, width: 12, height: 12, borderRadius: 6, background: C.mint500, border: '2px solid white' }}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: C.ink900, letterSpacing: -0.01 }}>Janaushadhi Care</div>
          <div style={{ fontSize: 11, color: C.mint500, fontWeight: 600 }}>● Replies in seconds</div>
        </div>
        <div style={{ width: 38, height: 38, borderRadius: 19, background: C.ink50, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 5.5a2 2 0 0 1 2-2h2l2 4-2 1.5a11 11 0 0 0 5 5l1.5-2 4 2v2a2 2 0 0 1-2 2A14 14 0 0 1 4 5.5z"/>
          </svg>
        </div>
      </div>

      {/* Chat area */}
      <div style={{ flex: 1, padding: '16px 20px 12px', background: C.ink50, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {/* Day chip */}
        <div style={{ textAlign: 'center' }}>
          <span className="pill" style={{ background: 'white', color: C.ink500, padding: '4px 12px', fontSize: 11 }}>Today, 5:42 PM</span>
        </div>

        {/* Bot — greeting */}
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, maxWidth: '85%' }}>
          <div style={{ width: 28, height: 28, borderRadius: 14, background: `linear-gradient(160deg, ${C.blue400}, ${C.blue600})`, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 12, flexShrink: 0 }}>J</div>
          <div style={{ background: 'white', borderRadius: '18px 18px 18px 4px', padding: '10px 14px', boxShadow: '0 1px 3px rgba(11,31,77,0.05)' }}>
            <div style={{ fontSize: 13, color: C.ink900, lineHeight: 1.45 }}>Hi Aarav! How can we help today?</div>
          </div>
        </div>

        {/* Bot — quick reply chips */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginLeft: 36 }}>
          {['Track my order', 'Rx not verified', 'Wrong item received', 'Refund status', 'Other'].map((q, i) => (
            <div key={i} style={{
              padding: '7px 12px', background: 'white', borderRadius: 12,
              fontSize: 12, fontWeight: 600, color: C.blue600,
              border: `1px solid ${C.blue100}`,
            }}>{q}</div>
          ))}
        </div>

        {/* User msg */}
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <div style={{ background: C.blue600, color: 'white', borderRadius: '18px 18px 4px 18px', padding: '10px 14px', maxWidth: '75%', boxShadow: '0 4px 10px rgba(27,91,255,0.20)' }}>
            <div style={{ fontSize: 13, lineHeight: 1.45 }}>Where is my order #JN-2841-09?</div>
          </div>
        </div>

        {/* Bot reply with card */}
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, maxWidth: '85%' }}>
          <div style={{ width: 28, height: 28, borderRadius: 14, background: `linear-gradient(160deg, ${C.blue400}, ${C.blue600})`, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 12, flexShrink: 0 }}>J</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, maxWidth: '88%' }}>
            <div style={{ background: 'white', borderRadius: '18px 18px 18px 4px', padding: '10px 14px' }}>
              <div style={{ fontSize: 13, color: C.ink900, lineHeight: 1.45 }}>Your order is being packed at our Indiranagar store and will be on its way in ~10 minutes.</div>
            </div>
            <div style={{ background: 'white', borderRadius: 16, padding: 12, border: `1px solid ${C.ink100}` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: C.blue50, color: C.blue600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <IconTruck size={20} />
                </div>
                <div style={{ flex: 1 }}>
                  <div className="mono" style={{ fontSize: 12, fontWeight: 700, color: C.ink900 }}>#JN-2841-09</div>
                  <div style={{ fontSize: 11, color: C.ink500 }}>Packing now · ETA 6:40 PM</div>
                </div>
              </div>
              <button style={{ marginTop: 10, width: '100%', background: C.blue600, color: 'white', border: 'none', borderRadius: 10, padding: '8px 0', fontSize: 12, fontWeight: 700 }}>Track live</button>
            </div>
          </div>
        </div>

        {/* Typing */}
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8 }}>
          <div style={{ width: 28, height: 28, borderRadius: 14, background: `linear-gradient(160deg, ${C.blue400}, ${C.blue600})`, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 12 }}>J</div>
          <div style={{ background: 'white', borderRadius: '18px 18px 18px 4px', padding: '12px 16px', display: 'flex', gap: 4 }}>
            {[0,1,2].map(i => (
              <div key={i} style={{ width: 7, height: 7, borderRadius: 4, background: C.ink300, opacity: 0.5 + i * 0.2 }}/>
            ))}
          </div>
        </div>
      </div>

      {/* Composer */}
      <div style={{
        padding: '10px 14px 30px', borderTop: `1px solid ${C.ink100}`, background: 'white',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ width: 36, height: 36, borderRadius: 18, background: C.ink50, color: C.ink500, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <IconPlus size={20} />
        </div>
        <div style={{
          flex: 1, padding: '10px 14px', borderRadius: 22, background: C.ink50,
          fontSize: 13, color: C.ink400, display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <span style={{ flex: 1 }}>Type a message…</span>
          <IconCamera size={20} style={{ color: C.ink500 }}/>
        </div>
        <div style={{ width: 40, height: 40, borderRadius: 20, background: C.blue600, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <IconMic size={20} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenReminders, ScreenNotifications, ScreenHelpChat });