"use client"

import * as React from "react"
import { useState, useEffect, useRef } from "react"
import { toast } from "sonner"
import {
    Send,
    Paperclip,
    DownloadCloud,
    File,
    FileText,
    Image as ImageIcon,
    AlertCircle,
    X,
    User,
    Building
} from "lucide-react"
import {
    Drawer,
    DrawerClose,
    DrawerContent,
    DrawerDescription,
    DrawerFooter,
    DrawerHeader,
    DrawerTitle,
} from "@/components/ui/drawer"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog"
import { formatDateTime, formatFileSize } from "@/lib/utils"
import { useSession } from "next-auth/react"

// 타입 정의
export interface TechSalesAttachment {
    id: number
    fileName: string
    originalFileName: string
    fileSize: number
    fileType: string | null
    filePath: string
    uploadedAt: Date
}

export interface TechSalesComment {
    id: number
    rfqId: number
    vendorId: number | null
    userId?: number | null
    content: string
    isVendorComment: boolean | null
    createdAt: Date
    updatedAt: Date
    userName?: string | null
    vendorName?: string | null
    attachments: TechSalesAttachment[]
    isRead: boolean | null
}

// 프롭스 정의
interface BuyerCommunicationDrawerProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    quotation: {
        id: number;
        rfqId: number;
        vendorId: number;
        quotationCode: string | null;
        rfq?: {
            rfqCode: string | null;
        };
    } | null;
    onSuccess?: () => void;
}

// 클라이언트에서 API를 통해 코멘트를 가져오는 함수
export async function fetchTechSalesVendorCommentsClient(rfqId: number, vendorId: number): Promise<TechSalesComment[]> {
    const response = await fetch(`/api/tech-sales-rfqs/${rfqId}/vendors/${vendorId}/comments`);
    
    if (!response.ok) {
        throw new Error(`API 요청 실패: ${response.status}`);
    }
    
    const result = await response.json();
    
    if (!result.success) {
        throw new Error(result.message || '코멘트 조회 중 오류가 발생했습니다');
    }
    
    // API 응답 타입 정의
    interface ApiComment {
        id: number;
        rfqId: number;
        vendorId: number | null;
        userId?: number | null;
        content: string;
        isVendorComment: boolean | null;
        createdAt: string;
        updatedAt: string;
        userName?: string | null;
        vendorName?: string | null;
        isRead: boolean | null;
        attachments: Array<{
            id: number;
            fileName: string;
            originalFileName: string;
            fileSize: number;
            fileType: string | null;
            filePath: string;
            uploadedAt: string;
        }>;
    }
    
    return result.data.map((comment: ApiComment) => ({
        ...comment,
        createdAt: new Date(comment.createdAt),
        updatedAt: new Date(comment.updatedAt),
        attachments: comment.attachments.map((att) => ({
            ...att,
            uploadedAt: new Date(att.uploadedAt)
        }))
    }));
}

// 벤더 코멘트 전송 함수
export function sendVendorCommentClient(params: {
    rfqId: number;
    vendorId: number;
    content: string;
    attachments?: File[];
}): Promise<TechSalesComment> {
    // 폼 데이터 생성 (파일 첨부를 위해)
    const formData = new FormData();
    formData.append('rfqId', params.rfqId.toString());
    formData.append('vendorId', params.vendorId.toString());
    formData.append('content', params.content);
    formData.append('isVendorComment', 'true'); // 벤더가 보내는 메시지이므로 true

    // 첨부파일 추가
    if (params.attachments && params.attachments.length > 0) {
        params.attachments.forEach((file) => {
            formData.append(`attachments`, file);
        });
    }

    // API 엔드포인트 구성 (techsales API 경로)
    const url = `/api/tech-sales-rfqs/${params.rfqId}/vendors/${params.vendorId}/comments`;

    console.log("API 요청 시작:", { url, params });

    // API 호출
    return fetch(url, {
        method: 'POST',
        body: formData, // multipart/form-data 형식 사용
    })
        .then(response => {
            console.log("API 응답 상태:", response.status);
            
            if (!response.ok) {
                return response.text().then(text => {
                    console.error("API 에러 응답:", text);
                    throw new Error(`API 요청 실패: ${response.status} ${text}`);
                });
            }
            return response.json();
        })
        .then(result => {
            console.log("API 응답 데이터:", result);
            
            if (!result.success || !result.data) {
                throw new Error(result.message || '코멘트 전송 중 오류가 발생했습니다');
            }
            
            // API 응답 타입 정의
            interface ApiAttachment {
                id: number;
                fileName: string;
                originalFileName: string;
                fileSize: number;
                fileType: string | null;
                filePath: string;
                uploadedAt: string;
            }
            
            interface ApiCommentResponse {
                id: number;
                rfqId: number;
                vendorId: number | null;
                userId?: number | null;
                content: string;
                isVendorComment: boolean | null;
                createdAt: string;
                updatedAt: string;
                userName?: string | null;
                isRead: boolean | null;
                attachments: ApiAttachment[];
            }
            
            const commentData = result.data.comment as ApiCommentResponse;
            
            return {
                ...commentData,
                createdAt: new Date(commentData.createdAt),
                updatedAt: new Date(commentData.updatedAt),
                attachments: commentData.attachments.map((att) => ({
                    ...att,
                    uploadedAt: new Date(att.uploadedAt)
                }))
            };
        })
        .catch(error => {
            console.error("클라이언트 API 호출 에러:", error);
            throw error;
        });
}

