"use client"

import { useState } from "react"
import Link from "next/link"
import { ArrowLeft, Phone, Bell, Shield, HelpCircle } from "lucide-react"
import { useStore } from "@/lib/store"

export default function SettingsPage() {
  const { user, updateUser } = useStore()
  const [nickname, setNickname] = useState(user?.nickname || "")
  const [saved, setSaved] = useState(false)

  const handleSave = () => {
    if (user) {
      updateUser(user.id, { nickname })
      setSaved(true)
      setTimeout(() => setSaved(false), 2000)
    }
  }

  return (
    <main className="min-h-screen bg-[#0a1628] text-white pb-20">
      <div className="sticky top-0 z-10 bg-[#0a1628]/95 backdrop-blur-md border-b border-gray-700/50">
        <div className="max-w-md mx-auto flex items-center gap-4 p-4">
          <Link href="/my" className="p-2 -ml-2">
            <ArrowLeft className="w-5 h-5" />
          </Link>
          <h1 className="text-lg font-semibold">账户设置</h1>
        </div>
      </div>

      <div className="p-4">
        <div className="max-w-md mx-auto space-y-4">
          {/* Profile Settings */}
          <div className="bg-[#0f2137]/60 rounded-xl p-4">
            <h3 className="text-gray-400 text-sm mb-4">个人信息</h3>

            <div className="space-y-4">
              <div>
                <label className="text-gray-400 text-xs">昵称</label>
                <input
                  type="text"
                  value={nickname}
                  onChange={(e) => setNickname(e.target.value)}
                  className="w-full bg-[#0a1628] border border-gray-700 rounded-lg px-4 py-3 text-white mt-1"
                />
              </div>

              <div>
                <label className="text-gray-400 text-xs">手机号</label>
                <div className="flex items-center gap-2 mt-1">
                  <Phone className="w-4 h-4 text-gray-500" />
                  <span className="text-gray-400">{user?.phone}</span>
                </div>
              </div>
            </div>

            <button
              onClick={handleSave}
              className="w-full mt-4 bg-[#38bdac] hover:bg-[#2da396] text-white py-3 rounded-lg font-medium"
            >
              {saved ? "已保存" : "保存修改"}
            </button>
          </div>

          {/* Other Settings */}
          <div className="bg-[#0f2137]/60 rounded-xl overflow-hidden">
            <div className="flex items-center justify-between p-4 border-b border-gray-700/30">
              <div className="flex items-center gap-3">
                <Bell className="w-5 h-5 text-gray-400" />
                <span>消息通知</span>
              </div>
              <div className="w-10 h-5 bg-[#38bdac] rounded-full relative">
                <div className="w-4 h-4 bg-white rounded-full absolute right-0.5 top-0.5" />
              </div>
            </div>

            <div className="flex items-center justify-between p-4 border-b border-gray-700/30">
              <div className="flex items-center gap-3">
                <Shield className="w-5 h-5 text-gray-400" />
                <span>隐私设置</span>
              </div>
            </div>

            <Link href="/docs" className="flex items-center justify-between p-4">
              <div className="flex items-center gap-3">
                <HelpCircle className="w-5 h-5 text-gray-400" />
                <span>帮助文档</span>
              </div>
            </Link>
          </div>
        </div>
      </div>
    </main>
  )
}