/* ============================================================
   CanchApp UI Kit — screens
   ============================================================ */

// ---------- Quick action grid (home) ----------
function QuickActions({ onGo }) {
  const items = [
    { id: 'explore', icon: 'search', label: 'Reservar cancha', tone: 'var(--primary)' },
    { id: 'lobo', icon: 'zap', label: 'Lobo Solitario', tone: 'var(--accent)' },
    { id: 'equipos', icon: 'users', label: 'Mis equipos', tone: 'var(--primary)' },
    { id: 'torneos', icon: 'trophy', label: 'Torneos', tone: 'var(--primary)' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
      {items.map(it => (
        <button key={it.id} onClick={() => onGo(it.id)} style={{
          ...cardBase, padding: 14, display: 'flex', alignItems: 'center', gap: 10,
          cursor: 'pointer', textAlign: 'left', minHeight: 64,
        }}>
          <span style={{ width: 40, height: 40, borderRadius: 11, background: it.tone === 'var(--accent)' ? 'var(--accent-050)' : 'var(--primary-050)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
            <Icon name={it.icon} size={20} color={it.tone} fill={it.id === 'lobo' ? it.tone : 'none'} />
          </span>
          <span className="cc-body-strong" style={{ font: 'var(--text-body-strong)' }}>{it.label}</span>
        </button>
      ))}
    </div>
  );
}

function SearchBar({ onClick, placeholder = 'Barrio, cancha o equipo…' }) {
  return (
    <div onClick={onClick} style={{
      ...cardBase, boxShadow: 'none', display: 'flex', alignItems: 'center', gap: 10,
      height: 46, padding: '0 14px', cursor: 'pointer',
    }}>
      <Icon name="search" size={18} color="var(--muted)" />
      <span className="cc-body" style={{ font: 'var(--text-body)', color: '#9AA1AC' }}>{placeholder}</span>
    </div>
  );
}

// ---------- HOME ----------
function HomeScreen({ onGo, onOpenCourt }) {
  return (
    <Scroll>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <span className="cc-caption" style={{ font: 'var(--text-caption)', color: 'var(--muted)' }}>Barranquilla</span>
        <h1 className="cc-h1" style={{ font: 'var(--text-h1)', letterSpacing: 'var(--tracking-display)' }}>¡Hola, Mateo!</h1>
        <span className="cc-body" style={{ font: 'var(--text-body)', color: 'var(--muted)', marginTop: 2 }}>¿Listo para jugar hoy?</span>
      </div>
      <SearchBar onClick={() => onGo('explore')} />
      <QuickActions onGo={onGo} />

      {/* Hero CTA — the one accent moment on home */}
      <div style={{ ...cardBase, background: 'var(--primary)', border: 'none', padding: 16, display: 'flex', gap: 12, alignItems: 'center' }}>
        <div style={{ flex: 1 }}>
          <span className="cc-micro" style={{ font: 'var(--text-micro)', color: 'rgba(255,255,255,0.75)', letterSpacing: 'var(--tracking-caps)' }}>Lobo Solitario</span>
          <p style={{ font: 'var(--text-body-strong)', color: '#fff', margin: '4px 0 10px' }}>¿Sin equipo? Únete a un partido abierto cerca de ti.</p>
          <Button variant="accent" size="sm" onClick={() => onGo('lobo')}>Buscar partido</Button>
        </div>
      </div>

      <div>
        <SectionHeader title="Canchas destacadas" action="Ver todas" onAction={() => onGo('explore')} />
        <div style={{ display: 'flex', gap: 12, overflowX: 'auto', margin: '0 -16px', padding: '4px 16px' }}>
          {COURTS.map(c => <CourtTile key={c.id} court={c} onOpen={onOpenCourt} />)}
        </div>
      </div>

      <div>
        <SectionHeader title="Torneos abiertos" action="Ver todos" onAction={() => onGo('torneos')} />
        <div style={{ display: 'flex', gap: 12, overflowX: 'auto', margin: '0 -16px', padding: '4px 16px' }}>
          {TOURNAMENTS.map(t => <TournamentCard key={t.id} t={t} />)}
        </div>
      </div>
    </Scroll>
  );
}

// ---------- EXPLORE / list ----------
const FILTERS = ['Todas', 'Fútbol 5', 'Fútbol 7', 'Cerca', 'Disponible'];
function ExploreScreen({ onOpenCourt }) {
  const [filter, setFilter] = React.useState('Todas');
  return (
    <Scroll gap={14}>
      <SearchBar onClick={() => {}} />
      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', margin: '0 -16px', padding: '0 16px' }}>
        {FILTERS.map(f => {
          const on = f === filter;
          return (
            <button key={f} onClick={() => setFilter(f)} style={{
              flex: '0 0 auto', minHeight: 36, padding: '0 14px', borderRadius: 999,
              border: '1px solid ' + (on ? 'var(--primary)' : 'var(--border)'),
              background: on ? 'var(--primary)' : 'var(--surface)',
              color: on ? '#fff' : 'var(--ink)', font: 'var(--text-label)', cursor: 'pointer',
            }}>{f}</button>
          );
        })}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span className="cc-caption" style={{ font: 'var(--text-caption)', color: 'var(--muted)' }}>{COURTS.length} canchas en Barranquilla</span>
        <Badge tone="neutral" icon="sliders">Ordenar</Badge>
      </div>
      {COURTS.map(c => <CourtCard key={c.id} court={c} onOpen={onOpenCourt} />)}
    </Scroll>
  );
}

// ---------- LOBO SOLITARIO ----------
function LoboScreen({ onJoin }) {
  return (
    <Scroll gap={14}>
      <div style={{ ...cardBase, background: 'var(--accent-050)', border: '1px solid #F6E3BE', padding: 14, display: 'flex', gap: 12, alignItems: 'center' }}>
        <span style={{ width: 40, height: 40, borderRadius: 11, background: 'var(--accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
          <Icon name="zap" size={20} color="#fff" fill="#fff" />
        </span>
        <div>
          <span className="cc-body-strong" style={{ font: 'var(--text-body-strong)' }}>Partidos abiertos cerca de ti</span>
          <p className="cc-caption" style={{ font: 'var(--text-caption)', color: 'var(--muted)', margin: '2px 0 0' }}>Únete solo y completa el equipo. Pagas solo tu cupo.</p>
        </div>
      </div>
      {PICKUP.map(g => <PickupCard key={g.id} game={g} onJoin={onJoin} />)}
    </Scroll>
  );
}

// ---------- RESERVATIONS ----------
function ReservationsScreen() {
  const [tab, setTab] = React.useState('proximas');
  const upcoming = RESERVATIONS.filter(r => r.status !== 'cancelled');
  const past = RESERVATIONS.filter(r => r.status === 'cancelled');
  const list = tab === 'proximas' ? upcoming : past;
  return (
    <Scroll gap={14}>
      <div style={{ display: 'flex', background: 'var(--surface-sunk)', borderRadius: 12, padding: 4, gap: 4 }}>
        {[['proximas', 'Próximas'], ['historial', 'Historial']].map(([id, label]) => (
          <button key={id} onClick={() => setTab(id)} style={{
            flex: 1, minHeight: 38, borderRadius: 9, border: 'none', cursor: 'pointer',
            background: tab === id ? 'var(--surface)' : 'transparent',
            boxShadow: tab === id ? 'var(--shadow-card)' : 'none',
            color: tab === id ? 'var(--ink)' : 'var(--muted)', font: 'var(--text-label)',
          }}>{label}</button>
        ))}
      </div>
      {list.length ? list.map(r => <ReservationCard key={r.id} res={r} />)
        : <EmptyState icon="ticket" title="Nada por aquí todavía" body="Cuando reserves una cancha, aparecerá en esta lista." />}
    </Scroll>
  );
}

function EmptyState({ icon, title, body }) {
  return (
    <div style={{ textAlign: 'center', padding: '48px 24px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
      <span style={{ width: 56, height: 56, borderRadius: 16, background: 'var(--surface-sunk)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name={icon} size={26} color="var(--muted)" />
      </span>
      <span className="cc-h3" style={{ font: 'var(--text-h3)' }}>{title}</span>
      <span className="cc-caption" style={{ font: 'var(--text-caption)', color: 'var(--muted)', maxWidth: 240 }}>{body}</span>
    </div>
  );
}

// ---------- PROFILE ----------
function ProfileScreen() {
  const rows = [
    { icon: 'users', label: 'Mis equipos', meta: '2' },
    { icon: 'trophy', label: 'Torneos inscritos', meta: '1' },
    { icon: 'heart', label: 'Canchas favoritas', meta: '4' },
    { icon: 'shield', label: 'Métodos de pago' },
    { icon: 'bell', label: 'Notificaciones' },
  ];
  return (
    <Scroll gap={14}>
      <div style={{ ...cardBase, padding: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
        <Avatar name="Mateo Vargas" size={56} />
        <div style={{ flex: 1 }}>
          <span className="cc-h3" style={{ font: 'var(--text-h3)' }}>Mateo Vargas</span>
          <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
            <Badge tone="teal" icon="star">4,9</Badge>
            <Badge tone="neutral">Nivel intermedio</Badge>
          </div>
        </div>
      </div>
      <div style={{ ...cardBase }}>
        {rows.map((r, i) => (
          <div key={r.label} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', borderTop: i ? '1px solid var(--border)' : 'none', cursor: 'pointer', minHeight: 44 }}>
            <Icon name={r.icon} size={19} color="var(--primary)" />
            <span className="cc-body" style={{ font: 'var(--text-body)', flex: 1 }}>{r.label}</span>
            {r.meta && <span className="cc-caption" style={{ font: 'var(--text-caption)', color: 'var(--muted)' }}>{r.meta}</span>}
            <Icon name="chevronRight" size={18} color="var(--muted)" />
          </div>
        ))}
      </div>
    </Scroll>
  );
}

Object.assign(window, { HomeScreen, ExploreScreen, LoboScreen, ReservationsScreen, ProfileScreen, EmptyState, SearchBar });