"use client";

import { DataTable } from "@/components/datatable/data-table";
import { PageHeader } from "@/components/ui/PageHeader";
import { resolveFileUrl } from "@/components/datatable/liststock/columns";
import { ExternalLink, Plus, RefreshCw, X } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import {
  AlternativeInvestment,
  createOtherAssetColumns,
} from "@/components/datatable/listotherassets/columns";

export default function ListOtherAssets() {
  const router = useRouter();
  const [data, setData] = useState<AlternativeInvestment[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedRecord, setSelectedRecord] = useState<AlternativeInvestment | null>(null);
  const [showModal, setShowModal] = useState(false);

  const loadData = async () => {
    setLoading(true);
    try {
      // Use Next.js API route instead of direct backend call to avoid CORS
      const res = await fetch("/api/hedgefund", {
        method: "GET",
        credentials: "include",
      });

      if (!res.ok) {
        const detail = await res.text();
        throw new Error(`Failed to fetch summary (${res.status}): ${detail}`);
      }

      const json = await res.json();

      setData(json.data || []); // adjust based on API response
    } catch (error) {
      console.error("Fetch error:", error);
      setData([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadData();
  }, []);

  const handleView = useCallback((record: AlternativeInvestment) => {
    setSelectedRecord(record);
    setShowModal(true);
  }, []);

  const closeModal = useCallback(() => {
    setSelectedRecord(null);
    setShowModal(false);
  }, []);

  const otherAssetColumns = useMemo(
    () =>
      createOtherAssetColumns({
        onView: handleView,
      }),
    [handleView]
  );

  const handleRedirect = () => {
    setLoading(true);
    setTimeout(() => {
      router.push("/alternativeinvest/otherassets/form");
    }, 300);
  };

  const actionButtonClass = (disabled: boolean) =>
    disabled
      ? "inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-gray-100 px-2 py-1 text-xs font-medium text-gray-500 shadow-sm transition-all duration-200 cursor-not-allowed"
      : "inline-flex items-center gap-1 rounded-lg border border-[#428B4D]/40 bg-white px-2 py-1 text-xs font-semibold text-slate-700 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-[#428B4D] hover:bg-[#428B4D] hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-[#428B4D]/40 active:scale-95";

  return (
    <div className="container mx-auto px-4 mt-6">
      <PageHeader
        title="Other Assets"
        description="Oversee hedge funds and alternative investments with a unified view."
        breadcrumbs={[
          { label: "Home", href: "/" },
          { label: "Alternative Investments" },
          { label: "Other Assets" },
        ]}
        actions={
          <>
            <button
              onClick={handleRedirect}
              disabled={loading}
              className={actionButtonClass(loading)}
            >
              <Plus size={18} />
              {loading ? "Loading..." : "Add Asset"}
            </button>

            <button
              onClick={loadData}
              disabled={loading}
              className={actionButtonClass(loading)}
            >
              <RefreshCw size={16} className={loading ? "animate-spin" : ""} />
              {loading ? "Refreshing..." : "Refresh"}
            </button>
          </>
        }
      />

      <div className="rounded-lg">
        <DataTable columns={otherAssetColumns} data={data} />
      </div>

      {showModal && selectedRecord && (
        <OtherAssetDetailModal
          record={selectedRecord}
          onClose={closeModal}
          onEdit={() =>
            router.push(
              `/alternativeinvest/otherassets/form?id=${encodeURIComponent(
                selectedRecord.id ?? selectedRecord.uid,
              )}`,
            )
          }
        />
      )}
    </div>
  );
}

const formatNumeric = (value?: string | null) => {
  if (!value) return "—";
  const normalized = value.replace(/,/g, "").trim();
  if (!normalized) return "—";
  const parsed = Number.parseFloat(normalized);
  if (Number.isFinite(parsed)) {
    return parsed.toLocaleString("en-US", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });
  }
  return value;
};

const formatDisplay = (value?: string | null) => {
  if (!value) return "—";
  const trimmed = value.toString().trim();
  return trimmed.length > 0 ? trimmed : "—";
};

const getDetailItems = (record: AlternativeInvestment) => [
  { label: "Placement Date", value: formatDisplay(record.t_date) },
  { label: "Bank", value: formatDisplay(record.bank_id) },
  { label: "Execution Type", value: formatDisplay(record.e_t) },
  { label: "Transaction Type", value: formatDisplay(record.t_o_t) },
  { label: "Currency", value: formatDisplay(record.purchase_currency_code) },
  { label: "Asset Type", value: formatDisplay(record.asset_type_t) },
];

const OtherAssetDetailModal = ({
  record,
  onClose,
  onEdit,
}: {
  record: AlternativeInvestment;
  onClose: () => void;
  onEdit: () => void;
}) => {
  const fileUrl = resolveFileUrl(record as any);

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 px-4 py-6 backdrop-blur-sm"
      onClick={onClose}
    >
      <div
        className="relative w-full max-w-3xl overflow-hidden rounded-lg border border-white/30 bg-white/95 shadow-2xl ring-1 ring-black/10"
        onClick={(event) => event.stopPropagation()}
      >
        <div className="absolute -right-20 -top-24 h-48 w-48 rounded-lg bg-[#428B4D]/10 blur-3xl" />
        <div className="absolute -bottom-24 -left-16 h-48 w-48 rounded-lg bg-[#428B4D]/15 blur-3xl" />

        <div className="relative flex items-start justify-between border-b border-slate-100 bg-gradient-to-r from-[#428B4D]/5 via-white to-white px-6 py-5">
          <div>
            <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
              Other asset overview
            </p>
            <h2 className="mt-1 text-2xl font-semibold text-slate-800">
              {record.ticker || "—"}
              {record.isin ? (
                <span className="ml-2 text-sm font-medium text-slate-500">{record.isin}</span>
              ) : null}
            </h2>
            <p className="mt-1 text-xs font-medium text-slate-500">
              Ref #{record.uid || "—"} · {record.asset_type_t || "—"}
            </p>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="rounded-lg border border-slate-200 bg-white/70 p-2 text-slate-400 shadow-sm transition hover:-translate-y-0.5 hover:border-red-300 hover:bg-red-50 hover:text-red-500"
            aria-label="Close modal"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        <div className="relative px-6 pb-6 pt-5">
          <div className="grid gap-4 sm:grid-cols-3">
            {[
              {
                label: "Total Amount",
                value: formatNumeric(record.amount),
              },
              {
                label: "Placement Date",
                value: formatDisplay(record.t_date),
              },
              {
                label: "Transaction Type",
                value: formatDisplay(record.t_o_t),
              },
            ].map((metric) => {
              const isAmount = metric.label === "Total Amount";
              const amountValue = isAmount ? record.amount : null;
              let amountColor = "";
              if (amountValue) {
                const normalized = amountValue.replace(/,/g, "").trim();
                const parsed = Number.parseFloat(normalized);
                if (Number.isFinite(parsed)) {
                  amountColor = parsed >= 0 ? "text-green-600" : "text-red-600";
                }
              }
              return (
                <div
                  key={metric.label}
                  className="rounded-lg border border-white/80 bg-slate-50/80 px-4 py-4 text-sm shadow-inner"
                >
                  <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
                    {metric.label}
                  </p>
                  <p className={`mt-1 text-lg font-semibold ${amountColor || "text-slate-800"}`}>
                    {metric.value}
                  </p>
                </div>
              );
            })}
          </div>

          <div className="mt-6 grid gap-5 sm:grid-cols-2">
            {getDetailItems(record).map((item) => (
              <div
                key={item.label}
                className="rounded-lg border border-slate-100 bg-white/80 px-4 py-3 shadow-sm"
              >
                <p className="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
                  {item.label}
                </p>
                <p className="mt-1 text-sm font-medium text-slate-700">{item.value}</p>
              </div>
            ))}
          </div>
        </div>

        <div className="flex flex-col gap-3 border-t border-slate-100 bg-slate-50/60 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
          <div className="text-xs font-medium uppercase tracking-wide text-slate-400">
            Last updated: {formatDisplay(record.t_date)}
          </div>
          <div className="flex flex-wrap items-center gap-2">
            {fileUrl ? (
              <a
                href={fileUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 rounded-lg border border-[#428B4D]/40 bg-white px-3 py-2 text-xs font-semibold text-[#428B4D] shadow-sm transition-all hover:-translate-y-0.5 hover:border-[#428B4D] hover:bg-[#428B4D] hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-[#428B4D]/40"
              >
                <ExternalLink className="h-4 w-4" />
                View Document
              </a>
            ) : null}
            <button
              type="button"
              onClick={onEdit}
              className="inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-600 shadow-sm transition-all hover:-translate-y-0.5 hover:border-[#428B4D] hover:bg-[#428B4D]/10 hover:text-[#428B4D]"
            >
              Edit Record
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};