import { useState } from 'react';
import Head from 'next/head';
import Layout from '../components/Layout';
import { useAuth } from '../hooks/useAuth';
import { userAPI } from '../services/api';

export default function SettingsPage() {
    const { user } = useAuth();
    const [name, setName] = useState(user?.name || '');
    const [currentPassword, setCurrentPassword] = useState('');
    const [newPassword, setNewPassword] = useState('');
    const [msg, setMsg] = useState({ text: '', type: '' });

    const updateProfile = async () => {
        try {
            await userAPI.updateProfile({ name });
            setMsg({ text: 'Profile updated!', type: 'success' });
        } catch (err: any) {
            setMsg({ text: err.response?.data?.message || 'Error', type: 'error' });
        }
    };

    const changePassword = async () => {
        try {
            await userAPI.changePassword({ currentPassword, newPassword });
            setMsg({ text: 'Password changed!', type: 'success' });
            setCurrentPassword('');
            setNewPassword('');
        } catch (err: any) {
            setMsg({ text: err.response?.data?.message || 'Error', type: 'error' });
        }
    };

    return (
        <>
            <Head><title>Settings – MarketScope</title></Head>
            <Layout>
                <div className="max-w-2xl animate-fade-in">
                    <h1 className="text-2xl font-bold mb-6">Settings</h1>

                    {msg.text && (
                        <div className={`mb-4 p-3 rounded-lg text-sm ${msg.type === 'success' ? 'bg-green-500/10 text-green-400 border border-green-500/20' : 'bg-red-500/10 text-red-400 border border-red-500/20'}`}>
                            {msg.text}
                        </div>
                    )}

                    <div className="card mb-6">
                        <h3 className="font-bold mb-4">Profile</h3>
                        <div className="space-y-4">
                            <div>
                                <label className="block text-sm text-gray-500 mb-1">Email</label>
                                <input type="text" value={user?.email || ''} disabled className="input-field opacity-50" />
                            </div>
                            <div>
                                <label className="block text-sm text-gray-500 mb-1">Name</label>
                                <input type="text" value={name} onChange={(e) => setName(e.target.value)} className="input-field" />
                            </div>
                            <button onClick={updateProfile} className="btn-primary">Save Changes</button>
                        </div>
                    </div>

                    <div className="card">
                        <h3 className="font-bold mb-4">Change Password</h3>
                        <div className="space-y-4">
                            <div>
                                <label className="block text-sm text-gray-500 mb-1">Current Password</label>
                                <input type="password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} className="input-field" />
                            </div>
                            <div>
                                <label className="block text-sm text-gray-500 mb-1">New Password</label>
                                <input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} className="input-field" placeholder="Min 8 characters" />
                            </div>
                            <button onClick={changePassword} className="btn-primary">Change Password</button>
                        </div>
                    </div>
                </div>
            </Layout>
        </>
    );
}
