/**
 * H5 我的页面
 * - 个人信息展示
 * - 退出登录
 */
import { useNavigate } from 'react-router-dom';
import { useH5AuthStore } from '../auth';
import { PageContainer, ConfirmDialog } from '../components';
import { useState } from 'react';

export default function H5Me() {
  const { user, logout } = useH5AuthStore();
  const navigate = useNavigate();
  const [showLogout, setShowLogout] = useState(false);

  const handleLogout = () => {
    logout();
    navigate('/pms/login', { replace: true });
  };

  return (
    <PageContainer title="我的">
      {/* 用户信息 */}
      <div className="mb-6 flex items-center gap-4 rounded-xl bg-white p-4">
        <div className="flex h-14 w-14 items-center justify-center rounded-full bg-blue-100 text-xl font-bold text-blue-600">
          {(user?.name || user?.phone || '?').charAt(0)}
        </div>
        <div>
          <p className="text-base font-semibold text-gray-900">{user?.name || '用户'}</p>
          <p className="text-sm text-gray-500">{user?.phone}</p>
        </div>
      </div>

      {/* 菜单项 */}
      <div className="rounded-xl bg-white">
        <button className="flex w-full items-center justify-between px-4 py-4 active:bg-gray-50" onClick={() => navigate('/pms/me')}>
          <span className="text-sm text-gray-900">修改密码</span>
          <svg className="h-4 w-4 text-gray-400" viewBox="0 0 24 24" fill="currentColor">
            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
          </svg>
        </button>
        {/* ponytail: password change page placeholder, add when backend endpoint ready */}
      </div>

      <div className="mt-6">
        <button
          className="w-full rounded-lg border border-red-200 bg-white py-3 text-base font-medium text-red-500"
          onClick={() => setShowLogout(true)}
        >
          退出登录
        </button>
      </div>

      <ConfirmDialog
        open={showLogout}
        title="退出登录"
        message="确定要退出当前账号？"
        onConfirm={handleLogout}
        onCancel={() => setShowLogout(false)}
      />
    </PageContainer>
  );
}
