import { useEffect, useRef, useState } from "react"
import { motion } from "motion/react"
import { ArrowRight, RotateCcw } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Section } from "@/components/ui/section"
import { SectionHeading } from "@/components/ui/section-heading"
import { Typography } from "@/components/ui/typography"
import { EASE_OUT_EXPO } from "@/lib/motion"
import {
  DEMO_ITEMS,
  MAX_CARDS,
  respondToOffer,
  round10,
  savings,
  simulateBuyerRun,
  won,
  type DemoItem,
  type Outcome,
  type Role,
  type Turn,
} from "@/lib/negotiation-sim"

type Step = "role" | "play"

/**
 * 랜딩 인터랙티브 협상 데모.
 *
 * 스크롤로 재생만 되던 기존 콘솔을 대체한다. 구경이 아니라 사용자가 한쪽을 맡아
 * 실제로 값을 제시하고 판정을 받는다 — 광고로 들어온 잠재고객이 제품을 만져보는 자리다.
 *
 * 판정 규칙은 lib/negotiation-sim 에 있고 이 파일은 화면만 맡는다.
 */
export function NegotiationDemo() {
  const [step, setStep] = useState<Step>("role")
  const [role, setRole] = useState<Role>("seller")
  const [item, setItem] = useState<DemoItem>(DEMO_ITEMS[0])
  const [turns, setTurns] = useState<Turn[]>([])
  const [cardsUsed, setCardsUsed] = useState(0)
  const [outcome, setOutcome] = useState<Outcome>("running")
  const [offer, setOffer] = useState(DEMO_ITEMS[0].listPrice)
  const [finalPrice, setFinalPrice] = useState(DEMO_ITEMS[0].listPrice)

  const logRef = useRef<HTMLDivElement>(null)
  const timers = useRef<number[]>([])

  // 재생 중인 buyer 시나리오 타이머는 리셋·언마운트 때 반드시 걷어낸다.
  const clearTimers = () => {
    timers.current.forEach(clearTimeout)
    timers.current = []
  }
  useEffect(() => clearTimers, [])

  /** 역할 선택 화면으로 완전히 되돌린다. 같은 역할로만 다시 하면 나머지 절반은
      영영 안 보게 되므로, 다시 해보기는 역할부터 고르게 하는 게 맞다. */
  const restart = () => {
    reset()
    setStep("role")
  }

  const reset = (nextItem = item, nextRole = role) => {
    clearTimers()
    setTurns([])
    setCardsUsed(0)
    setOutcome("running")
    setFinalPrice(nextItem.listPrice)
    setOffer(nextRole === "seller" ? nextItem.listPrice : nextItem.marketLow)
  }

  const pickRole = (r: Role) => {
    setRole(r)
    reset(item, r)
    setStep("play")
  }

  const pickItem = (it: DemoItem) => {
    setItem(it)
    reset(it, role)
  }

  // 새 말풍선이 붙으면 기록을 바닥으로 붙인다.
  useEffect(() => {
    logRef.current?.scrollTo({ top: logRef.current.scrollHeight, behavior: "smooth" })
  }, [turns])

  /** seller — 사용자가 공급사가 되어 값을 제시하고 에이전트가 응수한다. */
  const submitOffer = () => {
    if (outcome !== "running") return
    const priced = round10(offer)
    const mine: Turn = { id: turns.length, side: "counterpart", text: `${won(priced)}원까지는 맞춰드릴 수 있습니다.`, price: priced }
    setTurns((prev) => [...prev, mine])

    const res = respondToOffer(item, priced, cardsUsed)
    const id = window.setTimeout(() => {
      setTurns((prev) => [...prev, { id: prev.length, side: "agent", text: res.text, price: res.price }])
      setFinalPrice(res.outcome === "award" ? priced : res.price)
      setOutcome(res.outcome)
      if (res.outcome === "running") {
        setCardsUsed((c) => c + 1)
        setOffer(res.price) // 에이전트가 부른 값에서 다시 시작
      }
    }, 620)
    timers.current.push(id)
  }

  /** buyer — 목표가만 정하면 에이전트가 알아서 붙는 걸 지켜본다. */
  const runBuyer = () => {
    if (turns.length > 0) return
    const target = round10(offer)
    const run = simulateBuyerRun(item, target)
    run.turns.forEach((turn, i) => {
      const id = window.setTimeout(() => {
        setTurns((prev) => [...prev, turn])
        if (turn.price) setFinalPrice(turn.price)
        if (i === run.turns.length - 1) setOutcome(run.outcome)
      }, 500 + i * 900)
      timers.current.push(id)
    })
  }

  const done = outcome !== "running"
  const { amount, rate } = savings(item, finalPrice)
  const sliderMin = role === "seller" ? round10(item.anchor * 0.94) : round10(item.anchor * 0.94)
  const sliderMax = role === "seller" ? item.listPrice : item.marketLow

  return (
    <Section id="how-it-works" bg="stage" width="lg">
        {/* 머리는 손으로 짜지 않고 SectionHeading 을 쓴다. 예전엔 여기서 직접 조판하느라
            아이브로우 간격만 20px(다른 섹션은 12px)이었다 — 프리미티브를 우회하면
            같은 관계에 두 번째 값이 생긴다. */}
        {/* 두 문장은 의미 단위가 다르므로 줄을 명시적으로 나눈다.
            자동 줄바꿈에 맡기면 어절이 어색하게 끊긴다.

            예전 카피는 "에이전트는 정해진 기준을 벗어나지 않습니다" 였다. FAQ 2번
            ("에이전트가 우리 기준을 벗어나 합의해 버리면요?")을 헤드라인으로 끌어올린
            것이었는데, 아직 생기지도 않은 반론에 가장 비싼 한 줄을 쓰고 있었다.
            게다가 부정문이라 안 하는 일을 약속했다 — 체험을 권하는 자리에는 맞지 않는다.
            방어는 FAQ 에 그대로 남아 있으니 여기서는 능력을 말한다. */}
        <SectionHeading
          align="center"
          tone="stage"
          eyebrow="Try it Yourself"
          title={
            <>
              <span className="text-white">사용할수록 진화하는 에이전틱 협상,</span>
              <br />
              <span className="text-on-stage-soft/60">직접 경험해 보세요!</span>
            </>
          }
        />

        {/* AnimatePresence mode="wait" 를 쓰지 않는다. 나가는 애니메이션이 끝나야 다음
            화면이 마운트돼서 클릭 후 0.8초가 빈다 — 역할 선택처럼 즉시 반응해야 하는
            전환에는 맞지 않는 도구다. 나가는 연출 없이 바로 갈아끼우고 짧게 들어온다. */}
        {step === "role" ? (
            <motion.div
              key="role"
              initial={{ opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.28, ease: EASE_OUT_EXPO }}
              className="grid grid-cols-1 sm:grid-cols-2 gap-4"
            >
              <RoleCard
                title="공급사로 해보기"
                lead="직접 단가를 제시하면 에이전트가 응수합니다."
                detail="협상 카드 3장 안에서 단가가 어디까지 조율되는지 확인하실 수 있습니다."
                onClick={() => pickRole("seller")}
              />
              <RoleCard
                title="구매 담당자로 해보기"
                lead="목표가만 정하면 에이전트가 협력사와 조율합니다."
                detail="기준을 벗어난 목표가를 설정했을 때의 처리 방식도 함께 확인하실 수 있습니다."
                onClick={() => pickRole("buyer")}
              />
            </motion.div>
          ) : (
            <motion.div
              key="play"
              initial={{ opacity: 0, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.28, ease: EASE_OUT_EXPO }}
              className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12"
            >
              {/* 좌 — 품목·컨트롤·현재가 */}
              <div className="lg:col-span-5 space-y-8">
                <div className="flex flex-wrap gap-2">
                  {DEMO_ITEMS.map((it) => (
                    <button
                      key={it.id}
                      type="button"
                      onClick={() => pickItem(it)}
                      className={`px-4 py-2 rounded-full text-[13px] font-semibold transition-colors ${
                        it.id === item.id
                          ? "bg-white text-stage"
                          : "bg-white/5 text-on-stage-soft/75 hover:bg-white/10 hover:text-white"
                      }`}
                    >
                      {it.name}
                    </button>
                  ))}
                </div>

                <div>
                  <div className="text-[13px] text-on-stage-soft/55 mb-2">{item.spec}</div>
                  <div className="flex items-baseline gap-2">
                    <span className="text-[24px] font-medium text-on-stage-soft/55">₩</span>
                    <span className="text-[52px] md:text-[64px] font-extrabold tracking-[-0.045em] leading-none tabular-nums">
                      {won(finalPrice)}
                    </span>
                  </div>
                  <div className="h-7 mt-2">
                    {amount > 0 && (
                      <span className="text-[15px] font-semibold text-counter">
                        ▼ {won(amount)}원 · {rate.toFixed(1)}%
                      </span>
                    )}
                  </div>
                </div>

                {!done && (
                  <div className="space-y-4">
                    <div className="flex items-baseline justify-between">
                      <label htmlFor="nego-offer" className="text-[14px] font-medium text-on-stage-soft/85">
                        {role === "seller" ? "제시 단가" : "목표 단가"}
                      </label>
                      <span className="text-[18px] font-bold tabular-nums">{won(round10(offer))}원</span>
                    </div>
                    <input
                      id="nego-offer"
                      type="range"
                      min={sliderMin}
                      max={sliderMax}
                      step={10_000}
                      value={offer}
                      onChange={(e) => setOffer(Number(e.target.value))}
                      disabled={role === "buyer" && turns.length > 0}
                      className="w-full accent-primary disabled:opacity-40"
                    />
                    <div className="flex justify-between text-[12px] text-on-stage-soft/45">
                      <span>{won(sliderMin)}</span>
                      <span>{won(sliderMax)}</span>
                    </div>

                    <Button
                      type="button"
                      variant="stage"
                      size="lg"
                      className="w-full"
                      onClick={role === "seller" ? submitOffer : runBuyer}
                      disabled={role === "buyer" && turns.length > 0}
                    >
                      {role === "seller" ? "이 값으로 제시하기" : "협상 시작"}
                    </Button>
                  </div>
                )}

                {role === "seller" && (
                  <div className="flex items-center gap-3">
                    <span className="text-[13px] text-on-stage-soft/55">협상 카드</span>
                    <div className="flex gap-1.5">
                      {Array.from({ length: MAX_CARDS }, (_, i) => (
                        <span
                          key={i}
                          className={`w-7 h-1.5 rounded-full ${i < MAX_CARDS - cardsUsed ? "bg-primary-on-stage" : "bg-white/15"}`}
                        />
                      ))}
                    </div>
                  </div>
                )}
              </div>

              {/* 우 — 협상 기록 */}
              <div className="lg:col-span-7">
                <div
                  ref={logRef}
                  className="h-[360px] md:h-[440px] overflow-y-auto scrollbar-none flex flex-col gap-4 pr-1"
                >
                  {turns.length === 0 && (
                    <div className="m-auto text-center text-[15px] text-on-stage-soft/45 max-w-xs break-keep">
                      {role === "seller"
                        ? "단가를 정해 제시하면 에이전트가 근거와 함께 응수합니다."
                        : "목표가를 정하고 협상을 시작하면 턴마다 재생됩니다."}
                    </div>
                  )}

                  {turns.map((turn) => (
                    <motion.div
                      key={turn.id}
                      initial={{ opacity: 0, y: 14 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.35, ease: EASE_OUT_EXPO }}
                      className={`flex flex-col ${turn.side === "agent" ? "items-start" : "items-end"}`}
                    >
                      <span
                        className={`text-[12px] font-semibold mb-1.5 ${
                          turn.side === "agent" ? "text-primary-on-stage" : "text-counter"
                        }`}
                      >
                        {turn.side === "agent" ? "협상 에이전트" : role === "seller" ? "나 (협력사)" : "협력사"}
                      </span>
                      <div
                        className={`max-w-[88%] rounded-card px-5 py-4 text-[15px] leading-[1.6] break-keep ${
                          turn.side === "agent"
                            ? "bg-primary text-white"
                            : "bg-counter-surface text-counter border border-counter/20"
                        }`}
                      >
                        {turn.text}
                      </div>
                    </motion.div>
                  ))}
                </div>

                {done && (
                  <motion.div
                    initial={{ opacity: 0, y: 16 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4, ease: EASE_OUT_EXPO }}
                    className="mt-6 border-t border-stage-line pt-6"
                  >
                    <Typography variant="cardTitle" className="text-white mb-1.5">
                      {outcome === "award"
                        ? `낙찰 · ${won(amount)}원 절감`
                        : "개찰 — 낙찰자 미정으로 마감했습니다"}
                    </Typography>
                    <p className="text-[15px] text-on-stage-soft/70 leading-[1.6] break-keep mb-6">
                      {outcome === "award"
                        ? `최초 제시가 ${won(item.listPrice)}원에서 ${rate.toFixed(1)}% 내려왔습니다. 실제 운영에서는 협력사 수만큼 이 협상이 동시에 진행됩니다.`
                        : "기준을 벗어나는 값은 억지로 맞추지 않고 담당자에게 넘깁니다. 결렬이 아니라 사람이 판단할 자리를 남기는 것입니다."}
                    </p>
                    <div className="flex flex-col sm:flex-row gap-3">
                      <Button href="#contact-section" variant="stage" size="lg" className="group">
                        <span>우리 품목으로 상담받기</span>
                        <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
                      </Button>
                      <Button type="button" variant="stageGhost" size="lg" onClick={restart}>
                        <RotateCcw className="w-4 h-4" />
                        <span>역할 바꿔서 다시</span>
                      </Button>
                    </div>
                  </motion.div>
                )}
              </div>
            </motion.div>
          )}

        <p className="mt-12 text-center text-[13px] text-on-stage-soft/40">
          실제 판정 규칙(앵커링가·협상 카드 3장·개찰)을 그대로 옮긴 데모입니다. 금액은 예시입니다.
        </p>
    </Section>
  )
}

function RoleCard({
  title,
  lead,
  detail,
  onClick,
}: {
  title: string
  lead: string
  detail: string
  onClick: () => void
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="group text-left rounded-card border border-stage-line bg-white/[0.03] hover:bg-white/[0.07] hover:border-white/25 transition-colors p-8 md:p-10"
    >
      <Typography variant="heading" as="h3" className="text-white mb-3">
        {title}
      </Typography>
      <p className="text-[16px] text-on-stage-soft/85 leading-[1.6] break-keep mb-2">{lead}</p>
      <p className="text-[14px] text-on-stage-soft/55 leading-[1.6] break-keep">{detail}</p>
      <span className="mt-6 inline-flex items-center gap-1.5 text-[16px] font-semibold text-primary-on-stage">
        시작하기
        <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
      </span>
    </button>
  )
}