// Venues.jsx — 03 예식장 후보: Google Sheet 데이터 연결형
const { Card, StatusBadge, Tag, DataTable, Button, Tabs } = window.DesignSystem_7d5e72;

function VenuesScreen({ data, patch }) {
  const [filter, setFilter] = React.useState("all");
  const sheetRows = (window.WED_SHEET_DATA && window.WED_SHEET_DATA.venues) || [];
  const ALL = sheetRows.map((r, i) => ({
    id: 'v-' + (r['우선순위'] || i + 1),
    rank: r['우선순위'] || String(i + 1),
    venue: r['후보'] || '',
    area: [/강남|호텔/.test(r['권역'] || '') ? 'rose' : 'neutral', r['권역'] || '권역확인'],
    status: (r['주차'] || '').includes('상담') ? 'check' : 'hold',
    visit: r['세부위치'] || '상담확인',
    risk: r['접근성'] || r['주차'] || '상담확인',
    price: r['홀타입'] || '상담확인',
    official: r['공식링크'] || '',
    naver: r['네이버지도'] || '',
  }));

  const TABS = [
    { key: "all",    label: "전체",     count: ALL.length },
    { key: "rose",   label: "강남/호텔", count: ALL.filter(r => r.area[0] === 'rose').length },
    { key: "check",  label: "상담확인", count: ALL.filter(r => r.status === "check").length },
    { key: "star",   label: "★ 후보",  count: Object.values(data.stars || {}).filter(Boolean).length },
  ];
  const stars = data.stars || {};
  const toggleStar = (id) => patch((prev) => ({ ...prev, stars: { ...prev.stars, [id]: !prev.stars[id] } }));
  const shown = ALL.filter((r) => filter === "all" ? true : filter === "star" ? stars[r.id] : filter === 'rose' ? r.area[0] === 'rose' : r.status === filter);
  const starBtn = (id) => {
    const on = !!stars[id];
    return <button onClick={() => toggleStar(id)} aria-label="후보 고정" title="후보 고정" style={{ border: "none", background: "transparent", cursor: "pointer", fontSize: "16px", lineHeight: 1, color: on ? "var(--gold)" : "var(--ink-4)", padding: "2px" }}>{on ? "★" : "☆"}</button>;
  };

  return (
    <div>
      <div className="sheet-bridge" style={{ marginTop: 0, marginBottom: 16, borderColor: 'var(--primary-line)', background: 'var(--primary-soft)' }}>
        <h3>03_예식장후보 · AI 리서치 후보군</h3>
        <p>현재 {ALL.length}곳은 대표님이 상담 후보로 확정한 목록이 아니라, 마스터 Sheet에 임시 수집된 리서치 후보군입니다. 실제 상담 후보는 대표님·소영님이 별도로 선택해야 확정됩니다.</p>
      </div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px", marginBottom: "16px", flexWrap: "wrap" }}>
        <Tabs items={TABS} active={filter} onSelect={setFilter} style={{ border: "none" }} />
        <Button variant="quiet" size="md" iconLeft={<span>↗</span>} onClick={() => window.open((window.WED_SHEET_DATA||{}).sheetUrl + '#gid=314469082','_blank')}>원본 리서치 후보 탭 열기</Button>
      </div>
      <div className="venue-mobile-list">
        {shown.slice(0, 12).map((r) => (
          <div className="venue-mobile-card" key={r.id}>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'space-between' }}>
              <a href={r.official || r.naver || '#'} target="_blank" rel="noreferrer">{r.rank}. {r.venue}</a>
              {starBtn(r.id)}
            </div>
            <div className="venue-mobile-meta">
              <span>{r.area[1]}</span><span>{r.visit}</span><span>{r.price}</span><span>{r.risk}</span>
            </div>
          </div>
        ))}
        {shown.length > 12 && <p style={{ margin: '0 2px 4px', fontSize: 12, color: 'var(--ink-3)' }}>상위 12개만 카드로 먼저 표시합니다. 전체 {shown.length}곳은 아래 표를 좌우로 밀어서 확인하세요.</p>}
      </div>
      <Card eyebrow={`AI 리서치 후보 · ${shown.length}곳`} title="상담 확정 전 검토 목록" padding="0" style={{ overflow: "hidden" }}>
        <p style={{ margin: "12px 14px 0", fontSize: "12px", color: "var(--ink-3)" }}>모바일에서는 표를 좌우로 밀어 전체 열을 확인할 수 있습니다.</p>
        <DataTable style={{ border: "none", borderRadius: 0, boxShadow: "none" }} columns={[{ key: "star", label: "", align: "center", width: "44px" }, { key: "rank", label: "순위", align: "center", width: "52px" }, { key: "venue", label: "예식장", nowrap: true }, { key: "area", label: "권역" }, { key: "status", label: "상태" }, { key: "visit", label: "위치" }, { key: "risk", label: "접근성/리스크" }, { key: "price", label: "홀타입", align: "right" }]}
          rows={shown.map((r) => ({ star: starBtn(r.id), rank: <span style={{ fontWeight: 700, color: "var(--ink-1)", fontVariantNumeric: "tabular-nums" }}>{r.rank}</span>, venue: <a href={r.official || r.naver || '#'} target="_blank" rel="noreferrer" style={{ fontWeight: 700, color: "var(--ink-1)" }}>{r.venue}</a>, area: <Tag tone={r.area[0]}>{r.area[1]}</Tag>, status: <StatusBadge status={r.status} size="sm" />, visit: <span style={{ color: "var(--ink-3)", fontSize: "13px" }}>{r.visit}</span>, risk: <span style={{ color: "var(--st-risk-ink)", fontSize: "13px" }}>{r.risk}</span>, price: <span>{r.price}</span> }))} />
        {shown.length === 0 && <div style={{ padding: "32px", textAlign: "center", color: "var(--ink-4)", fontSize: "14px" }}>해당 필터 후보가 없습니다.</div>}
      </Card>
      <p style={{ margin: "14px 2px 0", fontSize: "12.5px", color: "var(--ink-3)", display: "flex", alignItems: "center", gap: "8px" }}><StatusBadge status="hold" size="sm">주의</StatusBadge>이 표는 '상담 예약/방문 확정'이 아니라 '후보군 검토'입니다. 대표님·소영님 선택 후 상담 후보로 승격해야 합니다.</p>
    </div>
  );
}
window.VenuesScreen = VenuesScreen;