"use client"

import * as React from "react"
import { Loader2 } from "lucide-react"

import {
  ACCUMULATOR_PARENT_FIELDS,
} from "@/components/deepdex/utils/accumulator-queue-fields"
import {
  getOcrCodeForSlot,
  needsMapping,
  STRUCTURE_PARENT_FIELDS,
  UNDERLYING_SLOTS,
  underlyingSlotHasData,
  type StructureQueueRow,
} from "@/components/deepdex/utils/structure-underlying-alias"
import {
  accumulatorNeedsMapping,
  accumulatorUnderlyingHasData,
  getOcrCodeForAccumulator,
  type AccumulatorQueueRow,
} from "@/components/deepdex/utils/accumulator-underlying-alias"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
import { cn } from "@/lib/utils"

export function DeepdexUploadQueueReviewEditSheet({
  open,
  onOpenChange,
  module,
  editingIndex,
  editRow,
  onEditRowChange,
  editingExisting,
  queueRows,
  editObs,
  onEditObsChange,
  editCoupons,
  onEditCouponsChange,
  editAccRows,
  onEditAccRowsChange,
  isSubmitting,
  onSave,
  onMapStructure,
  onMapAccumulator,
}: {
  open: boolean
  onOpenChange: (open: boolean) => void
  module: string
  editingIndex: number | null
  editRow: Record<string, string>
  onEditRowChange: React.Dispatch<React.SetStateAction<Record<string, string>>>
  editingExisting: Record<string, unknown> | null
  queueRows: Array<Record<string, unknown>>
  editObs: Array<{ date: string; nonCall: string }>
  onEditObsChange: React.Dispatch<React.SetStateAction<Array<{ date: string; nonCall: string }>>>
  editCoupons: Array<{ date: string }>
  onEditCouponsChange: React.Dispatch<React.SetStateAction<Array<{ date: string }>>>
  editAccRows: Array<{ date: string; quantityPerPeriod: string }>
  onEditAccRowsChange: React.Dispatch<React.SetStateAction<Array<{ date: string; quantityPerPeriod: string }>>>
  isSubmitting: boolean
  onSave: () => void
  onMapStructure: (queueIndex: number, slot: number, row: StructureQueueRow) => void
  onMapAccumulator: (queueIndex: number, row: AccumulatorQueueRow) => void
}) {
  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>Edit row #{editingIndex != null ? editingIndex + 1 : "?"}</SheetTitle>
        </SheetHeader>
        <div className="space-y-4 p-4">
          <div className="grid gap-3 md:grid-cols-2">
            {(module === "structure"
              ? [...STRUCTURE_PARENT_FIELDS]
              : ACCUMULATOR_PARENT_FIELDS.filter((key) => key !== "UnderlyingISIN" && key !== "UnderlyingName")
            ).map((key) => (
              <div key={key} className="grid gap-1">
                <label className="text-xs font-medium text-muted-foreground">{key}</label>
                <Input
                  value={editRow[key] ?? ""}
                  onChange={(event) =>
                    onEditRowChange((prev) => ({ ...prev, [key]: event.target.value }))
                  }
                />
                {editingExisting?.[key] != null && String(editingExisting[key]) !== "" ? (
                  <p className="text-[11px] text-muted-foreground">
                    Current in DB: {String(editingExisting[key])}
                  </p>
                ) : null}
              </div>
            ))}
          </div>

          {module === "accumulator" ? (() => {
            const rowDraft: AccumulatorQueueRow = {
              ...(editingIndex != null ? queueRows[editingIndex] : {}),
              ...editRow,
            }
            if (!accumulatorUnderlyingHasData(rowDraft)) return null
            const mapped = !accumulatorNeedsMapping(rowDraft)
            const ocr = getOcrCodeForAccumulator(rowDraft)

            return (
              <div className="space-y-3">
                <div>
                  <p className="text-sm font-semibold">Underlying</p>
                  <p className="text-xs text-muted-foreground">
                    Orange panel = OCR code not yet mapped. Green = real ISIN resolved.
                  </p>
                </div>
                <div
                  className={cn(
                    "rounded-lg border p-3",
                    mapped ? "border-l-4 border-l-green-500 bg-slate-50" : "border-l-4 border-l-amber-400 bg-amber-50/40",
                  )}
                >
                  <div className="mb-3 flex items-center justify-between">
                    <p className="text-sm font-semibold">Underlying</p>
                    <Badge variant={mapped ? "secondary" : "outline"} className={mapped ? "" : "border-amber-300 bg-amber-50 text-amber-800"}>
                      {mapped ? "Mapped" : "Needs mapping"}
                    </Badge>
                  </div>
                  {ocr ? (
                    <div className="mb-3 flex flex-wrap items-center gap-2 rounded border border-dashed border-amber-300 bg-amber-50 px-3 py-2">
                      <span className="text-xs font-semibold text-amber-800">OCR / bank code</span>
                      <code className="rounded border border-amber-300 bg-white px-2 py-1 text-xs">{ocr}</code>
                      <span className="text-muted-foreground">→</span>
                      {accumulatorNeedsMapping(rowDraft) && editingIndex != null ? (
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          className="h-7 border-amber-300 bg-amber-50 text-amber-900"
                          onClick={() => onMapAccumulator(editingIndex, rowDraft)}
                        >
                          Map to ISIN
                        </Button>
                      ) : null}
                    </div>
                  ) : null}
                  <div className="grid gap-3 md:grid-cols-2">
                    <div className="grid gap-1">
                      <label className="text-xs font-medium text-muted-foreground">Real ISIN (to save)</label>
                      <Input
                        value={editRow.UnderlyingISIN ?? ""}
                        onChange={(event) =>
                          onEditRowChange((prev) => ({ ...prev, UnderlyingISIN: event.target.value.toUpperCase() }))
                        }
                      />
                    </div>
                    <div className="grid gap-1">
                      <label className="text-xs font-medium text-muted-foreground">Name</label>
                      <Input
                        value={editRow.UnderlyingName ?? ""}
                        onChange={(event) =>
                          onEditRowChange((prev) => ({ ...prev, UnderlyingName: event.target.value }))
                        }
                      />
                    </div>
                  </div>
                </div>
              </div>
            )
          })() : null}

          {module === "structure" ? (
            <div className="space-y-3">
              <div>
                <p className="text-sm font-semibold">Underlyings</p>
                <p className="text-xs text-muted-foreground">
                  Orange panel = OCR code not yet mapped. Green = real ISIN resolved.
                </p>
              </div>
              <div className="space-y-3">
                {UNDERLYING_SLOTS.map((slot) => {
                  const rowDraft: StructureQueueRow = editRow
                  const hasData = underlyingSlotHasData(rowDraft, slot)
                  const mapped = hasData && !needsMapping(rowDraft, slot)
                  const ocr = getOcrCodeForSlot(rowDraft, slot)
                  if (!hasData) return null

                  return (
                    <div
                      key={`edit-u-${slot}`}
                      className={cn(
                        "rounded-lg border p-3",
                        mapped ? "border-l-4 border-l-green-500 bg-slate-50" : "border-l-4 border-l-amber-400 bg-amber-50/40",
                      )}
                    >
                      <div className="mb-3 flex items-center justify-between">
                        <p className="text-sm font-semibold">Underlying {slot}</p>
                        <Badge variant={mapped ? "secondary" : "outline"} className={mapped ? "" : "border-amber-300 bg-amber-50 text-amber-800"}>
                          {mapped ? "Mapped" : "Needs mapping"}
                        </Badge>
                      </div>
                      {ocr ? (
                        <div className="mb-3 flex flex-wrap items-center gap-2 rounded border border-dashed border-amber-300 bg-amber-50 px-3 py-2">
                          <span className="text-xs font-semibold text-amber-800">OCR / bank code</span>
                          <code className="rounded border border-amber-300 bg-white px-2 py-1 text-xs">{ocr}</code>
                          <span className="text-muted-foreground">→</span>
                          {needsMapping(rowDraft, slot) && editingIndex != null ? (
                            <Button
                              type="button"
                              variant="outline"
                              size="sm"
                              className="h-7 border-amber-300 bg-amber-50 text-amber-900"
                              onClick={() => onMapStructure(editingIndex, slot, rowDraft)}
                            >
                              Map to ISIN
                            </Button>
                          ) : null}
                        </div>
                      ) : null}
                      <div className="grid gap-3 md:grid-cols-2">
                        <div className="grid gap-1">
                          <label className="text-xs font-medium text-muted-foreground">Real ISIN (to save)</label>
                          <Input
                            value={editRow[`underlying${slot}_isin`] ?? ""}
                            onChange={(event) =>
                              onEditRowChange((prev) => ({ ...prev, [`underlying${slot}_isin`]: event.target.value.toUpperCase() }))
                            }
                          />
                        </div>
                        <div className="grid gap-1">
                          <label className="text-xs font-medium text-muted-foreground">Name</label>
                          <Input
                            value={editRow[`underlying${slot}_name`] ?? ""}
                            onChange={(event) =>
                              onEditRowChange((prev) => ({ ...prev, [`underlying${slot}_name`]: event.target.value }))
                            }
                          />
                        </div>
                        <div className="grid gap-1">
                          <label className="text-xs font-medium text-muted-foreground">Currency</label>
                          <Input
                            value={editRow[`underlying${slot}_currency`] ?? ""}
                            onChange={(event) =>
                              onEditRowChange((prev) => ({ ...prev, [`underlying${slot}_currency`]: event.target.value }))
                            }
                          />
                        </div>
                        <div className="grid gap-1">
                          <label className="text-xs font-medium text-muted-foreground">Spot</label>
                          <Input
                            value={editRow[`underlying${slot}_spot`] ?? ""}
                            onChange={(event) =>
                              onEditRowChange((prev) => ({ ...prev, [`underlying${slot}_spot`]: event.target.value }))
                            }
                          />
                        </div>
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>
          ) : null}

          {module === "structure" ? (
            <div className="space-y-3">
              <h3 className="text-sm font-semibold">Observations</h3>
              {editObs.map((row, idx) => (
                <div key={`obs-${idx}`} className="grid grid-cols-3 gap-2">
                  <Input
                    value={row.date}
                    onChange={(e) =>
                      onEditObsChange((prev) => prev.map((v, i) => (i === idx ? { ...v, date: e.target.value } : v)))
                    }
                    placeholder="YYYY-MM-DD"
                  />
                  <Input
                    value={row.nonCall}
                    onChange={(e) =>
                      onEditObsChange((prev) => prev.map((v, i) => (i === idx ? { ...v, nonCall: e.target.value } : v)))
                    }
                    placeholder="Y/N"
                  />
                  <Button variant="outline" onClick={() => onEditObsChange((prev) => prev.filter((_, i) => i !== idx))}>
                    Remove
                  </Button>
                </div>
              ))}
              <Button variant="outline" onClick={() => onEditObsChange((prev) => [...prev, { date: "", nonCall: "N" }])}>
                Add observation
              </Button>

              <h3 className="text-sm font-semibold">Coupons</h3>
              {editCoupons.map((row, idx) => (
                <div key={`coupon-${idx}`} className="grid grid-cols-2 gap-2">
                  <Input
                    value={row.date}
                    onChange={(e) =>
                      onEditCouponsChange((prev) => prev.map((v, i) => (i === idx ? { ...v, date: e.target.value } : v)))
                    }
                    placeholder="YYYY-MM-DD"
                  />
                  <Button variant="outline" onClick={() => onEditCouponsChange((prev) => prev.filter((_, i) => i !== idx))}>
                    Remove
                  </Button>
                </div>
              ))}
              <Button variant="outline" onClick={() => onEditCouponsChange((prev) => [...prev, { date: "" }])}>
                Add coupon
              </Button>
            </div>
          ) : null}

          {module === "accumulator" ? (
            <div className="space-y-3">
              <h3 className="text-sm font-semibold">Child rows</h3>
              {editAccRows.map((row, idx) => (
                <div key={`acc-${idx}`} className="grid grid-cols-3 gap-2">
                  <Input
                    value={row.date}
                    onChange={(e) =>
                      onEditAccRowsChange((prev) =>
                        prev.map((v, i) => (i === idx ? { ...v, date: e.target.value } : v)),
                      )
                    }
                    placeholder="YYYY-MM-DD"
                  />
                  <Input
                    value={row.quantityPerPeriod}
                    onChange={(e) =>
                      onEditAccRowsChange((prev) =>
                        prev.map((v, i) => (i === idx ? { ...v, quantityPerPeriod: e.target.value } : v)),
                      )
                    }
                    placeholder="QuantityPerPeriod"
                  />
                  <Button variant="outline" onClick={() => onEditAccRowsChange((prev) => prev.filter((_, i) => i !== idx))}>
                    Remove
                  </Button>
                </div>
              ))}
              <Button
                variant="outline"
                onClick={() => onEditAccRowsChange((prev) => [...prev, { date: "", quantityPerPeriod: "" }])}
              >
                Add child row
              </Button>
            </div>
          ) : null}

          <div className="flex justify-end gap-2">
            <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
            <Button onClick={onSave} disabled={isSubmitting}>
              {isSubmitting ? <Loader2 className="size-4 animate-spin" /> : null}
              Save
            </Button>
          </div>
        </div>
      </SheetContent>
    </Sheet>
  )
}