// lib/tbe-last/table/tbe-last-table.tsx

"use client"

import * as React from "react"
import { useRouter } from "next/navigation"
import { type DataTableFilterField } from "@/types/table"
import { useDataTable } from "@/hooks/use-data-table"
import { DataTable } from "@/components/data-table/data-table"
import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
import { getColumns } from "./tbe-last-table-columns"
import { TbeLastView } from "@/db/schema"
import { getAllTBELast, getTBESessionDetail } from "@/lib/tbe-last/service"
import { Button } from "@/components/ui/button"
import { Download, RefreshCw } from "lucide-react"
import { exportTableToExcel } from "@/lib/export"
import { 
  Dialog, 
  DialogContent, 
  DialogHeader, 
  DialogTitle,
  DialogDescription 
} from "@/components/ui/dialog"
import { 
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription
} from "@/components/ui/sheet"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { formatDate } from "@/lib/utils"

interface TbeLastTableProps {
  promises: Promise<[
    Awaited<ReturnType<typeof getAllTBELast>>,
  ]>
}

export function TbeLastTable({ promises }: TbeLastTableProps) {
  const router = useRouter()
  const [{ data, pageCount }] = React.use(promises)
  
  // Dialog states
  const [sessionDetailOpen, setSessionDetailOpen] = React.useState(false)
  const [documentsOpen, setDocumentsOpen] = React.useState(false)
  const [prItemsOpen, setPrItemsOpen] = React.useState(false)
  const [evaluationOpen, setEvaluationOpen] = React.useState(false)
  
  const [selectedSessionId, setSelectedSessionId] = React.useState<number | null>(null)
  const [selectedRfqId, setSelectedRfqId] = React.useState<number | null>(null)
  const [selectedSession, setSelectedSession] = React.useState<TbeLastView | null>(null)
  const [sessionDetail, setSessionDetail] = React.useState<any>(null)
  const [isLoadingDetail, setIsLoadingDetail] = React.useState(false)
  
  // Load session detail when needed
  const loadSessionDetail = React.useCallback(async (sessionId: number) => {
    setIsLoadingDetail(true)
    try {
      const detail = await getTBESessionDetail(sessionId)
      setSessionDetail(detail)
    } catch (error) {
      console.error("Failed to load session detail:", error)
    } finally {
      setIsLoadingDetail(false)
    }
  }, [])
  
  // Handlers
  const handleOpenSessionDetail = React.useCallback((sessionId: number) => {
    setSelectedSessionId(sessionId)
    setSessionDetailOpen(true)
    loadSessionDetail(sessionId)
  }, [loadSessionDetail])
  
  const handleOpenDocuments = React.useCallback((sessionId: number) => {
    setSelectedSessionId(sessionId)
    setDocumentsOpen(true)
    loadSessionDetail(sessionId)
  }, [loadSessionDetail])
  
  const handleOpenPrItems = React.useCallback((rfqId: number) => {
    setSelectedRfqId(rfqId)
    setPrItemsOpen(true)
    loadSessionDetail(rfqId)
  }, [loadSessionDetail])
  
  const handleOpenEvaluation = React.useCallback((session: TbeLastView) => {
    setSelectedSession(session)
    setEvaluationOpen(true)
  }, [])
  
  const handleRefresh = React.useCallback(() => {
    router.refresh()
  }, [router])
  
  // Table columns
  const columns = React.useMemo(
    () =>
      getColumns({
        onOpenSessionDetail: handleOpenSessionDetail,
        onOpenDocuments: handleOpenDocuments,
        onOpenPrItems: handleOpenPrItems,
        onOpenEvaluation: handleOpenEvaluation,
      }),
    [handleOpenSessionDetail, handleOpenDocuments, handleOpenPrItems, handleOpenEvaluation]
  )
  
  // Filter fields
  const filterFields: DataTableFilterField<TbeLastView>[] = [
    {
      id: "sessionStatus",
      label: "Status",
      type: "select",
      options: [
        { label: "준비중", value: "준비중" },
        { label: "진행중", value: "진행중" },
        { label: "검토중", value: "검토중" },
        { label: "보류", value: "보류" },
        { label: "완료", value: "완료" },
      ],
    },
    {
      id: "evaluationResult",
      label: "Result",
      type: "select",
      options: [
        { label: "Pass", value: "pass" },
        { label: "Conditional Pass", value: "conditional_pass" },
        { label: "Non-Pass", value: "non_pass" },
      ],
    },
  ]
  
  // Data table
  const { table } = useDataTable({
    data,
    columns,
    pageCount,
    filterFields,
    enablePinning: true,
    enableAdvancedFilter: true,
    initialState: {
      sorting: [{ id: "createdAt", desc: true }],
      columnPinning: { right: ["documents", "comments"] },
    },
    getRowId: (originalRow) => String(originalRow.tbeSessionId),
    shallow: false,
    clearOnDefault: true,
  })
  
  return (
    <>
      <DataTable table={table}>
        <DataTableAdvancedToolbar
          table={table}
          filterFields={filterFields}
          shallow={false}
        >
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={handleRefresh}
              className="gap-2"
            >
              <RefreshCw className="size-4" />
              <span>Refresh</span>
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={() =>
                exportTableToExcel(table, {
                  filename: "tbe-sessions",
                  excludeColumns: ["select", "actions"],
                })
              }
              className="gap-2"
            >
              <Download className="size-4" />
              <span>Export</span>
            </Button>
          </div>
        </DataTableAdvancedToolbar>
      </DataTable>
      
      {/* Session Detail Dialog */}
      <Dialog open={sessionDetailOpen} onOpenChange={setSessionDetailOpen}>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>TBE Session Detail</DialogTitle>
            <DialogDescription>
              {sessionDetail?.session?.sessionCode} - {sessionDetail?.session?.vendorName}
            </DialogDescription>
          </DialogHeader>
          {isLoadingDetail ? (
            <div className="p-8 text-center">Loading...</div>
          ) : sessionDetail ? (
            <div className="space-y-4">
              {/* Session info */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm font-medium">RFQ Code</p>
                  <p className="text-sm text-muted-foreground">{sessionDetail.session.rfqCode}</p>
                </div>
                <div>
                  <p className="text-sm font-medium">Status</p>
                  <Badge>{sessionDetail.session.sessionStatus}</Badge>
                </div>
                <div>
                  <p className="text-sm font-medium">Project</p>
                  <p className="text-sm text-muted-foreground">
                    {sessionDetail.session.projectCode} - {sessionDetail.session.projectName}
                  </p>
                </div>
                <div>
                  <p className="text-sm font-medium">Package</p>
                  <p className="text-sm text-muted-foreground">
                    {sessionDetail.session.packageNo} - {sessionDetail.session.packageName}
                  </p>
                </div>
              </div>
              
              {/* PR Items */}
              {sessionDetail.prItems?.length > 0 && (
                <div>
                  <h3 className="font-medium mb-2">PR Items</h3>
                  <div className="border rounded-lg">
                    <table className="w-full text-sm">
                      <thead>
                        <tr className="border-b">
                          <th className="text-left p-2">PR No</th>
                          <th className="text-left p-2">Material Code</th>
                          <th className="text-left p-2">Description</th>
                          <th className="text-left p-2">Qty</th>
                          <th className="text-left p-2">Delivery</th>
                        </tr>
                      </thead>
                      <tbody>
                        {sessionDetail.prItems.map((item: any) => (
                          <tr key={item.id} className="border-b">
                            <td className="p-2">{item.prNo}</td>
                            <td className="p-2">{item.materialCode}</td>
                            <td className="p-2">{item.materialDescription}</td>
                            <td className="p-2">{item.quantity} {item.uom}</td>
                            <td className="p-2">
                              {item.deliveryDate ? formatDate(item.deliveryDate, "KR") : "-"}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              )}
            </div>
          ) : null}
        </DialogContent>
      </Dialog>
      
      {/* Documents Sheet */}
      <Sheet open={documentsOpen} onOpenChange={setDocumentsOpen}>
        <SheetContent className="w-[600px] sm:w-[800px]">
          <SheetHeader>
            <SheetTitle>Documents & Comments</SheetTitle>
            <SheetDescription>
              Review documents and PDFTron comments
            </SheetDescription>
          </SheetHeader>
          
          {isLoadingDetail ? (
            <div className="p-8 text-center">Loading...</div>
          ) : sessionDetail?.documents ? (
            <Tabs defaultValue="buyer" className="mt-4">
              <TabsList className="grid w-full grid-cols-2">
                <TabsTrigger value="buyer">Buyer Documents</TabsTrigger>
                <TabsTrigger value="vendor">Vendor Documents</TabsTrigger>
              </TabsList>
              
              <TabsContent value="buyer">
                <ScrollArea className="h-[calc(100vh-200px)]">
                  <div className="space-y-2">
                    {sessionDetail.documents
                      .filter((doc: any) => doc.documentSource === "buyer")
                      .map((doc: any) => (
                        <div key={doc.documentId} className="border rounded-lg p-3">
                          <div className="flex items-start justify-between">
                            <div className="flex-1">
                              <p className="font-medium text-sm">{doc.documentName}</p>
                              <p className="text-xs text-muted-foreground">
                                Type: {doc.documentType} | Status: {doc.reviewStatus}
                              </p>
                            </div>
                            <div className="flex items-center gap-2">
                              {doc.comments.totalCount > 0 && (
                                <Badge variant={doc.comments.openCount > 0 ? "destructive" : "secondary"}>
                                  {doc.comments.openCount}/{doc.comments.totalCount} comments
                                </Badge>
                              )}
                              <Button size="sm" variant="outline">
                                View in PDFTron
                              </Button>
                            </div>
                          </div>
                        </div>
                      ))}
                  </div>
                </ScrollArea>
              </TabsContent>
              
              <TabsContent value="vendor">
                <ScrollArea className="h-[calc(100vh-200px)]">
                  <div className="space-y-2">
                    {sessionDetail.documents
                      .filter((doc: any) => doc.documentSource === "vendor")
                      .map((doc: any) => (
                        <div key={doc.documentId} className="border rounded-lg p-3">
                          <div className="flex items-start justify-between">
                            <div className="flex-1">
                              <p className="font-medium text-sm">{doc.documentName}</p>
                              <p className="text-xs text-muted-foreground">
                                Type: {doc.documentType} | Status: {doc.reviewStatus}
                              </p>
                              {doc.submittedAt && (
                                <p className="text-xs text-muted-foreground">
                                  Submitted: {formatDate(doc.submittedAt, "KR")}
                                </p>
                              )}
                            </div>
                            <div className="flex items-center gap-2">
                              <Button size="sm" variant="outline">
                                Download
                              </Button>
                              <Button size="sm" variant="outline">
                                Review
                              </Button>
                            </div>
                          </div>
                        </div>
                      ))}
                  </div>
                </ScrollArea>
              </TabsContent>
            </Tabs>
          ) : null}
        </SheetContent>
      </Sheet>
      
      {/* PR Items Dialog */}
      <Dialog open={prItemsOpen} onOpenChange={setPrItemsOpen}>
        <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>PR Items</DialogTitle>
            <DialogDescription>
              Purchase Request items for this RFQ
            </DialogDescription>
          </DialogHeader>
          {sessionDetail?.prItems && (
            <div className="border rounded-lg">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b bg-muted/50">
                    <th className="text-left p-2">PR No</th>
                    <th className="text-left p-2">Material Code</th>
                    <th className="text-left p-2">Description</th>
                    <th className="text-left p-2">Size</th>
                    <th className="text-left p-2">Qty</th>
                    <th className="text-left p-2">Unit</th>
                    <th className="text-left p-2">Delivery</th>
                    <th className="text-left p-2">Major</th>
                  </tr>
                </thead>
                <tbody>
                  {sessionDetail.prItems.map((item: any) => (
                    <tr key={item.id} className="border-b hover:bg-muted/20">
                      <td className="p-2">{item.prNo}</td>
                      <td className="p-2">{item.materialCode}</td>
                      <td className="p-2">{item.materialDescription}</td>
                      <td className="p-2">{item.size || "-"}</td>
                      <td className="p-2 text-right">{item.quantity}</td>
                      <td className="p-2">{item.uom}</td>
                      <td className="p-2">
                        {item.deliveryDate ? formatDate(item.deliveryDate, "KR") : "-"}
                      </td>
                      <td className="p-2 text-center">
                        {item.majorYn && <Badge variant="default">Major</Badge>}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </DialogContent>
      </Dialog>
      
      {/* Evaluation Dialog */}
      <Dialog open={evaluationOpen} onOpenChange={setEvaluationOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>TBE Evaluation</DialogTitle>
            <DialogDescription>
              Enter evaluation result for {selectedSession?.sessionCode}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 mt-4">
            {/* Evaluation form would go here */}
            <p className="text-sm text-muted-foreground">
              Evaluation form to be implemented...
            </p>
          </div>
        </DialogContent>
      </Dialog>
    </>
  )
}