"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { useStore } from "@/lib/store"
import { ChevronLeft, Phone, User, Hash } from "lucide-react"

export default function LoginPage() {
  const router = useRouter()
  const { login, register, adminLogin } = useStore()
  const [mode, setMode] = useState<"login" | "register">("login")
  const [phone, setPhone] = useState("")
  const [code, setCode] = useState("")
  const [nickname, setNickname] = useState("")
  const [referralCode, setReferralCode] = useState("")
  const [error, setError] = useState("")
  const [loading, setLoading] = useState(false)

  const handleSubmit = async () => {
    setError("")
    setLoading(true)

    try {
      // 管理员登录
      if (phone.toLowerCase() === "admin") {
        if (adminLogin(phone, code)) {
          router.push("/admin")
          return
        } else {
          setError("管理员密码错误")
          return
        }
      }

      if (mode === "login") {
        const success = await login(phone, code)
        if (success) {
          router.push("/")
        } else {
          setError("验证码错误或用户不存在")
        }
      } else {
        if (!nickname.trim()) {
          setError("请输入昵称")
          return
        }
        const success = await register(phone, nickname, referralCode || undefined)
        if (success) {
          router.push("/")
        } else {
          setError("该手机号已注册")
        }
      }
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-h-screen bg-black text-white flex flex-col">
      {/* 顶部导航 */}
      <header className="flex items-center px-4 py-3">
        <button
          onClick={() => router.back()}
          className="w-9 h-9 rounded-full bg-[#1c1c1e] flex items-center justify-center"
        >
          <ChevronLeft className="w-5 h-5 text-gray-400" />
        </button>
      </header>

      {/* 主内容 */}
      <main className="flex-1 px-6 pt-8">
        <h1 className="text-2xl font-bold mb-2">{mode === "login" ? "登录" : "注册"}</h1>
        <p className="text-gray-500 text-sm mb-8">
          {mode === "login" ? "登录后查看购买记录和收益" : "注册后开始阅读真实商业故事"}
        </p>

        <div className="space-y-4">
          {/* 手机号 */}
          <div className="relative">
            <Phone className="absolute left-4 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="w-full pl-12 pr-4 py-3.5 bg-[#1c1c1e] rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#30d158]/50"
            />
          </div>

          {/* 昵称（注册时显示） */}
          {mode === "register" && (
            <div className="relative">
              <User className="absolute left-4 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="w-full pl-12 pr-4 py-3.5 bg-[#1c1c1e] rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#30d158]/50"
              />
            </div>
          )}

          {/* 验证码/密码 */}
          <div className="relative">
            <Hash className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
            <input
              type="text"
              value={code}
              onChange={(e) => setCode(e.target.value)}
              placeholder={mode === "login" ? "验证码（测试：123456）" : "设置密码"}
              className="w-full pl-12 pr-4 py-3.5 bg-[#1c1c1e] rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#30d158]/50"
            />
          </div>

          {/* 邀请码（注册时显示） */}
          {mode === "register" && (
            <div className="relative">
              <Hash className="absolute left-4 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="w-full pl-12 pr-4 py-3.5 bg-[#1c1c1e] rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#30d158]/50"
              />
            </div>
          )}

          {/* 错误提示 */}
          {error && <p className="text-red-500 text-sm">{error}</p>}

          {/* 提交按钮 */}
          <button
            onClick={handleSubmit}
            disabled={loading || !phone}
            className="w-full py-3.5 bg-[#30d158] text-white font-medium rounded-xl active:scale-[0.98] transition-transform disabled:opacity-50"
          >
            {loading ? "处理中..." : mode === "login" ? "登录" : "注册"}
          </button>

          {/* 切换模式 */}
          <div className="text-center">
            <button onClick={() => setMode(mode === "login" ? "register" : "login")} className="text-[#30d158] text-sm">
              {mode === "login" ? "没有账号？去注册" : "已有账号？去登录"}
            </button>
          </div>
        </div>
      </main>
    </div>
  )
}
