import CategoryStep from "./CategoryStep";
import type { Category } from "@/lib/categories";
import StepIndicator from "./StepIndicator";

type WizardProps = {
  step: number;
  categories: Category[];
  answers: Record<string, string>;
  isComplete: boolean;
  onAnswerChange: (id: string, value: string) => void;
  onNext: () => void;
  onPrev: () => void;
  onReset: () => void;
};

export default function Wizard({
  step,
  categories,
  answers,
  isComplete,
  onAnswerChange,
  onNext,
  onPrev,
  onReset
}: WizardProps) {
  const currentCategory = categories[step];

  return (
    <div className="mx-auto flex w-full max-w-5xl flex-col gap-8">
      <StepIndicator
        current={step}
        total={categories.length}
        isComplete={isComplete}
      />

      {isComplete ? (
        <div className="grid gap-6">
          <div className="rounded-3xl border border-slate-200/80 bg-white/90 p-8 shadow-[0_24px_60px_-40px_rgba(15,23,42,0.6)]">
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
              Resumo
            </p>
            <h2 className="mt-2 text-3xl font-semibold text-slate-900">
              Todas as respostas estão prontas
            </h2>
            <p className="mt-3 text-base text-slate-600">
              Revise abaixo e, se necessário, volte para ajustar antes de gerar o
              prompt final.
            </p>
            <div className="mt-6 flex flex-wrap gap-3">
              <button
                className="rounded-full bg-slate-900 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-slate-900/30 transition hover:-translate-y-0.5"
                onClick={onReset}
                type="button"
              >
                Editar respostas
              </button>
            </div>
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            {categories.map((category) => (
              <div
                key={category.id}
                className="rounded-3xl border border-slate-200/80 bg-white/90 p-5 shadow-[0_20px_50px_-40px_rgba(15,23,42,0.6)]"
              >
                <p className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
                  {category.title}
                </p>
                <p className="mt-2 text-base text-slate-900">
                  {answers[category.id] || "(Sem resposta)"}
                </p>
              </div>
            ))}
          </div>
        </div>
      ) : currentCategory ? (
        <div className="grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
          <CategoryStep
            category={currentCategory}
            value={answers[currentCategory.id] ?? ""}
            onChange={(value) => onAnswerChange(currentCategory.id, value)}
          />
          <div className="flex flex-col gap-6">
            <div className="rounded-3xl border border-slate-900 bg-slate-900 p-6 text-white shadow-[0_24px_60px_-40px_rgba(15,23,42,0.6)]">
              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-300">
                Dica rápida
              </p>
              <h3 className="mt-2 text-2xl font-semibold">
                Pense no impacto direto
              </h3>
              <p className="mt-3 text-sm text-slate-200">
                Cada etapa deve informar uma decisão de comunicação. Se não
                influenciar o resultado final, simplifique.
              </p>
            </div>
            <div className="rounded-3xl border border-slate-200/80 bg-white/90 p-6 shadow-[0_24px_60px_-40px_rgba(15,23,42,0.6)]">
              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
                Etapa atual
              </p>
              <p className="mt-2 text-lg font-semibold text-slate-900">
                {currentCategory.title}
              </p>
              <p className="mt-3 text-sm text-slate-600">
                {currentCategory.tip}
              </p>
            </div>
          </div>
        </div>
      ) : null}

      {!isComplete ? (
        <div className="flex flex-wrap items-center justify-between gap-4">
          <button
            className="rounded-full border border-slate-300 bg-white px-5 py-3 text-sm font-semibold text-slate-700 transition hover:-translate-y-0.5 hover:border-slate-900"
            onClick={onPrev}
            type="button"
            disabled={step === 0}
          >
            Voltar
          </button>
          <button
            className="rounded-full bg-slate-900 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-slate-900/30 transition hover:-translate-y-0.5"
            onClick={onNext}
            type="button"
          >
            {step === categories.length - 1 ? "Concluir" : "Continuar"}
          </button>
        </div>
      ) : null}
    </div>
  );
}