import { useState, useEffect } from 'react';
import PageMeta from '../../components/common/PageMeta';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { fetchAPI } from '../../services/api';
import { Card } from '../../components/ui/card';
import { usePageLoading } from '../../context/PageLoadingContext';

export default function AccountSettings() {
  const toast = useToast();
  const [settings, setSettings] = useState<any[]>([]);
  const { startLoading, stopLoading } = usePageLoading();

  useEffect(() => {
    loadSettings();
  }, []);

  const loadSettings = async () => {
    try {
      startLoading('Loading account settings...');
      const response = await fetchAPI('/v1/system/settings/account/');
      setSettings(response.results || []);
    } catch (error: any) {
      toast.error(`Failed to load account settings: ${error.message}`);
    } finally {
      stopLoading();
    }
  };

  return (
    <>
      <PageMeta title="Account Settings" />
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Account Settings</h1>
        <p className="text-gray-600 dark:text-gray-400 mt-1">Manage your account preferences and profile</p>
      </div>

      <Card className="p-6">
        <p className="text-gray-600 dark:text-gray-400">Account settings management interface coming soon.</p>
      </Card>
    </>
  );
}