'use client';
import type { ChangeEvent } from 'react';
import { useParams } from 'next/navigation';
import { Alert } from '@/components/Alert';
import { CheckBox } from '@/components/CheckBox';
import { LoadingOverlay } from '@/components/LoadingOverlay';
import { useBeforeUnloadEvent } from '@/hooks/useBeforeUnloadEvent';
import { useScrollTop } from '@/hooks/useScrollTop';
import { useScopedI18n } from '@/i18n/client';
import { DeletedProfileView } from './DeletedProfileView';
import { SubscriptionsList } from './SubscriptionsList';
import { useDeleteProfileHander } from './useDeleteProfileHander';
import { useSubscriptionsHandlers } from './useSubscriptionsHandlers';
import type { SubscriptionsListProps } from './SubscriptionsList';

export type SubscriptionsScreenProps = {
    items: SubscriptionsListProps['items'];
};

export function SubscriptionsScreen(props: SubscriptionsScreenProps) {
    const t = useScopedI18n('pages.profile.subscriptionsTab');
    const params = useParams<{ token: string }>();

    const {
        subscriptions,
        subscriptionsTouched,
        futureCorrespondenceChecked,
        updateSubscriptionsState,
        setFutureCorrespondenceChecked,
        handleSubscriptionChange,
        handleUnsubscribeFromAll,
        handleSubscriptionsSave,
    } = useSubscriptionsHandlers(params.token, props.items);

    const handleCheckbox = (ev: ChangeEvent<HTMLInputElement>) => {
        handleSubscriptionChange(ev.target.name, ev.target.checked);
    };

    const {
        deleteAllChecked,
        setDeleteAllChecked,
        deleteProfileState,
        handleDeleteProfileAction,
    } = useDeleteProfileHander(params.token);

    useBeforeUnloadEvent(subscriptionsTouched);

    const isLoading =
        updateSubscriptionsState.loading || deleteProfileState.pending;
    const isSuccess = updateSubscriptionsState.updated;
    const isError =
        updateSubscriptionsState.error ||
        Boolean(deleteProfileState.error) ||
        Boolean(deleteProfileState.result?.error);

    useScrollTop(isSuccess || isError);

    if (deleteProfileState.result?.data === true) {
        return <DeletedProfileView />;
    }

    return (
        <div className="flex flex-col gap-5 p-5">
            {isLoading && (
                <LoadingOverlay altText={t('loadingOverlay.altText')} />
            )}

            {isSuccess && <Alert text={t('subscriptionsUpdatedMessage')} />}

            {isError && <Alert text={t('errorMessage')} isError />}

            <div className="content-card">
                <h4 className="text-gray-900">
                    {t('subscriptionsSection.title')}
                </h4>
                <SubscriptionsList
                    items={subscriptions}
                    onChange={handleCheckbox}
                />
                <button
                    data-testid="save-subscriptions-button"
                    disabled={!subscriptionsTouched}
                    onClick={handleSubscriptionsSave}
                >
                    {t('subscriptionsSection.saveButton')}
                </button>
            </div>

            <div className="content-card">
                <CheckBox
                    id="futureCorrespondence"
                    checked={futureCorrespondenceChecked}
                    onChange={ev =>
                        setFutureCorrespondenceChecked(ev.target.checked)
                    }
                >
                    {t('futureCorrespondenceSection.label')}
                </CheckBox>
                <button
                    data-testid="unsubscribe-all-button"
                    disabled={futureCorrespondenceChecked === false}
                    onClick={handleUnsubscribeFromAll}
                >
                    {t('futureCorrespondenceSection.saveButton')}
                </button>
            </div>

            <div className="content-card">
                <CheckBox
                    id="deleteAll"
                    checked={deleteAllChecked}
                    onChange={ev => setDeleteAllChecked(ev.target.checked)}
                >
                    {t('deleteAllSection.label')}
                </CheckBox>
                <button
                    data-testid="delete-profile-button"
                    disabled={deleteAllChecked === false}
                    onClick={handleDeleteProfileAction}
                >
                    {t('deleteAllSection.saveButton')}
                </button>
            </div>
        </div>
    );
}