// BEGIN CHANGE: reusable collapsible panel (account / character / admin)
"use client";

import { useEffect, useId, useState, type ReactNode } from "react";
import { useI18n } from "@/i18n/LanguageProvider";

type Props = {
  /** Stable key for localStorage preference (wa_panel_<id>) */
  id: string;
  title: ReactNode;
  children: ReactNode;
  defaultOpen?: boolean;
  headerRight?: ReactNode;
  className?: string;
  /** Extra classes for the body when open */
  bodyClassName?: string;
  /** Heading level visual size */
  titleClassName?: string;
};

function readStored(id: string): boolean | null {
  try {
    const v = localStorage.getItem(`wa_panel_${id}`);
    if (v === "0") return false;
    if (v === "1") return true;
  } catch {
    /* ignore */
  }
  return null;
}

function writeStored(id: string, open: boolean) {
  try {
    localStorage.setItem(`wa_panel_${id}`, open ? "1" : "0");
  } catch {
    /* ignore */
  }
}

export function CollapsiblePanel({
  id,
  title,
  children,
  defaultOpen = true,
  headerRight,
  className = "",
  bodyClassName = "",
  titleClassName = "text-base font-semibold",
}: Props) {
  const { t } = useI18n();
  const reactId = useId();
  const panelId = `panel-${id}-${reactId}`;
  const [open, setOpen] = useState(defaultOpen);
  const [hydrated, setHydrated] = useState(false);

  useEffect(() => {
    const stored = readStored(id);
    if (stored !== null) setOpen(stored);
    setHydrated(true);
  }, [id]);

  function toggle() {
    setOpen((prev) => {
      const next = !prev;
      writeStored(id, next);
      return next;
    });
  }

  const expandLabel = t.common.expandPanel;
  const collapseLabel = t.common.collapsePanel;

  return (
    <div className={`rounded-xl border border-border bg-panel ${className}`}>
      <div className="flex items-start gap-2 px-4 py-3 sm:px-6 sm:py-4">
        <button
          type="button"
          onClick={toggle}
          className="flex min-w-0 flex-1 items-center gap-2 text-left"
          aria-expanded={open}
          aria-controls={panelId}
          title={open ? collapseLabel : expandLabel}
        >
          <span
            className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border border-border text-xs text-muted"
            aria-hidden
          >
            {/* BEGIN CHANGE: ASCII +/- (minus was corrupted to ?) */}
            {open ? "-" : "+"}
            {/* END CHANGE */}
          </span>
          <span className={`min-w-0 ${titleClassName}`}>{title}</span>
        </button>
        {headerRight ? (
          <div className="shrink-0 pt-0.5" onClick={(e) => e.stopPropagation()}>
            {headerRight}
          </div>
        ) : null}
      </div>
      {open || !hydrated ? (
        <div
          id={panelId}
          hidden={!open}
          className={`border-t border-border/60 px-4 pb-4 pt-3 sm:px-6 sm:pb-6 ${bodyClassName}`}
        >
          {children}
        </div>
      ) : null}
    </div>
  );
}
// END CHANGE