import { useMemo } from "react";

export type UhuruContentCategory =
  | "Getting Started"
  | "Providers"
  | "Hooks"
  | "Foundations"
  | "Actions"
  | "Forms"
  | "Surfaces";

export type UhuruComponentContent = {
  id: string;
  title: string;
  category: UhuruContentCategory;
  summary: string;
  code: string;
  keywords: string[];
};

export const uhuruContentCatalog: UhuruComponentContent[] = [
  {
    id: "installation",
    title: "Install SDK",
    category: "Getting Started",
    summary: "Install the package and wire Tailwind plus the provider once.",
    keywords: ["install", "setup", "tailwind", "workspace"],
    code: `npm install @digitwhale_innovations/uhuru-ui

// main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { UhuruProvider } from "@digitwhale_innovations/uhuru-ui";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <UhuruProvider theme="light" density="compact">
      <App />
    </UhuruProvider>
  </React.StrictMode>,
);`,
  },
  {
    id: "provider",
    title: "UhuruProvider",
    category: "Providers",
    summary: "Wrap the full app once so routes inherit tokens, density, preset accents, and theme behavior.",
    keywords: ["provider", "theme", "density", "root"],
    code: `import { UhuruProvider } from "@digitwhale_innovations/uhuru-ui";

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <UhuruProvider
      theme="light"
      density="compact"
      presetAccent="brown"
      accentPresets={{
        graphite: {
          accentSolid: "#334155",
          accentStrong: "#1f2937",
          actionPrimary: "#334155",
          actionPrimaryHover: "#1f2937",
        },
      }}
    >
      {children}
    </UhuruProvider>
  );
}`,
  },
  {
    id: "theme-hook",
    title: "useUhuruTheme",
    category: "Hooks",
    summary: "Read and toggle the active Uhuru theme from the provider context.",
    keywords: ["hook", "theme", "toggle", "context"],
    code: `import { Button, useUhuruTheme } from "@digitwhale_innovations/uhuru-ui";

export function ThemeToggle() {
  const { theme, toggleTheme } = useUhuruTheme();

  return (
    <Button onClick={toggleTheme} tone="secondary">
      Theme: {theme}
    </Button>
  );
}`,
  },
  {
    id: "alert-hook",
    title: "useUhuruAlert",
    category: "Hooks",
    summary: "Trigger global app alerts and control placement from UhuruProvider.",
    keywords: ["alert", "toast", "notification", "hook"],
    code: `import { Button, useUhuruAlert } from "@digitwhale_innovations/uhuru-ui";

export function SaveButton() {
  const { alert } = useUhuruAlert();

  return (
    <Button
      onClick={() =>
        alert({
          title: "Saved",
          description: "Your changes were applied successfully.",
          tone: "success",
        })
      }
    >
      Save changes
    </Button>
  );
}`,
  },
  {
    id: "show-code",
    title: "showCode",
    category: "Hooks",
    summary: "Read registered component source from the SDK in a dev-friendly way.",
    keywords: ["hook", "source", "code", "registry"],
    code: `import { Button, showCode, useUhuruCode } from "@digitwhale_innovations/uhuru-ui";

const source = showCode(Button);

export function Example() {
  const liveSource = useUhuruCode(Button);
  return <pre>{liveSource}</pre>;
}`,
  },
  {
    id: "tokens",
    title: "Design Tokens",
    category: "Foundations",
    summary: "Read from the shared token object for documentation and custom surfaces.",
    keywords: ["tokens", "colors", "typography", "spacing"],
    code: `import { tokens } from "@digitwhale_innovations/uhuru-ui";

export function BrandHeadline() {
  return (
    <h1
      style={{
        fontFamily: tokens.typography.fontFamily.heading,
        color: tokens.color.neutral[900],
      }}
    >
      Uhuru UI
    </h1>
  );
}`,
  },
  {
    id: "button",
    title: "Button",
    category: "Actions",
    summary: "Primary action is black. Secondary and ghost stay quiet.",
    keywords: ["button", "actions", "cta", "primary"],
    code: `import { Button } from "@digitwhale_innovations/uhuru-ui";

export function Example() {
  return (
    <div className="flex gap-3">
      <Button>Save changes</Button>
      <Button tone="secondary">Secondary</Button>
      <Button tone="ghost">Ghost</Button>
    </div>
  );
}`,
  },
  {
    id: "text-field",
    title: "TextField",
    category: "Forms",
    summary: "Compact field with readable labels, hints, and error states.",
    keywords: ["input", "field", "forms", "text"],
    code: `import { TextField } from "@digitwhale_innovations/uhuru-ui";

export function Example() {
  return (
    <TextField
      label="Workspace name"
      placeholder="Uhuru Finance"
      hint="Compact field with clear structure."
    />
  );
}`,
  },
  {
    id: "card",
    title: "Card",
    category: "Surfaces",
    summary: "A hardened white surface with calm spacing and quiet borders.",
    keywords: ["card", "surface", "panel", "content"],
    code: `import { Card, CardBody, CardHeader } from "@digitwhale_innovations/uhuru-ui";

export function Example() {
  return (
    <Card>
      <CardHeader
        eyebrow="Overview"
        title="Quarterly revenue"
        description="A hardened surface with quiet spacing."
      />
      <CardBody>
        <p>$482,000 this quarter.</p>
      </CardBody>
    </Card>
  );
}`,
  },
] as const;

export function getUhuruContent(id: string) {
  return uhuruContentCatalog.find((item) => item.id === id) ?? null;
}

export function getUhuruCategories() {
  return Array.from(
    new Set(uhuruContentCatalog.map((item) => item.category)),
  ) as UhuruContentCategory[];
}

export function useUhuruContent(id: string) {
  return useMemo(() => getUhuruContent(id), [id]);
}

export function useUhuruContentText(id: string) {
  return useMemo(() => getUhuruContent(id)?.code ?? "", [id]);
}

export function useUhuruContentByCategory(category: UhuruContentCategory | "All") {
  return useMemo(() => {
    if (category === "All") {
      return uhuruContentCatalog;
    }

    return uhuruContentCatalog.filter((item) => item.category === category);
  }, [category]);
}