"use client";

import { useMemo, useState, type CSSProperties, type KeyboardEvent } from "react";
import { useShallow } from "zustand/react/shallow";
import NewBadge from "@/uhm/components/editor/NewBadge";
import { normalizeTimelineYearValue } from "@/uhm/lib/utils/timeline";
import { useEditorStore } from "@/uhm/store/editorStore";

type GeometryChoice = {
  id: string;
  label?: string;
  time_start?: unknown;
  time_end?: unknown;
  isTimelineVisible?: boolean;
  isOrphan?: boolean;
  timeStatus?: GeometryTimeStatus;
  timelineStatus?: GeometryTimelineStatus;
  isNew?: boolean;
};

type GeometryTimeStatus = "missing" | "partial" | "complete";
type GeometryTimelineStatus = "off" | "visible" | "filteredOut";
type GeometryRow = Required<Pick<GeometryChoice, "id" | "label" | "isOrphan" | "timeStatus" | "timelineStatus" | "isNew">> & {
  time_start: number | null;
  time_end: number | null;
  isTimelineVisible: boolean;
};

type Props = {
  geometries: GeometryChoice[];
  selectedGeometryId?: string | null;
  selectedGeometryBindingIds: string[];
  onToggleBindGeometryForSelectedGeometry?: (geometryId: string, nextChecked: boolean) => void;
  onFocusGeometry?: (geometryId: string) => void;
};

