import React, { useState } from "react";
import { LayoutGroup, motion } from "motion/react";
import { GripVertical } from "lucide-react";
import { limitProviderIconKey, limitProviderName } from "../hooks/use-limits-display-prefs.js";
import { copy } from "../lib/copy";
import { cn } from "../lib/cn";
import { ProviderIcon } from "../ui/dashboard/components/ProviderIcon.jsx";

const LIMITS_SETTINGS_ICON_CLASS = "shrink-0 text-oai-gray-900 dark:text-oai-gray-200";

function ToggleSwitch({ checked, onChange, ariaLabel }) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      aria-label={ariaLabel}
      onClick={onChange}
      className={cn(
        "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-oai-brand-500",
        checked ? "bg-oai-brand-500" : "bg-oai-gray-300 dark:bg-oai-gray-700",
      )}
    >
      <span
        className={cn(
          "inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform",
          checked ? "translate-x-[18px]" : "translate-x-[3px]",
        )}
      />
    </button>
  );
}

/**
 * Bare drag-and-drop reorder + visibility list for usage-limit providers.
 * Renders only the row list — outer chrome (card, header) is supplied by the
 * surrounding container (e.g. SettingsPage SectionCard).
 *
 * `prefs` is the return value of `useLimitsDisplayPrefs()`.
 */
export function LimitsSettingsPanel({ prefs }) {
  const { order, visibility, toggle, moveToward } = prefs;
  const [draggingId, setDraggingId] = useState(null);
  const [dragOverId, setDragOverId] = useState(null);

  const handleDragStart = (id) => (e) => {
    setDraggingId(id);
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/plain", id);
  };

  const handleDragOver = (id) => (e) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
    if (draggingId && draggingId !== id && dragOverId !== id) {
      setDragOverId(id);
      moveToward(draggingId, id);
    }
  };

  const handleDragEnd = () => {
    setDraggingId(null);
    setDragOverId(null);
  };

  const handleDrop = (e) => {
    e.preventDefault();
    setDraggingId(null);
    setDragOverId(null);
  };

  return (
    <LayoutGroup>
      <div className="flex flex-col">
        {order.map((id) => {
          const visible = visibility[id] !== false;
          const isDragging = draggingId === id;
          return (
            <motion.div
              key={id}
              layout
              transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
              draggable
              onDragStart={handleDragStart(id)}
              onDragOver={handleDragOver(id)}
              onDragEnd={handleDragEnd}
              onDrop={handleDrop}
              className={cn(
                "flex items-center gap-3 py-2 rounded-md",
                "hover:bg-oai-gray-100/60 dark:hover:bg-oai-gray-800/60",
                isDragging && "opacity-40",
              )}
              style={{ cursor: isDragging ? "grabbing" : "grab" }}
            >
              <GripVertical
                className="h-4 w-4 shrink-0 text-oai-gray-400 dark:text-oai-gray-500"
                strokeWidth={1.75}
                aria-hidden
              />

              {limitProviderIconKey(id) ? (
                <ProviderIcon
                  provider={limitProviderIconKey(id)}
                  size={18}
                  className={cn("pointer-events-none", LIMITS_SETTINGS_ICON_CLASS)}
                />
              ) : null}

              <span className="flex-1 text-sm text-oai-gray-900 dark:text-oai-gray-200 select-none">
                {limitProviderName(id)}
              </span>

              <div
                onMouseDown={(e) => e.stopPropagation()}
                draggable={false}
              >
                <ToggleSwitch
                  checked={visible}
                  onChange={() => toggle(id)}
                  ariaLabel={`${copy("limits.settings.toggle_visible")}: ${limitProviderName(id)}`}
                />
              </div>
            </motion.div>
          );
        })}
      </div>
    </LayoutGroup>
  );
}
