"use client";

import { createContext, useContext, ReactNode } from "react";
import type { ExternalEmbed } from "@/data/queries";

type TrailStop = {
  tid: string;
  title: string;
  content: string;
  buttonText?: string;
  external?: ExternalEmbed;
};

type EditableDraft = {
  title: string;
  description: string;
  stops: TrailStop[];
  accentColor: string;
  backgroundColor: string;
  createdAt: string;
  updatedAt: string;
};

type EditModeContextType = {
  trail: EditableDraft;
  updateTrail: (updates: Partial<EditableDraft>) => void;
  updateStop: (stopId: string, updates: Partial<TrailStop>) => void;
  addStop: (afterIndex?: number) => void;
  deleteStop: (stopId: string) => void;
  moveStop: (stopId: string, direction: "up" | "down") => void;
  inlineErrors: Record<string, string>;
};

const EditModeContext = createContext<EditModeContextType | null>(null);

export function useEditMode() {
  return useContext(EditModeContext);
}

type EditModeProviderProps = {
  children: ReactNode;
  value: EditModeContextType;
};

export function EditModeProvider({ children, value }: EditModeProviderProps) {
  return <EditModeContext.Provider value={value}>{children}</EditModeContext.Provider>;
}
