"use client"

import * as React from "react"
import { initialsFromDisplayName } from "@/lib/initials-from-name"
import type {
  LibraryLevel,
  LibraryItem,
  LibraryItemType,
} from "@/lib/mock/library"
import { STATUS_BADGE_TONE_CLASS } from "@/lib/list-status-badges"
import { formatDateUS } from "@/lib/date-filter"
import { BoardCardTwoLineBlock } from "@/components/data-views/board-card-primitives"
import {
  ListPageBoardCard,
  ListPageBoardCardAvatar,
  ListPageBoardCardBody,
  ListPageBoardCardHeader,
  ListPageBoardCardTitleRow,
} from "@/components/data-views/list-page-board-card"
import {
  ListPageBoardTemplate,
  type ListPageBoardColumnDef,
} from "@/components/data-views/list-page-board-template"
import {
  LibraryFavoriteButton,
  LIBRARY_FAVORITE_HOVER_GROUP,
} from "@/components/library-favorite-button"
import { cn } from "@/lib/utils"

const NEUTRAL_COUNT_BADGE = "bg-muted/90 text-foreground"

const TYPE_LABEL: Record<LibraryItemType, string> = {
  multiple_choice: "Type 1",
  true_false: "Type 2",
  short_answer: "Type 3",
}

const DIFF_LABEL: Record<LibraryLevel, string> = {
  easy: "Low",
  medium: "Normal",
  hard: "High",
}

const DIFF_BADGE: Record<LibraryLevel, string> = {
  easy: STATUS_BADGE_TONE_CLASS.success,
  medium: STATUS_BADGE_TONE_CLASS.warning,
  hard: STATUS_BADGE_TONE_CLASS.danger,
}

const TYPE_BADGE: Record<LibraryItemType, string> = {
  multiple_choice: STATUS_BADGE_TONE_CLASS.neutral,
  true_false: STATUS_BADGE_TONE_CLASS.info,
  short_answer: STATUS_BADGE_TONE_CLASS.warning,
}

const DIFF_ORDER: LibraryLevel[] = ["easy", "medium", "hard"]
const TYPE_ORDER: LibraryItemType[] = ["multiple_choice", "true_false", "short_answer"]

function topicBoardColumns(rows: LibraryItem[]): {
  columns: ListPageBoardColumnDef<LibraryItem>[]
  badgeMap: Record<string, string>
} {
  const topics = [...new Set(rows.map(r => r.topic))].toSorted((a, b) => a.localeCompare(b))
  const columns: ListPageBoardColumnDef<LibraryItem>[] = topics.map(topic => ({
    id: `topic:${topic}`,
    label: topic,
    filter: (r: LibraryItem) => r.topic === topic,
  }))
  const badgeMap = Object.fromEntries(topics.map(t => [`topic:${t}`, NEUTRAL_COUNT_BADGE]))
  return { columns, badgeMap }
}

function difficultyBoardColumns(): {
  columns: ListPageBoardColumnDef<LibraryItem>[]
  badgeMap: Record<string, string>
} {
  const columns: ListPageBoardColumnDef<LibraryItem>[] = DIFF_ORDER.map(d => ({
    id: d,
    label: DIFF_LABEL[d],
    filter: (r: LibraryItem) => r.difficulty === d,
  }))
  const badgeMap = Object.fromEntries(DIFF_ORDER.map(d => [d, DIFF_BADGE[d]]))
  return { columns, badgeMap }
}

function typeBoardColumns(): {
  columns: ListPageBoardColumnDef<LibraryItem>[]
  badgeMap: Record<string, string>
} {
  const columns: ListPageBoardColumnDef<LibraryItem>[] = TYPE_ORDER.map(t => ({
    id: t,
    label: TYPE_LABEL[t],
    filter: (r: LibraryItem) => r.type === t,
  }))
  const badgeMap = Object.fromEntries(TYPE_ORDER.map(t => [t, TYPE_BADGE[t]]))
  return { columns, badgeMap }
}

