"use client";

import { useState, useMemo } from "react";
import {
  MapPin,
  Database,
  Check,
  ChevronRight,
  ChevronLeft,
  Search,
  X,
  Calendar,
  Layers,
  Globe,
  Map,
  LayoutGrid,
  Plus,
  Trash2,
  ShoppingCart,
} from "lucide-react";
import type { Dataset } from "@/types/dataset";
import { GEOMETRY_LEVELS, type GeometryLevel } from "@/types/geometry";

/* ============================================================
   Types
   ============================================================ */

export interface CalculatedColumn {
  name: string;
  var1: string;
  operator: string;
  var2: string;
}

export interface DatasetSelection {
  dataset: Dataset;
  columns: string[];
  calculatedColumns?: CalculatedColumn[];
  temporalValues: string[];
}

export interface WizardResult {
  level: GeometryLevel;
  simplified: boolean;
  selections: DatasetSelection[];
}

interface DataWizardProps {
  isOpen: boolean;
  onClose: () => void;
  onApply: (result: WizardResult) => void;
  allDatasets: Dataset[];
  loadingDatasets?: boolean;
  initialLevel?: GeometryLevel | null;
  initialSimplified?: boolean;
  initialSelections?: DatasetSelection[];
}

const STEPS = [
  { id: "geometry", label: "Geometrie", icon: MapPin },
  { id: "datasets", label: "Date statistice", icon: Database },
  { id: "summary", label: "Confirmare", icon: Check },
] as const;

const GEO_ICONS: Record<string, typeof Globe> = {
  region: Globe,
  county: Map,
  lau: LayoutGrid,
};

const MAX_COLUMNS = 200;

/* ============================================================
   DataWizard
   ============================================================ */

