import { TimeSlot, Participant } from '@/types/calendar';
import { cn } from '@/lib/utils';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover';
import { Button } from '@/components/ui/button';
import { useState, useMemo, useRef, useEffect } from 'react';
import { Check, X, Loader2, ChevronLeft, ChevronRight, ChevronsRight, Clock, Calendar as CalendarIcon, Sun, Moon, Users } from 'lucide-react';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';

const DEFAULT_TIMEZONE = 'America/Toronto';
const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
const WORKING_HOUR_START = 8; // 8 AM
const WORKING_HOUR_END = 18; // 6 PM
const ALL_HOURS = Array.from({ length: 24 }, (_, i) => i);
const WORKING_HOURS = Array.from({ length: WORKING_HOUR_END - WORKING_HOUR_START + 1 }, (_, i) => i + WORKING_HOUR_START);

// Helper to check if a slot is in the past or too close (2h buffer)
const isSlotTooSoon = (slotDate: number) => {
  const now = Date.now();
  const twoHoursFromNow = now + 2 * 60 * 60 * 1000;
  return slotDate < twoHoursFromNow;
};

// Reuse previous timezone helpers or simplify
const getWeekDates = (timezone: string, weekOffset: number = 0): Date[] => {
  const now = new Date();
  const formatter = new Intl.DateTimeFormat('en-CA', {
    timeZone: timezone,
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  });

  const todayStr = formatter.format(now);
  const [year, month, day] = todayStr.split('-').map(Number);

  const todayDate = new Date(year, month - 1, day);
  const dayOfWeek = todayDate.getDay();
  // If Sunday (0), go back 6 days to Monday. If Mon (1), go back 0. If Sat (6), go back 5.
  // Actually standard logic: Mon=1...Sun=7. 
  // Let's assume standard ISO week start (Mon)
  const daysToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
  const mondayDate = new Date(year, month - 1, day + daysToMonday + weekOffset * 7);

  return Array.from({ length: 5 }, (_, i) => {
    const d = new Date(mondayDate);
    d.setDate(mondayDate.getDate() + i);
    return d;
  });
};

const formatTimezoneDisplay = (timezone: string): string => {
  try {
    const parts = timezone.split('/');
    const city = parts[parts.length - 1].replace(/_/g, ' ');
    return city;
  } catch {
    return timezone;
  }
};

interface AvailabilityHeatmapV2Props {
  slots: TimeSlot[];
  selectedParticipants: Participant[];
  onSlotSelect: (slot: TimeSlot) => void;
  showPartialAvailability?: boolean;
  isLoading?: boolean;
  weekOffset?: number;
  onWeekOffsetChange?: (offset: number) => void;
  displayTimezone?: string;
  showSecondaryTimezone?: boolean;
  secondaryTimezone?: string;
}

