import * as Accordion from '@radix-ui/react-accordion';
import React from 'react';
import { twMerge } from 'tailwind-merge';

import { FaqAnswerMarkdown } from '@/components/contest/FaqAnswerMarkdown';
import ChevronDownIcon from '@/icons/generated/ChevronDownIcon';
import { FaqItem } from '@/state/sessionStore';

interface FAQProps {
  items: FaqItem[];
  ref?: React.RefObject<HTMLDivElement>;
  headerClassName?: string;
  contentClassName?: string;
  className?: string;
  title?: string;
  subheader?: string;
  titleClassName?: string;
  questionClassName?: string;
}

export const FAQ = React.forwardRef<HTMLDivElement, FAQProps>(
  (
    {
      items,
      headerClassName,
      contentClassName,
      className,
      title = 'FAQs',
      subheader = "You've got questions. We've got answers.",
      titleClassName,
      questionClassName,
    },
    ref
  ) => {
    if (!items || items.length === 0) {
      return null;
    }

    return (
      <div
        ref={ref}
        className={twMerge(
          'mx-auto flex w-full max-w-[776px] flex-col gap-2 py-8',
          className
        )}
      >
        <div className='flex flex-col'>
          <h2
            className={twMerge(
              'text-center text-3xl leading-[32px] font-medium',
              titleClassName
            )}
          >
            {title}
          </h2>
          {subheader && (
            <span className='text-center text-sm text-foreground-secondary'>
              {subheader}
            </span>
          )}
        </div>
        <Accordion.Root
          className='mt-6 flex w-full flex-col gap-4'
          type='single'
          collapsible
        >
          {items.map((item, idx) => (
            <Accordion.Item
              key={idx}
              value={`faq-item-${idx}`}
              className='overflow-hidden bg-background-primary transition-all duration-200'
            >
              <Accordion.Header className='flex w-full'>
                <Accordion.Trigger
                  className={twMerge(
                    'group flex w-full items-center justify-between border-b border-border-primary/5 p-4 text-left transition-colors group-data-[state=open]:border-b-0 hover:cursor-pointer hover:bg-foreground-primary/5 focus:outline-none',
                    headerClassName
                  )}
                >
                  <h3
                    className={twMerge(
                      'text-base text-lg font-medium',
                      questionClassName
                    )}
                  >
                    {item.question}
                  </h3>
                  <ChevronDownIcon
                    className='shrink-0 transition-transform duration-300 ease-in-out group-data-[state=open]:rotate-180'
                    width={20}
                    height={20}
                  />
                </Accordion.Trigger>
              </Accordion.Header>
              <Accordion.Content className='overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down'>
                <div
                  className={twMerge(
                    'border-b border-border-primary/5 pt-2 pr-4 pb-6 pl-4 text-foreground-secondary',
                    contentClassName
                  )}
                >
                  <FaqAnswerMarkdown answer={item.answer} />
                </div>
              </Accordion.Content>
            </Accordion.Item>
          ))}
        </Accordion.Root>
      </div>
    );
  }
);

FAQ.displayName = 'FAQ';