import { useMemo, useRef, useState, type ChangeEvent } from "react"
import { Link, useLocation, useParams, useNavigate } from "react-router-dom"
import { ArrowLeft, ArrowRight, ChevronDown, Grid3X3, Check, Plus, Trash2, GripVertical, Edit, Rocket, Loader2, Upload } from "lucide-react"
import { toast } from "sonner"
import { Card } from "../../components/ui/card"
import { Button } from "../../components/ui/button"
import { Input } from "../../components/ui/input"
import { PracticeQuestionEditorFields } from "../../components/content-management/PracticeQuestionEditorFields"
import { createQuestionSet, createQuestion, addQuestionToSet } from "../../api/courses.api"
import { uploadVideoFile } from "../../api/files.api"
import { Select } from "../../components/ui/select"
import type { QuestionOption } from "../../types/course.types"

type Step = 1 | 2 | 3 | 4 | 5
type ResultStatus = "success" | "error"
type QuestionType = "MCQ" | "TRUE_FALSE" | "SHORT" | "AUDIO"
type DifficultyLevel = "EASY" | "MEDIUM" | "HARD"

interface Persona {
  id: string
  name: string
  avatar: string
}

interface MCQOption {
  text: string
  isCorrect: boolean
}

interface Question {
  id: string
  questionText: string
  questionType: QuestionType
  difficultyLevel: DifficultyLevel
  points: number
  tips: string
  explanation: string
  options: MCQOption[]
  voicePrompt: string
  sampleAnswerVoicePrompt: string
  audioCorrectAnswerText: string
  shortAnswers: string[]
  imageUrl: string
}

