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 { DocumentExtractionTab } from '@/features/documents/components/document-extraction-tab';
import { DocumentReviewReasonBanner } from '@/features/documents/components/document-review-reason-banner';
import type { DocumentDetail } from '@/features/documents/types';
import { useAuthorization } from '@/hooks/use-authorization';
import { cn } from '@/lib/utils';

type DocumentDetailTabsProps = {
    document: DocumentDetail;
    className?: string;
};

export function DocumentDetailTabs({ document, className }: DocumentDetailTabsProps) {
    const { can, hasRole } = useAuthorization();
    const canViewDiscussions =
        can('view document discussions') || hasRole('admin') || hasRole('accountant') || hasRole('client');

    return (
        <Tabs
            defaultValue="extracts"
            className={cn('h-full min-h-0 flex-1 gap-0 overflow-hidden', className)}
        >
            <div className="shrink-0 pb-3">
                <TabsList variant="line">
                    <TabsTrigger variant="line" value="extracts">
                        Extrase
                    </TabsTrigger>
                    <TabsTrigger variant="line" value="activity">
                        Activitate
                    </TabsTrigger>
                    {canViewDiscussions ? (
                        <TabsTrigger variant="line" value="discussions">
                            Discutii
                        </TabsTrigger>
                    ) : null}
                </TabsList>
                <div className="mt-3">
                    <DocumentReviewReasonBanner document={document} compact />
                </div>
            </div>

            <TabsContent
                value="extracts"
                className="min-h-0 flex-1 overflow-auto [scrollbar-gutter:stable] data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-1 data-[state=inactive]:animate-out data-[state=inactive]:fade-out-0 data-[state=inactive]:slide-out-to-top-1 data-[state=active]:duration-200"
            >
                <DocumentExtractionTab document={document} />
            </TabsContent>

            <TabsContent
                value="activity"
                className="min-h-0 flex-1 overflow-auto [scrollbar-gutter:stable] data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-1 data-[state=inactive]:animate-out data-[state=inactive]:fade-out-0 data-[state=inactive]:slide-out-to-top-1 data-[state=active]:duration-200"
            >
                <DocumentActivityTab document={document} />
            </TabsContent>

            {canViewDiscussions ? (
                <TabsContent
                    value="discussions"
                    className="min-h-0 flex-1 overflow-auto [scrollbar-gutter:stable] data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-1 data-[state=inactive]:animate-out data-[state=inactive]:fade-out-0 data-[state=inactive]:slide-out-to-top-1 data-[state=active]:duration-200"
                >
                    <DocumentCommentsTab document={document} />
                </TabsContent>
            ) : null}
        </Tabs>
    );
}