"use client"

import * as React from "react"

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

import { postUploadQueueStudioEmbed, postUploadQueueStudioSync } from "./deepdex-upload-queue-review-api"
import { StudioEmbedFrame, type StudioEmbed } from "@/components/shared/studio-embed/studio-embed-frame"

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

export function DeepdexUploadQueueReviewViewSheet({
  open,
  onOpenChange,
  module,
  viewingIndex,
  queueRows,
  onStudioSynced,
}: {
  open: boolean
  onOpenChange: (open: boolean) => void
  module: string
  viewingIndex: number | null
  queueRows: Array<Record<string, unknown>>
  onStudioSynced?: () => void
}) {
  const rawQueueId = viewingIndex != null ? Number(queueRows[viewingIndex]?._queue_id ?? 0) : 0
  const queueId = open && Number.isFinite(rawQueueId) && rawQueueId > 0 ? rawQueueId : 0
  const [resolved, setResolved] = React.useState<{ queueId: number; embed: StudioEmbed | null } | null>(null)

  React.useEffect(() => {
    if (queueId <= 0) return
    let cancelled = false
    void postUploadQueueStudioEmbed(queueId)
      .catch(() => null)
      .then((embed) => {
        if (!cancelled) setResolved({ queueId, embed })
      })
    return () => {
      cancelled = true
    }
  }, [queueId])

  const studio = resolved?.queueId === queueId ? resolved.embed : null
  const studioLoading = queueId > 0 && resolved?.queueId !== queueId

  const syncFromStudio = React.useCallback(() => {
    void postUploadQueueStudioSync(queueId).then((ok) => {
      if (ok) onStudioSynced?.()
    })
  }, [queueId, onStudioSynced])

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent
        side="right"
        className={
          studio
            ? "flex h-screen w-[90vw] max-w-none flex-col border-0 data-[side=right]:w-[90vw] data-[side=right]:sm:max-w-none"
            : "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>
          <SheetDescription className="sr-only">Extracted data for this queue item.</SheetDescription>
        </SheetHeader>
        {studio ? (
          <StudioEmbedFrame embed={studio} onCorrected={syncFromStudio} />
        ) : studioLoading ? (
          <p className="p-4 text-sm text-muted-foreground">Loading Extraction Studio…</p>
        ) : (
        <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>
  )
}