"use client";

import { useState, useMemo } from "react";
import {
  Search,
  X,
  ChevronDown,
  ChevronRight,
  Database,
  Layers,
  FileSpreadsheet,
  Calendar,
  FolderOpen,
} from "lucide-react";

interface ExplorerDataset {
  id: string;
  name: string;
  description: string;
  source: string;
  category: string;
  subcategory?: string;
  geometry_levels: string[];
  columns: Array<{ id: string; name: string }>;
  temporal?: { type: string | null; values: string[] };
  periodicity?: string;
  join_key: string;
  collection: string;
  parquetDir: string;
}

interface CollectionInfo {
  id: string;
  name: string;
  count: number;
}

interface DatasetBrowserProps {
  datasets: ExplorerDataset[];
  collections: CollectionInfo[];
  loading?: boolean;
  selectedDatasetId?: string | null;
  selectedLevel: string;
  onSelectDataset: (ds: ExplorerDataset) => void;
  onSelectLevel: (level: string) => void;
}

export function DatasetBrowser({
  datasets,
  collections,
  loading,
  selectedDatasetId,
  selectedLevel,
  onSelectDataset,
  onSelectLevel,
}: DatasetBrowserProps) {
  const [search, setSearch] = useState("");
  const [expandedCats, setExpandedCats] = useState<Set<string>>(new Set());
  const [selectedCollection, setSelectedCollection] = useState<string | null>(null);

  // Group datasets by collection → category
  const grouped = useMemo(() => {
    let filtered = datasets.filter((ds) =>
      ds.geometry_levels.includes(selectedLevel)
    );
    if (search.trim()) {
      const q = search.toLowerCase();
      filtered = filtered.filter(
        (ds) =>
          ds.name.toLowerCase().includes(q) ||
          ds.id.toLowerCase().includes(q) ||
          ds.description?.toLowerCase().includes(q)
      );
    }
    if (selectedCollection) {
      filtered = filtered.filter((ds) => ds.collection === selectedCollection);
    }

    const groups: Record<string, ExplorerDataset[]> = {};
    filtered.forEach((ds) => {
      const cat = ds.category || "Altele";
      if (!groups[cat]) groups[cat] = [];
      groups[cat].push(ds);
    });

    return Object.entries(groups)
      .sort(([a], [b]) => a.localeCompare(b, "ro"))
      .map(([cat, dsList]) => ({
        category: cat,
        datasets: dsList.sort((a, b) => a.name.localeCompare(b.name, "ro")),
      }));
  }, [datasets, selectedLevel, search, selectedCollection]);

  const totalFiltered = grouped.reduce((s, g) => s + g.datasets.length, 0);

  const toggleCategory = (cat: string) => {
    setExpandedCats((prev) => {
      const next = new Set(prev);
      if (next.has(cat)) next.delete(cat);
      else next.add(cat);
      return next;
    });
  };

  const isExpanded = (cat: string) => {
    if (search.trim()) return true;
    return expandedCats.has(cat);
  };

  // Short category name for display
  const shortCat = (cat: string) => {
    const cleaned = cat.replace(/^[A-Z]\.\s*/i, "");
    if (cleaned === cleaned.toUpperCase() && cleaned.length > 3) {
      return cleaned
        .toLowerCase()
        .split(" ")
        .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
        .join(" ");
    }
    return cleaned;
  };

  return (
    <div className="ds-browser">
      {/* Header */}
      <div className="ds-browser__header">
        <div className="ds-browser__title">
          <Database size={16} />
          <span>Colecții de date</span>
        </div>
        <div className="ds-browser__count">
          {loading ? "..." : `${totalFiltered} seturi`}
        </div>
      </div>

      {/* Collection filter */}
      {collections.length > 1 && (
        <div className="ds-browser__collections">
          <button
            className={`ds-browser__collection-btn${!selectedCollection ? " ds-browser__collection-btn--active" : ""}`}
            onClick={() => setSelectedCollection(null)}
          >
            <FolderOpen size={12} />
            Toate ({datasets.length})
          </button>
          {collections.map((c) => (
            <button
              key={c.id}
              className={`ds-browser__collection-btn${selectedCollection === c.id ? " ds-browser__collection-btn--active" : ""}`}
              onClick={() =>
                setSelectedCollection(
                  selectedCollection === c.id ? null : c.id
                )
              }
            >
              {c.name.split("—")[0].trim()} ({c.count})
            </button>
          ))}
        </div>
      )}

      {/* Level toggle */}
      <div className="ds-browser__levels">
        {["county", "region"].map((lvl) => (
          <button
            key={lvl}
            className={`ds-browser__level-btn${selectedLevel === lvl ? " ds-browser__level-btn--active" : ""}`}
            onClick={() => onSelectLevel(lvl)}
          >
            <Layers size={13} />
            {lvl === "county" ? "Județe" : "Regiuni"}
          </button>
        ))}
      </div>

      {/* Search */}
      <div className="ds-browser__search">
        <Search size={14} className="ds-browser__search-icon" />
        <input
          type="text"
          className="ds-browser__search-input"
          placeholder="Caută seturi de date..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        {search && (
          <button
            className="ds-browser__search-clear"
            onClick={() => setSearch("")}
          >
            <X size={12} />
          </button>
        )}
      </div>

      {/* Categories */}
      <div className="ds-browser__list">
        {loading ? (
          <div className="ds-browser__empty">
            <div className="spinner" style={{ margin: "24px auto" }} />
          </div>
        ) : grouped.length === 0 ? (
          <div className="ds-browser__empty">
            <FileSpreadsheet
              size={32}
              style={{ opacity: 0.3, marginBottom: 8 }}
            />
            <div>Niciun set de date găsit</div>
          </div>
        ) : (
          grouped.map((group) => (
            <div key={group.category} className="ds-browser__category">
              <button
                className="ds-browser__category-header"
                onClick={() => toggleCategory(group.category)}
              >
                {isExpanded(group.category) ? (
                  <ChevronDown size={14} />
                ) : (
                  <ChevronRight size={14} />
                )}
                <span className="ds-browser__category-name">
                  {shortCat(group.category)}
                </span>
                <span className="ds-browser__category-count">
                  {group.datasets.length}
                </span>
              </button>

              {isExpanded(group.category) && (
                <div className="ds-browser__category-items">
                  {group.datasets.map((ds) => (
                    <button
                      key={`${ds.collection}:${ds.id}`}
                      className={`ds-browser__item${selectedDatasetId === ds.id ? " ds-browser__item--active" : ""}`}
                      onClick={() => onSelectDataset(ds)}
                      title={ds.description || ds.id}
                    >
                      <div className="ds-browser__item-name">{ds.name}</div>
                      <div className="ds-browser__item-meta">
                        <span className="ds-browser__item-id">{ds.id}</span>
                        {ds.temporal?.type && (
                          <span className="ds-browser__item-badge">
                            <Calendar size={10} />
                            {ds.temporal.values.length}
                          </span>
                        )}
                        {ds.columns.length > 0 && (
                          <span className="ds-browser__item-badge">
                            {ds.columns.length} var
                          </span>
                        )}
                        <span className="ds-browser__item-badge ds-browser__item-badge--source">
                          {ds.source === "drg.ro" ? "DRG" : "INS"}
                        </span>
                      </div>
                    </button>
                  ))}
                </div>
              )}
            </div>
          ))
        )}
      </div>
    </div>
  );
}