import type { ReactNode } from "react";
import type { ComponentRecord } from "../types";
import { ChevronDown, ChevronUp } from "lucide-react";
import ComponentGuideInfo, { ComponentDisplayTitle } from "./ComponentGuideInfo";

type ComponentAccordionItemProps = {
  component: ComponentRecord;
  isExpanded: boolean;
  onToggle: () => void;
  actions: ReactNode;
  preview: ReactNode;
  previewMaxHeight?: number;
  withBorder?: boolean;
};

export default function ComponentAccordionItem({
  component,
  isExpanded,
  onToggle,
  actions,
  preview,
  previewMaxHeight = 420,
  withBorder = false,
}: ComponentAccordionItemProps) {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        padding: "16px 20px",
        background: "#fff",
        borderRadius: 12,
        boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
        gap: 12,
        border: withBorder ? "1px solid #e2e8f0" : undefined,
      }}
    >
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
        <button
          type="button"
          onClick={onToggle}
          aria-expanded={isExpanded}
          aria-controls={`component-accordion-content-${component.id}`}
          style={{
            display: "flex",
            alignItems: "center",
            gap: 10,
            background: "transparent",
            border: "none",
            padding: 0,
            cursor: "pointer",
            textAlign: "left",
            color: "inherit",
            minWidth: 0,
            flex: 1,
          }}
        >
          {isExpanded ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
          <div style={{ minWidth: 0 }}>
            <ComponentDisplayTitle
              component={component}
              as="div"
              style={{ fontWeight: 600, fontSize: 16 }}
            />
            <div style={{ color: "#64748b", fontSize: 14, marginTop: 4 }}>
              {component.slug}
              {component.category ? ` · ${component.category}` : ""}
            </div>
            <ComponentGuideInfo component={component} variant="compact" />
          </div>
        </button>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>{actions}</div>
      </div>

      <div
        id={`component-accordion-content-${component.id}`}
        style={{
          display: "grid",
          gridTemplateRows: isExpanded ? "1fr" : "0fr",
          transition: "grid-template-rows 220ms ease, opacity 220ms ease",
          opacity: isExpanded ? 1 : 0,
          pointerEvents: isExpanded ? "auto" : "none",
        }}
      >
        <div style={{ overflow: "hidden" }}>
          {isExpanded && <ComponentGuideInfo component={component} variant="full" />}
          <div
            style={{
              padding: 12,
              background: "#f8fafc",
              borderRadius: 8,
              border: "1px solid #e2e8f0",
              overflow: "auto",
              maxHeight: previewMaxHeight,
            }}
          >
            {preview}
          </div>
        </div>
      </div>
    </div>
  );
}