"use client"

import { useState } from "react"
import { X, Phone, User, Gift } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useStore } from "@/lib/store"

interface AuthModalProps {
  isOpen: boolean
  onClose: () => void
  defaultTab?: "login" | "register"
}

export function AuthModal({ isOpen, onClose, defaultTab = "login" }: AuthModalProps) {
  const [tab, setTab] = useState<"login" | "register">(defaultTab)
  const [phone, setPhone] = useState("")
  const [code, setCode] = useState("")
  const [nickname, setNickname] = useState("")
  const [referralCode, setReferralCode] = useState("")
  const [error, setError] = useState("")
  const [codeSent, setCodeSent] = useState(false)

  const { login, register } = useStore()

  const handleSendCode = () => {
    if (phone.length !== 11) {
      setError("请输入正确的手机号")
      return
    }
    // Simulate sending verification code
    setCodeSent(true)
    setError("")
    alert("验证码已发送,测试验证码: 123456")
  }

  const handleLogin = async () => {
    setError("")
    const success = await login(phone, code)
    if (success) {
      onClose()
    } else {
      setError("验证码错误或用户不存在,请先注册")
    }
  }

  const handleRegister = async () => {
    setError("")
    if (!nickname.trim()) {
      setError("请输入昵称")
      return
    }
    const success = await register(phone, nickname, referralCode || undefined)
    if (success) {
      onClose()
    } else {
      setError("该手机号已注册")
    }
  }

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      {/* Backdrop */}
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />

      {/* Modal */}
      <div className="relative w-full max-w-md bg-[#0f2137] rounded-2xl border border-gray-700/50 overflow-hidden">
        {/* Close button */}
        <button
          onClick={onClose}
          className="absolute top-4 right-4 p-2 text-gray-400 hover:text-white transition-colors"
        >
          <X className="w-5 h-5" />
        </button>

        {/* Tabs */}
        <div className="flex border-b border-gray-700/50">
          <button
            onClick={() => setTab("login")}
            className={`flex-1 py-4 text-center transition-colors ${
              tab === "login" ? "text-white border-b-2 border-[#38bdac]" : "text-gray-400 hover:text-white"
            }`}
          >
            登录
          </button>
          <button
            onClick={() => setTab("register")}
            className={`flex-1 py-4 text-center transition-colors ${
              tab === "register" ? "text-white border-b-2 border-[#38bdac]" : "text-gray-400 hover:text-white"
            }`}
          >
            注册
          </button>
        </div>

        {/* Content */}
        <div className="p-6">
          {tab === "login" ? (
            <div className="space-y-4">
              <div>
                <label className="block text-gray-400 text-sm mb-2">手机号</label>
                <div className="relative">
                  <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
                  <Input
                    type="tel"
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                    placeholder="请输入手机号"
                    className="pl-10 bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500"
                    maxLength={11}
                  />
                </div>
              </div>

              <div>
                <label className="block text-gray-400 text-sm mb-2">验证码</label>
                <div className="flex gap-3">
                  <Input
                    type="text"
                    value={code}
                    onChange={(e) => setCode(e.target.value)}
                    placeholder="请输入验证码"
                    className="bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500"
                    maxLength={6}
                  />
                  <Button
                    type="button"
                    variant="outline"
                    onClick={handleSendCode}
                    disabled={codeSent}
                    className="whitespace-nowrap border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"
                  >
                    {codeSent ? "已发送" : "获取验证码"}
                  </Button>
                </div>
              </div>

              {error && <p className="text-red-400 text-sm">{error}</p>}

              <Button onClick={handleLogin} className="w-full bg-[#38bdac] hover:bg-[#2da396] text-white py-5">
                登录
              </Button>
            </div>
          ) : (
            <div className="space-y-4">
              <div>
                <label className="block text-gray-400 text-sm mb-2">手机号</label>
                <div className="relative">
                  <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
                  <Input
                    type="tel"
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                    placeholder="请输入手机号"
                    className="pl-10 bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500"
                    maxLength={11}
                  />
                </div>
              </div>

              <div>
                <label className="block text-gray-400 text-sm mb-2">昵称</label>
                <div className="relative">
                  <User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
                  <Input
                    type="text"
                    value={nickname}
                    onChange={(e) => setNickname(e.target.value)}
                    placeholder="请输入昵称"
                    className="pl-10 bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500"
                  />
                </div>
              </div>

              <div>
                <label className="block text-gray-400 text-sm mb-2">验证码</label>
                <div className="flex gap-3">
                  <Input
                    type="text"
                    value={code}
                    onChange={(e) => setCode(e.target.value)}
                    placeholder="请输入验证码"
                    className="bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500"
                    maxLength={6}
                  />
                  <Button
                    type="button"
                    variant="outline"
                    onClick={handleSendCode}
                    disabled={codeSent}
                    className="whitespace-nowrap border-gray-600 text-gray-300 hover:bg-gray-700/50 bg-transparent"
                  >
                    {codeSent ? "已发送" : "获取验证码"}
                  </Button>
                </div>
              </div>

              <div>
                <label className="block text-gray-400 text-sm mb-2">邀请码 (选填)</label>
                <div className="relative">
                  <Gift className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
                  <Input
                    type="text"
                    value={referralCode}
                    onChange={(e) => setReferralCode(e.target.value)}
                    placeholder="填写邀请码可获得优惠"
                    className="pl-10 bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500"
                  />
                </div>
              </div>

              {error && <p className="text-red-400 text-sm">{error}</p>}

              <Button onClick={handleRegister} className="w-full bg-[#38bdac] hover:bg-[#2da396] text-white py-5">
                注册
              </Button>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}