"use client";

import { useActionState, useTransition } from "react";
import { useRouter } from "next/navigation";
import {
  createInstagramPostAction,
  setInstagramPostVisibleAction,
  moveInstagramPostAction,
  deleteInstagramPostAction,
} from "@/lib/actions/instagram";

type Post = { id: string; url: string; visible: boolean };

export function InstagramFeedAdminPanel({
  posts,
  canEdit,
  canDelete,
}: {
  posts: Post[];
  canEdit: boolean;
  canDelete: boolean;
}) {
  const [state, formAction, pending] = useActionState(createInstagramPostAction, {});
  const [rowPending, startTransition] = useTransition();
  const router = useRouter();

  return (
    <div className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-6 mb-8">
      <p className="text-sm font-medium">Instagram-Feed (Startseite)</p>
      <p className="text-xs text-[var(--rk-ink-muted)] mt-1 mb-4">
        Link zu einem öffentlichen Instagram-Beitrag einfügen (aus der „Teilen"-Funktion in der Instagram-App
        kopieren) — erscheint als echtes Instagram-Embed auf der Startseite. Instagrams eigene API für einen
        vollautomatischen Feed verlangt inzwischen einen eigenen Meta-Zugang; diese Liste ist die
        lizenzkostenfreie Alternative ohne zusätzliches Konto.
      </p>

      <form action={formAction} className="flex flex-wrap gap-2 items-center mb-4">
        <input
          name="url"
          type="url"
          placeholder="https://www.instagram.com/p/…"
          required
          className="flex-1 min-w-[16rem] bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
        />
        <button
          type="submit"
          disabled={pending}
          className="text-xs border border-white/30 rounded-lg px-4 py-2 hover:border-white disabled:opacity-50"
        >
          Hinzufügen
        </button>
      </form>
      {state.error && <p className="text-xs text-red-400 mb-3">{state.error}</p>}

      <div className="flex flex-col gap-2">
        {posts.map((post, i) => (
          <div key={post.id} className="flex items-center gap-2 border border-white/10 rounded-lg px-3 py-2">
            <a
              href={post.url}
              target="_blank"
              rel="noopener noreferrer"
              className="flex-1 min-w-0 truncate text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] underline"
            >
              {post.url}
            </a>
            <div className="flex items-center gap-1 shrink-0">
              {canEdit && (
                <>
                  <button
                    type="button"
                    disabled={rowPending || i === 0}
                    onClick={() => startTransition(async () => { await moveInstagramPostAction(post.id, "up"); router.refresh(); })}
                    className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] disabled:opacity-30 px-1"
                    title="Nach oben"
                  >
                    ↑
                  </button>
                  <button
                    type="button"
                    disabled={rowPending || i === posts.length - 1}
                    onClick={() => startTransition(async () => { await moveInstagramPostAction(post.id, "down"); router.refresh(); })}
                    className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] disabled:opacity-30 px-1"
                    title="Nach unten"
                  >
                    ↓
                  </button>
                </>
              )}
              <label className="flex items-center gap-1 text-xs px-1">
                <input
                  type="checkbox"
                  checked={post.visible}
                  disabled={rowPending || !canEdit}
                  onChange={(e) =>
                    startTransition(async () => {
                      await setInstagramPostVisibleAction(post.id, e.target.checked);
                      router.refresh();
                    })
                  }
                  className="h-3.5 w-3.5"
                />
                Sichtbar
              </label>
              {canDelete && (
                <button
                  type="button"
                  disabled={rowPending}
                  onClick={() => {
                    if (confirm("Diesen Beitrag aus dem Feed entfernen?")) {
                      startTransition(async () => { await deleteInstagramPostAction(post.id); router.refresh(); });
                    }
                  }}
                  className="text-xs text-red-400/80 hover:text-red-400 disabled:opacity-50 px-1"
                >
                  Löschen
                </button>
              )}
            </div>
          </div>
        ))}
        {posts.length === 0 && <p className="text-xs text-[var(--rk-ink-muted)]">Noch keine Beiträge hinzugefügt.</p>}
      </div>
    </div>
  );
}