"use client";

import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { Post } from "@/lib/types";

const emptyForm = {
  id: "",
  title: "",
  excerpt: "",
  body: "",
  category: "pais",
  tags: "",
  image: "",
  imageAlt: "",
  status: "draft",
  featured: false,
  sponsored: false
};

export default function AdminPage() {
  const router = useRouter();
  const [posts, setPosts] = useState<Post[]>([]);
  const [form, setForm] = useState(emptyForm);
  const [message, setMessage] = useState("");

  const selected = useMemo(() => posts.find((post) => post.id === form.id), [posts, form.id]);

  async function loadPosts() {
    const response = await fetch("/api/admin/posts");
    if (response.status === 401) {
      router.push("/admin/login");
      return;
    }
    setPosts(await response.json());
  }

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

  function editPost(post: Post) {
    setForm({
      id: post.id,
      title: post.title,
      excerpt: post.excerpt,
      body: post.body,
      category: post.category,
      tags: post.tags.join(", "),
      image: post.image,
      imageAlt: post.imageAlt,
      status: post.status,
      featured: post.featured,
      sponsored: post.sponsored
    });
  }

  async function submit(event: React.FormEvent) {
    event.preventDefault();
    setMessage("");
    const payload = {
      ...form,
      tags: form.tags,
      authorId: "redaccion"
    };
    const url = selected ? `/api/admin/posts/${selected.id}` : "/api/admin/posts";
    const method = selected ? "PUT" : "POST";
    const response = await fetch(url, {
      method,
      headers: { "content-type": "application/json" },
      body: JSON.stringify(payload)
    });
    if (!response.ok) {
      setMessage("No se pudo guardar la nota.");
      return;
    }
    setMessage("Nota guardada.");
    setForm(emptyForm);
    await loadPosts();
  }

  return (
    <main className="admin-shell">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker">CMS</span>
            <h1>Panel editorial</h1>
          </div>
          <a className="button" href="/">
            Ver sitio
          </a>
        </div>
        <section className="admin-grid">
          <form className="panel form-grid" onSubmit={submit}>
            <h2>{selected ? "Editar noticia" : "Nueva noticia"}</h2>
            <label>
              Titulo
              <input value={form.title} onChange={(event) => setForm({ ...form, title: event.target.value })} required />
            </label>
            <label>
              Bajada
              <textarea value={form.excerpt} onChange={(event) => setForm({ ...form, excerpt: event.target.value })} required />
            </label>
            <label>
              Cuerpo
              <textarea value={form.body} onChange={(event) => setForm({ ...form, body: event.target.value })} required />
            </label>
            <label>
              Seccion
              <select value={form.category} onChange={(event) => setForm({ ...form, category: event.target.value })}>
                <option value="politica">Politica</option>
                <option value="pais">Pais</option>
                <option value="economia">Economia</option>
                <option value="mundo">Mundo</option>
                <option value="deportes">Deportes</option>
                <option value="cultura">Cultura</option>
              </select>
            </label>
            <label>
              Etiquetas separadas por coma
              <input value={form.tags} onChange={(event) => setForm({ ...form, tags: event.target.value })} />
            </label>
            <label>
              URL de imagen
              <input value={form.image} onChange={(event) => setForm({ ...form, image: event.target.value })} />
            </label>
            <label>
              Texto alternativo
              <input value={form.imageAlt} onChange={(event) => setForm({ ...form, imageAlt: event.target.value })} />
            </label>
            <label>
              Estado
              <select value={form.status} onChange={(event) => setForm({ ...form, status: event.target.value })}>
                <option value="draft">Borrador</option>
                <option value="published">Publicado</option>
              </select>
            </label>
            <label>
              <input type="checkbox" checked={form.featured} onChange={(event) => setForm({ ...form, featured: event.target.checked })} />
              Nota principal de portada
            </label>
            <label>
              <input type="checkbox" checked={form.sponsored} onChange={(event) => setForm({ ...form, sponsored: event.target.checked })} />
              Contenido patrocinado
            </label>
            {message ? <p>{message}</p> : null}
            <button className="button primary" type="submit">
              Guardar
            </button>
            <button className="button" type="button" onClick={() => setForm(emptyForm)}>
              Limpiar
            </button>
          </form>
          <section className="panel">
            <h2>Noticias cargadas</h2>
            <table className="table">
              <thead>
                <tr>
                  <th>Titulo</th>
                  <th>Seccion</th>
                  <th>Estado</th>
                  <th>Accion</th>
                </tr>
              </thead>
              <tbody>
                {posts.map((post) => (
                  <tr key={post.id}>
                    <td>{post.title}</td>
                    <td>{post.category}</td>
                    <td>{post.status}</td>
                    <td>
                      <button className="button" type="button" onClick={() => editPost(post)}>
                        Editar
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </section>
        </section>
      </div>
    </main>
  );
}