"use client"

import { useState } from "react"
import { X, Phone, Lock, 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 [password, setPassword] = useState("")
  const [nickname, setNickname] = useState("")
  const [referralCode, setReferralCode] = useState("")
  const [error, setError] = useState("")
  const [isLoading, setIsLoading] = useState(false)

  const { login, register } = useStore()

  const handleLogin = async () => {
    setError("")
    if (phone.length !== 11) {
      setError("请输入正确的手机号")
      return
    }
    if (!password) {
      setError("请输入密码")
      return
    }

    setIsLoading(true)
    // 使用密码替代验证码进行登录
    const success = await login(phone, password)
    setIsLoading(false)

    if (success) {
      onClose()
    } else {
      setError("手机号或密码错误，请先注册")
    }
  }

  const handleRegister = async () => {
    setError("")
    if (phone.length !== 11) {
      setError("请输入正确的手机号")
      return
    }
    if (!password || password.length < 6) {
      setError("密码至少6位")
      return
    }

    setIsLoading(true)
    // 昵称可选，默认使用手机号后四位
    const name = nickname.trim() || `用户${phone.slice(-4)}`
    const success = await register(phone, name, referralCode || undefined)
    setIsLoading(false)

    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/80 backdrop-blur-sm" onClick={onClose} />

      {/* Modal */}
      <div className="relative w-full max-w-sm bg-[#1c1c1e] rounded-2xl border border-white/10 overflow-hidden">
        {/* Close button */}
        <button
          onClick={onClose}
          className="absolute top-4 right-4 p-2 text-white/40 hover:text-white transition-colors"
        >
          <X className="w-5 h-5" />
        </button>

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

        {/* Content */}
        <div className="p-6">
          {tab === "login" ? (
            <div className="space-y-4">
              <div>
                <label className="block text-white/60 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-white/30" />
                  <Input
                    type="tel"
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                    placeholder="请输入手机号"
                    className="pl-10 bg-[#2c2c2e] border-white/10 text-white placeholder:text-white/30 h-12 rounded-xl"
                    maxLength={11}
                  />
                </div>
              </div>

              <div>
                <label className="block text-white/60 text-sm mb-2">密码</label>
                <div className="relative">
                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-white/30" />
                  <Input
                    type="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    placeholder="请输入密码"
                    className="pl-10 bg-[#2c2c2e] border-white/10 text-white placeholder:text-white/30 h-12 rounded-xl"
                  />
                </div>
              </div>

              {error && <p className="text-[#00CED1] text-sm">{error}</p>}

              <Button
                onClick={handleLogin}
                disabled={isLoading}
                className="w-full bg-[#00CED1] hover:bg-[#00B4B7] text-white h-12 rounded-xl font-medium"
              >
                {isLoading ? "登录中..." : "登录"}
              </Button>
            </div>
          ) : (
            <div className="space-y-4">
              <div>
                <label className="block text-white/60 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-white/30" />
                  <Input
                    type="tel"
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                    placeholder="请输入手机号"
                    className="pl-10 bg-[#2c2c2e] border-white/10 text-white placeholder:text-white/30 h-12 rounded-xl"
                    maxLength={11}
                  />
                </div>
              </div>

              <div>
                <label className="block text-white/60 text-sm mb-2">密码</label>
                <div className="relative">
                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-white/30" />
                  <Input
                    type="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    placeholder="设置密码（至少6位）"
                    className="pl-10 bg-[#2c2c2e] border-white/10 text-white placeholder:text-white/30 h-12 rounded-xl"
                  />
                </div>
              </div>

              <div>
                <label className="block text-white/60 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-white/30" />
                  <Input
                    type="text"
                    value={nickname}
                    onChange={(e) => setNickname(e.target.value)}
                    placeholder="不填则使用默认昵称"
                    className="pl-10 bg-[#2c2c2e] border-white/10 text-white placeholder:text-white/30 h-12 rounded-xl"
                  />
                </div>
              </div>

              <div>
                <label className="block text-white/60 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-white/30" />
                  <Input
                    type="text"
                    value={referralCode}
                    onChange={(e) => setReferralCode(e.target.value)}
                    placeholder="填写可获得优惠"
                    className="pl-10 bg-[#2c2c2e] border-white/10 text-white placeholder:text-white/30 h-12 rounded-xl"
                  />
                </div>
              </div>

              {error && <p className="text-[#00CED1] text-sm">{error}</p>}

              <Button
                onClick={handleRegister}
                disabled={isLoading}
                className="w-full bg-[#00CED1] hover:bg-[#00B4B7] text-white h-12 rounded-xl font-medium"
              >
                {isLoading ? "注册中..." : "立即注册"}
              </Button>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}