// HomeHelp · Flow 4: My requests dashboard → Notifications → Settings

// ═══════════════════════════════════════════════════════
// 13 · My requests dashboard
// ═══════════════════════════════════════════════════════
function HH_S_Dashboard({ tone = 'neutral' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '14px 20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.8, margin: 0 }}>Requests</h1>
          <button style={{
            width: 40, height: 40, borderRadius: 20, background: HH.ink, color: '#fff',
            border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
          }}><PlusIcon/></button>
        </div>

        <div style={{ padding: '12px 20px 0', display: 'flex', gap: 0, borderBottom: `1px solid ${HH.hairline2}` }}>
          {['Active', 'Scheduled', 'Past'].map((t, i) => (
            <div key={i} style={{
              padding: '12px 14px',
              borderBottom: i === 0 ? `2px solid ${HH.ink}` : '2px solid transparent',
              marginBottom: -1,
              fontSize: 13, fontWeight: i === 0 ? 700 : 500,
              color: i === 0 ? HH.ink : HH.muted, cursor: 'pointer',
            }}>{t}</div>
          ))}
        </div>

        <div style={{ flex: 1, overflow: 'auto' }}>
          {/* Active card */}
          <div style={{ padding: '14px 20px 0' }}>
            <HHCard style={{ overflow: 'hidden' }}>
              <div style={{ padding: '12px 14px 10px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <HHPill size="sm" variant="accent" icon={<span style={{ width: 6, height: 6, borderRadius: 3, background: HH.accent }} />}>
                  &nbsp;En route · arriving 7:42 PM
                </HHPill>
                <span style={{ fontSize: 11, color: HH.muted, fontFamily: HH.fontMono }}>HH-4892-31</span>
              </div>
              <div style={{ display: 'flex', gap: 12, padding: '0 14px 14px' }}>
                <HHPhoto seed="pax-job" h={70} w={70} r={10} label="" />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.2 }}>IKEA Pax wardrobe</div>
                  <div style={{ fontSize: 12, color: HH.muted, marginTop: 2 }}>Today, 7:00 PM · $48</div>
                  <div style={{ marginTop: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
                    <HHAvatar name="Marcus Thompson" size={20} />
                    <span style={{ fontSize: 12, color: HH.ink2 }}>Marcus T.</span>
                  </div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 0, borderTop: `1px solid ${HH.hairline2}` }}>
                <button style={dashAction}><MsgIcon size={16}/> Message</button>
                <button style={{ ...dashAction, borderLeft: `1px solid ${HH.hairline2}` }}>Track ›</button>
              </div>
            </HHCard>
          </div>

          <HHLabel>Up next</HHLabel>
          <HHRow
            left={<div style={{ width: 44, height: 44, borderRadius: 10, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>📺</div>}
            title="65″ TV wall-mount"
            sub="Tomorrow, 10:00 AM · helper TBD"
            right={<HHPill size="sm">Sched</HHPill>}
            onClick={() => {}}
          />
          <HHRow
            left={<div style={{ width: 44, height: 44, borderRadius: 10, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>🪴</div>}
            title="Living room rearrange"
            sub="Sat, May 24 · 2 helpers"
            right={<HHPill size="sm">Sched</HHPill>}
            onClick={() => {}}
          />

          <HHLabel>Recently completed</HHLabel>
          <HHRow
            left={<div style={{ width: 44, height: 44, borderRadius: 10, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>🧺</div>}
            title="Washer hookup"
            sub={<><span>Priya S. · </span><HHStars rating={5} size={10}/><span> · 30 min</span></>}
            right={<span style={{ fontFamily: HH.fontMono, color: HH.ink2 }}>$62</span>}
            onClick={() => {}}
          />
          <HHRow
            left={<div style={{ width: 44, height: 44, borderRadius: 10, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>🔧</div>}
            title="Curtain rods × 3"
            sub={<><span>Marcus T. · </span><HHStars rating={4} size={10}/><span> · 45 min</span></>}
            right={<span style={{ fontFamily: HH.fontMono, color: HH.ink2 }}>$40</span>}
            onClick={() => {}}
            divider={false}
          />
          <div style={{ height: 80 }} />
        </div>

        <HHTabBar active={2} />
      </div>
    </HHPhone>
  );
}

const dashAction = {
  flex: 1, padding: '12px 0', background: 'transparent', border: 'none',
  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
  fontSize: 13, fontWeight: 600, color: HH.ink, cursor: 'pointer', fontFamily: HH.fontSans,
};

// ═══════════════════════════════════════════════════════
// 14 · Notifications inbox
// ═══════════════════════════════════════════════════════
function HH_S_Notifications({ tone = 'neutral' }) {
  const notifs = [
    { d: HH.accent, t: 'Marcus is arriving', s: 'IKEA Pax · 2418 Linden Ave, 4B', when: 'now', read: false },
    { d: HH.accent, t: 'Marcus accepted your request', s: 'ETA 8 min · $48 fixed', when: '5m', read: false },
    { d: HH.trust,  t: 'Booking confirmed', s: 'Sat, May 24 · Living room rearrange', when: '2h', read: false },
    { d: null,      t: 'Rate Priya S.', s: 'Washer hookup · 3 days ago', when: '3d', read: true },
    { d: null,      t: '$10 credit added', s: 'Referral bonus — Jamie joined!', when: '1w', read: true },
    { d: null,      t: 'New helper joined your area', s: 'Tomás R. · ★ 5.0 · 0.6 mi', when: '1w', read: true },
    { d: null,      t: 'Your saved helper is online', s: 'Marcus T. is available tonight', when: '2w', read: true },
  ];
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '14px 20px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.8, margin: 0 }}>Inbox</h1>
          <button style={{
            padding: '8px 12px', borderRadius: 14, background: HH.surfaceAlt, border: 'none',
            fontSize: 12, fontWeight: 600, color: HH.ink, cursor: 'pointer',
          }}>Mark all read</button>
        </div>

        <div style={{ flex: 1, overflow: 'auto' }}>
          <HHLabel>Today</HHLabel>
          {notifs.filter(n => !n.read).map((n, i) => (
            <HHRow key={i}
              left={
                <div style={{ position: 'relative' }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 18,
                    background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: n.d || HH.muted,
                  }}>
                    {n.t.includes('arriv') ? <PinIcon/> : n.t.includes('accept') ? <CheckIcon/> : <BellIcon/>}
                  </div>
                  {n.d && <div style={{ position: 'absolute', right: -2, top: -2, width: 10, height: 10, borderRadius: 5, background: n.d, border: '2px solid #fff' }} />}
                </div>
              }
              title={n.t}
              sub={n.s}
              right={<span style={{ fontSize: 11, color: HH.muted, fontFamily: HH.fontMono }}>{n.when}</span>}
            />
          ))}

          <HHLabel>Earlier</HHLabel>
          {notifs.filter(n => n.read).map((n, i) => (
            <HHRow key={i}
              left={
                <div style={{
                  width: 36, height: 36, borderRadius: 18,
                  background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: HH.muted,
                }}>
                  {n.t.includes('credit') ? <CardIcon/> : n.t.includes('joined') ? <UserIcon/> : n.t.includes('saved') ? <HeartIcon/> : <BellIcon/>}
                </div>
              }
              title={n.t}
              sub={n.s}
              right={<span style={{ fontSize: 11, color: HH.muted, fontFamily: HH.fontMono }}>{n.when}</span>}
            />
          ))}
          <div style={{ height: 80 }} />
        </div>
        <HHTabBar active={3} />
      </div>
    </HHPhone>
  );
}

// ═══════════════════════════════════════════════════════
// 15 · Settings + Saved helpers + Payment
// ═══════════════════════════════════════════════════════
function HH_S_Settings({ tone = 'neutral' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '20px 20px 0' }}>
          <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.8, margin: 0 }}>You</h1>
        </div>

        <div style={{ flex: 1, overflow: 'auto', paddingBottom: 80 }}>
          {/* profile card */}
          <div style={{ padding: '16px 20px 0' }}>
            <HHCard style={{ padding: 16, display: 'flex', gap: 14, alignItems: 'center' }}>
              <HHAvatar name="Alex Reyes" size={56} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 16, fontWeight: 700 }}>Alex Reyes</div>
                <div style={{ fontSize: 12, color: HH.muted, marginTop: 2 }}>alex@reyes.email · 7 bookings</div>
              </div>
              <span style={{ color: HH.muted }}><ChevIcon/></span>
            </HHCard>
          </div>

          <HHLabel>Saved helpers · 3</HHLabel>
          <div style={{ padding: '0 20px', display: 'flex', gap: 10, overflow: 'auto' }}>
            {[
              { n: 'Marcus T.', r: 4.9 },
              { n: 'Priya S.',  r: 4.8 },
              { n: 'Aisha B.',  r: 4.9 },
            ].map((p, i) => (
              <HHCard key={i} style={{
                width: 132, flexShrink: 0, padding: '14px 12px', textAlign: 'center',
              }}>
                <HHAvatar name={p.n} size={52} verified style={{ margin: '0 auto' }} />
                <div style={{ fontSize: 13, fontWeight: 600, marginTop: 8 }}>{p.n}</div>
                <div style={{ fontSize: 11, color: HH.muted, marginTop: 2 }}>★ {p.r}</div>
                <button style={{
                  marginTop: 8, padding: '5px 10px', borderRadius: 12,
                  background: HH.ink, color: '#fff', border: 'none',
                  fontSize: 11, fontWeight: 600, cursor: 'pointer',
                }}>Request</button>
              </HHCard>
            ))}
            <div style={{
              width: 132, flexShrink: 0, borderRadius: 14,
              border: `1px dashed ${HH.hairline}`, display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: HH.muted, fontSize: 12, fontWeight: 500,
            }}>＋ Add</div>
          </div>

          <HHLabel>Payment methods</HHLabel>
          <HHRow
            left={
              <div style={{ width: 44, height: 28, borderRadius: 4, background: 'linear-gradient(135deg, #2A4D8F, #5B86E5)', position: 'relative' }}>
                <div style={{ position: 'absolute', bottom: 3, left: 4, width: 16, height: 4, background: 'rgba(255,255,255,0.4)', borderRadius: 1 }} />
              </div>
            }
            title="Visa •••• 4242"
            sub="Default · expires 09/27"
            right={<ChevIcon/>}
          />
          <HHRow
            left={
              <div style={{ width: 44, height: 28, borderRadius: 4, background: HH.ink, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 9, fontWeight: 700 }}>Pay</div>
            }
            title="Apple Pay"
            sub="iPhone"
            right={<ChevIcon/>}
          />
          <HHRow
            left={<div style={{ width: 44, height: 28, borderRadius: 4, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', color: HH.muted }}><PlusIcon/></div>}
            title="Add payment method"
            sub="Card · Apple Pay · Google Pay"
            right={<ChevIcon/>}
            divider={false}
          />

          <HHLabel>Addresses</HHLabel>
          <HHRow
            left={<div style={{ width: 36, height: 36, borderRadius: 18, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><HomeIcon/></div>}
            title="Home"
            sub="2418 Linden Ave, 4B · Brooklyn"
            right={<ChevIcon/>}
          />
          <HHRow
            left={<div style={{ width: 36, height: 36, borderRadius: 18, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><PlusIcon/></div>}
            title="Add an address"
            divider={false}
          />

          <HHLabel>Account</HHLabel>
          <HHRow left={<div style={iconSlot}><BellIcon/></div>} title="Notifications" right={<ChevIcon/>} />
          <HHRow left={<div style={iconSlot}><Ico d="M12 17v.01 M12 14a3 3 0 1 0-3-3 M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z"/></div>} title="Help & support" right={<ChevIcon/>} />
          <HHRow left={<div style={iconSlot}><Ico d="M12 2L2 7l10 5 10-5-10-5z M2 17l10 5 10-5 M2 12l10 5 10-5"/></div>} title="Become a helper" sub="Verify ID, earn nearby" right={<ChevIcon/>} />
          <HHRow left={<div style={iconSlot}><SettIcon/></div>} title="Settings" right={<ChevIcon/>} divider={false} />
        </div>

        <HHTabBar active={4} />
      </div>
    </HHPhone>
  );
}

const iconSlot = {
  width: 36, height: 36, borderRadius: 18, background: HH.surfaceAlt,
  display: 'flex', alignItems: 'center', justifyContent: 'center', color: HH.muted,
};

Object.assign(window, { HH_S_Dashboard, HH_S_Notifications, HH_S_Settings });