import { format, parseISO } from "date-fns";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { Badge } from "~/components/ui/badge";
import { Calendar, CheckCircle2, Clock } from "lucide-react";

interface ScheduleEvent {
  id: string;
  name: string;
  eventDate: string | null;
  eventType: string;
  isComplete: boolean;
  completedAt?: Date | string | null;
}

interface EventScheduleProps {
  upcomingEvents: ScheduleEvent[];
  recentEvents: ScheduleEvent[];
}

function formatEventDate(dateStr: string | null | undefined): string {
  if (!dateStr) return "Date TBD";
  try {
    // eventDate is stored as a date string "YYYY-MM-DD"
    return format(parseISO(dateStr), "MMM d, yyyy");
  } catch {
    return dateStr;
  }
}

function getEventTypeLabel(eventType: string): string {
  switch (eventType) {
    case "playoff_game":
      return "Bracket";
    case "major_tournament":
      return "Major";
    case "final_standings":
      return "Final Standings";
    case "schedule_event":
      return "Non-Scoring";
    default:
      return eventType;
  }
}

export function EventSchedule({ upcomingEvents, recentEvents }: EventScheduleProps) {
  const hasUpcoming = upcomingEvents.length > 0;
  const hasRecent = recentEvents.length > 0;

  if (!hasUpcoming && !hasRecent) return null;

  return (
    <div className="grid gap-4 sm:grid-cols-2">
      {/* Upcoming Events */}
      {hasUpcoming && (
        <Card className="border-electric/20">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium flex items-center gap-2 text-electric">
              <Clock className="h-4 w-4" />
              Upcoming
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0">
            <ul className="space-y-3">
              {upcomingEvents.map((event, index) => (
                <li
                  key={event.id}
                  className={`flex items-start justify-between gap-2 ${
                    index === 0 ? "" : "border-t pt-3"
                  }`}
                >
                  <div className="min-w-0">
                    <p
                      className={`text-sm font-medium truncate ${
                        index === 0 ? "text-foreground" : "text-muted-foreground"
                      }`}
                    >
                      {index === 0 && (
                        <span className="inline-block w-1.5 h-1.5 rounded-full bg-electric mr-2 mb-0.5" />
                      )}
                      {event.name}
                    </p>
                    <p className="text-xs text-muted-foreground flex items-center gap-1 mt-0.5">
                      <Calendar className="h-3 w-3" />
                      {formatEventDate(event.eventDate)}
                    </p>
                  </div>
                  {event.eventType === "schedule_event" ? (
                    !event.isComplete && event.eventDate && event.eventDate < new Date().toISOString().split("T")[0] && (
                      <Badge variant="outline" className="text-xs shrink-0 border-amber-500/30 text-amber-400">
                        Results Pending
                      </Badge>
                    )
                  ) : (
                    <Badge variant="outline" className="text-xs shrink-0">
                      {getEventTypeLabel(event.eventType)}
                    </Badge>
                  )}
                </li>
              ))}
            </ul>
          </CardContent>
        </Card>
      )}

      {/* Recent Results */}
      {hasRecent && (
        <Card className="border-emerald-500/20">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium flex items-center gap-2 text-emerald-400">
              <CheckCircle2 className="h-4 w-4" />
              Recent Results
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0">
            <ul className="space-y-3">
              {recentEvents.map((event, index) => (
                <li
                  key={event.id}
                  className={`flex items-start justify-between gap-2 ${
                    index === 0 ? "" : "border-t pt-3"
                  }`}
                >
                  <div className="min-w-0">
                    <p className="text-sm font-medium text-muted-foreground truncate">
                      {event.name}
                    </p>
                    <p className="text-xs text-muted-foreground flex items-center gap-1 mt-0.5">
                      <Calendar className="h-3 w-3" />
                      {formatEventDate(event.eventDate)}
                    </p>
                  </div>
                  {event.eventType !== "schedule_event" && (
                    <Badge
                      variant="outline"
                      className="text-xs shrink-0 border-emerald-500/30 text-emerald-400"
                    >
                      Done
                    </Badge>
                  )}
                </li>
              ))}
            </ul>
          </CardContent>
        </Card>
      )}
    </div>
  );
}