"use client";
import React from "react";
import { useState } from "react";
import { useEffect } from "react";
import {
  parseDate,
  CalendarDate,
  DateValue
} from "@internationalized/date";
import Link from "next/link";
import { DatePicker } from "@heroui/date-picker";
const AccountEditPage = () => {
  interface UserForm {
  firstname: string;
  lastname: string;
  date: CalendarDate  | string;
  email: string;
  current_password: string;
  password: string;
}
  // 统一表单对象
  const [form, setForm] = useState<UserForm>({
    firstname: "",
    lastname: "",
    date: parseDate("2026-05-12"),
    email: "",
    current_password: "",
    password: "",
  });

  // 统一处理所有input变化
  const handleChange = (e:any) => {
    const { name, value } = e.target;
    setForm((prev) => ({
      ...prev,
      [name]: value,
    }));
  };
  // 1. 定义状态：控制修改密码显示隐藏
  const [showContent, setShowContent] = useState(false);
  //   日期选择方法
  const handleDateChange = (dateValue: DateValue  | null) => {
    if (!dateValue) return;

    // 把 CalendarDate 转成 标准字符串：YYYY-MM-DD
    const formattedDate = `${dateValue.year}-${String(dateValue.month).padStart(2, "0")}-${String(dateValue.day).padStart(2, "0")}`;

    setForm((prev) => ({
      ...prev,
      date: formattedDate, // 现在是正常字符串了
    }));
  };
  // 勾选框改变时：隐藏时 → 清空密码
  const handleCheckChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const isChecked = e.target.checked;
    setShowContent(isChecked);

    // ✅ 关键：不勾选时清空密码字段
    if (!isChecked) {
      setForm((prev) => ({
        ...prev,
        current_password: "",
        password: "",
      }));
    }
  };
  // 统一提交
  const handleSubmit = (e:any) => {
    e.preventDefault();
    // 直接拿form所有数据
    console.log("表单数据：", form);
  };
  useEffect(() => {
    // console.log("form 已更新 →", form);
  }, [form]);
  return (
    <div className="w-full h-full">
      <form className="overflow-hidden" onSubmit={handleSubmit}>
        <div className="bg-[#fff] pr-2.5 pl-2.5 w-full text-center text-base h-11 leading-11 font-semibold relative text-[#0b0b0b]">
           <Link
              className="absolute left-2.5 text-2xl inline-block top-1/2  -translate-y-1/2"
              href="/customer/account"
              aria-label="Go to customer account page"
            >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
            >
              <path
                stroke="rgba(0, 0, 0, 1)"
                stroke-width="1.2"
                stroke-linejoin="round"
                stroke-linecap="round"
                d="M15 18L9 12L15 6"
              ></path>
            </svg>
          </Link>
          <span className="vipReturnTitles">Account Information</span>
        </div>
        <input name="form_key" type="hidden" value="kW7wucXHATeeem75"></input>
        <div className="bg-[#f8f8f8] p-[20px_10px]">
          <div className="text-start">*Name</div>
          <div className="flex justify-between items-center">
            <input
              name="firstname" // 必须和state字段对应
              value={form.firstname}
              onChange={handleChange}
              placeholder="firstname"
              className="w-43 h-11 rounded-sm border border-solid border-[rgba(102,102,102,1)] indent-4 text-[#a6a6a6] text-base leading-11 font-normal"
            />
            <input
              name="lastname" // 必须和state字段对应
              value={form.lastname}
              onChange={handleChange}
              placeholder="lastname"
              className="w-43 h-11 rounded-sm border border-solid border-[rgba(102,102,102,1)] indent-4 text-[#a6a6a6] text-base leading-11 font-normal box-[unset]"
            />
          </div>
          <div className="mt-7.5">
            <DatePicker
              size="md"
              onChange={handleDateChange}
              radius="sm"
              className="bg-[#fff]"
              labelPlacement={"outside"}
              showMonthAndYearPickers
              aria-label="date picker"
            />
            {/* label={"Date of Birth"} */}
          </div>
          <div className="mt-7.5">
            <label htmlFor="email">Email Address*</label>
            <input
              name="email" // 必须和state字段对应
              value={form.email}
              onChange={handleChange}
              placeholder="email"
              className="w-full h-11 rounded-sm border border-solid border-[rgba(102,102,102,1)] indent-4 text-[#a6a6a6] text-base leading-11 font-normal box-[unset]"
            />
          </div>
          {/* 选择框（开关）*/}
          <label className="flex items-center gap-2 cursor-pointer mt-7.5">
            <input
              type="checkbox"
              checked={showContent}
              onChange={handleCheckChange}
              className="w-5 h-5"
            />
            <span className="text-base">Change Password</span>
          </label>
          {showContent && (
            <div>
              <input
                type="password"
                name="current_password" // name对应key
                value={form.current_password}
                onChange={handleChange}
                placeholder="Old password"
                className="mt-7.5 w-full h-11 rounded-sm border border-solid border-[rgba(102,102,102,1)] indent-4 text-[#a6a6a6] text-base leading-11 font-normal box-[unset]"
              />
              <input
                type="password"
                name="password" // name对应key
                value={form.password}
                onChange={handleChange}
                placeholder="* New Password"
                className=" mt-7.5 w-full h-11 rounded-sm border border-solid border-[rgba(102,102,102,1)] indent-4 text-[#a6a6a6] text-base leading-11 font-normal box-[unset]"
              />
            </div>
          )}
          <button
            className="w-full h-11 leading-11 bg-[#1bbc9b] text-sm font-normal text-center mt-7.5"
            type="submit"
          >
            Save Changes
          </button>
        </div>
      </form>
    </div>
  );
};

export default AccountEditPage;
