"use client";
import { useState, useEffect, useCallback } from "react";
import { getVerbetervoorstellenDb } from "@/lib/db/verbetervoorstellen-db";
import type { Verbetervoorstel } from "@/data/verbetervoorstellen";

export function useVerbetervoorstellenStorage() {
  const [voorstellen, setVoorstellen] = useState<Verbetervoorstel[]>([]);
  const [geladen, setGeladen] = useState(false);

  useEffect(() => {
    async function laad() {
      const db = await getVerbetervoorstellenDb();

      // Toon lokale data onmiddellijk (snelle eerste render).
      const lokaal = await db.getAll("voorstellen");
      if (lokaal.length > 0) setVoorstellen(lokaal);

      // Synchroniseer vanuit Supabase als dat geconfigureerd is.
      try {
        const res = await fetch("/api/verbetervoorstellen", {
          headers: { Accept: "application/json" },
          cache: "no-store",
        });
        if (res.ok) {
          const json = (await res.json()) as {
            voorstellen?: Verbetervoorstel[];
            persistent?: boolean;
          };
          if (json.persistent && Array.isArray(json.voorstellen)) {
            // Server is source of truth: schrijf alle serveritems naar IDB.
            for (const v of json.voorstellen) {
              await db.put("voorstellen", v);
            }
            // Push ook lokale items die nog niet op de server staan (offline-sync).
            const serverIds = new Set(json.voorstellen.map((v) => v.id));
            for (const v of lokaal) {
              if (!serverIds.has(v.id)) {
                fetch("/api/verbetervoorstellen", {
                  method: "POST",
                  headers: { "Content-Type": "application/json" },
                  body: JSON.stringify(v),
                }).catch(() => {});
              }
            }
            setVoorstellen(await db.getAll("voorstellen"));
          }
        }
      } catch {
        // Geen netwerk of Supabase niet geconfigureerd: gebruik lokale data.
      }

      setGeladen(true);
    }
    laad();
  }, []);

  const slaOp = useCallback(async (voorstel: Verbetervoorstel) => {
    const db = await getVerbetervoorstellenDb();
    await db.put("voorstellen", voorstel);
    setVoorstellen((prev) => {
      const bestaat = prev.some((v) => v.id === voorstel.id);
      return bestaat
        ? prev.map((v) => (v.id === voorstel.id ? voorstel : v))
        : [...prev, voorstel];
    });
    // Best-effort sync naar Supabase (voor toegang op andere apparaten).
    fetch("/api/verbetervoorstellen", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(voorstel),
    }).catch(() => {});
  }, []);

  const verwijder = useCallback(async (id: string) => {
    const db = await getVerbetervoorstellenDb();
    await db.delete("voorstellen", id);
    setVoorstellen((prev) => prev.filter((v) => v.id !== id));
    // Best-effort verwijderen uit Supabase.
    fetch(`/api/verbetervoorstellen?id=${encodeURIComponent(id)}`, {
      method: "DELETE",
    }).catch(() => {});
  }, []);

  return { voorstellen, geladen, slaOp, verwijder };
}