"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import type { BlockType, ContentBlock, Page, PageSlug, PageTranslation } from "../../lib/cms";
import { DEFAULT_LANG, LANGS, LANG_LABELS, type Lang } from "../../lib/i18n";
import { RICHTEXT_VARIANT_LABELS, isRichtextVariant } from "../../lib/richtextVariants";
import {
  createContentBlockAction,
  deleteContentBlockAction,
  moveContentBlockAction,
  updatePageNavAction,
  updatePageSeoAction,
} from "./actions";
import { BlockEditModal } from "./BlockEditModal";
import { ImageField } from "./ImageField";
import { Modal } from "./Modal";
import { LangDot } from "./PagesOverview";
import {
  cardClass,
  errorClass,
  hintClass,
  inputClass,
  labelClass,
  primaryButton,
  savedClass,
  secondaryButton,
  textareaClass,
} from "./ui";

export const TYPE_LABELS: Record<BlockType, string> = {
  hero: "Hero",
  richtext: "Tekstblok",
  testimonial: "Testimonial",
  benefits: "Voordelenlijst",
  cta: "Call to action",
};

const BLOCK_TYPE_OPTIONS: BlockType[] = ["hero", "richtext", "testimonial", "benefits", "cta"];

type BlockTranslations = Record<string, Record<number, Record<string, unknown>>>;

// "Tekstblok · Kaart – grijs": de gekozen weergave zichtbaar zonder het blok te openen
function variantSuffix(block: ContentBlock): string {
  if (block.type !== "richtext") return "";
  try {
    const variant = (JSON.parse(block.content) as { variant?: unknown }).variant;
    return isRichtextVariant(variant) && variant !== "standaard" ? ` · ${RICHTEXT_VARIANT_LABELS[variant]}` : "";
  } catch {
    return "";
  }
}

export function PageEditor({
  slug,
  page,
  blocks,
  mediaImages,
  pageTranslations,
  blockTranslations,
}: {
  slug: PageSlug;
  page: Page;
  blocks: ContentBlock[];
  mediaImages: string[];
  pageTranslations: Record<string, PageTranslation>;
  blockTranslations: BlockTranslations;
}) {
  const router = useRouter();
  const [lang, setLang] = useState<Lang>(DEFAULT_LANG);
  const [editingBlock, setEditingBlock] = useState<ContentBlock | null>(null);
  const [addBlockOpen, setAddBlockOpen] = useState(false);
  const [busyBlockId, setBusyBlockId] = useState<number | null>(null);
  const isNl = lang === DEFAULT_LANG;

  // Een taal is "ingevuld" zodra er ≥1 vertaald blok is
  const translatedCount = (l: Lang) => blocks.filter((b) => blockTranslations[l]?.[b.id]).length;

  async function handleDeleteBlock(block: ContentBlock) {
    if (!confirm(`Blok "${block.label}" verwijderen, met de vertalingen?`)) return;
    setBusyBlockId(block.id);
    try {
      const result = await deleteContentBlockAction(block.id, slug);
      if (result.error) alert(result.error);
      else router.refresh();
    } finally {
      setBusyBlockId(null);
    }
  }

  async function handleMoveBlock(block: ContentBlock, direction: "up" | "down") {
    setBusyBlockId(block.id);
    try {
      await moveContentBlockAction(block.id, slug, direction);
      router.refresh();
    } finally {
      setBusyBlockId(null);
    }
  }

  return (
    <div className="flex flex-col gap-6">
      <div>
        <div role="tablist" aria-label="Taal" className="flex gap-1 border-b border-zinc-200 dark:border-zinc-800">
          {LANGS.map((l) => (
            <button
              key={l}
              type="button"
              role="tab"
              aria-selected={l === lang}
              onClick={() => setLang(l)}
              className={`-mb-px flex items-center gap-2 border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
                l === lang
                  ? "border-rikx-orange text-zinc-900 dark:text-zinc-100"
                  : "border-transparent text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-200"
              }`}
            >
              {LANG_LABELS[l]}
              {l !== DEFAULT_LANG && <LangDot filled={translatedCount(l) > 0} />}
            </button>
          ))}
        </div>
        {!isNl && (
          <p className="text-sm text-zinc-500 mt-3">
            {LANG_LABELS[lang]}: {translatedCount(lang)} van {blocks.length} blokken vertaald.
            {translatedCount(lang) === 0
              ? " De taal telt als ingevuld zodra minstens één blok is vertaald."
              : " Niet-vertaalde velden vallen terug op het Nederlands."}
          </p>
        )}
      </div>

      <NavForm
        key={`nav-${lang}`}
        slug={slug}
        lang={lang}
        nlLabel={page.nav_label ?? ""}
        initialLabel={isNl ? (page.nav_label ?? "") : (pageTranslations[lang]?.nav_label ?? "")}
      />

      <SeoForm key={`seo-${lang}`} slug={slug} lang={lang} page={page} translation={pageTranslations[lang]} mediaImages={mediaImages} />

      <section className="flex flex-col gap-3">
        <div className="flex items-center justify-between">
          <h2 className="text-base font-semibold text-zinc-900 dark:text-zinc-100">
            Inhoud{isNl ? "" : ` (${lang.toUpperCase()})`}
          </h2>
          {isNl && (
            <button type="button" className={primaryButton} onClick={() => setAddBlockOpen(true)}>
              + Blok toevoegen
            </button>
          )}
        </div>

        {blocks.length === 0 && <p className="text-sm text-zinc-500">Nog geen inhoud — voeg een blok toe.</p>}
        {blocks.map((block, index) => {
          const translated = Boolean(blockTranslations[lang]?.[block.id]);
          const busy = busyBlockId === block.id;
          return (
            <div key={block.id} className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 px-5 py-4 flex flex-wrap items-center gap-3">
              <div className="flex-1 min-w-48">
                <div className="text-xs uppercase tracking-wide text-zinc-500 flex items-center gap-2">
                  {TYPE_LABELS[block.type]}
                  {variantSuffix(block)}
                  {!isNl && (
                    <span
                      className={`normal-case tracking-normal rounded-full px-2 py-0.5 ${
                        translated ? "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300" : "bg-zinc-100 text-zinc-500 dark:bg-zinc-800"
                      }`}
                    >
                      {translated ? "Vertaald" : "Niet vertaald"}
                    </span>
                  )}
                </div>
                <div className="font-medium text-zinc-900 dark:text-zinc-100">{block.label}</div>
              </div>
              <div className="flex flex-wrap gap-2">
                <button type="button" className={secondaryButton} onClick={() => setEditingBlock(block)}>
                  {isNl ? "Bewerken" : translated ? "Vertaling bewerken" : "Vertalen"}
                </button>
                {isNl && (
                  <>
                    <button
                      type="button"
                      aria-label="Omhoog"
                      className={secondaryButton}
                      disabled={busy || index === 0}
                      onClick={() => handleMoveBlock(block, "up")}
                    >
                      ↑
                    </button>
                    <button
                      type="button"
                      aria-label="Omlaag"
                      className={secondaryButton}
                      disabled={busy || index === blocks.length - 1}
                      onClick={() => handleMoveBlock(block, "down")}
                    >
                      ↓
                    </button>
                    <button
                      type="button"
                      className="px-2 text-sm text-red-500 hover:text-red-700 dark:hover:text-red-400 disabled:opacity-40"
                      disabled={busy}
                      onClick={() => handleDeleteBlock(block)}
                    >
                      Verwijderen
                    </button>
                  </>
                )}
              </div>
            </div>
          );
        })}
      </section>

      {editingBlock && (
        <BlockEditModal
          key={`${editingBlock.id}-${lang}`}
          block={editingBlock}
          slug={slug}
          lang={lang}
          translation={blockTranslations[lang]?.[editingBlock.id]}
          mediaImages={mediaImages}
          onClose={() => setEditingBlock(null)}
          onSaved={() => router.refresh()}
        />
      )}

      {addBlockOpen && <AddBlockModal slug={slug} onClose={() => setAddBlockOpen(false)} onCreated={() => router.refresh()} />}
    </div>
  );
}

