"use client"

import { isApiSuccess } from "@/lib/api-messages";
import { toastApiError } from "@/lib/toast-api-error";
import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Link2, Plus, Trash2 } from "lucide-react"
import { toast } from "sonner"

import { FormPageHeader, FormSaveBar } from "@/app/dashboard/_components/form"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { requestDashboardApi } from "@/lib/dashboard-api-client"

import { LIST_HREF } from "../_components/constants"
import type { UnderlyingAliasFormValues } from "../_components/underlying-alias-form/schema"

const SUBMIT_HREF = "/dashboard/master-table/underlying-alias/bulk-add/submit"

const emptyRow = (): UnderlyingAliasFormValues => ({
  aliasCode: "",
  aliasIsin: "",
  aliasSource: "",
})

export function UnderlyingAliasBulkAddForm() {
  const router = useRouter()
  const [rows, setRows] = useState<UnderlyingAliasFormValues[]>([
    emptyRow(),
    emptyRow(),
    emptyRow(),
  ])
  const [isSaving, setIsSaving] = useState(false)

  const updateRow = (index: number, patch: Partial<UnderlyingAliasFormValues>) => {
    setRows((prev) => {
      const next = [...prev]
      next[index] = { ...next[index]!, ...patch }
      return next
    })
  }

  const onSave = async () => {
    const valid = rows.filter((row) => row.aliasCode.trim() && row.aliasIsin.trim())
    if (!valid.length) {
      toast.error("Add at least one row with alias code and real ISIN.")
      return
    }

    setIsSaving(true)
    try {
      const data = await requestDashboardApi<{ status?: string; message?: string }>({
        url: SUBMIT_HREF,
        method: "POST",
        body: { rows: valid },
        fallbackError: "Bulk add failed.",
        validate: (payload) => isApiSuccess(payload),
      })
      toast.success(data.message ?? "Bulk add completed.")
      router.push(LIST_HREF)
      router.refresh()
    } catch (error) {
      toastApiError(error, "Bulk add failed.")
    } finally {
      setIsSaving(false)
    }
  }

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault()
        void onSave()
      }}
      className="pb-4"
    >
      <FormPageHeader
        backHref={LIST_HREF}
        breadcrumb={[
          { label: "Master Table" },
          { label: "Underlying Alias", href: LIST_HREF },
          { label: "Bulk add" },
        ]}
        titleIcon={<Link2 className="size-5 text-primary" />}
        title="Bulk add underlying aliases"
        description="Add multiple OCR/bank code to ISIN mappings in one save."
      />

      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Alias code</TableHead>
              <TableHead>Real ISIN</TableHead>
              <TableHead>Alias source</TableHead>
              <TableHead className="w-16" />
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.map((row, index) => (
              <TableRow key={`bulk-row-${index}`}>
                <TableCell>
                  <Input
                    value={row.aliasCode}
                    onChange={(event) => updateRow(index, { aliasCode: event.target.value })}
                    placeholder="OCR / bank code"
                  />
                </TableCell>
                <TableCell>
                  <Input
                    value={row.aliasIsin}
                    onChange={(event) => updateRow(index, { aliasIsin: event.target.value.toUpperCase() })}
                    placeholder="Real ISIN"
                    className="font-mono"
                  />
                </TableCell>
                <TableCell>
                  <Input
                    value={row.aliasSource}
                    onChange={(event) => updateRow(index, { aliasSource: event.target.value })}
                    placeholder="Bloomberg, BNP..."
                  />
                </TableCell>
                <TableCell>
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon-sm"
                    onClick={() => setRows((prev) => (prev.length <= 1 ? prev : prev.filter((_, i) => i !== index)))}
                  >
                    <Trash2 className="size-4" />
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      <div className="mt-3 flex flex-wrap gap-2">
        <Button type="button" variant="outline" size="sm" onClick={() => setRows((prev) => [...prev, emptyRow(), emptyRow()])}>
          <Plus className="size-4" />
          Add more rows
        </Button>
        <Button type="button" variant="outline" size="sm" asChild>
          <Link href={LIST_HREF}>Cancel</Link>
        </Button>
      </div>

      <FormSaveBar saveLabel="Save all" isSaving={isSaving} onSave={() => void onSave()} />
    </form>
  )
}