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

export type CardProps = PlatformInterfaceIdentityProps & Omit<HTMLAttributes<HTMLElement>, "children" | "title"> & {
  title?: ReactNode;
  children: ReactNode;
  actions?: ReactNode;
  afterBody?: ReactNode;
  collapsible?: boolean;
  collapseKey?: string;
  persistCollapse?: boolean;
  as?: "section" | "article";
  headerClassName?: string;
  bodyClassName?: string;
  actionsClassName?: string;
};

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,
  afterBody,
  collapsible = false,
  collapseKey,
  persistCollapse = true,
  as = "section",
  className = "",
  headerClassName = "",
  bodyClassName = "",
  actionsClassName = "",
  interfaceId,
  helpContextId,
  helpModuleId,
  helpTopicId,
  ...props
}: CardProps) {
  const { translateText } = usePlatformLanguage();
  const Element = as;
  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", bodyClassName].filter(Boolean).join(" ")}>{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 (
    <Element
      {...props}
      className={["card", collapsible ? "card-collapsible" : "", collapsed ? "is-collapsed" : "", className].filter(Boolean).join(" ")}
      data-help-scope="interface"
      data-interface-id={interfaceId}
      data-help-context-id={helpContextId}
      data-help-module-id={helpModuleId}
      data-help-topic-id={helpTopicId}
      data-help-key={typeof title === "string" ? title : undefined}
    >
      {hasHeader &&
      <header className={["card-header", headerClassName].filter(Boolean).join(" ")}>
          {title && (typeof title === "string" ? <h2>{translateText(title)}</h2> : <div className="card-title-node">{title}</div>)}
          {(actions || collapsible) &&
        <div className={["card-actions", actionsClassName].filter(Boolean).join(" ")}>
              {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}{afterBody}</div> : <>{body}{afterBody}</>)}
    </Element>);

}