import type { CSSProperties } from "react";
import {
  getComponentCatalog,
  getComponentDisplayName,
  type ComponentCatalogEntry,
} from "../lib/componentCatalog";
import type { ComponentRecord } from "../types";

type ComponentGuideInfoProps = {
  component: Pick<ComponentRecord, "name" | "slug" | "category">;
  variant?: "compact" | "full";
};

const labelStyle: CSSProperties = {
  fontSize: 11,
  fontWeight: 700,
  textTransform: "uppercase",
  letterSpacing: "0.04em",
  color: "#64748b",
  marginBottom: 2,
};

const valueStyle: CSSProperties = {
  fontSize: 13,
  color: "#334155",
  lineHeight: 1.45,
  margin: 0,
};

function GuideRow({ label, value }: { label: string; value: string }) {
  return (
    <div style={{ marginBottom: 10 }}>
      <div style={labelStyle}>{label}</div>
      <p style={valueStyle}>{value}</p>
    </div>
  );
}

function CompactGuide({ entry, category }: { entry: ComponentCatalogEntry; category: string | null }) {
  return (
    <div style={{ marginTop: 8 }}>
      <p style={{ margin: "0 0 6px", fontSize: 12, color: "#64748b", lineHeight: 1.45 }}>{entry.shortDescription}</p>
      <p style={{ margin: 0, fontSize: 11, color: "#0f766e", fontWeight: 600, lineHeight: 1.4 }}>
        Best for: {entry.recommendedUse}
      </p>
      {category && (
        <span style={{ display: "inline-block", marginTop: 6, fontSize: 11, color: "#94a3b8" }}>
          {category} · {entry.layoutType.split(" ")[0]} layout
        </span>
      )}
    </div>
  );
}

function FullGuide({ entry }: { entry: ComponentCatalogEntry }) {
  return (
    <div
      style={{
        padding: 14,
        background: "#f0fdf4",
        border: "1px solid #bbf7d0",
        borderRadius: 12,
        marginBottom: 16,
      }}
    >
      <p style={{ margin: "0 0 12px", fontSize: 14, color: "#166534", fontWeight: 600 }}>Component guide</p>
      <GuideRow label="Purpose" value={entry.purpose} />
      <GuideRow label="Layout" value={entry.layoutType} />
      <GuideRow label="Key difference" value={entry.keyDifference} />
      <GuideRow label="Best for" value={entry.recommendedUse} />
    </div>
  );
}

export default function ComponentGuideInfo({ component, variant = "compact" }: ComponentGuideInfoProps) {
  const entry = getComponentCatalog(component.slug);
  if (!entry) return null;

  if (variant === "full") {
    return <FullGuide entry={entry} />;
  }

  return <CompactGuide entry={entry} category={component.category} />;
}

export function ComponentDisplayTitle({
  component,
  style,
  as: Tag = "span",
  id,
}: {
  component: Pick<ComponentRecord, "name" | "slug">;
  style?: CSSProperties;
  as?: "span" | "div" | "h3";
  id?: string;
}) {
  const displayName = getComponentDisplayName(component);
  const catalog = getComponentCatalog(component.slug);
  const showLegacyName = catalog && catalog.displayName !== component.name;

  return (
    <Tag id={id} style={style}>
      {displayName}
      {showLegacyName && (
        <span style={{ display: "block", fontSize: "0.85em", fontWeight: 500, color: "#94a3b8", marginTop: 2 }}>
          Library name: {component.name}
        </span>
      )}
    </Tag>
  );
}