"use client";

import { createContext, useContext, useEffect, useState } from "react";

// Separate from SideNav's own key -- the two panels collapse independently.
const STORAGE_KEY = "organize:scheduled-collapsed";

interface ScheduledPanelContextValue {
  collapsed: boolean;
  toggle: () => void;
}

const ScheduledPanelContext = createContext<ScheduledPanelContextValue | null>(null);

export function ScheduledPanelProvider({ children }: { children: React.ReactNode }) {
  // Same hydration-safe approach as SideNavProvider: default expanded on
  // both server and first client render, then apply the persisted value
  // right after mount.
  const [collapsed, setCollapsed] = useState(false);

  useEffect(() => {
    const stored = localStorage.getItem(STORAGE_KEY);
    if (stored !== null) setCollapsed(stored === "true");
  }, []);

  const toggle = () => {
    setCollapsed((prev) => {
      const next = !prev;
      localStorage.setItem(STORAGE_KEY, String(next));
      return next;
    });
  };

  return (
    <ScheduledPanelContext.Provider value={{ collapsed, toggle }}>
      {children}
    </ScheduledPanelContext.Provider>
  );
}

export function useScheduledPanel() {
  const ctx = useContext(ScheduledPanelContext);
  if (!ctx) throw new Error("useScheduledPanel must be used within a ScheduledPanelProvider");
  return ctx;
}