"use client"

import { useCallback, useEffect, useRef, useState } from "react"
import { Camera, Clock, ImagePlus, RefreshCw, Send, Trash2, WifiOff, X } from "lucide-react"
import { PostEngagement, type ReactionSummary } from "./post-engagement"
import { cn } from "@/lib/utils"
import { enqueueWrite, flushQueue, queueCount } from "@/lib/offline-queue"

/**
 * Rundespesifikk kommentartråd for org-turneringer (ADR-102) -- ekte
 * parallell til `RoundMessages` (frittstående runder), IKKE en utvidelse
 * av den eksisterende hele-turnering-brede Banter Board (ADR-025).
 *
 * Bevisst UTENFOR omfang i v1 (se ADR-102): ingen @-tagging (samme
 * presedens som team-chat.tsx/public-tournament.tsx -- PostEngagement
 * sin `roundId`-prop utelates bevisst, komposereren er en vanlig
 * tekstboks), ingen sanntid/WebSocket-piggyback (denne autentiserte
 * visningen har ingen WS-tilkobling i det hele tatt ennå -- eget,
 * uprioritert gap). Refetches ved mount + en manuell "Oppdater"-knapp.
 */

export type ApiTournamentRoundMessage = {
  id: string
  tournament_round_id: string
  author_user_id: string
  author_display_name: string
  body: string | null
  image_url: string | null
  created_at: string // ISO 8601
  reactions: ReactionSummary[]
  comment_count: number
}

// Et lokalt, ikke-synkronisert innlegg (offline-kø), speiler round-messages.tsx.
type PendingMessage = ApiTournamentRoundMessage & { _clientMessageId: string }

export type TournamentRoundMessagesProps = {
  base: string // `/orgs/{organizationId}/tournaments/{tournamentId}`
  roundId: string
  currentUserId: string
  isOrgAdmin: boolean
}

const ACCEPTED_IMAGE_TYPES = "image/*"
const MAX_IMAGE_HEIGHT = 300
const MAX_UPLOAD_BYTES = 20 * 1024 * 1024

async function readErrorMessage(res: Response, fallback: string): Promise<string> {
  try {
    const data = await res.json()
    const message = data?.detail?.message
    if (typeof message === "string" && message.length > 0) return message
  } catch {
    // Ikke JSON -- bruk fallback.
  }
  return fallback
}

function formatRelativeTime(iso: string): { label: string; title: string } {
  const then = new Date(iso)
  const title = then.toLocaleString("nb-NO", {
    day: "2-digit",
    month: "short",
    hour: "2-digit",
    minute: "2-digit",
  })

  const diffMs = Date.now() - then.getTime()
  const diffSec = Math.round(diffMs / 1000)
  const diffMin = Math.round(diffSec / 60)
  const diffHour = Math.round(diffMin / 60)
  const diffDay = Math.round(diffHour / 24)

  let label: string
  if (diffSec < 45) label = "nå nettopp"
  else if (diffMin < 60) label = `for ${diffMin} min siden`
  else if (diffHour < 24) label = `for ${diffHour} t siden`
  else if (diffDay === 1) label = "i går"
  else if (diffDay < 7) label = `for ${diffDay} dager siden`
  else
    label = then.toLocaleDateString("nb-NO", {
      day: "numeric",
      month: "short",
    })

  return { label, title }
}

