import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Radio } from './Radio';
import { Typography } from '../Typography';
import { Card } from '../Card';
import Box from '@mui/material/Box';
import FormControlLabel from '@mui/material/FormControlLabel';
import RadioGroup from '@mui/material/RadioGroup';
import FormControl from '@mui/material/FormControl';

const meta: Meta<typeof Radio> = {
  title: 'Atoms/Radio',
  component: Radio,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/XUDUrw4yMkEexBCCYHXUvT/Parsons?node-id=2322-42538',
    },
  },
  argTypes: {
    checked: {
      control: 'boolean',
      description: 'Whether the radio is selected',
    },
    disabled: {
      control: 'boolean',
      description: 'Disable the radio',
      table: { defaultValue: { summary: 'false' } },
    },
  },
};

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

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

/** Default radio — unchecked */
export const Default: Story = {
  args: {},
};

// ─── States ─────────────────────────────────────────────────────────────────

/** All visual states */
export const States: Story = {
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
      <FormControlLabel control={<Radio />} label="Unchecked" />
      <FormControlLabel control={<Radio checked />} label="Checked" />
      <FormControlLabel control={<Radio disabled />} label="Disabled unchecked" />
      <FormControlLabel control={<Radio disabled checked />} label="Disabled checked" />
    </Box>
  ),
};

// ─── Radio Group ────────────────────────────────────────────────────────────

/** Standard radio group with keyboard navigation */
export const Group: Story = {
  name: 'Radio Group',
  render: () => (
    <FormControl>
      <Typography variant="label" sx={{ mb: 1 }}>
        Service type
      </Typography>
      <RadioGroup defaultValue="chapel">
        <FormControlLabel value="chapel" control={<Radio />} label="Chapel ceremony" />
        <FormControlLabel value="graveside" control={<Radio />} label="Graveside service" />
        <FormControlLabel value="memorial" control={<Radio />} label="Memorial service" />
        <FormControlLabel value="direct" control={<Radio />} label="Direct cremation" />
      </RadioGroup>
    </FormControl>
  ),
};

// ─── Interactive: Card Selection ────────────────────────────────────────────

/**
 * Radio buttons inside interactive cards — the recommended pattern
 * for option selection in FA. Combines Card's selected state with
 * Radio for accessible single-select.
 */
export const CardSelection: Story = {
  name: 'Interactive — Card Selection',
  render: () => {
    const CardSelectDemo = () => {
      const [selected, setSelected] = useState('standard');

      const options = [
        {
          value: 'direct',
          label: 'Direct cremation',
          desc: 'Simple, dignified cremation with no service.',
          price: '$1,800',
        },
        {
          value: 'standard',
          label: 'Standard service',
          desc: 'Traditional chapel ceremony with viewing.',
          price: '$4,200',
        },
        {
          value: 'premium',
          label: 'Premium service',
          desc: 'Full service with personalised memorial.',
          price: '$7,500',
        },
      ];

      return (
        <Box sx={{ maxWidth: 420 }}>
          <Typography variant="h4" sx={{ mb: 2 }}>
            Choose a package
          </Typography>
          <RadioGroup value={selected} onChange={(e) => setSelected(e.target.value)}>
            {options.map((opt) => (
              <Card
                key={opt.value}
                variant="outlined"
                interactive
                selected={selected === opt.value}
                padding="compact"
                sx={{ mb: 1 }}
                onClick={() => setSelected(opt.value)}
              >
                <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
                  <Radio value={opt.value} sx={{ mt: -0.5 }} />
                  <Box sx={{ flex: 1 }}>
                    <Box
                      sx={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                      }}
                    >
                      <Typography variant="label">{opt.label}</Typography>
                      <Typography variant="labelLg" color="primary">
                        {opt.price}
                      </Typography>
                    </Box>
                    <Typography variant="body2" color="text.secondary">
                      {opt.desc}
                    </Typography>
                  </Box>
                </Box>
              </Card>
            ))}
          </RadioGroup>
        </Box>
      );
    };

    return <CardSelectDemo />;
  },
};

// ─── Interactive: Payment Method ────────────────────────────────────────────

/** Horizontal radio group for payment method selection */
export const PaymentMethod: Story = {
  name: 'Interactive — Payment Method',
  render: () => (
    <FormControl>
      <Typography variant="label" sx={{ mb: 1 }}>
        Payment method
      </Typography>
      <RadioGroup defaultValue="card" row>
        <FormControlLabel value="card" control={<Radio />} label="Credit card" />
        <FormControlLabel value="bank" control={<Radio />} label="Bank transfer" />
        <FormControlLabel value="plan" control={<Radio />} label="Payment plan" />
      </RadioGroup>
    </FormControl>
  ),
};
