"use client"

import * as React from "react"
import { useMemo } from "react"
import { Badge } from "@/components/ui/badge"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle
} from "@/components/ui/sheet"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow
} from "@/components/ui/table"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger
} from "@/components/ui/tabs"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from "@/components/ui/card"
import type { TagTypeClassFormMappings } from "@/db/schema/vendorData" // or your actual type
import { fetchFormMetadata, FormColumn } from "@/lib/forms/services"


interface ViewMetasProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  form: TagTypeClassFormMappings | null
}

export function ViewMetas({ open, onOpenChange, form }: ViewMetasProps) {
  // metadata & loading
  const [metadata, setMetadata] = React.useState<{
    formName: string
    formCode: string
    columns: FormColumn[]
  } | null>(null)
  const [loading, setLoading] = React.useState(false)

  // Group columns by type for better organization
  const groupedColumns = useMemo(() => {
    if (!metadata?.columns) return {}
    
    return metadata.columns.reduce((acc, column) => {
      const type = column.type
      if (!acc[type]) {
        acc[type] = []
      }
      acc[type].push(column)
      return acc
    }, {} as Record<string, FormColumn[]>)
  }, [metadata])

  // Types for the tabs
  const columnTypes = useMemo(() => {
    return Object.keys(groupedColumns)
  }, [groupedColumns])

  // Fetch metadata when form changes and dialog is opened
  React.useEffect(() => {
    async function fetchMeta() {
      if (!form || !open) return
      
      setLoading(true)
      try {
        // 서버 액션 호출
        const metaData = await fetchFormMetadata(form.formCode, form.projectId)
        if (metaData) {
          setMetadata(metaData)
        } else {
          setMetadata(null)
        }
      } catch (error) {
        console.error("Error fetching form metadata:", error)
        setMetadata(null)
      } finally {
        setLoading(false)
      }
    }
    
    fetchMeta()
  }, [form, open])

  if (!form) return null

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className="sm:max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl overflow-y-auto">

          <SheetHeader className="mb-4">
            <SheetTitle>Form Metadata</SheetTitle>
            <SheetDescription>
            </SheetDescription>
              {loading ? (
                <div className="text-muted-foreground">Loading metadata...</div>
              ) : metadata ? (
                <div className="flex flex-col gap-1">
                  <div className="flex gap-2 items-center">
                    <span className="font-semibold">Form Code:</span>
                    <Badge variant="outline">{metadata.formCode}</Badge>
                  </div>
                  <div className="flex gap-2 items-center">
                    <span className="font-semibold">Form Name:</span>
                    <span>{metadata.formName}</span>
                  </div>
                </div>
              ) : (
                <div className="text-sm text-muted-foreground">
                  No metadata found for form code: {form.formCode}
                </div>
              )}

          </SheetHeader>

          {loading ? (
            <div className="flex items-center justify-center h-40">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
            </div>
          ) : metadata ? (
            <Tabs defaultValue="all" className="mt-4">
              <TabsList className="mb-4 flex-wrap">
                <TabsTrigger value="all">All ({metadata.columns.length})</TabsTrigger>
                {columnTypes.map((type) => (
                  <TabsTrigger key={type} value={type}>
                    {type} ({groupedColumns[type].length})
                  </TabsTrigger>
                ))}
              </TabsList>

              <TabsContent value="all">
                <Card>
                  <CardHeader>
                    <CardTitle>All Fields</CardTitle>
                    <CardDescription>All form fields and their properties</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Key</TableHead>
                          <TableHead>Label</TableHead>
                          <TableHead>Type</TableHead>
                          <TableHead>Options</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {metadata.columns.map((column) => (
                          <TableRow key={column.key}>
                            <TableCell className="font-mono text-sm">{column.key}</TableCell>
                            <TableCell>{column.label}</TableCell>
                            <TableCell>
                              <Badge variant="secondary">{column.type}</Badge>
                            </TableCell>
                            <TableCell>
                              {column.options ? (
                                <div className="flex flex-wrap gap-1">
                                  {column.options.map((option) => (
                                    <Badge key={option} variant="outline" className="text-xs">
                                      {option}
                                    </Badge>
                                  ))}
                                </div>
                              ) : (
                                "-"
                              )}
                            </TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </CardContent>
                </Card>
              </TabsContent>

              {columnTypes.map((type) => (
                <TabsContent key={type} value={type}>
                  <Card>
                    <CardHeader>
                      <CardTitle>{type.charAt(0).toUpperCase() + type.slice(1)} Fields</CardTitle>
                      <CardDescription>Fields with type "{type}"</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>Key</TableHead>
                            <TableHead>Label</TableHead>
                            {type === "select" && <TableHead>Options</TableHead>}
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {groupedColumns[type].map((column) => (
                            <TableRow key={column.key}>
                              <TableCell className="font-mono text-sm">{column.key}</TableCell>
                              <TableCell>{column.label}</TableCell>
                              {type === "select" && (
                                <TableCell>
                                  {column.options ? (
                                    <div className="flex flex-wrap gap-1">
                                      {column.options.map((option) => (
                                        <Badge key={option} variant="outline" className="text-xs">
                                          {option}
                                        </Badge>
                                      ))}
                                    </div>
                                  ) : (
                                    "-"
                                  )}
                                </TableCell>
                              )}
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </CardContent>
                  </Card>
                </TabsContent>
              ))}
            </Tabs>
          ) : (
            <div className="text-center py-8">
              <div className="text-lg font-medium">No metadata found</div>
              <p className="text-muted-foreground mt-2">
                Could not find metadata for form code: {form.formCode}
              </p>
            </div>
          )}
    
      </SheetContent>
    </Sheet>
  )
}