import {useEffect, useRef, useState} from 'react';
import {ArrowRight, Check, MapPin, Search, TriangleAlert} from 'lucide-react';
import type {IndustryType} from '@o2o/shared';
import type {PlaceSearchItem} from '@/api';
import {Badge} from '@/components/ui/badge';
import {Button} from '@/components/ui/button';
import {Input} from '@/components/ui/input';
import {INDUSTRY_CONFIGS} from '@/data/industryData';
import {CATEGORY_TO_INDUSTRY} from '@/features/builder/placeAdapter';
import {cn} from '@/lib/utils';
import type {PendingPick} from '@/stores/builder';
import {useBuilderStore} from '@/stores/builder';
import {PlaceUrlBox} from './PlaceUrlBox';
import {usePlaceSearch} from './usePlaceSearch';
import {useWizardStep} from './wizardUrl';
import {WizardFooter} from './WizardFooter';
import {WizardStage, WizardWaiting} from './WizardStage';

const STAGE_TITLE: Record<string, string> = {
  input: '가게 이름을 알려주세요',
  searching: '내 가게를 찾는 중입니다',
  picking: '이 중에 사장님 가게가 있나요?',
  unavailable: '지도 검색을 사용할 수 없습니다',
  confirmed: '이 가게로 확인되었습니다',
};

const STAGE_DESCRIPTION: Record<string, string> = {
  input: '업종은 안 고르셔도 됩니다 — 찾은 가게의 분류에서 자동으로 정해집니다.',
  searching: '',
  picking: '고른 가게의 상호·주소가 이 사이트의 기준 정보가 되고, 업종도 그 분류에서 정해집니다.',
  unavailable: '',
  confirmed: '이제 이 가게의 공개 채널에서 정보를 수집합니다.',
};

/**
 * 1단계 — 내 가게 확인. **위저드의 시작점이다.**
 *
 * ★ 예전에는 업종 선택이 앞에 있었다. 그런데 사장님이 100% 아는 건 자기 가게 **이름**이고,
 *   업종은 경계에서 멈춘다("우리는 카페인가 음식점인가"). 그래서 순서를 뒤집었다 —
 *   상호명을 먼저 받고, 업종은 검색 결과의 분류가 정한다(services/place_category.py).
 *   못 정했을 때만 업종 화면(`?step=industry`)으로 넘긴다.
 *
 * 한 화면에 한 가지만 묻는다: 상호를 묻거나 · 기다리거나 · 후보를 고르게 하거나 · 확정을 보여준다.
 */
