"use client";

interface Availability {
  day: string;
  start_at: string;
  end_at: string;
  is_all_day: boolean;
}

interface AvailabilityCalendarProps {
  availabilities: Availability[];
}

const DAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
const HOURS = Array.from({ length: 24 }, (_, i) => i);

function parseTime(timeStr: string): number {
  const parts = timeStr.split(":");
  return parseInt(parts[0], 10);
}

export default function AvailabilityCalendar({ availabilities }: AvailabilityCalendarProps) {
  // Build a map of day -> availability slots
  const dayMap = new Map<string, Availability[]>();
  for (const a of availabilities) {
    const existing = dayMap.get(a.day) || [];
    existing.push(a);
    dayMap.set(a.day, existing);
  }

  function isAvailable(day: string, hour: number): boolean {
    const slots = dayMap.get(day);
    if (!slots) return false;
    return slots.some((slot) => {
      if (slot.is_all_day) return true;
      const start = parseTime(slot.start_at);
      const end = parseTime(slot.end_at);
      if (end > start) {
        return hour >= start && hour < end;
      }
      // Overnight: e.g. 22:00 - 06:00
      return hour >= start || hour < end;
    });
  }

  return (
    <div className="bg-surface rounded-lg p-6">
      <h2 className="text-lg font-semibold mb-4">Availability</h2>
      <div className="overflow-x-auto">
        <div className="min-w-[600px]">
          {/* Header */}
          <div className="grid grid-cols-[80px_repeat(7,1fr)] gap-0.5 mb-1">
            <div />
            {DAYS.map((day) => (
              <div key={day} className="text-center text-xs font-medium text-text-muted px-1">
                {day.slice(0, 3)}
              </div>
            ))}
          </div>

          {/* Time slots - show every 2 hours for readability */}
          {HOURS.filter((h) => h % 2 === 0).map((hour) => (
            <div key={hour} className="grid grid-cols-[80px_repeat(7,1fr)] gap-0.5 mb-0.5">
              <div className="text-xs text-text-muted pr-2 text-right leading-6">
                {hour.toString().padStart(2, "0")}:00
              </div>
              {DAYS.map((day) => {
                const available = isAvailable(day, hour) || isAvailable(day, hour + 1);
                return (
                  <div
                    key={`${day}-${hour}`}
                    className={`h-6 rounded-sm transition-colors ${
                      available
                        ? "bg-green-500/30 border border-green-500/40"
                        : "bg-surface-light/50 border border-white/5"
                    }`}
                    title={`${day} ${hour}:00 - ${hour + 2}:00: ${available ? "Available" : "Unavailable"}`}
                  />
                );
              })}
            </div>
          ))}

          {/* Legend */}
          <div className="flex items-center gap-4 mt-4">
            <div className="flex items-center gap-1.5">
              <div className="w-4 h-4 rounded-sm bg-green-500/30 border border-green-500/40" />
              <span className="text-xs text-text-muted">Available</span>
            </div>
            <div className="flex items-center gap-1.5">
              <div className="w-4 h-4 rounded-sm bg-surface-light/50 border border-white/5" />
              <span className="text-xs text-text-muted">Unavailable</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}