network-app-web/src/pages/SettingsPage.tsx

import { useEffect, useState } from 'react';
import { api } from '@/lib/api';
import { useAuthStore } from '@/stores/auth';
import type { Profile } from '@/types';
import { Save, User, Lock, Mail, CheckCircle2, AlertCircle } from 'lucide-react';
import LoadingSpinner, { PageLoader } from '@/components/LoadingSpinner';

function StatusMessage({ type, message }: { type: 'success' | 'error'; message: string }) {
  return (
    <div className={`flex items-center gap-2 text-sm font-medium animate-fade-in ${type === 'success' ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}`}>
      {type === 'success' ? <CheckCircle2 className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
      {message}
    </div>
  );
}

export default function SettingsPage() {
  const { checkSession } = useAuthStore();
  const [profile, setProfile] = useState<Profile | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [profileStatus, setProfileStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(null);

  // Email change
  const [newEmail, setNewEmail] = useState('');
  const [emailSaving, setEmailSaving] = useState(false);
  const [emailStatus, setEmailStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(null);

  // Password change
  const [currentPassword, setCurrentPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [passwordSaving, setPasswordSaving] = useState(false);
  const [passwordStatus, setPasswordStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(null);

  useEffect(() => {
    api.getProfile().then((p) => {
      setProfile(p);
      setNewEmail(p.email || '');
      setLoading(false);
    }).catch(() => setLoading(false));
  }, []);

  const handleSaveProfile = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!profile) return;
    setSaving(true);
    setProfileStatus(null);
    try {
      const updated = await api.updateProfile(profile);
      setProfile(updated);
      setProfileStatus({ type: 'success', message: 'Profile saved' });
      setTimeout(() => setProfileStatus(null), 3000);
    } catch (err: any) {
      setProfileStatus({ type: 'error', message: err.message || 'Failed to save' });
    } finally {
      setSaving(false);
    }
  };

  const handleChangeEmail = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newEmail || newEmail === profile?.email) return;
    setEmailSaving(true);
    setEmailStatus(null);
    try {
      await api.changeEmail(newEmail);
      await checkSession();
      setProfile(prev => prev ? { ...prev, email: newEmail } : prev);
      setEmailStatus({ type: 'success', message: 'Email updated' });
      setTimeout(() => setEmailStatus(null), 3000);
    } catch (err: any) {
      setEmailStatus({ type: 'error', message: err.message || 'Failed to update email' });
    } finally {
      setEmailSaving(false);
    }
  };

  const handleChangePassword = async (e: React.FormEvent) => {
    e.preventDefault();
    setPasswordStatus(null);
    if (newPassword !== confirmPassword) {
      setPasswordStatus({ type: 'error', message: 'Passwords do not match' });
      return;
    }
    if (newPassword.length < 8) {
      setPasswordStatus({ type: 'error', message: 'Password must be at least 8 characters' });
      return;
    }
    setPasswordSaving(true);
    try {
      await api.changePassword(currentPassword, newPassword);
      setCurrentPassword('');
      setNewPassword('');
      setConfirmPassword('');
      setPasswordStatus({ type: 'success', message: 'Password changed' });
      setTimeout(() => setPasswordStatus(null), 3000);
    } catch (err: any) {
      setPasswordStatus({ type: 'error', message: err.message || 'Failed to change password' });
    } finally {
      setPasswordSaving(false);
    }
  };

  if (loading) return <PageLoader />;

  const inputClass = 'w-full px-3.5 py-2.5 border border-slate-300 dark:border-slate-600 rounded-lg text-sm text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';
  const labelClass = 'block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5';

  return (
    <div className="max-w-2xl mx-auto space-y-6 animate-fade-in">
      <div>
        <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">Settings</h1>
        <p className="text-slate-500 dark:text-slate-400 text-sm mt-1">Manage your profile, email, and password</p>
      </div>

      {/* Profile Information */}
      <form onSubmit={handleSaveProfile} className="space-y-6">
        <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 space-y-5">
          <div className="flex items-center gap-3 pb-4 border-b border-slate-100 dark:border-slate-700">
            <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 rounded-lg flex items-center justify-center">
              <User className="w-5 h-5" />
            </div>
            <div>
              <h2 className="font-semibold text-slate-900 dark:text-slate-100">Profile Information</h2>
              <p className="text-xs text-slate-500 dark:text-slate-400">Your public-facing details</p>
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className={labelClass}>Name</label>
              <input
                value={profile?.name || ''}
                onChange={(e) => setProfile({ ...profile!, name: e.target.value })}
                className={inputClass}
              />
            </div>
            <div>
              <label className={labelClass}>Title</label>
              <input
                value={profile?.title || ''}
                onChange={(e) => setProfile({ ...profile!, title: e.target.value })}
                placeholder="e.g., Account Executive"
                className={inputClass}
              />
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className={labelClass}>Company</label>
              <input
                value={profile?.company || ''}
                onChange={(e) => setProfile({ ...profile!, company: e.target.value })}
                className={inputClass}
              />
            </div>
            <div>
              <label className={labelClass}>Phone</label>
              <input
                value={profile?.phone || ''}
                onChange={(e) => setProfile({ ...profile!, phone: e.target.value })}
                className={inputClass}
              />
            </div>
          </div>

          {/* Signature */}
          <div>
            <label className={labelClass}>Email Signature</label>
            <textarea
              value={profile?.emailSignature || ''}
              onChange={(e) => setProfile({ ...profile!, emailSignature: e.target.value })}
              rows={4}
              placeholder="Your email signature (supports plain text)..."
              className={`${inputClass} font-mono`}
            />
          </div>

          <div className="flex items-center gap-3">
            <button
              type="submit"
              disabled={saving}
              className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50 transition-colors"
            >
              {saving ? <LoadingSpinner size="sm" className="text-white" /> : <Save className="w-4 h-4" />}
              Save Profile
            </button>
            {profileStatus && <StatusMessage {...profileStatus} />}
          </div>
        </div>
      </form>

      {/* Change Email */}
      <form onSubmit={handleChangeEmail}>
        <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 space-y-5">
          <div className="flex items-center gap-3 pb-4 border-b border-slate-100 dark:border-slate-700">
            <div className="w-10 h-10 bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300 rounded-lg flex items-center justify-center">
              <Mail className="w-5 h-5" />
            </div>
            <div>
              <h2 className="font-semibold text-slate-900 dark:text-slate-100">Change Email</h2>
              <p className="text-xs text-slate-500 dark:text-slate-400">Update your login email address</p>
            </div>
          </div>

          <div>
            <label className={labelClass}>New Email Address</label>
            <input
              type="email"
              value={newEmail}
              onChange={(e) => setNewEmail(e.target.value)}
              required
              className={inputClass}
              placeholder="your-new-email@example.com"
            />
          </div>

          <div className="flex items-center gap-3">
            <button
              type="submit"
              disabled={emailSaving || newEmail === profile?.email}
              className="flex items-center gap-2 px-5 py-2.5 bg-amber-600 text-white rounded-lg text-sm font-medium hover:bg-amber-700 disabled:opacity-50 transition-colors"
            >
              {emailSaving ? <LoadingSpinner size="sm" className="text-white" /> : <Mail className="w-4 h-4" />}
              Update Email
            </button>
            {emailStatus && <StatusMessage {...emailStatus} />}
          </div>
        </div>
      </form>

      {/* Change Password */}
      <form onSubmit={handleChangePassword}>
        <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 space-y-5">
          <div className="flex items-center gap-3 pb-4 border-b border-slate-100 dark:border-slate-700">
            <div className="w-10 h-10 bg-emerald-100 dark:bg-emerald-900/50 text-emerald-700 dark:text-emerald-300 rounded-lg flex items-center justify-center">
              <Lock className="w-5 h-5" />
            </div>
            <div>
              <h2 className="font-semibold text-slate-900 dark:text-slate-100">Change Password</h2>
              <p className="text-xs text-slate-500 dark:text-slate-400">Update your account password</p>
            </div>
          </div>

          <div>
            <label className={labelClass}>Current Password</label>
            <input
              type="password"
              value={currentPassword}
              onChange={(e) => setCurrentPassword(e.target.value)}
              required
              className={inputClass}
              placeholder="••••••••"
            />
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className={labelClass}>New Password</label>
              <input
                type="password"
                value={newPassword}
                onChange={(e) => setNewPassword(e.target.value)}
                required
                minLength={8}
                className={inputClass}
                placeholder="••••••••"
              />
            </div>
            <div>
              <label className={labelClass}>Confirm New Password</label>
              <input
                type="password"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                required
                minLength={8}
                className={inputClass}
                placeholder="••••••••"
              />
            </div>
          </div>

          <div className="flex items-center gap-3">
            <button
              type="submit"
              disabled={passwordSaving || !currentPassword || !newPassword || !confirmPassword}
              className="flex items-center gap-2 px-5 py-2.5 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 disabled:opacity-50 transition-colors"
            >
              {passwordSaving ? <LoadingSpinner size="sm" className="text-white" /> : <Lock className="w-4 h-4" />}
              Change Password
            </button>
            {passwordStatus && <StatusMessage {...passwordStatus} />}
          </div>
        </div>
      </form>
    </div>
  );
}