import type { JSX } from "solid-js";
import { LayoutDisplaySection } from "./sections/layout-display";
import { InputsBasicSection } from "./sections/inputs-basic";
import { InputsSelectionSection } from "./sections/inputs-selection";
import { InputsAdvancedSection } from "./sections/inputs-advanced";
import { NavigationSection } from "./sections/navigation";
import { OverlaysSection } from "./sections/overlays";
import { FeedbackStatusSection } from "./sections/feedback-status";
import { DataSection } from "./sections/data";

const categories = [
  { id: "layout-display", label: "Layout & Display" },
  { id: "inputs-basic", label: "Inputs: Basic" },
  { id: "inputs-selection", label: "Inputs: Selection" },
  { id: "inputs-advanced", label: "Inputs: Advanced" },
  { id: "navigation", label: "Navigation" },
  { id: "overlays", label: "Overlays" },
  { id: "feedback-status", label: "Feedback & Status" },
  { id: "data", label: "Data" },
] as const;

type Category = (typeof categories)[number];

/** Renders a single nav anchor link for a category. */
function NavLink(props: { cat: Category }) {
  const link = (
    <a href={`#${props.cat.id}`} class="text-gray-500 hover:text-gray-900 transition-colors">
      {props.cat.label}
    </a>
  );
  return link;
}

/** Section wrapper with category heading and anchor target. */
function Section(props: { id: string; title: string; children: JSX.Element }) {
  const content = (
    <section id={props.id} class="scroll-mt-20 mb-16">
      <div class="border-b border-gray-300 pb-2 mb-8">
        <h2 class="text-2xl font-bold text-gray-800">{props.title}</h2>
      </div>
      {props.children}
    </section>
  );
  return content;
}

/** Kitchen sink showcase page with all PettyUI components. */
export function App() {
  const page = (
    <div class="min-h-screen bg-gray-50">
      <header class="sticky top-0 z-50 bg-white border-b border-gray-200 shadow-sm">
        <div class="max-w-5xl mx-auto px-6 py-3 flex items-center justify-between">
          <h1 class="text-lg font-bold text-gray-900">
            PettyUI <span class="font-normal text-gray-400">Kitchen Sink</span>
          </h1>
          <nav class="flex gap-3 text-sm">
            {categories.map((cat) => <NavLink cat={cat} />)}
          </nav>
        </div>
      </header>

      <main class="max-w-5xl mx-auto px-6 py-12">
        <Section id="layout-display" title="Layout & Display">
          <LayoutDisplaySection />
        </Section>
        <Section id="inputs-basic" title="Inputs: Basic">
          <InputsBasicSection />
        </Section>
        <Section id="inputs-selection" title="Inputs: Selection">
          <InputsSelectionSection />
        </Section>
        <Section id="inputs-advanced" title="Inputs: Advanced">
          <InputsAdvancedSection />
        </Section>
        <Section id="navigation" title="Navigation">
          <NavigationSection />
        </Section>
        <Section id="overlays" title="Overlays">
          <OverlaysSection />
        </Section>
        <Section id="feedback-status" title="Feedback & Status">
          <FeedbackStatusSection />
        </Section>
        <Section id="data" title="Data">
          <DataSection />
        </Section>
      </main>
    </div>
  );
  return page;
}
