"use client";

import { PlusIcon } from "lucide-react";

import { PageContainer } from "@/components/f-ui/page/page-container";
import { SectionCard } from "@/components/f-ui/section-card/section-card";
import { Button } from "@/components/ui/button";

/** Default page frame: pinned header, muted scroll body, Create in `extra`. */
export function PageDemo() {
  return (
    <PageContainer
      className="h-88 rounded-xl border"
      title="Orders"
      subTitle="Open purchase orders for this workspace"
      extra={
        <Button type="button">
          <PlusIcon className="size-4" />
          Create
        </Button>
      }
    >
      <SectionCard title="Recent orders">
        <p className="text-sm text-muted-foreground">
          List, detail, and form pages all share this header | body | footer frame.
        </p>
      </SectionCard>
    </PageContainer>
  );
}

"use client";

import { useState } from "react";

import { PageContainer } from "@/components/f-ui/page/page-container";
import { SectionCard } from "@/components/f-ui/section-card/section-card";

const TABS = [
  { key: "open", label: "Open" },
  { key: "shipped", label: "Shipped" },
  { key: "closed", label: "Closed" },
];

/** Page-channel underline tabs on the header — not dataset pill tabs on the list toolbar. */
export function PageTabsDemo() {
  const [activeKey, setActiveKey] = useState("open");

  return (
    <PageContainer
      className="h-80 rounded-xl border"
      title="Orders"
      tabs={{ items: TABS, activeKey, onChange: setActiveKey }}
    >
      <SectionCard title={`${TABS.find((tab) => tab.key === activeKey)?.label} orders`}>
        <p className="text-sm text-muted-foreground">
          Switch the header tabs. Dataset segments belong on Data List Toolbar Tabs, not here.
        </p>
      </SectionCard>
    </PageContainer>
  );
}

"use client";

import { Descriptions } from "@/components/f-ui/descriptions/descriptions";
import { PageContainer } from "@/components/f-ui/page/page-container";
import { SectionCard } from "@/components/f-ui/section-card/section-card";
import { Statistic } from "@/components/f-ui/statistic/statistic";
import { StatusTag } from "@/components/f-ui/status-tag";
import { Button } from "@/components/ui/button";

const RECORD = {
  orderNumber: "ORD-1001",
  customer: "Acme Corp",
  owner: "Ada Lovelace",
  amount: 1280,
};

const HEADER_FIELDS = [
  { key: "customer", label: "Customer", kind: "text" as const },
  { key: "owner", label: "Owner", kind: "text" as const },
];

/** Header summary: Descriptions in `content`, Statistic KPIs in `extraContent`. */
export function PageHeaderSummaryDemo() {
  return (
    <PageContainer
      className="h-96 rounded-xl border"
      breadcrumb={
        <nav aria-label="breadcrumb" className="text-sm text-muted-foreground">
          Orders / ORD-1001
        </nav>
      }
      title={RECORD.orderNumber}
      tags={
        <StatusTag tone="success" icon="preset">
          Confirmed
        </StatusTag>
      }
      subTitle="Acme Corp · 2026-08-01"
      extra={
        <Button type="button" variant="outline">
          Edit
        </Button>
      }
      content={
        <Descriptions
          record={RECORD}
          fields={HEADER_FIELDS}
          layout="horizontal"
          column={{ base: 1, md: 2 }}
          size="small"
        />
      }
      extraContent={
        <Statistic title="Amount" value={RECORD.amount} suffix="USD" variant="plain" />
      }
    >
      <SectionCard title="Fulfillment">
        <p className="text-sm text-muted-foreground">
          Header KPIs are Statistic. Do not scale Descriptions values to hero type.
        </p>
      </SectionCard>
    </PageContainer>
  );
}

"use client";

import { FooterToolbar } from "@/components/f-ui/page/footer-toolbar";
import { PageContainer } from "@/components/f-ui/page/page-container";
import { PageFooter } from "@/components/f-ui/page/page-footer-slot";
import { SectionCard } from "@/components/f-ui/section-card/section-card";
import { Button } from "@/components/ui/button";

/** Docked actions teleport into the in-flow footer row via `PageFooter`. */
export function PageFooterDemo() {
  return (
    <PageContainer
      className="h-88 rounded-xl border"
      title="New order"
      subTitle="Footer stays pinned while the body scrolls"
    >
      <SectionCard title="Order details">
        <p className="text-sm text-muted-foreground">
          Scroll the body. Submit stays in the page footer row — not `position: fixed`.
        </p>
        <div className="text-muted-foreground space-y-2 text-sm">
          <p>Line 1</p>
          <p>Line 2</p>
          <p>Line 3</p>
          <p>Line 4</p>
          <p>Line 5</p>
        </div>
      </SectionCard>
      <PageFooter>
        <FooterToolbar extra={<span className="text-sm text-muted-foreground">Unsaved</span>}>
          <Button type="button" variant="outline">
            Cancel
          </Button>
          <Button type="button">Submit</Button>
        </FooterToolbar>
      </PageFooter>
    </PageContainer>
  );
}