export default function GeometryBindingPanel({
  geometries,
  selectedGeometryId,
  selectedGeometryBindingIds,
  onToggleBindGeometryForSelectedGeometry,
  onFocusGeometry,
}: Props) {
  const {
    selectedFeatureIds,
    statusText,
    bindingFilterEnabled,
    setGeometryBindingFilterEnabled,
    geometryVisibility,
    setGeometryVisibility,
  } = useEditorStore(
    useShallow((state) => ({
      selectedFeatureIds: state.selectedFeatureIds,
      statusText: state.geoBindingStatus,
      bindingFilterEnabled: state.geometryBindingFilterEnabled,
      setGeometryBindingFilterEnabled: state.setGeometryBindingFilterEnabled,
      geometryVisibility: state.geometryVisibility,
      setGeometryVisibility: state.setGeometryVisibility,
    }))
  );
  const effectiveSelectedGeometryId =
    selectedGeometryId ??
    (selectedFeatureIds.length > 0 ? String(selectedFeatureIds[0]) : null);
  const canBindToggle =
    Boolean(effectiveSelectedGeometryId) && typeof onToggleBindGeometryForSelectedGeometry === "function";
  const canFocusGeometry = typeof onFocusGeometry === "function";

  const [collapsed, setCollapsed] = useState(false);

  const rows = useMemo(() => {
    const cleaned = (geometries || [])
      .filter((g) => g && typeof g.id === "string" && g.id.trim().length > 0)
      .map((g) => ({
        id: g.id.trim(),
        label: (g.label || "").trim(),
        time_start: normalizeTimelineYearValue(g.time_start),
        time_end: normalizeTimelineYearValue(g.time_end),
        isTimelineVisible: Boolean(g.isTimelineVisible),
        isOrphan: Boolean(g.isOrphan),
        timeStatus: resolveTimeStatus(g),
        timelineStatus: resolveTimelineStatus(g),
        isNew: Boolean(g.isNew),
      }));
    cleaned.sort((a, b) => a.id.localeCompare(b.id));
    return cleaned;
  }, [geometries]);

  const bindingSet = useMemo(() => new Set(selectedGeometryBindingIds || []), [selectedGeometryBindingIds]);
  const selectedGeometry = useMemo(() => {
    if (!effectiveSelectedGeometryId) return null;
    return rows.find((g) => g.id === effectiveSelectedGeometryId) || null;
  }, [effectiveSelectedGeometryId, rows]);
  const visibleRows = useMemo(() => {
    return rows
      .filter((g) => g.id !== effectiveSelectedGeometryId)
      .sort((a, b) => {
        const aBound = bindingSet.has(a.id);
        const bBound = bindingSet.has(b.id);
        if (aBound !== bBound) return aBound ? -1 : 1;
        return a.id.localeCompare(b.id);
      });
  }, [bindingSet, effectiveSelectedGeometryId, rows]);
  const summary = useMemo(() => {
    let orphan = 0;
    let missingTime = 0;
    let partialTime = 0;
    let filteredOut = 0;
    let hidden = 0;

    for (const row of rows) {
      if (row.isOrphan) orphan += 1;
      if (row.timeStatus === "missing") missingTime += 1;
      if (row.timeStatus === "partial") partialTime += 1;
      if (row.timelineStatus === "filteredOut") filteredOut += 1;
      if (geometryVisibility[row.id] === false) hidden += 1;
    }

    return {
      total: rows.length,
      orphan,
      missingTime,
      partialTime,
      timeIssues: missingTime + partialTime,
      filteredOut,
      hidden,
    };
  }, [geometryVisibility, rows]);

  const handleFocusKeyDown = (event: KeyboardEvent<HTMLDivElement>, geometryId: string) => {
    if (!canFocusGeometry) return;
    if (event.key !== "Enter" && event.key !== " ") return;
    event.preventDefault();
    onFocusGeometry?.(geometryId);
  };

  const handleFocusGeometry = (geometryId: string) => {
    onFocusGeometry?.(geometryId);
  };

  const toggleGeometryVisibility = (geometryId: string) => {
    setGeometryVisibility((prev) => ({
      ...prev,
      [geometryId]: prev[geometryId] === false,
    }));
  };

  return (
    <div
      style={{
        padding: "10px",
        background: "#0b1220",
        borderRadius: "8px",
        border: "1px solid #1f2937",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px" }}>
        <div style={{ display: "flex",flexDirection: "column", gap: 10, minWidth: 0 }}>
          <div style={{ fontWeight: 700, fontSize: "14px", whiteSpace: "nowrap" }}>Geometry Binding</div>
          <div
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 6,
              userSelect: "none",
            }}
            title={bindingFilterEnabled ? "Đang ẩn geo theo binding" : "Đang hiển thị tất cả geo"}
          >
            <button
              type="button"
              role="switch"
              aria-checked={bindingFilterEnabled}
              aria-label="Toggle geometry binding filter"
              onClick={() => setGeometryBindingFilterEnabled(!bindingFilterEnabled)}
              style={{
                width: 32,
                height: 18,
                padding: 2,
                borderRadius: 999,
                border: bindingFilterEnabled ? "1px solid #38bdf8" : "1px solid #334155",
                background: bindingFilterEnabled ? "rgba(14, 165, 233, 0.32)" : "#111827",
                cursor: "pointer",
                display: "inline-flex",
                alignItems: "center",
                justifyContent: bindingFilterEnabled ? "flex-end" : "flex-start",
                transition: "background 140ms ease, border-color 140ms ease",
              }}
            >
              <span
                style={{
                  width: 12,
                  height: 12,
                  borderRadius: 999,
                  background: bindingFilterEnabled ? "#67e8f9" : "#94a3b8",
                  boxShadow: bindingFilterEnabled ? "0 0 8px rgba(103, 232, 249, 0.45)" : "none",
                  transition: "background 140ms ease, box-shadow 140ms ease",
                }}
              />
            </button>
            <span style={{ fontSize: 12, color: "#94a3b8", whiteSpace: "nowrap" }}>Filter binding</span>
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
          <div style={summaryWrapStyle}>
            <span style={summaryBadgeStyle} title="Total geometry count">all {summary.total}</span>
            {summary.orphan > 0 ? (
              <span style={summaryDangerBadgeStyle} title="Geometry without any bound entity">entity {summary.orphan}</span>
            ) : null}
            {summary.timeIssues > 0 ? (
              <span
                style={summaryWarningBadgeStyle}
                title={`Missing time: ${summary.missingTime}; partial time: ${summary.partialTime}`}
              >
                time {summary.timeIssues}
              </span>
            ) : null}
            {summary.filteredOut > 0 ? (
              <span style={summaryMutedBadgeStyle} title="Geometry filtered out by timeline">out {summary.filteredOut}</span>
            ) : null}
            {summary.hidden > 0 ? (
              <span style={summaryMutedBadgeStyle} title="Geometry hidden manually">hidden {summary.hidden}</span>
            ) : null}
          </div>
          <button
            type="button"
            onClick={() => setCollapsed((v) => !v)}
            style={{
              width: 26,
              height: 26,
              borderRadius: 6,
              border: "1px solid #334155",
              background: "#0b1220",
              color: "#e2e8f0",
              cursor: "pointer",
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              flex: "0 0 auto",
            }}
            title={collapsed ? "Mở panel" : "Thu gọn panel"}
            aria-label={collapsed ? "Mở panel Geometry Binding" : "Thu gọn panel Geometry Binding"}
          >
            {collapsed ? <PlusIcon /> : <MinusIcon />}
          </button>
        </div>
      </div>

      {collapsed ? null : selectedGeometry ? (
        (() => {
          const isHidden = geometryVisibility[selectedGeometry.id] === false;
          const isBound = bindingSet.has(selectedGeometry.id);
          const title = buildGeometryTitle(selectedGeometry, isHidden, isBound);
          return (
        <div
          style={{
            marginTop: 10,
            padding: "8px",
            borderRadius: "6px",
            border:
              "1px solid rgba(59, 130, 246, 0.45)",
            background: "rgba(37, 99, 235, 0.12)",
            cursor: canFocusGeometry ? "pointer" : "default",
            opacity: isHidden ? 0.58 : 1,
            boxShadow: "none",
          }}
          title={title}
          role={canFocusGeometry ? "button" : undefined}
          tabIndex={canFocusGeometry ? 0 : undefined}
          onClick={() => handleFocusGeometry(selectedGeometry.id)}
          onKeyDown={(event) => handleFocusKeyDown(event, selectedGeometry.id)}
        >
          <div
            style={{
              fontSize: 10,
              color: "#93c5fd",
              fontWeight: 900,
              textTransform: "uppercase",
              lineHeight: 1,
              marginBottom: 5,
            }}
          >
            Selected
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
            <GeometryLabel row={selectedGeometry} color="#dbeafe" />
            {selectedGeometry.isNew ? <NewBadge /> : null}
            <button
              type="button"
              title={isHidden ? "Show geometry on map" : "Hide geometry on map"}
              onClick={(event) => {
                event.stopPropagation();
                toggleGeometryVisibility(selectedGeometry.id);
              }}
              style={iconButtonStyle}
              aria-label={isHidden ? `Show geometry ${selectedGeometry.id}` : `Hide geometry ${selectedGeometry.id}`}
            >
              {isHidden ? <EyeOffIcon /> : <EyeIcon />}
            </button>
          </div>
          <StatusChips row={selectedGeometry} isHidden={isHidden} isBound={isBound} />
        </div>
          );
        })()
      ) : null}

      {collapsed ? null : rows.length ? (
        <div style={{ marginTop: "10px", display: "grid", gap: "6px", maxHeight: 250, overflowY: "auto", paddingRight: 4 }}>
          {visibleRows
            .map((g) => {
              const isBound = bindingSet.has(g.id);
              const isHidden = geometryVisibility[g.id] === false;
              const title = buildGeometryTitle(g, isHidden, isBound);
              return (
                <div
                  key={g.id}
                  style={{
                    padding: "8px",
                    borderRadius: "6px",
                    border: isBound
                        ? "1px solid rgba(20, 184, 166, 0.65)"
                        : "1px solid #1f2937",
                    background: isBound
                        ? "rgba(20, 184, 166, 0.12)"
                        : "transparent",
                    display: "flex",
                    alignItems: "center",
                    gap: 10,
                    cursor: canFocusGeometry ? "pointer" : "default",
                    opacity: isHidden ? 0.55 : canBindToggle ? 1 : 0.75,
                    boxShadow: "none",
                  }}
                  title={title}
                  role={canFocusGeometry ? "button" : undefined}
                  tabIndex={canFocusGeometry ? 0 : undefined}
                  onClick={() => handleFocusGeometry(g.id)}
                  onKeyDown={(event) => handleFocusKeyDown(event, g.id)}
                >
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div
                      style={{
                        display: "flex",
                        alignItems: "center",
                        gap: 6,
                        minWidth: 0,
                      }}
                    >
                      <GeometryLabel row={g} />
                      {g.isNew ? <NewBadge /> : null}
                    </div>
                    <StatusChips row={g} isHidden={isHidden} isBound={isBound} />
                  </div>

                  <button
                    type="button"
                    title={isHidden ? "Show geometry on map" : "Hide geometry on map"}
                    onClick={(event) => {
                      event.stopPropagation();
                      toggleGeometryVisibility(g.id);
                    }}
                    style={iconButtonStyle}
                    aria-label={isHidden ? `Show geometry ${g.id}` : `Hide geometry ${g.id}`}
                  >
                    {isHidden ? <EyeOffIcon /> : <EyeIcon />}
                  </button>

                  {canBindToggle ? (
                    <button
                      type="button"
                      title={isBound ? "Unbind from selected geometry" : "Bind to selected geometry"}
                      onClick={(event) => {
                        event.stopPropagation();
                        onToggleBindGeometryForSelectedGeometry!(g.id, !isBound);
                      }}
                      style={{
                        display: "inline-flex",
                        alignItems: "center",
                        justifyContent: "center",
                        width: 22,
                        height: 22,
                        borderRadius: 6,
                        border: "1px solid #334155",
                        background: "#0b1220",
                        cursor: "pointer",
                        flex: "0 0 auto",
                      }}
                      aria-label={
                        isBound
                          ? `Unbind geometry ${g.id} from selected geometry`
                          : `Bind geometry ${g.id} to selected geometry`
                      }
                    >
                      {isBound ? <UnlockIcon /> : <LockIcon />}
                    </button>
                  ) : null}
                </div>
              );
            })}

        </div>
      ) : (
        <div style={{ marginTop: "10px", fontSize: "12px", color: "#94a3b8" }}>
          No geometry yet for this project.
        </div>
      )}

      {collapsed ? null : statusText ? (
        <div style={{ marginTop: 10, fontSize: 12, color: "#93c5fd" }}>
          {statusText}
        </div>
      ) : null}
    </div>
  );
}

