// Green Voice — Visit Verification flow

function GVVerifyFlow({ nav, initialCourseId }) {
  const [step, setStep] = React.useState(0);
  const [courseId, setCourseId] = React.useState(initialCourseId || 'anyang');
  const [timeSlot, setTimeSlot] = React.useState(null);
  const course = GV_COURSES.find(c => c.id === courseId) || GV_COURSES[0];

  return (
    <div style={{ background: GV.color.surface, minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* Header */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        padding: '12px 16px',
        borderBottom: `1px solid ${GV.color.borderSubtle}`,
        gap: 12,
        flexShrink: 0,
      }}>
        <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.forestDeep,
          }}>방문 인증</div>
          <div style={{
            fontFamily: GV.font.sans,
            fontSize: 11,
            color: GV.color.outline,
          }}>STEP {step + 1} / 3</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>

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

      <div style={{ flex: 1, overflowY: 'auto' }}>
        {step === 0 && <VerifyStepLocation course={course} onNext={() => setStep(1)} />}
        {step === 1 && <VerifyStepTime course={course} timeSlot={timeSlot} onSelect={setTimeSlot} onNext={() => setStep(2)} />}
        {step === 2 && <VerifyStepComplete course={course} nav={nav} />}
      </div>
    </div>
  );
}

function VerifyStepLocation({ course, onNext }) {
  const [locked, setLocked] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setLocked(true), 1400);
    return () => clearTimeout(t);
  }, []);

  return (
    <div style={{ padding: '30px 20px' }}>
      <h2 style={{
        fontFamily: GV.font.serif,
        fontSize: 22,
        fontWeight: 600,
        color: GV.color.forestDeep,
        margin: 0,
        letterSpacing: '-0.015em',
      }}>현재 위치를 확인 중입니다</h2>
      <p style={{
        fontFamily: GV.font.sans,
        fontSize: 13,
        color: GV.color.onSurfaceVariant,
        margin: '6px 0 0',
        lineHeight: 1.5,
      }}>Green Voice는 GPS 데이터를 통해 실제 방문한 회원의 리뷰만 신뢰 지표로 반영합니다.</p>

      {/* Loading / detected UI */}
      <div style={{
        marginTop: 30,
        padding: 24,
        background: locked ? GV.color.primaryFixed : GV.color.surfaceContainerLow,
        borderRadius: 16,
        textAlign: 'center',
        border: `1px solid ${locked ? GV.color.forestDeep : GV.color.borderSubtle}`,
        transition: 'all 0.4s',
      }}>
        <div style={{
          width: 72,
          height: 72,
          borderRadius: 999,
          background: locked ? GV.color.forestDeep : GV.color.white,
          border: `3px solid ${locked ? GV.color.prestigeGold : GV.color.forestDeep}`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          margin: '0 auto',
          transition: 'all 0.4s',
        }}>
          <Icon name={locked ? 'check' : 'gps_fixed'}
            size={36}
            color={locked ? GV.color.prestigeGold : GV.color.forestDeep}
            style={{ animation: !locked ? 'pulse 1.5s infinite' : 'none' }} />
        </div>
        <div style={{
          marginTop: 16,
          fontFamily: GV.font.serif,
          fontSize: 17,
          fontWeight: 600,
          color: GV.color.forestDeep,
        }}>
          {locked ? `${course.name}에서 감지됨` : '위치 확인 중...'}
        </div>
        {locked && (
          <div style={{
            marginTop: 4,
            fontFamily: GV.font.sans,
            fontSize: 12,
            color: GV.color.onSurfaceVariant,
          }}>
            {course.region} · 인증 신뢰도 98%
          </div>
        )}
      </div>

      {locked && (
        <Card style={{ marginTop: 16 }}>
          <div style={{ display: 'flex', gap: 12, padding: 14 }}>
            <div style={{
              width: 56, height: 56,
              borderRadius: 8,
              backgroundImage: `url(${course.image})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              flexShrink: 0,
            }} />
            <div style={{ flex: 1 }}>
              <div style={{
                fontFamily: GV.font.serif,
                fontSize: 15,
                fontWeight: 600,
                color: GV.color.forestDeep,
              }}>{course.name}</div>
              <div style={{
                fontFamily: GV.font.sans,
                fontSize: 12,
                color: GV.color.outline,
                marginTop: 2,
              }}>{course.region}</div>
              <div style={{ marginTop: 4, display: 'flex', gap: 6 }}>
                <span style={{
                  fontFamily: GV.font.sans, fontSize: 10, fontWeight: 700, letterSpacing: '0.12em',
                  color: GV.color.forestDeep, background: GV.color.primaryFixed,
                  padding: '2px 6px', borderRadius: 4,
                }}>GPS 인증</span>
              </div>
            </div>
          </div>
        </Card>
      )}

      <style>{`
        @keyframes pulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.5; transform: scale(1.1); }
        }
      `}</style>

      <button
        onClick={onNext}
        disabled={!locked}
        style={{
          marginTop: 40,
          width: '100%',
          background: locked ? GV.color.forestDeep : GV.color.surfaceContainer,
          color: locked ? GV.color.white : GV.color.outline,
          border: 'none',
          borderRadius: 999,
          padding: '14px',
          fontFamily: GV.font.sans,
          fontSize: 15,
          fontWeight: 600,
          cursor: locked ? 'pointer' : 'not-allowed',
          transition: 'all 0.2s',
        }}
      >다음 단계</button>
    </div>
  );
}

function VerifyStepTime({ course, timeSlot, onSelect, onNext }) {
  const slots = [
    { id: 'morning', label: '오전', time: '06:00 - 12:00', icon: 'wb_sunny' },
    { id: 'afternoon', label: '오후', time: '12:00 - 18:00', icon: 'sunny_snowing' },
    { id: 'twilight', label: '트와일라잇', time: '18:00 이후', icon: 'nights_stay' },
  ];
  return (
    <div style={{ padding: '30px 20px' }}>
      <h2 style={{
        fontFamily: GV.font.serif,
        fontSize: 22,
        fontWeight: 600,
        color: GV.color.forestDeep,
        margin: 0,
        letterSpacing: '-0.015em',
      }}>라운드 시간대를 선택해주세요</h2>
      <p style={{
        fontFamily: GV.font.sans,
        fontSize: 13,
        color: GV.color.onSurfaceVariant,
        margin: '6px 0 0',
        lineHeight: 1.5,
      }}>같은 시간대 방문한 골퍼들의 리뷰와 함께 반영됩니다.</p>

      <div style={{ marginTop: 24, display: 'grid', gap: 10 }}>
        {slots.map(s => {
          const active = timeSlot === s.id;
          return (
            <Card
              key={s.id}
              onClick={() => onSelect(s.id)}
              style={{
                border: active ? `2px solid ${GV.color.forestDeep}` : `1px solid ${GV.color.borderSubtle}`,
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 16 }}>
                <div style={{
                  width: 42, height: 42, borderRadius: 999,
                  background: active ? GV.color.forestDeep : GV.color.surfaceContainerLow,
                  color: active ? GV.color.prestigeGold : GV.color.forestDeep,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name={s.icon} size={20} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{
                    fontFamily: GV.font.serif,
                    fontSize: 16,
                    fontWeight: 600,
                    color: GV.color.forestDeep,
                  }}>{s.label}</div>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 12,
                    color: GV.color.outline,
                    marginTop: 2,
                  }}>{s.time}</div>
                </div>
                {active && <Icon name="check_circle" size={22} filled color={GV.color.forestDeep} />}
              </div>
            </Card>
          );
        })}
      </div>

      <div style={{ marginTop: 24 }}>
        <div style={{
          fontFamily: GV.font.sans,
          fontSize: 12,
          fontWeight: 500,
          color: GV.color.charcoal,
          marginBottom: 8,
        }}>동반자 수 (선택)</div>
        <div style={{ display: 'flex', gap: 8 }}>
          {['2인', '3인', '4인', '나홀로'].map(t => (
            <Chip key={t}>{t}</Chip>
          ))}
        </div>
      </div>

      <button
        onClick={onNext}
        disabled={!timeSlot}
        style={{
          marginTop: 40,
          width: '100%',
          background: timeSlot ? GV.color.forestDeep : GV.color.surfaceContainer,
          color: timeSlot ? GV.color.white : GV.color.outline,
          border: 'none',
          borderRadius: 999,
          padding: '14px',
          fontFamily: GV.font.sans,
          fontSize: 15,
          fontWeight: 600,
          cursor: timeSlot ? 'pointer' : 'not-allowed',
        }}
      >인증 완료</button>
    </div>
  );
}

function VerifyStepComplete({ course, 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 20px',
        boxShadow: '0 10px 30px rgba(26,67,46,0.25)',
      }}>
        <Icon name="verified" size={52} filled color={GV.color.prestigeGold} />
      </div>

      <h2 style={{
        fontFamily: GV.font.serif,
        fontSize: 24,
        fontWeight: 600,
        color: GV.color.forestDeep,
        margin: 0,
        letterSpacing: '-0.015em',
      }}>방문 인증이 완료되었습니다</h2>
      <p style={{
        fontFamily: GV.font.sans,
        fontSize: 13,
        color: GV.color.onSurfaceVariant,
        margin: '8px 0 0',
        lineHeight: 1.5,
      }}>
        <b style={{ color: GV.color.forestDeep }}>{course.name}</b>에서의<br/>
        오늘의 라운드가 신뢰 지표에 반영됩니다
      </p>

      <div style={{
        marginTop: 30,
        padding: 20,
        background: GV.color.primaryFixed,
        borderRadius: 12,
        textAlign: 'left',
      }}>
        <div style={{
          fontFamily: GV.font.sans,
          fontSize: 10,
          fontWeight: 700,
          letterSpacing: '0.14em',
          color: GV.color.forestDeep,
          marginBottom: 6,
        }}>다음 단계</div>
        <div style={{
          fontFamily: GV.font.serif,
          fontSize: 16,
          fontWeight: 600,
          color: GV.color.forestDeep,
          lineHeight: 1.4,
        }}>오늘의 라운드는 어떠셨나요?</div>
        <div style={{
          fontFamily: GV.font.sans,
          fontSize: 12,
          color: GV.color.forestDeep,
          marginTop: 6,
          lineHeight: 1.5,
        }}>솔직한 리뷰가 다른 골퍼들의 라운드 선택을 도와줍니다. 6개 품질 축을 평가해주세요.</div>
      </div>

      <div style={{ marginTop: 32, display: 'grid', gap: 10 }}>
        <button
          onClick={nav.startReview}
          style={{
            background: GV.color.forestDeep,
            color: GV.color.white,
            border: 'none',
            borderRadius: 999,
            padding: '14px',
            fontFamily: GV.font.sans,
            fontSize: 15,
            fontWeight: 600,
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 8,
          }}
        >
          <Icon name="rate_review" size={18} color={GV.color.prestigeGold} />
          지금 리뷰 작성하기
        </button>
        <button
          onClick={nav.back}
          style={{
            background: 'none',
            color: GV.color.outline,
            border: 'none',
            padding: '10px',
            fontFamily: GV.font.sans,
            fontSize: 13,
            cursor: 'pointer',
          }}
        >나중에 하기</button>
      </div>
    </div>
  );
}

Object.assign(window, { GVVerifyFlow });