import { useState } from "react";
import { RadioButton } from "./index";

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

const meta: Meta<typeof RadioButton> = {
  title: "Components/RadioButton",
  component: RadioButton,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A radio button component with support for labels, subtext, error states, and custom variants.",
      },
    },
  },
  argTypes: {
    name: {
      control: { type: "text" },
      description: "Radio button group name",
    },
    value: {
      control: { type: "text" },
      description: "Radio button value",
    },
    checked: {
      control: { type: "boolean" },
      description: "Whether the radio button is checked",
    },
    label: {
      control: { type: "text" },
      description: "Label text",
    },
    subText: {
      control: { type: "text" },
      description: "Subtext displayed below the label",
    },
    variant: {
      control: { type: "select" },
      options: ["circle"],
      description: "Radio button variant",
    },
    hasError: {
      control: { type: "boolean" },
      description: "Show error state",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Disable the radio button",
    },
  },
  args: {
    name: "radio-group",
    value: "option1",
    checked: false,
    label: "Radio Button Label",
  },
};

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

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

// Checked radio button
export const Checked: Story = {
  args: {
    checked: true,
    label: "Checked Radio Button",
  },
};

// Unchecked radio button
export const Unchecked: Story = {
  args: {
    checked: false,
    label: "Unchecked Radio Button",
  },
};

// With label
export const WithLabel: Story = {
  args: {
    label: "Option with Label",
  },
};

// With subtext
export const WithSubtext: Story = {
  args: {
    label: "Premium Plan",
    subText: "$29.99/month - Best value",
  },
};

// Error state
export const Error: Story = {
  args: {
    label: "Radio Button with Error",
    hasError: true,
  },
};

// Disabled state
export const Disabled: Story = {
  args: {
    label: "Disabled Radio Button",
    disabled: true,
  },
};

// Disabled checked
export const DisabledChecked: Story = {
  args: {
    checked: true,
    label: "Disabled Checked Radio Button",
    disabled: true,
  },
};

// Radio group
export const RadioGroup: Story = {
  render: () => {
    const [selected, setSelected] = useState("option1");
    return (
      <div className="space-y-3">
        <RadioButton
          name="plan"
          value="option1"
          checked={selected === "option1"}
          onChange={() => setSelected("option1")}
          label="Basic Plan"
          subText="$9.99/month"
        />
        <RadioButton
          name="plan"
          value="option2"
          checked={selected === "option2"}
          onChange={() => setSelected("option2")}
          label="Standard Plan"
          subText="$19.99/month"
        />
        <RadioButton
          name="plan"
          value="option3"
          checked={selected === "option3"}
          onChange={() => setSelected("option3")}
          label="Premium Plan"
          subText="$29.99/month"
        />
      </div>
    );
  },
  parameters: {
    docs: {
      description: {
        story: "Radio button group where only one option can be selected.",
      },
    },
  },
};

// With error in group
export const GroupWithError: Story = {
  render: () => {
    const [selected, setSelected] = useState<string | undefined>();
    return (
      <div className="space-y-3">
        <RadioButton
          name="payment"
          value="credit"
          checked={selected === "credit"}
          onChange={val =>
            setSelected(
              typeof val === "string" || typeof val === "number"
                ? String(val)
                : undefined
            )
          }
          label="Credit Card"
          hasError={!selected}
        />
        <RadioButton
          name="payment"
          value="debit"
          checked={selected === "debit"}
          onChange={val =>
            setSelected(
              typeof val === "string" || typeof val === "number"
                ? String(val)
                : undefined
            )
          }
          label="Debit Card"
          hasError={!selected}
        />
        <RadioButton
          name="payment"
          value="paypal"
          checked={selected === "paypal"}
          onChange={val =>
            setSelected(
              typeof val === "string" || typeof val === "number"
                ? String(val)
                : undefined
            )
          }
          label="PayPal"
          hasError={!selected}
        />
        {!selected && (
          <p className="text-sm text-red-600">Please select a payment method</p>
        )}
      </div>
    );
  },
  parameters: {
    docs: {
      description: {
        story:
          "Radio button group with error state when no option is selected.",
      },
    },
  },
};

// All variants showcase
export const AllVariants: Story = {
  render: () => (
    <div className="space-y-6">
      <div>
        <h3 className="mb-3 text-lg font-semibold">States</h3>
        <div className="space-y-3">
          <RadioButton
            name="demo1"
            value="unchecked"
            checked={false}
            label="Unchecked"
          />
          <RadioButton
            name="demo2"
            value="checked"
            checked={true}
            label="Checked"
          />
          <RadioButton
            name="demo3"
            value="disabled"
            checked={false}
            label="Disabled"
            disabled
          />
          <RadioButton
            name="demo4"
            value="disabled-checked"
            checked={true}
            label="Disabled Checked"
            disabled
          />
        </div>
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">With Subtext</h3>
        <div className="space-y-3">
          <RadioButton
            name="demo5"
            value="plan1"
            checked={true}
            label="Basic Plan"
            subText="$9.99/month"
          />
          <RadioButton
            name="demo6"
            value="plan2"
            checked={false}
            label="Premium Plan"
            subText="$29.99/month - Best value"
          />
        </div>
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">Error State</h3>
        <RadioButton
          name="demo7"
          value="error"
          checked={false}
          label="Radio Button with Error"
          hasError
        />
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Showcase of all radio button variants and states.",
      },
    },
  },
};