"use client"

import * as React from "react"
import { useState, useEffect, useCallback } from "react"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog"
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"
import { 
    CalendarIcon, 
    FileTextIcon,
    PackageIcon,
    HashIcon,
    DollarSignIcon,
} from "lucide-react"
import { BiddingListItem } from "@/db/schema"
import { formatFileSize } from "@/lib/file-download"
import { getPRDetailsAction, type PRDetails } from "../service"

// 파일 다운로드 컴포넌트
const FileDownloadLink = ({ 
    filePath, 
    fileName, 
    fileSize,
    title,
    className = ""
}: { 
    filePath: string; 
    fileName: string; 
    fileSize: number;
    title?: string | null;
    className?: string;
}) => {
    return (
        <a 
            href={filePath} 
            download={fileName}
            className={`text-blue-600 hover:underline ${className}`}
            title={title || fileName}
        >
            {title || fileName} <span className="text-xs text-gray-500">({formatFileSize(fileSize)})</span>
        </a>
    );
};

const FileDownloadButton = ({ 
    filePath, 
    fileName,
    variant = "download",
    size = "sm"
}: { 
    filePath: string; 
    fileName: string;
    variant?: "download" | "preview";
    size?: "sm" | "default";
}) => {
    return (
        <Button
            variant="outline"
            size={size}
            asChild
        >
            <a href={filePath} download={fileName}>
                {variant === "download" ? "다운로드" : "미리보기"}
            </a>
        </Button>
    );
};

// PR 문서 다이얼로그
interface PrDocumentsDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    bidding: BiddingListItem | null;
}

