import React, { useState } from 'react';
import TitleCard from '../components/TitleCard';
import { useUserQuery } from '../services/authApi';
import ProfileEditForm from '../components/Profile/ProfileEditForm';
import PasswordChangeForm from '../components/Profile/PasswordChangeForm';
import { FaUserCircle, FaLock } from 'react-icons/fa';

export default function Profile() {
    const { data: user, isLoading, isError } = useUserQuery();
    const [activeTab, setActiveTab] = useState('profile');

    if (isLoading) return <p className="text-center p-8">กำลังโหลดข้อมูลผู้ใช้...</p>;
    if (isError) return <p className="text-error text-center p-8">ไม่สามารถดึงข้อมูลโปรไฟล์ได้</p>;

    return (
        <TitleCard title="การจัดการโปรไฟล์" topMargin="mt-0">
            <div className="flex space-x-4 mb-6 border-b border-base-200">
                <button
                    className={`btn btn-sm ${activeTab === 'profile' ? 'btn-primary' : 'btn-ghost'}`}
                    onClick={() => setActiveTab('profile')}
                >
                    <FaUserCircle className='w-4 h-4 mr-2'/> แก้ไขข้อมูลส่วนตัว
                </button>
                <button
                    className={`btn btn-sm ${activeTab === 'password' ? 'btn-primary' : 'btn-ghost'}`}
                    onClick={() => setActiveTab('password')}
                >
                    <FaLock className='w-4 h-4 mr-2'/> เปลี่ยนรหัสผ่าน
                </button>
            </div>

            {activeTab === 'profile' && <ProfileEditForm user={user} />}
            {activeTab === 'password' && <PasswordChangeForm />}

        </TitleCard>
    );
}