"use client";

import { useState, useCallback, useRef, useEffect } from "react";
import {
  MapPin,
  Database,
  Calendar,
  Info,
  Download,
  ChevronDown,
  Layers,
  Search,
  X,
} from "lucide-react";
import type { GeometryLevel, GeometryLevelInfo } from "@/types/geometry";
import type { Dataset, DatasetColumn } from "@/types/dataset";
import { GEOMETRY_LEVELS } from "@/types/geometry";

/* ============================================================
   GeometrySelector
   ============================================================ */

interface GeometrySelectorProps {
  selectedLevel: GeometryLevel | null;
  onLevelChange: (level: GeometryLevel) => void;
  entities: Array<{ id: string; name: string; code: string }>;
  selectedEntityIds: string[];
  onEntitySelectionChange: (ids: string[]) => void;
  loading?: boolean;
}

export function GeometrySelector({
  selectedLevel,
  onLevelChange,
  entities,
  selectedEntityIds,
  onEntitySelectionChange,
  loading,
}: GeometrySelectorProps) {
  const [isOpen, setIsOpen] = useState(true);
  const [search, setSearch] = useState("");

  const filteredEntities = entities.filter((e) =>
    e.name.toLowerCase().includes(search.toLowerCase())
  );

  const allSelected = selectedEntityIds.length === entities.length;

  const toggleAll = () => {
    if (allSelected) {
      onEntitySelectionChange([]);
    } else {
      onEntitySelectionChange(entities.map((e) => e.id));
    }
  };

  const toggleEntity = (id: string) => {
    if (selectedEntityIds.includes(id)) {
      onEntitySelectionChange(selectedEntityIds.filter((eid) => eid !== id));
    } else {
      onEntitySelectionChange([...selectedEntityIds, id]);
    }
  };

  return (
    <div className={`panel ${isOpen ? "panel--active" : ""}`}>
      <div className="panel__header" onClick={() => setIsOpen(!isOpen)}>
        <div className="panel__header-icon">
          <MapPin size={16} />
        </div>
        <div className="panel__header-text">
          <div className="panel__title">Geometrie</div>
          <div className="panel__subtitle">
            {selectedLevel
              ? `${GEOMETRY_LEVELS.find((l) => l.id === selectedLevel)?.name} — ${selectedEntityIds.length} selectate`
              : "Alegeți nivelul administrativ"}
          </div>
        </div>
        <ChevronDown
          size={16}
          className={`panel__chevron ${isOpen ? "panel__chevron--open" : ""}`}
        />
      </div>
      {isOpen && (
        <div className="panel__body">
          <select
            className="form-select"
            value={selectedLevel || ""}
            onChange={(e) => onLevelChange(e.target.value as GeometryLevel)}
          >
            <option value="" disabled>
              Selectați nivelul...
            </option>
            {GEOMETRY_LEVELS.map((level) => (
              <option key={level.id} value={level.id}>
                {level.name} ({level.description})
              </option>
            ))}
          </select>

          {selectedLevel && (
            <>
              {entities.length > 10 && (
                <div style={{ position: "relative", marginTop: 10 }}>
                  <Search
                    size={14}
                    style={{
                      position: "absolute",
                      left: 12,
                      top: "50%",
                      transform: "translateY(-50%)",
                      color: "var(--color-text-muted)",
                    }}
                  />
                  <input
                    type="text"
                    className="form-select"
                    style={{ paddingLeft: 34, backgroundImage: "none" }}
                    placeholder="Caută..."
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                  />
                  {search && (
                    <button
                      onClick={() => setSearch("")}
                      style={{
                        position: "absolute",
                        right: 10,
                        top: "50%",
                        transform: "translateY(-50%)",
                        background: "none",
                        border: "none",
                        color: "var(--color-text-muted)",
                        cursor: "pointer",
                        padding: 2,
                      }}
                    >
                      <X size={14} />
                    </button>
                  )}
                </div>
              )}
              <div className="select-all-toggle">
                <span className="select-all-toggle__label">
                  {selectedEntityIds.length}/{entities.length} entități
                </span>
                <button
                  className="select-all-toggle__btn"
                  onClick={toggleAll}
                >
                  {allSelected ? "Deselectează tot" : "Selectează tot"}
                </button>
              </div>
              <div className="checkbox-list">
                {loading ? (
                  <>
                    {[...Array(5)].map((_, i) => (
                      <div
                        key={i}
                        className="skeleton"
                        style={{ height: 36, marginBottom: 4 }}
                      />
                    ))}
                  </>
                ) : (
                  filteredEntities.map((entity) => (
                    <label key={entity.id} className="checkbox-item">
                      <input
                        type="checkbox"
                        checked={selectedEntityIds.includes(entity.id)}
                        onChange={() => toggleEntity(entity.id)}
                      />
                      <span className="checkbox-item__label">
                        {entity.name}
                      </span>
                      <span className="checkbox-item__value">
                        {entity.code}
                      </span>
                    </label>
                  ))
                )}
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
}

/* ============================================================
   DatasetSelector — with search & category filtering
   ============================================================ */

interface DatasetSelectorProps {
  datasets: Dataset[];
  selectedDataset: Dataset | null;
  onDatasetChange: (dataset: Dataset) => void;
  selectedColumns: string[];
  onColumnsChange: (columns: string[]) => void;
  maxColumns: number;
  loading?: boolean;
}

export function DatasetSelector({
  datasets,
  selectedDataset,
  onDatasetChange,
  selectedColumns,
  onColumnsChange,
  maxColumns,
  loading,
}: DatasetSelectorProps) {
  const [isOpen, setIsOpen] = useState(true);
  const [dsSearch, setDsSearch] = useState("");
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);

  // Get unique categories
  const categories = Array.from(
    new Set(
      datasets
        .map((ds) => (ds as Dataset & { category?: string }).category)
        .filter((c): c is string => !!c && c.length > 0)
    )
  ).sort((a, b) => a.localeCompare(b, "ro"));

  // Filter datasets by search + category
  const filteredDatasets = datasets.filter((ds) => {
    const matchesSearch =
      !dsSearch ||
      ds.name.toLowerCase().includes(dsSearch.toLowerCase()) ||
      ds.id.toLowerCase().includes(dsSearch.toLowerCase());
    const matchesCategory =
      !selectedCategory ||
      (ds as Dataset & { category?: string }).category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  const toggleColumn = (colId: string) => {
    if (selectedColumns.includes(colId)) {
      onColumnsChange(selectedColumns.filter((c) => c !== colId));
    } else {
      if (selectedColumns.length < maxColumns) {
        onColumnsChange([...selectedColumns, colId]);
      }
    }
  };

  const columnCount = selectedColumns.length;
  const fillPct = (columnCount / maxColumns) * 100;
  const fillClass =
    fillPct >= 90
      ? "column-counter__fill--error"
      : fillPct >= 70
        ? "column-counter__fill--warning"
        : "";

  return (
    <div className={`panel ${isOpen ? "panel--active" : ""}`}>
      <div className="panel__header" onClick={() => setIsOpen(!isOpen)}>
        <div className="panel__header-icon">
          <Database size={16} />
        </div>
        <div className="panel__header-text">
          <div className="panel__title">Date statistice</div>
          <div className="panel__subtitle">
            {selectedDataset
              ? `${selectedDataset.name} — ${columnCount} coloane`
              : `${datasets.length} seturi de date disponibile`}
          </div>
        </div>
        <ChevronDown
          size={16}
          className={`panel__chevron ${isOpen ? "panel__chevron--open" : ""}`}
        />
      </div>
      {isOpen && (
        <div className="panel__body">
          {loading ? (
            <div className="skeleton" style={{ height: 42 }} />
          ) : datasets.length === 0 ? (
            <div className="empty-state">
              <Layers size={32} className="empty-state__icon" />
              <div className="empty-state__text">
                Selectați mai întâi un nivel de geometrie.
              </div>
            </div>
          ) : (
            <>
              {/* Search input */}
              <div style={{ position: "relative" }}>
                <Search
                  size={14}
                  style={{
                    position: "absolute",
                    left: 12,
                    top: "50%",
                    transform: "translateY(-50%)",
                    color: "var(--color-text-muted)",
                  }}
                />
                <input
                  type="text"
                  className="form-select"
                  style={{ paddingLeft: 34, backgroundImage: "none" }}
                  placeholder="Caută set de date..."
                  value={dsSearch}
                  onChange={(e) => setDsSearch(e.target.value)}
                />
                {dsSearch && (
                  <button
                    onClick={() => setDsSearch("")}
                    style={{
                      position: "absolute",
                      right: 10,
                      top: "50%",
                      transform: "translateY(-50%)",
                      background: "none",
                      border: "none",
                      color: "var(--color-text-muted)",
                      cursor: "pointer",
                      padding: 2,
                    }}
                  >
                    <X size={14} />
                  </button>
                )}
              </div>

              {/* Category filter chips */}
              {categories.length > 1 && (
                <div
                  style={{
                    display: "flex",
                    flexWrap: "wrap",
                    gap: 4,
                    marginTop: 8,
                  }}
                >
                  <button
                    className={`badge ${!selectedCategory ? "badge--accent" : ""}`}
                    style={{
                      cursor: "pointer",
                      border: "none",
                      fontFamily: "inherit",
                      background: !selectedCategory
                        ? undefined
                        : "var(--color-bg-input)",
                      color: !selectedCategory
                        ? undefined
                        : "var(--color-text-muted)",
                    }}
                    onClick={() => setSelectedCategory(null)}
                  >
                    Toate ({datasets.length})
                  </button>
                  {categories.map((cat) => {
                    const count = datasets.filter(
                      (ds) =>
                        (ds as Dataset & { category?: string }).category === cat
                    ).length;
                    const isActive = selectedCategory === cat;
                    return (
                      <button
                        key={cat}
                        className={`badge ${isActive ? "badge--accent" : ""}`}
                        style={{
                          cursor: "pointer",
                          border: "none",
                          fontFamily: "inherit",
                          background: isActive
                            ? undefined
                            : "var(--color-bg-input)",
                          color: isActive
                            ? undefined
                            : "var(--color-text-muted)",
                        }}
                        onClick={() =>
                          setSelectedCategory(isActive ? null : cat)
                        }
                      >
                        {cat} ({count})
                      </button>
                    );
                  })}
                </div>
              )}

              {/* Dataset list */}
              <div
                className="checkbox-list"
                style={{ marginTop: 8, maxHeight: 200 }}
              >
                {filteredDatasets.length === 0 ? (
                  <div
                    className="empty-state"
                    style={{ padding: "16px 8px" }}
                  >
                    <div className="empty-state__text">
                      Niciun set de date găsit.
                    </div>
                  </div>
                ) : (
                  filteredDatasets.map((ds) => (
                    <div
                      key={ds.id}
                      className="checkbox-item"
                      style={{
                        background:
                          selectedDataset?.id === ds.id
                            ? "var(--color-accent-muted)"
                            : undefined,
                        borderRadius: "var(--radius-sm)",
                      }}
                      onClick={() => {
                        onDatasetChange(ds);
                        // Auto-select first column so preview works immediately
                        onColumnsChange(ds.columns.length > 0 ? [ds.columns[0].id] : []);
                      }}
                    >
                      <span className="checkbox-item__label">{ds.name}</span>
                      <span className="checkbox-item__value">{ds.id}</span>
                    </div>
                  ))
                )}
              </div>

              {selectedDataset && (
                <>
                  <div className="column-counter" style={{ marginTop: 12 }}>
                    <span>
                      {columnCount}/{maxColumns}
                    </span>
                    <div className="column-counter__bar">
                      <div
                        className={`column-counter__fill ${fillClass}`}
                        style={{ width: `${fillPct}%` }}
                      />
                    </div>
                    <span>coloane</span>
                  </div>
                  <div className="checkbox-list" style={{ marginTop: 8 }}>
                    {selectedDataset.columns.map((col) => (
                      <label key={col.id} className="checkbox-item">
                        <input
                          type="checkbox"
                          checked={selectedColumns.includes(col.id)}
                          onChange={() => toggleColumn(col.id)}
                          disabled={
                            !selectedColumns.includes(col.id) &&
                            columnCount >= maxColumns
                          }
                        />
                        <span className="checkbox-item__label">
                          {col.name}
                        </span>
                        {col.unit && (
                          <span className="badge badge--accent">
                            {col.unit}
                          </span>
                        )}
                      </label>
                    ))}
                  </div>
                </>
              )}
            </>
          )}
        </div>
      )}
    </div>
  );
}

/* ============================================================
   TemporalSelector
   ============================================================ */

interface TemporalSelectorProps {
  temporal: { type: string | null; values: string[] } | null;
  selectedValues: string[];
  onSelectionChange: (values: string[]) => void;
}

export function TemporalSelector({
  temporal,
  selectedValues,
  onSelectionChange,
}: TemporalSelectorProps) {
  const [isOpen, setIsOpen] = useState(true);

  if (!temporal || !temporal.type || temporal.values.length === 0) {
    return null;
  }

  const typeLabel =
    temporal.type === "year"
      ? "An"
      : temporal.type === "month"
        ? "Lună"
        : "Zi";

  const toggleValue = (val: string) => {
    if (selectedValues.includes(val)) {
      onSelectionChange(selectedValues.filter((v) => v !== val));
    } else {
      onSelectionChange([...selectedValues, val]);
    }
  };

  return (
    <div className={`panel ${isOpen ? "panel--active" : ""}`}>
      <div className="panel__header" onClick={() => setIsOpen(!isOpen)}>
        <div className="panel__header-icon">
          <Calendar size={16} />
        </div>
        <div className="panel__header-text">
          <div className="panel__title">Perioadă temporală</div>
          <div className="panel__subtitle">
            {selectedValues.length > 0
              ? `${selectedValues.length} ${typeLabel.toLowerCase()}(i) selectat(ă/e)`
              : `Selectați ${typeLabel.toLowerCase()}(ii)`}
          </div>
        </div>
        <ChevronDown
          size={16}
          className={`panel__chevron ${isOpen ? "panel__chevron--open" : ""}`}
        />
      </div>
      {isOpen && (
        <div className="panel__body">
          <div className="checkbox-list">
            {temporal.values.map((val) => (
              <label key={val} className="checkbox-item">
                <input
                  type="checkbox"
                  checked={selectedValues.includes(val)}
                  onChange={() => toggleValue(val)}
                />
                <span className="checkbox-item__label">{val}</span>
              </label>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

/* ============================================================
   MetadataPanel
   ============================================================ */

interface MetadataPanelProps {
  dataset: Dataset | null;
}

export function MetadataPanel({ dataset }: MetadataPanelProps) {
  const [isOpen, setIsOpen] = useState(false);

  if (!dataset) return null;

  return (
    <div className={`panel ${isOpen ? "panel--active" : ""}`}>
      <div className="panel__header" onClick={() => setIsOpen(!isOpen)}>
        <div className="panel__header-icon">
          <Info size={16} />
        </div>
        <div className="panel__header-text">
          <div className="panel__title">Informații set de date</div>
          <div className="panel__subtitle">{dataset.name}</div>
        </div>
        <ChevronDown
          size={16}
          className={`panel__chevron ${isOpen ? "panel__chevron--open" : ""}`}
        />
      </div>
      {isOpen && (
        <div className="panel__body">
          <div className="metadata-grid">
            <div className="metadata-item">
              <span className="metadata-item__label">Descriere</span>
              <span className="metadata-item__value">
                {dataset.description}
              </span>
            </div>
            <div className="metadata-item">
              <span className="metadata-item__label">Sursă</span>
              <span className="metadata-item__value">
                {dataset.source_url ? (
                  <a
                    href={dataset.source_url}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    {dataset.source}
                  </a>
                ) : (
                  dataset.source
                )}
              </span>
            </div>
            <div className="metadata-item">
              <span className="metadata-item__label">Licență</span>
              <span className="metadata-item__value">
                {dataset.license_url ? (
                  <a
                    href={dataset.license_url}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    {dataset.license}
                  </a>
                ) : (
                  dataset.license
                )}
              </span>
            </div>
            <div className="metadata-item">
              <span className="metadata-item__label">Mod de obținere</span>
              <span className="metadata-item__value">
                {dataset.acquisition}
              </span>
            </div>
            <div className="metadata-item">
              <span className="metadata-item__label">
                Niveluri geometrice disponibile
              </span>
              <span className="metadata-item__value">
                {dataset.geometry_levels
                  .map(
                    (l) =>
                      GEOMETRY_LEVELS.find((gl) => gl.id === l)?.name || l
                  )
                  .join(", ")}
              </span>
            </div>
            {dataset.temporal.type && (
              <div className="metadata-item">
                <span className="metadata-item__label">
                  Perioadă temporală
                </span>
                <span className="metadata-item__value">
                  {dataset.temporal.values.join(", ")}
                </span>
              </div>
            )}
            {dataset.updated_at && (
              <div className="metadata-item">
                <span className="metadata-item__label">
                  Ultima actualizare
                </span>
                <span className="metadata-item__value">
                  {new Date(dataset.updated_at).toLocaleDateString("ro-RO")}
                </span>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

/* ============================================================
   ExportPanel
   ============================================================ */

interface ExportPanelProps {
  canExport: boolean;
  onExport: (format: "gpkg" | "geojson") => void;
  onPreview: () => void;
  exporting?: boolean;
  previewing?: boolean;
}

export function ExportPanel({
  canExport,
  onExport,
  onPreview,
  exporting,
  previewing,
}: ExportPanelProps) {
  const [format, setFormat] = useState<"gpkg" | "geojson">("gpkg");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <button
        className="btn btn--primary btn--full"
        disabled={!canExport || previewing}
        onClick={onPreview}
      >
        {previewing ? (
          <>
            <span className="spinner" />
            Se încarcă...
          </>
        ) : (
          <>
            <Layers size={16} />
            Previzualizare pe hartă
          </>
        )}
      </button>

      <div className="radio-group">
        <label
          className={`radio-option ${format === "gpkg" ? "radio-option--active" : ""}`}
        >
          <input
            type="radio"
            name="format"
            value="gpkg"
            checked={format === "gpkg"}
            onChange={() => setFormat("gpkg")}
          />
          GeoPackage
        </label>
        <label
          className={`radio-option ${format === "geojson" ? "radio-option--active" : ""}`}
        >
          <input
            type="radio"
            name="format"
            value="geojson"
            checked={format === "geojson"}
            onChange={() => setFormat("geojson")}
          />
          GeoJSON
        </label>
      </div>

      <button
        className="btn btn--secondary btn--full"
        disabled={!canExport || exporting}
        onClick={() => onExport(format)}
      >
        {exporting ? (
          <>
            <span className="spinner" />
            Se generează...
          </>
        ) : (
          <>
            <Download size={16} />
            Descarcă {format === "gpkg" ? "GeoPackage" : "GeoJSON"}
          </>
        )}
      </button>
    </div>
  );
}