// Apart component met key={lang}, zodat de beginwaarde bij een taalwissel opnieuw wordt gezet
function NavForm({ slug, lang, nlLabel, initialLabel }: { slug: PageSlug; lang: Lang; nlLabel: string; initialLabel: string }) {
  const router = useRouter();
  const [navLabel, setNavLabel] = useState(initialLabel);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [saved, setSaved] = useState(false);
  const isNl = lang === DEFAULT_LANG;

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    setError(null);
    setSaved(false);
    try {
      const result = await updatePageNavAction(slug, navLabel, lang);
      if (result.error) setError(result.error);
      else {
        setSaved(true);
        router.refresh();
      }
    } finally {
      setSaving(false);
    }
  }

  return (
    <section className={cardClass}>
      <h2 className="text-base font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Navigatie</h2>
      <form onSubmit={handleSubmit} className="flex flex-col gap-3">
        <label className="flex flex-col gap-1">
          <span className={labelClass}>
            {isNl ? "Naam in het hoofdmenu" : `Naam in het menu (${LANG_LABELS[lang]})`}
          </span>
          <input
            value={navLabel}
            onChange={(e) => setNavLabel(e.target.value)}
            placeholder={isNl ? "Bijv. Nieuwsbrief" : nlLabel || "Bijv. Newsletter"}
            className={inputClass}
          />
          <span className={hintClass}>
            {isNl
              ? "Leeg = niet in het menu (de pagina blijft bereikbaar). De volgorde wijzig je in het overzicht."
              : "Leeg = Nederlandse naam. Of en waar de pagina in het menu staat, bepaal je op het Nederlandse tabblad."}
          </span>
        </label>
        {error && <p className={errorClass}>{error}</p>}
        {saved && <p className={savedClass}>Opgeslagen.</p>}
        <div>
          <button type="submit" className={primaryButton} disabled={saving}>
            {saving ? "Bezig..." : "Navigatie opslaan"}
          </button>
        </div>
      </form>
    </section>
  );
}

