"use client"

import React, { useEffect, useState } from "react"
import {
  Sparkles,
  Save,
  Pencil,
  Loader2,
  CheckCircle,
  AlertCircle,
} from "lucide-react"

import { BlogHeroSection } from "./BlogHeroSection"
import { LanguageTabs, type Language } from "../shared/LanguageTabs"
import { BLOG_PAGE_LOCALE_CODES } from "@/lib/pages/blog/locales"
import {
  type BlogPageFormStateShape,
  createEmptyBlogPageFormState,
} from "@/lib/pages/blog/form-types"
import {
  CmsPagePendingProvider,
  useCmsPagePendingRef,
} from "@/components/dashboard/cms-pages/CmsPagePendingContext"
import {
  clearAllCmsPending,
  commitPendingHeroLocales,
  cmsPendingHasAny,
} from "@/lib/media-manager/cms-page-pending"

// ─── Section wrapper ──────────────────────────────────────────────────────────

interface SectionProps {
  id: string
  icon: React.ReactNode
  title: string
  description: string
  accent: "navy" | "green"
  children: React.ReactNode
}

function Section({ id, icon, title, description, accent, children }: SectionProps) {
  const bg = accent === "navy" ? "rgba(29,45,104,0.02)" : "rgba(43,182,115,0.02)"
  const iconBg = accent === "navy" ? "rgba(29,45,104,0.08)" : "rgba(43,182,115,0.10)"
  const iconColor = accent === "navy" ? "var(--brand-navy)" : "var(--brand-green)"

  return (
    <section
      className="bg-card rounded-2xl border border-border overflow-hidden"
      aria-labelledby={id}
    >
      <div
        className="flex items-center gap-3 px-6 py-4 border-b border-border"
        style={{ background: bg }}
      >
        <div
          className="w-8 h-8 rounded-xl flex items-center justify-center shrink-0"
          style={{ background: iconBg }}
        >
          <span style={{ color: iconColor }} aria-hidden="true">
            {icon}
          </span>
        </div>
        <div>
          <h2 id={id} className="text-sm font-bold text-foreground font-sans">
            {title}
          </h2>
          <p className="text-xs text-muted-foreground font-sans">{description}</p>
        </div>
      </div>
      <div className="p-6">{children}</div>
    </section>
  )
}

function buildInitialFormByLanguage(): Record<Language, BlogPageFormStateShape> {
  return {
    en: createEmptyBlogPageFormState(),
    tr: createEmptyBlogPageFormState(),
    ar: createEmptyBlogPageFormState(),
  }
}

// ─── Main form ────────────────────────────────────────────────────────────────

export function BlogPageForm() {
  const [activeLanguage, setActiveLanguage] = useState<Language>("en")
  return (
    <CmsPagePendingProvider activeLanguage={activeLanguage}>
      <BlogPageFormBody activeLanguage={activeLanguage} setActiveLanguage={setActiveLanguage} />
    </CmsPagePendingProvider>
  )
}

