import { useEffect, useState } from 'react';
import { api } from '../../services/api-client';
import { useAuthStore } from '../../stores/auth.store';

export function ProfilePage() {
  const user = useAuthStore((s) => s.user);
  const updateProfile = useAuthStore((s) => s.updateProfile);

  const [form, setForm] = useState({
    name: '', department: '', title: '', introduction: '', phone: '',
  });

  useEffect(() => {
    if (user) setForm({
      name: user.name || '',
      department: user.department || '',
      title: user.title || '',
      introduction: user.introduction || '',
      phone: user.phone || '',
    });
  }, [user]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      await api.put('/api/auth/me', {
        name: form.name,
        department: form.department,
        title: form.title,
        introduction: form.introduction,
      });
      updateProfile(form);
      alert('保存成功');
    } catch { alert('保存失败'); }
  };

  if (!user) return null;

  return (
    <div style={{ padding: 24 }}>
      <h2 style={{ marginBottom: 16 }}>个人设置</h2>

      <form onSubmit={handleSubmit} style={{ background: '#fff', padding: 24, borderRadius: 8, maxWidth: 500 }}>
        <div style={{ marginBottom: 14 }}>
          <label style={{ display: 'block', fontSize: 13, marginBottom: 4 }}>姓名</label>
          <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}
            style={{ width: '100%', padding: '8px 12px', border: '1px solid #ddd', borderRadius: 4 }} />
        </div>

        <div style={{ marginBottom: 14 }}>
          <label style={{ display: 'block', fontSize: 13, marginBottom: 4 }}>手机号</label>
          <input value={form.phone} disabled
            style={{ width: '100%', padding: '8px 12px', border: '1px solid #eee', borderRadius: 4, background: '#f9f9f9' }} />
        </div>

        <div style={{ marginBottom: 14 }}>
          <label style={{ display: 'block', fontSize: 13, marginBottom: 4 }}>科室</label>
          <input value={form.department} onChange={(e) => setForm({ ...form, department: e.target.value })}
            style={{ width: '100%', padding: '8px 12px', border: '1px solid #ddd', borderRadius: 4 }} />
        </div>

        <div style={{ marginBottom: 14 }}>
          <label style={{ display: 'block', fontSize: 13, marginBottom: 4 }}>职称</label>
          <input value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })}
            style={{ width: '100%', padding: '8px 12px', border: '1px solid #ddd', borderRadius: 4 }} />
        </div>

        <div style={{ marginBottom: 18 }}>
          <label style={{ display: 'block', fontSize: 13, marginBottom: 4 }}>个人简介</label>
          <textarea value={form.introduction} onChange={(e) => setForm({ ...form, introduction: e.target.value })} rows={4}
            style={{ width: '100%', padding: '8px 12px', border: '1px solid #ddd', borderRadius: 4, resize: 'vertical' }} />
        </div>

        <button type="submit" style={{
          padding: '10px 24px', background: '#1976d2', color: '#fff',
          border: 'none', borderRadius: 4, fontSize: 14,
        }}>
          保存
        </button>
      </form>
    </div>
  );
}