// home.jsx — gs.town home / dashboard. Exported to window.
const SAFE_TOP = 54;

function SectionHead({ title, action, onAction }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
      padding: '0 20px', marginBottom: 12 }}>
      <h3 style={{ fontSize: 17, fontWeight: 800, letterSpacing: '-0.02em', color: 'var(--text-1)' }}>{title}</h3>
      {action && (
        <button onClick={onAction} style={{ border: 'none', background: 'none', cursor: 'pointer',
          color: 'var(--primary)', fontWeight: 700, fontSize: 13, fontFamily: 'var(--font)',
          display: 'inline-flex', alignItems: 'center', gap: 2 }}>
          {action} <Icon name="chevR" size={14} color="var(--primary)" sw={2.4} />
        </button>
      )}
    </div>
  );
}

function HomeHeader({ dark }) {
  return (
    <div style={{ paddingTop: SAFE_TOP, background: 'var(--surface)', position: 'relative', zIndex: 4 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 20px 12px' }}>
        <Logo size={22} light={dark} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <button style={{ position: 'relative', width: 40, height: 40, borderRadius: '50%',
            border: '1px solid var(--border)', background: 'var(--surface)', cursor: 'pointer',
            display: 'grid', placeItems: 'center' }}>
            <Icon name="bell" size={20} color="var(--text-2)" />
            <span style={{ position: 'absolute', top: 8, right: 9, width: 8, height: 8, borderRadius: '50%',
              background: 'var(--coral)', border: '2px solid var(--surface)' }} />
          </button>
          <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--blue)',
            display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 700, fontSize: 15 }}>RA</div>
        </div>
      </div>
      <div style={{ padding: '0 20px 14px' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 12px 6px 9px',
          borderRadius: 'var(--r-chip)', background: 'var(--primary-soft)', color: 'var(--primary)',
          fontWeight: 700, fontSize: 12.5 }}>
          <Icon name="pin" size={15} color="var(--primary)" />
          Gading Serpong
          <Icon name="chevU" size={13} color="var(--primary)" sw={2.6} style={{ transform: 'rotate(180deg)', opacity: 0.7 }} />
        </span>
      </div>
    </div>
  );
}

function QuickActions({ onAct }) {
  return (
    <div style={{ display: 'flex', gap: 9, overflowX: 'auto', padding: '0 20px 4px', scrollbarWidth: 'none' }}>
      {QUICK_ACTIONS.map(a => (
        <button key={a.key} onClick={() => onAct(a.key)} style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '9px 15px 9px 11px', borderRadius: 'var(--r-chip)', whiteSpace: 'nowrap', cursor: 'pointer',
          border: '1px solid var(--border)', background: 'var(--surface)', boxShadow: 'var(--sh-1)',
          fontFamily: 'var(--font)', fontWeight: 700, fontSize: 13, color: 'var(--text-1)', flexShrink: 0 }}>
          <span style={{ width: 26, height: 26, borderRadius: '50%', background: a.color,
            display: 'grid', placeItems: 'center', flexShrink: 0 }}>
            <Icon name={a.icon} size={15} color="#fff" sw={2.3} />
          </span>
          {a.label}
        </button>
      ))}
    </div>
  );
}

function FeedCard({ report, onOpen, onUp, upActive }) {
  const c = CATS[report.cat] || CATS.lainnya;
  return (
    <div role="button" tabIndex={0} onClick={() => onOpen(report)} style={{ display: 'flex', width: '100%', textAlign: 'left',
      gap: 0, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-card)',
      overflow: 'hidden', cursor: 'pointer', boxShadow: 'var(--sh-1)', fontFamily: 'var(--font)' }}>
      <span style={{ width: 5, background: c.color, flexShrink: 0 }} />
      <span style={{ flex: 1, padding: '13px 14px', minWidth: 0 }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 7 }}>
          <CatSeal cat={report.cat} size={30} />
          <span style={{ minWidth: 0, flex: 1 }}>
            <span style={{ display: 'block', fontSize: 11, fontWeight: 700, color: c.color, letterSpacing: '0.01em' }}>{c.label}</span>
            <span className="mono" style={{ display: 'block', fontSize: 11, color: 'var(--text-3)' }}>{report.time}</span>
          </span>
          <StatusChip status={report.status} size="sm" />
        </span>
        <span style={{ display: 'block', fontSize: 14.5, fontWeight: 700, color: 'var(--text-1)',
          lineHeight: 1.3, marginBottom: 6 }}>{report.title}</span>
        <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-2)', minWidth: 0 }}>
            <Icon name="pin" size={13} color="var(--text-3)" />
            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{report.area}</span>
          </span>
          <span onClick={(e) => { e.stopPropagation(); onUp(report.id); }}>
            <Upvote count={report.up + (upActive ? 1 : 0)} active={upActive} />
          </span>
        </span>
      </span>
    </div>
  );
}

