"use client";

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

import { FormPageHeader, FormSaveBar } from "@/app/dashboard/_components/form";
import { Button } from "@/components/ui/button";
import { DatePicker } from "@/components/date-range-picker";
import { formDatePickerClass } from "@/components/form/common/form-layout";
import { Input } from "@/components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";
import { requestDashboardApi } from "@/lib/dashboard-api-client";

import { LIST_HREF } from "./constants";
import type { CurrencyConversionBulkRow } from "../_lib/currency-conversion-bulk-api";

const SUBMIT_HREF = "/dashboard/master-table/currency-conversion/bulk-add/submit";

const REQUIRED_FIELDS: Array<{
  key: keyof CurrencyConversionBulkRow;
  label: string;
}> = [
  { key: "isin", label: "ISIN" },
  { key: "name", label: "Name" },
  { key: "fromCurrency", label: "From Currency" },
  { key: "toCurrency", label: "To Currency" },
  { key: "conversionRate", label: "Conversion Rate" },
  { key: "conversionRateCurrency", label: "Conversion Rate Currency" },
];

const emptyRow = (): CurrencyConversionBulkRow => ({
  isin: "",
  name: "",
  fromCurrency: "",
  toCurrency: "",
  conversionRate: "",
  conversionRateCurrency: "",
  dataUpdateDate: "",
  conversionRateDate: "",
});

function isBlankRow(row: CurrencyConversionBulkRow) {
  return Object.values(row).every((value) => !String(value).trim());
}

