// t24-components.jsx — reusable UI building blocks. Each maps to a Flutter widget.

// ── Status bar / app bar ─────────────────────────────────────────────────────
function T24StatusBar({ dark, time = '9:41' }) {
  const fg = dark ? '#fff' : 'var(--t24-navy)';
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '14px 24px 6px', height: 44, boxSizing: 'border-box',
      fontFamily: 'var(--t24-font-en)', color: fg, fontWeight: 600, fontSize: 14,
    }}>
      <span>{time}</span>
      <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}>
        <svg width="16" height="10" viewBox="0 0 16 10" fill="currentColor"><rect x="0" y="6" width="3" height="4" rx=".6"/><rect x="4.5" y="4" width="3" height="6" rx=".6"/><rect x="9" y="2" width="3" height="8" rx=".6"/><rect x="13" y="0" width="3" height="10" rx=".6"/></svg>
        <svg width="14" height="10" viewBox="0 0 16 12" fill="currentColor"><path d="M8 3a8 8 0 0 1 6 3l-1.5 1.5A6 6 0 0 0 8 5.5 6 6 0 0 0 3.5 7.5L2 6a8 8 0 0 1 6-3z"/><circle cx="8" cy="10" r="1.5"/></svg>
        <svg width="22" height="10" viewBox="0 0 24 10"><rect x=".5" y=".5" width="20" height="9" rx="2.5" stroke="currentColor" fill="none"/><rect x="2" y="2" width="17" height="6" rx="1.2" fill="currentColor"/><rect x="22" y="3" width="1.5" height="4" rx=".5" fill="currentColor"/></svg>
      </span>
    </div>
  );
}

function T24AppBar({ title, subtitle, dark, leading, trailing, large }) {
  const fg = dark ? '#fff' : 'var(--t24-text)';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10,
      padding: large ? '10px 20px 14px' : '6px 16px 12px', color: fg }}>
      {leading !== false && (leading || (
        <button style={{ width: 40, height: 40, borderRadius: 12,
          border: '1px solid var(--t24-border)', background: 'var(--t24-surface)',
          color: fg, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}>{LineIcons.back(18)}</button>
      ))}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className={large ? 't24-title-l' : 't24-title-m'} style={{ color: fg }}>{title}</div>
        {subtitle && <div className="t24-body-m" style={{ color: 'var(--t24-muted)', marginTop: 2 }}>{subtitle}</div>}
      </div>
      {trailing}
    </div>
  );
}

// ── Bottom nav (Material-3 floating pill) ────────────────────────────────────
function T24BottomNav({ items, dark, fab, onTap }) {
  const bg    = dark ? 'rgba(15,26,46,0.92)' : 'rgba(255,255,255,0.92)';
  const muted = dark ? 'rgba(255,255,255,0.55)' : 'var(--t24-muted)';
  return (
    <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, paddingBottom: 22, pointerEvents: 'none' }}>
      <div style={{
        margin: '0 12px', height: 70, borderRadius: 26, background: bg,
        backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
        boxShadow: '0 10px 30px rgba(11,31,58,0.18), 0 2px 6px rgba(11,31,58,0.08)',
        border: dark ? '1px solid rgba(255,255,255,0.06)' : '1px solid rgba(221,235,250,0.7)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-around', position: 'relative', pointerEvents: 'auto',
      }}>
        {items.map((it, i) => {
          const isCenterSlot = fab && i === Math.floor(items.length / 2);
          return (
            <React.Fragment key={it.key}>
              {isCenterSlot && <div style={{ width: 60 }} />}
              <button onClick={() => onTap && onTap(it.key)} style={{
                background: 'transparent', border: 'none', cursor: 'pointer', padding: '6px 8px',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
                color: it.active ? 'var(--t24-blue)' : muted, position: 'relative',
              }}>
                <div style={{ position: 'relative' }}>
                  {it.icon}
                  {it.badge && <span style={{
                    position: 'absolute', top: -3, right: -6, minWidth: 14, height: 14, padding: '0 4px',
                    borderRadius: 7, background: 'var(--t24-danger)', color: '#fff',
                    font: '700 9px/14px var(--t24-font-en)', textAlign: 'center',
                  }}>{it.badge}</span>}
                </div>
                <span style={{ font: `${it.active ? 700 : 500} 10px/1 var(--t24-font-en)` }}>{it.label}</span>
              </button>
            </React.Fragment>
          );
        })}
        {fab && (
          <div onClick={() => onTap && onTap('fab')} style={{
            position: 'absolute', left: '50%', top: -22, transform: 'translateX(-50%)',
            width: 60, height: 60, borderRadius: 20, background: 'var(--t24-grad-cyan)',
            boxShadow: '0 12px 24px rgba(30,99,214,0.4)', display: 'flex',
            alignItems: 'center', justifyContent: 'center', color: 'white', cursor: 'pointer',
          }}>
            <TaskerMark size={28} color="#fff"/>
          </div>
        )}
      </div>
    </div>
  );
}

