'use client';

import * as Accordion from '@radix-ui/react-accordion';
import { ChevronDown } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { cn } from '@/lib/utils';
import type { ProductType } from '@/types/api';

interface PolicyAccordionProps {
  /** Product types present in the current booking. Only those types get a policy section. */
  productTypesPresent: ProductType[];
}

/**
 * Returns the i18n key for the cancellation/refund policy body of a given product type.
 * Uses a TS switch — never if/elseif on type strings per project conventions.
 */
function policyKey(type: ProductType): 'rental' | 'sale' | 'digital' {
  switch (type) {
    case 'rental':
      return 'rental';
    case 'sale':
      return 'sale';
    case 'digital':
      return 'digital';
  }
}

/**
 * Returns the display label key for a product type trigger button.
 */
function labelKey(type: ProductType): string {
  switch (type) {
    case 'rental':
      return 'rental_label';
    case 'sale':
      return 'sale_label';
    case 'digital':
      return 'digital_label';
  }
}

export function PolicyAccordion({ productTypesPresent }: PolicyAccordionProps) {
  const t = useTranslations('checkout.policy');

  if (productTypesPresent.length === 0) return null;

  return (
    <div data-testid="policy-accordion">
      <p className="mb-2 text-sm font-semibold text-neutral-700">{t('title')}</p>
      <Accordion.Root
        type="multiple"
        className="rounded-lg border border-neutral-200 bg-white divide-y divide-neutral-100 overflow-hidden"
      >
        {productTypesPresent.map((type) => (
          <Accordion.Item key={type} value={type}>
            <Accordion.Header>
              <Accordion.Trigger
                className={cn(
                  'flex w-full items-center justify-between px-4 py-3 text-sm font-medium text-neutral-800',
                  'hover:bg-neutral-50 transition-colors',
                  'data-[state=open]:bg-neutral-50',
                  '[&[data-state=open]>svg]:rotate-180',
                )}
              >
                {t(labelKey(type))}
                <ChevronDown
                  className="h-4 w-4 text-neutral-400 transition-transform duration-200 shrink-0"
                  aria-hidden="true"
                />
              </Accordion.Trigger>
            </Accordion.Header>
            <Accordion.Content
              data-testid={`policy-content-${type}`}
              className={cn(
                'px-4 text-sm text-neutral-600',
                'overflow-hidden',
                'data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up',
              )}
            >
              <div className="py-3">{t(policyKey(type))}</div>
            </Accordion.Content>
          </Accordion.Item>
        ))}
      </Accordion.Root>
    </div>
  );
}