"use client"

import React from 'react'
import { cn } from '../../utils/cn'
import { Button } from '../ui/button'
import { StatusBadge } from '../ui/status-badge'

export interface SectionItem {
  id: string
  title: string
  subtitle?: string
  description?: string
  number?: string
  disabled?: boolean
  leftIcon?: React.ReactNode
  badge?: {
    text: string
    variant?: 'card' | 'button'
    colorScheme?: 'cyan' | 'pink' | 'yellow' | 'green' | 'purple' | 'default'
  }
  screenshots?: {
    src: string
    alt: string
    position: 'left' | 'center' | 'right'
  }[]
}

export interface SectionSelectorProps {
  sections: SectionItem[]
  activeSection: string
  onSectionChange: (sectionId: string) => void
  disabled?: boolean
  className?: string
  buttonClassName?: string
  activeButtonClassName?: string
  layout?: 'vertical' | 'wrap'
  buttonWidth?: 'auto' | 'full' | 'responsive'
  minHeight?: string
  showDescription?: boolean
}

// Button component for consistency
const SectionButton: React.FC<{
  section: SectionItem
  isActive: boolean
  disabled: boolean
  onClick: () => void
  layout: 'vertical' | 'wrap'
  widthClasses: string
  buttonClassName?: string
  activeButtonClassName?: string
  minHeight?: string
  showDescription?: boolean
}> = ({
  section,
  isActive,
  disabled,
  onClick,
  layout,
  widthClasses,
  buttonClassName,
  activeButtonClassName,
  minHeight = layout === 'vertical' ? '96px' : '76px',
  showDescription = true
}) => {
  const titleClasses = "text-ods-text-primary"
  const subtitleClasses = "text-ods-text-secondary"
  const numberClasses = "text-ods-accent"

  const isDisabled = section.disabled || disabled;

  return (
    <Button
      onClick={onClick}
      disabled={isDisabled}
      variant="outline"
      className={cn(
        'bg-ods-card shadow-ods-card !text-left !justify-start !items-start hover:bg-ods-card-hover',
        isActive && 'border-ods-accent',
        widthClasses,
        buttonClassName,
        isActive && activeButtonClassName,
        layout === 'vertical' ? '!h-auto !py-4 !px-4 !min-h-[80px]' : '!text-left !whitespace-normal !h-auto !min-h-[76px]'
      )}
      style={{
        minHeight,
        touchAction: 'manipulation',
        WebkitTapHighlightColor: 'transparent',
        textAlign: 'left',
        justifyContent: 'flex-start',
        alignItems: 'flex-start'
      }}
    >
      {layout === 'vertical' ? (
        // Vertical layout with optional number prefix and leftIcon
        <div className="flex gap-3 items-start w-full">
          {section.leftIcon && (
            <div className="shrink-0 text-ods-text-primary opacity-70 mt-0.5">
              {section.leftIcon}
            </div>
          )}
          {section.number && (
            <span className={cn(numberClasses, 'text-h3 shrink-0')}>
              {section.number}
            </span>
          )}
          <div className="flex-1 text-left min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <p className={cn(titleClasses, 'text-h4 whitespace-normal break-words')}>
                {section.title}
              </p>
              {section.badge && (
                <StatusBadge
                  text={section.badge.text}
                  variant={section.badge.variant || 'button'}
                  colorScheme={section.badge.colorScheme || 'default'}
                />
              )}
            </div>
            {section.description && showDescription && (
              <p className={cn(subtitleClasses, 'text-h6 mt-1 whitespace-normal break-words')}>
                {section.description}
              </p>
            )}
          </div>
        </div>
      ) : (
        // Wrap layout with title, subtitle, and optional leftIcon
        <div className="flex gap-3 items-start justify-start w-full h-full" style={{ textAlign: 'left' }}>
          {section.leftIcon && (
            <div className="shrink-0 text-ods-text-primary opacity-70 mt-0.5">
              {section.leftIcon}
            </div>
          )}
          <div className="flex flex-col items-start justify-start flex-1 gap-1">
            <div className="flex items-start gap-2 flex-wrap w-full">
              <span className={cn(titleClasses, 'text-h3')} style={{ textAlign: 'left' }}>
                {section.title}
              </span>
              {section.badge && (
                <StatusBadge
                  text={section.badge.text}
                  variant={section.badge.variant || 'button'}
                  colorScheme={section.badge.colorScheme || 'default'}
                />
              )}
            </div>
            {section.subtitle && (
              <div className={cn(subtitleClasses, 'text-h6 w-full')} style={{ textAlign: 'left' }}>
                {section.subtitle}
              </div>
            )}
          </div>
        </div>
      )}
    </Button>
  )
}

export const SectionSelector: React.FC<SectionSelectorProps> = ({
  sections,
  activeSection,
  onSectionChange,
  disabled = false,
  className,
  buttonClassName,
  activeButtonClassName,
  layout = 'vertical',
  buttonWidth = 'auto',
  minHeight,
  showDescription = true
}) => {
  const containerClasses = cn(
    layout === 'wrap' ? 'flex flex-wrap gap-2 md:gap-4 lg:gap-6' : 'flex flex-col gap-2',
    className
  )

  const getButtonWidthClasses = () => {
    switch (buttonWidth) {
      case 'full':
        return 'w-full'
      case 'responsive':
        return 'w-full md:w-[calc(50%-8px)] lg:w-auto'
      default:
        return ''
    }
  }

  const widthClasses = getButtonWidthClasses()

  return (
    <div className={containerClasses}>
      {sections.map((section) => (
        <SectionButton
          key={section.id}
          section={section}
          isActive={activeSection === section.id}
          disabled={disabled}
          onClick={() => onSectionChange(section.id)}
          layout={layout}
          widthClasses={widthClasses}
          buttonClassName={buttonClassName}
          activeButtonClassName={activeButtonClassName}
          minHeight={minHeight}
          showDescription={showDescription}
        />
      ))}
    </div>
  )
}

export default SectionSelector