function GeometryLabel({ row, color = "#e5e7eb" }: { row: GeometryRow; color?: string }) {
  return (
    <span
      style={{
        fontSize: "12px",
        color,
        fontWeight: 700,
        whiteSpace: "nowrap",
        overflow: "hidden",
        textOverflow: "ellipsis",
      }}
    >
      {row.label || "Geometry"}
    </span>
  );
}

function StatusChips({ row, isHidden, isBound }: { row: GeometryRow; isHidden: boolean; isBound: boolean }) {
  return (
    <div style={statusChipRowStyle}>
      {row.isOrphan ? <span style={dangerBadgeStyle}>no entity</span> : null}
      {row.timeStatus === "missing" ? <span style={dangerBadgeStyle}>no time</span> : null}
      {row.timeStatus === "partial" ? <span style={warningBadgeStyle}>partial time</span> : null}
      {row.timelineStatus === "visible" ? <span style={timelineBadgeStyle}>timeline</span> : null}
      {row.timelineStatus === "filteredOut" ? <span style={mutedBadgeStyle}>out timeline</span> : null}
      {isHidden ? <span style={hiddenBadgeStyle}>hidden</span> : null}
      {isBound ? <span style={boundBadgeStyle}>bound</span> : null}
    </div>
  );
}

function resolveTimeStatus(geometry: GeometryChoice): GeometryTimeStatus {
  if (geometry.timeStatus === "missing" || geometry.timeStatus === "partial" || geometry.timeStatus === "complete") {
    return geometry.timeStatus;
  }

  const hasStart = normalizeTimelineYearValue(geometry.time_start) !== null;
  const hasEnd = normalizeTimelineYearValue(geometry.time_end) !== null;
  if (!hasStart && !hasEnd) return "missing";
  if (!hasStart || !hasEnd) return "partial";
  return "complete";
}