export function Step2PlaceSearch() {
  const industry = useBuilderStore((s) => s.industry);
  const storeName = useBuilderStore((s) => s.storeName);
  const location = useBuilderStore((s) => s.location);
  const confirmedIdentity = useBuilderStore((s) => s.confirmedIdentity);
  const pendingPick = useBuilderStore((s) => s.pendingPick);
  const setStoreName = useBuilderStore((s) => s.setStoreName);
  const setLocation = useBuilderStore((s) => s.setLocation);
  const selectIndustry = useBuilderStore((s) => s.selectIndustry);
  const setPendingPick = useBuilderStore((s) => s.setPendingPick);
  const confirmIdentity = useBuilderStore((s) => s.confirmIdentity);
  const clearIdentity = useBuilderStore((s) => s.clearIdentity);

  // 새로고침을 넘어온 경우 이미 만들어진 사업장을 그대로 쓴다(같은 위저드에서 두 번 만들지 않는다).
  const search = usePlaceSearch(confirmedIdentity?.placeId ?? null);
  const [, goToStep] = useWizardStep();
  const [placeUrl, setPlaceUrl] = useState('');
  /** ★ 후보가 있으면 붙여넣기 칸을 접는다. 펼쳐 두면 "자동으로 못 찾았다"는 신호로 읽힌다 —
   *  이 시점에는 자동 발견을 시도조차 안 했다(수집 직전에 서버가 한다). 목록에 내 가게가
   *  없을 때만 여는 탈출구다. */
  const [urlBoxOpen, setUrlBoxOpen] = useState(false);
  /** 고른 후보가 들고 온 네이버 플레이스 주소(검색 단계에서 서버가 찾아 준 값). */
  const naverUrlRef = useRef<string | null>(null);
  /** 확정 직후 2단계로 넘어가는 한 번은 초기화를 건너뛴다. */
  const justConfirmed = useRef(false);
  const foundCount = search.items.filter((i) => i.naver_place_url).length;

  const canSearch = storeName.trim().length > 0 && search.phase !== 'searching';

  /**
   * 확정된 사업장을 주소창에 남기며 다음 단계로.
   *
   * ★ `?placeId=` 가 새로고침을 넘기는 유일한 수단이다. 위저드 상태는 브라우저에 저장하지 않는다
   *   (stores/builder 주석): 저장하면 새 가게를 만들러 들어와도 지난 가게가 확정된 것으로 떠 버린다.
   *   주소창에 두면 새로고침은 서버에서 복원되고(usePlaceSync), 주소를 새로 열면 깨끗하다.
   * ★ 단계와 사업장을 **한 번에** 바꾼다. 나눠 쓰면 그 사이에 "placeId 는 붙었는데 아직 1단계"인
   *   주소가 히스토리에 한 칸 생기고, 뒤로가기가 그 칸에 걸린다.
   */
  const advance = (placeId: string | null) => {
    goToStep('collect', {
      params: {placeId, flow: placeId ? 'onboarding' : null},
    });
  };

  const finishPick = async (pick: PendingPick, nextIndustry: IndustryType) => {
    const identity = await search.confirmPick(pick, nextIndustry);
    setPendingPick(null);
    if (!identity) return; // 실패 사유는 search.pickError 가 화면에 남긴다
    justConfirmed.current = true;
    confirmIdentity(
      naverUrlRef.current ? {...identity, naverPlaceUrl: naverUrlRef.current} : identity,
    );
    advance(identity.placeId);
  };

  /**
   * 업종 화면을 다녀온 후보를 이어서 확정한다.
   *
   * ★ 업종이 **찍혀서** 돌아온 것만 이어간다. 뒤로가기로 돌아온 경우(업종을 안 고른 경우)까지
   *   확정하면 사장님이 고르지도 않은 기본 업종으로 사업장이 만들어진다.
   */
  const resumed = useRef(false);
  useEffect(() => {
    const industryFromPicker = pendingPick?.industry;
    if (!pendingPick || !industryFromPicker || resumed.current) return;
    resumed.current = true;
    void finishPick(pendingPick, industryFromPicker);
    // eslint-disable-next-line react-hooks/exhaustive-deps -- 한 번만 이어붙이는 일이라 pendingPick 만 본다
  }, [pendingPick]);

  /**
   * 후보 하나를 골랐다 — 여기서 업종이 정해진다.
   *
   * ★ `category` 는 서버가 외부 분류에서 **추정한** 값이고, 못 정하면 키 자체가 없다
   *   (RemoveNoneResponse 가 null 필드를 지운다). 억지로 하나를 고르지 않고 사장님에게 묻는다 —
   *   업종은 수집 스키마와 JSON-LD 타입을 통째로 정하는 값이라 틀리면 되돌리는 값이 비싸다.
   */
  const choose = (item: PlaceSearchItem) => {
    const pick: PendingPick = {
      name: item.name ?? '',
      address: item.road_address ?? '',
    };
    // ★ 검색 단계에서 서버가 이미 찾아 둔 플레이스 주소를 그대로 물고 간다.
    //   이게 있으면 수집 직전에 다시 찾을 필요가 없고, 사장님에게 지도 주소를 묻지도 않는다.
    naverUrlRef.current = item.naver_place_url ?? null;
    const guessed = item.category != null ? (CATEGORY_TO_INDUSTRY[item.category] ?? null) : null;
    if (!guessed) {
      setPendingPick(pick);
      goToStep('industry');
      return;
    }
    selectIndustry(guessed);
    void finishPick(pick, guessed);
  };

  const runSearch = () => {
    clearIdentity(); // 상호를 고쳐 다시 찾는 것이므로 앞서 확정한 신원은 물린다
    void search.searchPublic(storeName, location);
  };

  const backToInput = () => {
    clearIdentity();
    // 다른 가게를 찾으러 간다 — 주소창에 남은 사업장도 같이 놓아준다.
    goToStep('search', {params: {placeId: null, flow: null}, replace: true});
    search.reset();
  };

  /** 네이버 플레이스 URL 로 확정 — 가장 확실한 경로다(usePlaceSearch.confirmByUrl 주석 참고). */
  const pickByUrl = async () => {
    const url = placeUrl.trim();
    if (!url) return;
    const identity = await search.confirmByUrl(url);
    if (!identity) return;
    justConfirmed.current = true;
    confirmIdentity(identity);
    advance(identity.placeId);
  };

  /**
   * 업종을 바꾸러 간다.
   *
   * ★ **서버에 사업장이 이미 만들어졌으면 신원 확인부터 다시 받는다.** places.category 는 만들 때
   *   정해지고 PATCH 로 못 고친다(Req_UpdatePlace 에 category 가 없다) — 화면에서만 바꾸면
   *   리페치 한 번에 서버 값으로 되돌아가서, 사장님 눈에는 바꾼 게 씹힌 것으로 보인다.
   *   확정 전(로그인 전 포함)에는 서버에 아무것도 없으니 업종만 갈아도 된다.
   */
  const identityIsOnServer = Boolean(confirmedIdentity?.placeId);
  const changeIndustry = () => {
    if (identityIsOnServer) {
      clearIdentity();
      goToStep('industry', {params: {placeId: null, flow: null}});
      return;
    }
    goToStep('industry');
  };

  // ── 화면 고르기. 위에서부터 먼저 맞는 것 하나만 그린다 ──────────────
  //
  const stage = confirmedIdentity
    ? 'confirmed'
    : search.phase === 'searching'
      ? 'searching'
      : search.phase === 'unavailable'
        ? 'unavailable'
        : search.phase === 'done'
          ? 'picking'
          : 'input';

  /**
   * 2단계에서 **뒤로 오면 처음(상호 입력)으로 되돌린다.**
   *
   * ★ 왜 확정 화면을 안 띄우나: 뒤로가기는 "다시 고르겠다" 는 뜻인데, 확정 화면만 뜨면
   *   다른 가게로 바꾸러 온 사장님이 목록을 못 찾는다. 후보 목록을 되살리는 방법도 있지만
   *   공개 검색이 유료 외부 API 라 뒤로 올 때마다 다시 부르게 된다.
   * ★ 이 화면을 **정상적으로 지나간** 경우(확정 직후 2단계로 넘어감)에는 돌지 않는다 —
   *   `justConfirmed` 가 그 한 번을 막는다. 아니면 확정하자마자 스스로 지워 버린다.
   */
  useEffect(() => {
    if (!confirmedIdentity) return;
    if (justConfirmed.current) {
      justConfirmed.current = false;
      return;
    }
    clearIdentity();
    search.reset();
    goToStep('search', {params: {placeId: null, flow: null}, replace: true});
    // eslint-disable-next-line react-hooks/exhaustive-deps -- 들어올 때 한 번만 판단한다
  }, []);

  const searchQuery = [storeName, location].filter(Boolean).join(' ');
  /** 뒤로 와서 목록을 다시 볼 때, 이미 고른 후보를 알아보게 한다. */
  const isPicked = (item: PlaceSearchItem) =>
    Boolean(confirmedIdentity) &&
    item.name === confirmedIdentity?.name &&
    (item.road_address ?? '') === (confirmedIdentity?.address ?? '');

  return (
    <div className="flex flex-1 flex-col justify-between bg-muted/30">
      <WizardStage
        current={1}
        wide={stage === 'picking'}
        title={STAGE_TITLE[stage]}
        description={STAGE_DESCRIPTION[stage]}
      >
        {stage === 'input' && (
          <div className="space-y-4 rounded-2xl border border-border bg-card p-6">
            <div>
              <label htmlFor="store-name" className="mb-1.5 block text-xs font-semibold">
                상호명 <span className="text-destructive">*</span>
              </label>
              <Input
                id="store-name"
                value={storeName}
                onChange={(e) => setStoreName(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' && canSearch) runSearch();
                }}
                placeholder="가게 이름을 입력하세요"
                autoFocus
              />
            </div>

            <div>
              <label htmlFor="store-location" className="mb-1.5 block text-xs font-semibold">
                위치 (시/군/구/동)
              </label>
              <Input
                id="store-location"
                value={location}
                onChange={(e) => setLocation(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' && canSearch) runSearch();
                }}
                placeholder="예: 제주시 애월읍"
              />
              <p className="mt-1.5 text-[11px] text-muted-foreground">
                같은 이름의 가게가 많을 때 구분하는 데 쓰입니다. 비워도 검색됩니다.
              </p>
            </div>

            <Button
              variant="outline"
              size="lg"
              className="w-full"
              onClick={runSearch}
              disabled={!canSearch}
            >
              <Search />
              <span>상호로 찾아보기</span>
            </Button>
          </div>
        )}

        {stage === 'searching' && (
          <WizardWaiting
            title="등록된 가게를 찾는 중입니다"
            description={`'${storeName}' 와(과) 같은 이름의 가게를 지도에서 확인하고 있어요`}
          />
        )}

        {stage === 'picking' && (
          <div className="space-y-3">
            <p
              className={cn(
                'rounded-xl p-3 text-xs leading-relaxed',
                search.items.length > 0
                  ? 'border border-border bg-card text-muted-foreground'
                  : 'border border-warning/30 bg-warning/10 text-warning',
              )}
            >
              {search.items.length === 0
                ? '이 이름으로는 찾지 못했습니다. 아래에서 네이버 지도 주소로 찾아 주세요.'
                : foundCount > 0
                  ? `${foundCount}곳은 네이버 플레이스까지 찾았습니다 — 고르시면 영업시간·전화·사진을 그대로 가져옵니다.`
                  : '아래 목록에서 사장님 가게를 골라 주세요.'}
            </p>

            {search.pickError && (
              <p className="rounded-xl border border-warning/30 bg-warning/10 p-3 text-xs font-medium leading-relaxed text-warning">
                <TriangleAlert className="mr-1 inline size-3.5 align-text-bottom" />
                {search.pickError}
              </p>
            )}

            <ul className="space-y-2">
              {search.items.map((item, index) => (
                <li key={`${item.name ?? ''}-${item.road_address ?? ''}-${index}`}>
                  <button
                    type="button"
                    onClick={() => choose(item)}
                    disabled={search.isConfirming}
                    className="w-full cursor-pointer rounded-xl border border-border bg-card p-4 text-left transition-all hover:border-primary hover:bg-accent disabled:opacity-60"
                  >
                    <div className="flex items-start justify-between gap-3">
                      <div className="min-w-0 flex-1">
                        <div className="flex flex-wrap items-center gap-2">
                          <span className="text-sm font-bold">{item.name}</span>
                          {item.category_name && (
                            <Badge variant="outline" className="text-[10px]">
                              {item.category_name}
                            </Badge>
                          )}
                          {/* 고르기 전에 어떤 업종으로 시작하는지 먼저 보여준다 — 고른 뒤에 알면 늦다. */}
                          <IndustryBadge category={item.category} />
                          {/* ★ 플레이스를 찾았는지 **여기서** 보여준다. 데이터만 싣고 표시를 안 하면
                              사장님은 자동으로 찾았는지 알 길이 없어 지도 주소를 또 찾으러 간다. */}
                          {item.naver_place_url && (
                            <Badge variant="success" className="gap-1 text-[10px]">
                              <Check className="size-3" />
                              네이버 플레이스 찾음
                            </Badge>
                          )}
                        </div>
                        <p className="mt-1.5 flex items-start gap-1 text-xs text-muted-foreground">
                          <MapPin className="mt-px size-3 shrink-0" />
                          <span>{item.road_address ?? '주소 없음'}</span>
                        </p>
                      </div>
                      <span
                        className={cn(
                          'shrink-0 rounded-lg px-3 py-1.5 text-[11px] font-bold',
                          isPicked(item)
                            ? 'bg-success text-success-foreground'
                            : 'bg-primary text-primary-foreground',
                        )}
                      >
                        {search.isConfirming
                          ? '확정 중...'
                          : isPicked(item)
                            ? '고른 가게'
                            : '이 가게예요'}
                      </span>
                    </div>
                  </button>
                </li>
              ))}
            </ul>

            {/* 목록에서 고르면 업종은 그 후보가 정한다 — 이 줄은 아래 '주소로 확정' 경로용이다. */}
            <IndustryLine
              label="주소로 확정할 때 쓸 업종"
              industry={industry}
              onChange={changeIndustry}
            />

            {search.items.length > 0 && !urlBoxOpen && !search.pickError ? (
              <button
                type="button"
                onClick={() => setUrlBoxOpen(true)}
                className="w-full cursor-pointer rounded-xl border border-dashed border-border px-3 py-2.5 text-[11px] text-muted-foreground transition-colors hover:border-primary/40 hover:text-foreground"
              >
                목록에 내 가게가 없나요? — 네이버 지도 주소로 찾기
              </button>
            ) : (
              <PlaceUrlBox
                value={placeUrl}
                onChange={setPlaceUrl}
                onSubmit={() => void pickByUrl()}
                isBusy={search.isConfirming}
                compact={search.items.length > 0 && !search.pickError}
                searchQuery={searchQuery}
              />
            )}

            <Button variant="ghost" size="sm" className="w-full" onClick={backToInput}>
              <Search />
              <span>다른 이름으로 다시 찾기</span>
            </Button>
          </div>
        )}

        {stage === 'unavailable' && (
          <div className="space-y-3">
            <p className="rounded-xl border border-warning/30 bg-warning/10 p-3 text-xs leading-relaxed text-warning">
              <TriangleAlert className="mr-1 inline size-3.5 align-text-bottom" />
              {search.unavailableReason}
            </p>

            <IndustryLine
              label="주소로 확정할 때 쓸 업종"
              industry={industry}
              onChange={changeIndustry}
            />

            <PlaceUrlBox
              value={placeUrl}
              onChange={setPlaceUrl}
              onSubmit={() => void pickByUrl()}
              isBusy={search.isConfirming}
              searchQuery={searchQuery}
            />

            <Button variant="outline" className="w-full" onClick={runSearch}>
              <Search />
              <span>상호로 다시 검색하기</span>
            </Button>
          </div>
        )}

        {stage === 'confirmed' && confirmedIdentity && (
          <div className="space-y-3">
            <div className="rounded-2xl border border-success/40 bg-success/5 p-6 text-center">
              <span className="mx-auto mb-3 flex size-12 items-center justify-center rounded-full bg-success text-white">
                <Check className="size-6" strokeWidth={3} />
              </span>
              <p className="text-base font-bold">{confirmedIdentity.name}</p>
              {confirmedIdentity.address && (
                <p className="mt-1 text-xs text-muted-foreground">{confirmedIdentity.address}</p>
              )}
              {confirmedIdentity.phone && (
                <p className="mt-0.5 text-xs text-muted-foreground">{confirmedIdentity.phone}</p>
              )}
              <div className="mt-3 flex items-center justify-center gap-1.5">
                {confirmedIdentity.origin === 'external' ? (
                  <>
                    <Badge variant="outline" className="text-[10px]">
                      {confirmedIdentity.sourceLabel}
                    </Badge>
                    <Badge variant="success" className="text-[10px]">
                      동일 업소 확인됨
                    </Badge>
                  </>
                ) : (
                  <Badge variant="warning" className="text-[10px]">
                    {confirmedIdentity.sourceLabel} · 동일 업소 미검증
                  </Badge>
                )}
              </div>
            </div>

            <IndustryLine
              industry={industry}
              onChange={changeIndustry}
              note={
                identityIsOnServer ? '업종을 바꾸면 가게 확인을 다시 받습니다.' : undefined
              }
            />

            <Button
              variant="primary"
              size="lg"
              className="w-full"
              onClick={() => advance(confirmedIdentity.placeId)}
            >
              <span>다음: 이 가게 정보 수집하기</span>
              <ArrowRight />
            </Button>
            <Button variant="ghost" size="sm" className="w-full" onClick={backToInput}>
              <Search />
              <span>다른 가게로 다시 찾기</span>
            </Button>
          </div>
        )}
      </WizardStage>

      <WizardFooter
        hint={
          confirmedIdentity
            ? `${confirmedIdentity.name} 기준으로 진행합니다.`
            : '내 가게를 확인해야 다음 단계로 갈 수 있습니다.'
        }
        onNext={() => advance(confirmedIdentity?.placeId ?? null)}
        nextLabel="다음: 데이터 수집"
        nextDisabled={!confirmedIdentity}
      />
    </div>
  );
}

