// 'use no memo' — see src/components/reference/reference.tsx for rationale.
// Page.Nav + Page.Body tab pattern depends on parent re-render on URL change.
'use no memo';

import React, { useMemo } from 'react';
import {
    ErrorMessage,
    GridTable,
    LoadingPageIndicator,
    Section,
} from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { PageHeader } from 'src/components/shared/pageHeader';
import { useStatementPeriods } from 'src/apollo/queries/statement-periods';
import { Link } from 'react-router-dom';
import { GetStatementPeriodsQuery } from 'src/apollo/queries/statement-periods/__generated__/statement-periods';
import PayeeManagement from '../payee-management/payee-management';
import './collaborators.scss';
import PaymentManagement from '../payment-management/payment-management';

type CollaboratorPeriod = NonNullable<
    GetStatementPeriodsQuery['abacusStatementPeriods']
>['recentPeriods'][0];

const OCT_2025_ABACUS_STATEMENT_PERIOD_ID = 322;
const CLASS_NAME = 'CollaboratorPayments';

const TAB_PERIODS = 'periods';
const TAB_PAYEES = 'payees';
const TAB_DIRECT_PAYMENTS = 'dpPayments';

const CollaboratorPayments: React.FC = () => {
    const {
        data: periodData,
        error: periodError,
        loading: periodLoading,
    } = useStatementPeriods();

    const statementPeriods = useMemo(() => {
        if (!periodData) return periodData;
        return periodData?.abacusStatementPeriods?.recentPeriods.filter(
            period =>
                +period.statementPeriodId >= OCT_2025_ABACUS_STATEMENT_PERIOD_ID
        );
    }, [periodData]);

    if (periodLoading) {
        return <LoadingPageIndicator />;
    } else if (periodError || !periodData) {
        return <ErrorMessage error={periodError} />;
    }

    const getPeriodTemplate = (recentPeriod: CollaboratorPeriod) => {
        const periodName = recentPeriod.statementPeriodName;
        const periodId = recentPeriod.statementPeriodId;
        return (
            <Link to={`/collaborator-payments/${periodId}`}>{periodName}</Link>
        );
    };

    const renderStatementPeriodsPage = () => (
        <Section>
            <Section.Body>
                <Section.Table testId="collaboratorsPeriodsTable">
                    <GridTable
                        variant="zebra"
                        data={statementPeriods}
                        columnDefs={[
                            {
                                name: 'status',
                                title: 'Status',
                            },
                            {
                                name: 'statementPeriodName',
                                title: 'Statement Period',
                                Cell: statementPeriod =>
                                    getPeriodTemplate(statementPeriod.data),
                            },
                            {
                                name: 'statementPeriodId',
                                title: 'Period ID',
                            },
                            {
                                name: 'closedDate',
                                title: 'Statement Period Closed',
                            },
                        ]}
                    />
                </Section.Table>
            </Section.Body>
        </Section>
    );

    return (
        <div className={CLASS_NAME}>
            <PageHeader title="Collaborator Payments" />
            <Page.Nav
                className={`${CLASS_NAME}-tabs`}
                items={[
                    { key: TAB_PERIODS, label: 'Statement Periods' },
                    { key: TAB_PAYEES, label: 'Payee Management' },
                    { key: TAB_DIRECT_PAYMENTS, label: 'Payments Management' },
                ]}
            />
            <Page.Body
                views={{
                    [TAB_PERIODS]: renderStatementPeriodsPage,
                    [TAB_PAYEES]: () => <PayeeManagement />,
                    [TAB_DIRECT_PAYMENTS]: () => <PaymentManagement />,
                }}
            />
        </div>
    );
};

export default CollaboratorPayments;