function resolveTimelineStatus(geometry: GeometryChoice): GeometryTimelineStatus {
  if (
    geometry.timelineStatus === "off" ||
    geometry.timelineStatus === "visible" ||
    geometry.timelineStatus === "filteredOut"
  ) {
    return geometry.timelineStatus;
  }

  return geometry.isTimelineVisible ? "visible" : "off";
}

function buildGeometryTitle(row: GeometryRow, isHidden: boolean, isBound: boolean): string {
  const parts = [`ID: ${row.id}`];

  if (row.isOrphan) parts.push("Orphan");
  if (row.timeStatus === "missing") parts.push("Missing time");
  if (row.timeStatus === "partial") parts.push("Partial time");
  if (row.timelineStatus === "visible") parts.push("Timeline visible");
  if (row.timelineStatus === "filteredOut") parts.push("Filtered out by timeline");
  if (isHidden) parts.push("Hidden");
  if (isBound) parts.push("Bound");
  if (row.isNew) parts.push("New");

  return parts.join(" | ");
}

const summaryWrapStyle: CSSProperties = {
  display: "flex",
  alignItems: "center",
  justifyContent: "flex-end",
  gap: 4,
  minWidth: 0,
  flexWrap: "wrap",
};

const baseBadgeStyle: CSSProperties = {
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  flex: "0 0 auto",
  height: 17,
  padding: "0 6px",
  borderRadius: 999,
  fontSize: 10,
  fontWeight: 900,
  lineHeight: 1,
  textTransform: "uppercase",
  letterSpacing: 0,
  whiteSpace: "nowrap",
};