export function PrDocumentsDialog({
    open,
    onOpenChange,
    bidding
}: PrDocumentsDialogProps) {
    const [data, setData] = useState<PRDetails | null>(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const fetchPRData = useCallback(async () => {
        if (!bidding) return;

        setLoading(true);
        setError(null);
        
        try {
            const result = await getPRDetailsAction(bidding.id);
            
            if (result.success && result.data) {
                setData(result.data as PRDetails);
            } else {
                setError(result.error || "PR 문서 정보를 불러올 수 없습니다.");
            }
        } catch (err) {
            setError("데이터 로딩 중 오류가 발생했습니다.");
            console.error("Failed to fetch PR data:", err);
        } finally {
            setLoading(false);
        }
    }, [bidding]);

    useEffect(() => {
        if (open && bidding) {
            fetchPRData();
        }
    }, [open, bidding, fetchPRData]);

    const formatCurrency = (amount: number | null, currency: string | null) => {
        if (amount == null) return "-";
        return `${amount.toLocaleString()} ${currency || ""}`;
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-7xl max-h-[90vh]" style={{ maxWidth: "80vw" }}>
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2">
                        <PackageIcon className="h-5 w-5" />
                        PR 및 문서 정보
                    </DialogTitle>
                    <DialogDescription>
                        {bidding?.title}의 PR 문서 및 아이템 정보입니다.
                    </DialogDescription>
                </DialogHeader>

                <ScrollArea className="max-h-[75vh]">
                    {loading ? (
                        <div className="flex items-center justify-center py-8">
                            <div className="text-center">
                                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-2"></div>
                                <p className="text-sm text-muted-foreground">로딩 중...</p>
                            </div>
                        </div>
                    ) : error ? (
                        <div className="flex items-center justify-center py-8">
                            <div className="text-center">
                                <p className="text-sm text-destructive mb-2">{error}</p>
                                <Button onClick={fetchPRData} size="sm">
                                    다시 시도
                                </Button>
                            </div>
                        </div>
                    ) : data ? (
                        <div className="space-y-6">
                            {/* PR 문서 목록 */}
                            {data.documents.length > 0 && (
                                <Card>
                                    <CardHeader>
                                        <CardTitle className="text-lg flex items-center gap-2">
                                            <FileTextIcon className="h-5 w-5" />
                                            PR 문서 ({data.documents.length}개)
                                        </CardTitle>
                                    </CardHeader>
                                    <CardContent>
                                        <Table>
                                            <TableHeader>
                                                <TableRow>
                                                    <TableHead>문서명</TableHead>
                                                    <TableHead>파일명</TableHead>
                                                    <TableHead>버전</TableHead>
                                                    <TableHead>크기</TableHead>
                                                    <TableHead>등록일</TableHead>
                                                    <TableHead>등록자</TableHead>
                                                    <TableHead className="text-right">다운로드</TableHead>
                                                </TableRow>
                                            </TableHeader>
                                            <TableBody>
                                                {data.documents.map((doc) => (
                                                    <TableRow key={doc.id}>
                                                        <TableCell className="font-medium">
                                                            {doc.documentName}
                                                            {doc.description && (
                                                                <div className="text-xs text-muted-foreground mt-1">
                                                                    {doc.description}
                                                                </div>
                                                            )}
                                                        </TableCell>
                                                        <TableCell>
                                                            <FileDownloadLink
                                                                filePath={doc.filePath}
                                                                fileName={doc.originalFileName}
                                                                fileSize={doc.fileSize}
                                                            />
                                                        </TableCell>
                                                        <TableCell>
                                                            {doc.version ? (
                                                                <Badge variant="outline">{doc.version}</Badge>
                                                            ) : "-"}
                                                        </TableCell>
                                                        <TableCell>{formatFileSize(doc.fileSize)}</TableCell>
                                                        <TableCell>
                                                            {new Date(doc.registeredAt).toLocaleDateString('ko-KR')}
                                                        </TableCell>
                                                        <TableCell>{doc.registeredBy || "-"}</TableCell>
                                                        <TableCell className="text-right">
                                                            <FileDownloadButton
                                                                filePath={doc.filePath}
                                                                fileName={doc.originalFileName}
                                                                variant="download"
                                                                size="sm"
                                                            />
                                                        </TableCell>
                                                    </TableRow>
                                                ))}
                                            </TableBody>
                                        </Table>
                                    </CardContent>
                                </Card>
                            )}

                            {/* PR 아이템 테이블 */}
                            {data.items.length > 0 && (
                                <Card>
                                    <CardHeader>
                                        <CardTitle className="text-lg flex items-center gap-2">
                                            <HashIcon className="h-5 w-5" />
                                            PR 아이템 ({data.items.length}개)
                                        </CardTitle>
                                    </CardHeader>
                                    <CardContent>
                                        <div className="overflow-x-auto">
                                            <Table>
                                                <TableHeader>
                                                    <TableRow>
                                                        <TableHead className="w-[80px]">아이템 번호</TableHead>
                                                        <TableHead className="w-[120px]">PR 번호</TableHead>
                                                        <TableHead className="w-[150px]">자재그룹</TableHead>
                                                        <TableHead className="w-[150px]">자재</TableHead>
                                                        <TableHead className="w-[200px]">품목정보</TableHead>
                                                        <TableHead className="w-[100px]">수량</TableHead>
                                                        <TableHead className="w-[80px]">구매단위</TableHead>
                                                        <TableHead className="w-[100px]">내정단가</TableHead>
                                                        <TableHead className="w-[100px]">내정금액</TableHead>
                                                        <TableHead className="w-[100px]">예산금액</TableHead>
                                                        <TableHead className="w-[100px]">실적금액</TableHead>
                                                        <TableHead className="w-[100px]">WBS코드</TableHead>
                                                        <TableHead className="w-[100px]">요청 납기</TableHead>
                                                        <TableHead className="w-[150px]">스펙 문서</TableHead>
                                                    </TableRow>
                                                </TableHeader>
                                                <TableBody>
                                                    {data.items.map((item) => (
                                                        <TableRow key={item.id}>
                                                            <TableCell className="font-medium font-mono text-xs">
                                                                {item.itemNumber || "-"}
                                                            </TableCell>
                                                            <TableCell className="font-mono text-xs">
                                                                {item.prNumber || "-"}
                                                            </TableCell>
                                                            <TableCell>
                                                                <div>
                                                                    {item.materialGroupNumber && (
                                                                        <div className="font-mono text-xs">{item.materialGroupNumber}</div>
                                                                    )}
                                                                    {item.materialGroupInfo && (
                                                                        <div className="text-xs text-muted-foreground">{item.materialGroupInfo}</div>
                                                                    )}
                                                                    {!item.materialGroupNumber && !item.materialGroupInfo && "-"}
                                                                </div>
                                                            </TableCell>
                                                            <TableCell>
                                                                <div>
                                                                    {item.materialNumber && (
                                                                        <div className="font-mono text-xs">{item.materialNumber}</div>
                                                                    )}
                                                                    {item.materialInfo && (
                                                                        <div className="text-xs text-muted-foreground">{item.materialInfo}</div>
                                                                    )}
                                                                    {!item.materialNumber && !item.materialInfo && "-"}
                                                                </div>
                                                            </TableCell>
                                                            <TableCell>
                                                                <div className="text-xs">
                                                                    {item.itemInfo || "-"}
                                                                </div>
                                                            </TableCell>
                                                            <TableCell>
                                                                <div className="flex items-center gap-1">
                                                                    <PackageIcon className="h-3 w-3 text-muted-foreground" />
                                                                    <span className="text-sm">
                                                                        {item.quantity ? `${item.quantity.toLocaleString()} ${item.quantityUnit || ""}` : "-"}
                                                                    </span>
                                                                </div>
                                                            </TableCell>
                                                            <TableCell className="text-xs">
                                                                {item.purchaseUnit || "-"}
                                                            </TableCell>
                                                            <TableCell>
                                                                <div className="flex items-center gap-1">
                                                                    <DollarSignIcon className="h-3 w-3 text-muted-foreground" />
                                                                    <span className="text-sm">
                                                                        {formatCurrency(item.targetUnitPrice, item.targetCurrency)}
                                                                    </span>
                                                                </div>
                                                            </TableCell>
                                                            <TableCell>
                                                                <div className="text-sm font-medium">
                                                                    {formatCurrency(item.targetAmount, item.targetCurrency)}
                                                                </div>
                                                            </TableCell>
                                                            <TableCell>
                                                                <div className="text-sm">
                                                                    {formatCurrency(item.budgetAmount, item.budgetCurrency)}
                                                                </div>
                                                            </TableCell>
                                                            <TableCell>
                                                                <div className="text-sm">
                                                                    {formatCurrency(item.actualAmount, item.actualCurrency)}
                                                                </div>
                                                            </TableCell>
                                                            <TableCell>
                                                                <div>
                                                                    {item.wbsCode && (
                                                                        <div className="font-mono text-xs">{item.wbsCode}</div>
                                                                    )}
                                                                    {item.wbsName && (
                                                                        <div className="text-xs text-muted-foreground">{item.wbsName}</div>
                                                                    )}
                                                                    {!item.wbsCode && !item.wbsName && "-"}
                                                                </div>
                                                            </TableCell>
                                                            <TableCell>
                                                                {item.requestedDeliveryDate ? (
                                                                    <div className="flex items-center gap-1">
                                                                        <CalendarIcon className="h-3 w-3 text-muted-foreground" />
                                                                        <span className="text-sm">
                                                                            {new Date(item.requestedDeliveryDate).toLocaleDateString('ko-KR')}
                                                                        </span>
                                                                    </div>
                                                                ) : "-"}
                                                            </TableCell>
                                                            <TableCell>
                                                                <div className="space-y-1">
                                                                    <div className="flex items-center gap-2">
                                                                        <Badge variant={item.hasSpecDocument ? "default" : "secondary"} className="text-xs">
                                                                            {item.hasSpecDocument ? "있음" : "없음"}
                                                                        </Badge>
                                                                        {item.specDocuments.length > 0 && (
                                                                            <span className="text-xs text-muted-foreground">
                                                                                ({item.specDocuments.length}개)
                                                                            </span>
                                                                        )}
                                                                    </div>
                                                                    {item.specDocuments.length > 0 && (
                                                                        <div className="space-y-1">
                                                                            {item.specDocuments.map((doc) => (
                                                                                <div key={doc.id} className="text-xs">
                                                                                    <FileDownloadLink
                                                                                        filePath={doc.filePath}
                                                                                        fileName={doc.originalFileName}
                                                                                        fileSize={doc.fileSize}
                                                                                        title={doc.title}
                                                                                        className="text-xs"
                                                                                    />
                                                                                </div>
                                                                            ))}
                                                                        </div>
                                                                    )}
                                                                </div>
                                                            </TableCell>
                                                        </TableRow>
                                                    ))}
                                                </TableBody>
                                            </Table>
                                        </div>
                                    </CardContent>
                                </Card>
                            )}

                            {/* 데이터가 없는 경우 */}
                            {data.documents.length === 0 && data.items.length === 0 && (
                                <div className="text-center py-8">
                                    <FileTextIcon className="h-12 w-12 text-muted-foreground mx-auto mb-2" />
                                    <p className="text-muted-foreground">PR 문서가 없습니다.</p>
                                </div>
                            )}
                        </div>
                    ) : null}
                </ScrollArea>
            </DialogContent>
        </Dialog>
    );
}