// src/pages/DashboardPage/BillingPage/BillingCatalog.tsx
// Invoicing charge-catalog epic, Phase A / Task 2: the "Pricing options" page shell. Phase A ships a single
// sub-tab, "Services & rates" (FeeSchedule.tsx); Task 7 adds the "Fees" sub-tab - named flat charges
// (e.g. a late fee or no-show fee) modeled as Fee ChargeItemDefinitions (FeesCatalog.tsx); Phase C /
// Task 2 adds a third, "Inventory" - priced goods modeled as Inventory ChargeItemDefinitions
// (InventoryCatalog.tsx). The billing-workspace-v2 pass adds a fourth, "Settings" - the org-wide sales-tax
// rate + default payment terms (BillingSettingsTab.tsx), MOVED here from the PM workspace / Overview since
// they are pricing concerns. Each is its own section here, not a new top-level page.
// Visibility of all sub-tabs matches Billing itself (BillingPage.tsx); per-row editing inside each is
// separately gated on canManage('billing'). The four sub-tabs are toggle buttons, pressed = primary fill,
// as the pricing frame draws them.
import { useState } from 'react';
import FeeSchedule from './FeeSchedule';
import FeesCatalog from './FeesCatalog';
import InventoryCatalog from './InventoryCatalog';
import BillingSettingsTab from './BillingSettingsTab';
import './billingPricingChips.css';

const SECTIONS = [
    { value: 'services-rates', label: 'Services & rates', Panel: FeeSchedule },
    { value: 'fees', label: 'Fees', Panel: FeesCatalog },
    { value: 'inventory', label: 'Inventory', Panel: InventoryCatalog },
    { value: 'settings', label: 'Settings', Panel: BillingSettingsTab },
] as const;

const BillingCatalog = () => {
    const [current, setCurrent] = useState<(typeof SECTIONS)[number]['value']>('services-rates');
    const { Panel } = SECTIONS.find((section) => section.value === current) ?? SECTIONS[0];

    return (
        <div className="w-full">
            <div className="billing-pricing-chips" role="group" aria-label="Pricing options">
                {SECTIONS.map((section) => (
                    <button
                        key={section.value}
                        type="button"
                        className="btn btn-blue-ghost-sm"
                        aria-pressed={current === section.value}
                        onClick={() => setCurrent(section.value)}
                    >
                        {section.label}
                    </button>
                ))}
            </div>
            <div className="pt-4">
                <Panel />
            </div>
        </div>
    );
};

export default BillingCatalog;