function useLibraryBoardModel(rows: LibraryItem[], groupByColumnKey: string) {
  return React.useMemo(() => {
    if (groupByColumnKey === "topic") {
      const { columns, badgeMap } = topicBoardColumns(rows)
      return { columns, badgeMap }
    }
    if (groupByColumnKey === "difficulty") {
      const { columns, badgeMap } = difficultyBoardColumns()
      return { columns, badgeMap }
    }
    if (groupByColumnKey === "type") {
      const { columns, badgeMap } = typeBoardColumns()
      return { columns, badgeMap }
    }
    const { columns, badgeMap } = topicBoardColumns(rows)
    return { columns, badgeMap }
  }, [rows, groupByColumnKey])
}

export function LibraryBoardCard({
  row,
  onToggleFavorite,
  onRowActivate,
}: {
  row: LibraryItem
  onToggleFavorite: (row: LibraryItem) => void
  onRowActivate?: (row: LibraryItem) => void
}) {
  const initials = initialsFromDisplayName(row.author)
  return (
    <ListPageBoardCard
      className={cn(LIBRARY_FAVORITE_HOVER_GROUP, "w-full")}
      onClick={onRowActivate ? () => onRowActivate(row) : undefined}
    >
      <ListPageBoardCardHeader>
        <ListPageBoardCardTitleRow
          title={(
            <span className="block">
              <span className="line-clamp-2">{row.stem}</span>
              <span className="mt-0.5 block font-mono text-xs font-normal text-muted-foreground">
                {row.questionId}
              </span>
            </span>
          )}
          trailing={(
            <div className="flex shrink-0 items-start gap-1">
              <LibraryFavoriteButton row={row} onToggleFavorite={onToggleFavorite} />
              <ListPageBoardCardAvatar initials={initials} />
            </div>
          )}
        />
      </ListPageBoardCardHeader>
      <ListPageBoardCardBody>
        <BoardCardTwoLineBlock
          iconClass="fa-tag"
          line1={row.topic}
          line2={row.type.replace(/_/g, " ")}
        />
        <BoardCardTwoLineBlock iconClass="fa-calendar-days" line1={formatDateUS(row.updatedAt)} line2="Updated" />
      </ListPageBoardCardBody>
    </ListPageBoardCard>
  )
}

/** List view row — same ListPageBoardCard shell as board tiles, `layout="row"`. */
export function LibraryListRowCard({
  row,
  onToggleFavorite,
}: {
  row: LibraryItem
  onToggleFavorite: (row: LibraryItem) => void
}) {
  return (
    <ListPageBoardCard
      className={LIBRARY_FAVORITE_HOVER_GROUP}
      layout="row"
      rowContainerClassName="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:gap-4"
      rowEnd={(
        <div className="flex shrink-0 items-center gap-1">
          <LibraryFavoriteButton row={row} onToggleFavorite={onToggleFavorite} />
          <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
        </div>
      )}
    >
      <div className="space-y-0.5">
        <p className="line-clamp-2 text-sm font-semibold text-foreground">{row.stem}</p>
        <p className="font-mono text-xs text-muted-foreground">{row.questionId}</p>
        <p className="text-xs text-muted-foreground">
          {row.topic} · Updated {formatDateUS(row.updatedAt)}
        </p>
        <p className="text-xs text-muted-foreground">{row.author}</p>
      </div>
    </ListPageBoardCard>
  )
}

export const LIBRARY_BOARD_GROUP_OPTIONS = [
  { key: "topic", label: "Topic" },
  { key: "difficulty", label: "Difficulty" },
  { key: "type", label: "Type" },
] as const

export function LibraryBoardView({
  rows,
  groupByColumnKey,
  onToggleFavorite,
  onRowActivate,
}: {
  rows: LibraryItem[]
  groupByColumnKey: string
  onToggleFavorite: (row: LibraryItem) => void
  onRowActivate?: (row: LibraryItem) => void
}) {
  const allowed = LIBRARY_BOARD_GROUP_OPTIONS.some(o => o.key === groupByColumnKey)
  const key = allowed ? groupByColumnKey : "topic"
  const { columns, badgeMap } = useLibraryBoardModel(rows, key)

  return (
    <ListPageBoardTemplate
      columns={columns}
      rows={rows}
      getRowKey={r => r.id}
      columnCountBadgeClassName={badgeMap}
      emptyColumnLabel="No questions"
      renderCard={row => (
        <LibraryBoardCard row={row} onToggleFavorite={onToggleFavorite} onRowActivate={onRowActivate} />
      )}
    />
  )
}