function BlogPageFormBody({
  activeLanguage,
  setActiveLanguage,
}: {
  activeLanguage: Language
  setActiveLanguage: (lang: Language) => void
}) {
  const [formByLanguage, setFormByLanguage] = useState<Record<Language, BlogPageFormStateShape>>(
    buildInitialFormByLanguage
  )
  const [loading, setLoading] = useState(true)
  const [loadError, setLoadError] = useState<string | null>(null)
  const [saving, setSaving] = useState(false)
  const [isLockedForEditing, setIsLockedForEditing] = useState(false)
  const [saveSuccess, setSaveSuccess] = useState<string | null>(null)
  const [saveError, setSaveError] = useState<string | null>(null)
  const [englishValidationTouched, setEnglishValidationTouched] = useState(false)
  const isFormLocked = loading || saving || isLockedForEditing
  const pendingImages = useCmsPagePendingRef()

  useEffect(() => {
    return () => clearAllCmsPending(pendingImages)
  }, [])

  async function commitPendingImagesIfAny(): Promise<Record<Language, BlogPageFormStateShape>> {
    if (!cmsPendingHasAny(pendingImages)) {
      return {
        en: { ...formByLanguage.en },
        tr: { ...formByLanguage.tr },
        ar: { ...formByLanguage.ar },
      }
    }
    const merged = await commitPendingHeroLocales(formByLanguage, pendingImages)
    setFormByLanguage(merged)
    return merged
  }

  function getEnglishHeroValidationErrors() {
    const hero = formByLanguage.en.hero
    const quickStatsItems = hero.quickStats.map((item) => ({
      label: !item.label.trim(),
      icon: !item.icon.trim(),
    }))
    const hasQuickStatsItemError = quickStatsItems.some((item) => item.label || item.icon)
    const imageStats = {
      icon: !hero.imageStats.icon.trim(),
      label: !hero.imageStats.label.trim(),
      value: !hero.imageStats.value.trim(),
    }

    return {
      eyebrow: !hero.eyebrow.trim(),
      title: !hero.title.trim(),
      description: !hero.description.trim(),
      image: !hero.image.trim(),
      quickStats: hero.quickStats.length === 0 || hasQuickStatsItemError,
      quickStatsItems,
      imageStats,
    }
  }

  function hasEnglishValidationErrors() {
    const errors = getEnglishHeroValidationErrors()
    return (
      errors.eyebrow ||
      errors.title ||
      errors.description ||
      errors.image ||
      errors.quickStats ||
      errors.imageStats.icon ||
      errors.imageStats.label ||
      errors.imageStats.value
    )
  }

  useEffect(() => {
    let cancelled = false

    async function load() {
      setLoading(true)
      setLoadError(null)
      try {
        const res = await fetch("/api/admin/blog-page", { credentials: "include" })
        const data: {
          success?: boolean
          error?: string
          defaultImage?: string
          locales?: Partial<Record<Language, BlogPageFormStateShape>>
        } = await res.json()

        if (cancelled) return

        if (!res.ok || !data.success) {
          setLoadError(data.error ?? "Failed to load blog page.")
          return
        }

        setFormByLanguage((prev) => {
          const next = { ...prev }
          for (const code of BLOG_PAGE_LOCALE_CODES) {
            const chunk = data.locales?.[code]
            if (chunk?.hero) {
              next[code] = chunk
            }
          }
          return next
        })
      } catch {
        if (!cancelled) {
          setLoadError("Failed to load blog page. Please try again.")
        }
      } finally {
        if (!cancelled) setLoading(false)
      }
    }

    void load()
    return () => {
      cancelled = true
    }
  }, [])

  function updateSection<K extends keyof BlogPageFormStateShape>(
    key: K,
    value: BlogPageFormStateShape[K]
  ) {
    if (isFormLocked) return
    setFormByLanguage((prev) => ({
      ...prev,
      [activeLanguage]: { ...prev[activeLanguage], [key]: value },
    }))
    setSaveSuccess(null)
    setSaveError(null)
  }

  async function handleSave() {
    setEnglishValidationTouched(true)
    if (hasEnglishValidationErrors()) {
      setActiveLanguage("en")
      setSaveSuccess(null)
      setSaveError("Please fill all required English fields.")
      return
    }

    setSaving(true)
    setSaveSuccess(null)
    setSaveError(null)

    try {
      const payloadLocales = await commitPendingImagesIfAny()
      const res = await fetch("/api/admin/blog-page", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({ locales: payloadLocales }),
      })
      const data: { success?: boolean; error?: string } = await res.json()
      if (!res.ok || !data.success) {
        setSaveError(data.error ?? "Failed to save")
        return
      }
      setSaveSuccess("Blog page saved successfully.")
      setIsLockedForEditing(true)
    } catch (error) {
      setSaveError(
        error instanceof Error
          ? error.message
          : "Something went wrong. Please try again."
      )
    } finally {
      setSaving(false)
    }
  }

  const form = formByLanguage[activeLanguage]

  return (
    <div className="flex flex-col gap-6">
      {loadError && (
        <div
          className="flex items-center gap-3 px-4 py-3 rounded-xl border text-sm font-sans"
          style={{
            background: "rgba(239,68,68,0.06)",
            borderColor: "rgba(239,68,68,0.30)",
            color: "#dc2626",
          }}
          role="alert"
        >
          <AlertCircle className="w-4 h-4 shrink-0" aria-hidden="true" />
          {loadError}
        </div>
      )}

      {/* Language Tabs */}
      <div
        className="bg-card rounded-2xl border border-border overflow-hidden"
        role="tabpanel"
        id={`language-panel-${activeLanguage}`}
        aria-labelledby={`language-tab-${activeLanguage}`}
      >
        <div
          className="flex items-center gap-2 px-6 py-3 border-b border-border"
          style={{ background: "rgba(29,45,104,0.02)" }}
        >
          <div
            className="w-7 h-7 rounded-lg flex items-center justify-center shrink-0 text-sm"
            style={{ background: "rgba(29,45,104,0.08)" }}
            aria-hidden="true"
          >
            🌐
          </div>
          <div>
            <p className="text-sm font-bold font-sans" style={{ color: "var(--brand-navy)" }}>
              Page Language
            </p>
            <p className="text-xs text-muted-foreground font-sans leading-none mt-0.5">
              English is required to save. Turkish and Arabic are optional.
            </p>
          </div>
        </div>
        <div className="px-6 py-4">
          <LanguageTabs
            activeLanguage={activeLanguage}
            onChange={(language) => {
              if (isFormLocked) return
              setActiveLanguage(language)
            }}
            disabled={isFormLocked}
          />
        </div>
      </div>

      {/* Section 1 — Hero */}
      <Section
        id="section-blog-hero"
        icon={<Sparkles className="w-4 h-4" />}
        title="Hero Section"
        description="Eyebrow, title, description, quick stats, hero image, and image stats"
        accent="navy"
      >
        {loading ? (
          <p className="text-sm text-muted-foreground font-sans">Loading…</p>
        ) : (
          <div className="flex flex-col gap-5">
            <BlogHeroSection
              value={form.hero}
              onChange={(v) => updateSection("hero", v)}
              isDefaultLanguage={activeLanguage === "en"}
              defaultImageUrl={formByLanguage.en.hero.image || undefined}
              validation={
                activeLanguage === "en" && englishValidationTouched
                  ? getEnglishHeroValidationErrors()
                  : undefined
              }
              disabled={isFormLocked}
            />
          </div>
        )}
      </Section>

      {saveSuccess && (
        <div
          className="flex items-center gap-3 px-4 py-3 rounded-xl border text-sm font-sans"
          style={{
            background: "rgba(43,182,115,0.08)",
            borderColor: "rgba(43,182,115,0.30)",
            color: "var(--brand-green)",
          }}
          role="alert"
        >
          <CheckCircle className="w-4 h-4 shrink-0" aria-hidden="true" />
          {saveSuccess}
        </div>
      )}

      {saveError && (
        <div
          className="flex items-center gap-3 px-4 py-3 rounded-xl border text-sm font-sans"
          style={{
            background: "rgba(239,68,68,0.06)",
            borderColor: "rgba(239,68,68,0.30)",
            color: "#dc2626",
          }}
          role="alert"
        >
          <AlertCircle className="w-4 h-4 shrink-0" aria-hidden="true" />
          {saveError}
        </div>
      )}

      <div className="flex items-center justify-end gap-3 pb-2">
        {isLockedForEditing && (
          <button
            type="button"
            onClick={() => {
              setIsLockedForEditing(false)
              setSaveSuccess(null)
              setSaveError(null)
            }}
            disabled={saving || loading}
            className="flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-bold font-sans border border-border text-foreground bg-card transition-all hover:brightness-105 active:scale-[0.98] disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
          >
            <Pencil className="w-4 h-4" aria-hidden="true" />
            Edit Page
          </button>
        )}
        <button
          type="button"
          onClick={() => void handleSave()}
          disabled={isFormLocked}
          className="flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-bold font-sans text-white transition-all hover:brightness-105 active:scale-[0.98] disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
          style={{ background: "var(--brand-navy)" }}
        >
          {saving ? (
            <>
              <Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" />
              Saving...
            </>
          ) : (
            <>
              <Save className="w-4 h-4" aria-hidden="true" />
              Save Changes
            </>
          )}
        </button>
      </div>
    </div>
  )
}