"use client";
import { FormEvent, useEffect, useState } from "react";
type Article = {
  id: number;
  title: string;
  slug: string;
  excerpt: string;
  content: string;
  metaDescription: string;
  image: string;
  imageAlt: string;
  author: string;
  status: "draft" | "published";
  publishedAt: string | null;
  updatedAt: string;
};
const empty = {
  id: 0,
  title: "",
  slug: "",
  excerpt: "",
  content: "",
  metaDescription: "",
  image: "",
  imageAlt: "",
  author: "Skip the Germs Editorial Team",
  status: "draft",
  publishedAt: "",
  updatedAt: "",
};
export default function AdminDashboard({ userName }: { userName: string }) {
  const [items, setItems] = useState<Article[]>([]),
    [draft, setDraft] = useState<any>(empty),
    [loading, setLoading] = useState(true),
    [saving, setSaving] = useState(false),
    [message, setMessage] = useState("");
  async function load() {
    setLoading(true);
    const r = await fetch("/api/articles?admin=1"),
      d = await r.json();
    setItems(d.articles || []);
    setLoading(false);
  }
  useEffect(() => {
    load();
  }, []);
  function edit(a: Article) {
    setDraft({ ...a, publishedAt: a.publishedAt || "" });
    window.scrollTo({ top: 0, behavior: "smooth" });
  }
  function reset() {
    setDraft({ ...empty });
    setMessage("");
  }
  async function save(e: FormEvent) {
    e.preventDefault();
    setSaving(true);
    setMessage("");
    const r = await fetch("/api/articles", {
        method: draft.id ? "PUT" : "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(draft),
      }),
      d = await r.json();
    setSaving(false);
    if (!r.ok) {
      setMessage(d.error || "Unable to save.");
      return;
    }
    reset();
    await load();
  }
  async function remove(id: number) {
    if (!confirm("Delete this article permanently?")) return;
    await fetch("/api/articles?id=" + id, { method: "DELETE" });
    await load();
  }
  async function logout() {
    await fetch("/api/admin/logout", { method: "POST" });
    window.location.href = "/admin/login";
  }
  return (
    <main className="admin-shell">
      <header className="admin-top">
        <a href="/" className="brand">
          <span className="brand-mark">✚</span>
          <span>Skip the Germs</span>
        </a>
        <div>
          <span>Signed in as {userName}</span>
            <button className="logout-button" onClick={logout}>Sign out</button>
        </div>
      </header>
      <div className="admin-title">
        <div>
          <span>CONTENT MANAGEMENT</span>
          <h1>Article Publisher</h1>
          <p>Create, optimize, save and publish healthcare hygiene articles.</p>
        </div>
        <a className="button secondary" href="/blog" target="_blank">
          View public blog ↗
        </a>
      </div>
      <div className="admin-layout">
        <form className="editor-panel" onSubmit={save}>
          <div className="editor-head">
            <h2>{draft.id ? "Edit article" : "New article"}</h2>
            {draft.id > 0 && (
              <button type="button" onClick={reset}>
                Cancel edit
              </button>
            )}
          </div>
          <label>
            Article title
            <input
              required
              value={draft.title}
              onChange={(e) =>
                setDraft({
                  ...draft,
                  title: e.target.value,
                  slug: draft.id
                    ? draft.slug
                    : e.target.value
                        .toLowerCase()
                        .replace(/[^a-z0-9]+/g, "-")
                        .replace(/^-|-$/g, ""),
                })
              }
            />
          </label>
          <label>
            URL slug
            <div className="slug-input">
              <span>/blog/</span>
              <input
                required
                value={draft.slug}
                onChange={(e) => setDraft({ ...draft, slug: e.target.value })}
              />
            </div>
          </label>
          <div className="editor-row">
            <label>
              Author
              <input
                value={draft.author}
                onChange={(e) => setDraft({ ...draft, author: e.target.value })}
              />
            </label>
            <label>
              Status
              <select
                value={draft.status}
                onChange={(e) => setDraft({ ...draft, status: e.target.value })}
              >
                <option value="draft">Draft</option>
                <option value="published">Published</option>
              </select>
            </label>
          </div>
          <label>
            Featured image URL
            <input
              value={draft.image}
              placeholder="https://..."
              onChange={(e) => setDraft({ ...draft, image: e.target.value })}
            />
          </label>
          <label>
            Image alt text
            <input
              value={draft.imageAlt}
              onChange={(e) => setDraft({ ...draft, imageAlt: e.target.value })}
            />
          </label>
          <label>
            Short excerpt
            <textarea
              rows={3}
              value={draft.excerpt}
              onChange={(e) => setDraft({ ...draft, excerpt: e.target.value })}
            />
          </label>
          <label>
            Article content <small>HTML is supported.</small>
            <textarea
              className="content-editor"
              required
              rows={16}
              value={draft.content}
              placeholder="<h2>Your heading</h2>&#10;<p>Your article content...</p>"
              onChange={(e) => setDraft({ ...draft, content: e.target.value })}
            />
          </label>
          <div className="seo-box">
            <strong>SEO settings</strong>
            <label>
              Meta description <small>{draft.metaDescription.length}/160</small>
              <textarea
                maxLength={160}
                rows={3}
                value={draft.metaDescription}
                onChange={(e) =>
                  setDraft({ ...draft, metaDescription: e.target.value })
                }
              />
            </label>
          </div>
          {message && <p className="admin-message">{message}</p>}
          <button className="button admin-save" disabled={saving}>
            {saving
              ? "Saving..."
              : draft.status === "published"
                ? "Publish Article"
                : "Save Draft"}
          </button>
        </form>
        <aside className="article-manager">
          <div className="manager-head">
            <h2>All articles</h2>
            <span>{items.length} total</span>
          </div>
          {loading ? (
            <p>Loading articles…</p>
          ) : items.length === 0 ? (
            <div className="empty-state">
              <b>▤</b>
              <h3>No articles yet</h3>
              <p>Your drafts and published articles will appear here.</p>
            </div>
          ) : (
            items.map((a) => (
              <article className="admin-article" key={a.id}>
                {a.image ? (
                  <img src={a.image} alt="" />
                ) : (
                  <span className="admin-thumb">✚</span>
                )}
                <div>
                  <span className={"status " + a.status}>{a.status}</span>
                  <h3>{a.title}</h3>
                  <small>/blog/{a.slug}</small>
                  <div>
                    <button onClick={() => edit(a)}>Edit</button>
                    <a href={"/blog/" + a.slug} target="_blank">
                      View
                    </a>
                    <button className="delete" onClick={() => remove(a.id)}>
                      Delete
                    </button>
                  </div>
                </div>
              </article>
            ))
          )}
        </aside>
      </div>
    </main>
  );
}