import { CalendarClock } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ScheduleSlot {
  id: string;
  /** Headline: series name for episodes, film title for everything else. */
  title: string;
  /** Secondary line: "S1 · E3 · Episode Title" for episodes, year for movies. */
  subtitle?: string | null;
  /** Rounded slot duration in minutes. */
  durationMins: number;
  startTime: string; // "HH:MM"
  endTime: string;   // "HH:MM"
  isCurrent?: boolean;
}

interface ScheduleOverlayProps {
  channelName: string;
  slots: ScheduleSlot[];
}

export function ScheduleOverlay({ channelName, slots }: ScheduleOverlayProps) {
  return (
    <div className="flex h-full w-80 flex-col rounded-lg bg-black/70 backdrop-blur-md overflow-hidden">
      {/* Header */}
      <div className="flex items-center gap-2 border-b border-zinc-700/60 px-4 py-3">
        <CalendarClock className="h-4 w-4 text-zinc-400 shrink-0" />
        <span className="truncate text-sm font-medium text-zinc-200">{channelName}</span>
      </div>

      {/* Slots */}
      <ul className="flex-1 overflow-y-auto">
        {slots.map((slot) => (
          <li
            key={slot.id}
            className={cn(
              "flex items-start gap-3 border-b border-zinc-800/60 px-4 py-3 transition-colors last:border-0",
              slot.isCurrent && "bg-white/5"
            )}
          >
            {/* Current indicator */}
            <span
              className={cn(
                "mt-0.5 h-2 w-2 shrink-0 rounded-full",
                slot.isCurrent ? "bg-white" : "bg-transparent"
              )}
            />

            <div className="min-w-0 flex-1">
              <p
                className={cn(
                  "truncate text-sm font-medium leading-snug",
                  slot.isCurrent ? "text-white" : "text-zinc-400"
                )}
              >
                {slot.title}
              </p>
              {slot.subtitle && (
                <p className={cn(
                  "truncate text-xs leading-snug",
                  slot.isCurrent ? "text-zinc-400" : "text-zinc-600"
                )}>
                  {slot.subtitle}
                </p>
              )}
              <p className="mt-0.5 font-mono text-[10px] text-zinc-600">
                {slot.startTime} – {slot.endTime}
                {" · "}{slot.durationMins}m
              </p>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

export type { ScheduleOverlayProps };