"use client"

import { ACCUMULATOR_PARENT_FIELDS } from "@/components/deepdex/utils/accumulator-queue-fields"
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

import { renderChildRows } from "./deepdex-upload-queue-review-cells"

export function DeepdexUploadQueueReviewViewSheet({
  open,
  onOpenChange,
  module,
  viewingIndex,
  queueRows,
}: {
  open: boolean
  onOpenChange: (open: boolean) => void
  module: string
  viewingIndex: number | null
  queueRows: Array<Record<string, unknown>>
}) {
  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent side="right" className="h-screen w-1/2 overflow-y-auto max-w-none border-0 data-[side=right]:w-1/2 data-[side=right]:sm:max-w-none">
        <SheetHeader>
          <SheetTitle>View all data #{viewingIndex != null ? viewingIndex + 1 : "?"}</SheetTitle>
        </SheetHeader>
        <div className="space-y-3 p-4">
          {viewingIndex != null && queueRows[viewingIndex] ? (
            <>
              <div className="rounded border p-3">
                <p className="mb-2 text-sm font-semibold">Parent fields</p>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Field</TableHead>
                      <TableHead>Value</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {(module === "accumulator"
                      ? ACCUMULATOR_PARENT_FIELDS.map((key) => [key, queueRows[viewingIndex][key]] as const)
                      : Object.entries(queueRows[viewingIndex]).filter(([key]) => !key.startsWith("_"))
                    ).map(([key, value]) => (
                      <TableRow key={key}>
                        <TableCell>{key}</TableCell>
                        <TableCell>{value == null || value === "" ? "—" : String(value)}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
              <div className="rounded border p-3">
                <p className="mb-2 text-sm font-semibold">Child rows</p>
                {module === "accumulator" ? (
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Date</TableHead>
                        <TableHead>Quantity per period</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {(
                        ((queueRows[viewingIndex]._child as { rows?: Array<{ date?: string; quantityPerPeriod?: string }> } | undefined)?.rows) ?? []
                      ).map((childRow, childIndex) => (
                        <TableRow key={`acc-view-child-${childIndex}`}>
                          <TableCell>{childRow.date || "—"}</TableCell>
                          <TableCell>{childRow.quantityPerPeriod || "—"}</TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                ) : (
                  <div className="space-y-4">
                    <div>
                      <p className="mb-1 text-xs font-medium">Observations</p>
                      {renderChildRows(
                        "Observations",
                        (((queueRows[viewingIndex]._child as { observations?: Array<{ date?: string; nonCall?: string }> } | undefined)?.observations) ?? []),
                      )}
                    </div>
                    <div>
                      <p className="mb-1 text-xs font-medium">Coupons</p>
                      {renderChildRows(
                        "Coupons",
                        (((queueRows[viewingIndex]._child as { coupons?: Array<{ date?: string }> } | undefined)?.coupons) ?? []),
                      )}
                    </div>
                  </div>
                )}
              </div>
            </>
          ) : (
            <p className="text-sm text-muted-foreground">No row selected.</p>
          )}
        </div>
      </SheetContent>
    </Sheet>
  )
}