// ── Search bar ───────────────────────────────────────────────────────────────
function T24SearchBar({ placeholder = 'Search any service…', value, onChange, trailing }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8, height: 48, padding: '0 14px',
      borderRadius: 16, background: 'var(--t24-surface)', border: '1px solid var(--t24-border)',
      boxShadow: 'var(--t24-sh-1)', color: 'var(--t24-muted)',
    }}>
      {LineIcons.search(18)}
      <input value={value || ''} onChange={e => onChange && onChange(e.target.value)}
        placeholder={placeholder} className="t24-body-l" style={{
          flex: 1, background: 'transparent', border: 'none', outline: 'none',
          color: 'var(--t24-text)', fontFamily: 'var(--t24-font-en)',
        }}/>
      {trailing}
    </div>
  );
}

// ── Chip / Button ────────────────────────────────────────────────────────────
function T24Chip({ children, active, icon, onClick, danger, solid }) {
  let bg = 'var(--t24-sky)', fg = 'var(--t24-deep)', bd = 'var(--t24-border)';
  if (active || solid) { bg = 'var(--t24-blue)'; fg = '#fff'; bd = 'transparent'; }
  if (danger) { bg = 'rgba(220,38,38,0.1)'; fg = 'var(--t24-danger)'; bd = 'rgba(220,38,38,0.2)'; }
  return (
    <button onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: 6, height: 32, padding: '0 12px',
      borderRadius: 999, background: bg, color: fg, border: `1px solid ${bd}`,
      font: '600 12px/1 var(--t24-font-en)', cursor: 'pointer', whiteSpace: 'nowrap',
    }}>{icon}{children}</button>
  );
}

function T24Button({ children, kind = 'primary', size = 'md', icon, full, onClick, style = {} }) {
  const h = size === 'lg' ? 54 : size === 'sm' ? 38 : 48;
  const fs = size === 'lg' ? 16 : 15;
  let s = {};
  if (kind === 'primary')    s = { background: 'var(--t24-grad-cyan)', color: '#fff', boxShadow: 'var(--t24-sh-blue)' };
  if (kind === 'secondary')  s = { background: 'var(--t24-surface)', color: 'var(--t24-deep)', border: '1.5px solid var(--t24-border)' };
  if (kind === 'navy')       s = { background: 'var(--t24-navy)', color: '#fff' };
  if (kind === 'ghost')      s = { background: 'transparent', color: 'var(--t24-blue)' };
  if (kind === 'danger')     s = { background: 'rgba(220,38,38,0.1)', color: 'var(--t24-danger)', border: '1.5px solid rgba(220,38,38,0.2)' };
  return (
    <button onClick={onClick} style={{
      height: h, padding: size === 'sm' ? '0 14px' : '0 22px',
      borderRadius: size === 'sm' ? 12 : 16, border: 'none', cursor: 'pointer',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      font: `700 ${fs}px/1 var(--t24-font-en)`, width: full ? '100%' : 'auto', ...s, ...style,
    }}>{icon}{children}</button>
  );
}

// ── Section title ────────────────────────────────────────────────────────────
function T24SectionTitle({ title, action }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', padding: '4px 4px 10px' }}>
      <h3 className="t24-title-m" style={{ margin: 0, color: 'var(--t24-text)' }}>{title}</h3>
      {action && <button style={{
        background: 'transparent', border: 'none', cursor: 'pointer', color: 'var(--t24-blue)',
        font: '600 12px/1 var(--t24-font-en)',
      }}>{action} →</button>}
    </div>
  );
}

