/**
 * /test — 고정 병원 fixture 를 디폴트로 채워 분석 플로우를 빠르게 검증하는 dev 페이지.
 *
 * - 상단 칩 그룹으로 10개 fixture 중 선택 (디폴트 PINNED_LABEL)
 * - 선택 변경 시 MultiChannelInput 을 `key` 로 강제 리마운트 → 깔끔 prefill
 * - DevOnly 가드 아래 등록되어 localhost 에서만 접근
 */
import { useState } from 'react'
import { useNavigate } from 'react-router'
import MultiChannelInput, { type AnalyzePayload } from '@/features/channels/components/MultiChannelInput'
import { CLINICS } from '../fixtures/mockUrls'

const PINNED_LABEL = '뷰성형외과'

function pickInitialIndex(): number {
  const i = CLINICS.findIndex((c) => c.label === PINNED_LABEL)
  return i >= 0 ? i : 0
}

export default function TestPrefillPage() {
  const navigate = useNavigate()
  const [selectedIdx, setSelectedIdx] = useState<number>(pickInitialIndex)
  const clinic = CLINICS[selectedIdx]

  const handleAnalyze = (payload: AnalyzePayload) => {
    navigate('/report/loading', {
      state: {
        url: payload.primaryUrl,
        manualChannels: payload.manualChannels,
      },
    })
  }

  return (
    <section className="min-h-screen pt-28 pb-12 px-6 bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50">
      <div className="max-w-4xl mx-auto">
        <div className="mb-8">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-100 text-amber-800 text-xs font-medium mb-3">
            DEV · /test
          </div>
          <h1 className="text-3xl font-bold text-primary-900">
            prefill 테스트
          </h1>
          <p className="mt-2 text-sm text-slate-600">
            병원을 선택하면 아래 입력 폼이 해당 fixture URL 로 자동 채워집니다.
          </p>
        </div>

        <div className="mb-6 flex flex-wrap gap-2" role="tablist" aria-label="병원 fixture 선택">
          {CLINICS.map((c, i) => {
            const active = i === selectedIdx
            return (
              <button
                key={c.label}
                type="button"
                role="tab"
                aria-selected={active}
                onClick={() => setSelectedIdx(i)}
                className={
                  active
                    ? 'px-3 py-1.5 rounded-full text-xs font-medium bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white shadow-sm'
                    : 'px-3 py-1.5 rounded-full text-xs font-medium bg-white/80 backdrop-blur-sm text-slate-700 border border-slate-200 hover:border-slate-300 hover:bg-white transition'
                }
              >
                {c.label}
              </button>
            )
          })}
        </div>

        <MultiChannelInput
          key={clinic.label}
          variant="hero"
          initialUrls={clinic.urls}
          onAnalyze={handleAnalyze}
        />
      </div>
    </section>
  )
}
