// t24-screens-4.jsx — chat, notifications, profile, settings, language

// ── 16. Chat ─────────────────────────────────────────────────────────────────
function ScreenChat({ dark }) {
  const messages = [
    { from: 'them', t: 'Aslam-O-Alaikum. I am on my way, Apa.', time: '10:48' },
    { from: 'me',   t: 'Walaikum. Please come from the main gate, security knows.', time: '10:49' },
    { from: 'them', t: 'OK. ETA 12 min. Do I need to bring fan brackets?', time: '10:50' },
    { from: 'me',   t: 'Yes, please. Standard 16mm.', time: '10:51' },
    { from: 'them', t: 'Got it. Sending you a quick estimate.', time: '10:53' },
    { from: 'them', t: '__quote', time: '10:53' },
  ];
  return (
    <T24Phone dark={dark}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 16px 12px', background: 'var(--t24-surface)', borderBottom: '1px solid var(--t24-border)' }}>
        <button style={{ width: 36, height: 36, borderRadius: 10, border: '1px solid var(--t24-border)', background: 'var(--t24-surface)', color: 'var(--t24-text)' }}>{LineIcons.back(16)}</button>
        <div style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--t24-grad-cyan)', color: '#fff', font: '700 16px var(--t24-font-en)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          R
          <span style={{ position: 'absolute', bottom: -2, right: -2, width: 11, height: 11, borderRadius: 6, background: 'var(--t24-success)', border: '2px solid var(--t24-surface)' }}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <span className="t24-title-s" style={{ color: 'var(--t24-text)' }}>Md. Rafiq Hasan</span>
            <span className="t24-verified" style={{ width: 13, height: 13, fontSize: 8 }}>✓</span>
          </div>
          <div className="t24-body-m" style={{ color: 'var(--t24-success)', fontSize: 11 }}>● Online · typing…</div>
        </div>
        <button style={{ width: 36, height: 36, borderRadius: 10, border: '1px solid var(--t24-border)', background: 'var(--t24-surface)', color: 'var(--t24-blue)' }}>{LineIcons.phone(15)}</button>
      </div>
      <div style={{ padding: '14px 16px 88px', overflow: 'auto', height: 'calc(100% - 65px)', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ textAlign: 'center', font: '500 10px/1 var(--t24-font-en)', color: 'var(--t24-muted)', margin: '6px 0' }}>Today · Booking #r-2401</div>
        {messages.map((m, i) => {
          if (m.t === '__quote') return (
            <div key={i} style={{ alignSelf: 'flex-start', maxWidth: '80%' }}>
              <div className="t24-card" style={{ padding: 12, background: '#fff', border: '1.5px solid var(--t24-blue)' }}>
                <div className="t24-caption" style={{ color: 'var(--t24-blue)', marginBottom: 6 }}>QUOTE · #r-2401</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', font: '500 12px/1.6 var(--t24-font-en)', color: 'var(--t24-text)' }}>
                  <span>Service charge</span><span>BDT 600</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', font: '500 12px/1.6 var(--t24-font-en)', color: 'var(--t24-text)' }}>
                  <span>2 fan brackets</span><span>BDT 400</span>
                </div>
                <div style={{ height: 1, background: 'var(--t24-divider)', margin: '6px 0' }}/>
                <div style={{ display: 'flex', justifyContent: 'space-between', font: '700 14px/1 var(--t24-font-en)', color: 'var(--t24-deep)' }}>
                  <span>Total</span><span>BDT 1,000</span>
                </div>
                <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
                  <T24Button size="sm" kind="primary">Accept</T24Button>
                  <T24Button size="sm" kind="secondary">Discuss</T24Button>
                </div>
              </div>
              <div style={{ font: '500 10px/1 var(--t24-font-en)', color: 'var(--t24-muted)', marginTop: 4, marginLeft: 4 }}>{m.time}</div>
            </div>
          );
          const me = m.from === 'me';
          return (
            <div key={i} style={{ alignSelf: me ? 'flex-end' : 'flex-start', maxWidth: '80%' }}>
              <div style={{
                padding: '9px 13px', borderRadius: 16,
                background: me ? 'var(--t24-blue)' : 'var(--t24-surface)',
                color: me ? '#fff' : 'var(--t24-text)',
                border: me ? 'none' : '1px solid var(--t24-border)',
                borderBottomLeftRadius: me ? 16 : 4, borderBottomRightRadius: me ? 4 : 16,
                font: '500 13.5px/1.4 var(--t24-font-en)', boxShadow: 'var(--t24-sh-1)',
              }}>{m.t}</div>
              <div style={{ font: '500 10px/1 var(--t24-font-en)', color: 'var(--t24-muted)', marginTop: 3, padding: '0 4px', textAlign: me ? 'right' : 'left' }}>{m.time}{me ? ' · ✓✓' : ''}</div>
            </div>
          );
        })}
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '8px 12px 18px', background: 'var(--t24-surface)', borderTop: '1px solid var(--t24-border)' }}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <button style={{ width: 38, height: 38, borderRadius: 10, background: 'var(--t24-sky)', border: 'none', color: 'var(--t24-blue)' }}>{LineIcons.plus(18)}</button>
          <div style={{ flex: 1, height: 42, padding: '0 14px', borderRadius: 999, background: 'var(--t24-sky)', display: 'flex', alignItems: 'center' }}>
            <input placeholder="Type a message…" style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', font: '500 13.5px var(--t24-font-en)', color: 'var(--t24-text)' }}/>
            <span style={{ color: 'var(--t24-muted)' }}>{LineIcons.camera(18)}</span>
          </div>
          <button style={{ width: 42, height: 42, borderRadius: 999, background: 'var(--t24-grad-cyan)', border: 'none', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--t24-sh-blue)' }}>{LineIcons.send(16)}</button>
        </div>
      </div>
    </T24Phone>
  );
}

