import { useState, type FormEvent } from 'react';
import { useSession } from '@/entities/session';

export function ProfilePage() {
  const { user, updateProfile } = useSession();
  const [name, setName] = useState(user?.name || '');
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState('');

  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    setSaving(true);
    setMessage('');
    try {
      await updateProfile({ name: name || undefined });
      setMessage('Профиль обновлён');
    } catch {
      setMessage('Не удалось обновить профиль');
    } finally {
      setSaving(false);
    }
  }

  if (!user) return null;

  return (
    <div style={{ maxWidth: 500, margin: '40px auto' }}>
      <h1 style={{ marginBottom: 24, fontSize: 24, fontWeight: 700 }}>Профиль</h1>
      <div
        style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--border-radius)',
          boxShadow: 'var(--shadow)',
          padding: 24,
        }}
      >
        <div style={{ marginBottom: 16 }}>
          <span style={{ fontSize: 14, color: 'var(--color-text-secondary)' }}>Почта</span>
          <p style={{ fontSize: 16, fontWeight: 500 }}>{user.email}</p>
        </div>
        <div style={{ marginBottom: 16 }}>
          <span style={{ fontSize: 14, color: 'var(--color-text-secondary)' }}>Роль</span>
          <p style={{ fontSize: 16, fontWeight: 500 }}>{user.role}</p>
        </div>
        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div>
            <label
              style={{
                display: 'block',
                marginBottom: 4,
                fontSize: 14,
                color: 'var(--color-text-secondary)',
              }}
            >
              Имя
            </label>
            <input
              value={name}
              onChange={(e) => setName(e.target.value)}
              style={{
                width: '100%',
                padding: '10px 12px',
                border: '1px solid #e0e0e0',
                borderRadius: 'var(--border-radius)',
                fontSize: 16,
                outline: 'none',
                boxSizing: 'border-box',
              }}
            />
          </div>
          {message && (
            <div
              style={{
                fontSize: 14,
                color:
                  message === 'Профиль обновлён'
                    ? 'var(--color-positive)'
                    : 'var(--color-negative)',
              }}
            >
              {message}
            </div>
          )}
          <button
            type="submit"
            disabled={saving}
            style={{
              padding: '10px 20px',
              background: 'var(--color-primary)',
              color: '#fff',
              border: 'none',
              borderRadius: 'var(--border-radius)',
              fontSize: 14,
              fontWeight: 600,
              cursor: 'pointer',
              alignSelf: 'flex-start',
            }}
          >
            {saving ? 'Сохранение...' : 'Сохранить'}
          </button>
        </form>
      </div>
    </div>
  );
}