import { type ReactNode, type CSSProperties } from "react";
import { useTranslation } from "react-i18next";
import { ChevronDown, Eye, EyeOff, GripVertical } from "lucide-react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

// One collapsible "island" card inside a SidePanel: a titled glass-card with per-group collapse,
// and — in the panel's edit mode — a drag handle (reorder) and a hide toggle. Generalized from
// the feed sidebar's WidgetCard so all three panels share the same island look and behavior.
export default function PanelGroup({
  id,
  title,
  editing,
  collapsed,
  hidden,
  onToggleCollapse,
  onToggleHidden,
  children,
}: {
  id: string;
  title: string;
  editing: boolean;
  collapsed: boolean;
  hidden: boolean;
  onToggleCollapse: () => void;
  onToggleHidden: () => void;
  children: ReactNode;
}) {
  const { t } = useTranslation();
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id,
    disabled: !editing,
  });
  const style: CSSProperties = { transform: CSS.Transform.toString(transform), transition };
  const showBody = !editing && !collapsed;

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={`glass-card rounded-xl ${
        isDragging ? "relative z-base shadow-2xl ring-1 ring-accent" : ""
      } ${hidden && editing ? "opacity-50" : ""}`}
    >
      <div className="flex items-center gap-1.5 px-3 py-2">
        {editing && (
          <button
            {...attributes}
            {...listeners}
            title={t("sidebar.dragToReorder")}
            className="-ml-1 cursor-grab active:cursor-grabbing text-muted hover:text-fg touch-none"
          >
            <GripVertical className="w-4 h-4" />
          </button>
        )}
        <button
          onClick={editing ? undefined : onToggleCollapse}
          disabled={editing}
          className="flex-1 min-w-0 flex items-center text-left select-none text-xs uppercase tracking-wide text-muted enabled:hover:text-fg transition"
        >
          <span className="truncate">{title}</span>
        </button>
        {editing ? (
          <button
            onClick={onToggleHidden}
            title={hidden ? t("sidebar.showWidget") : t("sidebar.hideWidget")}
            className="text-muted hover:text-fg"
          >
            {hidden ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
          </button>
        ) : (
          <button
            onClick={onToggleCollapse}
            title={collapsed ? t("sidebar.expand") : t("sidebar.collapse")}
            className="text-muted hover:text-fg"
          >
            <ChevronDown
              className={`w-4 h-4 transition-transform ${collapsed ? "-rotate-90" : ""}`}
            />
          </button>
        )}
      </div>
      {showBody && <div className="px-3 pb-3">{children}</div>}
    </div>
  );
}