export const AvailabilityHeatmapV2 = ({
  slots,
  selectedParticipants,
  onSlotSelect,
  showPartialAvailability = false,
  isLoading = false,
  weekOffset = 0,
  onWeekOffsetChange,
  displayTimezone = DEFAULT_TIMEZONE,
  showSecondaryTimezone = false,
  secondaryTimezone = DEFAULT_TIMEZONE,
}: AvailabilityHeatmapV2Props) => {
  const [showFullDay, setShowFullDay] = useState(false);
  const activeHours = showFullDay ? ALL_HOURS : WORKING_HOURS;

  const weekDates = useMemo(() => getWeekDates(displayTimezone, weekOffset), [displayTimezone, weekOffset]);

  // Pre-compute slots lookup map for O(1) access
  // Key: YYYY-MM-DD:Hour
  const slotsMap = useMemo(() => {
    const map = new Map<string, TimeSlot>();
    slots.forEach(slot => {
      // Assuming slot.start_time is ISO string. 
      // We need to match it to our grid's local time logic.
      // This part is "flaky" in the original. 
      // The slot comes with a specific absolute time.
      // We want to place it in the intersection of "Day (in DisplayTZ)" and "Hour (in DisplayTZ)".

      const d = new Date(slot.start_time);
      // Format to DisplayTZ to find coordinate
      const formatter = new Intl.DateTimeFormat('en-CA', {
        timeZone: displayTimezone,
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: 'numeric',
        hour12: false
      });
      // "2023-10-25, 14"
      const parts = formatter.formatToParts(d);
      const year = parts.find(p => p.type === 'year')?.value;
      const month = parts.find(p => p.type === 'month')?.value;
      const day = parts.find(p => p.type === 'day')?.value;
      const hour = parts.find(p => p.type === 'hour')?.value;

      if (year && month && day && hour) {
        // Hour in 24h format might be "24" in some locales? No `hour12: false` gives 0-23 usually.
        // But Intl sometimes returns "24"? No, 0-23.
        let h = parseInt(hour, 10);
        if (h === 24) h = 0; // Just in case

        const key = `${year}-${month}-${day}:${h}`;
        map.set(key, slot);
      }
    });
    return map;
  }, [slots, displayTimezone]);

  const formatDateKey = (date: Date) => {
    const y = date.getFullYear();
    const m = String(date.getMonth() + 1).padStart(2, '0');
    const d = String(date.getDate()).padStart(2, '0');
    return `${y}-${m}-${d}`;
  };

  const formatDisplayDate = (date: Date) => {
    return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
  };

  const getSlotForCell = (date: Date, hour: number) => {
    const key = `${formatDateKey(date)}:${hour}`;
    return slotsMap.get(key);
  };

  const formatHour = (hour: number) => {
    return new Date(0, 0, 0, hour).toLocaleTimeString('en-US', {
      hour: 'numeric',
      hour12: true,
    });
  };

  if (selectedParticipants.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center p-12 border-2 border-dashed border-border/50 rounded-xl bg-muted/20 animate-fade-in">
        <UsersPlaceholder />
        <h3 className="text-xl font-semibold mt-4">No participants selected</h3>
        <p className="text-muted-foreground text-center max-w-sm mt-2">
          Select team members from the list above to compare calendars and find the perfect meeting time.
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-500">
      {/* Controls Bar */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-card p-4 rounded-xl border border-border shadow-sm">
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="icon"
              className="h-9 w-9"
              onClick={() => onWeekOffsetChange?.(weekOffset - 1)}
              disabled={!onWeekOffsetChange || weekOffset <= 0}
            >
              <ChevronLeft className="h-4 w-4" />
            </Button>
            <div className="flex flex-col items-center min-w-[140px]">
              <span className="text-sm font-semibold">
                {weekDates[0]?.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                {' - '}
                {weekDates[4]?.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
              </span>
              <span className="text-xs text-muted-foreground">
                {weekOffset === 0 ? "This Week" : weekOffset === 1 ? "Next Week" : `${weekOffset} weeks out`}
              </span>
            </div>
            <Button
              variant="outline"
              size="icon"
              className="h-9 w-9"
              onClick={() => onWeekOffsetChange?.(weekOffset + 1)}
              disabled={!onWeekOffsetChange}
            >
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>

          <div className="h-8 w-px bg-border hidden sm:block" />

          <div className="flex items-center gap-2 text-sm text-muted-foreground bg-muted/50 px-3 py-1.5 rounded-md">
            <Clock className="w-4 h-4" />
            {formatTimezoneDisplay(displayTimezone)}
          </div>
        </div>

        <div className="flex items-center gap-2">
          <Button
            variant={showFullDay ? "outline" : "secondary"}
            size="sm"
            onClick={() => setShowFullDay(!showFullDay)}
            className="text-xs"
          >
            {showFullDay ? (
              <>
                <Sun className="w-3.5 h-3.5 mr-2" />
                Show Work Hours
              </>
            ) : (
              <>
                <Moon className="w-3.5 h-3.5 mr-2" />
                Show Full Day
              </>
            )}
          </Button>
        </div>
      </div>

      {/* Main Grid Card */}
      <div className="bg-card w-full overflow-hidden rounded-xl border border-border shadow-md">
        {isLoading && (
          <div className="absolute inset-0 bg-background/50 backdrop-blur-[1px] z-50 flex items-center justify-center">
            <Loader2 className="w-10 h-10 animate-spin text-primary" />
          </div>
        )}

        <div className="overflow-auto max-h-[600px] w-full relative">
          <div className="min-w-[700px]">
            {/* Grid Header */}
            <div className="grid grid-cols-[80px_repeat(5,1fr)] sticky top-0 z-30 bg-card border-b border-border shadow-sm">
              <div className="sticky left-0 z-40 bg-card text-xs font-semibold text-muted-foreground self-center p-3 text-right border-r border-border/50">
                TIME
              </div>
              {weekDates.map(date => {
                const isToday = new Date().toDateString() === date.toDateString();
                return (
                  <div key={date.toISOString()} className={cn(
                    "text-center p-3 transition-colors border-r border-border/30 last:border-0",
                    isToday ? "bg-primary/5 text-primary font-bold" : "text-foreground"
                  )}>
                    <div className="text-sm">{date.toLocaleDateString('en-US', { weekday: 'short' })}</div>
                    <div className={cn("text-2xl", isToday ? "font-bold" : "font-light")}>
                      {date.getDate()}
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Grid Body */}
            <div className="relative">
              {activeHours.map((hour) => {
                const isNight = hour < 8 || hour >= 18;
                return (
                  <div
                    key={hour}
                    className={cn(
                      "grid grid-cols-[80px_repeat(5,1fr)] group items-stretch transition-colors border-b border-border/30 last:border-0",
                      isNight ? "bg-muted/30" : "bg-card",
                      "hover:bg-muted/10"
                    )}
                  >
                    {/* Time Label - Sticky Left */}
                    <div className={cn(
                      "text-xs text-muted-foreground font-medium text-right pr-4 py-3 flex items-center justify-end gap-1.5",
                      "sticky left-0 z-20 border-r border-border/50",
                      isNight ? "bg-muted/30 backdrop-blur-md" : "bg-card"
                    )}>
                      {isNight ? (
                        <Moon className="w-3 h-3 text-slate-400/50" />
                      ) : (
                        <Sun className="w-3 h-3 text-amber-500/50" />
                      )}
                      {formatHour(hour)}
                    </div>

                    {/* Days */}
                    {weekDates.map(date => {
                      const slot = getSlotForCell(date, hour);
                      const tooSoon = slot ? isSlotTooSoon(new Date(slot.start_time).getTime()) : true;

                      // Availability logic
                      const availability = slot?.availability || 'none';
                      const isNone = availability === 'none';
                      const isPartial = availability === 'partial' && showPartialAvailability;
                      const isFull = availability === 'full';
                      const isPartialHidden = availability === 'partial' && !showPartialAvailability;

                      // Styling
                      let bgClass = ""; // Default transparent
                      if (!slot) bgClass = "bg-muted/10 pattern-diagonal-lines opacity-50";
                      else if (isFull) bgClass = "bg-emerald-500/90 hover:bg-emerald-600 shadow-sm";
                      else if (isPartial) bgClass = "bg-amber-400/80 hover:bg-amber-500 shadow-sm";
                      else if (isNone || isPartialHidden) bgClass = "bg-transparent hover:bg-muted/20";

                      if (tooSoon && slot) bgClass = cn(bgClass, "opacity-30 cursor-not-allowed pattern-diagonal-lines");

                      return (
                        <div key={date.toISOString()} className="p-1 h-[52px] border-r border-border/30 last:border-0">
                          {slot ? (
                            <Popover>
                              <PopoverTrigger asChild disabled={tooSoon}>
                                <div className={cn(
                                  "w-full h-full rounded-md transition-all duration-200 cursor-pointer flex items-center justify-center group/cell relative overflow-hidden",
                                  bgClass,
                                  !tooSoon && (isFull || isPartial) ? "scale-[0.98] hover:scale-100 hover:ring-2 ring-primary/20" : ""
                                )}>
                                  {/* Mini Indicators for color-blind accessibility or density */}
                                  {isFull && <Check className="w-4 h-4 text-white opacity-0 group-hover/cell:opacity-100 transition-opacity" />}
                                </div>
                              </PopoverTrigger>
                              <PopoverContent className="w-72 p-0 rounded-xl overflow-hidden shadow-xl border-border" side="right" align="start">
                                <div className="p-4 bg-muted/30 border-b border-border/50">
                                  <h4 className="font-semibold text-base flex items-center gap-2">
                                    <CalendarIcon className="w-4 h-4 text-muted-foreground" />
                                    {formatDisplayDate(date)}
                                  </h4>
                                  <div className="text-sm text-muted-foreground mt-1 flex items-center gap-2">
                                    <Clock className="w-4 h-4" />
                                    {formatHour(hour)} - {formatHour(hour + 1)}
                                  </div>
                                </div>

                                <div className="p-4 space-y-3 max-h-[300px] overflow-y-auto">
                                  <div className="space-y-2">
                                    {selectedParticipants.map(participant => {
                                      const isAvailable = slot.availableParticipants.includes(participant.name);
                                      return (
                                        <div key={participant.id} className="flex items-center justify-between text-sm p-2 rounded-lg hover:bg-muted/50 transition-colors">
                                          <div className="flex items-center gap-3">
                                            <div className={cn(
                                              "w-2 h-2 rounded-full",
                                              isAvailable ? "bg-emerald-500" : "bg-destructive"
                                            )} />
                                            <span className={cn(!isAvailable && "text-muted-foreground")}>
                                              {participant.name}
                                            </span>
                                          </div>
                                          {isAvailable ? (
                                            <Check className="w-4 h-4 text-emerald-500" />
                                          ) : (
                                            <span className="text-xs text-muted-foreground">Busy</span>
                                          )}
                                        </div>
                                      );
                                    })}
                                  </div>

                                  {(!isNone && !tooSoon) && (
                                    <Button
                                      className="w-full mt-4 bg-emerald-600 hover:bg-emerald-700 text-white"
                                      onClick={() => onSlotSelect(slot)}
                                    >
                                      Schedule Meeting
                                    </Button>
                                  )}
                                </div>
                              </PopoverContent>
                            </Popover>
                          ) : (
                            // Placeholder for missing slots
                            <div className="w-full h-full rounded-md bg-muted/5 border border-dashed border-border/30"></div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Legend */}
        <div className="flex flex-wrap items-center justify-center bg-muted/20 border-t p-3 gap-6 text-sm">
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 rounded-full bg-emerald-500 shadow-sm"></div>
            <span className="font-medium text-foreground">All Available</span>
          </div>
          {showPartialAvailability && (
            <div className="flex items-center gap-2">
              <div className="w-3 h-3 rounded-full bg-amber-400 shadow-sm"></div>
              <span className="font-medium text-foreground">Partial Match</span>
            </div>
          )}
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 rounded border border-slate-300 bg-slate-100 dark:bg-slate-800 dark:border-slate-700"></div>
            <span className="text-muted-foreground">Busy / No Match</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 rounded bg-muted/30 pattern-diagonal-lines ring-1 ring-border/50"></div>
            <span className="text-muted-foreground">Past / Too Soon</span>
          </div>
        </div>
      </div>
    </div>
  );
};

function UsersPlaceholder() {
  return (
    <div className="relative w-16 h-16 mb-2">
      <div className="absolute top-0 left-0 w-10 h-10 rounded-full bg-muted border-2 border-background flex items-center justify-center">
        <Users className="w-5 h-5 text-muted-foreground" />
      </div>
      <div className="absolute bottom-0 right-0 w-10 h-10 rounded-full bg-muted border-2 border-background flex items-center justify-center">
        <Users className="w-5 h-5 text-muted-foreground" />
      </div>
    </div>
  );
}

// Importing Users icon since it was missing in imports