import { Boxes, Wand2 } from 'lucide-react'

import type { WorkflowNodeDefinition } from '../../api/workflows'
import type { WorkflowGraphFamily } from './workflowNodeLibrary'
import { getWorkflowAuthoringPlan } from './workflowAuthoringGuidance'
import type { WorkflowModuleBundleId } from './workflowModuleBundles'

type WorkflowModuleBundlePanelProps = {
  definitions: WorkflowNodeDefinition[]
  graphFamily: WorkflowGraphFamily
  activeSteps: string[]
  onInsertModule?: (bundleId: WorkflowModuleBundleId) => void
}

export function WorkflowModuleBundlePanel({
  definitions,
  graphFamily,
  activeSteps,
  onInsertModule,
}: WorkflowModuleBundlePanelProps) {
  const { moduleBundles } = getWorkflowAuthoringPlan(definitions, graphFamily, activeSteps)

  if (moduleBundles.length === 0) return null

  return (
    <div className="space-y-2 rounded-2xl border border-border-default bg-surface-hover/30 p-3">
      <div className="flex items-start justify-between gap-3">
        <div>
          <div className="flex items-center gap-2">
            <Boxes size={14} className="text-accent" />
            <p className="text-xs font-semibold uppercase tracking-wide text-content-secondary">
              Production Modules
            </p>
          </div>
          <p className="mt-1 text-xs text-content-muted">
            Insert reusable subgraphs for core production stages instead of assembling every node from scratch.
          </p>
        </div>
        <span className="rounded-full border border-border-default bg-surface px-2 py-0.5 text-[11px] text-content-muted">
          {moduleBundles.length} bundles
        </span>
      </div>

      <div className="space-y-2">
        {moduleBundles.map(bundle => (
            <div
              key={bundle.id}
              className="rounded-2xl border border-border-default bg-surface px-3 py-3"
            >
              <div className="flex items-start justify-between gap-3">
                <div className="space-y-1">
                  <div className="flex flex-wrap items-center gap-2">
                    <p className="text-sm font-semibold text-content">{bundle.label}</p>
                    <span className="rounded-full bg-surface-hover px-2 py-0.5 text-[11px] font-medium text-content-secondary">
                      {bundle.stage}
                    </span>
                    <span className="rounded-full bg-surface-hover px-2 py-0.5 text-[11px] text-content-muted">
                      {bundle.presentCount}/{bundle.totalCount} present
                    </span>
                  </div>
                  <p className="text-xs text-content-muted">{bundle.description}</p>
                  <p className="text-[11px] text-content-muted">
                    {bundle.stepIds.join(' -> ')}
                  </p>
                </div>
                {onInsertModule ? (
                  <button
                    type="button"
                    onClick={() => onInsertModule(bundle.id)}
                    aria-label={`Insert ${bundle.label}`}
                    className="inline-flex items-center gap-1 rounded-xl bg-accent px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-accent-hover"
                  >
                    <Wand2 size={12} />
                    Insert
                  </button>
                ) : null}
              </div>
            </div>
        ))}
      </div>
    </div>
  )
}