import type { WidgetItem, AllocationSlice } from "@/types/dashboard";
import { AllocationChart, DEFAULT_CHART_HEIGHT } from "./AllocationChart";

export interface WidgetModalProps {
  widget: WidgetItem;
  allocationData: AllocationSlice[] | null;
  allocationError: string | null;
  allocationLoading?: boolean;
  modalChartData: AllocationSlice[];
  currency?: string;
  piePalette: string[];
  onClose: () => void;
}

export function WidgetModal({
  widget,
  allocationError,
  allocationLoading = false,
  modalChartData,
  currency,
  piePalette,
  onClose,
}: WidgetModalProps) {
  const isAssetAllocation = widget.file_path === "asset_allocation";
  const chartTitle = isAssetAllocation ? "Asset allocation" : "Category coverage";
  const showError = Boolean(allocationError && isAssetAllocation);
  const hasChartData = modalChartData.length > 0;
  const showAllocationChartPanel =
    !isAssetAllocation || allocationLoading || showError || hasChartData;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4 backdrop-blur-sm animate-[fadeIn_0.3s_ease-in-out]"
      role="dialog"
      aria-modal
      aria-labelledby="widget-modal-title"
    >
      <div className="relative w-full max-w-3xl rounded-lg border border-slate-200 bg-white p-6 shadow-2xl animate-[fadeIn_0.3s_ease-in-out,slideDown_0.3s_ease-in-out]">
        <div className="flex items-start justify-between">
          <div>
            <p className="text-xs uppercase tracking-[0.25em] text-slate-500">
              Widget
            </p>
            <h2 id="widget-modal-title" className="text-2xl font-semibold text-slate-900">
              {widget.name}
            </h2>
            <p className="text-sm text-slate-600">
              Category {widget.category_id} · Status {widget.status} · Priority{" "}
              {widget.priority ?? "—"}
            </p>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="rounded-lg bg-slate-100 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-slate-700 ring-1 ring-slate-200 hover:bg-slate-200"
            aria-label="Close modal"
          >
            Close
          </button>
        </div>

        <div
          className={`mt-4 grid grid-cols-1 gap-4 ${showAllocationChartPanel ? "lg:grid-cols-2" : ""}`}
        >
          <WidgetSummarySection widget={widget} />
          {showAllocationChartPanel && (
            <div className="rounded-lg border border-slate-200 bg-white p-3">
              <p className="text-[11px] uppercase tracking-[0.25em] text-slate-500">
                {chartTitle}
              </p>
              <div className="mt-2">
                {isAssetAllocation && allocationLoading ? (
                  <div className="flex h-56 items-center justify-center rounded-lg bg-slate-50 text-xs text-slate-500">
                    Loading chart…
                  </div>
                ) : showError ? (
                  <div className="flex h-56 items-center justify-center rounded-lg bg-amber-50 text-xs text-amber-700">
                    {allocationError}
                  </div>
                ) : !hasChartData ? (
                  <div className="flex h-56 flex-col items-center justify-center rounded-lg bg-slate-50 text-xs text-slate-500">
                    <p>No chart data available.</p>
                  </div>
                ) : (
                  <AllocationChart
                    slices={modalChartData}
                    currency={currency}
                    piePalette={piePalette}
                    height={DEFAULT_CHART_HEIGHT}
                  />
                )}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function WidgetSummarySection({ widget }: { widget: WidgetItem }) {
  return (
    <div className="rounded-lg border border-slate-200 bg-slate-50 p-3">
      <p className="text-[11px] uppercase tracking-[0.25em] text-slate-500">
        Summary
      </p>
      <dl className="mt-2 grid grid-cols-2 gap-3 text-sm text-slate-700">
        <div>
          <dt className="text-xs text-slate-500">File</dt>
          <dd className="font-semibold">{widget.file_path || "—"}</dd>
        </div>
        <div>
          <dt className="text-xs text-slate-500">Added</dt>
          <dd className="font-semibold">
            {new Date(widget.date_added).toLocaleDateString()}
          </dd>
        </div>
        <div>
          <dt className="text-xs text-slate-500">ISIN</dt>
          <dd className="font-semibold">{widget.isin || "—"}</dd>
        </div>
        <div>
          <dt className="text-xs text-slate-500">Description</dt>
          <dd className="text-slate-600">
            {widget.short_description || "No description provided."}
          </dd>
        </div>
      </dl>
    </div>
  );
}