"use client"

import { useQuery } from "@tanstack/react-query"
import { createSupabaseBrowserClient } from "@/lib/supabase/client"
import { queryKeys } from "./query-keys"
import type { Highlight } from "@/lib/types/highlight"

interface HighlightRow {
  id: string
  entry_id: string
  highlighted_text: string
  note: string | null
  text_offset: number
  text_length: number
  text_prefix: string
  text_suffix: string
  color: string
  created_at: string
}

function mapRowToHighlight(row: HighlightRow): Highlight {
  return {
    identifier: row.id,
    entryIdentifier: row.entry_id,
    highlightedText: row.highlighted_text,
    note: row.note,
    textOffset: row.text_offset,
    textLength: row.text_length,
    textPrefix: row.text_prefix,
    textSuffix: row.text_suffix,
    color: row.color,
    createdAt: row.created_at,
  }
}

export function useEntryHighlights(entryIdentifier: string | null) {
  const supabaseClient = createSupabaseBrowserClient()

  return useQuery({
    queryKey: queryKeys.highlights.forEntry(entryIdentifier ?? ""),
    enabled: !!entryIdentifier,
    queryFn: async () => {
      const { data, error } = await supabaseClient
        .from("user_highlights")
        .select(
          "id, entry_id, highlighted_text, note, text_offset, text_length, text_prefix, text_suffix, color, created_at"
        )
        .eq("entry_id", entryIdentifier!)
        .order("text_offset", { ascending: true })

      if (error) throw error

      return ((data as unknown as HighlightRow[]) ?? []).map(mapRowToHighlight)
    },
  })
}