import { Tooltip } from "./index";

import { DocsPage } from "@shared/stories/DocsTemplate";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof Tooltip> = {
  title: "Components/Tooltip",
  component: Tooltip,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A tooltip component that displays additional information when hovering over an element.",
      },
    },
  },
  argTypes: {
    tooltipMsg: {
      control: { type: "text" },
      description: "Tooltip message to display",
    },
    className: {
      control: { type: "text" },
      description: "Additional CSS classes",
    },
    children: {
      control: { type: "text" },
      description: "Element that triggers the tooltip",
    },
  },
  args: {
    tooltipMsg: "This is a tooltip message",
    children: "Hover me",
  },
};

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

// Default tooltip
export const Default: Story = {
  args: {},
};

// With message
export const WithMessage: Story = {
  args: {
    tooltipMsg: "This is a helpful tooltip message",
    children: "Hover to see tooltip",
  },
};

// With button
export const WithButton: Story = {
  args: {
    tooltipMsg: "Click to submit the form",
    children: (
      <button className="bg-fill-brand text-inverse rounded px-4 py-2">
        Submit
      </button>
    ),
  },
};

// With icon
export const WithIcon: Story = {
  args: {
    tooltipMsg: "More information",
    children: (
      <span className="bg-surface-secondary inline-flex h-8 w-8 cursor-help items-center justify-center rounded-full text-icon-info">
        i
      </span>
    ),
  },
};

// With link
export const WithLink: Story = {
  args: {
    tooltipMsg: "Visit our documentation",
    children: (
      <a
        href="#"
        className="text-text-brand underline hover:text-text-brand-hover"
      >
        Learn more
      </a>
    ),
  },
};

// Long message
export const LongMessage: Story = {
  args: {
    tooltipMsg:
      "This is a longer tooltip message that demonstrates how the tooltip handles extended text content. It should wrap appropriately to remain readable.",
    children: "Hover for long message",
  },
};

// Different children
export const DifferentChildren: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-4">
      <Tooltip tooltipMsg="Text tooltip">
        <span className="cursor-help underline">Text</span>
      </Tooltip>
      <Tooltip tooltipMsg="Button tooltip">
        <button className="bg-fill-brand text-inverse rounded px-4 py-2">
          Button
        </button>
      </Tooltip>
      <Tooltip tooltipMsg="Icon tooltip">
        <span className="bg-surface-secondary inline-flex h-8 w-8 cursor-help items-center justify-center rounded-full text-icon-info">
          ?
        </span>
      </Tooltip>
      <Tooltip tooltipMsg="Link tooltip">
        <a href="#" className="text-text-brand underline">
          Link
        </a>
      </Tooltip>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Tooltip with different types of children elements.",
      },
    },
  },
};

// Custom styling
export const CustomStyling: Story = {
  args: {
    tooltipMsg: "Custom styled tooltip",
    className: "custom-tooltip",
    children: "Hover me",
  },
};

// Multiple tooltips
export const Multiple: Story = {
  render: () => (
    <div className="space-y-4">
      <div className="flex gap-4">
        <Tooltip tooltipMsg="First tooltip">
          <button className="bg-surface-secondary rounded px-4 py-2 text-text">
            Button 1
          </button>
        </Tooltip>
        <Tooltip tooltipMsg="Second tooltip">
          <button className="bg-surface-secondary rounded px-4 py-2 text-text">
            Button 2
          </button>
        </Tooltip>
        <Tooltip tooltipMsg="Third tooltip">
          <button className="bg-surface-secondary rounded px-4 py-2 text-text">
            Button 3
          </button>
        </Tooltip>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Multiple tooltips displayed together.",
      },
    },
  },
};

// All variants showcase
export const AllVariants: Story = {
  render: () => (
    <div className="max-w-2xl w-full space-y-8">
      <div>
        <h3 className="mb-3 text-lg font-semibold">With Text</h3>
        <Tooltip tooltipMsg="This is a tooltip message">
          <span className="cursor-help underline">Hover me</span>
        </Tooltip>
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">With Button</h3>
        <Tooltip tooltipMsg="Click to submit">
          <button className="bg-fill-brand text-inverse rounded px-4 py-2">
            Submit
          </button>
        </Tooltip>
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">With Icon</h3>
        <Tooltip tooltipMsg="More information">
          <span className="bg-surface-secondary inline-flex h-8 w-8 cursor-help items-center justify-center rounded-full text-icon-info">
            i
          </span>
        </Tooltip>
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">Long Message</h3>
        <Tooltip tooltipMsg="This is a longer tooltip message that demonstrates how the tooltip handles extended text content.">
          <span className="cursor-help underline">Hover for long message</span>
        </Tooltip>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Showcase of all tooltip variants and use cases.",
      },
    },
  },
};