"use client";

import { useCallback, useEffect, useState } from "react";

type Entry = {
  id: number;
  title: string;
  content: string;
  scope: "global" | "client";
};

/**
 * Role knowledge bank editor. Clients see the admin's global policies
 * read-only and manage their own private entries; on the admin roles page
 * (isAdmin) the same component manages the global entries instead.
 */
export function KnowledgeBank({ roleId, isAdmin = false }: { roleId: number; isAdmin?: boolean }) {
  const [entries, setEntries] = useState<Entry[]>([]);
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState("");

  const load = useCallback(async () => {
    try {
      const res = await fetch(`/api/knowledge?role_id=${roleId}`);
      const data = await res.json();
      if (res.ok) setEntries(data.entries || []);
    } catch {}
  }, [roleId]);

  useEffect(() => {
    load();
  }, [load]);

  const add = async () => {
    if (!title.trim() || !content.trim()) return;
    setBusy(true);
    setMsg("");
    try {
      const res = await fetch("/api/knowledge", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ role_id: roleId, title, content, global: isAdmin }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "فشل الحفظ");
      setTitle("");
      setContent("");
      setMsg("تم الحفظ وتحديث الوكلاء ✓");
      await load();
    } catch (e) {
      setMsg((e as Error).message);
    } finally {
      setBusy(false);
    }
  };

  const remove = async (id: number) => {
    setBusy(true);
    try {
      await fetch(`/api/knowledge/${id}`, { method: "DELETE" });
      await load();
    } finally {
      setBusy(false);
    }
  };

  const editable = (e: Entry) => (isAdmin ? e.scope === "global" : e.scope === "client");
  const globals = entries.filter((e) => e.scope === "global");
  const owns = entries.filter((e) => e.scope === "client");

  return (
    <div className="space-y-4" dir="rtl">
      {!isAdmin && globals.length > 0 && (
        <div>
          <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">سياسات الوظيفة (من إدارة المنصة)</p>
          <div className="space-y-2">
            {globals.map((e) => (
              <div key={e.id} className="rounded-lg border border-slate-200 bg-slate-50 p-3 dark:border-slate-700 dark:bg-slate-800/50">
                <p className="text-sm font-semibold">{e.title}</p>
                <p className="mt-1 whitespace-pre-wrap text-xs text-slate-600 dark:text-slate-400">{e.content}</p>
              </div>
            ))}
          </div>
        </div>
      )}

      <div>
        <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
          {isAdmin ? "السياسات العامة للوظيفة (تصل لكل العملاء)" : "بياناتك وسياساتك الخاصة (لا يراها أحد غير موظفيك)"}
        </p>
        <div className="space-y-2">
          {(isAdmin ? globals : owns).map((e) => (
            <div key={e.id} className="flex items-start justify-between gap-3 rounded-lg border border-slate-200 p-3 dark:border-slate-700">
              <div className="min-w-0">
                <p className="text-sm font-semibold">{e.title}</p>
                <p className="mt-1 whitespace-pre-wrap text-xs text-slate-600 dark:text-slate-400">{e.content}</p>
              </div>
              {editable(e) && (
                <button
                  onClick={() => remove(e.id)}
                  disabled={busy}
                  className="shrink-0 rounded-md border border-red-200 px-2 py-1 text-xs text-red-600 hover:bg-red-50 disabled:opacity-50 dark:border-red-900 dark:hover:bg-red-950"
                >
                  حذف
                </button>
              )}
            </div>
          ))}
          {(isAdmin ? globals : owns).length === 0 && <p className="text-xs text-slate-500">لا توجد إدخالات بعد.</p>}
        </div>
      </div>

      <div className="space-y-2 rounded-lg border border-dashed border-slate-300 p-3 dark:border-slate-600">
        <input
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="العنوان — مثال: سياسة الإجازات"
          className="w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-600"
        />
        <textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="المحتوى — السياسة أو البيانات التي يجب أن يعرفها الموظف ويلتزم بها"
          rows={3}
          className="w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-600"
        />
        <div className="flex items-center gap-3">
          <button
            onClick={add}
            disabled={busy || !title.trim() || !content.trim()}
            className="rounded-md bg-cyan-600 px-4 py-2 text-sm font-semibold text-white hover:bg-cyan-700 disabled:opacity-50"
          >
            {busy ? "جارٍ الحفظ..." : "إضافة للمعرفة"}
          </button>
          {msg && <span className="text-xs text-slate-500">{msg}</span>}
        </div>
      </div>
    </div>
  );
}