import { css } from "@emotion/react";
import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";

import { Text, View } from "@phoenix/components";
import { JSONBlock } from "@phoenix/components/code";

import { ExpandableContent } from "../src/components/core/content/ExpandableContent";

const meta: Meta<typeof ExpandableContent> = {
  title: "Core/Content/ExpandableContent",
  component: ExpandableContent,
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component: `
A content wrapper that handles overflowing content with an expandable interface.

- Shows a gradient overlay and "expand" button when content exceeds the specified height
- Supports both uncontrolled (internal state) and controlled modes
- Supports fixed-height containers and max-height regions that grow to full height when expanded
        `,
      },
    },
  },
  argTypes: {
    height: {
      control: { type: "number" },
      description: "The fixed or maximum collapsed height in pixels",
    },
    expandedBehavior: {
      control: { type: "radio" },
      options: ["scroll", "grow"],
      description:
        "Whether expanded content scrolls internally or grows to full height",
    },
    overlayBackgroundColor: {
      control: { type: "text" },
      description: "Background color used by the expand gradient overlay",
    },
    isExpanded: {
      control: { type: "boolean" },
      description:
        "Controlled expanded state. When provided, the component uses this value instead of internal state.",
    },
    onExpandedChange: {
      action: "expandedChange",
      description: "Callback fired when the expanded state changes",
    },
  },
  decorators: [
    (Story) => (
      <div
        css={css`
          width: 400px;
          border: 1px solid var(--global-border-color-default);
          border-radius: var(--global-rounding-small);
          background: var(--global-background-color-default);
        `}
      >
        <Story />
      </div>
    ),
  ],
};

export default meta;
type Story = StoryObj<typeof ExpandableContent>;

const shortContent =
  "This is a short piece of content that fits within the container.";

const longContent = `This is a much longer piece of content that will definitely overflow the container boundaries.
It contains multiple paragraphs of text to demonstrate how the ExpandableContent component handles content
that exceeds the specified height.

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.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This final paragraph ensures we have plenty of content to overflow and demonstrate the expand functionality.`;

const jsonContent = JSON.stringify(
  {
    user: {
      id: "12345",
      name: "John Doe",
      email: "john.doe@example.com",
      preferences: {
        theme: "dark",
        notifications: true,
        language: "en-US",
      },
    },
    metadata: {
      created: "2024-01-15T10:30:00Z",
      updated: "2024-01-20T14:45:00Z",
      version: "1.0.0",
    },
    items: [
      { id: 1, name: "Item 1", value: 100 },
      { id: 2, name: "Item 2", value: 200 },
      { id: 3, name: "Item 3", value: 300 },
    ],
  },
  null,
  2
);

/**
 * Default state with content that overflows the container.
 * Click the "expand" button to reveal all content.
 */
export const Default: Story = {
  args: {
    height: 100,
    children: <Text>{longContent}</Text>,
  },
};

/**
 * Content that fits within the collapsed height.
 * No expand button is shown since there's no overflow.
 */
export const NoOverflow: Story = {
  args: {
    height: 100,
    children: <Text>{shortContent}</Text>,
  },
};

/**
 * Displaying JSON content that overflows.
 * Common use case for displaying API responses or structured data.
 */
export const JSONContent: Story = {
  args: {
    height: 150,
    children: <JSONBlock value={jsonContent} />,
  },
};

/**
 * A smaller collapsed height showing more dramatic overflow.
 */
export const SmallHeight: Story = {
  args: {
    height: 60,
    children: <Text>{longContent}</Text>,
  },
};

/**
 * A larger collapsed height that can show more content before overflowing.
 */
export const LargeHeight: Story = {
  args: {
    height: 200,
    children: <Text>{longContent}</Text>,
  },
};

/**
 * Uses a collapsed max height, then grows to the full content height when expanded.
 * This is useful outside of tables where nested scrolling should be avoided.
 */
export const MaxHeightGrow: Story = {
  args: {
    height: 120,
    expandedBehavior: "grow",
    children: <Text>{longContent}</Text>,
  },
};

/**
 * Controlled mode where the parent manages the expanded state.
 * Useful when you need to synchronize expansion state across multiple content regions.
 */
const ControlledTemplate = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <View>
      <View
        padding="size-100"
        borderBottomColor="default"
        borderBottomWidth="thin"
      >
        <Text color="text-700">
          Controlled state: {isExpanded ? "Expanded" : "Collapsed"}
        </Text>
      </View>
      <ExpandableContent
        height={100}
        isExpanded={isExpanded}
        onExpandedChange={setIsExpanded}
      >
        <Text>{longContent}</Text>
      </ExpandableContent>
    </View>
  );
};

export const Controlled: Story = {
  render: () => <ControlledTemplate />,
  parameters: {
    docs: {
      description: {
        story:
          "In controlled mode, pass `isExpanded` and `onExpandedChange` to manage state externally.",
      },
    },
  },
};

/**
 * Multiple ExpandableContent regions in a table-like layout.
 * Demonstrates how the component works in a realistic context.
 */
const TableLayoutTemplate = () => {
  return (
    <div
      css={css`
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: var(--global-border-color-default);
        & > div {
          background: var(--global-background-color-default);
          padding: var(--global-dimension-size-100);
        }
      `}
    >
      <div>
        <Text weight="heavy">Input</Text>
      </div>
      <div>
        <Text weight="heavy">Output</Text>
      </div>
      <div>
        <ExpandableContent height={80}>
          <Text>{shortContent}</Text>
        </ExpandableContent>
      </div>
      <div>
        <ExpandableContent height={80}>
          <Text>{longContent}</Text>
        </ExpandableContent>
      </div>
      <div>
        <ExpandableContent height={80}>
          <JSONBlock value={jsonContent} />
        </ExpandableContent>
      </div>
      <div>
        <ExpandableContent height={80}>
          <Text>
            A moderate amount of text that may or may not overflow depending on
            the exact styling applied.
          </Text>
        </ExpandableContent>
      </div>
    </div>
  );
};

export const TableLayout: Story = {
  render: () => <TableLayoutTemplate />,
  decorators: [
    (Story) => (
      <div
        css={css`
          width: 600px;
          border: 1px solid var(--global-border-color-default);
          border-radius: var(--global-rounding-small);
          overflow: hidden;
        `}
      >
        <Story />
      </div>
    ),
  ],
  parameters: {
    docs: {
      description: {
        story:
          "Multiple ExpandableContent regions in a grid layout, simulating a table with expandable content.",
      },
    },
  },
};

/**
 * Content that starts expanded (controlled mode).
 */
export const InitiallyExpanded: Story = {
  args: {
    height: 100,
    isExpanded: true,
    children: <Text>{longContent}</Text>,
  },
  parameters: {
    docs: {
      description: {
        story:
          "When `isExpanded` is set to `true`, the content starts in its expanded state showing all content.",
      },
    },
  },
};
