"use client";

import Link from "next/link";
import { Calendar, ArrowRight, Clock, Plus } from "lucide-react";
import { formatTime } from "@/lib/utils";
import type { CalendarEvent } from "@/types";

interface UpcomingEventsProps {
  events: CalendarEvent[];
}

export function UpcomingEvents({ events }: UpcomingEventsProps) {
  return (
    <div className="group/widget rounded-2xl border border-border/50 bg-card overflow-hidden transition-all duration-200 hover:border-violet-500/20 hover:shadow-[0_0_30px_-10px_rgba(139,92,246,0.1)]">
      {/* Header */}
      <div className="flex items-center justify-between px-5 py-4">
        <div className="flex items-center gap-3">
          <div className="flex items-center justify-center w-8 h-8 rounded-xl bg-gradient-to-br from-violet-500/20 to-violet-600/10 ring-1 ring-violet-500/10">
            <Calendar className="h-4 w-4 text-violet-500" />
          </div>
          <div>
            <h2 className="text-sm font-semibold tracking-tight">Events</h2>
            <p className="text-[10px] text-muted-foreground">
              {events.length > 0 ? `${events.length} diese Woche` : "Keine Events"}
            </p>
          </div>
        </div>
        <Link
          href="/calendar"
          className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-violet-500 transition-colors"
        >
          Kalender <ArrowRight className="h-3 w-3" />
        </Link>
      </div>

      {/* Content */}
      <div className="border-t border-border/50">
        {events.length === 0 ? (
          <div className="px-5 py-10 text-center">
            <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-violet-500/10 to-purple-500/10 flex items-center justify-center mx-auto mb-3 ring-1 ring-violet-500/5">
              <Calendar className="h-5 w-5 text-violet-400" />
            </div>
            <p className="text-sm font-medium text-muted-foreground mb-1">Keine Events diese Woche</p>
            <Link
              href="/calendar"
              className="inline-flex items-center gap-1 text-xs text-violet-500 hover:text-violet-400 transition-colors"
            >
              <Plus className="h-3 w-3" />
              Event erstellen
            </Link>
          </div>
        ) : (
          <div className="py-1">
            {events.slice(0, 5).map((event) => {
              const eventColor = event.color || "#8b5cf6";
              return (
                <div
                  key={event.id}
                  className="flex items-center gap-3 px-5 py-2.5 hover:bg-accent/30 transition-all duration-150 group/event"
                >
                  {/* Color accent line */}
                  <div
                    className="w-[3px] h-8 rounded-full shrink-0 transition-all duration-200 group-hover/event:h-10"
                    style={{ backgroundColor: eventColor }}
                  />
                  <div className="min-w-0 flex-1">
                    <p className="text-[13px] font-medium truncate">{event.title}</p>
                    <div className="flex items-center gap-1.5 mt-0.5">
                      <Clock className="h-3 w-3 text-muted-foreground/60" />
                      <span className="text-[11px] text-muted-foreground tabular-nums">
                        {event.all_day
                          ? "Ganztägig"
                          : `${formatTime(event.start_time)} – ${formatTime(event.end_time)}`}
                      </span>
                    </div>
                  </div>
                  {/* Day badge */}
                  <div className="shrink-0 text-center">
                    <span className="text-[10px] font-medium text-muted-foreground">
                      {new Date(event.start_time).toLocaleDateString("de-DE", { weekday: "short" })}
                    </span>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}