"use client"

import type { ReactNode } from "react"
import Link from "next/link"
import { Clock, MapPin } from "lucide-react"

import { Badge } from "@/shared/components/ui/badge"
import { cn } from "@/shared/lib/utils"

/**
 * 课表列表项：统一的课程 + 时间 + 地点 + 班级徽章渲染。
 *
 * 覆盖以下重复模式（3 个文件逐行复制）：
 * - StudentTodayScheduleCard 的列表项
 * - ChildScheduleCard 的列表项
 * - StudentScheduleView 的列表项
 *
 * 数据结构：{ id, course, startTime, endTime, location?, className }
 */
export interface ScheduleListItemData {
  id: string
  course: string
  startTime: string
  endTime: string
  location?: string | null
  className?: string
  /** Optional href to navigate to when the item is clicked */
  href?: string
}

interface ScheduleListItemProps {
  item: ScheduleListItemData
  /** 布局变体："separator"=分隔线风格, "card"=卡片风格 */
  variant?: "separator" | "card"
  /** 右侧自定义内容（默认渲染 className Badge） */
  trailing?: ReactNode
  /** 额外类名 */
  className?: string
}

export function ScheduleListItem({
  item,
  variant = "separator",
  trailing,
  className,
}: ScheduleListItemProps) {
  const wrapperClass =
    variant === "separator"
      ? "flex items-center justify-between border-b pb-4 last:border-0 last:pb-0"
      : "flex items-start justify-between gap-3 rounded-md border bg-card p-3"

  const content = (
    <>
      <div className="space-y-1 min-w-0">
        <div className="font-medium leading-none truncate">{item.course}</div>
        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground">
          <div className="inline-flex items-center">
            <Clock className="mr-1 h-3 w-3" />
            <span className="tabular-nums">
              {item.startTime}–{item.endTime}
            </span>
          </div>
          {item.location ? (
            <div className="inline-flex items-center min-w-0">
              <MapPin className="mr-1 h-3 w-3 shrink-0" />
              <span className="truncate">{item.location}</span>
            </div>
          ) : null}
        </div>
      </div>
      {trailing !== undefined ? (
        trailing
      ) : item.className ? (
        <Badge variant="secondary" className="shrink-0">
          {item.className}
        </Badge>
      ) : null}
    </>
  )

  if (item.href) {
    return (
      <Link
        href={item.href}
        className={cn(wrapperClass, className, "transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring")}
      >
        {content}
      </Link>
    )
  }

  return (
    <div className={cn(wrapperClass, className)}>
      {content}
    </div>
  )
}

interface ScheduleListProps {
  items: ScheduleListItemData[]
  /** 布局变体："separator"=分隔线风格, "card"=卡片风格 */
  variant?: "separator" | "card"
  /** 列表容器间距类名（默认 "space-y-4"） */
  spacingClassName?: string
  /** 右侧自定义内容渲染函数（默认渲染 className Badge） */
  renderTrailing?: (item: ScheduleListItemData) => ReactNode
  /** 容器额外类名 */
  className?: string
}

export function ScheduleList({
  items,
  variant = "separator",
  spacingClassName = "space-y-4",
  renderTrailing,
  className,
}: ScheduleListProps) {
  if (items.length === 0) return null

  return (
    <div className={cn(spacingClassName, className)}>
      {items.map((item) => (
        <ScheduleListItem
          key={item.id}
          item={item}
          variant={variant}
          trailing={renderTrailing?.(item)}
        />
      ))}
    </div>
  )
}
