import type { Lesson } from "@/types/course";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

type LessonRowProps = {
  index: number;
  lesson: Lesson;
  isActive: boolean;
  isLocked: boolean;
  onSelect: () => void;
};

const typeColors: Record<Lesson["type"], string> = {
  video: "bg-red-50 text-red-600 dark:bg-red-900/20 dark:text-red-400",
  reading: "bg-green-50 text-green-600 dark:bg-green-900/20 dark:text-green-400",
  interactive: "bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400",
};

export default function LessonRow({ index, lesson, isActive, isLocked, onSelect }: LessonRowProps) {
  return (
    <Button
      variant="ghost"
      className={cn(
        "group h-auto w-full justify-start whitespace-normal rounded-2xl border p-5 text-left transition-all hover:bg-accent/50",
        isActive
          ? "border-primary/60 bg-background shadow-sm ring-1 ring-primary/20"
          : "border-border bg-background hover:border-border/80",
        isLocked && "cursor-not-allowed opacity-60 hover:bg-transparent"
      )}
      onClick={isLocked ? undefined : onSelect}
      type="button"
      disabled={isLocked && !isActive}
    >
      <div className="flex w-full items-center gap-4">
        <div
          className={cn(
            "flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border text-lg font-semibold transition-colors",
            isActive ? "border-primary text-primary" : "border-input text-muted-foreground group-hover:border-primary/40 group-hover:text-foreground"
          )}
        >
          {isLocked ? "L" : index + 1}
        </div>

        <div className="min-w-0 flex-1 space-y-1">
          <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
            <Badge variant="outline" className={cn("rounded-full border-0 px-2.5 py-0.5 font-semibold capitalize", typeColors[lesson.type])}>
              {lesson.type}
            </Badge>
            <span>{lesson.minutes} min</span>
            {isLocked ? <span className="text-muted-foreground/70">Locked</span> : null}
            {lesson.isPreview ? <span className="text-yellow-600 dark:text-yellow-400">Preview</span> : null}
          </div>
          <p className="truncate text-lg font-medium text-foreground md:text-2xl">{lesson.title}</p>
        </div>

        {isActive ? (
          <div className="hidden h-20 w-36 overflow-hidden rounded-xl border border-border bg-muted md:block">
            <div className="flex h-full items-center justify-center text-2xl text-muted-foreground/80">Play</div>
          </div>
        ) : null}
      </div>
    </Button>
  );
}