import { ArrowRight } from 'lucide-react'

import type {
  WorkflowAuthoringSection,
  WorkflowAuthoringSectionConfig,
} from './workflowAuthoringSections'

type WorkflowAuthoringSectionSelectorProps = {
  sections: WorkflowAuthoringSectionConfig[]
  activeSection: WorkflowAuthoringSection
  onSelectSection: (section: WorkflowAuthoringSection) => void
  variant?: 'pill' | 'card'
}

export function WorkflowAuthoringSectionSelector({
  sections,
  activeSection,
  onSelectSection,
  variant = 'pill',
}: WorkflowAuthoringSectionSelectorProps) {
  if (variant === 'card') {
    return (
      <div className="grid gap-2 sm:grid-cols-2">
        {sections.map(section => {
          const Icon = section.icon
          const isActive = activeSection === section.key
          const toneLabel = section.tone === 'Escape Hatch' ? 'Direct' : section.tone

          return (
            <button
              key={section.key}
              type="button"
              onClick={() => onSelectSection(section.key)}
              aria-label={section.label}
              className={`min-h-[76px] rounded-2xl border px-3 py-2.5 text-left transition-colors ${
                isActive
                  ? 'border-accent/40 bg-accent-light'
                  : 'border-border-default bg-surface hover:bg-surface-hover'
              }`}
              title={section.helper}
            >
              <div className="flex h-full items-start justify-between gap-2">
                <div className="min-w-0">
                  <span className="inline-flex items-center gap-2 text-sm font-medium text-content">
                    <Icon size={14} />
                    {section.label}
                  </span>
                  <div className="mt-1 flex flex-wrap items-center gap-1.5 text-[11px] text-content-muted">
                    <span
                      className={`rounded-full px-2 py-0.5 font-medium ${
                        section.tone === 'Escape Hatch'
                          ? 'border border-border-default bg-surface text-content-muted'
                          : 'bg-slate-100 text-slate-700 dark:bg-slate-900/40 dark:text-slate-300'
                      }`}
                    >
                      {toneLabel}
                    </span>
                    {section.summaryLabel && (
                      <span className="rounded-full border border-border-default bg-surface px-2 py-0.5">
                        {section.summaryLabel}
                      </span>
                    )}
                  </div>
                  <p className="mt-1 line-clamp-1 text-[11px] text-content-muted">
                    {section.helper}
                  </p>
                </div>
                <div className="flex shrink-0 items-center gap-1.5 self-center">
                  {isActive && <ArrowRight size={14} className="text-content-secondary" />}
                </div>
              </div>
            </button>
          )
        })}
      </div>
    )
  }

  return (
    <div className="flex flex-wrap gap-2">
      {sections.map(section => {
        const Icon = section.icon
        const isActive = activeSection === section.key
        return (
          <button
            key={section.key}
            type="button"
            onClick={() => onSelectSection(section.key)}
            className={`inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-xs font-medium transition-colors ${
              isActive
                ? 'bg-accent text-white'
                : 'border border-border-default bg-surface text-content-secondary hover:bg-surface-hover'
            }`}
            title={section.helper}
          >
            <Icon size={12} />
            {section.label}
          </button>
        )
      })}
    </div>
  )
}