import React, { useState, useEffect } from 'react';
import {
    TabPanel,
    Card,
    CardBody,
    Button,
    Notice,
    Spinner,
    ExternalLink,
    TextControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useSettings } from '../../contexts/SettingsContext';
import VersionManagementTab from './tabs/VersionManagementTab';
import DocumentationTab from './tabs/DocumentationTab';
import FeedbackTab from './tabs/FeedbackTab';
import AdvancedSettingsTab from './tabs/AdvancedSettingsTab';
import './support.css';

// Create a QueryClient instance for React Query
const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            staleTime: 5 * 60 * 1000, // 5 minutes
            gcTime: 10 * 60 * 1000, // 10 minutes (formerly cacheTime)
            retry: 1,
            refetchOnWindowFocus: false,
        },
    },
});

const SupportPage = () => {
    const { settings, updateSettings } = useSettings();
    const [activeTab, setActiveTab] = useState('documentation');
    const [notices, setNotices] = useState([]);

    const tabs = [
        {
            name: 'version',
            title: __('Updates & Backup', 'prorank-seo'),
            component: VersionManagementTab,
        },
        {
            name: 'documentation',
            title: __('Documentation', 'prorank-seo'),
            component: DocumentationTab,
        },
        {
            name: 'feedback',
            title: __('Feedback', 'prorank-seo'),
            component: FeedbackTab,
        },
        {
            name: 'advanced',
            title: __('Advanced Settings', 'prorank-seo'),
            component: AdvancedSettingsTab,
        },
    ];

    const addNotice = (status, message) => {
        const id = Date.now();
        setNotices([...notices, { id, status, message }]);
        
        // Auto-dismiss after 5 seconds
        setTimeout(() => {
            setNotices(prev => prev.filter(n => n.id !== id));
        }, 5000);
    };

    const removeNotice = (id) => {
        setNotices(notices.filter(n => n.id !== id));
    };

    return (
        <QueryClientProvider client={queryClient}>
            <div className="prorank-support-page">
                <div className="prorank-page-header">
                    <h1>{__('Support & Resources', 'prorank-seo')}</h1>
                    <p className="prorank-page-subtitle">
                        {__('Access update guidance, backup tools, documentation, and plugin diagnostics for ProRank SEO', 'prorank-seo')}
                    </p>
                </div>

                {notices.map((notice) => (
                    <Notice
                        key={notice.id}
                        status={notice.status}
                        isDismissible={true}
                        onRemove={() => removeNotice(notice.id)}
                    >
                        {notice.message}
                    </Notice>
                ))}

                <TabPanel
                    className="prorank-support-tabs"
                    activeClass="is-active"
                    onSelect={(tabName) => setActiveTab(tabName)}
                    tabs={tabs}
                >
                    {(tab) => {
                        const TabComponent = tab.component;
                        return <TabComponent addNotice={addNotice} />;
                    }}
                </TabPanel>
            </div>
        </QueryClientProvider>
    );
};

export default SupportPage;