"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

export default function CreateBlogPostPage() {
  const router = useRouter();
  const [saving, setSaving] = useState(false);
  const [form, setForm] = useState({
    title: "",
    slug: "",
    excerpt: "",
    content: "",
    category: "Client Guides",
    tags: "",
    meta_title: "",
    meta_description: "",
    published: true,
    featured: false,
  });

  function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) {
    const { name, value, type } = e.target;
    setForm((prev) => ({
      ...prev,
      [name]: type === "checkbox" ? (e.target as HTMLInputElement).checked : value,
    }));
  }

  function autoSlug() {
    setForm((prev) => ({
      ...prev,
      slug: prev.title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, ""),
    }));
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    try {
      const res = await fetch("/api/admin/blog-posts", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, published_at: form.published ? new Date().toISOString() : null }),
      });
      if (res.ok) {
        router.push("/admin/blog-posts");
      } else {
        const data = await res.json();
        alert(data.error || "Failed to create post");
      }
    } finally {
      setSaving(false);
    }
  }

  const inputClass = "w-full bg-surface-light border border-surface-light rounded-lg px-4 py-2 text-text focus:outline-none focus:ring-1 focus:ring-primary";

  return (
    <div className="max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">Create Blog Post</h1>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-text-muted text-sm mb-1">Title</label>
          <input name="title" value={form.title} onChange={handleChange} onBlur={autoSlug} required className={inputClass} />
        </div>
        <div>
          <label className="block text-text-muted text-sm mb-1">Slug</label>
          <input name="slug" value={form.slug} onChange={handleChange} required className={inputClass} />
        </div>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-text-muted text-sm mb-1">Category</label>
            <select name="category" value={form.category} onChange={handleChange} className={inputClass}>
              <option>Client Guides</option>
              <option>Safety</option>
              <option>City Guides</option>
              <option>Service Explainers</option>
              <option>Industry News</option>
            </select>
          </div>
          <div>
            <label className="block text-text-muted text-sm mb-1">Tags (comma-separated)</label>
            <input name="tags" value={form.tags} onChange={handleChange} className={inputClass} />
          </div>
        </div>
        <div>
          <label className="block text-text-muted text-sm mb-1">Excerpt</label>
          <textarea name="excerpt" value={form.excerpt} onChange={handleChange} rows={2} className={inputClass} />
        </div>
        <div>
          <label className="block text-text-muted text-sm mb-1">Content (Markdown)</label>
          <textarea name="content" value={form.content} onChange={handleChange} rows={20} required className={inputClass + " font-mono text-sm"} />
        </div>
        <div>
          <label className="block text-text-muted text-sm mb-1">Meta Title</label>
          <input name="meta_title" value={form.meta_title} onChange={handleChange} className={inputClass} />
        </div>
        <div>
          <label className="block text-text-muted text-sm mb-1">Meta Description</label>
          <textarea name="meta_description" value={form.meta_description} onChange={handleChange} rows={2} className={inputClass} />
        </div>
        <div className="flex gap-6">
          <label className="flex items-center gap-2 cursor-pointer">
            <input type="checkbox" name="published" checked={form.published} onChange={handleChange} className="rounded" />
            <span className="text-sm text-text-muted">Published</span>
          </label>
          <label className="flex items-center gap-2 cursor-pointer">
            <input type="checkbox" name="featured" checked={form.featured} onChange={handleChange} className="rounded" />
            <span className="text-sm text-text-muted">Featured</span>
          </label>
        </div>
        <button type="submit" disabled={saving} className="bg-primary hover:bg-primary-dark text-white px-6 py-3 rounded-lg font-semibold transition-colors disabled:opacity-50">
          {saving ? "Creating..." : "Create Post"}
        </button>
      </form>
    </div>
  );
}