"use client";

import { useState, useCallback } from "react";
import { Layers, ChevronRight, ChevronDown } from "lucide-react";
import { Switch } from "@/shared/components/ui/switch";
import { Label } from "@/shared/components/ui/label";
import { Button } from "@/shared/components/ui/button";
import { cn } from "@/shared/lib/utils";
import type { LayerVisibility } from "../types";

/* ------------------------------------------------------------------ */
/*  Layer definitions                                                  */
/* ------------------------------------------------------------------ */

type LayerGroupDef = {
  id: string;
  label: string;
  description: string;
  color: string;
  defaultVisible: boolean;
};

const LAYER_GROUPS: LayerGroupDef[] = [
  {
    id: "terenuri",
    label: "Terenuri",
    description: "Parcele cadastrale (zoom >= 13)",
    color: "#22c55e",
    defaultVisible: false,
  },
  {
    id: "cladiri",
    label: "Cladiri",
    description: "Constructii (zoom >= 14)",
    color: "#3b82f6",
    defaultVisible: false,
  },
  {
    id: "uats",
    label: "Limite UAT",
    description: "Unitati administrativ-teritoriale",
    color: "#7c3aed",
    defaultVisible: false,
  },
  {
    id: "administrativ",
    label: "Intravilan",
    description: "Limite intravilan, arii speciale (zoom >= 13)",
    color: "#ea580c",
    defaultVisible: false,
  },
];

/* ------------------------------------------------------------------ */
/*  Props                                                              */
/* ------------------------------------------------------------------ */

type LayerPanelProps = {
  visibility: LayerVisibility;
  onVisibilityChange: (visibility: LayerVisibility) => void;
  className?: string;
};

/* ------------------------------------------------------------------ */
/*  Component                                                          */
/* ------------------------------------------------------------------ */

export function LayerPanel({
  visibility,
  onVisibilityChange,
  className,
}: LayerPanelProps) {
  const [collapsed, setCollapsed] = useState(false);

  const handleToggle = useCallback(
    (groupId: string, checked: boolean) => {
      onVisibilityChange({ ...visibility, [groupId]: checked });
    },
    [visibility, onVisibilityChange]
  );

  return (
    <div
      className={cn(
        "bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg",
        "transition-all duration-200",
        collapsed ? "w-10" : "w-64",
        className
      )}
    >
      {/* Header */}
      <Button
        variant="ghost"
        size="sm"
        className={cn(
          "w-full flex items-center gap-2 px-2.5 py-2 h-auto",
          collapsed ? "justify-center" : "justify-start"
        )}
        onClick={() => setCollapsed(!collapsed)}
        title={collapsed ? "Afiseaza layere" : "Ascunde layere"}
      >
        <Layers className="h-4 w-4 shrink-0" />
        {!collapsed && (
          <>
            <span className="text-sm font-medium flex-1 text-left">
              Straturi
            </span>
            {collapsed ? (
              <ChevronRight className="h-3.5 w-3.5" />
            ) : (
              <ChevronDown className="h-3.5 w-3.5" />
            )}
          </>
        )}
      </Button>

      {/* Layer list */}
      {!collapsed && (
        <div className="px-3 pb-3 space-y-3">
          {LAYER_GROUPS.map((group) => {
            const isVisible = visibility[group.id] !== false;
            return (
              <div key={group.id} className="flex items-start gap-3">
                {/* Color swatch */}
                <div
                  className="mt-0.5 h-4 w-4 rounded-sm border shrink-0"
                  style={{
                    backgroundColor: isVisible ? group.color : "transparent",
                    borderColor: group.color,
                    opacity: isVisible ? 1 : 0.4,
                  }}
                />

                {/* Label + description */}
                <div className="flex-1 min-w-0">
                  <Label
                    htmlFor={`layer-${group.id}`}
                    className="text-sm font-medium cursor-pointer leading-tight"
                  >
                    {group.label}
                  </Label>
                  <p className="text-xs text-muted-foreground leading-tight mt-0.5">
                    {group.description}
                  </p>
                </div>

                {/* Toggle */}
                <Switch
                  id={`layer-${group.id}`}
                  checked={isVisible}
                  onCheckedChange={(checked) =>
                    handleToggle(group.id, checked)
                  }
                  className="shrink-0"
                />
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

/** Returns the default visibility state */
export function getDefaultVisibility(): LayerVisibility {
  const vis: LayerVisibility = {};
  for (const g of LAYER_GROUPS) {
    vis[g.id] = g.defaultVisible;
  }
  return vis;
}
