import type { Meta, StoryObj } from "@storybook/react-vite"
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
  Button,
  PageHeader,
  PageHeaderActions,
  PageHeaderContent,
  PageHeaderDescription,
  PageHeaderTitle,
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
  Tabs, TabsContent, TabsList, TabsTrigger,
} from "@hm-design/ui"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"

const meta = {
  title: "Patterns/Layout/Page Header",
  component: PageHeader,
  parameters: { layout: "fullscreen", controls: { disable: true } },
} satisfies Meta<typeof PageHeader>
export default meta
type Story = StoryObj<typeof meta>

// Content composition only. The consuming screen owns navigation and action handlers.
// Dashboard's minimum width and internal navigation belong to DashboardLayout.
export const All: Story = {
  name: "Page Header",
  render: () => (
    <StoryPage>
      <StoryPageHeader title="Page Header" />
      <StorySection title="Overview">
        <PageHeader><PageHeaderContent><PageHeaderTitle>업무 현황</PageHeaderTitle></PageHeaderContent></PageHeader>
      </StorySection>
      <StorySection title="Breadcrumb 포함형">
        <PageHeader>
          <PageHeaderContent>
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem>
                  <BreadcrumbLink href="#home">홈</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                  <BreadcrumbLink href="#projects">프로젝트</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator />
                <BreadcrumbItem>
                  <BreadcrumbPage>업무 현황</BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
            <PageHeaderTitle>업무 현황</PageHeaderTitle>
            <PageHeaderDescription>프로젝트별 업무 진행 상황을 확인하고 조회합니다.</PageHeaderDescription>
          </PageHeaderContent>
          <PageHeaderActions>
            <Button type="button" variant="primary" appearance="brand" size="default">
              신규 등록
            </Button>
          </PageHeaderActions>
        </PageHeader>
        <Tabs defaultValue="mine" className="min-w-0">
          <TabsList aria-label="업무 목록 보기">
            <TabsTrigger value="mine">내 업무</TabsTrigger>
            <TabsTrigger value="completed">완료 업무</TabsTrigger>
          </TabsList>
          <TabsContent value="mine" className="px-0 py-6">
            <Table aria-label="내 업무">
              <TableHeader><TableRow><TableHead scope="col">업무</TableHead><TableHead scope="col">마감일</TableHead><TableHead scope="col">상태</TableHead></TableRow></TableHeader>
              <TableBody>
                <TableRow><TableCell>화면 설계서 검토</TableCell><TableCell>10월 14일</TableCell><TableCell>검토</TableCell></TableRow>
                <TableRow><TableCell>고객 요구사항 정리</TableCell><TableCell>10월 16일</TableCell><TableCell>진행</TableCell></TableRow>
              </TableBody>
            </Table>
          </TabsContent>
          <TabsContent value="completed" className="px-0 py-6">
            <Table aria-label="완료 업무">
              <TableHeader><TableRow><TableHead scope="col">업무</TableHead><TableHead scope="col">완료일</TableHead><TableHead scope="col">상태</TableHead></TableRow></TableHeader>
              <TableBody><TableRow><TableCell>프로젝트 기본 정보 등록</TableCell><TableCell>10월 9일</TableCell><TableCell>완료</TableCell></TableRow></TableBody>
            </Table>
          </TabsContent>
        </Tabs>
      </StorySection>
    </StoryPage>
  ),
}