import React from "react";
import Link from "next/link";
import { Clock, MapPin, Users, ChevronRight, User } from "lucide-react";
import { AttendanceSession } from "@/types/attendance";
import { StatusBadge } from "./status-badge";
import { cn } from "@/lib/utils";

interface SessionCardProps {
  session: AttendanceSession;
  href?: string;
  className?: string;
}

export function SessionCard({ session, href, className }: SessionCardProps) {
  const content = (
    <div
      className={cn(
        "p-4 rounded-lg border border-slate-200 bg-white hover:border-slate-300 transition-colors flex flex-col justify-between dark:border-slate-800 dark:bg-slate-900",
        className
      )}
    >
      <div>
        <div className="flex items-center justify-between gap-2 mb-2">
          <span className="text-[11px] font-semibold text-blue-600 bg-blue-50 px-2 py-0.5 rounded border border-blue-200 dark:bg-blue-950/40 dark:text-blue-300 dark:border-blue-800">
            {session.subject?.code || "SUB-CLASS"}
          </span>
          <StatusBadge status={session.status} size="sm" />
        </div>

        <h3 className="text-sm font-semibold text-slate-900 tracking-tight dark:text-slate-100 mb-1">
          {session.subject?.name || "Academic Class Session"}
        </h3>

        <div className="space-y-1 mt-3 text-xs text-slate-600 dark:text-slate-400">
          <div className="flex items-center gap-2">
            <Clock className="w-3.5 h-3.5 text-slate-400 shrink-0" />
            <span className="tabular-nums">
              {session.scheduledStartTime} – {session.scheduledEndTime} ({session.scheduledHours} hrs / {session.attendanceUnits} units)
            </span>
          </div>

          <div className="flex items-center gap-2">
            <Users className="w-3.5 h-3.5 text-slate-400 shrink-0" />
            <span>{session.group?.name || "Entire Semester Batch"}</span>
          </div>

          {session.actualFaculty && (
            <div className="flex items-center gap-2">
              <User className="w-3.5 h-3.5 text-slate-400 shrink-0" />
              <span>{session.actualFaculty.name}</span>
            </div>
          )}
        </div>
      </div>

      {href && (
        <div className="pt-3 mt-3 border-t border-slate-100 dark:border-slate-800 flex items-center justify-between text-xs font-semibold text-slate-700 hover:text-blue-600 transition-colors dark:text-slate-300">
          <span>
            {session.status === "SCHEDULED" || session.status === "OPEN"
              ? "Start Marking"
              : session.status === "DRAFT"
              ? "Resume Draft"
              : "View Attendance"}
          </span>
          <ChevronRight className="w-4 h-4 ml-1" />
        </div>
      )}
    </div>
  );

  if (href) {
    return <Link href={href}>{content}</Link>;
  }

  return content;
}