// ── Category tile (sky icon + label) ─────────────────────────────────────────
function T24CategoryTile({ cat, onClick }) {
  return (
    <button onClick={onClick} style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
      padding: '10px 4px', border: 'none', background: 'transparent', cursor: 'pointer', minWidth: 0,
    }}>
      <div style={{
        width: 60, height: 60, borderRadius: 18, background: 'var(--t24-grad-soft)',
        border: '1px solid var(--t24-border)', boxShadow: 'var(--t24-sh-1)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <TaskerIcon kind="cat" name={cat.icon} size={42}/>
      </div>
      <span className="t24-label-l" style={{
        fontSize: 11, color: 'var(--t24-text)', textAlign: 'center', lineHeight: 1.2,
        maxWidth: 72, overflow: 'hidden', textOverflow: 'ellipsis',
        display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
      }}>{cat.name.split(',')[0]}</span>
    </button>
  );
}

// ── Service tile (large icon over text) ─────────────────────────────────────
function T24ServiceTile({ svc, onClick }) {
  return (
    <button onClick={onClick} className="t24-card" style={{
      padding: '12px 8px 10px', display: 'flex', flexDirection: 'column',
      alignItems: 'center', gap: 8, cursor: 'pointer', background: 'var(--t24-surface)',
    }}>
      <TaskerIcon kind="svc" name={svc.s} size={48}/>
      <span className="t24-label-l" style={{ fontSize: 11, color: 'var(--t24-text)', textAlign: 'center', lineHeight: 1.2 }}>{svc.name}</span>
    </button>
  );
}

// ── Provider card ────────────────────────────────────────────────────────────
function T24ProviderCard({ p, compact, action }) {
  return (
    <div className="t24-card" style={{ padding: 14, display: 'flex', gap: 12 }}>
      <div style={{
        width: 56, height: 56, borderRadius: 16, flexShrink: 0,
        background: 'var(--t24-grad-cyan)', color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        font: '700 22px var(--t24-font-en)', position: 'relative',
      }}>
        {p.avatar}
        {p.online && <span style={{
          position: 'absolute', bottom: -2, right: -2, width: 14, height: 14,
          borderRadius: 7, background: 'var(--t24-success)', border: '2.5px solid var(--t24-surface)',
        }}/>}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
          <span className="t24-title-s" style={{ color: 'var(--t24-text)' }}>{p.name}</span>
          {p.verified && <span className="t24-verified">✓</span>}
        </div>
        <div className="t24-body-m" style={{ color: 'var(--t24-muted)', marginTop: 2 }}>{p.profession}</div>
        <div style={{ display: 'flex', gap: 10, marginTop: 6, alignItems: 'center', flexWrap: 'wrap' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, color: 'var(--t24-text)', font: '600 11px/1 var(--t24-font-en)' }}>
            {LineIcons.star(12)} {p.rating}
          </span>
          <span style={{ color: 'var(--t24-muted)', font: '500 11px/1 var(--t24-font-en)' }}>· {p.jobs} jobs</span>
          {!compact && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, color: 'var(--t24-muted)', font: '500 11px/1 var(--t24-font-en)' }}>
            {LineIcons.pin(11)} {p.area.split(',')[0]}
          </span>}
        </div>
      </div>
      {action}
    </div>
  );
}

// ── Request status pill / card ───────────────────────────────────────────────
const REQ_STATUS_META = {
  pending:    { label: 'Pending',     bg: 'rgba(245,158,11,0.12)', fg: '#B45309', dot: '#F59E0B' },
  discuss:    { label: 'In Discussion', bg: 'rgba(30,99,214,0.1)',  fg: 'var(--t24-blue)', dot: 'var(--t24-blue)' },
  inprogress: { label: 'In Progress', bg: 'rgba(34,211,238,0.14)', fg: '#0E7490', dot: '#22D3EE' },
  done:       { label: 'Completed',   bg: 'rgba(22,163,74,0.12)',  fg: 'var(--t24-success)', dot: 'var(--t24-success)' },
  cancelled:  { label: 'Cancelled',   bg: 'rgba(220,38,38,0.1)',   fg: 'var(--t24-danger)',  dot: 'var(--t24-danger)' },
};

