"use client";
import Link from "next/link";
import { useState } from "react";
import HelpModal from "../../app/(public)/customer/account/_components/HelpModal";
export default function SettingModal({
  visible,
  onClose,
}: {
  visible: boolean;
  onClose: () => void;
}) {
  const [showSetting, setShowSetting] = useState(false);
  // 如果不显示，直接 return null
  if (!visible) return null;
  
  return (
    <>
      {/* // 全屏遮罩 */}
      <div className="fixed inset-0 z-50 bg-black/50">
        {/* 弹框主体 - 从底部滑上来 */}
        <div className="absolute bottom-0 rounded-none left-0 right-0 w-full h-full bg-white  overflow-auto">
          <div className="flex flex-col">
            {/* 顶部导航 */}
            <header className="bg-black text-white py-4 px-4 flex items-center">
              <button onClick={onClose} className="mr-4">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-6 w-6"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M15 19l-7-7 7-7"
                  />
                </svg>
              </button>
              <h1 className="text-lg font-medium">Setting</h1>
            </header>

            {/* 头像区域 */}
            <div className="bg-[#FFF5F0] py-8 flex flex-col items-center">
              <div className="w-20 h-20 bg-white rounded-full flex items-center justify-center border-2 border-black">
                <span className="text-black font-bold text-lg">LOGO</span>
              </div>
            </div>

            {/* 菜单列表 */}
            <div className="px-4 py-2">
              {/* Information */}
              <Link
                href={"/customer/account/edit"}
                className="py-4 border-b border-gray-100 flex justify-between items-center"
              >
                {/* <div > */}
                <span className="text-black font-medium">Information</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-5 w-5 text-gray-400"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9 5l7 7-7 7"
                  />
                </svg>
                {/* </div> */}
              </Link>
              {/* Address */}
              <Link
                href={"/customer/address"}
                className="py-4 border-b border-gray-100 flex justify-between items-center"
              >
                {/* <div > */}
                <span className="text-black font-medium">Address</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-5 w-5 text-gray-400"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9 5l7 7-7 7"
                  />
                </svg>
                {/* </div> */}
              </Link>
              {/* help & Support */}
              <div
                onClick={() => {
                  setShowSetting(true);
                }}
                className="py-4 border-b border-gray-100 flex justify-between items-center"
              >
                {/* <div > */}
                <span className="text-black font-medium">help & Support</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  className="h-5 w-5 text-gray-400"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9 5l7 7-7 7"
                  />
                </svg>
                {/* </div> */}
              </div>
              {/* Subscribe 开关 */}
              <div className="py-4 border-b border-gray-100 flex justify-between items-center">
                <span className="text-black font-medium">Subscribe</span>
                <div className="relative w-12 h-6 rounded-full bg-black">
                  <div className="absolute right-0.5 top-0.5 w-5 h-5 bg-white rounded-full"></div>
                </div>
              </div>

              {/* Log Out */}
              <div className="py-4 border-b border-gray-100">
                <button className="text-black font-medium w-full text-left">
                  Log Out
                </button>
              </div>
            </div>

            {/* 版本号 */}
            <div className="py-6 text-center text-gray-400 text-sm">v1.1.0</div>
          </div>
        </div>
      </div>
      <HelpModal
        helpvisible={showSetting}
        helponClose={() => setShowSetting(false)}
      />
    </>
  );
}
