import * as Icons from 'lucide-react'

import { StepWithTooltip } from './StepWithTooltip'

import { CircularProgress } from '@/components/CircularProgress'
import { DialogHeader, DialogTitle } from '@/components/ui/dialog'

export function WizardHeader({
  title,
  Wizard,
  methods,
}: {
  title: string
  Wizard: any
  methods: any
}) {
  const currentIndex = Wizard.utils.getIndex(methods.current.id) + 1
  const totalSteps = Wizard.steps.length
  const nextStep = Wizard.steps[currentIndex]

  return (
    <div className="z-10 flex-none border-b bg-white">
      <div className="flex items-center justify-between p-6 pb-4">
        <DialogHeader className="p-0">
          <DialogTitle>{title}</DialogTitle>
        </DialogHeader>
        {methods.onClose && (
          <button
            onClick={methods.onClose}
            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none"
          >
            <Icons.X className="h-4 w-4" />
            <span className="sr-only">Cerrar</span>
          </button>
        )}
      </div>

      <div className="px-6 pb-6">
        <div className="block sm:hidden">
          <div className="flex items-center gap-5">
            <CircularProgress current={currentIndex} total={totalSteps} />
            <div className="flex flex-col justify-center">
              <h2 className="text-lg font-bold text-slate-900">
                <StepWithTooltip
                  title={methods.current.title}
                  desc={methods.current.description}
                />
              </h2>
              {nextStep ? (
                <p className="text-sm text-slate-400">
                  Siguiente: {nextStep.title}
                </p>
              ) : (
                <p className="text-sm font-medium text-green-500">
                  ¡Último paso!
                </p>
              )}
            </div>
          </div>
        </div>

        <div className="hidden sm:block">
          <Wizard.Stepper.Navigation className="border-border/60 rounded-xl border bg-slate-50 p-2">
            {Wizard.steps.map((step: any) => (
              <Wizard.Stepper.Step
                key={step.id}
                of={step.id}
                className="whitespace-nowrap"
              >
                <Wizard.Stepper.Title>
                  <StepWithTooltip title={step.title} desc={step.description} />
                </Wizard.Stepper.Title>
              </Wizard.Stepper.Step>
            ))}
          </Wizard.Stepper.Navigation>
        </div>
      </div>
    </div>
  )
}