import { useEffect, useState, useSyncExternalStore } from "react";
import { CheckCircle2, CircleX, Info, X } from "lucide-react";

import { dismissToast, snapshot, subscribe, type ToastItem, type ToastVariant } from "@/client/lib/toast";

function ToastCard({ item }: { item: ToastItem }) {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    if (item.variant === "error") return;
    const timeout = window.setTimeout(() => {
      setVisible(false);
      window.setTimeout(() => dismissToast(item.id), 200);
    }, 4000);
    return () => window.clearTimeout(timeout);
  }, [item.id, item.variant]);

  const styles: Record<ToastVariant, { ring: string; iconClass: string; Icon: typeof CheckCircle2 }> = {
    success: {
      ring: "border-emerald-500/20 bg-emerald-500/10 text-emerald-100",
      iconClass: "text-emerald-400",
      Icon: CheckCircle2,
    },
    error: { ring: "border-red-500/20 bg-red-500/10 text-red-100", iconClass: "text-red-400", Icon: CircleX },
    info: {
      ring: "border-accent-500/20 bg-accent-500/10 text-accent-50",
      iconClass: "text-accent-400",
      Icon: Info,
    },
  };
  const { ring, iconClass, Icon } = styles[item.variant];

  return (
    <div
      role={item.variant === "error" ? "alert" : "status"}
      aria-live={item.variant === "error" ? "assertive" : "polite"}
      className={`pointer-events-auto flex items-start gap-3 rounded-xl border ${ring} px-4 py-3 shadow-sm transition-opacity ${visible ? "opacity-100" : "opacity-0"}`}
    >
      <Icon className={`mt-0.5 h-4 w-4 shrink-0 ${iconClass}`} strokeWidth={2} aria-hidden="true" />
      <p className="flex-1 text-sm leading-snug">{item.message}</p>
      <button
        type="button"
        aria-label="Dismiss notification"
        onClick={() => dismissToast(item.id)}
        className="-mr-1 -mt-1 rounded-md p-1 text-current/60 transition-colors hover:bg-zinc-800/40 hover:text-current"
      >
        <X className="h-3.5 w-3.5" strokeWidth={2.25} aria-hidden="true" />
      </button>
    </div>
  );
}

export function ToastContainer() {
  const current = useSyncExternalStore(subscribe, snapshot, snapshot);
  if (current.length === 0) return null;
  return (
    <div className="pointer-events-none fixed inset-x-0 bottom-4 z-[100] flex flex-col items-end gap-2 px-4 sm:right-4 sm:left-auto sm:max-w-sm">
      {current.map((item) => (
        <div key={item.id} className="pointer-events-auto w-full animate-slide-up">
          <ToastCard item={item} />
        </div>
      ))}
    </div>
  );
}