import { SelectPlanButton } from "./index";

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

const meta: Meta<typeof SelectPlanButton> = {
  title: "Components/SelectPlanButton",
  component: SelectPlanButton,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A button component specifically designed for selecting plans, with speed information and interactive states.",
      },
    },
  },
  argTypes: {
    speed: {
      control: { type: "text" },
      description: "Speed value for the plan",
    },
    onSelect: {
      action: "selected",
      description: "Callback function when button is clicked",
    },
  },
  args: {
    speed: "100 Mbps",
    onSelect: () => {},
  },
};

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

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

// With speed prop
export const WithSpeed: Story = {
  args: {
    speed: "500 Mbps",
  },
};

// Different speeds
export const DifferentSpeeds: Story = {
  render: () => (
    <div className="max-w-md w-full space-y-3">
      <SelectPlanButton speed="100 Mbps" onSelect={() => {}} />
      <SelectPlanButton speed="250 Mbps" onSelect={() => {}} />
      <SelectPlanButton speed="500 Mbps" onSelect={() => {}} />
      <SelectPlanButton speed="1 Gbps" onSelect={() => {}} />
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "SelectPlanButton with different speed values.",
      },
    },
  },
};

// Interactive state
export const Interactive: Story = {
  render: () => {
    const handleSelect = (speed: string) => {
      alert(`Selected plan: ${speed}`);
    };
    return (
      <div className="max-w-md w-full space-y-3">
        <SelectPlanButton
          speed="100 Mbps"
          onSelect={() => handleSelect("100 Mbps")}
        />
        <SelectPlanButton
          speed="500 Mbps"
          onSelect={() => handleSelect("500 Mbps")}
        />
        <SelectPlanButton
          speed="1 Gbps"
          onSelect={() => handleSelect("1 Gbps")}
        />
      </div>
    );
  },
  parameters: {
    docs: {
      description: {
        story: "Interactive SelectPlanButton examples that trigger callbacks.",
      },
    },
  },
};

// Selected State
export const SelectedState: Story = {
  render: () => (
    <div className="max-w-md w-full space-y-3">
      <SelectPlanButton speed="1 Gbps" onSelect={() => {}} isSelected={true} />
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "SelectPlanButton with selected state.",
      },
    },
  },
};

// In plan card
export const InPlanCard: Story = {
  render: () => (
    <div className="max-w-sm border-border-default w-full space-y-4 rounded-lg border p-6">
      <div>
        <h3 className="heading3 text-text">Standard Plan</h3>
        <p className="body2 mt-1 text-text-secondary">Perfect for families</p>
      </div>
      <div>
        <p className="heading2 text-text">$49.99</p>
        <p className="body3 text-text-secondary">per month</p>
      </div>
      <ul className="space-y-2">
        <li className="body3 text-text">Up to 500 Mbps</li>
        <li className="body3 text-text">Unlimited data</li>
        <li className="body3 text-text">Free installation</li>
      </ul>
      <SelectPlanButton speed="500 Mbps" onSelect={() => {}} />
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "SelectPlanButton used within a plan card layout.",
      },
    },
  },
};

// All variants showcase
export const AllVariants: Story = {
  render: () => (
    <div className="max-w-2xl w-full space-y-6">
      <div>
        <h3 className="mb-3 text-lg font-semibold">Different Speeds</h3>
        <div className="space-y-3">
          <SelectPlanButton speed="100 Mbps" onSelect={() => {}} />
          <SelectPlanButton speed="250 Mbps" onSelect={() => {}} />
          <SelectPlanButton speed="500 Mbps" onSelect={() => {}} />
          <SelectPlanButton speed="1 Gbps" onSelect={() => {}} />
        </div>
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">In Context</h3>
        <div className="grid grid-cols-2 gap-4">
          <div className="border-border-default space-y-3 rounded-lg border p-4">
            <h4 className="subheading1 text-text">Basic Plan</h4>
            <p className="body2 text-text-secondary">100 Mbps</p>
            <SelectPlanButton speed="100 Mbps" onSelect={() => {}} />
          </div>
          <div className="border-border-default space-y-3 rounded-lg border p-4">
            <h4 className="subheading1 text-text">Premium Plan</h4>
            <p className="body2 text-text-secondary">1 Gbps</p>
            <SelectPlanButton speed="1 Gbps" onSelect={() => {}} />
          </div>
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Showcase of all SelectPlanButton variants and use cases.",
      },
    },
  },
};