const summaryBadgeStyle: CSSProperties = {
  ...baseBadgeStyle,
  border: "1px solid rgba(148, 163, 184, 0.35)",
  background: "rgba(15, 23, 42, 0.9)",
  color: "#cbd5e1",
};

const summaryDangerBadgeStyle: CSSProperties = {
  ...baseBadgeStyle,
  border: "1px solid rgba(248, 113, 113, 0.5)",
  background: "rgba(127, 29, 29, 0.32)",
  color: "#fecaca",
};

const summaryWarningBadgeStyle: CSSProperties = {
  ...baseBadgeStyle,
  border: "1px solid rgba(250, 204, 21, 0.48)",
  background: "rgba(113, 63, 18, 0.3)",
  color: "#fde68a",
};

const summaryMutedBadgeStyle: CSSProperties = {
  ...baseBadgeStyle,
  border: "1px solid rgba(148, 163, 184, 0.4)",
  background: "rgba(51, 65, 85, 0.32)",
  color: "#cbd5e1",
};

const statusChipRowStyle: CSSProperties = {
  display: "flex",
  alignItems: "center",
  flexWrap: "wrap",
  gap: 4,
  marginTop: 5,
  minHeight: 17,
};

const dangerBadgeStyle: CSSProperties = {
  ...baseBadgeStyle,
  border: "1px solid rgba(248, 113, 113, 0.5)",
  background: "rgba(127, 29, 29, 0.28)",
  color: "#fecaca",
};

const warningBadgeStyle: CSSProperties = {
  ...baseBadgeStyle,
  border: "1px solid rgba(250, 204, 21, 0.5)",
  background: "rgba(113, 63, 18, 0.28)",
  color: "#fde68a",
};

const timelineBadgeStyle: CSSProperties = {
  ...baseBadgeStyle,
  border: "1px solid rgba(34, 197, 94, 0.5)",
  background: "rgba(20, 83, 45, 0.3)",
  color: "#bbf7d0",
};

const mutedBadgeStyle: CSSProperties = {
  ...baseBadgeStyle,
  border: "1px solid rgba(148, 163, 184, 0.45)",
  background: "rgba(71, 85, 105, 0.28)",
  color: "#cbd5e1",
};

const boundBadgeStyle: CSSProperties = {
  ...baseBadgeStyle,
  border: "1px solid rgba(45, 212, 191, 0.5)",
  background: "rgba(20, 184, 166, 0.18)",
  color: "#99f6e4",
};

const hiddenBadgeStyle: CSSProperties = {
  ...baseBadgeStyle,
  border: "1px solid rgba(148, 163, 184, 0.45)",
  background: "rgba(71, 85, 105, 0.32)",
  color: "#cbd5e1",
};

const iconButtonStyle: CSSProperties = {
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  width: 22,
  height: 22,
  borderRadius: 6,
  border: "1px solid #334155",
  background: "#0b1220",
  cursor: "pointer",
  flex: "0 0 auto",
};

function EyeIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path
        d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z"
        stroke="#cbd5e1"
        strokeWidth="2"
        strokeLinejoin="round"
      />
      <circle cx="12" cy="12" r="3" stroke="#cbd5e1" strokeWidth="2" />
    </svg>
  );
}

function EyeOffIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M3 3l18 18" stroke="#fca5a5" strokeWidth="2" strokeLinecap="round" />
      <path
        d="M10.6 6.2A10.5 10.5 0 0 1 12 6c6 0 9.5 6 9.5 6a17 17 0 0 1-2.1 2.8M6.2 8.1A17 17 0 0 0 2.5 12s3.5 6 9.5 6c1.3 0 2.5-.3 3.5-.7"
        stroke="#fca5a5"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function LockIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path
        d="M7 10V8a5 5 0 0 1 10 0v2"
        stroke="#cbd5e1"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <rect
        x="6"
        y="10"
        width="12"
        height="10"
        rx="2"
        stroke="#cbd5e1"
        strokeWidth="2"
      />
    </svg>
  );
}

function UnlockIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path
        d="M17 10V8a5 5 0 0 0-9.5-2"
        stroke="#a7f3d0"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <rect
        x="6"
        y="10"
        width="12"
        height="10"
        rx="2"
        stroke="#a7f3d0"
        strokeWidth="2"
      />
    </svg>
  );
}

function PlusIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M12 5v14M5 12h14" stroke="#e2e8f0" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function MinusIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M5 12h14" stroke="#e2e8f0" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}