"use client";

import { useEffect, useState } from "react";
import { api } from "@/lib/api";

interface NewsItem {
  id: string;
  title: string;
  slug: string;
  excerpt: string | null;
  isPublished: boolean;
}

const empty = { title: "", slug: "", excerpt: "", content: "", isPublished: true };

export default function AdminNewsPage() {
  const [items, setItems] = useState<NewsItem[]>([]);
  const [form, setForm] = useState(empty);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState("");

  async function load() {
    setLoading(true);
    try {
      const res = await api.get<NewsItem[]>("/news");
      setItems(res.data || []);
    } catch {
      // not authenticated
    } finally {
      setLoading(false);
    }
  }

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

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    setError("");
    try {
      await api.post("/news", form);
      setForm(empty);
      load();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to save article");
    } finally {
      setSaving(false);
    }
  }

  async function handleDelete(id: string) {
    if (!confirm("Delete this article?")) return;
    await api.del(`/news/${id}`);
    load();
  }

  return (
    <div className="space-y-10">
      <div>
        <h1 className="text-2xl font-bold text-[var(--brand-blue)] mb-4">Add News Article</h1>
        <form onSubmit={handleSubmit} className="grid sm:grid-cols-2 gap-4 bg-white border border-[var(--brand-border)] rounded-2xl p-6 shadow-sm">
          <div>
            <label className="text-sm font-medium">Title</label>
            <input required value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })}
              className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
          </div>
          <div>
            <label className="text-sm font-medium">Slug</label>
            <input required value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })}
              placeholder="e.g. inter-house-sports-2026"
              className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
          </div>
          <div className="sm:col-span-2">
            <label className="text-sm font-medium">Excerpt</label>
            <input value={form.excerpt} onChange={(e) => setForm({ ...form, excerpt: e.target.value })}
              className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
          </div>
          <div className="sm:col-span-2">
            <label className="text-sm font-medium">Content</label>
            <textarea required rows={5} value={form.content} onChange={(e) => setForm({ ...form, content: e.target.value })}
              className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
          </div>
          {error && <p className="sm:col-span-2 text-sm text-red-600">{error}</p>}
          <div className="sm:col-span-2">
            <button type="submit" disabled={saving}
              className="rounded-full bg-[var(--brand-magenta)] text-white px-6 py-2.5 font-semibold hover:bg-[var(--brand-blue)] transition-colors disabled:opacity-60">
              {saving ? "Saving..." : "Publish Article"}
            </button>
          </div>
        </form>
      </div>

      <div>
        <h2 className="text-xl font-bold text-[var(--brand-blue)] mb-4">All Articles</h2>
        {loading ? <p className="text-sm text-gray-500">Loading...</p> : (
          <div className="space-y-3">
            {items.map((n) => (
              <div key={n.id} className="flex items-center justify-between rounded-xl border border-[var(--brand-border)] p-4">
                <div>
                  <p className="font-medium">{n.title}</p>
                  <p className="text-xs text-gray-500">{n.isPublished ? "Published" : "Draft"}</p>
                </div>
                <button onClick={() => handleDelete(n.id)} className="text-red-600 text-xs font-semibold">Delete</button>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}