function PlaceCard({ place, onOpen, wide = false }) {
  const dc = DIR_CATS.find(d => d.key === place.cat) || DIR_CATS[0];
  return (
    <button onClick={() => onOpen(place)} style={{ width: wide ? 230 : '100%', flexShrink: 0, textAlign: 'left',
      background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-card)',
      overflow: 'hidden', cursor: 'pointer', boxShadow: 'var(--sh-1)', fontFamily: 'var(--font)', padding: 0 }}>
      <div style={{ position: 'relative', height: wide ? 130 : 120 }}>
        <image-slot id={place.slot} shape="rect" fit="cover" placeholder="Foto tempat"
          style={{ display: 'block', width: '100%', height: '100%', background: `color-mix(in srgb, ${place.color || 'var(--blue)'} 14%, var(--surface))` }}></image-slot>
        {place.featured && (
          <span className="mono" style={{ position: 'absolute', top: 9, left: 9, display: 'inline-flex', alignItems: 'center', gap: 4,
            padding: '3px 8px', borderRadius: 'var(--r-chip)', background: 'rgba(15,23,42,0.72)', color: '#FFD9DB',
            fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', backdropFilter: 'blur(4px)' }}>
            <Icon name="sponsor" size={11} color="#FFC9A8" /> SPONSORED
          </span>
        )}
        <span className="mono" style={{ position: 'absolute', top: 9, right: 9, display: 'inline-flex', alignItems: 'center', gap: 3,
          padding: '3px 8px', borderRadius: 'var(--r-chip)', background: 'rgba(255,255,255,0.92)', color: 'var(--s-900)',
          fontSize: 11, fontWeight: 700 }}>
          <Icon name="star" size={11} color="var(--amber)" /> {place.rating}
        </span>
      </div>
      <div style={{ padding: '11px 13px 13px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
          <span style={{ width: 7, height: 7, borderRadius: '50%', background: dc.color }} />
          <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-2)' }}>{dc.label}</span>
        </div>
        <div style={{ fontSize: 14.5, fontWeight: 800, color: 'var(--text-1)', lineHeight: 1.25, marginBottom: 5 }}>{place.name}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--text-2)' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>
            <Icon name="pin" size={12} color="var(--text-3)" /> {place.area}
          </span>
          <span className="mono" style={{ color: 'var(--text-3)' }}>· {place.dist}</span>
        </div>
      </div>
    </button>
  );
}

function Home({ dark, t, go, openReport, openPlace, startReport, reports = [], places = [], myUps = {}, onUp, loading }) {
  const toggleUp = onUp || (() => {});
  const newCount = reports.filter(r => r.status === 'open').length;
  const shownPlaces = t.showSponsored ? places : places.filter(p => !p.sponsored);

  const onQuick = (k) => {
    if (k === 'dir') return go('directory');
    if (k === 'announce') return go('home');
    return startReport(k);
  };

  return (
    <div style={{ height: '100%', overflowY: 'auto', background: 'var(--bg)', scrollbarWidth: 'none' }}>
      <HomeHeader dark={dark} />

      {/* hero map */}
      <div style={{ padding: '4px 0 16px' }}>
        <div onClick={() => go('map')} style={{ position: 'relative', height: 248, margin: '0 0',
          borderRadius: 0, overflow: 'hidden', cursor: 'pointer' }}>
          <GsMap reports={reports} dark={dark} vignette={t.mapVignette} showUser onBlank={() => go('map')} />
          {/* floating "new reports" card */}
          <div style={{ position: 'absolute', left: 16, right: 16, bottom: 14, display: 'flex', alignItems: 'center',
            gap: 11, padding: '11px 14px', borderRadius: 'var(--r-card)', background: 'var(--surface)',
            boxShadow: 'var(--sh-3)', border: '1px solid var(--border)' }}>
            <span style={{ position: 'relative', width: 12, height: 12, flexShrink: 0 }}>
              <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'var(--coral)', animation: 'gsPulse 2s var(--ease) infinite' }} />
              <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'var(--coral)' }} />
            </span>
            <span style={{ flex: 1, fontSize: 13.5, fontWeight: 700, color: 'var(--text-1)' }}>
              <span className="mono">{newCount}</span> laporan baru hari ini
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 12.5, fontWeight: 700, color: 'var(--primary)' }}>
              Buka peta <Icon name="arrow" size={15} color="var(--primary)" sw={2.4} />
            </span>
          </div>
        </div>
      </div>

      {/* quick actions */}
      <QuickActions onAct={onQuick} />

      {/* feed */}
      <div style={{ marginTop: 26 }}>
        <SectionHead title="Terbaru di sekitarmu" action="Semua" onAction={() => go('map')} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 11, padding: '0 20px' }}>
          {reports.length === 0 ? (
            <div style={{ padding: '24px 16px', textAlign: 'center', borderRadius: 'var(--r-card)', background: 'var(--surface)', border: '1px dashed var(--border-strong)', color: 'var(--text-2)', fontSize: 13.5 }}>{loading ? 'Memuat laporan...' : 'Belum ada laporan. Jadi yang pertama melapor!'}</div>
          ) : reports.slice(0, 6).map(r => (
            <FeedCard key={r.id} report={r} onOpen={openReport} onUp={toggleUp} upActive={!!myUps[r.id]} />
          ))}
        </div>
      </div>

      {/* popular places */}
      <div style={{ marginTop: 28, marginBottom: 24 }}>
        <SectionHead title="Tempat populer" action="Direktori" onAction={() => go('directory')} />
        <div style={{ display: 'flex', gap: 13, overflowX: 'auto', padding: '0 20px 6px', scrollbarWidth: 'none' }}>
          {shownPlaces.length === 0 ? (<div style={{ fontSize: 13, color: 'var(--text-3)', padding: '0 0 4px' }}>Direktori segera hadir.</div>) : shownPlaces.map(p => <PlaceCard key={p.id} place={p} onOpen={openPlace} wide />)}
        </div>
      </div>

      <div style={{ height: 96 }} />
    </div>
  );
}

Object.assign(window, { Home, SectionHead, PlaceCard, FeedCard, QuickActions, SAFE_TOP });