"use client";

import { useActionState, useEffect, useState } from "react";
import { createBlogPostAction } from "@/lib/actions/blog";
import { toDatetimeLocal } from "@/lib/datetimeLocal";
import { TagInput } from "@/components/admin/TagInput";

// Wiederkehrende Content-Kategorien als Schnellauswahl statt eigenem
// Content-Typ — Blog-Tags haben schon Filter/verwandte-Beiträge-Logik
// (siehe blog/page.tsx, blog/[slug]/page.tsx), eine neue Struktur wäre hier
// nur Redundanz.
const QUICK_TAGS = ["Behind the Shoot", "Cosplay-Guide"];

export function NewBlogPostForm() {
  const [state, formAction, pending] = useActionState(createBlogPostAction, {});
  // Client-seitig gesetzt, damit die lokale Zeit stimmt (kein SSR-Mismatch).
  const [publishedAt, setPublishedAt] = useState("");
  useEffect(() => setPublishedAt(toDatetimeLocal(new Date())), []);
  const scheduled = publishedAt !== "" && new Date(publishedAt).getTime() > Date.now();

  return (
    <form
      action={formAction}
      encType="multipart/form-data"
      className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5 flex flex-col gap-3 mb-8"
    >
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <input
          name="title"
          placeholder="Titel"
          required
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
        <input
          name="titleEn"
          placeholder="Titel (Englisch, optional)"
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <input
          name="excerpt"
          placeholder="Kurzbeschreibung für die Übersicht (optional)"
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
        <input
          name="excerptEn"
          placeholder="Kurzbeschreibung (Englisch, optional)"
          className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
      </div>
      <textarea
        name="content"
        placeholder="Text (Deutsch) — Absätze durch Leerzeile trennen"
        required
        rows={6}
        className="bg-transparent border border-white/15 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-white/50 resize-y"
      />
      <textarea
        name="contentEn"
        placeholder="Text (Englisch, optional)"
        rows={6}
        className="bg-transparent border border-white/15 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-white/50 resize-y"
      />
      <TagInput name="tags" quickTags={QUICK_TAGS} placeholder="Tag eingeben, dann Enter (optional)" />
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <label className="flex flex-col gap-1.5 text-sm">
          <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Titelbild (optional)</span>
          <input name="coverImage" type="file" accept="image/jpeg,image/png,image/webp" className="text-sm" />
        </label>
        <label className="flex flex-col gap-1.5 text-sm">
          <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)]">Veröffentlichen am</span>
          <input
            name="publishedAt"
            type="datetime-local"
            value={publishedAt}
            onChange={(e) => setPublishedAt(e.target.value)}
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50 [color-scheme:dark]"
          />
        </label>
      </div>
      <label className="flex items-center gap-2 text-sm">
        <input type="checkbox" name="visible" defaultChecked className="h-3.5 w-3.5" />
        Freigeben
      </label>
      <p className="-mt-1 text-xs text-[var(--rk-ink-muted)]">
        {scheduled
          ? "Freigegeben + Datum in der Zukunft = geplanter Beitrag. Erscheint automatisch zum gewählten Zeitpunkt."
          : "Freigegeben = sofort öffentlich. Datum in der Zukunft wählen, um den Beitrag zu planen. Ohne Häkchen bleibt er verborgen."}
      </p>
      <button
        type="submit"
        disabled={pending}
        className="self-start border border-white/30 rounded-lg px-4 py-2 text-xs uppercase tracking-[0.15em] hover:border-white disabled:opacity-50"
      >
        Beitrag anlegen
      </button>
      {state.error && <p className="text-sm text-red-400">{state.error}</p>}
    </form>
  );
}