import type { Metadata } from "next";

import { Example } from "@/components/design-system/example";
import { OnThisPage } from "@/components/design-system/on-this-page";
import { PageHeader } from "@/components/design-system/page-header";
import { UserMenuSection } from "@/components/design-system/sections/records-more-demo";
import { Section } from "@/components/design-system/section";
import { AppShellPattern } from "@/components/design-system/sections/layout-patterns/app-shell";
import { DashboardPattern } from "@/components/design-system/sections/layout-patterns/dashboard";
import { DetailPagePattern, LauncherPattern } from "@/components/design-system/sections/layout-patterns/detail-page";
import { LoginLayoutPattern } from "@/components/design-system/sections/layout-patterns/login-layout";
import { SettingsFormPattern } from "@/components/design-system/sections/layout-patterns/settings-form";
import { SideNavTones } from "@/components/design-system/sections/layout-patterns/side-nav-tones";

export const metadata: Metadata = { title: "Layout and screens | Medora Design System" };

export default function LayoutPatternsPage() {
  return (
    <>
      <PageHeader
        title="Layout and screens"
        description="Whole-screen compositions built from the parts above: side navigation, app shell, dashboard, launcher, detail page, settings page and sign-in. Module screens such as the till and the inventory list are on their own pages under Modules."
      />
      <OnThisPage />
      <Section
        id="side-navigation"
        title="Side navigation"
        description="Nine groups with UPPERCASE labels, outline icons and a mint active pill, in both tones. Click an item to move the active state. The Light / Teal switch in the top bar applies a tone to the real sidebar and the app shell below."
      >
        <Example title="Light and teal tones" bare><SideNavTones /></Example>
      </Section>
      <Section id="app-shell" title="App shell" description="The same navigation in context: collapses to an icon rail, with a top bar. Follows the Light / Teal switch.">
        <Example title="App shell" bare><AppShellPattern /></Example>
      </Section>
      <UserMenuSection />
      <Section id="dashboard" title="Dashboard">
        <Example title="Dashboard" bare><DashboardPattern /></Example>
      </Section>
      <Section id="launcher" title="Tile home / launcher" description="One tile per main menu the role may use, on the Dashboard above the panels and as the desktop app's home. Hidden menus leave no gap.">
        <Example title="Launcher" bare><LauncherPattern /></Example>
      </Section>
      <Section id="detail-page" title="Detail page" description="A record's page: record header, tabs shown only with permission, content beside a side summary. The Account tab is read-only and sends you to Accounts to change anything.">
        <Example title="Customer profile" bare><DetailPagePattern /></Example>
      </Section>
      <Section id="settings" title="Settings page" description="A section list beside one long page; Find a setting narrows it; the current section is marked as you scroll. One save bar, only when something changed, naming the changed sections.">
        <Example title="General settings" bare><SettingsFormPattern /></Example>
      </Section>
      <Section id="login" title="Login layout">
        <Example title="Login" bare><LoginLayoutPattern /></Example>
      </Section>
    </>
  );
}