import { useEffect, useState, type ReactNode } from "react";
import { ChevronDown } from "lucide-react";
import { usePlatformLanguage } from "../i18n/LanguageContext";

type CardProps = {
  title?: ReactNode;
  children: ReactNode;
  actions?: ReactNode;
  collapsible?: boolean;
  collapseKey?: string;
  persistCollapse?: boolean;
};

function resolveCollapseStorageKey(collapsible: boolean, persistCollapse: boolean, collapseKey: string | undefined, title: ReactNode): string | null {
  if (!collapsible || !persistCollapse) return null;
  if (collapseKey) return `govoplan.card.collapsed:${collapseKey}`;
  if (typeof window === "undefined" || typeof title !== "string") return null;
  const normalizedTitle = title.trim();
  if (!normalizedTitle) return null;
  return `govoplan.card.collapsed:${window.location.pathname}:${normalizedTitle}`;
}

function readCollapseState(storageKey: string | null): boolean {
  if (!storageKey || typeof window === "undefined") return false;
  try {
    return window.localStorage.getItem(storageKey) === "1";
  } catch {
    return false;
  }
}

function writeCollapseState(storageKey: string | null, collapsed: boolean): void {
  if (!storageKey || typeof window === "undefined") return;
  try {
    window.localStorage.setItem(storageKey, collapsed ? "1" : "0");
  } catch {

    // localStorage may be unavailable in private or restricted contexts.
  }}

export default function Card({ title, children, actions, collapsible = false, collapseKey, persistCollapse = true }: CardProps) {
  const { translateText } = usePlatformLanguage();
  const storageKey = resolveCollapseStorageKey(collapsible, persistCollapse, collapseKey, title);
  const [collapseState, setCollapseState] = useState(() => ({ storageKey, collapsed: readCollapseState(storageKey) }));
  const collapsed = collapseState.storageKey === storageKey ? collapseState.collapsed : readCollapseState(storageKey);
  const hasHeader = Boolean(title || actions || collapsible);
  const body = <div className="card-body">{children}</div>;
  const shouldRenderBody = !collapsible || !collapsed;
  const collapseLabel = translateText(collapsed ? "i18n:govoplan-core.show_content.0528d8d2" : "i18n:govoplan-core.show_header_only.24afefca");

  useEffect(() => {
    setCollapseState({ storageKey, collapsed: readCollapseState(storageKey) });
  }, [storageKey]);

  function toggleCollapsed() {
    const nextCollapsed = !collapsed;
    writeCollapseState(storageKey, nextCollapsed);
    setCollapseState({ storageKey, collapsed: nextCollapsed });
  }

  return (
    <section className={`card${collapsible ? " card-collapsible" : ""}${collapsed ? " is-collapsed" : ""}`}>
      {hasHeader &&
      <header className="card-header">
          {title && (typeof title === "string" ? <h2>{translateText(title)}</h2> : <div className="card-title-node">{title}</div>)}
          {(actions || collapsible) &&
        <div className="card-actions">
              {actions}
              {collapsible &&
          <button
            type="button"
            className="card-collapse-toggle"
            aria-label={collapseLabel}
            aria-expanded={!collapsed}
            title={collapseLabel}
            onClick={toggleCollapsed}>
            
                  <ChevronDown size={18} strokeWidth={2.4} aria-hidden="true" />
                </button>
          }
            </div>
        }
        </header>
      }
      {shouldRenderBody && (collapsible ? <div className="card-collapse-region">{body}</div> : body)}
    </section>);

}