"use client";

import { useState } from "react";
import { Loader2, Sparkles } from "lucide-react";
import { Modal } from "@/components/ui/modal";
import type { NoteTemplate } from "@/lib/notes/note-templates";

interface TemplateWizardModalProps {
  template: NoteTemplate | null;
  open: boolean;
  submitting: boolean;
  onClose: () => void;
  onSubmit: (answers: Record<string, string>) => void;
}

// A couple of quick questions right before an exclusive template becomes a
// note — the answers replace {{tokens}} in the content so it starts
// personalized instead of full of generic placeholders.
export function TemplateWizardModal({ template, open, submitting, onClose, onSubmit }: TemplateWizardModalProps) {
  if (!template) return null;

  // Keyed by template id so switching templates (or reopening) always starts
  // with a clean answers object, instead of resetting state in an effect.
  return (
    <TemplateWizardForm
      key={template.id}
      template={template}
      open={open}
      submitting={submitting}
      onClose={onClose}
      onSubmit={onSubmit}
    />
  );
}

function TemplateWizardForm({
  template,
  open,
  submitting,
  onClose,
  onSubmit,
}: {
  template: NoteTemplate;
  open: boolean;
  submitting: boolean;
  onClose: () => void;
  onSubmit: (answers: Record<string, string>) => void;
}) {
  const [answers, setAnswers] = useState<Record<string, string>>({});

  return (
    <Modal
      open={open}
      onClose={() => {
        if (!submitting) onClose();
      }}
      title={`Personalize "${template.name}"`}
      description="A few quick answers, then your note is created already filled in."
      className="max-w-md"
    >
      <div className="space-y-4">
        <div className="mb-1 flex items-center gap-1.5 text-[11.5px] font-semibold text-amber-400">
          <Sparkles className="h-3.5 w-3.5" />
          Exclusive template
        </div>
        {(template.wizardQuestions || []).map((question) => (
          <div key={question.key} className="space-y-1.5">
            <label className="text-xs font-medium text-muted-foreground">{question.label}</label>
            <input
              autoFocus={question === template.wizardQuestions?.[0]}
              value={answers[question.key] || ""}
              onChange={(e) => setAnswers((prev) => ({ ...prev, [question.key]: e.target.value }))}
              placeholder={question.placeholder}
              className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:border-ring"
            />
          </div>
        ))}

        <button
          type="button"
          onClick={() => onSubmit(answers)}
          disabled={submitting}
          className="flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-60"
        >
          {submitting && <Loader2 className="h-4 w-4 animate-spin" />}
          {submitting ? "Creating…" : "Create my note"}
        </button>
      </div>
    </Modal>
  );
}