ftb-project-management/apps/web/app/profile/page.tsx

'use client';

import { useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import { LogOut, User, KeyRound, Eye, EyeOff } from 'lucide-react';
import { useAuthStore } from '@/stores/useAuthStore';
import { useMemberStore } from '@/stores/useMemberStore';
import { FieldError } from '@/components/FieldError';

type Tab = 'info' | 'password';

export default function ProfilePage() {
  const router = useRouter();
  const user = useAuthStore((s) => s.user);
  const logout = useAuthStore((s) => s.logout);
  const { fetchMembers } = useMemberStore();
  const [activeTab, setActiveTab] = useState<Tab>('info');

  useEffect(() => { fetchMembers(); }, [fetchMembers]);
  useEffect(() => {
    if (!user) router.push('/login');
  }, [user, router]);

  if (!user) return null;

  const handleLogout = () => {
    if (!confirm('确认退出当前账号？')) return;
    logout();
    router.push('/login');
  };

  return (
    <div className="flex h-full flex-col">
      <header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-5">
        <h1 className="text-[15px] font-semibold tracking-tight text-[var(--ink)]">个人中心</h1>
        <button onClick={handleLogout} className="flex h-8 items-center gap-1.5 rounded-lg border border-red-200 bg-white px-3 text-[13px] font-medium text-red-600 hover:bg-red-50 transition-colors">
          <LogOut className="h-3.5 w-3.5" strokeWidth={2} />
          退出登录
        </button>
      </header>

      <div className="flex items-center gap-0 border-b border-[var(--line)] bg-[var(--bg-card)] px-5 shrink-0">
        <TabButton active={activeTab === 'info'} onClick={() => setActiveTab('info')} icon={User} label="个人信息" />
        <TabButton active={activeTab === 'password'} onClick={() => setActiveTab('password')} icon={KeyRound} label="修改密码" />
      </div>

      <div className="flex-1 overflow-y-auto bg-[var(--bg)] px-5 py-5">
        <div className="max-w-xl">
          {activeTab === 'info' ? <InfoForm /> : <PasswordForm />}
        </div>
      </div>
    </div>
  );
}

function TabButton({ active, onClick, icon: Icon, label }: { active: boolean; onClick: () => void; icon: any; label: string }) {
  return (
    <button
      onClick={onClick}
      className={`flex items-center gap-1.5 px-4 py-2.5 text-[13px] font-medium border-b-2 transition-colors ${active ? 'border-[var(--accent)] text-[var(--ink)]' : 'border-transparent text-[var(--ink-muted)] hover:text-[var(--ink-soft)]'}`}
    >
      <Icon className="h-3.5 w-3.5" strokeWidth={1.75} />
      {label}
    </button>
  );
}

function InfoForm() {
  const user = useAuthStore((s) => s.user)!;
  const refreshUser = useAuthStore((s) => s.refreshUser);
  const { members, departments, roles, updateMember } = useMemberStore();
  const member = members.find((m) => m.id === user.id);

  const [name, setName] = useState(member?.name ?? user.name);
  const [phone, setPhone] = useState(member?.phone ?? user.phone);
  const [email, setEmail] = useState(member?.email ?? user.email);
  const [errors, setErrors] = useState<{ name?: string; phone?: string; email?: string }>({});
  const [savedAt, setSavedAt] = useState(0);

  const deptName = useMemo(() => {
    const d = departments.find((x) => x.id === user.departmentId);
    if (!d) return '-';
    if (d.parentId) {
      const parent = departments.find((x) => x.id === d.parentId);
      return parent ? `${parent.name} / ${d.name}` : d.name;
    }
    return d.name;
  }, [departments, user.departmentId]);

  const roleName = roles.find((r) => r.id === user.roleId)?.name ?? '-';

  const handleReset = () => {
    setName(member?.name ?? user.name);
    setPhone(member?.phone ?? user.phone);
    setEmail(member?.email ?? user.email);
    setErrors({});
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const errs: typeof errors = {};
    if (!name.trim()) errs.name = '请输入姓名';
    else if (name.trim().length > 20) errs.name = '姓名最长 20 字符';
    if (!phone.trim()) errs.phone = '请输入手机号';
    else if (!/^1[3-9]\d{9}$/.test(phone.trim())) errs.phone = '手机号格式错误';
    if (!email.trim()) errs.email = '请输入邮箱';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) errs.email = '邮箱格式错误';
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    updateMember(user.id, { name: name.trim(), phone: phone.trim(), email: email.trim() });
    refreshUser();
    setSavedAt(Date.now());
    setTimeout(() => setSavedAt(0), 2000);
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-5">
      <Field label="姓名" required>
        <input value={name} onChange={(e) => setName(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
        <FieldError message={errors.name} />
      </Field>
      <Field label="手机号" required>
        <input value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="11位手机号" className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
        <FieldError message={errors.phone} />
      </Field>
      <Field label="邮箱" required>
        <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="name@company.com" className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
        <FieldError message={errors.email} />
      </Field>
      <Field label="部门">
        <input value={deptName} disabled className="h-9 w-full rounded-lg border border-[var(--line)] bg-zinc-50 px-3 text-[13px] text-[var(--ink-soft)] cursor-not-allowed" />
      </Field>
      <Field label="角色">
        <input value={roleName} disabled className="h-9 w-full rounded-lg border border-[var(--line)] bg-zinc-50 px-3 text-[13px] text-[var(--ink-soft)] cursor-not-allowed" />
      </Field>
      <div className="flex items-center justify-end gap-2 pt-2">
        {savedAt > 0 && <span className="text-[12px] text-emerald-600 mr-auto">已保存</span>}
        <button type="button" onClick={handleReset} className="h-8 px-3 rounded-lg text-[12px] font-medium border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]">取消</button>
        <button type="submit" className="h-8 px-4 rounded-lg text-[12px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]">保存</button>
      </div>
    </form>
  );
}

function PasswordForm() {
  const user = useAuthStore((s) => s.user)!;
  const { members, updateMember } = useMemberStore();

  const [oldPwd, setOldPwd] = useState('');
  const [newPwd, setNewPwd] = useState('');
  const [confirmPwd, setConfirmPwd] = useState('');
  const [showOld, setShowOld] = useState(false);
  const [showNew, setShowNew] = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);
  const [errors, setErrors] = useState<{ oldPwd?: string; newPwd?: string; confirmPwd?: string }>({});
  const [savedAt, setSavedAt] = useState(0);

  const handleReset = () => {
    setOldPwd(''); setNewPwd(''); setConfirmPwd('');
    setErrors({});
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const member = members.find((m) => m.id === user.id);
    const errs: typeof errors = {};
    if (!oldPwd) errs.oldPwd = '请输入当前密码';
    else if (member && oldPwd !== member.password) errs.oldPwd = '当前密码错误';
    if (!newPwd) errs.newPwd = '请输入新密码';
    else if (newPwd.length < 8) errs.newPwd = '新密码长度至少 8 位';
    else if (newPwd === oldPwd) errs.newPwd = '新密码不能与当前密码相同';
    if (!confirmPwd) errs.confirmPwd = '请再次输入新密码';
    else if (confirmPwd !== newPwd) errs.confirmPwd = '两次输入不一致';
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    updateMember(user.id, { password: newPwd });
    handleReset();
    setSavedAt(Date.now());
    setTimeout(() => setSavedAt(0), 3000);
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-5">
      <Field label="当前密码" required>
        <PwdInput value={oldPwd} onChange={setOldPwd} show={showOld} onToggle={() => setShowOld(!showOld)} />
        <FieldError message={errors.oldPwd} />
      </Field>
      <Field label="新密码" required>
        <PwdInput value={newPwd} onChange={setNewPwd} show={showNew} onToggle={() => setShowNew(!showNew)} />
        <FieldError message={errors.newPwd} />
      </Field>
      <Field label="确认新密码" required>
        <PwdInput value={confirmPwd} onChange={setConfirmPwd} show={showConfirm} onToggle={() => setShowConfirm(!showConfirm)} />
        <FieldError message={errors.confirmPwd} />
      </Field>
      <div className="flex items-center justify-end gap-2 pt-2">
        {savedAt > 0 && <span className="text-[12px] text-emerald-600 mr-auto">密码已修改，下次登录生效</span>}
        <button type="button" onClick={handleReset} className="h-8 px-3 rounded-lg text-[12px] font-medium border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]">取消</button>
        <button type="submit" className="h-8 px-4 rounded-lg text-[12px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]">保存</button>
      </div>
    </form>
  );
}

function Field({ label, required, children }: { label: string; required?: boolean; children: React.ReactNode }) {
  return (
    <div>
      <label className="text-[12px] font-medium text-[var(--ink-soft)] mb-1 block">
        {label}{required && <span className="text-red-500"> *</span>}
      </label>
      {children}
    </div>
  );
}

function PwdInput({ value, onChange, show, onToggle }: { value: string; onChange: (v: string) => void; show: boolean; onToggle: () => void }) {
  return (
    <div className="relative">
      <input
        type={show ? 'text' : 'password'}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 pr-9 text-[13px] focus:border-[var(--accent)] focus:outline-none"
      />
      <button type="button" onClick={onToggle} className="absolute right-1 top-1/2 -translate-y-1/2 p-1.5 text-[var(--ink-muted)] hover:text-[var(--ink-soft)]">
        {show ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
      </button>
    </div>
  );
}