import { Eye, EyeOff } from "lucide-react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

interface EditInfoDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  initialData?: {
    username: string
    taobao: string
    password: string
    email: string
    wechat: string
    qq: string
  }
  onSave?: (data: any) => void
}

export function EditInfoDialog({
  open,
  onOpenChange,
  initialData = {
    username: "191****1234",
    taobao: "191****1234",
    password: "********",
    email: "123456123@qq.com",
    wechat: "",
    qq: "",
  },
  onSave,
}: EditInfoDialogProps) {
  const [formData, setFormData] = useState(initialData)
  const [showPassword, setShowPassword] = useState(false)

  const handleChange = (field: string, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }))
  }

  const handleSubmit = () => {
    onSave?.(formData)
    onOpenChange(false)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[480px] p-6">
        <DialogHeader>
          <DialogTitle className="text-xl font-semibold text-center">
            编辑信息
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-4 mt-2">
          {/* 用户名 */}
          <div className="space-y-1.5">
            <Label className="text-sm text-gray-600">用户名</Label>
            <Input
              value={formData.username}
              onChange={e => handleChange("username", e.target.value)}
              className="h-11 bg-gray-50 border-gray-200"
            />
          </div>

          {/* 淘宝会员名 */}
          <div className="space-y-1.5">
            <Label className="text-sm text-gray-600">淘宝会员名</Label>
            <Input
              value={formData.taobao}
              onChange={e => handleChange("taobao", e.target.value)}
              className="h-11 bg-gray-50 border-gray-200"
            />
          </div>

          {/* 密码 */}
          <div className="space-y-1.5">
            <Label className="text-sm text-gray-600">密码</Label>
            <div className="relative">
              <Input
                type={showPassword ? "text" : "password"}
                value={formData.password}
                onChange={e => handleChange("password", e.target.value)}
                className="h-11 bg-gray-50 border-gray-200 pr-10"
              />
              <button
                type="button"
                onClick={() => setShowPassword(!showPassword)}
                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
              >
                {showPassword ? (
                  <EyeOff className="h-4 w-4" />
                ) : (
                  <Eye className="h-4 w-4" />
                )}
              </button>
            </div>
          </div>

          {/* 邮箱 */}
          <div className="space-y-1.5">
            <Label className="text-sm text-gray-600">邮箱</Label>
            <Input
              value={formData.email}
              onChange={e => handleChange("email", e.target.value)}
              className="h-11 bg-gray-50 border-gray-200"
            />
          </div>

          {/* 微信 */}
          <div className="space-y-1.5">
            <Label className="text-sm text-gray-600">微信</Label>
            <Input
              value={formData.wechat}
              onChange={e => handleChange("wechat", e.target.value)}
              placeholder="请输入"
              className="h-11 bg-gray-50 border-gray-200"
            />
          </div>

          {/* QQ */}
          <div className="space-y-1.5">
            <Label className="text-sm text-gray-600">QQ</Label>
            <Input
              value={formData.qq}
              onChange={e => handleChange("qq", e.target.value)}
              placeholder="请输入"
              className="h-11 bg-gray-50 border-gray-200"
            />
          </div>

          {/* 保存按钮 */}
          <Button
            onClick={handleSubmit}
            className="w-full h-11 mt-2 bg-blue-600 hover:bg-blue-700 text-white font-medium"
          >
            保存
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}