import AppPageHeader from "@/components/AppPageHeader";
import React, {useState} from "react";
import MainLayout from "@/layouts/MainLayout";
import ClientProfile from "@/Pages/ClientProfile/Index";
import Conflicts from "@/Pages/ConflictChecks/Index";
import Matters from "@/Pages/Matters/Index";
import Communication from "@/Pages/Communications/Index";

export default function Index(): JSX.Element {
    // This page delegates listing/search/pagination to `ClientProfile`.

    const tabs = [
        { key: 'profile', label: 'Clients' },
        { key: 'matters', label: 'Matters' },
        { key: 'conflicts', label: 'Conflicts' },
        { key: 'communications', label: 'Communication History' },
    ];

    const [activeTab, setActiveTab] = useState<string>('profile');

    const renderActive = () => {
        if (activeTab === 'profile') return <ClientProfile />;
        if (activeTab === 'conflicts') return <Conflicts />;
        if (activeTab === 'matters') return <Matters />;
        if (activeTab === 'communications') return <Communication />;
        return null;
    };

    return (
        <MainLayout>
            <AppPageHeader title="Clients" subtitle="Listing" />

            <div className="bg-white rounded-lg shadow mb-6">
                <div className="px-4">
                    <nav className="flex space-x-4 overflow-x-auto" aria-label="Client tabs">
                        {tabs.map(tab => (
                            <button
                                key={tab.key}
                                onClick={() => setActiveTab(tab.key)}
                                className={`py-4 px-4  border-b-2 ${activeTab === tab.key ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-gray-600 hover:text-gray-800'}`}
                            >
                                {tab.label}
                            </button>
                        ))}
                    </nav>
                </div>
            </div>

            {renderActive()}
        </MainLayout>
    );
}