"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import {
  updateIntranetArticleAction,
  deleteIntranetArticleAction,
  setIntranetArticleVisibleAction,
  moveIntranetArticleAction,
} from "@/lib/actions/intranet";
import { categoryBadgeStyle } from "@/lib/colorHash";

type Department = { id: string; name: string; color: string };

export function IntranetArticleRow({
  item,
  departments,
  canEdit,
  canDelete,
  highlighted,
}: {
  item: {
    id: string;
    title: string;
    content: string;
    category: string;
    visible: boolean;
    pinned: boolean;
    lastEditedByName: string;
    updatedAt: string;
    departmentIds: string[];
  };
  departments: Department[];
  canEdit: boolean;
  canDelete: boolean;
  highlighted: boolean;
}) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  function submit(form: HTMLFormElement) {
    const data = new FormData(form);
    startTransition(async () => {
      await updateIntranetArticleAction(item.id, data);
      router.refresh();
    });
  }

  const badge = categoryBadgeStyle(item.category);
  const scopedDepartments = departments.filter((d) => item.departmentIds.includes(d.id));
  const updatedLabel = new Date(item.updatedAt).toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric" });

  return (
    <details
      id={`intranet-article-${item.id}`}
      open={highlighted || undefined}
      className={`bg-[var(--rk-surface)] border rounded-2xl p-5 transition-opacity ${
        item.visible ? "" : "opacity-60"
      } ${highlighted ? "border-white/40" : "border-white/10"}`}
    >
      <summary className="flex items-center justify-between gap-3 cursor-pointer list-none">
        <div className="min-w-0 flex items-center gap-2 flex-wrap">
          {item.pinned && <span title="Angepinnt">📌</span>}
          <span
            className="shrink-0 text-[0.65rem] uppercase tracking-[0.08em] border rounded-full px-2 py-0.5"
            style={{ borderColor: badge.borderColor, color: badge.color }}
          >
            {item.category || "—"}
          </span>
          {scopedDepartments.map((d) => (
            <span
              key={d.id}
              className="shrink-0 text-[0.65rem] uppercase tracking-[0.08em] border rounded-full px-2 py-0.5"
              style={{ borderColor: `${d.color}88`, color: d.color }}
            >
              {d.name}
            </span>
          ))}
          <div className="min-w-0">
            <p className="text-sm truncate">{item.title}</p>
            <p className="text-xs text-[var(--rk-ink-muted)]">
              {canEdit ? "Bearbeiten ▾" : `Zuletzt aktualisiert ${updatedLabel}${item.lastEditedByName ? ` von ${item.lastEditedByName}` : ""}`}
            </p>
          </div>
        </div>
        {canEdit && (
          <div className="flex items-center gap-3 shrink-0" onClick={(e) => e.stopPropagation()}>
            <div className="flex flex-col gap-0.5">
              <button
                disabled={pending}
                onClick={() => startTransition(async () => { await moveIntranetArticleAction(item.id, "up"); router.refresh(); })}
                className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] disabled:opacity-50"
                title="Nach oben"
              >
                ▲
              </button>
              <button
                disabled={pending}
                onClick={() => startTransition(async () => { await moveIntranetArticleAction(item.id, "down"); router.refresh(); })}
                className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] disabled:opacity-50"
                title="Nach unten"
              >
                ▼
              </button>
            </div>
            <label className="flex items-center gap-1.5 text-xs">
              <input
                type="checkbox"
                checked={item.visible}
                disabled={pending}
                onChange={(e) => startTransition(async () => { await setIntranetArticleVisibleAction(item.id, e.target.checked); router.refresh(); })}
                className="h-3.5 w-3.5"
              />
              Sichtbar
            </label>
            {canDelete && (
              <button
                disabled={pending}
                onClick={() => {
                  if (confirm("Diesen Beitrag wirklich löschen?")) {
                    startTransition(async () => {
                      await deleteIntranetArticleAction(item.id);
                      router.refresh();
                    });
                  }
                }}
                className="text-xs text-red-400/80 hover:text-red-400 transition-colors disabled:opacity-50"
              >
                Löschen
              </button>
            )}
          </div>
        )}
      </summary>

      {canEdit ? (
        <form
          onSubmit={(e) => {
            e.preventDefault();
            submit(e.currentTarget);
          }}
          className="mt-4 flex flex-col gap-3"
        >
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <input
              name="title"
              defaultValue={item.title}
              placeholder="Titel"
              className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
            />
            <input
              name="category"
              defaultValue={item.category}
              placeholder="Kategorie"
              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"
            defaultValue={item.content}
            placeholder="Inhalt"
            rows={8}
            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"
          />
          {departments.length > 0 && (
            <div>
              <p className="text-xs text-[var(--rk-ink-muted)] mb-1.5">
                Nur für bestimmte Abteilungen sichtbar (nichts ankreuzen = für alle):
              </p>
              <div className="flex flex-wrap gap-2">
                {departments.map((d) => (
                  <label
                    key={d.id}
                    className="flex items-center gap-1.5 text-xs border rounded-full px-2.5 py-1 cursor-pointer"
                    style={{ borderColor: `${d.color}66` }}
                  >
                    <input type="checkbox" name="departmentIds" value={d.id} defaultChecked={item.departmentIds.includes(d.id)} className="h-3 w-3" />
                    <span style={{ color: d.color }}>{d.name}</span>
                  </label>
                ))}
              </div>
            </div>
          )}
          <label className="flex items-center gap-2 text-sm">
            <input type="checkbox" name="pinned" defaultChecked={item.pinned} className="h-3.5 w-3.5" />
            📌 Anpinnen (oben anzeigen)
          </label>
          <p className="text-xs text-[var(--rk-ink-muted)]">
            Zuletzt aktualisiert {updatedLabel}
            {item.lastEditedByName ? ` von ${item.lastEditedByName}` : ""}
          </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"
          >
            Speichern
          </button>
        </form>
      ) : (
        <p className="mt-4 text-sm text-[var(--rk-ink-muted)] whitespace-pre-line">{item.content}</p>
      )}
    </details>
  );
}