function T24StatusPill({ status }) {
  const m = REQ_STATUS_META[status] || REQ_STATUS_META.pending;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6, height: 24, padding: '0 10px',
      borderRadius: 12, background: m.bg, color: m.fg, font: '600 11px/1 var(--t24-font-en)',
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 3, background: m.dot }}/>
      {m.label}
    </span>
  );
}

function T24RequestRow({ r, svc }) {
  return (
    <div className="t24-card" style={{ padding: 14, display: 'flex', gap: 12 }}>
      <TaskerIcon kind="svc" name={svc.s} size={44}/>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <span className="t24-title-s" style={{ color: 'var(--t24-text)' }}>{svc.name}</span>
          <T24StatusPill status={r.status}/>
        </div>
        <div className="t24-body-m" style={{ color: 'var(--t24-muted)', marginTop: 3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.note}</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, alignItems: 'center' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: 'var(--t24-muted)', font: '500 11px/1 var(--t24-font-en)' }}>
            {LineIcons.clock(11)} {r.date}
          </span>
          <span style={{ color: 'var(--t24-deep)', font: '700 12px/1 var(--t24-font-en)' }}>{r.amount}</span>
        </div>
      </div>
    </div>
  );
}

// ── Stat tile (used on Provider Dashboard) ───────────────────────────────────
function T24StatTile({ label, value, delta, accent }) {
  return (
    <div className="t24-card" style={{ padding: 14, flex: 1, minWidth: 0 }}>
      <div className="t24-caption" style={{ color: 'var(--t24-muted)' }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
        <span style={{ font: `800 ${value && value.length > 5 ? 22 : 24}px/1 var(--t24-font-en)`, color: accent || 'var(--t24-deep)' }}>{value}</span>
        {delta && <span style={{ font: '600 10px/1 var(--t24-font-en)', color: 'var(--t24-success)' }}>{delta}</span>}
      </div>
    </div>
  );
}

// ── List row (settings) ──────────────────────────────────────────────────────
function T24SettingRow({ icon, title, sub, trailing, danger }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', borderBottom: '1px solid var(--t24-divider)' }}>
      <div className="t24-icon-tile" style={{ width: 36, height: 36, color: danger ? 'var(--t24-danger)' : 'var(--t24-blue)' }}>{icon}</div>
      <div style={{ flex: 1 }}>
        <div className="t24-body-l" style={{ color: danger ? 'var(--t24-danger)' : 'var(--t24-text)', fontWeight: 600 }}>{title}</div>
        {sub && <div className="t24-body-m" style={{ color: 'var(--t24-muted)', marginTop: 1 }}>{sub}</div>}
      </div>
      {trailing || <span style={{ color: 'var(--t24-muted)' }}>{LineIcons.chev(14)}</span>}
    </div>
  );
}

// ── Bottom-sheet sheet container (used inside iPhone frame) ──────────────────
function T24Sheet({ children, title, dark }) {
  return (
    <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, top: 0, background: 'rgba(11,31,58,0.42)', backdropFilter: 'blur(2px)' }}>
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, background: dark ? 'var(--t24-surface)' : '#fff',
        borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: '10px 18px 24px',
        boxShadow: '0 -20px 50px rgba(0,0,0,0.18)',
      }}>
        <div style={{ width: 44, height: 5, borderRadius: 3, background: 'var(--t24-divider)', margin: '0 auto 12px' }}/>
        {title && <h3 className="t24-title-m" style={{ margin: '0 0 12px', color: 'var(--t24-text)' }}>{title}</h3>}
        {children}
      </div>
    </div>
  );
}

// Stars row
function T24Stars({ n = 5, size = 14 }) {
  return (
    <span style={{ display: 'inline-flex', gap: 1 }}>
      {[0,1,2,3,4].map(i => i < n ? LineIcons.star(size) : <span key={i} style={{ color: '#E2E8F0' }}>{LineIcons.starO(size)}</span>)}
    </span>
  );
}

Object.assign(window, {
  T24StatusBar, T24AppBar, T24BottomNav, T24SearchBar, T24Chip, T24Button,
  T24SectionTitle, T24CategoryTile, T24ServiceTile, T24ProviderCard,
  T24StatusPill, T24RequestRow, T24StatTile, T24SettingRow, T24Sheet, T24Stars,
  REQ_STATUS_META,
});