import type { Meta, StoryFn } from '@storybook/react'
import React from 'react'

import { FaqList } from './index'

type ComponentProps = React.ComponentProps<typeof FaqList>

const meta: Meta<ComponentProps> = {
  title: 'FaqList',
  component: FaqList,
  parameters: {
    layout: 'centered',
  },
}
export default meta

const Template: StoryFn<ComponentProps> = (args) => {
  return (
    <div className="w-96 bg-white">
      <FaqList {...args} />
    </div>
  )
}

// Per-variant stories stay in Storybook for browsing/design review but are
// individually covered by cells in AllStates — skip in Chromatic.
const skipInChromatic = { chromatic: { disableSnapshot: true } }

// Deterministic local avatar for the grid so a pravatar network flake can't
// diff the whole AllStates snapshot. Individual stories keep their remote
// images (they're skipped in Chromatic anyway).
const LOCAL_AVATAR = '/image-thumbnail.jpg'

export const Default: StoryFn<ComponentProps> = Template.bind({})
Default.args = {
  faqs: [
    {
      id: '1',
      question: 'Book club slots',
      answer: 'We ship worldwide...',
      enabled: true,
      order: 1,
    },
    {
      id: '2',
      question: 'Refunds',
      answer: 'You can track...',
      enabled: true,
      order: 2,
    },
    {
      id: '3',
      question: 'Brand collabs',
      answer: 'Returns are accepted...',
      enabled: true,
      order: 3,
    },
  ],
  onFaqClick: (id) => console.log('FAQ clicked:', id),
  headerText: 'Tap to send a suggested question by Brie Parson:',
  avatarName: 'Brie Parson',
  avatarImage: 'https://i.pravatar.cc/150?img=47',
}
Default.parameters = skipInChromatic

export const WithoutHeader: StoryFn<ComponentProps> = Template.bind({})
WithoutHeader.args = {
  faqs: [
    {
      id: '1',
      question: 'Book club slots',
      answer: 'We ship worldwide...',
      enabled: true,
      order: 1,
    },
    {
      id: '2',
      question: 'Refunds',
      answer: 'You can track...',
      enabled: true,
      order: 2,
    },
  ],
  onFaqClick: (id) => console.log('FAQ clicked:', id),
}
WithoutHeader.parameters = skipInChromatic

export const WithDisabledFaq: StoryFn<ComponentProps> = Template.bind({})
WithDisabledFaq.args = {
  faqs: [
    {
      id: '1',
      question: 'Enabled question',
      answer: 'Answer...',
      enabled: true,
      order: 1,
    },
    {
      id: '2',
      question: 'Disabled question',
      answer: 'Answer...',
      enabled: false,
      order: 2,
    },
    {
      id: '3',
      question: 'Another enabled',
      answer: 'Answer...',
      enabled: true,
      order: 3,
    },
  ],
  onFaqClick: (id) => console.log('FAQ clicked:', id),
}
WithDisabledFaq.parameters = skipInChromatic

export const WithLoading: StoryFn<ComponentProps> = Template.bind({})
WithLoading.args = {
  faqs: [
    {
      id: '1',
      question: 'Book club slots',
      answer: 'We ship worldwide...',
      enabled: true,
      order: 1,
    },
    {
      id: '2',
      question: 'Refunds',
      answer: 'You can track...',
      enabled: true,
      order: 2,
    },
    {
      id: '3',
      question: 'Brand collabs',
      answer: 'Returns are accepted...',
      enabled: true,
      order: 3,
    },
  ],
  onFaqClick: (id) => console.log('FAQ clicked:', id),
  loadingFaqId: '2',
  headerText: 'Tap to send a suggested question:',
}
WithLoading.parameters = skipInChromatic

export const Empty: StoryFn<ComponentProps> = Template.bind({})
Empty.args = {
  faqs: [],
  onFaqClick: (id) => console.log('FAQ clicked:', id),
}
Empty.parameters = skipInChromatic

export const WithAvatarOnly: StoryFn<ComponentProps> = Template.bind({})
WithAvatarOnly.args = {
  faqs: [
    {
      id: '1',
      question: 'Book club slots',
      answer: 'We ship worldwide...',
      enabled: true,
      order: 1,
    },
    {
      id: '2',
      question: 'Refunds',
      answer: 'You can track...',
      enabled: true,
      order: 2,
    },
  ],
  onFaqClick: (id) => console.log('FAQ clicked:', id),
  headerText: 'Frequently Asked Questions',
  avatarName: 'Account Owner',
}
WithAvatarOnly.parameters = skipInChromatic

