// mapscreen.jsx — full-bleed civic reporting map. Exported to window.

const MAP_FILTERS = [
  { key: 'all', label: 'Semua', color: 'var(--s-700)' },
  { key: 'kriminalitas', label: 'Kriminalitas', color: 'var(--coral)' },
  { key: 'jalan', label: 'Jalan Rusak', color: 'var(--amber)' },
  { key: 'traffic', label: 'Lalu Lintas', color: 'var(--blue)' },
  { key: 'lingkungan', label: 'Lingkungan', color: 'var(--lime)' },
  { key: 'selesai', label: 'Selesai', color: 'var(--lime-700)' },
];

function FrostBar({ dark, children, style = {} }) {
  return (
    <div style={{ borderRadius: 'var(--r-chip)', background: dark ? 'rgba(19,28,46,0.7)' : 'rgba(255,255,255,0.72)',
      backdropFilter: 'blur(14px) saturate(150%)', WebkitBackdropFilter: 'blur(14px) saturate(150%)',
      border: '1px solid var(--border)', boxShadow: 'var(--sh-2)', ...style }}>
      {children}
    </div>
  );
}

function PinSheet({ report, dark, onClose, onDetail, onUp, upActive }) {
  const c = CATS[report.cat] || CATS.lainnya;
  return (
    <div style={{ position: 'absolute', left: 12, right: 12, bottom: 96, zIndex: 40,
      animation: 'gsBounceIn 240ms var(--ease)' }}>
      <div style={{ background: 'var(--surface)', borderRadius: 'var(--r-lg)', boxShadow: 'var(--sh-3)',
        border: '1px solid var(--border)', overflow: 'hidden' }}>
        <div style={{ display: 'flex', gap: 12, padding: 13 }}>
          <div style={{ position: 'relative', width: 92, height: 92, borderRadius: 'var(--r-md)', overflow: 'hidden', flexShrink: 0 }}>
            {report.photo
              ? <img src={report.photo_url} alt="" style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }} />
              : <div style={{ width: '100%', height: '100%', background: c.soft, display: 'grid', placeItems: 'center' }}><CatSeal cat={report.cat} size={40} /></div>}
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 5 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '3px 9px', borderRadius: 'var(--r-chip)',
                background: c.soft, color: c.color, fontSize: 11, fontWeight: 700 }}>
                <Icon name={c.icon} size={12} color={c.color} /> {c.label}
              </span>
              <StatusChip status={report.status} size="sm" />
            </div>
            <div style={{ fontSize: 15, fontWeight: 800, color: 'var(--text-1)', lineHeight: 1.25, marginBottom: 4 }}>{report.title}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, color: 'var(--text-2)' }}>
              <Icon name="pin" size={13} color="var(--text-3)" />
              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{report.area}</span>
              <span className="mono" style={{ color: 'var(--text-3)' }}>· {report.time}</span>
            </div>
          </div>
          <button onClick={onClose} style={{ alignSelf: 'flex-start', border: 'none', background: 'var(--surface-2)',
            width: 28, height: 28, borderRadius: '50%', display: 'grid', placeItems: 'center', cursor: 'pointer', flexShrink: 0 }}>
            <Icon name="x" size={15} color="var(--text-2)" />
          </button>
        </div>
        <div style={{ display: 'flex', gap: 9, padding: '0 13px 13px' }}>
          <span onClick={() => onUp(report.id)}><Upvote count={report.up + (upActive ? 1 : 0)} active={upActive} /></span>
          <button onClick={() => onDetail(report)} style={{ flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            padding: '10px', borderRadius: 'var(--r-chip)', border: 'none', cursor: 'pointer', background: 'var(--primary)', color: '#fff',
            fontFamily: 'var(--font)', fontWeight: 700, fontSize: 13.5 }}>
            Lihat detail <Icon name="arrow" size={16} color="#fff" sw={2.4} />
          </button>
        </div>
      </div>
    </div>
  );
}