export function BuyerCommunicationDrawer({
    open,
    onOpenChange,
    quotation,
    onSuccess
}: BuyerCommunicationDrawerProps) {
    // 세션 정보
    const { data: session } = useSession();

    // 상태 관리
    const [comments, setComments] = useState<TechSalesComment[]>([]);
    const [newComment, setNewComment] = useState("");
    const [attachments, setAttachments] = useState<File[]>([]);
    const [isLoading, setIsLoading] = useState(false);
    const [isSubmitting, setIsSubmitting] = useState(false);
    const fileInputRef = useRef<HTMLInputElement>(null);
    const messagesEndRef = useRef<HTMLDivElement>(null);

    // 자동 새로고침 관련 상태
    const [autoRefresh, setAutoRefresh] = useState(true);
    const [lastMessageCount, setLastMessageCount] = useState(0);
    const intervalRef = useRef<NodeJS.Timeout | null>(null);

    // 첨부파일 관련 상태
    const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
    const [selectedAttachment, setSelectedAttachment] = useState<TechSalesAttachment | null>(null);

    // 드로어가 열릴 때 데이터 로드
    useEffect(() => {
        if (open && quotation) {
            loadComments();
            // 자동 새로고침 시작
            if (autoRefresh) {
                startAutoRefresh();
            }
        } else {
            // 드로어가 닫히면 자동 새로고침 중지
            stopAutoRefresh();
        }

        // 컴포넌트 언마운트 시 정리
        return () => {
            stopAutoRefresh();
        };
    }, [open, quotation, autoRefresh]);

    // 스크롤 최하단으로 이동
    useEffect(() => {
        if (messagesEndRef.current) {
            messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
        }
    }, [comments]);

    // 자동 새로고침 시작
    const startAutoRefresh = () => {
        stopAutoRefresh(); // 기존 interval 정리
        intervalRef.current = setInterval(() => {
            if (open && quotation && !isSubmitting) {
                loadComments(true); // 자동 새로고침임을 표시
            }
        }, 60000); // 60초마다 새로고침
    };

    // 자동 새로고침 중지
    const stopAutoRefresh = () => {
        if (intervalRef.current) {
            clearInterval(intervalRef.current);
            intervalRef.current = null;
        }
    };

    // 자동 새로고침 토글
    const toggleAutoRefresh = () => {
        setAutoRefresh(prev => {
            const newValue = !prev;
            if (newValue && open) {
                startAutoRefresh();
            } else {
                stopAutoRefresh();
            }
            return newValue;
        });
    };

    // 코멘트 로드 함수 (자동 새로고침 여부 파라미터 추가)
    const loadComments = async (isAutoRefresh = false) => {
        if (!quotation) return;

        try {
            // 자동 새로고침일 때는 로딩 표시하지 않음
            if (!isAutoRefresh) {
                setIsLoading(true);
            }

            // API를 사용하여 코멘트 데이터 가져오기
            const commentsData = await fetchTechSalesVendorCommentsClient(quotation.rfqId, quotation.vendorId);
            
            // 새 메시지가 있는지 확인 (자동 새로고침일 때만)
            if (isAutoRefresh) {
                const newMessageCount = commentsData.length;
                if (newMessageCount > lastMessageCount && lastMessageCount > 0) {
                    // 새 메시지 알림
                    toast.success(`새 메시지 ${newMessageCount - lastMessageCount}개가 도착했습니다`);
                }
                setLastMessageCount(newMessageCount);
            } else {
                setLastMessageCount(commentsData.length);
            }
            
            setComments(commentsData);

            // 읽음 상태 처리는 API 측에서 처리되는 것으로 가정
        } catch (error) {
            console.error("코멘트 로드 오류:", error);
            if (!isAutoRefresh) { // 자동 새로고침일 때는 에러 토스트 표시하지 않음
                toast.error("메시지를 불러오는 중 오류가 발생했습니다");
            }
        } finally {
            // 항상 로딩 상태를 해제하되, 최소 200ms는 유지하여 깜빡거림 방지
            if (!isAutoRefresh) {
                setTimeout(() => {
                    setIsLoading(false);
                }, 200);
            }
        }
    };

    // 파일 선택 핸들러
    const handleFileSelect = () => {
        fileInputRef.current?.click();
    };

    // 파일 변경 핸들러
    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files.length > 0) {
            const newFiles = Array.from(e.target.files);
            setAttachments(prev => [...prev, ...newFiles]);
        }
    };

    // 파일 제거 핸들러
    const handleRemoveFile = (index: number) => {
        setAttachments(prev => prev.filter((_, i) => i !== index));
    };

    // 코멘트 전송 핸들러
    const handleSubmitComment = async () => {
        if (!newComment.trim() && attachments.length === 0) return;
        if (!quotation) return;

        try {
            setIsSubmitting(true);

            // API를 사용하여 새 코멘트 전송 (파일 업로드 때문에 FormData 사용)
            const newCommentObj = await sendVendorCommentClient({
                rfqId: quotation.rfqId,
                vendorId: quotation.vendorId,
                content: newComment,
                attachments: attachments
            });

            // 상태 업데이트
            setComments(prev => [...prev, newCommentObj]);
            setNewComment("");
            setAttachments([]);

            toast.success("메시지가 전송되었습니다");

            // 데이터 새로고침
            if (onSuccess) {
                onSuccess();
            }
        } catch (error) {
            console.error("코멘트 전송 오류:", error);
            toast.error("메시지 전송 중 오류가 발생했습니다");
        } finally {
            setIsSubmitting(false);
        }
    };

    // 첨부파일 미리보기
    const handleAttachmentPreview = (attachment: TechSalesAttachment) => {
        setSelectedAttachment(attachment);
        setPreviewDialogOpen(true);
    };

    // 첨부파일 다운로드 핸들러
    const handleDownloadClick = React.useCallback(async (attachment: TechSalesAttachment) => {
        try {
            const { downloadFile } = await import('@/lib/file-download');
            await downloadFile(attachment.filePath, attachment.originalFileName || attachment.fileName, {
                showToast: true,
                onError: (error) => {
                    console.error('다운로드 오류:', error);
                    toast.error(error);
                },
                onSuccess: (fileName, fileSize) => {
                    console.log(`다운로드 성공: ${fileName} (${fileSize} bytes)`);
                }
            });
        } catch (error) {
            console.error('다운로드 오류:', error);
            toast.error('파일 다운로드 중 오류가 발생했습니다.');
        }
    }, []);

    // 파일 아이콘 선택
    const getFileIcon = (fileType: string | null) => {
        if (!fileType) return <File className="h-5 w-5 text-gray-500" />;
        if (fileType.startsWith("image/")) return <ImageIcon className="h-5 w-5 text-blue-500" />;
        if (fileType.includes("pdf")) return <FileText className="h-5 w-5 text-red-500" />;
        if (fileType.includes("spreadsheet") || fileType.includes("excel"))
            return <FileText className="h-5 w-5 text-green-500" />;
        if (fileType.includes("document") || fileType.includes("word"))
            return <FileText className="h-5 w-5 text-blue-500" />;
        return <File className="h-5 w-5 text-gray-500" />;
    };

    // 첨부파일 미리보기 다이얼로그
    const renderAttachmentPreviewDialog = () => {
        if (!selectedAttachment) return null;

        const isImage = selectedAttachment.fileType?.startsWith("image/") || false;
        const isPdf = selectedAttachment.fileType?.includes("pdf") || false;

        return (
            <Dialog open={previewDialogOpen} onOpenChange={setPreviewDialogOpen}>
                <DialogContent className="max-w-3xl">
                    <DialogHeader>
                        <DialogTitle className="flex items-center gap-2">
                            {getFileIcon(selectedAttachment.fileType)}
                            {selectedAttachment.originalFileName || selectedAttachment.fileName}
                        </DialogTitle>
                        <DialogDescription>
                            {formatFileSize(selectedAttachment.fileSize)} • {formatDateTime(selectedAttachment.uploadedAt)}
                        </DialogDescription>
                    </DialogHeader>

                    <div className="min-h-[300px] flex items-center justify-center p-4">
                        {isImage ? (
                            // eslint-disable-next-line @next/next/no-img-element
                            <img
                                src={selectedAttachment.filePath}
                                alt={selectedAttachment.originalFileName || selectedAttachment.fileName}
                                className="max-h-[500px] max-w-full object-contain"
                            />
                        ) : isPdf ? (
                            <iframe
                                src={`${selectedAttachment.filePath}#toolbar=0`}
                                className="w-full h-[500px]"
                                title={selectedAttachment.originalFileName || selectedAttachment.fileName}
                            />
                        ) : (
                            <div className="flex flex-col items-center gap-4 p-8">
                                {getFileIcon(selectedAttachment.fileType)}
                                <p className="text-muted-foreground text-sm">미리보기를 지원하지 않는 파일 형식입니다.</p>
                                <Button
                                    variant="outline"
                                    onClick={() => handleDownloadClick(selectedAttachment)}
                                >
                                    <DownloadCloud className="h-4 w-4 mr-2" />
                                    다운로드
                                </Button>
                            </div>
                        )}
                    </div>
                </DialogContent>
            </Dialog>
        );
    };

    if (!quotation) {
        return null;
    }

    // 구매자 정보 (실제로는 API에서 가져와야 함)
    const buyerName = "구매 담당자";

    return (
        <Drawer open={open} onOpenChange={onOpenChange}>
            <DrawerContent className="max-h-[80vh] flex flex-col">
                <DrawerHeader className="border-b flex-shrink-0">
                    <DrawerTitle className="flex items-center gap-2">
                        <Avatar className="h-8 w-8">
                            <AvatarFallback className="bg-primary/10">
                                <User className="h-4 w-4" />
                            </AvatarFallback>
                        </Avatar>
                        <div>
                            <span>{buyerName}</span>
                            <Badge variant="outline" className="ml-2">구매자</Badge>
                        </div>
                    </DrawerTitle>
                    <DrawerDescription>
                        RFQ: {quotation.rfq?.rfqCode || "N/A"} • 견적서: {quotation.quotationCode}
                    </DrawerDescription>
                </DrawerHeader>

                <div className="flex flex-col flex-1 min-h-0">
                    {/* 메시지 목록 */}
                    <div className="flex-1 p-4 overflow-y-auto min-h-[300px]">
                        {isLoading && comments.length === 0 ? (
                            <div className="flex h-full items-center justify-center">
                                <p className="text-muted-foreground">메시지 로딩 중...</p>
                            </div>
                        ) : comments.length === 0 ? (
                            <div className="flex h-full items-center justify-center">
                                <div className="flex flex-col items-center gap-2">
                                    <AlertCircle className="h-6 w-6 text-muted-foreground" />
                                    <p className="text-muted-foreground">아직 메시지가 없습니다</p>
                                </div>
                            </div>
                        ) : (
                            <div className="space-y-4 relative">
                                {isLoading && (
                                    <div className="absolute top-0 right-0 z-10 bg-background/80 backdrop-blur-sm rounded-md px-2 py-1">
                                        <div className="flex items-center gap-2">
                                            <div className="w-2 h-2 bg-primary rounded-full animate-pulse" />
                                            <span className="text-xs text-muted-foreground">새로고침 중...</span>
                                        </div>
                                    </div>
                                )}
                                {comments.map(comment => (
                                    <div
                                        key={comment.id}
                                        className={`flex gap-3 ${comment.isVendorComment ? 'justify-end' : 'justify-start'}`}
                                    >
                                        {!comment.isVendorComment && (
                                            <Avatar className="h-8 w-8 mt-1">
                                                <AvatarFallback className="bg-primary/10">
                                                    <User className="h-4 w-4" />
                                                </AvatarFallback>
                                            </Avatar>
                                        )}

                                        <div className={`rounded-lg p-3 max-w-[80%] ${comment.isVendorComment
                                                ? 'bg-primary text-primary-foreground'
                                                : 'bg-muted'
                                            }`}>
                                            <div className="text-sm font-medium mb-1">
                                                {comment.isVendorComment ? (
                                                    session?.user?.name || "벤더"
                                                ) : (
                                                    comment.userName || buyerName
                                                )}
                                            </div>

                                            {comment.content && (
                                                <div className="text-sm whitespace-pre-wrap break-words">
                                                    {comment.content}
                                                </div>
                                            )}

                                            {/* 첨부파일 표시 */}
                                            {comment.attachments.length > 0 && (
                                                <div className={`mt-2 pt-2 ${comment.isVendorComment
                                                        ? 'border-t border-t-primary-foreground/20'
                                                        : 'border-t border-t-border/30'
                                                    }`}>
                                                    {comment.attachments.map(attachment => (
                                                        <div
                                                            key={attachment.id}
                                                            className="flex items-center text-xs gap-2 mb-1 p-1 rounded hover:bg-black/5 cursor-pointer"
                                                            onClick={() => handleAttachmentPreview(attachment)}
                                                        >
                                                            {getFileIcon(attachment.fileType)}
                                                            <span className="flex-1 truncate">{attachment.originalFileName || attachment.fileName}</span>
                                                            <span className="text-xs opacity-70">
                                                                {formatFileSize(attachment.fileSize)}
                                                            </span>
                                                            <Button
                                                                variant="ghost"
                                                                size="icon"
                                                                className="h-6 w-6 rounded-full"
                                                                onClick={(e) => {
                                                                    e.stopPropagation();
                                                                    handleDownloadClick(attachment);
                                                                }}
                                                            >
                                                                <DownloadCloud className="h-3 w-3" />
                                                            </Button>
                                                        </div>
                                                    ))}
                                                </div>
                                            )}

                                            <div className="text-xs mt-1 opacity-70 flex items-center gap-1 justify-end">
                                                {formatDateTime(comment.createdAt)}
                                            </div>
                                        </div>

                                        {comment.isVendorComment && (
                                            <Avatar className="h-8 w-8 mt-1">
                                                <AvatarFallback className="bg-primary/20">
                                                    <Building className="h-4 w-4" />
                                                </AvatarFallback>
                                            </Avatar>
                                        )}
                                    </div>
                                ))}
                                <div ref={messagesEndRef} />
                            </div>
                        )}
                    </div>

                    {/* 선택된 첨부파일 표시 */}
                    {attachments.length > 0 && (
                        <div className="p-2 bg-muted mx-4 rounded-md mb-2 flex-shrink-0">
                            <div className="text-xs font-medium mb-1">첨부파일</div>
                            <div className="flex flex-wrap gap-2">
                                {attachments.map((file, index) => (
                                    <div key={index} className="flex items-center bg-background rounded-md p-1 pr-2 text-xs">
                                        {file.type.startsWith("image/") ? (
                                            <ImageIcon className="h-4 w-4 mr-1 text-blue-500" />
                                        ) : (
                                            <File className="h-4 w-4 mr-1 text-gray-500" />
                                        )}
                                        <span className="truncate max-w-[100px]">{file.name}</span>
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            className="h-4 w-4 ml-1 p-0"
                                            onClick={() => handleRemoveFile(index)}
                                        >
                                            <X className="h-3 w-3" />
                                        </Button>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}

                    {/* 메시지 입력 영역 */}
                    <div className="p-4 border-t flex-shrink-0">
                        <div className="flex gap-2 items-end">
                            <div className="flex-1">
                                <Textarea
                                    placeholder="메시지를 입력하세요..."
                                    className="min-h-[80px] resize-none"
                                    value={newComment}
                                    onChange={(e) => setNewComment(e.target.value)}
                                />
                            </div>
                            <div className="flex flex-col gap-2">
                                <input
                                    type="file"
                                    ref={fileInputRef}
                                    className="hidden"
                                    multiple
                                    onChange={handleFileChange}
                                />
                                <Button
                                    variant="outline"
                                    size="icon"
                                    onClick={handleFileSelect}
                                    title="파일 첨부"
                                >
                                    <Paperclip className="h-4 w-4" />
                                </Button>
                                <Button
                                    onClick={handleSubmitComment}
                                    disabled={(!newComment.trim() && attachments.length === 0) || isSubmitting}
                                >
                                    <Send className="h-4 w-4" />
                                </Button>
                            </div>
                        </div>
                    </div>
                </div>

                <DrawerFooter className="border-t flex-shrink-0">
                    <div className="flex justify-between items-center">
                        <div className="flex items-center gap-2">
                            <Button variant="outline" onClick={() => loadComments()}>
                                새로고침
                            </Button>
                            <Button
                                variant={autoRefresh ? "default" : "outline"}
                                size="sm"
                                onClick={toggleAutoRefresh}
                                className="gap-2"
                            >
                                {autoRefresh ? (
                                    <>
                                        <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
                                        자동 새로고침 ON
                                    </>
                                ) : (
                                    <>
                                        <div className="w-2 h-2 bg-gray-400 rounded-full" />
                                        자동 새로고침 OFF
                                    </>
                                )}
                            </Button>
                        </div>
                        <DrawerClose asChild>
                            <Button variant="outline">닫기</Button>
                        </DrawerClose>
                    </div>
                </DrawerFooter>
            </DrawerContent>

            {renderAttachmentPreviewDialog()}
        </Drawer>
    );
}