export const WithAvatarAndImage: StoryFn<ComponentProps> = Template.bind({})
WithAvatarAndImage.args = {
  faqs: [
    {
      id: '1',
      question: 'How do I contact support?',
      answer: 'You can reach us...',
      enabled: true,
      order: 1,
    },
    {
      id: '2',
      question: 'What are your hours?',
      answer: 'We are available...',
      enabled: true,
      order: 2,
    },
  ],
  onFaqClick: (id) => console.log('FAQ clicked:', id),
  headerText: 'Questions for Sarah',
  avatarName: 'Sarah Johnson',
  avatarImage: 'https://i.pravatar.cc/150?img=28',
}
WithAvatarAndImage.parameters = skipInChromatic

export const AllStates: StoryFn = () => {
  const states: { label: string; props: ComponentProps }[] = [
    {
      label: 'Default (header + avatar + image)',
      props: {
        faqs: [
          {
            id: '1',
            question: 'Book club slots',
            answer: 'We ship worldwide...',
            enabled: true,
            order: 1,
          },
          {
            id: '2',
            question: 'Refunds',
            answer: 'You can track...',
            enabled: true,
            order: 2,
          },
          {
            id: '3',
            question: 'Brand collabs',
            answer: 'Returns are accepted...',
            enabled: true,
            order: 3,
          },
        ],
        onFaqClick: (id) => console.log('FAQ clicked:', id),
        headerText: 'Tap to send a suggested question by Brie Parson:',
        avatarName: 'Brie Parson',
        avatarImage: LOCAL_AVATAR,
      },
    },
    {
      label: 'Without header',
      props: {
        faqs: [
          {
            id: '1',
            question: 'Book club slots',
            answer: 'We ship worldwide...',
            enabled: true,
            order: 1,
          },
          {
            id: '2',
            question: 'Refunds',
            answer: 'You can track...',
            enabled: true,
            order: 2,
          },
        ],
        onFaqClick: (id) => console.log('FAQ clicked:', id),
      },
    },
    {
      label: 'With avatar only',
      props: {
        faqs: [
          {
            id: '1',
            question: 'Book club slots',
            answer: 'We ship worldwide...',
            enabled: true,
            order: 1,
          },
          {
            id: '2',
            question: 'Refunds',
            answer: 'You can track...',
            enabled: true,
            order: 2,
          },
        ],
        onFaqClick: (id) => console.log('FAQ clicked:', id),
        headerText: 'Frequently Asked Questions',
        avatarName: 'Account Owner',
      },
    },
    {
      label: 'With avatar and image',
      props: {
        faqs: [
          {
            id: '1',
            question: 'How do I contact support?',
            answer: 'You can reach us...',
            enabled: true,
            order: 1,
          },
          {
            id: '2',
            question: 'What are your hours?',
            answer: 'We are available...',
            enabled: true,
            order: 2,
          },
        ],
        onFaqClick: (id) => console.log('FAQ clicked:', id),
        headerText: 'Questions for Sarah',
        avatarName: 'Sarah Johnson',
        avatarImage: LOCAL_AVATAR,
      },
    },
    {
      label: 'With disabled FAQ',
      props: {
        faqs: [
          {
            id: '1',
            question: 'Enabled question',
            answer: 'Answer...',
            enabled: true,
            order: 1,
          },
          {
            id: '2',
            question: 'Disabled question',
            answer: 'Answer...',
            enabled: false,
            order: 2,
          },
          {
            id: '3',
            question: 'Another enabled',
            answer: 'Answer...',
            enabled: true,
            order: 3,
          },
        ],
        onFaqClick: (id) => console.log('FAQ clicked:', id),
      },
    },
    {
      label: 'With loading',
      props: {
        faqs: [
          {
            id: '1',
            question: 'Book club slots',
            answer: 'We ship worldwide...',
            enabled: true,
            order: 1,
          },
          {
            id: '2',
            question: 'Refunds',
            answer: 'You can track...',
            enabled: true,
            order: 2,
          },
          {
            id: '3',
            question: 'Brand collabs',
            answer: 'Returns are accepted...',
            enabled: true,
            order: 3,
          },
        ],
        onFaqClick: (id) => console.log('FAQ clicked:', id),
        loadingFaqId: '2',
        headerText: 'Tap to send a suggested question:',
      },
    },
    {
      label: 'Empty (renders nothing)',
      props: {
        faqs: [],
        onFaqClick: (id) => console.log('FAQ clicked:', id),
      },
    },
  ]

  return (
    <div className="flex flex-col gap-6 bg-white p-6">
      {states.map(({ label, props }) => (
        <div key={label} className="flex flex-col gap-1">
          <span className="text-xs text-stone">{label}</span>
          <div className="w-96">
            <FaqList {...props} />
          </div>
        </div>
      ))}
    </div>
  )
}