import { useCallback, useLayoutEffect, useRef, useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { DocumentActivityTab } from '@/features/documents/components/document-activity-tab';
import { DocumentCommentsTab } from '@/features/documents/components/document-comments-tab';
import { DocumentExtractionPanel } from '@/features/documents/components/document-extraction-panel';
import { DocumentPreviewPanel } from '@/features/documents/components/document-preview-panel';
import { ClientMismatchBanner } from '@/features/documents/components/client-mismatch-banner';
import { DocumentDuplicateBanner } from '@/features/documents/components/document-duplicate-banner';
import { DocumentReviewReasonBanner } from '@/features/documents/components/document-review-reason-banner';
import { SplitDocumentBanner } from '@/features/documents/components/split-document-banner';
import type { DocumentDetail } from '@/features/documents/types';
import { useAuthorization } from '@/hooks/use-authorization';
import { useI18n } from '@/hooks/use-i18n';
import { cn } from '@/lib/utils';

export const DOCUMENT_WORKSPACE_MIN_H = 'min-h-[min(44vh,380px)] md:min-h-[min(72vh,800px)]';

type MainTab = 'details' | 'products' | 'activity' | 'discussions';

type DocumentShowWorkspaceProps = {
    document: DocumentDetail;
};

const tabPanelMotion =
    'min-h-0 flex-1 overflow-y-auto overscroll-contain outline-none [scrollbar-gutter:stable] data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-2 data-[state=active]:zoom-in-[0.99] data-[state=inactive]:animate-out data-[state=inactive]:fade-out-0 data-[state=inactive]:slide-out-to-top-1 data-[state=inactive]:zoom-out-[0.99] data-[state=active]:duration-300 data-[state=inactive]:duration-150 motion-reduce:data-[state=active]:animate-none motion-reduce:data-[state=inactive]:animate-none';

export function DocumentShowWorkspace({ document }: DocumentShowWorkspaceProps) {
    const { t } = useI18n();
    const { can, hasRole } = useAuthorization();
    const canViewDiscussions =
        can('view document discussions') || hasRole('admin') || hasRole('accountant') || hasRole('client');

    const [mainTab, setMainTab] = useState<MainTab>('details');

    const listRef = useRef<HTMLDivElement>(null);
    const triggerRefs = useRef<Map<MainTab, HTMLButtonElement>>(new Map());
    const [indicator, setIndicator] = useState({ left: 0, width: 0, ready: false });

    const extractionLayout = mainTab === 'products' ? 'products' : 'details';
    const showExtractionPanel = mainTab === 'details' || mainTab === 'products';

    const setTriggerRef = useCallback((tab: MainTab) => (node: HTMLButtonElement | null) => {
        if (node) {
            triggerRefs.current.set(tab, node);
        } else {
            triggerRefs.current.delete(tab);
        }
    }, []);

    const updateIndicator = useCallback(() => {
        const list = listRef.current;
        const activeEl = triggerRefs.current.get(mainTab);
        if (!list || !activeEl) {
            return;
        }

        const listRect = list.getBoundingClientRect();
        const activeRect = activeEl.getBoundingClientRect();
        let left = 0;
        let node: HTMLElement | null = activeEl;
        while (node && node !== list) {
            left += node.offsetLeft;
            node = node.offsetParent as HTMLElement | null;
        }

        if (node !== list) {
            left = activeRect.left - listRect.left + list.scrollLeft;
        }

        setIndicator({
            left,
            width: activeRect.width,
            ready: true,
        });
    }, [mainTab]);

    useLayoutEffect(() => {
        updateIndicator();
    }, [updateIndicator, canViewDiscussions]);

    useLayoutEffect(() => {
        const list = listRef.current;
        if (!list) {
            return;
        }

        const ro = new ResizeObserver(() => {
            updateIndicator();
        });
        ro.observe(list);
        triggerRefs.current.forEach((el) => ro.observe(el));

        const onWin = () => updateIndicator();
        window.addEventListener('resize', onWin);

        return () => {
            ro.disconnect();
            window.removeEventListener('resize', onWin);
        };
    }, [updateIndicator, canViewDiscussions]);

    const triggerClassName =
        'shrink-0 border-transparent data-[state=active]:border-transparent data-[state=active]:shadow-none';

    return (
        <div
            className={cn(
                'grid grid-cols-1 gap-6 md:grid-cols-12 md:grid-rows-[minmax(0,1fr)]',
                DOCUMENT_WORKSPACE_MIN_H,
            )}
        >
            <div
                className={cn(
                    'flex min-h-0 flex-col md:col-span-4 md:h-full',
                    (mainTab === 'activity' || mainTab === 'discussions') && 'hidden md:flex',
                )}
            >
                <DocumentPreviewPanel
                    document={document}
                    compact
                    className="h-full bg-muted/10"
                />
            </div>

            <Card className="flex min-h-0 flex-col overflow-hidden md:col-span-8 md:h-full">
                <CardContent className="flex min-h-0 flex-1 flex-col gap-0 px-0 pt-2 pb-4">
                    <Tabs
                        value={mainTab}
                        onValueChange={(value) => setMainTab(value as MainTab)}
                        className="flex min-h-0 flex-1 flex-col gap-2"
                    >
                        <div className="px-4 pt-1">
                            <div
                                ref={listRef}
                                className="relative w-full overflow-x-auto border-b border-border/80"
                            >
                                <span
                                    aria-hidden
                                    className={cn(
                                        'pointer-events-none absolute bottom-0 left-0 z-[1] h-0.5 rounded-full bg-primary transition-[left,width] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none',
                                        !indicator.ready && 'opacity-0',
                                    )}
                                    style={{
                                        left: indicator.left,
                                        width: Math.max(indicator.width, 0),
                                    }}
                                />
                                <TabsList
                                    variant="line"
                                    className="relative z-[2] h-auto w-full min-w-0 flex-wrap justify-start gap-1 border-b-0 bg-transparent p-0"
                                >
                                    <TabsTrigger
                                        ref={setTriggerRef('details')}
                                        variant="line"
                                        value="details"
                                        className={triggerClassName}
                                    >
                                        {t('documents.admin_show.workspace.tab_details')}
                                    </TabsTrigger>
                                    <TabsTrigger
                                        ref={setTriggerRef('products')}
                                        variant="line"
                                        value="products"
                                        className={triggerClassName}
                                    >
                                        {t('documents.admin_show.workspace.tab_products')}
                                    </TabsTrigger>
                                    <TabsTrigger
                                        ref={setTriggerRef('activity')}
                                        variant="line"
                                        value="activity"
                                        className={triggerClassName}
                                    >
                                        {t('documents.admin_show.workspace.tab_activity')}
                                    </TabsTrigger>
                                    {canViewDiscussions ? (
                                        <TabsTrigger
                                            ref={setTriggerRef('discussions')}
                                            variant="line"
                                            value="discussions"
                                            className={triggerClassName}
                                        >
                                            {t('documents.admin_show.workspace.tab_discussions')}
                                        </TabsTrigger>
                                    ) : null}
                                </TabsList>
                            </div>
                        </div>

                        <div className="flex flex-col gap-2 px-4">
                            <ClientMismatchBanner document={document} />
                            <DocumentDuplicateBanner document={document} />
                            <DocumentReviewReasonBanner document={document} compact />
                            <SplitDocumentBanner document={document} />
                        </div>

                        <div className="flex min-h-0 flex-1 flex-col px-4 pt-1">
                            <div
                                role="region"
                                aria-label={t('documents.admin_show.workspace.region_extraction')}
                                className={cn(
                                    'min-h-0 flex-1 overflow-y-auto overscroll-contain',
                                    !showExtractionPanel && 'hidden',
                                )}
                            >
                                <DocumentExtractionPanel
                                    key={document.id}
                                    document={document}
                                    layout={extractionLayout}
                                />
                            </div>

                            <TabsContent value="activity" className={tabPanelMotion}>
                                <DocumentActivityTab document={document} />
                            </TabsContent>

                            {canViewDiscussions ? (
                                <TabsContent value="discussions" className={cn(tabPanelMotion, 'flex min-h-0 flex-col')}>
                                    <DocumentCommentsTab document={document} className="min-h-0 flex-1" />
                                </TabsContent>
                            ) : null}
                        </div>
                    </Tabs>
                </CardContent>
            </Card>
        </div>
    );
}