// Green Voice — 라운드 탭 (원본 _4 기반)
// 서브탭: 이번 라운드 · 연부킹 예약 요청 · 라운드 현황

function GVRoundScreen({ nav }) {
  const [sub, setSub] = React.useState('current');

  const subs = [
    { id: 'current', label: '이번 라운드' },
    { id: 'annual', label: '연부킹 예약 요청' },
    { id: 'status', label: '라운드 현황' },
  ];

  return (
    <div style={{ background: GV.color.surface, minHeight: '100%', paddingBottom: 100 }}>
      {/* Header */}
      <div style={{
        padding: '20px 20px 16px',
        borderBottom: `1px solid ${GV.color.borderSubtle}`,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <h2 style={{
              fontFamily: GV.font.serif,
              fontSize: 26,
              fontWeight: 600,
              color: GV.color.forestPrimary,
              margin: 0,
              letterSpacing: '-0.015em',
            }}>라운드</h2>
            <p style={{
              fontFamily: GV.font.sans,
              fontSize: 13,
              color: GV.color.onSurfaceVariant,
              margin: '4px 0 0',
            }}>좋은 라운드는 예약 전 판단에서 시작됩니다.</p>
          </div>
          <button style={{
            background: 'none',
            border: 'none',
            padding: 8,
            cursor: 'pointer',
            color: GV.color.forestPrimary,
            display: 'flex',
          }}>
            <Icon name="calendar_month" size={22} />
          </button>
        </div>
      </div>

      {/* Sub tabs */}
      <div style={{
        display: 'flex',
        overflowX: 'auto',
        borderBottom: `1px solid ${GV.color.borderSubtle}`,
      }} className="gv-hscroll">
        {subs.map(s => (
          <button
            key={s.id}
            onClick={() => setSub(s.id)}
            style={{
              padding: '14px 18px',
              background: 'none',
              border: 'none',
              borderBottom: `2px solid ${sub === s.id ? GV.color.forestPrimary : 'transparent'}`,
              fontFamily: GV.font.sans,
              fontSize: 12,
              fontWeight: 700,
              letterSpacing: '0.08em',
              color: sub === s.id ? GV.color.forestPrimary : GV.color.onSurfaceVariant,
              whiteSpace: 'nowrap',
              cursor: 'pointer',
              marginBottom: -1,
            }}
          >{s.label}</button>
        ))}
      </div>

      {sub === 'current' && <CurrentRoundView nav={nav} />}
      {sub === 'annual' && <AnnualBookingView nav={nav} />}
      {sub === 'status' && <RoundStatusView nav={nav} />}
    </div>
  );
}

function CurrentRoundView({ nav }) {
  const rounds = [
    {
      id: 'labievelle',
      name: '파인비치 골프링크스',
      score: 94,
      green: '우수', caddie: '최상', pace: '보통',
      date: '10.24 (목) 07:30',
      price: '₩ 280,000',
      reviewCount: 128,
      verified: true,
    },
    {
      id: 'jade',
      name: '제이드팰리스 GC',
      score: 92,
      green: '우수', caddie: '우수', pace: '쾌적',
      date: '10.28 (월) 13:10',
      price: '₩ 240,000',
      reviewCount: 85,
      verified: false,
    },
  ];
  const rec = GV_COURSES.find(c => c.id === 'nine-bridges');

  return (
    <div style={{ padding: '20px 20px 0' }}>
      {/* Trust status card */}
      <Card style={{ marginBottom: 20 }}>
        <div style={{ display: 'flex', gap: 12, padding: 14, alignItems: 'flex-start' }}>
          <div style={{
            width: 40, height: 40, borderRadius: 999,
            background: GV.color.surfaceCream,
            border: `1px solid ${GV.color.prestigeGold}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0,
            color: GV.color.prestigeGold,
          }}>
            <Icon name="shield_lock" size={20} />
          </div>
          <div>
            <div style={{
              fontFamily: GV.font.serif,
              fontSize: 15,
              fontWeight: 600,
              color: GV.color.forestPrimary,
            }}>예약 신뢰 상태: 안정</div>
            <div style={{
              fontFamily: GV.font.sans,
              fontSize: 12,
              color: GV.color.onSurfaceVariant,
              marginTop: 2,
            }}>최근 라운드 요청 응답이 원활합니다.</div>
          </div>
        </div>
      </Card>

      <h3 style={{
        fontFamily: GV.font.serif,
        fontSize: 17,
        fontWeight: 600,
        color: GV.color.forestPrimary,
        margin: '0 0 14px',
        letterSpacing: '-0.01em',
      }}>품질 기준으로 찾는 이번 라운드</h3>

      <div style={{ display: 'grid', gap: 14 }}>
        {rounds.map(r => (
          <Card key={r.id} onClick={() => nav.openCourse(r.id)}>
            <div style={{ padding: 16 }}>
              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'flex-start',
                marginBottom: 12,
              }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <h4 style={{
                    fontFamily: GV.font.serif,
                    fontSize: 16,
                    fontWeight: 600,
                    color: GV.color.onSurface,
                    margin: 0,
                  }}>{r.name}</h4>
                  <div style={{
                    display: 'flex',
                    alignItems: 'baseline',
                    gap: 4,
                    marginTop: 4,
                  }}>
                    <span style={{
                      fontFamily: GV.font.serif,
                      fontSize: 22,
                      fontWeight: 700,
                      color: GV.color.forestDeep,
                      lineHeight: 1,
                      letterSpacing: '-0.02em',
                    }}>{r.score}</span>
                    <span style={{
                      fontFamily: GV.font.sans,
                      fontSize: 12,
                      color: GV.color.onSurfaceVariant,
                    }}>GV Score</span>
                  </div>
                </div>
                {r.verified && (
                  <span style={{
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: 4,
                    padding: '3px 8px',
                    borderRadius: 999,
                    background: GV.color.surfaceCream,
                    border: `1px solid ${GV.color.prestigeGold}`,
                    color: GV.color.secondary,
                    fontFamily: GV.font.sans,
                    fontSize: 10,
                    fontWeight: 700,
                    letterSpacing: '0.1em',
                  }}>
                    <Icon name="verified" size={11} color={GV.color.prestigeGold} />
                    검증됨
                  </span>
                )}
              </div>

              <div style={{
                display: 'grid',
                gridTemplateColumns: '1fr 1fr 1fr',
                borderTop: `1px solid ${GV.color.borderSubtle}`,
                padding: '12px 0',
                marginBottom: 12,
              }}>
                {[
                  { label: '그린 상태', v: r.green },
                  { label: '캐디 서비스', v: r.caddie, border: true },
                  { label: '진행 속도', v: r.pace },
                ].map((m, i) => (
                  <div key={m.label} style={{
                    textAlign: 'center',
                    borderLeft: m.border ? `1px solid ${GV.color.borderSubtle}` : 'none',
                    borderRight: m.border ? `1px solid ${GV.color.borderSubtle}` : 'none',
                  }}>
                    <div style={{
                      fontFamily: GV.font.sans,
                      fontSize: 9.5,
                      fontWeight: 700,
                      letterSpacing: '0.14em',
                      color: GV.color.outline,
                    }}>{m.label}</div>
                    <div style={{
                      fontFamily: GV.font.serif,
                      fontSize: 15,
                      fontWeight: 600,
                      color: GV.color.forestPrimary,
                      marginTop: 3,
                    }}>{m.v}</div>
                  </div>
                ))}
              </div>

              <div style={{
                fontFamily: GV.font.sans,
                fontSize: 11,
                color: GV.color.onSurfaceVariant,
                textAlign: 'center',
                marginBottom: 12,
              }}>최근 리뷰 {r.reviewCount}건 기준</div>

              <div style={{
                background: GV.color.surface,
                padding: '10px 12px',
                borderRadius: 8,
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                marginBottom: 12,
              }}>
                <div style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 6,
                  fontFamily: GV.font.sans,
                  fontSize: 12.5,
                  color: GV.color.onSurface,
                }}>
                  <Icon name="event" size={16} color={GV.color.forestPrimary} />
                  {r.date}
                </div>
                <div style={{
                  fontFamily: GV.font.serif,
                  fontSize: 15,
                  fontWeight: 600,
                  color: GV.color.forestDeep,
                }}>{r.price}</div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                <button
                  onClick={(e) => { e.stopPropagation(); nav.startBooking(r.id); }}
                  style={{
                    background: GV.color.white,
                    color: GV.color.forestDeep,
                    border: `1px solid ${GV.color.forestDeep}`,
                    borderRadius: 8,
                    padding: '10px',
                    fontFamily: GV.font.sans,
                    fontSize: 13,
                    fontWeight: 600,
                    cursor: 'pointer',
                  }}
                >일반 예약</button>
                <button
                  onClick={(e) => { e.stopPropagation(); nav.startAnnualBooking(r.id); }}
                  style={{
                    background: GV.color.forestDeep,
                    color: GV.color.white,
                    border: 'none',
                    borderRadius: 8,
                    padding: '10px',
                    fontFamily: GV.font.sans,
                    fontSize: 13,
                    fontWeight: 600,
                    cursor: 'pointer',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    gap: 5,
                  }}
                >
                  <Icon name="workspace_premium" size={13} color={GV.color.prestigeGold} filled />
                  연부킹 문의
                </button>
              </div>
            </div>
          </Card>
        ))}
      </div>

      {/* Recommended round card */}
      <div style={{
        background: GV.color.surfaceContainer,
        borderRadius: 12,
        border: `1px solid ${GV.color.borderSubtle}`,
        padding: 18,
        marginTop: 20,
      }}>
        <h3 style={{
          fontFamily: GV.font.serif,
          fontSize: 15,
          fontWeight: 600,
          color: GV.color.forestPrimary,
          margin: 0,
        }}>오늘의 추천 라운드</h3>
        <p style={{
          fontFamily: GV.font.sans,
          fontSize: 12,
          color: GV.color.onSurfaceVariant,
          margin: '4px 0 12px',
          lineHeight: 1.5,
        }}>방문 인증 리뷰와 GV Score를 기준으로 컨디션이 안정적인 골프장을 추천합니다.</p>
        <div style={{
          background: GV.color.white,
          borderRadius: 8,
          padding: 16,
          border: `1px solid ${GV.color.borderSubtle}`,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
            <div>
              <h4 style={{
                fontFamily: GV.font.serif,
                fontSize: 17,
                fontWeight: 600,
                color: GV.color.forestDeep,
                margin: 0,
              }}>{rec.name}</h4>
              <p style={{
                fontFamily: GV.font.sans,
                fontSize: 12,
                color: GV.color.onSurfaceVariant,
                margin: '2px 0 0',
              }}>{rec.region}</p>
            </div>
            <div style={{
              width: 56,
              height: 56,
              borderRadius: 999,
              background: GV.color.forestDeep,
              color: GV.color.prestigeGold,
              border: `2px solid ${GV.color.prestigeGold}`,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontFamily: GV.font.serif,
              fontSize: 18,
              fontWeight: 700,
              boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
              letterSpacing: '-0.02em',
            }}>{rec.score}</div>
          </div>
          <div style={{
            borderTop: `1px solid ${GV.color.borderSubtle}`,
            paddingTop: 14,
            marginTop: 14,
            textAlign: 'right',
          }}>
            <button
              onClick={() => nav.startAnnualBooking(rec.id)}
              style={{
                background: 'none',
                border: 'none',
                fontFamily: GV.font.sans,
                fontSize: 13,
                fontWeight: 600,
                color: GV.color.forestDeep,
                cursor: 'pointer',
                display: 'inline-flex',
                alignItems: 'center',
                gap: 4,
              }}
            >
              <Icon name="workspace_premium" size={14} color={GV.color.prestigeGold} filled />
              연부킹 문의 (Premium)
              <Icon name="arrow_forward" size={14} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function AnnualBookingView({ nav }) {
  const steps = [
    { icon: 'edit_document', label1: '요청', label2: '작성', active: true, done: true },
    { icon: 'hourglass_top', label1: '조건', label2: '확인 중', active: false },
    { icon: 'check_circle', label1: '확정', label2: '', active: false },
  ];
  return (
    <div style={{ padding: '20px 20px 0' }}>
      {/* Premium status banner */}
      {!nav.isPremium ? (
        <div
          onClick={() => nav.startMembership()}
          style={{
            background: GV.color.forestDeep,
            borderRadius: 12,
            padding: 16,
            marginBottom: 16,
            cursor: 'pointer',
            position: 'relative',
            overflow: 'hidden',
            boxShadow: '0 4px 14px rgba(26,67,46,0.15)',
          }}
        >
          <div style={{
            position: 'absolute',
            right: -20, top: -14,
            opacity: 0.14,
            color: GV.color.prestigeGold,
          }}>
            <Icon name="workspace_premium" size={100} filled />
          </div>
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div>
              <div style={{
                fontFamily: GV.font.sans,
                fontSize: 9.5,
                fontWeight: 800,
                letterSpacing: '0.18em',
                color: GV.color.prestigeGold,
                marginBottom: 4,
              }}>GV PREMIUM · CONCIERGE</div>
              <div style={{
                fontFamily: GV.font.serif,
                fontSize: 15,
                fontWeight: 600,
                color: GV.color.white,
                letterSpacing: '-0.01em',
                marginBottom: 2,
              }}>연부킹은 프리미엄 멤버 전용입니다</div>
              <div style={{
                fontFamily: GV.font.sans,
                fontSize: 12,
                color: GV.color.primaryFixedDim,
                lineHeight: 1.45,
              }}>전담 컨시어지가 조건 조율까지 대신 처리</div>
            </div>
            <div style={{ flex: 1 }} />
            <Icon name="chevron_right" size={20} color={GV.color.prestigeGold} />
          </div>
        </div>
      ) : (
        <div style={{
          background: GV.color.white,
          border: `1px solid ${GV.color.prestigeGold}66`,
          borderRadius: 12,
          padding: 14,
          marginBottom: 16,
          display: 'flex',
          alignItems: 'center',
          gap: 12,
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: 999,
            backgroundImage: `url(${GV_USER.conciergeAvatar})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            border: `1px solid ${GV.color.prestigeGold}`,
            flexShrink: 0,
          }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: GV.font.sans,
              fontSize: 9.5,
              fontWeight: 800,
              letterSpacing: '0.14em',
              color: GV.color.prestigeGold,
            }}>PREMIUM MEMBER</div>
            <div style={{
              fontFamily: GV.font.serif,
              fontSize: 14,
              fontWeight: 600,
              color: GV.color.forestPrimary,
              marginTop: 1,
            }}>전담 컨시어지 {GV_USER.conciergeName}</div>
          </div>
          <button
            onClick={() => nav.startConcierge()}
            style={{
              background: GV.color.forestDeep,
              color: GV.color.white,
              border: 'none',
              borderRadius: 999,
              padding: '8px 14px',
              fontFamily: GV.font.sans,
              fontSize: 12,
              fontWeight: 700,
              cursor: 'pointer',
              display: 'inline-flex',
              alignItems: 'center',
              gap: 4,
            }}
          >
            <Icon name="chat" size={13} filled color={GV.color.prestigeGold} />
            상담
          </button>
        </div>
      )}

      <div style={{
        background: GV.color.white,
        border: `1px solid ${GV.color.borderSubtle}`,
        borderRadius: 12,
        padding: 18,
      }}>
        <h3 style={{
          fontFamily: GV.font.serif,
          fontSize: 16,
          fontWeight: 600,
          color: GV.color.forestPrimary,
          margin: '0 0 16px',
          display: 'flex',
          alignItems: 'center',
          gap: 8,
        }}>
          <Icon name="pending_actions" size={20} color={GV.color.forestPrimary} />
          연부킹 예약 요청
        </h3>

        {/* Progress line */}
        <div style={{ position: 'relative', padding: '4px 20px 20px' }}>
          <div style={{
            position: 'absolute',
            top: 20,
            left: 40,
            right: 40,
            height: 2,
            background: GV.color.surfaceContainerHigh,
          }} />
          <div style={{
            position: 'relative',
            display: 'flex',
            justifyContent: 'space-between',
          }}>
            {steps.map((s, i) => (
              <div key={i} style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                gap: 8,
              }}>
                <div style={{
                  width: 32,
                  height: 32,
                  borderRadius: 999,
                  background: s.active || s.done ? GV.color.forestDeep : GV.color.surfaceContainer,
                  color: s.active || s.done ? GV.color.white : GV.color.onSurfaceVariant,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  border: `2px solid ${GV.color.white}`,
                  boxShadow: s.active ? `0 0 0 3px ${GV.color.primaryFixed}` : 'none',
                }}>
                  <Icon name={s.icon} size={16} color="currentColor" />
                </div>
                <div style={{
                  fontFamily: GV.font.sans,
                  fontSize: 9.5,
                  fontWeight: 700,
                  letterSpacing: '0.12em',
                  color: s.active || s.done ? GV.color.forestPrimary : GV.color.outline,
                  textAlign: 'center',
                }}>
                  {s.label1}
                  {s.label2 && <><br/>{s.label2}</>}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gap: 8 }}>
          <button
            onClick={() => nav.startAnnualBooking('labievelle')}
            style={{
              width: '100%',
              background: nav.isPremium ? GV.color.forestDeep : GV.color.forestDeep,
              border: 'none',
              color: GV.color.white,
              borderRadius: 8,
              padding: '12px',
              fontFamily: GV.font.sans,
              fontSize: 13,
              fontWeight: 700,
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 6,
            }}
          >
            <Icon name={nav.isPremium ? 'chat' : 'workspace_premium'} size={16} color={GV.color.prestigeGold} filled />
            {nav.isPremium ? '컨시어지와 상담하기' : 'Premium 가입하고 연부킹 문의'}
          </button>
          <button style={{
            width: '100%',
            background: GV.color.surface,
            border: 'none',
            color: GV.color.onSurfaceVariant,
            borderRadius: 8,
            padding: '10px',
            fontFamily: GV.font.sans,
            fontSize: 13,
            fontWeight: 500,
            cursor: 'pointer',
          }}>후보 비교 보기</button>
        </div>
      </div>

      {/* Existing requests */}
      <div style={{ marginTop: 20 }}>
        <div style={{
          fontFamily: GV.font.sans,
          fontSize: 10,
          fontWeight: 700,
          letterSpacing: '0.16em',
          color: GV.color.outline,
          marginBottom: 10,
        }}>내 예약 요청 · 2건</div>
        {[
          { name: '라비에벨 CC 올드코스', date: '요청일 2024.10.20', status: '조건 확인 중', bg: '#fef3d9', color: '#775a19' },
          { name: '제이드팰리스 GC', date: '요청일 2024.10.18', status: '확정 완료', bg: GV.color.primaryFixed, color: GV.color.forestDeep },
        ].map((req, i) => (
          <Card key={i} style={{ marginBottom: 10 }}>
            <div style={{ padding: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div style={{
                    fontFamily: GV.font.serif,
                    fontSize: 15,
                    fontWeight: 600,
                    color: GV.color.forestPrimary,
                  }}>{req.name}</div>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 11,
                    color: GV.color.outline,
                    marginTop: 2,
                  }}>{req.date}</div>
                </div>
                <span style={{
                  fontFamily: GV.font.sans,
                  fontSize: 10,
                  fontWeight: 700,
                  letterSpacing: '0.1em',
                  padding: '4px 10px',
                  borderRadius: 999,
                  background: req.bg,
                  color: req.color,
                }}>{req.status}</span>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

function RoundStatusView({ nav }) {
  const rounds = [
    { name: '예정된 라운드', course: '라비에벨 CC · 7월 12일 (토)', dot: GV.color.prestigeGold, count: 2 },
    { name: '인증 대기 중', course: '해슬리 나인브릿지 · 완료', dot: '#4a90e2', count: 1 },
    { name: '리뷰 대기 중', course: '3건 · 트리니티, 안양, 제이드', dot: '#e04b3b', count: 3 },
    { name: '완료된 라운드', course: '올해 총 18회', dot: GV.color.outline, count: 18 },
  ];
  return (
    <div style={{ padding: '20px 20px 0' }}>
      <div style={{
        background: GV.color.white,
        border: `1px solid ${GV.color.borderSubtle}`,
        borderRadius: 12,
        padding: 4,
      }}>
        <h3 style={{
          fontFamily: GV.font.serif,
          fontSize: 15,
          fontWeight: 600,
          color: GV.color.forestPrimary,
          margin: '14px 16px 6px',
          display: 'flex',
          alignItems: 'center',
          gap: 6,
        }}>
          <Icon name="list_alt" size={18} color={GV.color.forestPrimary} />
          라운드 현황
        </h3>
        {rounds.map((r, i, arr) => (
          <div key={i} style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: '14px 16px',
            borderTop: `1px solid ${GV.color.borderSubtle}`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{
                width: 8,
                height: 8,
                borderRadius: 999,
                background: r.dot,
              }} />
              <div>
                <div style={{
                  fontFamily: GV.font.sans,
                  fontSize: 13,
                  fontWeight: 600,
                  color: GV.color.onSurface,
                }}>{r.name}</div>
                <div style={{
                  fontFamily: GV.font.sans,
                  fontSize: 11,
                  color: GV.color.outline,
                  marginTop: 1,
                }}>{r.course}</div>
              </div>
            </div>
            <div style={{
              fontFamily: GV.font.serif,
              fontSize: 20,
              fontWeight: 700,
              color: GV.color.forestPrimary,
            }}>{r.count}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { GVRoundScreen });