import { StandardizedPieChart } from "@/components/ui/StandardizedPieChart";
import { WidgetItem, AllocationSlice } from "@/types/dashboard";
import { formatMoney } from "@/utils/dashboard-utils";

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

export function WidgetModal({
  widget,
  allocationData,
  allocationError,
  modalChartData,
  currency,
  piePalette,
  onClose,
}: WidgetModalProps) {
  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]">
      <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>
            <h3 className="text-2xl font-semibold text-slate-900">{widget.name}</h3>
            <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"
          >
            Close
          </button>
        </div>

        <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
          <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>

          <div className="rounded-lg border border-slate-200 bg-white p-3">
            <div className="flex items-center justify-between">
              <p className="text-[11px] uppercase tracking-[0.25em] text-slate-500">
                {widget.file_path === "asset_allocation"
                  ? "Asset allocation"
                  : "Category coverage"}
              </p>
            </div>
            <div className="mt-2">
              {allocationError && widget.file_path === "asset_allocation" ? (
                <div className="flex h-56 items-center justify-center rounded-lg bg-amber-50 text-xs text-amber-700">
                  {allocationError}
                </div>
              ) : modalChartData.length === 0 ? (
                <div className="flex h-[400px] flex-col items-center justify-center rounded-lg bg-slate-50 text-xs text-slate-500">
                  <p className="mb-2">No chart data available.</p>
                  {allocationError && (
                    <p className="text-amber-600">Error: {allocationError}</p>
                  )}
                </div>
              ) : (
                <div className="grid gap-4 md:grid-cols-[1.2fr_1fr]">
                  <div className="h-[400px] min-w-0">
                    <StandardizedPieChart
                      data={modalChartData.map((entry, index) => ({
                        name: entry.label,
                        value: entry.value,
                        color: piePalette[index % piePalette.length],
                      }))}
                      height={400}
                      innerRadius={80}
                      outerRadius={140}
                      dataKey="value"
                      nameKey="name"
                      paddingAngle={0}
                      currency={currency}
                    />
                  </div>
                  <div className="min-w-0 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
                    <p className="text-[11px] uppercase tracking-[0.25em] text-slate-500">
                      Breakdown
                    </p>
                    <div className="mt-2 space-y-2 text-sm text-slate-700">
                      {modalChartData.map((slice) => (
                        <div
                          key={slice.label}
                          className="flex items-center justify-between"
                        >
                          <span className="line-clamp-1">{slice.label}</span>
                          <span className="font-semibold">
                            {currency
                              ? formatMoney(slice.value, currency)
                              : slice.value.toLocaleString()}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}