export function TournamentRoundMessages({ base, roundId, currentUserId, isOrgAdmin }: TournamentRoundMessagesProps) {
  const messagesUrl = `${base}/rounds/${roundId}/messages`
  const [messages, setMessages] = useState<ApiTournamentRoundMessage[]>([])
  const [loading, setLoading] = useState(true)
  const [loadError, setLoadError] = useState<string | null>(null)

  const [body, setBody] = useState("")
  const [imageFile, setImageFile] = useState<File | null>(null)
  const [imagePreview, setImagePreview] = useState<string | null>(null)
  const [posting, setPosting] = useState(false)
  const [postError, setPostError] = useState<string | null>(null)
  const [deletingId, setDeletingId] = useState<string | null>(null)

  // Egen kø-navnerom -- unngår kollisjon med en evt. fremtidig hull-score-kø
  // på samme runde (gap-punkt 1, ikke koblet på ennå), selv om begge ville
  // delt samme IndexedDB-database.
  const messagesMatchId = `${base}:${roundId}:tournament-messages`
  const [isOnline, setIsOnline] = useState(true)
  const [pendingCount, setPendingCount] = useState(0)
  const [syncingMessages, setSyncingMessages] = useState(false)
  const [pendingMessages, setPendingMessages] = useState<PendingMessage[]>([])

  const fileInputRef = useRef<HTMLInputElement | null>(null)
  const cameraInputRef = useRef<HTMLInputElement | null>(null)

  const load = useCallback(async () => {
    setLoading(true)
    setLoadError(null)
    try {
      const res = await fetch(messagesUrl, { credentials: "include" })
      if (!res.ok) throw new Error(`Status ${res.status}`)
      const data: ApiTournamentRoundMessage[] = await res.json()
      setMessages(data)
    } catch {
      setLoadError("Kunne ikke laste kommentarene. Prøv å laste siden på nytt.")
    } finally {
      setLoading(false)
    }
  }, [messagesUrl])

  useEffect(() => {
    void load()
  }, [load])

  const flushPendingMessages = useCallback(async () => {
    if (syncingMessages) return
    setSyncingMessages(true)
    try {
      const outcomes = await flushQueue(messagesMatchId)
      if (outcomes.length === 0) return
      for (const o of outcomes) {
        const sentBody = o.entry.body as Record<string, unknown>
        const clientMessageId = sentBody.client_message_id as string | undefined
        setPendingMessages((prev) => {
          const match = prev.find((m) => m._clientMessageId === clientMessageId)
          if (match?.image_url) URL.revokeObjectURL(match.image_url)
          return prev.filter((m) => m._clientMessageId !== clientMessageId)
        })
      }
      const failed = outcomes.filter((o) => !o.ok)
      if (failed.length > 0) {
        setPostError(
          `${failed.length} ${failed.length === 1 ? "kommentar" : "kommentarer"} kunne ikke synkroniseres: ${failed[0].message}`,
        )
      }
      setPendingCount(await queueCount(messagesMatchId))
      await load()
    } finally {
      setSyncingMessages(false)
    }
  }, [messagesMatchId, syncingMessages, load])

  useEffect(() => {
    setIsOnline(navigator.onLine)
    function handleOnline() {
      setIsOnline(true)
      void flushPendingMessages()
    }
    function handleOffline() {
      setIsOnline(false)
    }
    window.addEventListener("online", handleOnline)
    window.addEventListener("offline", handleOffline)
    return () => {
      window.removeEventListener("online", handleOnline)
      window.removeEventListener("offline", handleOffline)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [messagesMatchId])

  useEffect(() => {
    let cancelled = false
    queueCount(messagesMatchId)
      .then((count) => {
        if (cancelled) return
        setPendingCount(count)
        if (count > 0 && navigator.onLine) void flushPendingMessages()
      })
      .catch(() => {})
    return () => {
      cancelled = true
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [messagesMatchId])

  useEffect(() => {
    return () => {
      if (imagePreview) URL.revokeObjectURL(imagePreview)
    }
  }, [imagePreview])

  const clearSelectedImage = useCallback(() => {
    setImageFile(null)
    setImagePreview((prev) => {
      if (prev) URL.revokeObjectURL(prev)
      return null
    })
    if (fileInputRef.current) fileInputRef.current.value = ""
    if (cameraInputRef.current) cameraInputRef.current.value = ""
  }, [])

  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]
    if (!file) return
    if (file.size > MAX_UPLOAD_BYTES) {
      setPostError("Bildet er for stort (maks 20 MB). Velg et mindre bilde.")
      e.target.value = ""
      return
    }
    setPostError(null)
    setImageFile(file)
    setImagePreview((prev) => {
      if (prev) URL.revokeObjectURL(prev)
      return URL.createObjectURL(file)
    })
  }

  const trimmedBody = body.trim()
  const canPost = (trimmedBody.length > 0 || imageFile != null) && !posting

  async function queueMessageOffline(fields: Record<string, string | Blob>, clientMessageId: string) {
    await enqueueWrite({
      url: messagesUrl,
      method: "POST",
      body: fields,
      matchId: messagesMatchId,
      isMultipart: true,
    })
    const pendingImageUrl = imageFile ? URL.createObjectURL(imageFile) : null
    setPendingMessages((prev) => [
      {
        id: `pending-${clientMessageId}`,
        tournament_round_id: roundId,
        author_user_id: currentUserId,
        author_display_name: "Du",
        body: trimmedBody || null,
        image_url: pendingImageUrl,
        created_at: new Date().toISOString(),
        reactions: [],
        comment_count: 0,
        _clientMessageId: clientMessageId,
      },
      ...prev,
    ])
    setPendingCount((c) => c + 1)
    setBody("")
    clearSelectedImage()
  }

  async function handlePost(e: React.FormEvent) {
    e.preventDefault()
    if (!canPost) return

    setPosting(true)
    setPostError(null)
    const clientMessageId = crypto.randomUUID()
    const fields: Record<string, string | Blob> = { client_message_id: clientMessageId }
    if (trimmedBody.length > 0) fields.body = trimmedBody
    if (imageFile) fields.image = imageFile

    if (!navigator.onLine) {
      await queueMessageOffline(fields, clientMessageId)
      setPosting(false)
      return
    }

    try {
      const formData = new FormData()
      for (const [k, v] of Object.entries(fields)) formData.append(k, v)

      const res = await fetch(messagesUrl, {
        method: "POST",
        credentials: "include",
        body: formData,
      })
      if (!res.ok) {
        setPostError(await readErrorMessage(res, "Kunne ikke poste kommentaren. Prøv igjen."))
        return
      }

      const created: ApiTournamentRoundMessage = await res.json()
      setMessages((prev) => [created, ...prev])
      setBody("")
      clearSelectedImage()
    } catch {
      await queueMessageOffline(fields, clientMessageId)
    } finally {
      setPosting(false)
    }
  }

  async function handleDelete(id: string) {
    setDeletingId(id)
    setPostError(null)
    try {
      const res = await fetch(`${messagesUrl}/${id}`, {
        method: "DELETE",
        credentials: "include",
      })
      if (res.status !== 204) throw new Error(`Status ${res.status}`)
      setMessages((prev) => prev.filter((m) => m.id !== id))
    } catch {
      setPostError("Kunne ikke slette kommentaren. Prøv igjen.")
    } finally {
      setDeletingId(null)
    }
  }

  return (
    <section className="flex flex-col gap-4" aria-label="Kommentarer og bilder fra turneringsrunden">
      <div className="flex items-center justify-between gap-2">
        <h3 className="text-sm font-bold text-foreground">Kommentarer</h3>
        <button
          type="button"
          onClick={() => void load()}
          disabled={loading}
          className="inline-flex h-9 items-center gap-1.5 rounded-lg px-2.5 text-xs font-semibold text-muted-foreground outline-none transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
        >
          <RefreshCw aria-hidden="true" className={cn("size-3.5", loading && "animate-spin")} />
          Oppdater
        </button>
      </div>

      {/* Composer */}
      <form
        onSubmit={handlePost}
        className="flex flex-col gap-3 rounded-2xl border border-border bg-card p-4 sm:p-5"
      >
        <label htmlFor="tournament-round-message-body" className="sr-only">
          Skriv en kommentar
        </label>
        <textarea
          id="tournament-round-message-body"
          value={body}
          onChange={(e) => {
            setBody(e.target.value)
            if (postError) setPostError(null)
          }}
          placeholder="Skriv en kommentar..."
          rows={3}
          className="w-full resize-y rounded-xl border border-border bg-background px-3 py-2.5 text-base text-foreground outline-none transition-all duration-200 ease-in-out placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
        />

        {imagePreview && (
          <div className="flex items-center gap-3 rounded-xl border border-border bg-muted p-2.5">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={imagePreview || "/placeholder.svg"}
              alt="Forhåndsvisning av valgt bilde"
              className="size-14 shrink-0 rounded-lg object-cover"
            />
            <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
              {imageFile?.name}
            </span>
            <button
              type="button"
              onClick={clearSelectedImage}
              className="inline-flex h-11 min-w-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-muted-foreground outline-none transition-all duration-200 ease-in-out hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98]"
            >
              <X aria-hidden="true" className="size-4" />
              Fjern
            </button>
          </div>
        )}

        <div className="flex flex-wrap items-center justify-between gap-3">
          <div className="flex flex-wrap items-center gap-2">
            <input
              ref={cameraInputRef}
              type="file"
              accept={ACCEPTED_IMAGE_TYPES}
              capture="environment"
              onChange={handleFileChange}
              className="sr-only"
              aria-hidden="true"
              tabIndex={-1}
            />
            <button
              type="button"
              onClick={() => cameraInputRef.current?.click()}
              className="inline-flex h-11 items-center justify-center gap-2 rounded-lg border border-border bg-background px-4 text-base font-medium text-foreground outline-none transition-all duration-200 ease-in-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98]"
            >
              <Camera aria-hidden="true" className="size-5" />
              Ta bilde
            </button>

            <input
              ref={fileInputRef}
              type="file"
              accept={ACCEPTED_IMAGE_TYPES}
              onChange={handleFileChange}
              className="sr-only"
              aria-hidden="true"
              tabIndex={-1}
            />
            <button
              type="button"
              onClick={() => fileInputRef.current?.click()}
              className="inline-flex h-11 items-center justify-center gap-2 rounded-lg border border-border bg-background px-4 text-base font-medium text-foreground outline-none transition-all duration-200 ease-in-out hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98]"
            >
              <ImagePlus aria-hidden="true" className="size-5" />
              Velg fra galleri
            </button>
          </div>

          <button
            type="submit"
            disabled={!canPost}
            className="inline-flex h-11 min-w-11 items-center justify-center gap-2 rounded-lg bg-primary px-5 text-base font-medium text-primary-foreground outline-none transition-all duration-200 ease-in-out hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50"
          >
            {posting ? (
              <span
                aria-hidden="true"
                className="size-4 animate-spin rounded-full border-2 border-primary-foreground/30 border-t-primary-foreground"
              />
            ) : (
              <Send aria-hidden="true" className="size-5" />
            )}
            {posting ? "Poster..." : "Post"}
          </button>
        </div>

        {postError && (
          <p role="alert" className="text-sm font-medium text-destructive">
            {postError}
          </p>
        )}
      </form>

      {!isOnline && (
        <div className="flex items-center gap-2 rounded-2xl border border-amber-300 bg-amber-50 px-4 py-3 text-sm font-medium text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200">
          <WifiOff aria-hidden="true" className="size-4 shrink-0" />
          <span>Du er offline. Kommentaren lagres lokalt og postes automatisk når du er tilbake på nett.</span>
        </div>
      )}
      {pendingCount > 0 && (
        <div className="flex items-center justify-between gap-2 rounded-2xl border border-border bg-card px-4 py-3 text-sm font-medium text-foreground">
          <span>
            {pendingCount} {pendingCount === 1 ? "kommentar venter" : "kommentarer venter"} på synkronisering.
          </span>
          {isOnline && (
            <button
              type="button"
              onClick={() => void flushPendingMessages()}
              disabled={syncingMessages}
              className="inline-flex shrink-0 items-center gap-1 font-semibold text-primary disabled:opacity-50"
            >
              <RefreshCw aria-hidden="true" className={cn("size-3.5", syncingMessages && "animate-spin")} />
              Synkroniser nå
            </button>
          )}
        </div>
      )}

      {loading ? (
        <div className="flex justify-center py-12" aria-live="polite" aria-busy="true">
          <span
            aria-hidden="true"
            className="size-8 animate-spin rounded-full border-4 border-primary/20 border-t-primary"
          />
          <span className="sr-only">Laster kommentarer...</span>
        </div>
      ) : loadError ? (
        <p role="alert" className="rounded-2xl border border-border bg-card p-5 text-base text-destructive">
          {loadError}
        </p>
      ) : pendingMessages.length === 0 && messages.length === 0 ? (
        <p className="rounded-2xl border border-border bg-card p-5 text-base text-muted-foreground">
          Ingen kommentarer ennå — vær den første til å dele et bilde eller en kommentar fra runden.
        </p>
      ) : (
        <ul className="divide-y divide-border overflow-hidden rounded-2xl border border-border bg-card">
          {[...pendingMessages, ...messages].map((m) => {
            const isPending = "_clientMessageId" in m
            const canDelete = !isPending && (m.author_user_id === currentUserId || isOrgAdmin)
            const isDeleting = deletingId === m.id
            const { label, title } = formatRelativeTime(m.created_at)
            return (
              <li key={m.id} className="flex flex-col gap-3 p-4 sm:p-5">
                <div className="flex items-start justify-between gap-3">
                  <div className="flex min-w-0 flex-col">
                    <span className="truncate text-base font-semibold text-foreground">
                      {m.author_display_name}
                    </span>
                    {isPending ? (
                      <span className="inline-flex items-center gap-1 text-sm font-medium text-muted-foreground">
                        <Clock aria-hidden="true" className="size-3.5 shrink-0" />
                        Venter på synk
                      </span>
                    ) : (
                      <time
                        dateTime={m.created_at}
                        title={title}
                        className="text-sm font-medium text-muted-foreground"
                      >
                        {label}
                      </time>
                    )}
                  </div>

                  {canDelete && (
                    <button
                      type="button"
                      onClick={() => handleDelete(m.id)}
                      disabled={isDeleting}
                      className="inline-flex h-11 min-w-11 shrink-0 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive outline-none transition-all duration-200 ease-in-out hover:bg-destructive/10 focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50"
                    >
                      {isDeleting ? (
                        <span
                          aria-hidden="true"
                          className="size-4 animate-spin rounded-full border-2 border-destructive/30 border-t-destructive"
                        />
                      ) : (
                        <Trash2 aria-hidden="true" className="size-4" />
                      )}
                      Slett
                    </button>
                  )}
                </div>

                {m.image_url && (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={m.image_url || "/placeholder.svg"}
                    alt={`Bilde delt av ${m.author_display_name}`}
                    style={{ maxHeight: MAX_IMAGE_HEIGHT }}
                    className="w-full rounded-xl object-cover"
                  />
                )}

                {m.body && (
                  <p className="text-base leading-relaxed text-foreground whitespace-pre-wrap">{m.body}</p>
                )}

                {!isPending && (
                  <PostEngagement
                    apiBase={`${messagesUrl}/${m.id}`}
                    currentUserId={currentUserId || null}
                    initialReactions={m.reactions}
                    initialCommentCount={m.comment_count}
                    canModerate={isOrgAdmin}
                  />
                )}
              </li>
            )
          })}
        </ul>
      )}
    </section>
  )
}

export default TournamentRoundMessages