const PERSONAS: Persona[] = [
  { id: "1", name: "Dawit", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Dawit" },
  { id: "2", name: "Mahlet", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Mahlet" },
  { id: "3", name: "Amanuel", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Amanuel" },
  { id: "4", name: "Bethel", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Bethel" },
  { id: "5", name: "Liya", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Liya" },
  { id: "6", name: "Aseffa", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Aseffa" },
  { id: "7", name: "Hana", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Hana" },
  { id: "8", name: "Nahom", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Nahom" },
]

const STEPS = [
  { number: 1, label: "Context" },
  { number: 2, label: "Persona" },
  { number: 3, label: "Questions" },
  { number: 4, label: "Review" },
]

/** Prefer direct storage URL; for Vimeo pipeline match SubCourseContentPage player URL shape. */
function introVideoUrlFromUploadResponse(data: { url?: string; embed_url?: string } | undefined): string | null {
  if (!data) return null
  const pageUrl = data.url?.trim()
  const embedUrl = data.embed_url?.trim()
  if (embedUrl) {
    const hashFromUrl = pageUrl ? pageUrl.split("/").filter(Boolean).at(-1) : undefined
    return hashFromUrl ? `${embedUrl}?h=${hashFromUrl}` : embedUrl
  }
  return pageUrl || null
}

function toVimeoEmbedUrl(rawUrl: string): string | null {
  try {
    const parsed = new URL(rawUrl.trim())
    const host = parsed.hostname.toLowerCase()
    if (!host.includes("vimeo.com")) return null
    if (host.includes("player.vimeo.com") && parsed.pathname.includes("/video/")) return parsed.toString()
    const segments = parsed.pathname.split("/").filter(Boolean)
    const videoId = segments.find((segment) => /^\d+$/.test(segment))
    if (!videoId) return null
    const hash = parsed.searchParams.get("h")
    return hash
      ? `https://player.vimeo.com/video/${videoId}?h=${encodeURIComponent(hash)}`
      : `https://player.vimeo.com/video/${videoId}`
  } catch {
    return null
  }
}

function isDirectVideoFile(url: string): boolean {
  const clean = url.split("?")[0].toLowerCase()
  return /\.(mp4|webm|ogg|mov|m4v)$/.test(clean)
}

function escapeHtml(raw: string): string {
  return raw
    .replaceAll("&", "&")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#39;")
}

function sanitizeAdminRichTextHtml(input: string): string {
  if (!input.trim()) return ""
  try {
    const parser = new DOMParser()
    const doc = parser.parseFromString(input, "text/html")
    const blockedTags = new Set(["script", "style", "iframe", "object", "embed", "link", "meta"])
    doc.body.querySelectorAll("*").forEach((el) => {
      const tagName = el.tagName.toLowerCase()
      if (blockedTags.has(tagName)) {
        el.remove()
        return
      }
      const attrs = [...el.attributes]
      attrs.forEach((attr) => {
        const name = attr.name.toLowerCase()
        const value = attr.value.trim().toLowerCase()
        if (name.startsWith("on")) {
          el.removeAttribute(attr.name)
          return
        }
        if ((name === "href" || name === "src") && value.startsWith("javascript:")) {
          el.removeAttribute(attr.name)
        }
      })
    })
    return doc.body.innerHTML
  } catch {
    return escapeHtml(input).replace(/\r?\n/g, "<br />")
  }
}

function formatDescriptionForPreview(raw: string): string {
  if (!raw.trim()) return ""
  const hasHtml = /<\/?[a-z][\s\S]*>/i.test(raw)
  if (hasHtml) return sanitizeAdminRichTextHtml(raw)
  return escapeHtml(raw).replace(/\r?\n/g, "<br />")
}

function createEmptyQuestion(id: string): Question {
  return {
    id,
    questionText: "",
    questionType: "MCQ",
    difficultyLevel: "EASY",
    points: 1,
    tips: "",
    explanation: "",
    options: [
      { text: "", isCorrect: true },
      { text: "", isCorrect: false },
      { text: "", isCorrect: false },
      { text: "", isCorrect: false },
    ],
    voicePrompt: "",
    sampleAnswerVoicePrompt: "",
    audioCorrectAnswerText: "",
    shortAnswers: [],
    imageUrl: "",
  }
}

export function AddNewPracticePage() {
  const { categoryId, courseId, subModuleId } = useParams()
  const location = useLocation()
  const navigate = useNavigate()
  const searchParams = new URLSearchParams(location.search)
  const source = searchParams.get("source")
  const backTo = useMemo(() => {
    if (location.pathname.includes("/content/human-language/") && location.pathname.includes("/sub-module/")) {
      return `/content/human-language/${categoryId}/${courseId}/sub-module/${subModuleId}`
    }
    if (source === "human-language") return "/content/human-language"
    return `/content/category/${categoryId}/courses/${courseId}/sub-modules/${subModuleId}`
  }, [location.pathname, source, categoryId, courseId, subModuleId])
  
  const [currentStep, setCurrentStep] = useState<Step>(1)
  const [saving, setSaving] = useState(false)

  // Step 1: Context
  const [selectedProgram] = useState("Intermediate")
  const [selectedCourse] = useState("B2")
  const [practiceTitle, setPracticeTitle] = useState("")
  const [practiceDescription, setPracticeDescription] = useState("")
  const [introVideoUrl, setIntroVideoUrl] = useState("")
  const [uploadingIntroVideo, setUploadingIntroVideo] = useState(false)
  const [importingIntroVideoUrl, setImportingIntroVideoUrl] = useState(false)
  const introVideoFileInputRef = useRef<HTMLInputElement>(null)
  const [shuffleQuestions, setShuffleQuestions] = useState(false)
  const [passingScore, setPassingScore] = useState(50)
  const [timeLimitMinutes, setTimeLimitMinutes] = useState(60)
  const [saveError, setSaveError] = useState<string | null>(null)
  const [resultStatus, setResultStatus] = useState<ResultStatus | null>(null)
  const [resultMessage, setResultMessage] = useState("")

  // Step 2: Persona
  const [selectedPersona, setSelectedPersona] = useState<string | null>(null)

  // Step 3: Questions
  const [questions, setQuestions] = useState<Question[]>([
    createEmptyQuestion("1"),
  ])

  const handleNext = () => {
    if (currentStep < 4) {
      setCurrentStep((currentStep + 1) as Step)
    }
  }

  const handleBack = () => {
    if (currentStep > 1) {
      setCurrentStep((currentStep - 1) as Step)
    }
  }

  const handleCancel = () => {
    navigate(backTo)
  }

  const handleIntroVideoFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    event.target.value = ""
    if (!file) return

    setUploadingIntroVideo(true)
    try {
      const uploadRes = await uploadVideoFile(file, {
        title: practiceTitle.trim() || file.name.replace(/\.[^.]+$/, "") || "Practice intro",
        description: practiceDescription.trim() || undefined,
      })
      const finalUrl = introVideoUrlFromUploadResponse(uploadRes.data?.data)
      if (!finalUrl) throw new Error("Missing uploaded video url")
      setIntroVideoUrl(finalUrl)
      toast.success("Intro video uploaded", { description: "The URL has been filled in for you." })
    } catch (error) {
      console.error("Failed to upload intro video:", error)
      toast.error("Failed to upload intro video")
    } finally {
      setUploadingIntroVideo(false)
    }
  }

  const handleImportIntroVideoFromUrl = async () => {
    const source = introVideoUrl.trim()
    if (!source || !/^https?:\/\//i.test(source)) return
    const vimeoEmbed = toVimeoEmbedUrl(source)
    // Vimeo page URLs can be protected by anti-bot checks when server-side fetched.
    // For those links, prefer local normalization to player URL instead of failing import.
    if (vimeoEmbed) {
      setIntroVideoUrl(vimeoEmbed)
      return
    }

    setImportingIntroVideoUrl(true)
    try {
      const uploadRes = await uploadVideoFile(source, {
        title: practiceTitle.trim() || "Practice intro",
        description: practiceDescription.trim() || undefined,
      })
      const finalUrl = introVideoUrlFromUploadResponse(uploadRes.data?.data)
      if (!finalUrl) throw new Error("Missing uploaded video url")
      setIntroVideoUrl(finalUrl)
      toast.success("Intro video URL imported", { description: "Processed via /files/upload." })
    } catch (error) {
      console.error("Failed to import intro video URL:", error)
      toast.error("Failed to import intro video URL")
    } finally {
      setImportingIntroVideoUrl(false)
    }
  }

  const introVideoPreview = useMemo(() => {
    const raw = introVideoUrl.trim()
    if (!raw) return null
    const vimeoEmbedUrl = toVimeoEmbedUrl(raw)
    if (vimeoEmbedUrl) return { kind: "vimeo" as const, url: vimeoEmbedUrl }
    if (isDirectVideoFile(raw)) return { kind: "video" as const, url: raw }
    return null
  }, [introVideoUrl])

  const descriptionPreviewHtml = useMemo(
    () => formatDescriptionForPreview(practiceDescription),
    [practiceDescription],
  )

  const addQuestion = () => {
    setQuestions([...questions, createEmptyQuestion(String(Date.now()))])
  }

  const removeQuestion = (id: string) => {
    if (questions.length > 1) {
      setQuestions(questions.filter(q => q.id !== id))
    }
  }

  const updateQuestion = (id: string, updates: Partial<Question>) => {
    setQuestions(questions.map(q => q.id === id ? { ...q, ...updates } : q))
  }

  const saveQuestionSet = async (status: "DRAFT" | "PUBLISHED") => {
    setSaving(true)
    setSaveError(null)
    try {
      const persona = PERSONAS.find(p => p.id === selectedPersona)
      const setRes = await createQuestionSet({
        title: practiceTitle || "Untitled Practice",
        set_type: "PRACTICE",
        owner_type: "SUB_MODULE",
        owner_id: Number(subModuleId),
        ...(practiceDescription.trim() ? { description: practiceDescription.trim() } : {}),
        ...(persona?.name ? { persona: persona.name } : {}),
        shuffle_questions: shuffleQuestions,
        status,
        passing_score: passingScore,
        time_limit_minutes: timeLimitMinutes,
        ...(introVideoUrl.trim() ? { intro_video_url: introVideoUrl.trim() } : {}),
      })

      const questionSetId = setRes.data?.data?.id
      if (questionSetId) {
        for (let i = 0; i < questions.length; i++) {
          const q = questions[i]
          if (!q.questionText.trim()) continue

          const options: QuestionOption[] = q.questionType === "MCQ"
            ? q.options.map((opt, idx) => ({
                option_order: idx + 1,
                option_text: opt.text,
                is_correct: opt.isCorrect,
              }))
            : []

          const qRes = await createQuestion({
            question_text: q.questionText,
            question_type: q.questionType,
            difficulty_level: q.difficultyLevel,
            points: q.points,
            tips: q.tips || undefined,
            explanation: q.explanation || undefined,
            status: "PUBLISHED",
            options: options.length > 0 ? options : undefined,
            voice_prompt: q.voicePrompt || undefined,
            sample_answer_voice_prompt: q.sampleAnswerVoicePrompt || undefined,
            audio_correct_answer_text: q.audioCorrectAnswerText || undefined,
            image_url: q.imageUrl.trim() || undefined,
            short_answers: q.shortAnswers.length > 0 ? q.shortAnswers : undefined,
          })

          const questionId = qRes.data?.data?.id
          if (questionId) {
            await addQuestionToSet(questionSetId, {
              display_order: i + 1,
              question_id: questionId,
            })
          }
        }
      }

      setResultStatus("success")
      setResultMessage(
        status === "PUBLISHED"
          ? "Your speaking practice is now active."
          : "Your practice has been saved as a draft."
      )
      setCurrentStep(5)
    } catch (err: unknown) {
      console.error("Failed to save practice:", err)
      const errorMsg = err instanceof Error ? err.message : "An unexpected error occurred."
      setResultStatus("error")
      setResultMessage(errorMsg)
      setCurrentStep(5)
    } finally {
      setSaving(false)
    }
  }

  const handleSaveAsDraft = () => saveQuestionSet("DRAFT")
  const handlePublish = () => saveQuestionSet("PUBLISHED")

  const getNextButtonLabel = () => {
    switch (currentStep) {
      case 1: return "Next: Persona"
      case 2: return "Next: Questions"
      case 3: return "Next: Review"
      default: return "Next"
    }
  }

  return (
    <div className="mx-auto w-full max-w-7xl px-4 pb-12 sm:px-6 lg:px-8">
      <div className="space-y-5 sm:space-y-6">
      {currentStep !== 5 && (
        <>
          {/* Back Link */}
          <Link
            to={backTo}
            className="group inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium text-grayScale-600 transition-colors hover:bg-brand-50 hover:text-brand-600"
          >
            <ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
            Back to Sub-course
          </Link>

          {/* Header */}
          <div className="border-b border-grayScale-100 pb-6 sm:pb-8">
            <h1 className="text-2xl font-bold tracking-tight text-grayScale-900 sm:text-3xl">Add New Practice</h1>
            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-grayScale-500 sm:text-[15px]">
              Create a new immersive practice session for students.
            </p>
          </div>
        </>
      )}

      {/* Step Tracker */}
      {currentStep !== 5 && (
      <div className="flex items-center justify-center rounded-2xl border border-grayScale-100 bg-grayScale-50/40 px-3 py-4 sm:px-6 sm:py-5">
        {STEPS.map((step, index) => (
          <div key={step.number} className="flex items-center">
            <div className="flex flex-col items-center">
              <div
                className={`flex h-9 w-9 items-center justify-center rounded-full text-xs font-semibold shadow-sm transition-all duration-300 sm:h-10 sm:w-10 sm:text-sm ${
                  currentStep === step.number
                    ? "bg-brand-500 text-white ring-4 ring-brand-100"
                    : currentStep > step.number
                    ? "bg-brand-500 text-white"
                    : "border-2 border-grayScale-300 bg-white text-grayScale-400"
                }`}
              >
                {currentStep > step.number ? <Check className="h-4 w-4" /> : step.number}
              </div>
              <span
                className={`mt-2 max-w-[4.5rem] text-center text-[10px] font-semibold uppercase tracking-wide sm:mt-2.5 sm:max-w-none sm:text-xs sm:normal-case sm:tracking-wide ${
                  currentStep === step.number
                    ? "text-brand-600"
                    : currentStep > step.number
                    ? "text-brand-500"
                    : "text-grayScale-400"
                }`}
              >
                {step.label}
              </span>
            </div>
            {index < STEPS.length - 1 && (
              <div
                className={`mx-2 h-0.5 w-10 shrink-0 rounded-full transition-colors duration-300 sm:mx-4 sm:w-20 md:w-28 lg:w-36 xl:w-44 ${
                  currentStep > step.number ? "bg-brand-500" : "bg-grayScale-200"
                }`}
              />
            )}
          </div>
        ))}
      </div>
      )}

      {/* Step Content */}
      {currentStep === 1 && (
        <Card className="overflow-hidden border-grayScale-200/80 shadow-sm">
          <div className="border-b border-grayScale-100 bg-gradient-to-r from-grayScale-50/80 to-white px-5 py-5 sm:px-8 sm:py-6">
            <h2 className="text-lg font-semibold tracking-tight text-grayScale-900 sm:text-xl">Step 1: Context</h2>
            <p className="mt-1.5 max-w-3xl text-sm leading-relaxed text-grayScale-500">
              Define details and rules for this practice. Curriculum context is shown on the right.
            </p>
          </div>

          <div className="p-5 sm:p-8 lg:p-10">
            <div className="grid gap-8 lg:grid-cols-12 lg:gap-10">
              <div className="space-y-6 lg:col-span-7">
                <div className="space-y-2">
                  <label className="text-sm font-medium text-grayScale-700">Practice Title</label>
                  <Input
                    value={practiceTitle}
                    onChange={(e) => setPracticeTitle(e.target.value)}
                    placeholder="Enter practice title"
                    className="h-11"
                  />
                </div>

                <div className="space-y-2">
                  <label className="text-sm font-medium text-grayScale-700">Description</label>
                  <textarea
                    value={practiceDescription}
                    onChange={(e) => setPracticeDescription(e.target.value)}
                    placeholder="Enter practice description"
                    className="min-h-[88px] w-full rounded-lg border border-grayScale-200 px-3 py-2.5 text-sm transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100"
                    rows={3}
                  />
                  <p className="text-xs text-grayScale-500">
                    Supports plain text and formatted HTML (for headings, lists, italics, and emphasis).
                  </p>
                </div>

                <div className="space-y-2">
                  <label className="text-sm font-medium text-grayScale-700">
                    Intro video URL <span className="font-normal text-grayScale-400">(optional)</span>
                  </label>
                  <Input
                    value={introVideoUrl}
                    onChange={(e) => setIntroVideoUrl(e.target.value)}
                    onBlur={() => void handleImportIntroVideoFromUrl()}
                    placeholder="https://…"
                    type="url"
                    inputMode="url"
                    autoComplete="off"
                    className="h-11 font-mono text-[13px]"
                  />
                  <input
                    ref={introVideoFileInputRef}
                    type="file"
                    accept="video/*"
                    className="hidden"
                    onChange={handleIntroVideoFileChange}
                    disabled={uploadingIntroVideo || importingIntroVideoUrl}
                  />
                  <div className="flex flex-wrap items-center gap-2">
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      disabled={uploadingIntroVideo || importingIntroVideoUrl}
                      onClick={() => introVideoFileInputRef.current?.click()}
                      className="gap-1.5"
                    >
                      {uploadingIntroVideo ? (
                        <Loader2 className="h-4 w-4 animate-spin" />
                      ) : (
                        <Upload className="h-4 w-4" />
                      )}
                      {uploadingIntroVideo ? "Uploading…" : "Upload video from computer"}
                    </Button>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      disabled={uploadingIntroVideo || importingIntroVideoUrl || !introVideoUrl.trim()}
                      onClick={() => void handleImportIntroVideoFromUrl()}
                    >
                      {importingIntroVideoUrl ? (
                        <>
                          <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
                          Importing URL…
                        </>
                      ) : (
                        "Import URL via /files/upload"
                      )}
                    </Button>
                    {introVideoUrl.trim() ? (
                      <Button type="button" variant="ghost" size="sm" onClick={() => setIntroVideoUrl("")}>
                        Clear URL
                      </Button>
                    ) : null}
                  </div>
                  {introVideoPreview ? (
                    <div className="rounded-xl border border-grayScale-200 bg-grayScale-50/40 p-3">
                      <p className="mb-2 text-xs font-medium text-grayScale-500">Preview</p>
                      {introVideoPreview.kind === "vimeo" ? (
                        <div className="overflow-hidden rounded-lg border border-grayScale-200 bg-black">
                          <iframe
                            src={introVideoPreview.url}
                            title="Intro video preview"
                            className="aspect-video w-full"
                            allow="autoplay; fullscreen; picture-in-picture"
                            allowFullScreen
                          />
                        </div>
                      ) : (
                        <video
                          controls
                          src={introVideoPreview.url}
                          className="aspect-video w-full rounded-lg border border-grayScale-200 bg-black"
                        />
                      )}
                    </div>
                  ) : null}
                  <p className="text-xs leading-relaxed text-grayScale-500">
                    Paste a link or upload from your computer; uploads go through the file service (optional, not tied to sub-course video rows).
                  </p>
                </div>
              </div>

              <aside className="space-y-5 lg:col-span-5">
                <div className="rounded-xl border border-grayScale-200 bg-grayScale-50/40 p-5 shadow-sm ring-1 ring-grayScale-100/80">
                  <h3 className="text-xs font-semibold uppercase tracking-wider text-grayScale-500">Scoring & behavior</h3>
                  <div className="mt-4 grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <label className="text-sm font-medium text-grayScale-700">Passing score</label>
                      <Input
                        type="number"
                        value={passingScore}
                        onChange={(e) => setPassingScore(Number(e.target.value))}
                        placeholder="50"
                        min={0}
                        max={100}
                        className="h-10"
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-sm font-medium text-grayScale-700">Time (min)</label>
                      <Input
                        type="number"
                        value={timeLimitMinutes}
                        onChange={(e) => setTimeLimitMinutes(Number(e.target.value))}
                        placeholder="60"
                        min={0}
                        className="h-10"
                      />
                    </div>
                  </div>
                  <div className="mt-4 flex items-center justify-between gap-3 rounded-lg border border-grayScale-200/80 bg-white px-4 py-3">
                    <label className="text-sm font-medium text-grayScale-700">Shuffle questions</label>
                    <button
                      type="button"
                      onClick={() => setShuffleQuestions(!shuffleQuestions)}
                      className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out ${
                        shuffleQuestions ? "bg-brand-500" : "bg-grayScale-300"
                      }`}
                    >
                      <span
                        className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow-md ring-0 transition-transform duration-200 ease-in-out ${
                          shuffleQuestions ? "translate-x-5" : "translate-x-0"
                        }`}
                      />
                    </button>
                  </div>
                </div>

                <div className="rounded-xl border border-grayScale-200 bg-white p-5 shadow-sm ring-1 ring-grayScale-100/80">
                  <h3 className="text-xs font-semibold uppercase tracking-wider text-grayScale-500">Curriculum context</h3>
                  <p className="mt-1 text-xs text-grayScale-400">Read-only for this flow.</p>
                  <div className="mt-4 space-y-3">
                    <div className="space-y-2">
                      <label className="text-sm font-medium text-grayScale-700">
                        Program{" "}
                        <span className="rounded bg-brand-50 px-1.5 py-0.5 text-xs font-medium text-brand-500">Auto</span>
                      </label>
                      <div className="flex items-center gap-3 rounded-lg border border-dashed border-grayScale-200 bg-grayScale-50/50 px-3 py-2.5">
                        <Grid3X3 className="h-4 w-4 shrink-0 text-grayScale-400" />
                        <span className="min-w-0 flex-1 truncate text-sm font-medium text-grayScale-700">{selectedProgram}</span>
                        <ChevronDown className="h-4 w-4 shrink-0 text-grayScale-300" />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <label className="text-sm font-medium text-grayScale-700">
                        Course{" "}
                        <span className="rounded bg-brand-50 px-1.5 py-0.5 text-xs font-medium text-brand-500">Auto</span>
                      </label>
                      <div className="flex items-center gap-3 rounded-lg border border-dashed border-grayScale-200 bg-grayScale-50/50 px-3 py-2.5">
                        <Grid3X3 className="h-4 w-4 shrink-0 text-grayScale-400" />
                        <span className="min-w-0 flex-1 truncate text-sm font-medium text-grayScale-700">{selectedCourse}</span>
                        <ChevronDown className="h-4 w-4 shrink-0 text-grayScale-300" />
                      </div>
                    </div>
                  </div>
                </div>
              </aside>
            </div>
          </div>

          <div className="flex flex-col-reverse items-stretch justify-between gap-3 border-t border-grayScale-100 bg-grayScale-50/30 px-5 py-4 sm:flex-row sm:items-center sm:px-8 sm:py-5">
            <Button variant="ghost" onClick={handleCancel} className="sm:w-auto">
              Cancel
            </Button>
            <Button className="w-full bg-brand-500 hover:bg-brand-600 sm:w-auto sm:min-w-[180px]" onClick={handleNext}>
              {getNextButtonLabel()}
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </Card>
      )}

      {currentStep === 2 && (
        <Card className="overflow-hidden border-grayScale-200/80 shadow-sm">
          <div className="border-b border-grayScale-100 bg-gradient-to-r from-grayScale-50/80 to-white px-5 py-5 sm:px-8 sm:py-6">
            <h2 className="text-lg font-semibold tracking-tight text-grayScale-900 sm:text-xl">Step 2: Persona</h2>
            <p className="mt-1.5 max-w-3xl text-sm leading-relaxed text-grayScale-500">
              Choose the character students will interact with in this practice.
            </p>
          </div>

          <div className="p-5 sm:p-8 lg:p-10">
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4 lg:grid-cols-4 lg:gap-5">
            {PERSONAS.map((persona) => (
              <button
                key={persona.id}
                onClick={() => setSelectedPersona(persona.id)}
                className={`group relative flex flex-col items-center rounded-xl border-2 p-6 transition-all duration-200 ${
                  selectedPersona === persona.id
                    ? "border-brand-500 bg-brand-50 shadow-md shadow-brand-100"
                    : "border-grayScale-200 bg-white hover:border-brand-300 hover:shadow-sm"
                }`}
              >
                {selectedPersona === persona.id && (
                  <div className="absolute right-2.5 top-2.5 flex h-6 w-6 items-center justify-center rounded-full bg-brand-500 text-white shadow-sm">
                    <Check className="h-3.5 w-3.5" />
                  </div>
                )}
                <div className={`mb-3 h-20 w-20 overflow-hidden rounded-full bg-grayScale-100 ring-2 transition-all duration-200 ${
                  selectedPersona === persona.id ? "ring-brand-300 ring-offset-2" : "ring-transparent group-hover:ring-grayScale-200"
                }`}>
                  <img
                    src={persona.avatar}
                    alt={persona.name}
                    className="h-full w-full object-cover"
                  />
                </div>
                <span className={`text-sm font-semibold transition-colors ${
                  selectedPersona === persona.id ? "text-brand-600" : "text-grayScale-900"
                }`}>{persona.name}</span>
              </button>
            ))}
          </div>
          </div>

          <div className="flex flex-col-reverse items-stretch justify-between gap-3 border-t border-grayScale-100 bg-grayScale-50/30 px-5 py-4 sm:flex-row sm:items-center sm:px-8 sm:py-5">
            <Button variant="outline" onClick={handleBack} className="sm:w-auto">
              Back
            </Button>
            <Button className="w-full bg-brand-500 hover:bg-brand-600 sm:w-auto sm:min-w-[180px]" onClick={handleNext}>
              {getNextButtonLabel()}
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </Card>
      )}

      {currentStep === 3 && (
        <div className="w-full space-y-6">
          <div className="rounded-2xl border border-grayScale-200/80 bg-gradient-to-r from-grayScale-50/80 to-white px-5 py-5 shadow-sm sm:px-8 sm:py-6">
            <h2 className="text-lg font-semibold tracking-tight text-grayScale-900 sm:text-xl">Step 3: Questions</h2>
            <p className="mt-1.5 max-w-3xl text-sm leading-relaxed text-grayScale-500">
              Add MCQ, True/False, Short Answer, or Audio items. Use the full width for stems and options.
            </p>
          </div>

          <div className="space-y-4 sm:space-y-5">
            {questions.map((question, index) => (
              <Card key={question.id} className="border border-grayScale-200/90 border-l-4 border-l-brand-500 p-5 shadow-sm transition-shadow hover:shadow-md sm:p-6 lg:p-8">
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-3">
                    <GripVertical className="h-5 w-5 cursor-grab text-grayScale-300 transition-colors hover:text-grayScale-500" />
                    <span className="text-base font-semibold text-grayScale-900">Question {index + 1}</span>
                  </div>
                  <button
                    onClick={() => removeQuestion(question.id)}
                    className="rounded-lg p-1.5 text-grayScale-400 transition-colors hover:bg-red-50 hover:text-red-500"
                  >
                    <Trash2 className="h-4 w-4" />
                  </button>
                </div>

                <PracticeQuestionEditorFields
                  value={{
                    questionText: question.questionText,
                    questionType: question.questionType,
                    difficultyLevel: question.difficultyLevel,
                    points: question.points,
                    tips: question.tips,
                    explanation: question.explanation,
                    options: question.options,
                    voicePrompt: question.voicePrompt,
                    sampleAnswerVoicePrompt: question.sampleAnswerVoicePrompt,
                    audioCorrectAnswerText: question.audioCorrectAnswerText,
                    shortAnswer: question.shortAnswers[0] ?? "",
                    imageUrl: question.imageUrl,
                  }}
                  onChange={(next) => {
                    updateQuestion(question.id, {
                      questionText: next.questionText,
                      questionType: next.questionType as QuestionType,
                      difficultyLevel: next.difficultyLevel as DifficultyLevel,
                      points: next.points,
                      tips: next.tips,
                      explanation: next.explanation,
                      options: next.options,
                      voicePrompt: next.voicePrompt,
                      sampleAnswerVoicePrompt: next.sampleAnswerVoicePrompt,
                      audioCorrectAnswerText: next.audioCorrectAnswerText,
                      shortAnswers: next.shortAnswer.trim() ? [next.shortAnswer.trim()] : [],
                      imageUrl: next.imageUrl,
                    })
                  }}
                  mediaBusy={saving}
                />
              </Card>
            ))}
          </div>

          <div>
            <button
              type="button"
              onClick={addQuestion}
              className="inline-flex w-full items-center justify-center gap-2 rounded-xl border-2 border-dashed border-brand-200/90 bg-brand-50/20 px-4 py-3.5 text-sm font-semibold text-brand-600 transition-all hover:border-brand-300 hover:bg-brand-50/60 hover:text-brand-700 sm:py-3"
            >
              <Plus className="h-4 w-4" />
              Add another question
            </button>
          </div>

          <div className="flex flex-col-reverse items-stretch justify-between gap-3 rounded-2xl border border-grayScale-200/80 bg-grayScale-50/30 px-4 py-4 sm:flex-row sm:items-center sm:px-6 sm:py-5">
            <Button variant="outline" onClick={handleBack} className="sm:w-auto">
              Back
            </Button>
            <Button className="w-full bg-brand-500 hover:bg-brand-600 sm:w-auto sm:min-w-[180px]" onClick={handleNext}>
              {getNextButtonLabel()}
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </div>
      )}

      {currentStep === 4 && (
        <div className="w-full space-y-6">
          <div className="rounded-2xl border border-grayScale-200/80 bg-gradient-to-r from-grayScale-50/80 to-white px-5 py-5 shadow-sm sm:px-8 sm:py-6">
            <h2 className="text-lg font-semibold tracking-tight text-grayScale-900 sm:text-xl">Step 4: Review & publish</h2>
            <p className="mt-1.5 max-w-3xl text-sm leading-relaxed text-grayScale-500">
              Confirm context, persona, and questions before saving or publishing.
            </p>
          </div>

          <div className="grid gap-6 lg:grid-cols-2 lg:items-start lg:gap-8">
          {/* Basic Information Card */}
          <Card className="overflow-hidden border-grayScale-200/80 p-0 shadow-sm">
            <div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
              <h3 className="font-semibold text-grayScale-900">Basic Information</h3>
              <button
                onClick={() => setCurrentStep(1)}
                className="flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium text-brand-500 transition-colors hover:bg-brand-50 hover:text-brand-600"
              >
                <Edit className="h-3.5 w-3.5" />
                Edit
              </button>
            </div>
            <div className="divide-y divide-grayScale-100">
              <div className="flex justify-between px-6 py-3.5 odd:bg-grayScale-50/50">
                <span className="text-sm text-grayScale-500">Title</span>
                <span className="text-sm font-medium text-grayScale-900">{practiceTitle || "Untitled Practice"}</span>
              </div>
              <div className="bg-grayScale-50/50 px-6 py-4">
                <span className="text-sm text-grayScale-500">Description</span>
                {descriptionPreviewHtml ? (
                  <div
                    className="mt-2 rounded-lg border border-grayScale-200 bg-white px-4 py-3 text-sm leading-relaxed text-grayScale-800 [&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_ol]:list-decimal [&_ol]:pl-6 [&_p]:mb-2 [&_strong]:font-semibold [&_ul]:list-disc [&_ul]:pl-6"
                    dangerouslySetInnerHTML={{ __html: descriptionPreviewHtml }}
                  />
                ) : (
                  <p className="mt-2 text-sm text-grayScale-400">—</p>
                )}
              </div>
              <div className="flex justify-between px-6 py-3.5">
                <span className="text-sm text-grayScale-500">Intro video URL</span>
                <span className="max-w-[min(28rem,55%)] break-all text-right text-sm text-grayScale-700">
                  {introVideoUrl.trim() || "—"}
                </span>
              </div>
              {introVideoPreview ? (
                <div className="bg-grayScale-50/50 px-6 py-4">
                  <span className="text-sm text-grayScale-500">Intro video preview</span>
                  <div className="mt-2 rounded-lg border border-grayScale-200 bg-white p-3">
                    {introVideoPreview.kind === "vimeo" ? (
                      <div className="overflow-hidden rounded-lg border border-grayScale-200 bg-black">
                        <iframe
                          src={introVideoPreview.url}
                          title="Intro video preview"
                          className="aspect-video w-full"
                          allow="autoplay; fullscreen; picture-in-picture"
                          allowFullScreen
                        />
                      </div>
                    ) : (
                      <video
                        controls
                        src={introVideoPreview.url}
                        className="aspect-video w-full rounded-lg border border-grayScale-200 bg-black"
                      />
                    )}
                  </div>
                </div>
              ) : null}
              <div className="flex justify-between bg-grayScale-50/50 px-6 py-3.5">
                <span className="text-sm text-grayScale-500">Passing Score</span>
                <span className="text-sm font-medium text-grayScale-900">{passingScore}%</span>
              </div>
              <div className="flex justify-between px-6 py-3.5">
                <span className="text-sm text-grayScale-500">Time Limit</span>
                <span className="text-sm font-medium text-grayScale-900">{timeLimitMinutes} minutes</span>
              </div>
              <div className="flex justify-between bg-grayScale-50/50 px-6 py-3.5">
                <span className="text-sm text-grayScale-500">Shuffle Questions</span>
                <span className="text-sm font-medium text-grayScale-900">{shuffleQuestions ? "Yes" : "No"}</span>
              </div>
              <div className="flex justify-between px-6 py-3.5">
                <span className="text-sm text-grayScale-500">Persona</span>
                <div className="flex items-center gap-2">
                  {selectedPersona && (
                    <div className="h-6 w-6 overflow-hidden rounded-full bg-grayScale-100 ring-2 ring-brand-100">
                      <img
                        src={PERSONAS.find(p => p.id === selectedPersona)?.avatar}
                        alt="Persona"
                        className="h-full w-full object-cover"
                      />
                    </div>
                  )}
                  <span className="text-sm font-medium text-brand-600">
                    {PERSONAS.find(p => p.id === selectedPersona)?.name || "None selected"}
                  </span>
                </div>
              </div>
            </div>
          </Card>

          {/* Questions Review */}
          <Card className="overflow-hidden border-grayScale-200/80 p-0 shadow-sm lg:min-h-0">
            <div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
              <div className="flex items-center gap-2.5">
                <h3 className="font-semibold text-grayScale-900">Questions</h3>
                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand-100 text-xs font-semibold text-brand-600">
                  {questions.length}
                </span>
              </div>
              <button
                onClick={() => setCurrentStep(3)}
                className="flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium text-brand-500 transition-colors hover:bg-brand-50 hover:text-brand-600"
              >
                <Edit className="h-3.5 w-3.5" />
                Edit
              </button>
            </div>
            <div className="max-h-[min(70vh,52rem)] space-y-3 overflow-y-auto px-4 py-4 sm:px-6">
              {questions.map((question, index) => (
                <div key={question.id} className="rounded-xl border border-grayScale-200 bg-grayScale-50/20 p-4 transition-colors hover:border-grayScale-300 sm:p-4">
                  <div className="flex items-start gap-3">
                    <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-brand-100 text-xs font-bold text-brand-600">
                      {index + 1}
                    </span>
                    <div className="flex-1 space-y-2.5">
                      <p className="text-sm font-medium leading-relaxed text-grayScale-900">{question.questionText}</p>
                      <div className="flex flex-wrap items-center gap-2">
                        <span className="rounded-md bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-600">
                          {question.questionType === "MCQ"
                            ? "Multiple Choice"
                            : question.questionType === "TRUE_FALSE"
                              ? "True/False"
                              : question.questionType === "AUDIO"
                                ? "Audio"
                                : "Short Answer"}
                        </span>
                        <span className="rounded-md bg-purple-50 px-2 py-0.5 text-xs font-medium text-purple-600">
                          {question.difficultyLevel}
                        </span>
                        <span className="rounded-md bg-grayScale-100 px-2 py-0.5 text-xs font-medium text-grayScale-600">{question.points} pt{question.points !== 1 ? "s" : ""}</span>
                      </div>
                      {question.questionType === "MCQ" && question.options.length > 0 && (
                        <div className="mt-2 space-y-1">
                          {question.options.map((opt, i) => (
                            <div
                              key={i}
                              className={`flex items-center gap-2 rounded-md px-2.5 py-1.5 text-sm ${
                                opt.isCorrect ? "bg-green-50 font-medium text-green-700" : "text-grayScale-600"
                              }`}
                            >
                              {opt.isCorrect && <Check className="h-3.5 w-3.5" />}
                              {opt.text || `Option ${i + 1}`}
                            </div>
                          ))}
                        </div>
                      )}
                      {question.tips && (
                        <p className="rounded-md bg-amber-50 px-2.5 py-1.5 text-xs text-amber-600">💡 Tip: {question.tips}</p>
                      )}
                      {question.explanation && (
                        <p className="rounded-md bg-grayScale-50 px-2.5 py-1.5 text-xs text-grayScale-500">Explanation: {question.explanation}</p>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
          </div>

          {saveError && (
            <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3">
              <p className="text-sm font-medium text-red-600">{saveError}</p>
            </div>
          )}

          <div className="flex flex-col-reverse items-stretch justify-between gap-3 rounded-2xl border border-grayScale-200/80 bg-grayScale-50/30 px-4 py-4 sm:flex-row sm:items-center sm:px-6 sm:py-5">
            <Button variant="outline" onClick={handleBack} className="sm:w-auto">
              Back
            </Button>
            <div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:justify-end">
              <Button variant="outline" onClick={handleSaveAsDraft} disabled={saving} className="sm:min-w-[140px]">
                {saving ? "Saving..." : "Save as Draft"}
              </Button>
              <Button className="bg-brand-500 hover:bg-brand-600 sm:min-w-[160px]" onClick={handlePublish} disabled={saving}>
                <Rocket className="mr-2 h-4 w-4" />
                {saving ? "Publishing..." : "Publish Now"}
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* Step 5: Result */}
      {currentStep === 5 && resultStatus && (
        <div className="flex flex-col items-center justify-center px-4 py-20">
          {resultStatus === "success" ? (
            <>
              <div className="flex h-32 w-32 items-center justify-center rounded-full bg-gradient-to-br from-brand-100 to-brand-200 shadow-lg shadow-brand-100/50">
                <svg viewBox="0 0 24 24" className="h-16 w-16 text-brand-500" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round">
                  <path d="M20 6 9 17l-5-5" />
                </svg>
              </div>
              <h2 className="mt-8 text-center text-2xl font-bold tracking-tight text-grayScale-900">
                Practice Published Successfully!
              </h2>
              <p className="mt-3 text-center text-sm text-grayScale-500">{resultMessage}</p>
              <div className="mt-10 flex w-full max-w-sm flex-col gap-3">
                <Button
                  className="w-full bg-brand-500 hover:bg-brand-600"
                  onClick={() => navigate(backTo)}
                >
                  Go back to Course
                </Button>
                <Button
                  variant="outline"
                  className="w-full border-brand-500 text-brand-500 hover:bg-brand-50"
                  onClick={() => {
                    setCurrentStep(1)
                    setPracticeTitle("")
                    setPracticeDescription("")
                    setIntroVideoUrl("")
                    setShuffleQuestions(false)
                    setPassingScore(50)
                    setTimeLimitMinutes(60)
                    setSelectedPersona(null)
                    setQuestions([createEmptyQuestion("1")])
                    setSaveError(null)
                    setResultStatus(null)
                    setResultMessage("")
                  }}
                >
                  Add Another Practice
                </Button>
              </div>
            </>
          ) : (
            <>
              <div className="flex h-32 w-32 items-center justify-center rounded-full bg-gradient-to-br from-amber-100 to-amber-200 shadow-lg shadow-amber-100/50">
                <svg viewBox="0 0 24 24" className="h-16 w-16 text-amber-500" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round">
                  <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
                  <line x1="12" y1="9" x2="12" y2="13" />
                  <line x1="12" y1="17" x2="12.01" y2="17" />
                </svg>
              </div>
              <h2 className="mt-8 text-center text-2xl font-bold tracking-tight text-grayScale-900">
                Publish Error!
              </h2>
              <p className="mt-3 max-w-md text-center text-sm text-grayScale-500">{resultMessage}</p>
              <div className="mt-10 flex w-full max-w-sm flex-col gap-3">
                <Button
                  className="w-full bg-brand-500 hover:bg-brand-600"
                  onClick={() => {
                    setCurrentStep(4)
                    setResultStatus(null)
                  }}
                >
                  Try Again
                </Button>
              </div>
            </>
          )}
        </div>
      )}
      </div>
    </div>
  )
}