/** 후보 카드의 추정 업종. 못 정한 후보는 "고르면 묻는다"를 미리 알려 준다. */
function IndustryBadge({category}: {category: PickedCategory}) {
  const industry = category != null ? (CATEGORY_TO_INDUSTRY[category] ?? null) : null;
  return industry ? (
    <Badge variant="success" className="text-[10px]">
      {INDUSTRY_CONFIGS[industry].name}
    </Badge>
  ) : (
    <Badge variant="warning" className="text-[10px]">
      업종 직접 선택
    </Badge>
  );
}

/** PlaceSearchItem.category — 서버가 못 정하면 키 자체가 없다(RemoveNoneResponse). */
type PickedCategory = PlaceSearchItem['category'];

/**
 * 지금 어떤 업종으로 진행 중인지 + 바꾸는 길.
 *
 * ★ 업종을 자동으로 정하기로 한 이상, **정해진 값이 화면에 보여야 한다.** 안 보이면 사장님은
 *   숙박 스키마로 카페 사이트를 만들고 있다는 걸 수집 결과를 보고서야 안다.
 */
function IndustryLine({
  industry,
  onChange,
  label = '업종',
  note,
}: {
  industry: IndustryType;
  onChange: () => void;
  label?: string;
  note?: string;
}) {
  return (
    <div className="flex flex-wrap items-center justify-between gap-2 rounded-xl border border-border bg-card px-3 py-2 text-xs">
      <span>
        {label}: <strong className="font-semibold">{INDUSTRY_CONFIGS[industry].name}</strong>
        {note && <span className="ml-2 text-[11px] text-muted-foreground">{note}</span>}
      </span>
      <button
        type="button"
        onClick={onChange}
        className="cursor-pointer rounded-md px-2 py-1 font-medium text-primary transition-colors hover:bg-accent"
      >
        바꾸기
      </button>
    </div>
  );
}