"use client"

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

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"

import type { MapModalState } from "./deepdex-upload-queue-review-types"

export function DeepdexUploadQueueReviewMapDialog({
  mapModal,
  onMapModalChange,
  aliasSourceSuggestions,
  mapError,
  isSubmitting,
  onSave,
  onClose,
}: {
  mapModal: MapModalState | null
  onMapModalChange: React.Dispatch<React.SetStateAction<MapModalState | null>>
  aliasSourceSuggestions: string[]
  mapError: string | null
  isSubmitting: boolean
  onSave: () => void
  onClose: () => void
}) {
  return (
    <Dialog open={mapModal != null} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>{mapModal?.isNewMapping ? "Add new underlying" : "Map unknown underlying"}</DialogTitle>
          <DialogDescription>
            {mapModal?.isNewMapping
              ? "Enter the OCR/bank code and real ISIN, then optionally add name, currency, and spot."
              : "Save this OCR/bank code to real ISIN mapping and apply it to the current row."}
          </DialogDescription>
        </DialogHeader>
        {mapModal ? (
          <div className="space-y-4">
            <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3">
              <div className="rounded-lg border bg-slate-50 p-3 text-center">
                <p className="text-[11px] text-muted-foreground">OCR / bank code</p>
                {mapModal.isNewMapping ? (
                  <Input
                    className="mt-2 text-center font-semibold"
                    value={mapModal.aliasCode}
                    onChange={(event) => onMapModalChange((prev) => prev ? { ...prev, aliasCode: event.target.value } : prev)}
                    placeholder="e.g. VST UN EQUITY"
                  />
                ) : (
                  <code className="mt-2 block break-all text-sm font-semibold">{mapModal.aliasCode || "—"}</code>
                )}
              </div>
              <span className="text-lg text-muted-foreground">→</span>
              <div className="rounded-lg border border-sky-200 bg-sky-50 p-3 text-center">
                <p className="text-[11px] text-muted-foreground">Real ISIN</p>
                <Input
                  className="mt-2 text-center font-semibold"
                  value={mapModal.aliasIsin}
                  onChange={(event) => onMapModalChange((prev) => prev ? { ...prev, aliasIsin: event.target.value.toUpperCase() } : prev)}
                  placeholder="e.g. DE0006231004"
                />
              </div>
            </div>

            <div className="grid gap-1">
              <label className="text-xs font-medium text-muted-foreground">Alias source *</label>
              <Input
                list="alias-source-suggestions"
                value={mapModal.aliasSource}
                onChange={(event) => onMapModalChange((prev) => prev ? { ...prev, aliasSource: event.target.value } : prev)}
                placeholder="e.g. Bloomberg, BNP"
              />
              <datalist id="alias-source-suggestions">
                {aliasSourceSuggestions.map((value) => (
                  <option key={value} value={value} />
                ))}
              </datalist>
            </div>

            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                checked={mapModal.showDetails}
                onChange={(event) => onMapModalChange((prev) => prev ? { ...prev, showDetails: event.target.checked } : prev)}
              />
              {mapModal.mode === "accumulator"
                ? "Add underlying name"
                : "Add underlying details (name, currency, spot)"}
            </label>

            {mapModal.showDetails ? (
              <div className="grid gap-3 md:grid-cols-2">
                <div className="md:col-span-2 grid gap-1">
                  <label className="text-xs font-medium text-muted-foreground">Name</label>
                  <Input
                    value={mapModal.underlyingName}
                    onChange={(event) => onMapModalChange((prev) => prev ? { ...prev, underlyingName: event.target.value } : prev)}
                  />
                </div>
                {mapModal.mode === "structure" ? (
                  <>
                    <div className="grid gap-1">
                      <label className="text-xs font-medium text-muted-foreground">Currency</label>
                      <Input
                        value={mapModal.underlyingCurrency}
                        onChange={(event) => onMapModalChange((prev) => prev ? { ...prev, underlyingCurrency: event.target.value } : prev)}
                        placeholder="EUR"
                      />
                    </div>
                    <div className="grid gap-1">
                      <label className="text-xs font-medium text-muted-foreground">Spot</label>
                      <Input
                        value={mapModal.underlyingSpot}
                        onChange={(event) => onMapModalChange((prev) => prev ? { ...prev, underlyingSpot: event.target.value } : prev)}
                      />
                    </div>
                  </>
                ) : null}
              </div>
            ) : null}

            {mapError ? <p className="text-sm text-destructive">{mapError}</p> : null}
          </div>
        ) : null}
        <DialogFooter>
          <Button variant="outline" onClick={onClose}>Cancel</Button>
          <Button onClick={onSave} disabled={isSubmitting}>
            {isSubmitting ? <Loader2 className="size-4 animate-spin" /> : null}
            Save mapping
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}