import type { Meta, StoryObj } from '@storybook/react';
import { Link } from './Link';
import Box from '@mui/material/Box';

const meta: Meta<typeof Link> = {
  title: 'Atoms/Link',
  component: Link,
  tags: ['autodocs'],
  argTypes: {
    underline: { control: 'select', options: ['none', 'hover', 'always'] },
    color: { control: 'text' },
  },
};

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

// ─── Default ────────────────────────────────────────────────────────────────

export const Default: Story = {
  args: {
    href: '#',
    children: 'Frequently Asked Questions',
  },
};

// ─── Underline Variants ─────────────────────────────────────────────────────

/** Three underline modes */
export const UnderlineVariants: Story = {
  name: 'Underline Variants',
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
        <Link href="#" underline="hover">
          Hover (default)
        </Link>
        <Box sx={{ fontSize: 11, color: 'text.secondary' }}>underline="hover"</Box>
      </Box>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
        <Link href="#" underline="always">
          Always underlined
        </Link>
        <Box sx={{ fontSize: 11, color: 'text.secondary' }}>underline="always"</Box>
      </Box>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
        <Link href="#" underline="none">
          No underline
        </Link>
        <Box sx={{ fontSize: 11, color: 'text.secondary' }}>underline="none"</Box>
      </Box>
    </Box>
  ),
};

// ─── Colour Variants ────────────────────────────────────────────────────────

/** Brand (default) and secondary colour options */
export const ColourVariants: Story = {
  name: 'Colour Variants',
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <Box>
        <Link href="#">Brand link (default — copper, 4.8:1 contrast)</Link>
      </Box>
      <Box>
        <Link href="#" color="text.secondary">
          Secondary link (neutral grey)
        </Link>
      </Box>
      <Box>
        <Link href="#" color="text.primary">
          Primary text link (charcoal)
        </Link>
      </Box>
      <Box>
        <Link href="#" color="error.main">
          Error link (red — for destructive actions)
        </Link>
      </Box>
    </Box>
  ),
};

// ─── Inline ─────────────────────────────────────────────────────────────────

/** Links inline within body text */
export const Inline: Story = {
  render: () => (
    <Box sx={{ maxWidth: 500, lineHeight: 1.7 }}>
      If you need help planning a funeral, our <Link href="#">arrangement guide</Link> walks you
      through each step. You can also browse our <Link href="#">provider directory</Link> to find
      local funeral directors, or <Link href="#">contact us</Link> directly for personalised
      assistance.
    </Box>
  ),
};

// ─── Navigation ─────────────────────────────────────────────────────────────

/** Links styled for navigation (no underline) */
export const Navigation: Story = {
  render: () => (
    <Box sx={{ display: 'flex', gap: 3 }}>
      <Link href="#" underline="none" sx={{ fontWeight: 600 }}>
        FAQ
      </Link>
      <Link href="#" underline="none" sx={{ fontWeight: 600 }}>
        Contact Us
      </Link>
      <Link href="#" underline="none" sx={{ fontWeight: 600 }}>
        Log In
      </Link>
    </Box>
  ),
};

// ─── Footer ─────────────────────────────────────────────────────────────────

/** Footer link pattern — secondary colour, smaller text */
export const FooterLinks: Story = {
  name: 'Footer Links',
  render: () => (
    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
      <Link href="#" color="text.secondary" variant="body2">
        Privacy Policy
      </Link>
      <Link href="#" color="text.secondary" variant="body2">
        Terms of Service
      </Link>
      <Link href="#" color="text.secondary" variant="body2">
        Accessibility
      </Link>
      <Link href="#" color="text.secondary" variant="body2">
        Cookie Settings
      </Link>
    </Box>
  ),
};

// ─── On Different Backgrounds ───────────────────────────────────────────────

/** Links on white vs warm vs grey surfaces */
export const OnDifferentBackgrounds: Story = {
  name: 'On Different Backgrounds',
  render: () => (
    <Box sx={{ display: 'flex', gap: 3 }}>
      <Box
        sx={{
          p: 3,
          backgroundColor: 'background.default',
          borderRadius: 1,
          border: '1px solid',
          borderColor: 'divider',
        }}
      >
        <Box sx={{ fontSize: 11, color: 'text.secondary', mb: 1 }}>White</Box>
        <Link href="#">Learn more</Link>
      </Box>
      <Box sx={{ p: 3, backgroundColor: 'var(--fa-color-surface-warm)', borderRadius: 1 }}>
        <Box sx={{ fontSize: 11, color: 'text.secondary', mb: 1 }}>Warm (brand.50)</Box>
        <Link href="#">Learn more</Link>
      </Box>
      <Box sx={{ p: 3, backgroundColor: 'var(--fa-color-surface-subtle)', borderRadius: 1 }}>
        <Box sx={{ fontSize: 11, color: 'text.secondary', mb: 1 }}>Grey (neutral.50)</Box>
        <Link href="#">Learn more</Link>
      </Box>
    </Box>
  ),
};