// ── 17. Notifications ────────────────────────────────────────────────────────
function ScreenNotifications({ dark }) {
  return (
    <T24Phone dark={dark}>
      <T24AppBar leading={false} large title="Notifications" subtitle="2 new" trailing={
        <button style={{ height: 36, padding: '0 14px', borderRadius: 12, border: '1px solid var(--t24-border)', background: 'var(--t24-surface)', color: 'var(--t24-deep)', font: '600 12px var(--t24-font-en)' }}>Mark all read</button>
      }/>
      <div style={{ padding: '0 16px 100px', overflow: 'auto', height: 'calc(100% - 90px)' }}>
        <div style={{ display: 'flex', gap: 6, paddingBottom: 12 }}>
          <T24Chip active>All · 5</T24Chip>
          <T24Chip>Bookings</T24Chip>
          <T24Chip>Reviews</T24Chip>
          <T24Chip>System</T24Chip>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {T24_NOTIFICATIONS.map(n => {
            const color = { request: 'var(--t24-blue)', review: 'var(--t24-warning)', safety: 'var(--t24-danger)', task: 'var(--t24-success)', email: 'var(--t24-cyan)' }[n.type];
            const icon  = { request: LineIcons.task, review: LineIcons.star, safety: LineIcons.shield, task: LineIcons.check, email: LineIcons.mail }[n.type];
            return (
              <div key={n.id} className="t24-card" style={{ padding: 14, display: 'flex', gap: 12, alignItems: 'flex-start', background: n.read ? 'var(--t24-surface)' : '#F0F7FF' }}>
                <div className="t24-icon-tile" style={{ width: 40, height: 40, color, background: `color-mix(in srgb, ${color} 12%, transparent)`, borderRadius: 12 }}>{icon(18)}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span className="t24-title-s" style={{ color: 'var(--t24-text)' }}>{n.t}</span>
                    {!n.read && <span style={{ width: 8, height: 8, borderRadius: 4, background: 'var(--t24-blue)' }}/>}
                  </div>
                  <div className="t24-body-m" style={{ color: 'var(--t24-muted)', marginTop: 2 }}>{n.m}</div>
                  <div className="t24-body-m" style={{ color: 'var(--t24-muted)', marginTop: 6, fontSize: 11 }}>{n.when} ago</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <T24BottomNav dark={dark} fab items={[
        { key: 'home', icon: LineIcons.home(22), label: 'Home' },
        { key: 'browse', icon: LineIcons.grid(22), label: 'Explore' },
        { key: 'tasks', icon: LineIcons.task(22), label: 'Bookings' },
        { key: 'profile', icon: LineIcons.user(22), label: 'Profile' },
      ]}/>
    </T24Phone>
  );
}

// ── 18. Profile (Service Taker) ──────────────────────────────────────────────
function ScreenProfileTaker({ dark }) {
  return (
    <T24Phone dark={dark}>
      <T24AppBar leading={false} large title="Profile" trailing={
        <button style={{ width: 40, height: 40, borderRadius: 12, border: '1px solid var(--t24-border)', background: 'var(--t24-surface)', color: 'var(--t24-text)' }}>{LineIcons.gear(18)}</button>
      }/>
      <div style={{ padding: '0 16px 100px', overflow: 'auto', height: 'calc(100% - 90px)' }}>
        {/* Profile card */}
        <div style={{
          padding: 16, borderRadius: 22, background: 'var(--t24-grad-hero)', color: '#fff',
          display: 'flex', gap: 14, alignItems: 'center', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', right: -30, bottom: -30, width: 140, height: 140, borderRadius: '50%', background: 'rgba(34,211,238,0.2)' }}/>
          <div style={{ width: 64, height: 64, borderRadius: 18, background: 'var(--t24-grad-cyan)', color: '#fff', font: '800 28px var(--t24-font-en)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 8px 20px rgba(0,0,0,0.2)' }}>A</div>
          <div style={{ flex: 1, position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
              <h2 className="t24-title-l" style={{ margin: 0, color: '#fff', fontSize: 18 }}>Ayesha Rahman</h2>
              <span className="t24-verified">✓</span>
            </div>
            <div className="t24-body-m" style={{ color: 'rgba(255,255,255,0.8)', marginTop: 2 }}>+880 1712-345 678</div>
            <span style={{ display: 'inline-block', marginTop: 6, padding: '3px 8px', borderRadius: 6, background: 'rgba(34,211,238,0.25)', color: '#CFFAFE', font: '700 10px/1 var(--t24-font-en)', letterSpacing: 0.4 }}>SERVICE TAKER</span>
          </div>
        </div>
        {/* Stats */}
        <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
          <T24StatTile label="Bookings" value="14" delta="+3"/>
          <T24StatTile label="Active" value="2"/>
          <T24StatTile label="Saved" value="BDT 1.2k" accent="var(--t24-success)"/>
        </div>
        {/* Switch role banner */}
        <div className="t24-card" style={{ marginTop: 14, padding: 14, display: 'flex', gap: 12, alignItems: 'center', background: 'var(--t24-grad-soft)' }}>
          <div className="t24-icon-tile" style={{ width: 44, height: 44, color: 'var(--t24-blue)' }}>{LineIcons.swap(22)}</div>
          <div style={{ flex: 1 }}>
            <div className="t24-title-s" style={{ color: 'var(--t24-text)' }}>Switch to Service Giver</div>
            <div className="t24-body-m" style={{ color: 'var(--t24-muted)' }}>Start earning from your skills</div>
          </div>
          <T24Button size="sm" kind="primary">Switch</T24Button>
        </div>
        {/* Settings groups */}
        <div className="t24-card" style={{ marginTop: 14, padding: 0, overflow: 'hidden' }}>
          <T24SettingRow icon={LineIcons.user(18)}      title="Personal information" sub="Name, email, address"/>
          <T24SettingRow icon={LineIcons.pin(18)}       title="Saved addresses"      sub="Home, Office +1"/>
          <T24SettingRow icon={LineIcons.heart(18)}     title="Favourite providers"  sub="6 saved"/>
          <T24SettingRow icon={LineIcons.shield(18)}    title="Verification"         sub="NID verified" trailing={<span style={{ font: '700 10px/1 var(--t24-font-en)', color: 'var(--t24-success)' }}>✓ DONE</span>}/>
        </div>
        <div className="t24-card" style={{ marginTop: 14, padding: 0, overflow: 'hidden' }}>
          <T24SettingRow icon={LineIcons.globe(18)}   title="Language"          sub="English (বাংলা available)"/>
          <T24SettingRow icon={LineIcons.moon(18)}    title="Appearance"        sub="System default"/>
          <T24SettingRow icon={LineIcons.bell(18)}    title="Notifications"     sub="Push, Email, SMS"/>
          <T24SettingRow icon={LineIcons.lock(18)}    title="Privacy & Security"sub="Password, 2FA, sessions"/>
        </div>
        <div className="t24-card" style={{ marginTop: 14, padding: 0, overflow: 'hidden' }}>
          <T24SettingRow icon={LineIcons.info(14)}    title="Help & Support"/>
          <T24SettingRow icon={LineIcons.doc(16)}     title="Terms & Policies"/>
          <T24SettingRow icon={LineIcons.logout(16)}  title="Sign out" danger trailing={<span/>}/>
        </div>
      </div>
      <T24BottomNav dark={dark} fab items={[
        { key: 'home', icon: LineIcons.home(22), label: 'Home' },
        { key: 'browse', icon: LineIcons.grid(22), label: 'Explore' },
        { key: 'tasks', icon: LineIcons.task(22), label: 'Bookings' },
        { key: 'profile', icon: LineIcons.user(22), label: 'Profile', active: true },
      ]}/>
    </T24Phone>
  );
}

// ── 19. Settings ─────────────────────────────────────────────────────────────
function ScreenSettings({ dark }) {
  return (
    <T24Phone dark={dark}>
      <T24AppBar title="Settings"/>
      <div style={{ padding: '0 16px 30px', overflow: 'auto', height: 'calc(100% - 70px)' }}>
        <div className="t24-card" style={{ padding: 0, overflow: 'hidden' }}>
          <T24SettingRow icon={LineIcons.bell(18)} title="Push notifications" trailing={
            <span style={{ width: 44, height: 26, borderRadius: 13, background: 'var(--t24-blue)', position: 'relative' }}>
              <span style={{ position: 'absolute', right: 2, top: 2, width: 22, height: 22, borderRadius: 11, background: '#fff' }}/>
            </span>
          }/>
          <T24SettingRow icon={LineIcons.mail(16)} title="Email updates" trailing={
            <span style={{ width: 44, height: 26, borderRadius: 13, background: 'var(--t24-blue)', position: 'relative' }}>
              <span style={{ position: 'absolute', right: 2, top: 2, width: 22, height: 22, borderRadius: 11, background: '#fff' }}/>
            </span>
          }/>
          <T24SettingRow icon={LineIcons.phone(16)} title="SMS alerts" trailing={
            <span style={{ width: 44, height: 26, borderRadius: 13, background: 'var(--t24-border)', position: 'relative' }}>
              <span style={{ position: 'absolute', left: 2, top: 2, width: 22, height: 22, borderRadius: 11, background: '#fff' }}/>
            </span>
          }/>
        </div>
        <h3 className="t24-caption" style={{ color: 'var(--t24-muted)', margin: '20px 4px 8px' }}>APPEARANCE</h3>
        <div style={{ display: 'flex', gap: 8 }}>
          {[
            { k: 'light', t: 'Light', g: 'linear-gradient(180deg,#FFFFFF,#EAF6FF)' },
            { k: 'dark',  t: 'Dark',  g: 'linear-gradient(180deg,#0F1A2E,#060B17)' },
            { k: 'auto',  t: 'System',g: 'linear-gradient(135deg,#FFFFFF 0%,#FFFFFF 50%,#0F1A2E 50%,#0F1A2E 100%)' },
          ].map((o, i) => (
            <div key={o.k} className="t24-card" style={{ flex: 1, padding: 10, textAlign: 'center', border: i === 0 ? '2px solid var(--t24-blue)' : '1px solid var(--t24-border)' }}>
              <div style={{ height: 60, borderRadius: 12, background: o.g, border: '1px solid var(--t24-border)' }}/>
              <div className="t24-title-s" style={{ marginTop: 8, color: i === 0 ? 'var(--t24-blue)' : 'var(--t24-text)' }}>{o.t}</div>
            </div>
          ))}
        </div>
        <h3 className="t24-caption" style={{ color: 'var(--t24-muted)', margin: '20px 4px 8px' }}>LANGUAGE</h3>
        <div className="t24-card" style={{ padding: 0, overflow: 'hidden' }}>
          {[
            { l: 'English',  s: 'Default',          active: true },
            { l: 'বাংলা',     s: 'Bangla · বাংলাদেশ', active: false },
          ].map(o => (
            <div key={o.l} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', borderBottom: '1px solid var(--t24-divider)' }}>
              <div className="t24-icon-tile" style={{ width: 36, height: 36 }}>
                <span style={{ font: '700 13px var(--t24-font-en)', color: 'var(--t24-blue)' }}>{o.l === 'English' ? 'EN' : 'বাং'}</span>
              </div>
              <div style={{ flex: 1 }}>
                <div className="t24-body-l" style={{ color: 'var(--t24-text)', fontWeight: 600 }}>{o.l}</div>
                <div className="t24-body-m" style={{ color: 'var(--t24-muted)' }}>{o.s}</div>
              </div>
              <div style={{ width: 22, height: 22, borderRadius: 11, border: `2px solid ${o.active ? 'var(--t24-blue)' : 'var(--t24-border)'}`, background: o.active ? 'var(--t24-blue)' : 'transparent', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{o.active && LineIcons.check(12)}</div>
            </div>
          ))}
        </div>
      </div>
    </T24Phone>
  );
}

Object.assign(window, { ScreenChat, ScreenNotifications, ScreenProfileTaker, ScreenSettings });