"use client";

import { useState, useEffect, useCallback } from "react";
import {
  Globe,
  Map,
  FileSpreadsheet,
} from "lucide-react";
import Link from "next/link";
import { DatasetBrowser } from "@/components/explorer/DatasetBrowser";
import { DataPreview } from "@/components/explorer/DataPreview";

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;
}

export default function ExplorerPage() {
  const [datasets, setDatasets] = useState<ExplorerDataset[]>([]);
  const [collections, setCollections] = useState<CollectionInfo[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedDataset, setSelectedDataset] = useState<ExplorerDataset | null>(null);
  const [level, setLevel] = useState("county");

  // Load datasets from collections API
  useEffect(() => {
    (async () => {
      try {
        const res = await fetch("/datahub/api/explorer/collections");
        if (res.ok) {
          const data = await res.json();
          setDatasets(data.datasets || []);
          setCollections(data.collections || []);
        }
      } catch (e) {
        console.error("Failed to load collections:", e);
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  const handleSelectDataset = useCallback((ds: ExplorerDataset) => {
    setSelectedDataset(ds);
  }, []);

  const handleLevelChange = useCallback((newLevel: string) => {
    setLevel(newLevel);
  }, []);

  return (
    <div className="app-layout">
      {/* Header */}
      <header className="app-header">
        <div className="app-header__logo">
          <div className="app-header__logo-icon">
            <Globe size={16} color="white" />
          </div>
          <span>geo-spatial.org Data Hub</span>
          <span className="app-header__subtitle">Explorer date tabelar</span>
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <Link
            href="/"
            className="explorer-nav-btn"
            title="Înapoi la hartă"
          >
            <Map size={15} />
            Hartă
          </Link>
        </div>
      </header>

      {/* Main content */}
      <main className="explorer-layout">
        {/* Sidebar */}
        <DatasetBrowser
          datasets={datasets}
          collections={collections}
          loading={loading}
          selectedDatasetId={selectedDataset?.id}
          selectedLevel={level}
          onSelectDataset={handleSelectDataset}
          onSelectLevel={handleLevelChange}
        />

        {/* Preview area */}
        <div className="explorer-main">
          {selectedDataset ? (
            <DataPreview
              datasetId={selectedDataset.id}
              level={level}
              collection={selectedDataset.parquetDir}
              datasetMeta={selectedDataset}
              onLevelChange={handleLevelChange}
            />
          ) : (
            <div className="explorer-empty">
              <div className="explorer-empty__icon">
                <FileSpreadsheet size={48} strokeWidth={1.2} />
              </div>
              <h2>Explorează datele statistice</h2>
              <p>
                Selectează un set de date din panoul lateral pentru a-l
                vizualiza.
              </p>
              <div className="explorer-empty__stats">
                {collections.map((c) => (
                  <div key={c.id} className="explorer-empty__stat">
                    <span className="explorer-empty__stat-value">
                      {c.count}
                    </span>
                    <span className="explorer-empty__stat-label">
                      {c.name}
                    </span>
                  </div>
                ))}
                {loading && (
                  <div className="explorer-empty__stat">
                    <span className="explorer-empty__stat-value">...</span>
                    <span className="explorer-empty__stat-label">
                      se încarcă
                    </span>
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      </main>
    </div>
  );
}