import React from 'react';
import { ComponentMeta } from '@storybook/react';
import { Button } from '@cloudflare/component-button';
import { Card } from '@cloudflare/component-card';
import { Div, P } from '@cloudflare/elements';
import { CL1CompatRouterProvider } from '@cloudflare/util-cl1-compat-router';
import Page from './Page';

type StoryLinkProps = { to: string } & Omit<
  React.AnchorHTMLAttributes<HTMLAnchorElement>,
  'href'
>;

const StoryLink = React.forwardRef<HTMLAnchorElement, StoryLinkProps>(
  ({ to, children, ...props }, ref) => (
    <a {...props} href={to} ref={ref}>
      {children}
    </a>
  )
);

StoryLink.displayName = 'StoryLink';

const storyLocation = { pathname: '/' };
const storyNavigate = () => undefined;

export default {
  title: 'Dash/Core/Page',
  component: Page,
  parameters: {
    layout: 'fullscreen',
    docs: {
      description: {
        component:
          'A flexible page layout component with header, optional sidebar, and content area. Supports different width configurations and responsive behavior.'
      }
    }
  },
  decorators: [
    Story => (
      <CL1CompatRouterProvider
        location={storyLocation}
        navigate={storyNavigate}
        linkComponent={StoryLink}
      >
        <Story />
      </CL1CompatRouterProvider>
    )
  ]
} as ComponentMeta<typeof Page>;

// Sample content components for stories
const SampleContent = () => (
  <Div>
    <P mb={4}>
      This is sample page content. The Page component provides a consistent
      layout structure with header, optional sidebar, and main content area.
    </P>
    <Card>
      <Div p={4} mb={4}>
        <P mb={2} fontWeight="bold">
          Sample Card Content
        </P>
        <P>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </P>
      </Div>
    </Card>
    <Card>
      <Div p={4}>
        <P mb={2} fontWeight="bold">
          Another Card
        </P>
        <P>
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.
        </P>
      </Div>
    </Card>
  </Div>
);

const SampleSidebar = () => (
  <Card>
    <Div p={4}>
      <P mb={3} fontWeight="bold">
        Sidebar Content
      </P>
      <P mb={2}>Quick Actions:</P>
      <Div mb={2}>
        <Button type="primary" width="100%">
          Primary Action
        </Button>
      </Div>
      <Div mb={2}>
        <Button type="default" width="100%">
          Secondary Action
        </Button>
      </Div>
      <P mt={3} fontSize={1} color="gray.3">
        Additional sidebar information and links can go here.
      </P>
    </Div>
  </Card>
);

const SampleControl = () => (
  <Div display="flex" alignItems="center">
    <Button type="primary" mr={2}>
      Create New
    </Button>
    <Button type="default">Settings</Button>
  </Div>
);

const SampleNavigation = () => (
  <Button
    type="plain"
    iconType="backward"
    onClick={() => console.log('Navigate back')}
  >
    Back to Dashboard
  </Button>
);

export const Default = () => (
  <Page
    title="Page Title"
    description="This is a description of what this page is about and what users can expect to find here."
  >
    <SampleContent />
  </Page>
);

export const WithParentLabel = () => (
  <Page
    title="Settings"
    parentPageLabel="Account Management"
    description="Configure your account settings and preferences."
  >
    <SampleContent />
  </Page>
);

export const WithBeta = () => (
  <Page
    title="New Feature"
    description="This is a beta feature that is still in development."
    beta={true}
  >
    <SampleContent />
  </Page>
);

export const WithDocumentation = () => (
  <Page
    title="API Documentation"
    description="Learn how to integrate with our API endpoints."
    documentationLabel="View API Docs"
    documentationHref="https://developers.cloudflare.com"
  >
    <SampleContent />
  </Page>
);

export const WithDocumentationButton = () => (
  <Page
    title="Advanced Configuration"
    description="Configure advanced settings for your application."
    documentationLabel="Help"
    documentationAsButton={true}
    onDocumentationButtonClick={() =>
      console.log('Documentation button clicked')
    }
  >
    <SampleContent />
  </Page>
);

export const WithSidebarInside = () => (
  <Page
    title="Dashboard"
    description="Overview of your account activity and quick actions."
    sidebar={<SampleSidebar />}
    sidebarPosition="inside"
  >
    <SampleContent />
  </Page>
);

export const WithSidebarOutside = () => (
  <Page
    title="Analytics"
    description="View detailed analytics and performance metrics."
    sidebar={<SampleSidebar />}
    sidebarPosition="outside"
  >
    <SampleContent />
  </Page>
);

export const WithControl = () => (
  <Page
    title="User Management"
    description="Manage users and their permissions."
    control={<SampleControl />}
  >
    <SampleContent />
  </Page>
);

export const WithNavigation = () => (
  <Page
    title="Project Details"
    description="View and edit project configuration."
    navigation={<SampleNavigation />}
  >
    <SampleContent />
  </Page>
);

export const CenteredHeader = () => (
  <Page
    title="Welcome"
    description="Welcome to your dashboard. Get started by exploring the features below."
    centerHeader={true}
  >
    <SampleContent />
  </Page>
);

export const NarrowWidth = () => (
  <Page
    title="Narrow Page"
    description="This page uses the narrow width configuration for focused content."
    type="narrow"
  >
    <SampleContent />
  </Page>
);

export const WideWidth = () => (
  <Page
    title="Wide Page"
    description="This page uses the wide width configuration for more content."
    type="wide"
  >
    <SampleContent />
  </Page>
);

export const UnboundedWidth = () => (
  <Page
    title="Unbounded Page"
    description="This page uses the unbounded width configuration for full-width content."
    type="unbounded"
  >
    <SampleContent />
  </Page>
);

export const ComplexExample = () => (
  <Page
    title="Complex Page Example"
    parentPageLabel="Advanced Features"
    description="This example shows multiple features working together including beta label, documentation, controls, and sidebar."
    beta={true}
    documentationLabel="Learn More"
    documentationHref="https://developers.cloudflare.com"
    control={<SampleControl />}
    sidebar={<SampleSidebar />}
    sidebarPosition="inside"
    navigation={<SampleNavigation />}
  >
    <SampleContent />
  </Page>
);

export const MinimalExample = () => (
  <Page title="Minimal Page">
    <P>This is a minimal page with just a title and simple content.</P>
  </Page>
);

export const NoTitle = () => (
  <Page description="A page without a title, showing just the description.">
    <SampleContent />
  </Page>
);

export const LongContent = () => (
  <Page
    title="Long Content Example"
    description="This page demonstrates how the component handles longer content."
  >
    <Div>
      {Array.from({ length: 10 }, (_, i) => (
        <Card key={i}>
          <Div p={4} mb={4}>
            <P mb={2} fontWeight="bold">
              Section {i + 1}
            </P>
            <P>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur.
            </P>
          </Div>
        </Card>
      ))}
    </Div>
  </Page>
);