// Green Voice — Golf Course list screen

function GVCourseScreen({ nav }) {
  const [filter, setFilter] = React.useState('전체');
  const [view, setView] = React.useState('list'); // list | map

  const filters = ['전체', '수도권', '충청권', '강원권', '제주권', '영남권'];
  const qualityChips = ['그린 상태', '캐디 서비스', '그늘집', '진행 속도', '시설', '가성비'];

  return (
    <div style={{ background: GV.color.surface, minHeight: '100%', paddingBottom: 100 }}>
      {/* Search bar */}
      <div style={{ padding: '12px 20px 4px' }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          background: GV.color.white,
          borderRadius: 999,
          padding: '10px 16px',
          border: `1px solid ${GV.color.borderSubtle}`,
        }}>
          <Icon name="search" size={18} color={GV.color.outline} />
          <input
            placeholder="골프장 이름 또는 지역 검색"
            style={{
              border: 'none',
              outline: 'none',
              background: 'transparent',
              flex: 1,
              fontFamily: GV.font.sans,
              fontSize: 14,
              color: GV.color.onSurface,
            }}
          />
          <Icon name="tune" size={18} color={GV.color.forestDeep} />
        </div>
      </div>

      {/* Region filters */}
      <div
        className="gv-hscroll"
        style={{
          display: 'flex',
          gap: 8,
          overflowX: 'auto',
          padding: '10px 20px 4px',
        }}
      >
        {filters.map(f => (
          <Chip key={f} active={filter === f} onClick={() => setFilter(f)}>{f}</Chip>
        ))}
      </div>

      {/* Quality filters */}
      <div
        className="gv-hscroll"
        style={{
          display: 'flex',
          gap: 8,
          overflowX: 'auto',
          padding: '6px 20px 12px',
        }}
      >
        {qualityChips.map(f => (
          <Chip key={f} style={{ background: GV.color.surfaceContainer, border: 'none', color: GV.color.onSurfaceVariant }}>
            <Icon name="add" size={12} style={{ marginRight: 2 }} />
            {f}
          </Chip>
        ))}
      </div>

      {/* List/map toggle */}
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '8px 20px 12px',
      }}>
        <div style={{
          fontFamily: GV.font.sans,
          fontSize: 12,
          color: GV.color.onSurfaceVariant,
        }}>
          총 <span style={{ fontWeight: 700, color: GV.color.forestDeep }}>{GV_COURSES.length}</span>개 골프장 · GV Score 순
        </div>
        <div style={{
          display: 'flex',
          background: GV.color.surfaceContainer,
          borderRadius: 999,
          padding: 3,
        }}>
          {[
            { id: 'list', icon: 'view_list' },
            { id: 'map', icon: 'map' },
          ].map(v => (
            <button
              key={v.id}
              onClick={() => setView(v.id)}
              style={{
                background: view === v.id ? GV.color.white : 'transparent',
                border: 'none',
                borderRadius: 999,
                padding: '5px 9px',
                cursor: 'pointer',
                display: 'flex',
                color: view === v.id ? GV.color.forestDeep : GV.color.outline,
                boxShadow: view === v.id ? GV.shadow.card : 'none',
              }}
            >
              <Icon name={v.icon} size={16} />
            </button>
          ))}
        </div>
      </div>

      {/* List */}
      {view === 'list' && (
        <div style={{ padding: '0 20px', display: 'grid', gap: 14 }}>
          {GV_COURSES.map(c => (
            <Card key={c.id} onClick={() => nav.openCourse(c.id)}>
              <ImageBox src={c.image} alt={c.name} height={160}>
                {c.verified && <VerifiedBadge style={{ position: 'absolute', top: 10, left: 10 }} />}
                <div style={{
                  position: 'absolute',
                  bottom: 12,
                  right: 12,
                  background: 'rgba(26,67,46,0.94)',
                  color: GV.color.prestigeGold,
                  padding: '6px 12px',
                  borderRadius: 8,
                  fontFamily: GV.font.serif,
                  fontSize: 22,
                  fontWeight: 700,
                  lineHeight: 1,
                  letterSpacing: '-0.02em',
                }}>{c.score}</div>
              </ImageBox>
              <div style={{ padding: 16 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <h3 style={{
                      fontFamily: GV.font.serif,
                      fontSize: 17,
                      fontWeight: 600,
                      color: GV.color.forestDeep,
                      margin: 0,
                      letterSpacing: '-0.01em',
                    }}>{c.name}</h3>
                    <div style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: 4,
                      fontFamily: GV.font.sans,
                      fontSize: 12,
                      color: GV.color.outline,
                      marginTop: 2,
                    }}>
                      <Icon name="location_on" size={13} />
                      {c.region}
                    </div>
                  </div>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 11,
                    color: GV.color.secondary,
                    fontWeight: 600,
                  }}>{c.priceRange}</div>
                </div>

                <p style={{
                  fontFamily: GV.font.sans,
                  fontSize: 12.5,
                  color: GV.color.onSurfaceVariant,
                  margin: '10px 0 0',
                  lineHeight: 1.4,
                  display: '-webkit-box',
                  WebkitLineClamp: 2,
                  WebkitBoxOrient: 'vertical',
                  overflow: 'hidden',
                }}>{c.summary}</p>

                <div style={{ display: 'flex', gap: 6, marginTop: 12, flexWrap: 'wrap' }}>
                  {c.tags.map(t => (
                    <span key={t} style={{
                      background: GV.color.surfaceContainerLow,
                      color: GV.color.forestDeep,
                      fontFamily: GV.font.sans,
                      fontSize: 10.5,
                      fontWeight: 600,
                      padding: '3px 8px',
                      borderRadius: 4,
                    }}>{t}</span>
                  ))}
                </div>

                <div style={{
                  marginTop: 12,
                  paddingTop: 12,
                  borderTop: `1px solid ${GV.color.borderSubtle}`,
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  fontFamily: GV.font.sans,
                  fontSize: 11,
                  color: GV.color.outline,
                }}>
                  <span><Icon name="rate_review" size={12} style={{ verticalAlign: -2 }} /> 방문 인증 리뷰 {c.reviewCount.toLocaleString()}건</span>
                  <span style={{ color: GV.color.forestDeep, fontWeight: 600 }}>상세 보기 →</span>
                </div>
              </div>
            </Card>
          ))}
        </div>
      )}

      {/* Map placeholder */}
      {view === 'map' && (
        <div style={{
          padding: 20,
          height: 500,
        }}>
          <div style={{
            width: '100%',
            height: '100%',
            background: 'linear-gradient(135deg, #d8e5db 0%, #e8ede5 100%)',
            borderRadius: 12,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 8,
            border: `1px solid ${GV.color.borderSubtle}`,
            position: 'relative',
            overflow: 'hidden',
          }}>
            {/* Fake map pins */}
            {[
              { top: '25%', left: '30%', name: '안양', s: 9.8 },
              { top: '40%', left: '55%', name: '트리니티', s: 9.4 },
              { top: '60%', left: '25%', name: '남부', s: 9.0 },
              { top: '30%', left: '70%', name: '해슬리', s: 9.2 },
            ].map((p, i) => (
              <div key={i} style={{
                position: 'absolute',
                top: p.top,
                left: p.left,
                transform: 'translate(-50%, -100%)',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
              }}>
                <div style={{
                  background: GV.color.forestDeep,
                  color: GV.color.prestigeGold,
                  padding: '4px 10px',
                  borderRadius: 999,
                  fontFamily: GV.font.serif,
                  fontSize: 13,
                  fontWeight: 700,
                  boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
                }}>{p.s}</div>
                <div style={{
                  width: 2,
                  height: 8,
                  background: GV.color.forestDeep,
                }} />
                <div style={{
                  fontFamily: GV.font.sans,
                  fontSize: 11,
                  fontWeight: 600,
                  color: GV.color.forestDeep,
                  marginTop: 2,
                  textShadow: '0 1px 2px rgba(255,255,255,0.9)',
                }}>{p.name}</div>
              </div>
            ))}
            <Icon name="map" size={40} color={GV.color.outline} />
            <div style={{
              fontFamily: GV.font.sans,
              fontSize: 13,
              color: GV.color.outline,
            }}>지도 뷰 (프로토타입)</div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { GVCourseScreen });