import { X, ExternalLink, Trash2 } from "lucide-react";
import { resolveFileUrl } from "@/components/datatable/liststock/columns";
import { formatDisplay, formatNumeric } from "@/lib/common/format-utils";

export interface RecordModalProps<T> {
  record: T;
  onClose: () => void;
  onEdit: () => void;
  onDelete?: () => void;
  title: string;
  subtitle?: string;
  metrics: Array<{
    label: string;
    value: string;
    colorClass?: string;
  }>;
  detailItems: Array<{
    label: string;
    value: string;
  }>;
  lastUpdated?: string;
}

export function RecordModal<T extends { uid?: string; t_date?: string }>({
  record,
  onClose,
  onEdit,
  onDelete,
  title,
  subtitle,
  metrics,
  detailItems,
  lastUpdated,
}: RecordModalProps<T>) {
  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">
              {title}
            </p>
            <h2 className="mt-1 text-2xl font-semibold text-slate-800">{subtitle || "—"}</h2>
            {(record.uid || (record as any).uid1) && (
              <p className="mt-1 text-xs font-medium text-slate-500">
                Ref #{record.uid || (record as any).uid1 || "—"}
                {(record as any).bank_id ? ` · ${(record as any).bank_id}` : ""}
                {(record as any).r_no ? ` · Bank ref ${(record as any).r_no}` : ""}
                {(record as any).f_type && !(record as any).bank_id ? ` · ${(record as any).f_type}` : ""}
              </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">
            {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 || "text-slate-800"}`}
                >
                  {metric.value}
                </p>
              </div>
            ))}
          </div>

          <div className="mt-6 grid gap-5 sm:grid-cols-2">
            {detailItems.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: {lastUpdated || 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>
            {onDelete && (
              <button
                type="button"
                onClick={onDelete}
                className="inline-flex items-center gap-2 rounded-lg border border-red-200 bg-white px-3 py-2 text-xs font-semibold text-red-600 shadow-sm transition-all hover:-translate-y-0.5 hover:border-red-500 hover:bg-red-50 hover:text-red-700"
              >
                <Trash2 className="h-4 w-4" />
                Delete
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

// Export formatting utilities for convenience
export { formatDisplay, formatNumeric };