import { CallButton } from "./index";

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

const meta: Meta<typeof CallButton> = {
  title: "Components/CallButton",
  component: CallButton,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A call button component that extends the Link component with a call icon and optional blinking dot.",
      },
    },
  },
  argTypes: {
    showBlinkDot: {
      control: { type: "boolean" },
      description: "Show a blinking dot indicator",
    },
    buttonStyle: {
      control: { type: "select" },
      options: ["primary"],
      description: "Visual style variant",
    },
    size: {
      control: { type: "select" },
      options: ["sm", "md", "lg"],
      description: "Button size",
    },
    href: {
      control: { type: "text" },
      description: "Link destination",
    },
    children: {
      control: { type: "text" },
      description: "Button text content",
    },
    className: {
      control: { type: "text" },
      description: "Additional CSS classes",
    },
  },
  args: {
    href: "tel:+1234567890",
    children: "Call Now",
    showBlinkDot: false,
    buttonStyle: "primary",
    size: "md",
  },
};

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

// All variants showcase - Real visual variants
export const AllVariants: Story = {
  render: () => (
    <div className="space-y-8">
      <div>
        <h3 className="mb-4 text-lg font-semibold">Style Variants</h3>
        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-3">
            <h4 className="text-sm font-medium text-gray-600">
              Primary (Default)
            </h4>
            <CallButton href="tel:+1234567890" buttonStyle="primary">
              Call Now
            </CallButton>
          </div>
        </div>
      </div>

      <div>
        <h3 className="mb-4 text-lg font-semibold">Size Variants</h3>
        <div className="grid grid-cols-3 gap-4">
          <div className="space-y-3">
            <h4 className="text-sm font-medium text-gray-600">Small</h4>
            <CallButton href="tel:+1234567890" size="sm">
              Call
            </CallButton>
          </div>
          <div className="space-y-3">
            <h4 className="text-sm font-medium text-gray-600">
              Medium (Default)
            </h4>
            <CallButton href="tel:+1234567890" size="md">
              Call Now
            </CallButton>
          </div>
          <div className="space-y-3">
            <h4 className="text-sm font-medium text-gray-600">Large</h4>
            <CallButton href="tel:+1234567890" size="lg">
              Call Now
            </CallButton>
          </div>
        </div>
      </div>

      <div>
        <h3 className="mb-4 text-lg font-semibold">Blinking Dot Variant</h3>
        <div className="space-y-3">
          <CallButton
            href="tel:+1234567890"
            showBlinkDot={true}
            buttonStyle="primary"
          >
            Emergency Hotline
          </CallButton>
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "Complete showcase of all CallButton visual variants: styles, sizes, and blinking dot.",
      },
    },
  },
};

// Default call button
export const Default: Story = {
  args: {
    buttonStyle: "primary",
    size: "md",
    showBlinkDot: false,
  },
  parameters: {
    docs: {
      description: {
        story: "Default CallButton with primary style and medium size.",
      },
    },
  },
};

// Call button with blinking dot
export const WithBlinkDot: Story = {
  args: {
    showBlinkDot: true,
    children: "Call Now",
    buttonStyle: "primary",
    size: "md",
  },
  parameters: {
    docs: {
      description: {
        story:
          "CallButton with blinking dot indicator for emergency or priority calls.",
      },
    },
  },
};

// Style variations
export const StyleVariations: Story = {
  render: () => (
    <div className="space-y-4">
      <div className="space-y-2">
        <h4 className="text-sm font-medium text-gray-600">Primary Style</h4>
        <CallButton href="tel:+1234567890" buttonStyle="primary">
          Call Support
        </CallButton>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "All four CallButton style variants: primary, secondary, outline, and ghost.",
      },
    },
  },
};

// Size variations
export const SizeVariations: Story = {
  render: () => (
    <div className="space-y-4">
      <div className="space-y-2">
        <h4 className="text-sm font-medium text-gray-600">Small Size</h4>
        <CallButton href="tel:+1234567890" size="sm">
          Call
        </CallButton>
      </div>
      <div className="space-y-2">
        <h4 className="text-sm font-medium text-gray-600">
          Medium Size (Default)
        </h4>
        <CallButton href="tel:+1234567890" size="md">
          Call Now
        </CallButton>
      </div>
      <div className="space-y-2">
        <h4 className="text-sm font-medium text-gray-600">Large Size</h4>
        <CallButton href="tel:+1234567890" size="lg">
          Call Now
        </CallButton>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "All three CallButton size variants: small, medium, and large.",
      },
    },
  },
};

// Interactive combinations
export const Interactive: Story = {
  render: () => (
    <div className="space-y-6">
      <div>
        <h3 className="mb-3 text-lg font-semibold">Emergency Contacts</h3>
        <div className="space-y-3">
          <CallButton
            href="tel:+1234567890"
            showBlinkDot={true}
            buttonStyle="primary"
            size="lg"
          >
            Emergency Hotline
          </CallButton>
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "Interactive examples showing combinations of CallButton variants for different use cases.",
      },
    },
  },
};

// States and interactions
export const StatesAndInteractions: Story = {
  render: () => (
    <div className="space-y-6">
      <div>
        <h3 className="mb-3 text-lg font-semibold">Hover States</h3>
        <p className="mb-2 text-sm text-gray-600">
          Hover over the buttons to see interactive states
        </p>
        <div className="space-y-3">
          <CallButton href="tel:+1234567890" showBlinkDot={true}>
            Hover Me
          </CallButton>
          <CallButton href="tel:+1234567890">Hover Me Too</CallButton>
        </div>
      </div>

      <div>
        <h3 className="mb-3 text-lg font-semibold">Focus States</h3>
        <p className="mb-2 text-sm text-gray-600">
          Tab to focus and see keyboard navigation states
        </p>
        <div className="space-y-3">
          <CallButton href="tel:+1234567890">Focus Me</CallButton>
          <CallButton href="tel:+1234567890">Focus Me Too</CallButton>
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "Demonstrates hover, focus, and interaction states of the CallButton component.",
      },
    },
  },
};

// Accessibility showcase
export const Accessibility: Story = {
  render: () => (
    <div className="space-y-4">
      <div>
        <h3 className="mb-3 text-lg font-semibold">Screen Reader Friendly</h3>
        <p className="mb-2 text-sm text-gray-600">
          These buttons include proper ARIA labels and descriptions
        </p>
        <div className="space-y-3">
          <CallButton
            href="tel:+1234567890"
            showBlinkDot={true}
            aria-label="Call emergency support line"
            aria-description="24/7 emergency hotline with priority response"
          >
            Emergency Support
          </CallButton>
          <CallButton
            href="tel:+1234567890"
            aria-label="Call customer service"
            aria-description="General customer support and inquiries"
          >
            Customer Service
          </CallButton>
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "Accessibility features including ARIA labels and screen reader support.",
      },
    },
  },
};