"use client";
import Image from "next/image";
import { motion } from "motion/react";
import { Markup } from "@/lib/format";
import { asset } from "@/lib/base";

export function QuiraAvatar({ size = 34 }: { size?: number }) {
  return (
    <div
      className="relative shrink-0 overflow-hidden rounded-full ring-2 ring-teal/30"
      style={{ width: size, height: size }}
    >
      <Image src={asset("/assets/quira-avatar.png")} alt="QuitSure Quit Coach" fill className="object-cover" />
    </div>
  );
}

/** A stack of bot message bubbles that reveal one-by-one (auto), then the
 *  screen's button/choices (children) below them. */
export function BotMessages({ messages, children }: { messages: string[]; children?: React.ReactNode }) {
  return (
    <div className="space-y-2.5">
      {messages.map((html, i) => (
        <motion.div
          key={i}
          initial={{ opacity: 0, y: 12, scale: 0.97 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          transition={{ delay: i * 0.4 + 0.1, type: "spring", stiffness: 240, damping: 22 }}
          className="flex items-end gap-2"
        >
          {i === messages.length - 1 ? <QuiraAvatar /> : <div className="w-[34px] shrink-0" />}
          <div className="glass max-w-[85%] rounded-2xl rounded-bl-md border border-border/50 px-4 py-3 text-[15px] leading-relaxed shadow-sm">
            <Markup html={html} />
          </div>
        </motion.div>
      ))}
      {children ? <div className="pt-1">{children}</div> : null}
    </div>
  );
}

export function TypingDots() {
  return (
    <div className="flex items-center gap-1.5 px-2">
      {[0, 1, 2].map((i) => (
        <span
          key={i}
          className="typing-dot h-2 w-2 rounded-full bg-teal"
          style={{ animationDelay: `${i * 0.15}s` }}
        />
      ))}
    </div>
  );
}

export function PrimaryButton({
  children,
  onClick,
  className = "",
  disabled = false,
}: {
  children: React.ReactNode;
  onClick: () => void;
  className?: string;
  disabled?: boolean;
}) {
  return (
    <motion.button
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      whileTap={disabled ? undefined : { scale: 0.97 }}
      onClick={() => !disabled && onClick()}
      disabled={disabled}
      aria-disabled={disabled}
      className={`relative w-full overflow-hidden rounded-2xl px-5 py-4 text-base font-bold text-white shadow-lg shadow-teal/25 ${
        disabled ? "cursor-not-allowed bg-teal/40" : "shimmer bg-teal"
      } ${className}`}
    >
      {children}
    </motion.button>
  );
}

export function ChoiceChip({
  label,
  onClick,
  selected,
  index = 0,
}: {
  label: string;
  onClick: () => void;
  selected?: boolean;
  index?: number;
}) {
  return (
    <motion.button
      initial={{ opacity: 0, x: 14 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ delay: 0.1 + index * 0.06 }}
      whileTap={{ scale: 0.97 }}
      onClick={onClick}
      className={`w-full rounded-xl border px-4 py-3.5 text-left text-[15px] font-medium transition ${
        selected
          ? "border-teal bg-teal text-white"
          : "border-border bg-card hover:border-teal/60 hover:bg-accent/40"
      }`}
    >
      {label}
    </motion.button>
  );
}