import { IconButton } from '@/components/common/IconButton';
import { Card, CardContent, CardHeader, CardTitle } 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 { DocumentFileActions } from '@/features/documents/components/document-file-actions';
import { DocumentPreviewPanel } from '@/features/documents/components/document-preview-panel';
import { DocumentAccountantStatusBadge } from '@/features/documents/components/document-status-badge';
import type { DocumentDetail } from '@/features/documents/types';

type ClientDocumentSidePanelProps = {
    document: DocumentDetail;
    onClose: () => void;
};

export function ClientDocumentSidePanel({ document, onClose }: ClientDocumentSidePanelProps) {
    return (
        <div className="flex min-h-[420px] flex-col gap-4">
            <DocumentPreviewPanel document={document} compact className="min-h-[280px] shrink-0" />

            <Card className="min-h-0 flex-1">
                <CardHeader className="border-b pb-3">
                    <div className="flex items-start justify-between gap-3">
                        <div className="min-w-0">
                            <CardTitle className="truncate text-base">{document.file.original_filename}</CardTitle>
                            <p className="mt-1 text-xs text-muted-foreground">Document #{document.id}</p>
                        </div>
                        <IconButton
                            type="button"
                            variant="text"
                            color="ghost"
                            size="sm"
                            className="shrink-0"
                            onClick={onClose}
                            aria-label="Inchide panoul documentului"
                            icon="solar:close-circle-bold-duotone"
                        />
                    </div>
                    <div className="flex flex-wrap items-center gap-2 pt-2">
                        <DocumentAccountantStatusBadge status={document.accountant_status} />
                        <DocumentFileActions file={document.file} />
                    </div>
                </CardHeader>

                <CardContent className="min-h-0 p-0">
                    <Tabs defaultValue="comments" className="h-full min-h-0 overflow-hidden px-4 pb-4 pt-3">
                        <TabsList variant="line">
                            <TabsTrigger variant="line" value="comments">
                                Comentarii
                            </TabsTrigger>
                            <TabsTrigger variant="line" value="activity">
                                Activitate
                            </TabsTrigger>
                        </TabsList>

                        <TabsContent
                            value="comments"
                            className="mt-3 min-h-0 max-h-[40vh] overflow-auto pr-1 data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-1 data-[state=active]:duration-200"
                        >
                            <DocumentCommentsTab document={document} />
                        </TabsContent>

                        <TabsContent
                            value="activity"
                            className="mt-3 min-h-0 max-h-[40vh] overflow-auto pr-1 data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-1 data-[state=active]:duration-200"
                        >
                            <DocumentActivityTab document={document} />
                        </TabsContent>
                    </Tabs>
                </CardContent>
            </Card>
        </div>
    );
}