function MapScreen({ dark, startReport, openReport, reports = [], myUps = {}, onUp }) {
  const [filter, setFilter] = React.useState('all');
  const [sel, setSel] = React.useState(null);
  const toggleUp = onUp || (() => {});

  const shown = reports.filter(r => {
    if (filter === 'all') return true;
    if (filter === 'selesai') return r.status === 'selesai';
    return r.cat === filter;
  });
  const selReport = reports.find(r => r.id === sel) || null;

  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden', background: 'var(--bg)' }}>
      <GsMap reports={shown} dark={dark} selectedId={sel} onSelect={(r) => setSel(r.id)} onBlank={() => setSel(null)} showUser />

      {/* top frosted search + filters */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, paddingTop: SAFE_TOP - 6, zIndex: 30,
        background: dark ? 'linear-gradient(rgba(6,11,22,0.55), transparent)' : 'linear-gradient(rgba(231,236,243,0.7), transparent)' }}>
        <div style={{ padding: '6px 14px 0' }}>
          <FrostBar dark={dark} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '11px 14px', borderRadius: 'var(--r-card)' }}>
            <Icon name="search" size={19} color="var(--text-3)" />
            <input placeholder="Cari area atau laporan..." style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent',
              fontFamily: 'var(--font)', fontSize: 14, color: 'var(--text-1)', fontWeight: 500 }} />
            <span style={{ width: 30, height: 30, borderRadius: 'var(--r-sm)', background: 'var(--primary-soft)', display: 'grid', placeItems: 'center' }}>
              <Icon name="filter" size={16} color="var(--primary)" />
            </span>
          </FrostBar>
        </div>
        <div style={{ display: 'flex', gap: 7, overflowX: 'auto', padding: '11px 14px 12px', scrollbarWidth: 'none' }}>
          {MAP_FILTERS.map(f => {
            const active = filter === f.key;
            return (
              <button key={f.key} onClick={() => { setFilter(f.key); setSel(null); }}
                style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '7px 13px', borderRadius: 'var(--r-chip)',
                  whiteSpace: 'nowrap', cursor: 'pointer', flexShrink: 0, fontFamily: 'var(--font)', fontWeight: 700, fontSize: 12.5,
                  border: `1px solid ${active ? f.color : 'var(--border)'}`,
                  background: active ? f.color : (dark ? 'rgba(19,28,46,0.82)' : 'rgba(255,255,255,0.9)'),
                  color: active ? '#fff' : 'var(--text-2)', backdropFilter: 'blur(8px)', boxShadow: 'var(--sh-1)' }}>
                {f.key !== 'all' && <span style={{ width: 8, height: 8, borderRadius: f.key === 'selesai' ? '50%' : 3,
                  background: active ? '#fff' : f.color }} />}
                {f.label}
              </button>
            );
          })}
        </div>
      </div>

      {/* floating buttons */}
      {!selReport && (
        <React.Fragment>
          <button onClick={startReport} style={{ position: 'absolute', right: 16, bottom: 108, zIndex: 25,
            display: 'inline-flex', alignItems: 'center', gap: 7, padding: '14px 18px', borderRadius: 'var(--r-chip)',
            border: 'none', cursor: 'pointer', background: 'var(--cta)', color: '#fff', fontFamily: 'var(--font)',
            fontWeight: 800, fontSize: 14, boxShadow: 'var(--sh-cta)' }}>
            <Icon name="plus" size={18} color="#fff" sw={2.6} /> Lapor
          </button>
          <button style={{ position: 'absolute', left: 16, bottom: 110, zIndex: 25, width: 46, height: 46, borderRadius: '50%',
            border: '1px solid var(--border)', cursor: 'pointer', background: 'var(--surface)', display: 'grid', placeItems: 'center',
            boxShadow: 'var(--sh-2)' }}>
            <Icon name="locate" size={21} color="var(--primary)" />
          </button>
        </React.Fragment>
      )}

      {selReport && (
        <PinSheet report={selReport} dark={dark} onClose={() => setSel(null)} onDetail={openReport}
          onUp={toggleUp} upActive={!!myUps[selReport.id]} />
      )}
    </div>
  );
}

Object.assign(window, { MapScreen, FrostBar, PinSheet, MAP_FILTERS });