'use client'

import { useState, useEffect, useCallback, useRef } from 'react'
import { cn } from '@/lib/utils'
import { generateQrCodeDataUrl } from '@/lib/qrcode'
import { Check, X, Smartphone, QrCode, Loader2, ArrowRight, CheckCircle2 } from 'lucide-react'

// ── Steps ────────────────────────────────────────────────────────
type Step = 'loading' | 'error' | 'expired' | 'welcome' | 'verify-phone' | 'scan-qr' | 'done'

/**
 * Invitation onboarding page.
 * Public page — no auth required. Accessed via invite link.
 */
export default function InvitePage({ params }: { params: Promise<{ token: string }> }) {
  const [token, setToken] = useState<string | null>(null)
  const [step, setStep] = useState<Step>('loading')
  const [inviterName, setInviterName] = useState('')
  const [errorMsg, setErrorMsg] = useState('')

  // Phone verification state
  const [phone, setPhone] = useState('')
  const [code, setCode] = useState('')
  const [codeSent, setCodeSent] = useState(false)
  const [codeSending, setCodeSending] = useState(false)
  const [codeVerifying, setCodeVerifying] = useState(false)
  const [codeError, setCodeError] = useState('')
  const [devCode, setDevCode] = useState('')  // shown in dev mode instead of SMS
  const [retryAfter, setRetryAfter] = useState(0)

  // QR state
  const [qrImageUrl, setQrImageUrl] = useState('')  // generated QR code image data URL
  const [qrLoading, setQrLoading] = useState(false)
  const [qrStatus, setQrStatus] = useState<'wait' | 'scanned' | 'completed' | 'expired' | 'polling'>('wait')
  const [qrMessage, setQrMessage] = useState('')
  const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null)

  // Resolve params
  useEffect(() => {
    params.then((p) => setToken(p.token))
  }, [params])

  // Load invitation info
  useEffect(() => {
    if (!token) return
    let cancelled = false

    async function load() {
      try {
        const res = await fetch(`/api/invite/${token}/public`)
        const data = await res.json()

        if (cancelled) return

        if (!res.ok || data.error) {
          setStep('error')
          setErrorMsg(data.error || '加载失败')
          return
        }

        if (data.status === 'expired') {
          setStep('expired')
          return
        }
        if (data.status === 'cancelled') {
          setStep('error')
          setErrorMsg('该邀请已被取消')
          return
        }
        if (data.status === 'completed') {
          setStep('done')
          return
        }

        setInviterName(data.inviterName || 'Someone')

        // If already phone verified, skip to QR
        if (data.status === 'phone_verified' || data.status === 'qr_generated' || data.status === 'bot_scanned') {
          setPhone(data.inviteePhone || '')
          setStep('scan-qr')
          // If QR already generated, show it by regenerating the QR image
          if (data.qrcodeContent) {
            try {
              const img = await generateQrCodeDataUrl(data.qrcodeContent, { cellSize: 6, margin: 2 })
              setQrImageUrl(img)
            } catch { /* ignore */ }
            setQrStatus('wait')
          }
          return
        }

        setStep('welcome')
      } catch (err) {
        if (!cancelled) {
          setStep('error')
          setErrorMsg('网络错误，请检查链接是否有效')
        }
      }
    }

    load()
    return () => { cancelled = true }
  }, [token])

  // Cleanup polling on unmount
  useEffect(() => {
    return () => {
      if (pollingRef.current) clearInterval(pollingRef.current)
    }
  }, [])

  // ── Phone Verification ────────────────────────────────────────

  const handleSendCode = useCallback(async () => {
    if (!phone || phone.length < 10 || !token) return
    setCodeSending(true)
    setCodeError('')
    setRetryAfter(0)

    try {
      const res = await fetch(`/api/invite/${token}/verify-phone`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'send-code', phone }),
      })
      const data = await res.json()

      if (!res.ok) {
        if (res.status === 429 && data.retryAfter) {
          setRetryAfter(data.retryAfter)
          startRetryTimer(data.retryAfter)
        }
        setCodeError(data.error || '发送失败')
        return
      }

      // In dev mode, the API returns the code for convenience
      if (data._devCode) {
        setDevCode(data._devCode)
      }
      setCodeSent(true)
    } catch {
      setCodeError('网络错误')
    } finally {
      setCodeSending(false)
    }
  }, [phone, token])

  const startRetryTimer = (seconds: number) => {
    setRetryAfter(seconds)
    const interval = setInterval(() => {
      setRetryAfter((prev) => {
        if (prev <= 1) {
          clearInterval(interval)
          return 0
        }
        return prev - 1
      })
    }, 1000)
  }

  const handleVerifyCode = useCallback(async () => {
    if (!code || code.length < 4 || !token) return
    setCodeVerifying(true)
    setCodeError('')

    try {
      const res = await fetch(`/api/invite/${token}/verify-phone`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'verify', phone, code }),
      })
      const data = await res.json()

      if (!res.ok) {
        setCodeError(data.error || '验证失败')
        return
      }

      // Phone verified → move to QR step
      setStep('scan-qr')
    } catch {
      setCodeError('网络错误')
    } finally {
      setCodeVerifying(false)
    }
  }, [code, phone, token])

  // ── QR Code ───────────────────────────────────────────────────

  const handleStartQr = useCallback(async () => {
    if (!token) return
    setQrLoading(true)
    setQrStatus('wait')

    try {
      const res = await fetch(`/api/invite/${token}/start-qr`, {
        method: 'POST',
      })
      const data = await res.json()

      if (!res.ok) {
        setQrMessage(data.error || '生成二维码失败')
        setQrStatus('expired')
        return
      }

      // Generate QR image from the content returned by iLink
      try {
        const qrImage = await generateQrCodeDataUrl(data.qrcodeContent, { cellSize: 6, margin: 2 })
        setQrImageUrl(qrImage)
      } catch {
        setQrMessage('二维码生成失败')
        return
      }
      setQrMessage('请使用微信扫描二维码')
      startPolling()
    } catch {
      setQrMessage('网络错误')
    } finally {
      setQrLoading(false)
    }
  }, [token])

  const startPolling = useCallback(() => {
    if (!token) return

    // Clear any existing poll
    if (pollingRef.current) clearInterval(pollingRef.current)

    pollingRef.current = setInterval(async () => {
      try {
        const res = await fetch(`/api/invite/${token}/poll`)
        const data = await res.json()

        if (!res.ok) {
          setQrMessage(data.error || '轮询失败')
          return
        }

        switch (data.status) {
          case 'wait':
            setQrStatus('wait')
            setQrMessage('等待扫码')
            break
          case 'scanned':
            setQrStatus('scanned')
            setQrMessage('已扫码，请在手机上确认登录')
            break
          case 'completed':
            setQrStatus('completed')
            setQrMessage(data.message || '🎉 配置完成！')
            // Stop polling
            if (pollingRef.current) {
              clearInterval(pollingRef.current)
              pollingRef.current = null
            }
            // Show success after brief delay
            setTimeout(() => setStep('done'), 1500)
            break
          case 'expired':
            setQrStatus('expired')
            setQrMessage('二维码已过期，请重新获取')
            if (pollingRef.current) {
              clearInterval(pollingRef.current)
              pollingRef.current = null
            }
            break
          default:
            setQrMessage(data.message || '')
        }
      } catch {
        // Silently retry on next interval
      }
    }, 2000)
  }, [token])

  // ── Render ────────────────────────────────────────────────────

  // Loading
  if (step === 'loading') {
    return (
      <PageShell>
        <div className="flex flex-col items-center gap-4 py-16">
          <Loader2 size={32} className="animate-spin text-indigo" />
          <p className="text-[14px] text-ink-muted">加载邀请信息...</p>
        </div>
      </PageShell>
    )
  }

  // Error
  if (step === 'error') {
    return (
      <PageShell>
        <div className="flex flex-col items-center gap-4 py-16 text-center">
          <div className="w-14 h-14 rounded-full bg-coral/10 flex items-center justify-center">
            <X size={28} className="text-coral" />
          </div>
          <h1 className="text-[20px] font-semibold text-ink">无法加入</h1>
          <p className="text-[14px] text-ink-muted max-w-sm">{errorMsg}</p>
        </div>
      </PageShell>
    )
  }

  // Expired
  if (step === 'expired') {
    return (
      <PageShell>
        <div className="flex flex-col items-center gap-4 py-16 text-center">
          <div className="w-14 h-14 rounded-full bg-amber/10 flex items-center justify-center">
            <X size={28} className="text-amber" />
          </div>
          <h1 className="text-[20px] font-semibold text-ink">邀请已过期</h1>
          <p className="text-[14px] text-ink-muted max-w-sm">请联系邀请人重新发送邀请</p>
        </div>
      </PageShell>
    )
  }

  // Done
  if (step === 'done') {
    return (
      <PageShell>
        <div className="flex flex-col items-center gap-4 py-16 text-center">
          <div className="w-14 h-14 rounded-full bg-green/10 flex items-center justify-center">
            <CheckCircle2 size={28} className="text-green" />
          </div>
          <h1 className="text-[20px] font-semibold text-ink">🎉 已成功加入！</h1>
          <p className="text-[14px] text-ink-muted max-w-md">
            现在打开微信，找到你刚刚连接的账号，就可以使用智能体了
          </p>
          <div className="mt-4 p-4 rounded-xl bg-surface-2 border border-hairline text-[13px] text-ink-muted">
            💡 提示：你扫码登录的微信账号就是你的 Bot 账号，
            <br />向它发送消息即可与智能体对话
          </div>
        </div>
      </PageShell>
    )
  }

  // Welcome
  if (step === 'welcome') {
    return (
      <PageShell>
        <div className="py-8 space-y-8">
          {/* Welcome */}
          <div className="text-center space-y-2">
            <h1 className="text-[24px] font-semibold text-ink font-heading">
              📩 {inviterName} 邀请你加入
            </h1>
            <p className="text-[14px] text-ink-muted">
              完成以下步骤即可获得专属 AI 智能体
            </p>
          </div>

          {/* Step indicator */}
          <StepIndicator current={0} />

          {/* Phone verification card */}
          <div className="max-w-md mx-auto w-full">
            <div className="p-6 rounded-xl bg-surface-1 border border-hairline space-y-4">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 rounded-full bg-indigo/10 flex items-center justify-center shrink-0">
                  <Smartphone size={16} className="text-indigo" />
                </div>
                <div>
                  <h2 className="text-[15px] font-semibold text-ink">验证手机号</h2>
                  <p className="text-[12px] text-ink-muted">确认你的身份</p>
                </div>
              </div>

              {/* Phone input */}
              <div>
                <div className="flex gap-2">
                  <input
                    type="tel"
                    placeholder="手机号"
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                    disabled={codeSent}
                    className="flex-1 h-10 px-3 rounded-lg bg-surface-2 border border-hairline text-[14px] text-ink placeholder:text-ink-tertiary outline-none focus:border-indigo/50 transition-colors"
                  />
                  <button
                    onClick={handleSendCode}
                    disabled={codeSending || phone.length < 10 || retryAfter > 0}
                    className={cn(
                      'h-10 px-4 rounded-lg text-[13px] font-medium transition-colors shrink-0',
                      codeSent
                        ? 'bg-green/10 text-green'
                        : 'bg-indigo text-white hover:bg-indigo/90 disabled:opacity-40'
                    )}
                  >
                    {codeSending ? '发送中...' :
                     retryAfter > 0 ? `${retryAfter}s` :
                     codeSent ? '已发送' : '获取验证码'}
                  </button>
                </div>
              </div>

              {/* Code input (shown after send) */}
              {codeSent && (
                <div className="animate-fade-in">
                  <div className="flex gap-2">
                    <input
                      type="text"
                      placeholder="输入验证码"
                      value={code}
                      onChange={(e) => setCode(e.target.value)}
                      maxLength={6}
                      className="flex-1 h-10 px-3 rounded-lg bg-surface-2 border border-hairline text-[14px] text-ink placeholder:text-ink-tertiary outline-none focus:border-indigo/50 transition-colors"
                    />
                    <button
                      onClick={handleVerifyCode}
                      disabled={codeVerifying || code.length < 4}
                      className="h-10 px-5 rounded-lg bg-indigo text-white text-[13px] font-medium hover:bg-indigo/90 disabled:opacity-40 transition-colors shrink-0"
                    >
                      {codeVerifying ? '验证中...' : '验证'}
                    </button>
                  </div>
                </div>
              )}

              {codeError && (
                <p className="text-[12px] text-coral">{codeError}</p>
              )}
              {devCode && (
                <p className="text-[12px] text-amber bg-amber/5 px-3 py-2 rounded-lg border border-amber/20">
                  📋 开发模式验证码: <code className="font-mono font-semibold text-amber">{devCode}</code>
                </p>
              )}
            </div>
          </div>
        </div>
      </PageShell>
    )
  }

  // QR Scan step
  if (step === 'scan-qr') {
    return (
      <PageShell>
        <div className="py-8 space-y-8">
          <div className="text-center space-y-2">
            <h1 className="text-[24px] font-semibold text-ink font-heading">
              📩 {inviterName} 邀请你加入
            </h1>
            <p className="text-[14px] text-ink-muted">
              最后一步：连接你的微信 Bot
            </p>
          </div>

          <StepIndicator current={1} />

          <div className="max-w-sm mx-auto w-full">
            <div className="p-6 rounded-xl bg-surface-1 border border-hairline space-y-5">
              <div className="flex items-center gap-3">
                <div className="w-8 h-8 rounded-full bg-indigo/10 flex items-center justify-center shrink-0">
                  <QrCode size={16} className="text-indigo" />
                </div>
                <div>
                  <h2 className="text-[15px] font-semibold text-ink">连接微信 Bot</h2>
                  <p className="text-[12px] text-ink-muted">扫描二维码将你的微信账号作为 Bot</p>
                </div>
              </div>

              {/* QR Code display */}
              {qrImageUrl ? (
                <div className="flex flex-col items-center gap-3">
                  <div className="p-3 bg-white rounded-xl">
                    <img
                      src={qrImageUrl}
                      alt="微信登录二维码"
                      className="w-[200px] h-[200px]"
                    />
                  </div>
                  <div className="flex items-center gap-2 text-[13px]">
                    <span className={cn(
                      'w-2 h-2 rounded-full',
                      qrStatus === 'wait' ? 'bg-amber animate-pulse' :
                      qrStatus === 'scanned' ? 'bg-blue animate-pulse' :
                      qrStatus === 'completed' ? 'bg-green' :
                      'bg-coral'
                    )} />
                    <span className={cn(
                      qrStatus === 'completed' ? 'text-green' :
                      qrStatus === 'expired' ? 'text-coral' :
                      'text-ink-muted'
                    )}>
                      {qrMessage}
                    </span>
                  </div>

                  {qrStatus === 'expired' && (
                    <button
                      onClick={() => {
                        setQrImageUrl('')
                        setQrStatus('wait')
                        handleStartQr()
                      }}
                      className="h-9 px-4 rounded-lg bg-indigo text-white text-[13px] font-medium hover:bg-indigo/90 transition-colors"
                    >
                      重新获取二维码
                    </button>
                  )}
                </div>
              ) : (
                <div className="flex flex-col items-center gap-4 py-6">
                  {qrLoading ? (
                    <div className="flex flex-col items-center gap-3">
                      <Loader2 size={28} className="animate-spin text-indigo" />
                      <p className="text-[13px] text-ink-muted">生成二维码...</p>
                    </div>
                  ) : (
                    <button
                      onClick={handleStartQr}
                      className="h-10 px-6 rounded-lg bg-indigo text-white text-[14px] font-medium hover:bg-indigo/90 transition-colors"
                    >
                      获取二维码
                    </button>
                  )}
                </div>
              )}

              {qrMessage && !qrImageUrl && (
                <p className="text-[12px] text-coral text-center">{qrMessage}</p>
              )}
            </div>
          </div>
        </div>
      </PageShell>
    )
  }

  // Fallback
  return null
}

// ── Page Shell ───────────────────────────────────────────────────

function PageShell({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen bg-page flex flex-col items-center justify-center p-6">
      <div className="w-full max-w-[500px]">
        {children}
      </div>
    </div>
  )
}

// ── Step Indicator ──────────────────────────────────────────────

function StepIndicator({ current }: { current: number }) {
  const steps = [
    { label: '验证手机', done: current > 0 },
    { label: '连接 Bot', done: current > 1 },
    { label: '完成', done: current > 2 },
  ]

  return (
    <div className="flex items-center justify-center gap-2 max-w-md mx-auto">
      {steps.map((step, idx) => (
        <div key={idx} className="flex items-center gap-2">
          <div className={cn(
            'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] font-medium transition-colors',
            idx === current ? 'bg-indigo/10 text-indigo' :
            step.done ? 'bg-green/10 text-green' :
            'bg-surface-2 text-ink-tertiary'
          )}>
            {step.done ? <Check size={12} /> : <span className="w-[6px]" />}
            {step.label}
          </div>
          {idx < steps.length - 1 && (
            <ArrowRight size={14} className={cn(
              'text-ink-tertiary',
              idx < current ? 'text-green' : ''
            )} />
          )}
        </div>
      ))}
    </div>
  )
}