// Green Voice — 일반 예약 요청 플로우 (원본 _7 기반)
// 프리미엄이 아닌 일반 회원용 폼 기반 예약. 연부킹은 별도 컨시어지 채팅으로 처리.

function GVBookingFlow({ nav, initialCourseId }) {
  const course = GV_COURSES.find(c => c.id === initialCourseId) || GV_COURSES.find(c => c.id === 'labievelle');
  const [step, setStep] = React.useState(0);
  const [form, setForm] = React.useState({
    name: '김민석',
    phone: '010-1234-5678',
    group: '4인 1팀',
    request: '',
  });

  return (
    <div style={{ background: GV.color.surface, minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{
        display: 'flex',
        alignItems: 'center',
        padding: '12px 16px',
        borderBottom: `1px solid ${GV.color.borderSubtle}`,
        gap: 12,
        flexShrink: 0,
        background: GV.color.surface,
      }}>
        <button
          onClick={step === 0 ? nav.back : () => setStep(step - 1)}
          style={{ background: 'none', border: 'none', padding: 4, cursor: 'pointer', color: GV.color.forestDeep, display: 'flex' }}
        >
          <Icon name="arrow_back" size={22} />
        </button>
        <div style={{ flex: 1 }}>
          <div style={{
            fontFamily: GV.font.serif,
            fontSize: 15,
            fontWeight: 600,
            color: GV.color.forestPrimary,
          }}>일반 예약 요청</div>
          <div style={{
            fontFamily: GV.font.sans,
            fontSize: 10.5,
            fontWeight: 700,
            letterSpacing: '0.14em',
            color: GV.color.outline,
          }}>STEP {step + 1} / 2</div>
        </div>
        <button onClick={nav.back} style={{ background: 'none', border: 'none', padding: 4, cursor: 'pointer', color: GV.color.outline, display: 'flex' }}>
          <Icon name="close" size={22} />
        </button>
      </div>

      <div style={{ height: 3, background: GV.color.surfaceContainer, flexShrink: 0 }}>
        <div style={{
          height: '100%',
          width: `${((step + 1) / 2) * 100}%`,
          background: GV.color.forestDeep,
          transition: 'width 0.4s ease',
        }} />
      </div>

      <div style={{ flex: 1, overflowY: 'auto' }}>
        {step === 0 && <BookingStepForm course={course} form={form} setForm={setForm} onNext={() => setStep(1)} />}
        {step === 1 && <BookingStepComplete course={course} form={form} nav={nav} />}
      </div>
    </div>
  );
}

function BookingStepForm({ course, form, setForm, onNext }) {
  const update = (k, v) => setForm({ ...form, [k]: v });

  return (
    <div style={{ padding: '20px 20px 40px' }}>
      {/* Selected round summary card */}
      <Card>
        <div style={{ padding: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div style={{
                fontFamily: GV.font.sans,
                fontSize: 10,
                fontWeight: 700,
                letterSpacing: '0.16em',
                color: GV.color.prestigeGold,
                marginBottom: 4,
              }}>SELECTED ROUND</div>
              <h2 style={{
                fontFamily: GV.font.serif,
                fontSize: 20,
                fontWeight: 600,
                color: GV.color.forestPrimary,
                margin: 0,
                letterSpacing: '-0.015em',
              }}>{course.name.replace(' 올드코스', '')}</h2>
              <p style={{
                fontFamily: GV.font.sans,
                fontSize: 13,
                color: GV.color.onSurfaceVariant,
                margin: '2px 0 0',
              }}>{course.holes || '올드코스 18홀'}</p>
            </div>
            <div style={{
              opacity: 0.4,
              color: GV.color.forestPrimary,
            }}>
              <Icon name="golf_course" size={32} />
            </div>
          </div>

          <div style={{
            marginTop: 14,
            paddingTop: 14,
            borderTop: `1px solid ${GV.color.borderSubtle}`,
            display: 'grid',
            gap: 10,
          }}>
            {[
              { icon: 'calendar_today', v: course.teeTime?.split(' · ')[0] || '7월 12일 토요일' },
              { icon: 'schedule', v: (course.teeTime?.split(' · ')[1]) || '07:30 Tee-off' },
              { icon: 'payments', v: '280,000원', sub: ' / 1인' },
            ].map((r, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <Icon name={r.icon} size={18} color={GV.color.forestDeep} />
                <span style={{
                  fontFamily: GV.font.sans,
                  fontSize: 13,
                  fontWeight: 600,
                  color: GV.color.onSurface,
                }}>{r.v}
                  {r.sub && <span style={{ fontWeight: 400, color: GV.color.onSurfaceVariant }}>{r.sub}</span>}
                </span>
              </div>
            ))}
          </div>
        </div>
      </Card>

      {/* Requester Details */}
      <div style={{ marginTop: 30 }}>
        <div style={{
          fontFamily: GV.font.sans,
          fontSize: 10.5,
          fontWeight: 700,
          letterSpacing: '0.18em',
          color: GV.color.onSurfaceVariant,
          marginBottom: 14,
        }}>REQUESTER DETAILS</div>

        <div style={{ display: 'grid', gap: 20 }}>
          {/* Name */}
          <div>
            <label style={{
              fontFamily: GV.font.sans,
              fontSize: 10,
              fontWeight: 700,
              letterSpacing: '0.14em',
              color: GV.color.forestDeep,
              marginLeft: 4,
              display: 'block',
              marginBottom: 6,
            }}>예약자 성함</label>
            <input
              value={form.name}
              onChange={e => update('name', e.target.value)}
              placeholder="성함을 입력해주세요"
              style={{
                width: '100%',
                background: GV.color.surfaceCream,
                border: 'none',
                borderBottom: `1.5px solid ${GV.color.borderSubtle}`,
                borderRadius: 4,
                padding: '10px 14px',
                fontFamily: GV.font.sans,
                fontSize: 14,
                color: GV.color.onSurface,
                outline: 'none',
                boxSizing: 'border-box',
                transition: 'border-color 0.2s',
              }}
              onFocus={e => e.target.style.borderBottomColor = GV.color.forestDeep}
              onBlur={e => e.target.style.borderBottomColor = GV.color.borderSubtle}
            />
          </div>

          {/* Phone */}
          <div>
            <label style={{
              fontFamily: GV.font.sans,
              fontSize: 10,
              fontWeight: 700,
              letterSpacing: '0.14em',
              color: GV.color.forestDeep,
              marginLeft: 4,
              display: 'block',
              marginBottom: 6,
            }}>연락처</label>
            <input
              value={form.phone}
              onChange={e => update('phone', e.target.value)}
              placeholder="연락처를 입력해주세요"
              style={{
                width: '100%',
                background: GV.color.surfaceCream,
                border: 'none',
                borderBottom: `1.5px solid ${GV.color.borderSubtle}`,
                borderRadius: 4,
                padding: '10px 14px',
                fontFamily: GV.font.sans,
                fontSize: 14,
                color: GV.color.onSurface,
                outline: 'none',
                boxSizing: 'border-box',
              }}
            />
          </div>

          {/* Group */}
          <div>
            <label style={{
              fontFamily: GV.font.sans,
              fontSize: 10,
              fontWeight: 700,
              letterSpacing: '0.14em',
              color: GV.color.forestDeep,
              marginLeft: 4,
              display: 'block',
              marginBottom: 8,
            }}>동반자 구성</label>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {['4인 1팀', '기타 구성'].map(g => {
                const active = form.group === g;
                return (
                  <button
                    key={g}
                    onClick={() => update('group', g)}
                    style={{
                      background: active ? GV.color.forestDeep : GV.color.surfaceCream,
                      color: active ? GV.color.white : GV.color.onSurfaceVariant,
                      border: `1px solid ${active ? GV.color.forestDeep : GV.color.borderSubtle}`,
                      borderRadius: 8,
                      padding: '11px',
                      fontFamily: GV.font.sans,
                      fontSize: 13,
                      fontWeight: active ? 700 : 500,
                      cursor: 'pointer',
                      transition: 'all 0.15s',
                    }}
                  >{g}</button>
                );
              })}
            </div>
          </div>
        </div>
      </div>

      {/* Additional Requests */}
      <div style={{ marginTop: 30 }}>
        <div style={{
          fontFamily: GV.font.sans,
          fontSize: 10.5,
          fontWeight: 700,
          letterSpacing: '0.18em',
          color: GV.color.onSurfaceVariant,
          marginBottom: 14,
        }}>ADDITIONAL REQUESTS</div>
        <label style={{
          fontFamily: GV.font.sans,
          fontSize: 10,
          fontWeight: 700,
          letterSpacing: '0.14em',
          color: GV.color.forestDeep,
          marginLeft: 4,
          display: 'block',
          marginBottom: 6,
        }}>추가 요청사항</label>
        <textarea
          value={form.request}
          onChange={e => update('request', e.target.value)}
          rows={4}
          placeholder="특정 티타임 선호, 못 먹는 음식 등 요청사항을 자유롭게 남겨주세요."
          style={{
            width: '100%',
            background: GV.color.surfaceCream,
            border: `1px solid ${GV.color.borderSubtle}`,
            borderRadius: 12,
            padding: '14px',
            fontFamily: GV.font.sans,
            fontSize: 13,
            color: GV.color.onSurface,
            outline: 'none',
            resize: 'none',
            lineHeight: 1.5,
            boxSizing: 'border-box',
          }}
        />
      </div>

      {/* Trust & Process Notice */}
      <div style={{
        marginTop: 24,
        background: GV.color.surfaceContainer,
        borderLeft: `4px solid ${GV.color.prestigeGold}`,
        padding: 14,
        borderRadius: '0 8px 8px 0',
        display: 'flex',
        gap: 10,
      }}>
        <Icon name="info" size={20} color={GV.color.prestigeGold} style={{ flexShrink: 0 }} />
        <p style={{
          fontFamily: GV.font.sans,
          fontSize: 12,
          color: GV.color.onSurfaceVariant,
          margin: 0,
          lineHeight: 1.55,
        }}>
          입력하신 조건으로 골프장에 예약을 요청합니다.<br/>
          <span style={{ color: GV.color.onSurface, fontWeight: 600 }}>확정 여부는 전담 컨시어지가 확인 후 푸시 알림으로 안내해 드립니다.</span>
        </p>
      </div>

      <button
        onClick={onNext}
        style={{
          marginTop: 32,
          width: '100%',
          background: GV.color.forestDeep,
          color: GV.color.white,
          border: 'none',
          borderRadius: 12,
          padding: '16px',
          fontFamily: GV.font.sans,
          fontSize: 15,
          fontWeight: 600,
          cursor: 'pointer',
          boxShadow: '0 4px 12px rgba(26,67,46,0.15)',
        }}
      >예약 요청 제출</button>
    </div>
  );
}

function BookingStepComplete({ course, form, nav }) {
  return (
    <div style={{ padding: '40px 20px', textAlign: 'center' }}>
      <div style={{
        width: 96, height: 96,
        borderRadius: 999,
        background: `linear-gradient(135deg, ${GV.color.forestDeep} 0%, #2d5a41 100%)`,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        margin: '0 auto 24px',
        boxShadow: '0 10px 30px rgba(26,67,46,0.25)',
      }}>
        <Icon name="check_circle" size={52} color={GV.color.prestigeGold} />
      </div>

      <div style={{
        fontFamily: GV.font.sans,
        fontSize: 10,
        fontWeight: 700,
        letterSpacing: '0.16em',
        color: GV.color.prestigeGold,
        marginBottom: 6,
      }}>REQUEST SUBMITTED</div>
      <h2 style={{
        fontFamily: GV.font.serif,
        fontSize: 22,
        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: '10px 0 0',
        lineHeight: 1.6,
      }}><b style={{ color: GV.color.forestPrimary }}>{course.name}</b><br/>
      {course.teeTime || '7월 12일 토요일 · 07:30'} · {form.group}<br/>
      골프장 확인 후 알림으로 안내해드립니다</p>

      <Card style={{ marginTop: 28, textAlign: 'left' }}>
        <div style={{ padding: 18 }}>
          <div style={{
            fontFamily: GV.font.sans,
            fontSize: 10,
            fontWeight: 700,
            letterSpacing: '0.16em',
            color: GV.color.secondary,
            marginBottom: 14,
          }}>REQUEST TIMELINE</div>

          {[
            { done: true, label: '요청 접수 완료', time: '방금 전' },
            { done: false, active: true, label: '컨시어지 확인 중', time: '평균 15분 이내' },
            { done: false, label: '골프장 조건 확인', time: '' },
            { done: false, label: '확정 알림', time: '' },
          ].map((t, i, arr) => (
            <div key={i} style={{ display: 'flex', gap: 12, marginBottom: i === arr.length - 1 ? 0 : 12 }}>
              <div style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
              }}>
                <div style={{
                  width: 20,
                  height: 20,
                  borderRadius: 999,
                  background: t.done ? GV.color.forestDeep : (t.active ? GV.color.prestigeGold : GV.color.surfaceContainer),
                  color: 'white',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  border: t.active ? `2px solid ${GV.color.prestigeGold}44` : 'none',
                }}>
                  {t.done && <Icon name="check" size={12} color="white" />}
                </div>
                {i < arr.length - 1 && (
                  <div style={{
                    width: 2,
                    flex: 1,
                    minHeight: 20,
                    background: t.done ? GV.color.forestDeep : GV.color.surfaceContainer,
                    marginTop: 2,
                    marginBottom: -2,
                  }} />
                )}
              </div>
              <div style={{ flex: 1, paddingBottom: 4 }}>
                <div style={{
                  fontFamily: GV.font.sans,
                  fontSize: 13,
                  fontWeight: t.active ? 700 : 600,
                  color: t.done || t.active ? GV.color.forestPrimary : GV.color.outline,
                }}>{t.label}</div>
                {t.time && (
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 11,
                    color: GV.color.outline,
                    marginTop: 1,
                  }}>{t.time}</div>
                )}
              </div>
            </div>
          ))}
        </div>
      </Card>

      <button
        onClick={nav.close}
        style={{
          marginTop: 24,
          width: '100%',
          background: GV.color.forestDeep,
          color: GV.color.white,
          border: 'none',
          borderRadius: 999,
          padding: '14px',
          fontFamily: GV.font.sans,
          fontSize: 15,
          fontWeight: 600,
          cursor: 'pointer',
        }}
      >확인</button>
      <button
        onClick={() => nav.go('round')}
        style={{
          marginTop: 8,
          width: '100%',
          background: 'none',
          color: GV.color.outline,
          border: 'none',
          padding: '10px',
          fontFamily: GV.font.sans,
          fontSize: 13,
          cursor: 'pointer',
        }}
      >라운드 현황에서 확인</button>
    </div>
  );
}

Object.assign(window, { GVBookingFlow });