import { A, useNavigate, useParams } from "@solidjs/router";
import { createEffect, createResource, createSignal, Show } from "solid-js";

const API = "";

function getToken(): string {
  return typeof sessionStorage !== "undefined"
    ? sessionStorage.getItem("nxtgauge_admin_access_token") || ""
    : "";
}

type KbArticle = {
  id: string;
  title: string;
  slug?: string;
  content?: string;
  body?: string;
  status?: string;
  category_id?: string;
};

async function loadArticle(id: string): Promise<KbArticle | null> {
  try {
    const token = getToken();
    const res = await fetch(`${API}/api/admin/kb/articles/${id}`, {
      headers: {
        Accept: "application/json",
        ...(token ? { Authorization: `Bearer ${token}` } : {}),
      },
      credentials: "include",
    });
    if (!res.ok) return null;
    const data = await res.json();
    return {
      ...data,
      content: data?.content ?? data?.body ?? "",
      body: data?.body ?? data?.content ?? "",
    };
  } catch {
    return null;
  }
}

export default function KbArticleEditPage() {
  const navigate = useNavigate();
  const params = useParams();
  const [article] = createResource(() => params.id, loadArticle);
  const [title, setTitle] = createSignal("");
  const [slug, setSlug] = createSignal("");
  const [categoryId, setCategoryId] = createSignal("");
  const [status, setStatus] = createSignal("DRAFT");
  const [content, setContent] = createSignal("");
  const [saving, setSaving] = createSignal(false);
  const [error, setError] = createSignal("");
  const [loaded, setLoaded] = createSignal(false);

  createEffect(() => {
    const value = article();
    if (!value || loaded()) return;
    setTitle(value.title || "");
    setSlug(value.slug || "");
    setCategoryId(value.category_id || "");
    setStatus(value.status || "DRAFT");
    setContent(value.content || value.body || "");
    setLoaded(true);
  });

  const save = async (e: Event) => {
    e.preventDefault();
    try {
      setSaving(true);
      setError("");
      const res = await fetch(`${API}/api/admin/kb/articles/${params.id}`, {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
          ...(getToken() ? { Authorization: `Bearer ${getToken()}` } : {}),
        },
        credentials: "include",
        body: JSON.stringify({
          title: title(),
          slug: slug(),
          category_id: categoryId() || null,
          status: status(),
          body: content(),
        }),
      });
      if (!res.ok) throw new Error("Failed to save article");
      navigate(`/admin/kb/articles/${params.id}`);
    } catch (err: any) {
      setError(err.message || "Failed to save article");
    } finally {
      setSaving(false);
    }
  };

  const inputCls =
    "w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] focus:ring-1 focus:ring-[#0a1d37]";
  const labelCls = "mb-1.5 block text-sm font-medium text-gray-700";

  return (
    <div class="flex flex-col -mx-6 -mt-6 min-h-full">
      <div class="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
        <div>
          <h1 class="text-xl font-semibold text-gray-900">Edit KB Article</h1>
          <p class="text-sm text-gray-500 mt-0.5">Update article metadata, status, and content.</p>
        </div>
        <div class="flex items-center gap-2">
          <A
            class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
            href={`/admin/kb/articles/${params.id}`}
          >
            Back to Detail
          </A>
          <A
            class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
            href="/admin/kb/articles"
          >
            Back to Articles
          </A>
        </div>
      </div>
      <div class="p-6 flex-1">
        <Show when={article.loading}>
          <div class="table-card">
            <p class="py-10 text-center text-sm text-slate-400">Loading article…</p>
          </div>
        </Show>

        <Show when={!article.loading && !article()}>
          <div class="table-card">
            <p class="py-10 text-center text-sm text-slate-400">Article not found.</p>
          </div>
        </Show>

        <Show when={article() && loaded()}>
          <form class="rounded-xl border border-gray-200 bg-white shadow-sm p-6" onSubmit={save}>
            <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
              <div>
                <label class={labelCls}>Title</label>
                <input
                  class={inputCls}
                  value={title()}
                  onInput={(e) => setTitle(e.currentTarget.value)}
                  required
                />
              </div>
              <div>
                <label class={labelCls}>Slug</label>
                <input
                  class={inputCls}
                  value={slug()}
                  onInput={(e) => setSlug(e.currentTarget.value)}
                />
              </div>
              <div>
                <label class={labelCls}>Category ID</label>
                <input
                  class={inputCls}
                  value={categoryId()}
                  onInput={(e) => setCategoryId(e.currentTarget.value)}
                />
              </div>
              <div>
                <label class={labelCls}>Status</label>
                <select
                  class={inputCls}
                  value={status()}
                  onChange={(e) => setStatus(e.currentTarget.value)}
                >
                  <option value="DRAFT">DRAFT</option>
                  <option value="PUBLISHED">PUBLISHED</option>
                </select>
              </div>
              <div class="sm:col-span-2">
                <label class={labelCls}>Content</label>
                <textarea
                  rows="16"
                  class={inputCls}
                  value={content()}
                  onInput={(e) => setContent(e.currentTarget.value)}
                />
              </div>
            </div>

            <Show when={error()}>
              <p class="mt-3 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                {error()}
              </p>
            </Show>

            <div class="mt-6 flex justify-end border-t border-gray-100 pt-5">
              <button class="btn-primary" type="submit" disabled={saving()}>
                {saving() ? "Saving…" : "Save Article"}
              </button>
            </div>
          </form>
        </Show>
      </div>
    </div>
  );
}