export function DataWizard({
  isOpen,
  onClose,
  onApply,
  allDatasets,
  loadingDatasets,
  initialLevel,
  initialSimplified = true,
  initialSelections = [],
}: DataWizardProps) {
  const [step, setStep] = useState(0);

  // Geometry
  const [selectedLevel, setSelectedLevel] = useState<GeometryLevel | null>(
    initialLevel ?? null
  );
  const [simplified, setSimplified] = useState(initialSimplified);

  // Multi-dataset cart
  const [selections, setSelections] =
    useState<DatasetSelection[]>(initialSelections);

  // Currently browsed dataset (for adding columns)
  const [browsingDataset, setBrowsingDataset] = useState<Dataset | null>(null);

  // Dataset search/filter
  const [dsSearch, setDsSearch] = useState("");
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);

  // Column search
  const [colSearch, setColSearch] = useState("");

  // Calculated columns form
  const [calcName, setCalcName] = useState("");
  const [calcVar1, setCalcVar1] = useState("");
  const [calcOp, setCalcOp] = useState("+");
  const [calcVar2, setCalcVar2] = useState("");

  // ── Derived ──

  const totalColumns = useMemo(
    () => selections.reduce((sum, s) => sum + s.columns.length, 0),
    [selections]
  );

  const categories = useMemo(() => {
    const cats = new Set<string>();
    allDatasets.forEach((ds) => {
      if (ds.category) cats.add(ds.category);
    });
    return Array.from(cats).sort((a, b) => a.localeCompare(b, "ro"));
  }, [allDatasets]);

  const filteredDatasets = useMemo(() => {
    let filtered = allDatasets.filter(
      (ds) => !selectedLevel || ds.geometry_levels.includes(selectedLevel)
    );
    if (dsSearch) {
      const q = dsSearch.toLowerCase();
      filtered = filtered.filter(
        (ds) =>
          ds.name.toLowerCase().includes(q) || ds.id.toLowerCase().includes(q)
      );
    }
    if (selectedCategory) {
      filtered = filtered.filter((ds) => ds.category === selectedCategory);
    }
    return filtered;
  }, [allDatasets, selectedLevel, dsSearch, selectedCategory]);

  // Columns for currently browsed dataset, filtered
  const filteredColumns = useMemo(() => {
    if (!browsingDataset) return [];
    if (!colSearch) return browsingDataset.columns;
    const q = colSearch.toLowerCase();
    return browsingDataset.columns.filter(
      (c) => c.name.toLowerCase().includes(q) || c.id.toLowerCase().includes(q)
    );
  }, [browsingDataset, colSearch]);

  // Get current selection for browsed dataset
  const currentBrowsingSelection = useMemo(() => {
    if (!browsingDataset) return null;
    return selections.find((s) => s.dataset.id === browsingDataset.id) || null;
  }, [browsingDataset, selections]);

  // ── Handlers ──

  const handleSelectLevel = (level: GeometryLevel) => {
    setSelectedLevel(level);
    if (level !== selectedLevel) {
      setSelections([]);
      setBrowsingDataset(null);
    }
    // No auto-advance — user needs to see resolution toggle and click "Continuă"
  };

  const handleBrowseDataset = (ds: Dataset) => {
    setBrowsingDataset(ds);
    setColSearch("");
  };

  const handleBackToList = () => {
    setBrowsingDataset(null);
    setColSearch("");
    setCalcName("");
    setCalcVar1("");
    setCalcOp("+");
    setCalcVar2("");
  };

  const toggleColumn = (colId: string) => {
    if (!browsingDataset) return;
    const existing = selections.find(
      (s) => s.dataset.id === browsingDataset.id
    );

    if (existing) {
      const hasCol = existing.columns.includes(colId);
      if (hasCol) {
        // Remove column
        const newCols = existing.columns.filter((c) => c !== colId);
        if (newCols.length === 0) {
          // Remove entire selection
          setSelections(
            selections.filter((s) => s.dataset.id !== browsingDataset.id)
          );
        } else {
          setSelections(
            selections.map((s) =>
              s.dataset.id === browsingDataset.id
                ? { ...s, columns: newCols }
                : s
            )
          );
        }
      } else if (totalColumns < MAX_COLUMNS) {
        // Add column
        setSelections(
          selections.map((s) =>
            s.dataset.id === browsingDataset.id
              ? { ...s, columns: [...s.columns, colId] }
              : s
          )
        );
      }
    } else if (totalColumns < MAX_COLUMNS) {
      // New selection
      setSelections([
        ...selections,
        {
          dataset: browsingDataset,
          columns: [colId],
          temporalValues: [],
        },
      ]);
    }
  };

  const toggleTemporalValue = (val: string) => {
    if (!browsingDataset) return;
    const existing = selections.find(
      (s) => s.dataset.id === browsingDataset.id
    );
    if (!existing) return;

    const has = existing.temporalValues.includes(val);
    setSelections(
      selections.map((s) =>
        s.dataset.id === browsingDataset.id
          ? {
              ...s,
              temporalValues: has
                ? s.temporalValues.filter((v) => v !== val)
                : [...s.temporalValues, val],
            }
          : s
      )
    );
  };

  const selectAllTemporal = () => {
    if (!browsingDataset) return;
    const existing = selections.find(
      (s) => s.dataset.id === browsingDataset.id
    );
    if (!existing) return;

    if (existing.temporalValues.length === browsingDataset.temporal.values.length) {
      setSelections(
        selections.map((s) =>
          s.dataset.id === browsingDataset.id
            ? { ...s, temporalValues: [] }
            : s
        )
      );
    } else {
      setSelections(
        selections.map((s) =>
          s.dataset.id === browsingDataset.id
            ? { ...s, temporalValues: [...browsingDataset.temporal.values] }
            : s
        )
      );
    }
  };

  const handleAddCalculatedColumn = () => {
    if (!browsingDataset || !calcVar1 || !calcVar2 || !calcOp) return;
    const existing = selections.find((s) => s.dataset.id === browsingDataset.id);
    if (!existing) return;

    let finalName = calcName.trim();
    if (!finalName) {
      const v1Name = browsingDataset.columns.find(c => c.id === calcVar1)?.name || calcVar1;
      const v2Name = browsingDataset.columns.find(c => c.id === calcVar2)?.name || calcVar2;
      finalName = `${v1Name} ${calcOp} ${v2Name}`;
    }

    const newCalc = {
      name: finalName,
      var1: calcVar1,
      operator: calcOp,
      var2: calcVar2,
    };

    setSelections(
      selections.map((s) =>
        s.dataset.id === browsingDataset.id
          ? { ...s, calculatedColumns: [...(s.calculatedColumns || []), newCalc] }
          : s
      )
    );

    // Reset form
    setCalcName("");
    setCalcVar1("");
    setCalcOp("+");
    setCalcVar2("");
  };

  const handleRemoveCalculatedColumn = (index: number) => {
    if (!browsingDataset) return;
    setSelections(
      selections.map((s) => {
        if (s.dataset.id !== browsingDataset.id || !s.calculatedColumns) return s;
        const updated = [...s.calculatedColumns];
        updated.splice(index, 1);
        return { ...s, calculatedColumns: updated };
      })
    );
  };


  const removeSelection = (datasetId: string) => {
    setSelections(selections.filter((s) => s.dataset.id !== datasetId));
    if (browsingDataset?.id === datasetId) {
      setBrowsingDataset(null);
    }
  };

  const handleApply = () => {
    if (!selectedLevel || selections.length === 0) return;
    onApply({ level: selectedLevel, simplified, selections });
  };

  const canGoNext = (): boolean => {
    switch (step) {
      case 0:
        return !!selectedLevel;
      case 1:
        return selections.length > 0 && totalColumns > 0;
      case 2:
        return true;
      default:
        return false;
    }
  };

  const stepDone = (idx: number): boolean => {
    switch (idx) {
      case 0:
        return !!selectedLevel;
      case 1:
        return selections.length > 0;
      default:
        return false;
    }
  };

  if (!isOpen) return null;

  // ── Step Renderers ──

  const renderGeometryStep = () => (
    <div>
      <h3 className="wizard__step-heading">
        Alegeți nivelul administrativ pentru vizualizare
      </h3>
      <div className="geo-cards">
        {GEOMETRY_LEVELS.map((level) => {
          const Icon = GEO_ICONS[level.id] || Globe;
          const isSelected = selectedLevel === level.id;
          const isDisabled = level.id === "lau";
          return (
            <div
              key={level.id}
              className={`geo-card ${isSelected ? "geo-card--selected" : ""}`}
              onClick={() => !isDisabled && handleSelectLevel(level.id)}
              style={{
                ...(isDisabled ? { opacity: 0.45, cursor: "not-allowed", pointerEvents: "none" as const, position: "relative" as const } : {}),
              }}
            >
              {isDisabled && (
                <div style={{
                  position: "absolute", top: 8, right: 8,
                  background: "var(--color-accent)", color: "white",
                  fontSize: 9, fontWeight: 700, textTransform: "uppercase",
                  padding: "2px 6px", borderRadius: 4, letterSpacing: 0.5,
                }}>
                  în curând
                </div>
              )}
              <div className="geo-card__icon">
                <Icon size={28} />
              </div>
              <div className="geo-card__name">{level.name}</div>
              <div className="geo-card__desc">{level.description}</div>
            </div>
          );
        })}
      </div>

      {/* Geometry resolution toggle */}
      {selectedLevel && (
        <div className="geo-resolution" style={{ marginTop: 24 }}>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              padding: "12px 16px",
              background: "var(--color-bg-card)",
              borderRadius: "var(--radius-md)",
              border: "1px solid var(--color-border)",
            }}
          >
            <div>
              <div style={{ fontSize: 14, fontWeight: 600 }}>Rezoluție geometrie</div>
              <div style={{ fontSize: 12, color: "var(--color-text-muted)", marginTop: 2 }}>
                {simplified
                  ? "Simplificată — încărcare rapidă, potrivită pentru previzualizare"
                  : "Completă — detaliu maxim, fișiere mai mari"}
              </div>
            </div>
            <div className="geo-toggle">
              <button
                className={`geo-toggle__btn ${simplified ? "geo-toggle__btn--active" : ""}`}
                onClick={() => setSimplified(true)}
              >
                Simplificată
              </button>
              <button
                className={`geo-toggle__btn ${!simplified ? "geo-toggle__btn--active" : ""}`}
                onClick={() => setSimplified(false)}
              >
                Completă
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );

  const renderDatasetStep = () => {
    // If browsing a specific dataset: show columns + temporal
    if (browsingDataset) {
      const selCols = currentBrowsingSelection?.columns || [];
      const selTemporal = currentBrowsingSelection?.temporalValues || [];
      const hasTemporal =
        browsingDataset.temporal?.type &&
        browsingDataset.temporal.values.length > 0;

      return (
        <div>
          {/* Back button + dataset name */}
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 12,
              marginBottom: 16,
            }}
          >
            <button className="btn btn--ghost btn--sm" onClick={handleBackToList}>
              <ChevronLeft size={16} />
              Înapoi la listă
            </button>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 16 }}>
                {browsingDataset.name}
              </div>
              <div style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
                {browsingDataset.id} · {browsingDataset.columns.length} variabile
              </div>
            </div>
            <div className="badge badge--accent">
              {selCols.length} selectate
            </div>
          </div>

          <div className={hasTemporal ? "config-layout" : ""}>
            {/* Columns */}
            <div className="config-section">
              <div className="config-section__title">
                <Database size={16} className="config-section__title-icon" />
                Variabile
              </div>

              {browsingDataset.columns.length > 10 && (
                <div className="wizard-search" style={{ marginBottom: 0 }}>
                  <Search size={14} className="wizard-search__icon" />
                  <input
                    type="text"
                    className="wizard-search__input"
                    style={{ padding: "8px 36px 8px 36px", fontSize: 13 }}
                    placeholder="Filtrează variabile..."
                    value={colSearch}
                    onChange={(e) => setColSearch(e.target.value)}
                  />
                  {colSearch && (
                    <button
                      className="wizard-search__clear"
                      onClick={() => setColSearch("")}
                    >
                      <X size={14} />
                    </button>
                  )}
                </div>
              )}

              <div className="config-list">
                {filteredColumns.map((col) => (
                  <label key={col.id} className="checkbox-item">
                    <input
                      type="checkbox"
                      checked={selCols.includes(col.id)}
                      onChange={() => toggleColumn(col.id)}
                      disabled={
                        !selCols.includes(col.id) &&
                        totalColumns >= MAX_COLUMNS
                      }
                    />
                    <span className="checkbox-item__label">{col.name}</span>
                  </label>
                ))}
              </div>
            </div>

            {/* Temporal */}
            {hasTemporal && selCols.length > 0 && (
              <div className="config-section">
                <div className="config-section__title">
                  <Calendar size={16} className="config-section__title-icon" />
                  Perioadă temporală
                </div>
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    marginBottom: 4,
                  }}
                >
                  <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
                    {selTemporal.length}/{browsingDataset.temporal.values.length}
                  </span>
                  <button className="btn btn--ghost btn--sm" onClick={selectAllTemporal}>
                    {selTemporal.length === browsingDataset.temporal.values.length
                      ? "Deselectează"
                      : "Selectează tot"}
                  </button>
                </div>
                <div className="year-grid">
                  {browsingDataset.temporal.values.map((val) => (
                    <div
                      key={val}
                      className={`year-chip ${selTemporal.includes(val) ? "year-chip--selected" : ""}`}
                      onClick={() => toggleTemporalValue(val)}
                    >
                      {val}
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Calculated Columns */}
            {selCols.length >= 2 && (
              <div className="config-section" style={{ marginTop: 16 }}>
                <div className="config-section__title">
                  <Plus size={16} className="config-section__title-icon" />
                  Coloane calculate
                </div>

                {/* Temporal notice */}
                {hasTemporal && selTemporal.length > 0 && (
                  <div style={{
                    display: 'flex', alignItems: 'center', gap: 6,
                    padding: '6px 10px', marginBottom: 10,
                    background: 'var(--color-accent-muted)',
                    borderRadius: 'var(--radius-sm)',
                    fontSize: 11, color: 'var(--color-accent)',
                  }}>
                    <Calendar size={12} />
                    Operația se aplică automat pentru fiecare an selectat ({selTemporal.length} ani).
                  </div>
                )}

                {/* Existing calculated columns list */}
                {currentBrowsingSelection?.calculatedColumns && currentBrowsingSelection.calculatedColumns.length > 0 && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 12 }}>
                    {currentBrowsingSelection.calculatedColumns.map((calc, idx) => {
                      const v1Label = browsingDataset.columns.find(c => c.id === calc.var1)?.name || calc.var1;
                      const v2Label = browsingDataset.columns.find(c => c.id === calc.var2)?.name || calc.var2;
                      return (
                        <div key={idx} style={{
                          display: 'flex', alignItems: 'center', gap: 0,
                          background: 'var(--color-bg-input)',
                          borderRadius: 'var(--radius-md)',
                          border: '1px solid var(--color-border)',
                          overflow: 'hidden',
                        }}>
                          {/* Name tag */}
                          <div style={{
                            padding: '8px 12px',
                            background: 'var(--color-accent-muted)',
                            fontWeight: 600, fontSize: 12,
                            color: 'var(--color-accent)',
                            whiteSpace: 'nowrap',
                            borderRight: '1px solid var(--color-border)',
                          }}>
                            {calc.name}
                          </div>
                          {/* Formula */}
                          <div style={{
                            flex: 1, display: 'flex', alignItems: 'center', gap: 6,
                            padding: '8px 12px', fontSize: 12,
                            color: 'var(--color-text-muted)',
                            overflow: 'hidden',
                          }}>
                            <span style={{ fontFamily: 'monospace', opacity: 0.5 }}>=</span>
                            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{v1Label}</span>
                            <span style={{
                              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                              width: 22, height: 22, borderRadius: '50%',
                              background: 'var(--color-accent)', color: 'white',
                              fontWeight: 700, fontSize: 13, flexShrink: 0,
                            }}>{calc.operator}</span>
                            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{v2Label}</span>
                          </div>
                          {/* Delete button */}
                          <button
                            onClick={() => handleRemoveCalculatedColumn(idx)}
                            style={{
                              background: 'none', border: 'none',
                              padding: '8px 12px', cursor: 'pointer',
                              color: 'var(--color-text-muted)',
                              transition: 'color 0.15s',
                            }}
                            onMouseEnter={e => (e.currentTarget.style.color = 'var(--color-error)')}
                            onMouseLeave={e => (e.currentTarget.style.color = 'var(--color-text-muted)')}
                          >
                            <Trash2 size={14} />
                          </button>
                        </div>
                      );
                    })}
                  </div>
                )}

                {/* Builder form */}
                <div style={{
                  background: 'var(--color-bg-card)',
                  padding: 16, borderRadius: 'var(--radius-md)',
                  border: '1px solid var(--color-border)',
                  display: 'flex', flexDirection: 'column', gap: 12,
                }}>
                  {/* Row 1: Variable selectors + operator */}
                  <div style={{ display: 'flex', gap: 8, alignItems: 'stretch' }}>
                    {/* Variable 1 */}
                    <select
                      style={{
                        flex: 1, padding: '10px 12px',
                        borderRadius: 'var(--radius-sm)',
                        border: '1px solid var(--color-border)',
                        background: 'var(--color-bg-input)',
                        fontSize: 12, color: calcVar1 ? 'var(--color-text)' : 'var(--color-text-muted)',
                      }}
                      value={calcVar1}
                      onChange={(e) => setCalcVar1(e.target.value)}
                    >
                      <option value="" disabled>Variabila 1...</option>
                      {selCols.map(cId => (
                        <option key={cId} value={cId}>{browsingDataset.columns.find(c => c.id === cId)?.name || cId}</option>
                      ))}
                    </select>

                    {/* Operator toggle buttons */}
                    <div style={{
                      display: 'flex',
                      border: '1px solid var(--color-border)',
                      borderRadius: 'var(--radius-sm)',
                      overflow: 'hidden',
                    }}>
                      {[
                        { op: '+', label: '+', title: 'Adunare' },
                        { op: '-', label: '−', title: 'Scădere' },
                        { op: '*', label: '×', title: 'Înmulțire' },
                        { op: '/', label: '÷', title: 'Împărțire' },
                      ].map(({ op, label, title }) => (
                        <button
                          key={op}
                          title={title}
                          onClick={() => setCalcOp(op)}
                          style={{
                            width: 36, height: 36,
                            display: 'flex', alignItems: 'center', justifyContent: 'center',
                            border: 'none', cursor: 'pointer',
                            fontSize: 16, fontWeight: 700,
                            transition: 'all 0.15s ease',
                            background: calcOp === op ? 'var(--color-accent)' : 'var(--color-bg-input)',
                            color: calcOp === op ? 'white' : 'var(--color-text-muted)',
                            borderRight: '1px solid var(--color-border)',
                          }}
                        >
                          {label}
                        </button>
                      ))}
                    </div>

                    {/* Variable 2 */}
                    <select
                      style={{
                        flex: 1, padding: '10px 12px',
                        borderRadius: 'var(--radius-sm)',
                        border: '1px solid var(--color-border)',
                        background: 'var(--color-bg-input)',
                        fontSize: 12, color: calcVar2 ? 'var(--color-text)' : 'var(--color-text-muted)',
                      }}
                      value={calcVar2}
                      onChange={(e) => setCalcVar2(e.target.value)}
                    >
                      <option value="" disabled>Variabila 2...</option>
                      {selCols.map(cId => (
                        <option key={cId} value={cId}>{browsingDataset.columns.find(c => c.id === cId)?.name || cId}</option>
                      ))}
                    </select>
                  </div>

                  {/* Row 2: Name input + Add button */}
                  <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                    <div style={{ position: 'relative', flex: 1 }}>
                      <input
                        type="text"
                        placeholder={
                          calcVar1 && calcVar2
                            ? `${browsingDataset.columns.find(c => c.id === calcVar1)?.name || calcVar1} ${calcOp} ${browsingDataset.columns.find(c => c.id === calcVar2)?.name || calcVar2}`
                            : 'Numele coloanei (opțional)'
                        }
                        value={calcName}
                        onChange={(e) => setCalcName(e.target.value)}
                        style={{
                          width: '100%',
                          padding: '10px 12px',
                          borderRadius: 'var(--radius-sm)',
                          border: '1px solid var(--color-border)',
                          background: 'var(--color-bg-input)',
                          fontSize: 12, color: 'var(--color-text)',
                        }}
                      />
                    </div>
                    <button
                      className="btn btn--primary btn--sm"
                      onClick={handleAddCalculatedColumn}
                      disabled={!calcVar1 || !calcVar2 || !calcOp}
                      style={{
                        display: 'flex', alignItems: 'center', gap: 6,
                        padding: '10px 16px', whiteSpace: 'nowrap',
                      }}
                    >
                      <Plus size={14} />
                      Adaugă
                    </button>
                  </div>

                  {/* Live formula preview */}
                  {calcVar1 && calcVar2 && (
                    <div style={{
                      display: 'flex', alignItems: 'center', gap: 8,
                      padding: '8px 12px',
                      background: 'var(--color-accent-muted)',
                      borderRadius: 'var(--radius-sm)',
                      fontSize: 11, fontFamily: 'monospace',
                      color: 'var(--color-accent)',
                    }}>
                      <span style={{ opacity: 0.6 }}>Rezultat →</span>
                      <span style={{ fontWeight: 600 }}>
                        {calcName || `${browsingDataset.columns.find(c => c.id === calcVar1)?.name || calcVar1} ${calcOp} ${browsingDataset.columns.find(c => c.id === calcVar2)?.name || calcVar2}`}
                      </span>
                      <span style={{ opacity: 0.5 }}>
                        = {browsingDataset.columns.find(c => c.id === calcVar1)?.name || calcVar1} {calcOp} {browsingDataset.columns.find(c => c.id === calcVar2)?.name || calcVar2}
                      </span>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      );
    }

    // Dataset list view
    return (
      <div>
        {/* Cart summary */}
        {selections.length > 0 && (
          <div
            style={{
              marginBottom: 16,
              padding: "12px 16px",
              background: "var(--color-bg-card)",
              borderRadius: "var(--radius-md)",
              border: "1px solid var(--color-border-accent)",
            }}
          >
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: 8,
                marginBottom: 8,
                fontSize: 13,
                fontWeight: 600,
              }}
            >
              <ShoppingCart size={14} style={{ color: "var(--color-accent)" }} />
              {selections.length} set(uri) selectat(e) · {totalColumns}/{MAX_COLUMNS} coloane
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              {selections.map((s) => (
                <div
                  key={s.dataset.id}
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 8,
                    padding: "6px 8px",
                    borderRadius: "var(--radius-sm)",
                    background: "var(--color-bg-input)",
                    fontSize: 12,
                  }}
                >
                  <span style={{ flex: 1, fontWeight: 500 }}>
                    {s.dataset.name}
                  </span>
                  <span className="badge badge--accent">
                    {s.columns.length} col
                  </span>
                  {s.temporalValues.length > 0 && (
                    <span className="badge">
                      {s.temporalValues.length} ani
                    </span>
                  )}
                  <button
                    style={{
                      background: "none",
                      border: "none",
                      color: "var(--color-text-muted)",
                      cursor: "pointer",
                      padding: 2,
                    }}
                    onClick={() => handleBrowseDataset(s.dataset)}
                    title="Editează"
                  >
                    <Database size={12} />
                  </button>
                  <button
                    style={{
                      background: "none",
                      border: "none",
                      color: "var(--color-error)",
                      cursor: "pointer",
                      padding: 2,
                    }}
                    onClick={() => removeSelection(s.dataset.id)}
                    title="Elimină"
                  >
                    <Trash2 size={12} />
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Search */}
        <div className="wizard-search">
          <Search size={16} className="wizard-search__icon" />
          <input
            type="text"
            className="wizard-search__input"
            placeholder="Căutați un set de date (nume sau cod)..."
            value={dsSearch}
            onChange={(e) => setDsSearch(e.target.value)}
            autoFocus
          />
          {dsSearch && (
            <button className="wizard-search__clear" onClick={() => setDsSearch("")}>
              <X size={16} />
            </button>
          )}
        </div>

        {/* Category chips */}
        {categories.length > 1 && (
          <div className="category-bar">
            <button
              className={`category-chip ${!selectedCategory ? "category-chip--active" : ""}`}
              onClick={() => setSelectedCategory(null)}
            >
              Toate ({allDatasets.filter((ds) => !selectedLevel || ds.geometry_levels.includes(selectedLevel)).length})
            </button>
            {categories.map((cat) => {
              const count = allDatasets.filter(
                (ds) =>
                  ds.category === cat &&
                  (!selectedLevel || ds.geometry_levels.includes(selectedLevel))
              ).length;
              if (count === 0) return null;
              const isActive = selectedCategory === cat;
              const shortLabel = cat.length > 40 ? cat.substring(0, 38) + "…" : cat;
              return (
                <button
                  key={cat}
                  className={`category-chip ${isActive ? "category-chip--active" : ""}`}
                  onClick={() => setSelectedCategory(isActive ? null : cat)}
                >
                  {shortLabel} ({count})
                </button>
              );
            })}
          </div>
        )}

        <div className="ds-count">
          <strong>{filteredDatasets.length}</strong> seturi de date
        </div>

        {loadingDatasets ? (
          <div style={{ display: "flex", justifyContent: "center", padding: 40 }}>
            <span className="spinner" />
          </div>
        ) : (
          <div className="ds-grid">
            {filteredDatasets.map((ds) => {
              const isInCart = selections.some((s) => s.dataset.id === ds.id);
              const cartSel = selections.find((s) => s.dataset.id === ds.id);
              return (
                <div
                  key={ds.id}
                  className={`ds-card ${isInCart ? "ds-card--selected" : ""}`}
                  onClick={() => handleBrowseDataset(ds)}
                >
                  <div className="ds-card__header">
                    <span className="ds-card__name">{ds.name}</span>
                    <span className="ds-card__code">{ds.id}</span>
                  </div>
                  <div className="ds-card__meta">
                    {isInCart && (
                      <span className="badge badge--success">
                        <Check size={10} /> {cartSel?.columns.length} col
                      </span>
                    )}
                    {ds.periodicity && (
                      <span className="badge">{ds.periodicity}</span>
                    )}
                    {!isInCart && (
                      <span className="badge badge--accent">
                        <Plus size={10} /> Adaugă
                      </span>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    );
  };

  const renderSummaryStep = () => {
    const levelInfo = GEOMETRY_LEVELS.find((l) => l.id === selectedLevel);

    return (
      <div>
        <h3 className="wizard__step-heading">
          Verificați selecția înainte de a aplica pe hartă
        </h3>

        <div className="summary-grid">
          <div className="summary-card">
            <span className="summary-card__label">Geometrie</span>
            <span className="summary-card__value">{levelInfo?.name}</span>
            <span className="summary-card__detail">{levelInfo?.description}</span>
          </div>

          <div className="summary-card">
            <span className="summary-card__label">Total</span>
            <span className="summary-card__value">
              {selections.length} set(uri) · {totalColumns} coloane
            </span>
          </div>
        </div>

        {/* Per-dataset breakdown */}
        <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 10 }}>
          {selections.map((s) => {
            const colNames = s.columns
              .map((id) => s.dataset.columns.find((c) => c.id === id)?.name || id)
              .slice(0, 5);
            const remaining = s.columns.length - colNames.length;
            return (
              <div key={s.dataset.id} className="summary-card">
                <span className="summary-card__label">{s.dataset.id}</span>
                <span className="summary-card__value">{s.dataset.name}</span>
                <span className="summary-card__detail">
                  {s.columns.length} variabile: {colNames.join(", ")}
                  {remaining > 0 && ` +${remaining} altele`}
                  {s.temporalValues.length > 0 &&
                    ` · ${s.temporalValues.length} ani`}
                </span>
              </div>
            );
          })}
        </div>

        <div style={{ marginTop: 28, textAlign: "center" }}>
          <button
            className="btn btn--primary"
            style={{ padding: "14px 48px", fontSize: 16 }}
            onClick={handleApply}
          >
            <Layers size={20} />
            Aplică pe hartă
          </button>
        </div>
      </div>
    );
  };

  const stepRenderers = [renderGeometryStep, renderDatasetStep, renderSummaryStep];

  return (
    <div className="wizard-backdrop" onClick={onClose}>
      <div className="wizard" onClick={(e) => e.stopPropagation()}>
        <div className="wizard__header">
          <div className="wizard__title">Configurare vizualizare</div>
          <div className="wizard__description">
            Selectați datele statistice pe care doriți să le vizualizați pe hartă
          </div>
        </div>

        <div className="wizard__stepper">
          {STEPS.map((s, idx) => {
            const isActive = step === idx;
            const isDone = stepDone(idx) && step > idx;
            return (
              <div
                key={s.id}
                className={`wizard__step ${isActive ? "wizard__step--active" : ""} ${isDone ? "wizard__step--done" : ""}`}
                onClick={() => {
                  if (idx <= step || stepDone(idx - 1)) {
                    if (idx === 1) setBrowsingDataset(null);
                    setStep(idx);
                  }
                }}
              >
                <div className="wizard__step-num">
                  {isDone ? <Check size={14} /> : idx + 1}
                </div>
                <span className="wizard__step-label">{s.label}</span>
              </div>
            );
          })}
        </div>

        <div className="wizard__body">{stepRenderers[step]()}</div>

        <div className="wizard__footer">
          <div className="wizard__footer-left">
            {step > 0 && !browsingDataset && (
              <button className="btn btn--ghost" onClick={() => setStep(step - 1)}>
                <ChevronLeft size={16} /> Înapoi
              </button>
            )}
            {browsingDataset && (
              <button className="btn btn--ghost" onClick={handleBackToList}>
                <ChevronLeft size={16} /> Lista de seturi
              </button>
            )}
          </div>
          <div className="wizard__footer-right">
            <button className="btn btn--ghost" onClick={onClose}>
              Anulează
            </button>
            {step < STEPS.length - 1 && !browsingDataset && (
              <button
                className="btn btn--primary"
                disabled={!canGoNext()}
                onClick={() => setStep(step + 1)}
              >
                Continuă <ChevronRight size={16} />
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}