function SeoForm({
  slug,
  lang,
  page,
  translation,
  mediaImages,
}: {
  slug: PageSlug;
  lang: Lang;
  page: Page;
  translation?: PageTranslation;
  mediaImages: string[];
}) {
  const router = useRouter();
  const isNl = lang === DEFAULT_LANG;
  const [metaTitle, setMetaTitle] = useState(isNl ? page.meta_title : (translation?.meta_title ?? ""));
  const [metaDescription, setMetaDescription] = useState(isNl ? page.meta_description : (translation?.meta_description ?? ""));
  const [ogImage, setOgImage] = useState(page.og_image ?? "");
  const [canonicalUrl, setCanonicalUrl] = useState(page.canonical_url ?? "");
  const [noindex, setNoindex] = useState(Boolean(page.noindex));
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [saved, setSaved] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    setError(null);
    setSaved(false);
    try {
      const result = await updatePageSeoAction(slug, metaTitle, metaDescription, ogImage, canonicalUrl, noindex, lang);
      if (result.error) setError(result.error);
      else {
        setSaved(true);
        router.refresh();
      }
    } finally {
      setSaving(false);
    }
  }

  return (
    <section className={cardClass}>
      <h2 className="text-base font-semibold text-zinc-900 dark:text-zinc-100 mb-4">SEO / Google-optimalisatie</h2>
      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
        <label className="flex flex-col gap-1">
          <span className={labelClass}>
            Meta-titel{isNl ? <span className="text-red-500 ml-1">*</span> : " (leeg = Nederlandse titel)"}
          </span>
          <input
            value={metaTitle}
            onChange={(e) => setMetaTitle(e.target.value)}
            placeholder={isNl ? undefined : page.meta_title}
            required={isNl}
            className={inputClass}
          />
        </label>
        <label className="flex flex-col gap-1">
          <span className={labelClass}>Meta-omschrijving{isNl ? "" : " (leeg = Nederlandse omschrijving)"}</span>
          <textarea
            value={metaDescription}
            onChange={(e) => setMetaDescription(e.target.value)}
            placeholder={isNl ? undefined : page.meta_description}
            rows={3}
            className={textareaClass}
          />
        </label>

        {isNl ? (
          <>
            <label className="flex flex-col gap-1">
              <span className={labelClass}>Canonieke URL (optioneel, alleen Nederlands)</span>
              <input
                value={canonicalUrl}
                onChange={(e) => setCanonicalUrl(e.target.value)}
                placeholder="https://..."
                className={inputClass}
              />
            </label>
            <ImageField
              label="Social share-afbeelding (og:image, optioneel — alle talen)"
              value={ogImage}
              onChange={setOgImage}
              mediaImages={mediaImages}
            />
            <label className="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-300">
              <input type="checkbox" checked={noindex} onChange={(e) => setNoindex(e.target.checked)} className="accent-rikx-orange" />
              Uitsluiten van zoekmachines (noindex, alle talen)
            </label>
          </>
        ) : (
          <p className={hintClass}>
            Canonieke URL, social share-afbeelding en noindex gelden voor alle talen en beheer je op het Nederlandse tabblad.
          </p>
        )}

        {error && <p className={errorClass}>{error}</p>}
        {saved && <p className={savedClass}>Opgeslagen.</p>}
        <div>
          <button type="submit" className={primaryButton} disabled={saving}>
            {saving ? "Bezig..." : "SEO opslaan"}
          </button>
        </div>
      </form>
    </section>
  );
}

function AddBlockModal({ slug, onClose, onCreated }: { slug: PageSlug; onClose: () => void; onCreated: () => void }) {
  const [type, setType] = useState<BlockType>("richtext");
  const [label, setLabel] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    setError(null);
    try {
      const result = await createContentBlockAction(slug, type, label, `block-${Date.now().toString(36)}`);
      if (result.error) setError(result.error);
      else {
        onCreated();
        onClose();
      }
    } finally {
      setSaving(false);
    }
  }

  return (
    <Modal title="Blok toevoegen" onClose={onClose}>
      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
        <label className="flex flex-col gap-1">
          <span className={labelClass}>Type</span>
          <select value={type} onChange={(e) => setType(e.target.value as BlockType)} className={inputClass}>
            {BLOCK_TYPE_OPTIONS.map((t) => (
              <option key={t} value={t}>
                {TYPE_LABELS[t]}
              </option>
            ))}
          </select>
        </label>
        <label className="flex flex-col gap-1">
          <span className={labelClass}>Naam (voor in het overzicht)</span>
          <input value={label} onChange={(e) => setLabel(e.target.value)} placeholder="Bijv. Introductie" required autoFocus className={inputClass} />
        </label>
        {error && <p className={errorClass}>{error}</p>}
        <div className="flex gap-3">
          <button type="submit" className={primaryButton} disabled={saving}>
            {saving ? "Bezig..." : "Toevoegen"}
          </button>
          <button type="button" className={secondaryButton} onClick={onClose} disabled={saving}>
            Annuleren
          </button>
        </div>
      </form>
    </Modal>
  );
}