import { X, ExternalLink } from "lucide-react";
import { AlternativeInvestment } from "@/components/datatable/listotherassets/columns";
import { resolveFileUrl } from "@/components/datatable/liststock/columns";
import { formatNumeric, formatDisplay, getAmountColor } from "@/lib/common";
import { BUTTON_STYLES } from "@/constants/button-styles";

interface OtherAssetDetailModalProps {
  record: AlternativeInvestment;
  onClose: () => void;
  onEdit: () => void;
}

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) },
];

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

  const metrics = [
    {
      label: "Total Amount",
      value: formatNumeric(record.amount),
      colorClass: getAmountColor(record.amount),
    },
    {
      label: "Placement Date",
      value: formatDisplay(record.t_date),
      colorClass: "text-slate-800",
    },
    {
      label: "Transaction Type",
      value: formatDisplay(record.t_o_t),
      colorClass: "text-slate-800",
    },
  ];

  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={BUTTON_STYLES.close}
            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">
            {metrics.map((metric) => (
              <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 ${metric.colorClass}`}>
                  {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={BUTTON_STYLES.primary}
              >
                <ExternalLink className="h-4 w-4" />
                View Document
              </a>
            ) : null}
            <button
              type="button"
              onClick={onEdit}
              className={BUTTON_STYLES.secondary}
            >
              Edit Record
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};