function validateRow(row: CurrencyConversionBulkRow, rowNumber: number): string | null {
  const missing = REQUIRED_FIELDS.filter(({ key }) => !row[key].trim()).map(
    ({ label }) => label,
  );
  if (!missing.length) return null;
  return `Row ${rowNumber}: ${missing.join(", ")} cannot be blank.`;
}

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

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

  const addMoreRows = () => {
    setRows((prev) => [...prev, emptyRow(), emptyRow(), emptyRow()]);
  };

  const removeRow = (index: number) => {
    setRows((prev) => (prev.length <= 1 ? prev : prev.filter((_, i) => i !== index)));
  };

  const onSave = async () => {
    const candidateRows = rows
      .map((row, index) => ({ row, index }))
      .filter(({ row }) => !isBlankRow(row));

    if (!candidateRows.length) {
      toast.error("Add at least one row with the required fields.");
      return;
    }

    const validationErrors = candidateRows
      .map(({ row, index }) => validateRow(row, index + 1))
      .filter((message): message is string => Boolean(message));

    if (validationErrors.length) {
      toast.error(validationErrors[0]!);
      return;
    }

    const valid = candidateRows.map(({ row }) => row);

    setIsSaving(true);
    try {
      const data = await requestDashboardApi<{ status?: string; message?: string }>({
        url: SUBMIT_HREF,
        method: "POST",
        body: { rows: valid },
        fallbackError: "Currency conversion bulk add failed.",
        validate: (payload) => isApiSuccess(payload),
      });

      toast.success(data.message ?? `Saved ${valid.length} conversion row(s).`);
      router.push(LIST_HREF);
      router.refresh();
    } catch (error) {
      toast.error(
        error instanceof Error
          ? error.message
          : "Currency conversion bulk add failed.",
      );
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <div className="pb-4">
      <FormPageHeader
        backHref={LIST_HREF}
        breadcrumb={[
          { label: "Master Table", href: LIST_HREF },
          { label: "Currency Conversion", href: LIST_HREF },
          { label: "Bulk add" },
        ]}
        titleIcon={<ArrowLeftRight className="size-5 text-primary" />}
        title="Bulk add currency conversions"
        description="Add multiple conversion rows at once. Leave date fields blank to use today."
      />

      <div className="overflow-x-auto rounded-lg border bg-card">
        <Table>
          <TableHeader>
            <TableRow className="bg-muted/40">
              <TableHead className="w-12 px-3">#</TableHead>
              <TableHead className="px-3">
                ISIN <span className="text-destructive">*</span>
              </TableHead>
              <TableHead className="px-3">
                Name <span className="text-destructive">*</span>
              </TableHead>
              <TableHead className="px-3">
                From <span className="text-destructive">*</span>
              </TableHead>
              <TableHead className="px-3">
                To <span className="text-destructive">*</span>
              </TableHead>
              <TableHead className="px-3">
                Rate <span className="text-destructive">*</span>
              </TableHead>
              <TableHead className="px-3">
                Rate CCY <span className="text-destructive">*</span>
              </TableHead>
              <TableHead className="min-w-[140px] px-3">
                Data update date
                <span className="mt-1 block text-[10px] font-normal text-muted-foreground">
                  blank = today
                </span>
              </TableHead>
              <TableHead className="min-w-[140px] px-3">
                Conversion rate date
                <span className="mt-1 block text-[10px] font-normal text-muted-foreground">
                  blank = today
                </span>
              </TableHead>
              <TableHead className="w-10 px-2" />
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.map((row, index) => (
              <TableRow key={index}>
                <TableCell className="px-3 tabular-nums">{index + 1}</TableCell>
                <TableCell className="px-3">
                  <Input
                    className="h-8 font-mono text-sm"
                    value={row.isin}
                    onChange={(e) => updateRow(index, { isin: e.target.value })}
                  />
                </TableCell>
                <TableCell className="px-3">
                  <Input
                    className="h-8"
                    value={row.name}
                    onChange={(e) => updateRow(index, { name: e.target.value })}
                  />
                </TableCell>
                <TableCell className="px-3">
                  <Input
                    className="h-8"
                    value={row.fromCurrency}
                    onChange={(e) =>
                      updateRow(index, { fromCurrency: e.target.value })
                    }
                  />
                </TableCell>
                <TableCell className="px-3">
                  <Input
                    className="h-8"
                    value={row.toCurrency}
                    onChange={(e) => updateRow(index, { toCurrency: e.target.value })}
                  />
                </TableCell>
                <TableCell className="px-3">
                  <Input
                    className="h-8"
                    value={row.conversionRate}
                    onChange={(e) =>
                      updateRow(index, { conversionRate: e.target.value })
                    }
                  />
                </TableCell>
                <TableCell className="px-3">
                  <Input
                    className="h-8"
                    value={row.conversionRateCurrency}
                    onChange={(e) =>
                      updateRow(index, { conversionRateCurrency: e.target.value })
                    }
                  />
                </TableCell>
                <TableCell className="px-3">
                  <DatePicker
                    value={row.dataUpdateDate}
                    onChange={(value) =>
                      updateRow(index, { dataUpdateDate: value })
                    }
                    className={cn(formDatePickerClass, "h-8 min-w-[150px]")}
                  />
                </TableCell>
                <TableCell className="px-3">
                  <DatePicker
                    value={row.conversionRateDate}
                    onChange={(value) =>
                      updateRow(index, { conversionRateDate: value })
                    }
                    className={cn(formDatePickerClass, "h-8 min-w-[150px]")}
                  />
                </TableCell>
                <TableCell className="px-2">
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon-sm"
                    className="size-7"
                    onClick={() => removeRow(index)}
                    disabled={rows.length <= 1}
                    aria-label="Remove row"
                  >
                    <Trash2 className="size-3.5" />
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      <div className="mt-4 flex flex-wrap gap-2">
        <Button
          type="button"
          variant="outline"
          size="sm"
          className="gap-1.5"
          onClick={addMoreRows}
        >
          <Plus className="size-4" />
          Add more rows
        </Button>
      </div>

      <FormSaveBar
        cancelHref={LIST_HREF}
        isSaving={isSaving}
        saveLabel="Save all"
        onSave={() => void onSave()}
      />
    </div>
  );
}