import { createFileRoute, Link } from "@tanstack/react-router";
import { useEffect, useMemo, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { useAuth } from "@/lib/auth";
import { ProtectedLayout } from "@/components/protected-layout";
import { PageContainer, PageHeader } from "@/components/app-shell";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Card } from "@/components/ui/card";
import { Calendar } from "@/components/ui/calendar";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Plus,
  Briefcase,
  CheckSquare,
  ChevronLeft,
  ChevronRight,
  CalendarDays,
  MapPin,
  Trash2,
} from "lucide-react";
import {
  format,
  isSameDay,
  isSameMonth,
  parseISO,
  startOfMonth,
  endOfMonth,
  startOfWeek,
  endOfWeek,
  addDays,
  addMonths,
  subMonths,
  startOfDay,
} from "date-fns";
import { toast } from "sonner";
import { cn } from "@/lib/utils";
import { estWallTimeToUTC, formatInEST, toESTDate } from "@/lib/tz";

export const Route = createFileRoute("/calendar/")({
  component: CalendarPage,
});

// ---- Event type config ----
const EVENT_TYPES = [
  { key: "court", label: "Court", color: "var(--chart-1, hsl(0 72% 51%))", bg: "bg-red-500" },
  { key: "deposition", label: "Deposition", color: "var(--chart-2)", bg: "bg-purple-500" },
  { key: "mediation", label: "Mediation", color: "var(--chart-3)", bg: "bg-amber-500" },
  { key: "client_meeting", label: "Client Meeting", color: "var(--chart-4)", bg: "bg-blue-500" },
  { key: "phone_call", label: "Phone Call / Consult", color: "var(--chart-5)", bg: "bg-cyan-500" },
  { key: "hearing", label: "Hearing", color: "", bg: "bg-rose-500" },
  { key: "deadline", label: "Deadline", color: "", bg: "bg-orange-500" },
  { key: "task", label: "Task", color: "", bg: "bg-emerald-500" },
  { key: "personal", label: "Personal", color: "", bg: "bg-pink-500" },
  { key: "general", label: "General", color: "", bg: "bg-indigo-500" },
  { key: "other", label: "Other", color: "", bg: "bg-slate-500" },
] as const;

type EventTypeKey = (typeof EVENT_TYPES)[number]["key"];

const EVENT_TYPE_MAP: Record<string, (typeof EVENT_TYPES)[number]> = Object.fromEntries(
  EVENT_TYPES.map((t) => [t.key, t]),
);

function typeMeta(key: string) {
  return EVENT_TYPE_MAP[key] ?? EVENT_TYPE_MAP.other;
}

function ownerInitials(name: string | null): string {
  if (!name) return "";
  const parts = name.trim().split(/\s+/).filter(Boolean);
  if (parts.length === 0) return "";
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
}

// ---- Unified event ----
interface Evt {
  id: string;
  source: "event" | "task" | "case_hearing";
  title: string;
  start: string; // ISO
  end: string | null;
  all_day: boolean;
  event_type: string;
  case_id: string | null;
  case_label: string | null;
  client_id: string | null;
  client_label: string | null;
  owner_id: string | null;
  owner_name: string | null;
  location: string | null;
  description: string | null;
}

interface CaseRow {
  id: string;
  title: string;
  case_number: string;
}

interface ClientRow {
  id: string;
  name: string;
}

interface StaffRow {
  id: string;
  full_name: string;
  email: string;
}

function CalendarPage() {
  const { user } = useAuth();
  const [view, setView] = useState<"month" | "week" | "day" | "list">("month");
  const [cursor, setCursor] = useState<Date>(new Date());
  const [selected, setSelected] = useState<Date>(new Date());

  const [events, setEvents] = useState<Evt[]>([]);
  const [cases, setCases] = useState<CaseRow[]>([]);
  const [clients, setClients] = useState<ClientRow[]>([]);
  const [staff, setStaff] = useState<StaffRow[]>([]);
  const [loading, setLoading] = useState(true);

  // filters
  const [activeTypes, setActiveTypes] = useState<Set<string>>(
    new Set(EVENT_TYPES.map((t) => t.key)),
  );
  const [activeStaff, setActiveStaff] = useState<Set<string>>(new Set()); // empty = all

  // dialog state
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);
  const [fTitle, setFTitle] = useState("");
  const [fType, setFType] = useState<EventTypeKey>("client_meeting");
  const [fStart, setFStart] = useState<Date | undefined>(undefined);
  const [fStartTime, setFStartTime] = useState("09:00");
  const [fEndTime, setFEndTime] = useState("10:00");
  const [fAllDay, setFAllDay] = useState(false);
  const [fCase, setFCase] = useState<string>("none");
  const [fClient, setFClient] = useState<string>("none");
  const [fLocation, setFLocation] = useState("");
  const [fNotes, setFNotes] = useState("");
  const [fAssignee, setFAssignee] = useState<string>("self");

  const reload = async () => {
    setLoading(true);
    // Pull a wide window around the cursor so month/week/list views are populated.
    // (Avoids hitting Supabase's default 1000-row cap on large event tables.)
    const winStart = format(addMonths(startOfMonth(cursor), -6), "yyyy-MM-dd");
    const winEnd = format(addMonths(endOfMonth(cursor), 12), "yyyy-MM-dd");

    const [eventsRes, tasksRes, casesRes, clientsRes, staffRes] = await Promise.all([
      supabase
        .from("events")
        .select(
          "id,title,start_at,end_at,all_day,event_type,case_id,client_id,location,description,created_by,assigned_to",
        )
        .gte("start_at", `${winStart}T00:00:00`)
        .lte("start_at", `${winEnd}T23:59:59`)
        .order("start_at", { ascending: true })
        .limit(5000),
      supabase
        .from("tasks")
        .select("id,title,due_date,case_id,status,created_by")
        .not("due_date", "is", null)
        .eq("status", "incomplete")
        .gte("due_date", winStart)
        .lte("due_date", winEnd),
      supabase
        .from("cases")
        .select("id,title,case_number,next_hearing_date,next_hearing_notes,client_id")
        .order("title"),
      supabase.from("clients").select("id,name").order("name"),
      supabase.from("profiles").select("id,full_name,email").order("full_name"),
    ]);

    const profileMap = new Map<string, StaffRow>();
    (staffRes.data ?? []).forEach((p) =>
      profileMap.set(p.id, { id: p.id, full_name: p.full_name || p.email, email: p.email }),
    );
    const caseMap = new Map<string, CaseRow & { client_id: string | null }>();
    (casesRes.data ?? []).forEach((c) =>
      caseMap.set(c.id, {
        id: c.id,
        title: c.title,
        case_number: c.case_number,
        client_id: c.client_id ?? null,
      }),
    );
    const clientMap = new Map<string, ClientRow>();
    (clientsRes.data ?? []).forEach((c) => clientMap.set(c.id, { id: c.id, name: c.name }));

    const evts: Evt[] = [];

    for (const e of eventsRes.data ?? []) {
      const ownerId = (e.assigned_to as string | null) ?? e.created_by ?? null;
      const owner = ownerId ? profileMap.get(ownerId) : null;
      const c = e.case_id ? caseMap.get(e.case_id) : null;
      const clientId = e.client_id ?? c?.client_id ?? null;
      const cl = clientId ? clientMap.get(clientId) : null;
      evts.push({
        id: e.id,
        source: "event",
        title: e.title,
        start: e.start_at as string,
        end: (e.end_at as string | null) ?? null,
        all_day: e.all_day ?? false,
        event_type: e.event_type ?? "other",
        case_id: e.case_id,
        case_label: c ? `${c.case_number} — ${c.title}` : null,
        client_id: clientId,
        client_label: cl?.name ?? null,
        owner_id: ownerId,
        owner_name: owner?.full_name ?? null,
        location: e.location ?? null,
        description: e.description ?? null,
      });
    }

    for (const t of tasksRes.data ?? []) {
      const owner = t.created_by ? profileMap.get(t.created_by) : null;
      const c = t.case_id ? caseMap.get(t.case_id) : null;
      const cl = c?.client_id ? clientMap.get(c.client_id) : null;
      evts.push({
        id: t.id,
        source: "task",
        title: t.title,
        start: `${t.due_date}T00:00:00`,
        end: null,
        all_day: true,
        event_type: "task",
        case_id: t.case_id,
        case_label: c ? `${c.case_number} — ${c.title}` : null,
        client_id: c?.client_id ?? null,
        client_label: cl?.name ?? null,
        owner_id: t.created_by,
        owner_name: owner?.full_name ?? null,
        location: null,
        description: null,
      });
    }

    for (const c of casesRes.data ?? []) {
      if (!c.next_hearing_date) continue;
      const cl = c.client_id ? clientMap.get(c.client_id) : null;
      evts.push({
        id: c.id,
        source: "case_hearing",
        title: `Hearing: ${c.title}`,
        start: `${c.next_hearing_date}T00:00:00`,
        end: null,
        all_day: true,
        event_type: "hearing",
        case_id: c.id,
        case_label: `${c.case_number} — ${c.title}`,
        client_id: c.client_id ?? null,
        client_label: cl?.name ?? null,
        owner_id: null,
        owner_name: null,
        location: null,
        description: c.next_hearing_notes,
      });
    }

    setEvents(evts);
    setCases(Array.from(caseMap.values()).map(({ id, title, case_number }) => ({ id, title, case_number })));
    setClients(Array.from(clientMap.values()));
    setStaff(Array.from(profileMap.values()));
    setLoading(false);
  };

  useEffect(() => {
    reload();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cursor.getFullYear(), cursor.getMonth()]);

  const visibleEvents = useMemo(() => {
    return events.filter((e) => {
      // Treat unknown event types as "other" so they remain visible
      const typeKey = EVENT_TYPE_MAP[e.event_type] ? e.event_type : "other";
      if (!activeTypes.has(typeKey)) return false;
      if (activeStaff.size > 0) {
        if (!e.owner_id || !activeStaff.has(e.owner_id)) return false;
      }
      return true;
    });
  }, [events, activeTypes, activeStaff]);

  const eventsByDay = useMemo(() => {
    const m = new Map<string, Evt[]>();
    for (const e of visibleEvents) {
      // Bucket events by their EST calendar day, not the raw UTC ISO date.
      const key = e.all_day ? e.start.slice(0, 10) : formatInEST(e.start, "yyyy-MM-dd");
      const arr = m.get(key) ?? [];
      arr.push(e);
      m.set(key, arr);
    }
    for (const arr of m.values()) {
      arr.sort((a, b) => a.start.localeCompare(b.start));
    }
    return m;
  }, [visibleEvents]);

  const dayEvents = useMemo(
    () => eventsByDay.get(format(selected, "yyyy-MM-dd")) ?? [],
    [eventsByDay, selected],
  );

  const upcoming = useMemo(() => {
    const today = startOfDay(new Date());
    return [...visibleEvents]
      .filter((e) => parseISO(e.start) >= today)
      .sort((a, b) => a.start.localeCompare(b.start))
      .slice(0, 10);
  }, [visibleEvents]);

  const toggleType = (key: string) => {
    setActiveTypes((s) => {
      const n = new Set(s);
      if (n.has(key)) n.delete(key);
      else n.add(key);
      return n;
    });
  };
  const toggleStaff = (id: string) => {
    setActiveStaff((s) => {
      const n = new Set(s);
      if (n.has(id)) n.delete(id);
      else n.add(id);
      return n;
    });
  };

  const openCreate = (presetDate?: Date) => {
    setEditingId(null);
    setFTitle("");
    setFType("client_meeting");
    setFStart(presetDate ?? selected);
    setFStartTime("09:00");
    setFEndTime("10:00");
    setFAllDay(false);
    setFCase("none");
    setFClient("none");
    setFLocation("");
    setFNotes("");
    setFAssignee("self");
    setDialogOpen(true);
  };

  const openEdit = (evt: Evt) => {
    if (evt.source !== "event") return; // tasks/hearings edit elsewhere
    setEditingId(evt.id);
    setFTitle(evt.title);
    setFType((EVENT_TYPE_MAP[evt.event_type] ? evt.event_type : "other") as EventTypeKey);
    // Convert UTC timestamp into the EST wall-clock so the date pickers and
    // HH:mm inputs reflect what the user originally entered (in EST).
    const estStart = toESTDate(evt.start);
    setFStart(estStart);
    setFAllDay(evt.all_day);
    if (!evt.all_day) {
      setFStartTime(formatInEST(evt.start, "HH:mm"));
      setFEndTime(evt.end ? formatInEST(evt.end, "HH:mm") : formatInEST(evt.start, "HH:mm"));
    }
    setFCase(evt.case_id ?? "none");
    setFClient(evt.client_id ?? "none");
    setFLocation(evt.location ?? "");
    setFNotes(evt.description ?? "");
    setFAssignee(evt.owner_id ?? "self");
    setDialogOpen(true);
  };

  const handleCreate = async () => {
    if (!user || !fTitle.trim() || !fStart) {
      toast.error("Title and date are required");
      return;
    }
    setSaving(true);
    const dateStr = format(fStart, "yyyy-MM-dd");
    // Times are entered as EST wall-clock; convert to a UTC ISO for storage so
    // Postgres `timestamptz` records the correct instant regardless of browser TZ.
    const startISO = fAllDay
      ? estWallTimeToUTC(dateStr, "00:00")
      : estWallTimeToUTC(dateStr, fStartTime);
    const endISO = fAllDay ? null : estWallTimeToUTC(dateStr, fEndTime);
    const ownerId = fAssignee === "self" ? user.id : fAssignee;

    const payload = {
      title: fTitle.trim(),
      event_type: fType,
      start_at: startISO,
      end_at: endISO,
      all_day: fAllDay,
      case_id: fCase === "none" ? null : fCase,
      client_id: fClient === "none" ? null : fClient,
      location: fLocation.trim() || null,
      description: fNotes.trim() || null,
      assigned_to: ownerId,
    };

    const { error } = editingId
      ? await supabase.from("events").update(payload).eq("id", editingId)
      : await supabase.from("events").insert({ ...payload, created_by: user.id });
    setSaving(false);
    if (error) {
      toast.error(error.message);
      return;
    }
    toast.success(editingId ? "Event updated" : "Event scheduled");
    setDialogOpen(false);
    reload();
  };

  const handleDelete = async () => {
    if (!editingId) return;
    if (!confirm("Delete this event?")) return;
    setSaving(true);
    const { error } = await supabase.from("events").delete().eq("id", editingId);
    setSaving(false);
    if (error) {
      toast.error(error.message);
      return;
    }
    toast.success("Event deleted");
    setDialogOpen(false);
    reload();
  };

  // ---- Month grid ----
  const monthDays = useMemo(() => {
    const start = startOfWeek(startOfMonth(cursor), { weekStartsOn: 0 });
    const end = endOfWeek(endOfMonth(cursor), { weekStartsOn: 0 });
    const days: Date[] = [];
    let d = start;
    while (d <= end) {
      days.push(d);
      d = addDays(d, 1);
    }
    return days;
  }, [cursor]);

  const weekDays = useMemo(() => {
    const start = startOfWeek(cursor, { weekStartsOn: 0 });
    return Array.from({ length: 7 }, (_, i) => addDays(start, i));
  }, [cursor]);

  return (
    <ProtectedLayout>
      <PageContainer>
        <PageHeader
          title="Calendar"
          description="Schedule and view tasks, hearings, and events across staff."
          actions={
            <Button onClick={() => openCreate()}>
              <Plus className="h-4 w-4 mr-2" />
              Add event
            </Button>
          }
        />

        <div className="grid grid-cols-1 lg:grid-cols-[260px_1fr] gap-6">
          {/* Sidebar filters */}
          <div className="space-y-4">
            <Card className="p-3">
              <Calendar
                mode="single"
                selected={selected}
                month={cursor}
                onMonthChange={setCursor}
                onSelect={(d) => {
                  if (d) {
                    setSelected(d);
                    setCursor(d);
                  }
                }}
                modifiers={{ hasEvent: (d) => eventsByDay.has(format(d, "yyyy-MM-dd")) }}
                modifiersClassNames={{ hasEvent: "font-semibold text-primary" }}
                className={cn("pointer-events-auto")}
              />
            </Card>

            <Card className="p-4">
              <h4 className="font-serif text-sm font-semibold mb-3">Event Types</h4>
              <div className="space-y-2">
                {EVENT_TYPES.map((t) => (
                  <label key={t.key} className="flex items-center gap-2 cursor-pointer text-sm">
                    <Checkbox
                      checked={activeTypes.has(t.key)}
                      onCheckedChange={() => toggleType(t.key)}
                    />
                    <span className={cn("h-2.5 w-2.5 rounded-full", t.bg)} />
                    <span>{t.label}</span>
                  </label>
                ))}
              </div>
            </Card>

            <Card className="p-4">
              <div className="flex items-center justify-between mb-3">
                <h4 className="font-serif text-sm font-semibold">Staff</h4>
                {activeStaff.size > 0 && (
                  <button
                    className="text-xs text-muted-foreground hover:text-foreground"
                    onClick={() => setActiveStaff(new Set())}
                  >
                    Clear
                  </button>
                )}
              </div>
              {staff.length === 0 ? (
                <p className="text-xs text-muted-foreground">No staff members.</p>
              ) : (
                <div className="space-y-2 max-h-64 overflow-auto">
                  {staff.map((s) => (
                    <label key={s.id} className="flex items-center gap-2 cursor-pointer text-sm">
                      <Checkbox
                        checked={activeStaff.has(s.id)}
                        onCheckedChange={() => toggleStaff(s.id)}
                      />
                      <span className="truncate">{s.full_name}</span>
                    </label>
                  ))}
                </div>
              )}
              <p className="text-xs text-muted-foreground mt-2">
                {activeStaff.size === 0 ? "Showing all staff" : `Filtering ${activeStaff.size}`}
              </p>
            </Card>
          </div>

          {/* Main */}
          <div className="space-y-4">
            <Card className="p-4">
              <div className="flex items-center justify-between flex-wrap gap-3 mb-4">
                <div className="flex items-center gap-2">
                  <Button variant="outline" size="sm" onClick={() => setCursor(new Date())}>
                    Today
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() =>
                      setCursor(view === "week" ? addDays(cursor, -7) : subMonths(cursor, 1))
                    }
                  >
                    <ChevronLeft className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() =>
                      setCursor(view === "week" ? addDays(cursor, 7) : addMonths(cursor, 1))
                    }
                  >
                    <ChevronRight className="h-4 w-4" />
                  </Button>
                  <h2 className="font-serif text-xl ml-2">
                    {view === "week"
                      ? `Week of ${format(startOfWeek(cursor), "MMM d, yyyy")}`
                      : format(cursor, "MMMM yyyy")}
                  </h2>
                </div>
                <div className="flex items-center gap-1 border rounded-md p-1">
                  {(["month", "week", "day", "list"] as const).map((v) => (
                    <Button
                      key={v}
                      size="sm"
                      variant={view === v ? "secondary" : "ghost"}
                      onClick={() => setView(v)}
                      className="h-7 px-3 capitalize"
                    >
                      {v}
                    </Button>
                  ))}
                </div>
              </div>

              {loading ? (
                <p className="text-sm text-muted-foreground py-8 text-center">Loading…</p>
              ) : view === "month" ? (
                <MonthGrid
                  days={monthDays}
                  cursor={cursor}
                  selected={selected}
                  eventsByDay={eventsByDay}
                  onSelectDay={(d) => setSelected(d)}
                  onCreateOnDay={(d) => openCreate(d)}
                />
              ) : view === "week" ? (
                <WeekStrip
                  days={weekDays}
                  selected={selected}
                  eventsByDay={eventsByDay}
                  onSelectDay={(d) => setSelected(d)}
                />
              ) : view === "list" ? (
                <ListView
                  events={visibleEvents}
                  onEdit={openEdit}
                  staff={staff}
                  onBulkUpdated={reload}
                />
              ) : null}
            </Card>

            <Card className="p-5">
              <h3 className="font-serif text-lg mb-3 flex items-center gap-2">
                <CalendarDays className="h-4 w-4" />
                {format(selected, "EEEE, MMMM d, yyyy")}
              </h3>
              {dayEvents.length === 0 ? (
                <p className="text-sm text-muted-foreground">No events scheduled.</p>
              ) : (
                <ul className="space-y-2">
                  {dayEvents.map((e) => (
                    <EventRow key={`${e.source}-${e.id}`} evt={e} onEdit={openEdit} />
                  ))}
                </ul>
              )}
            </Card>

            <Card className="p-5">
              <h3 className="font-serif text-lg mb-3">Upcoming</h3>
              {upcoming.length === 0 ? (
                <p className="text-sm text-muted-foreground">Nothing on the horizon.</p>
              ) : (
                <ul className="space-y-2">
                  {upcoming.map((e) => (
                    <EventRow key={`up-${e.source}-${e.id}`} evt={e} showDate onEdit={openEdit} />
                  ))}
                </ul>
              )}
            </Card>
          </div>
        </div>

        {/* Add event dialog */}
        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
          <DialogContent className="max-w-lg">
            <DialogHeader>
              <DialogTitle>{editingId ? "Edit event" : "Add event"}</DialogTitle>
            </DialogHeader>
            <div className="space-y-4 max-h-[70vh] overflow-auto pr-1">
              <div>
                <Label>Title</Label>
                <Input
                  value={fTitle}
                  onChange={(e) => setFTitle(e.target.value)}
                  placeholder="Hearing, deposition, meeting…"
                />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <Label>Event type</Label>
                  <Select value={fType} onValueChange={(v) => setFType(v as EventTypeKey)}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {EVENT_TYPES.map((t) => (
                        <SelectItem key={t.key} value={t.key}>
                          <span className="flex items-center gap-2">
                            <span className={cn("h-2.5 w-2.5 rounded-full", t.bg)} />
                            {t.label}
                          </span>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>Assign to</Label>
                  <Select value={fAssignee} onValueChange={setFAssignee}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="self">Me</SelectItem>
                      {staff.map((s) => (
                        <SelectItem key={s.id} value={s.id}>
                          {s.full_name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div>
                <Label>Date</Label>
                <div className="border rounded-md p-2 mt-1">
                  <Calendar
                    mode="single"
                    selected={fStart}
                    onSelect={setFStart}
                    className={cn("pointer-events-auto")}
                  />
                </div>
              </div>
              <div className="flex items-center gap-2">
                <Checkbox
                  id="allday"
                  checked={fAllDay}
                  onCheckedChange={(c) => setFAllDay(Boolean(c))}
                />
                <Label htmlFor="allday" className="cursor-pointer">
                  All day
                </Label>
              </div>
              {!fAllDay && (
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <Label>Start time (EST)</Label>
                    <Input
                      type="time"
                      value={fStartTime}
                      onChange={(e) => setFStartTime(e.target.value)}
                    />
                  </div>
                  <div>
                    <Label>End time (EST)</Label>
                    <Input
                      type="time"
                      value={fEndTime}
                      onChange={(e) => setFEndTime(e.target.value)}
                    />
                  </div>
                  <p className="col-span-2 text-xs text-muted-foreground -mt-1">
                    All times are entered and displayed in Eastern Time.
                  </p>
                </div>
              )}
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <Label>Related case</Label>
                  <Select value={fCase} onValueChange={setFCase}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="none">None</SelectItem>
                      {cases.map((c) => (
                        <SelectItem key={c.id} value={c.id}>
                          {c.case_number} — {c.title}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label>Related client</Label>
                  <Select value={fClient} onValueChange={setFClient}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="none">None</SelectItem>
                      {clients.map((c) => (
                        <SelectItem key={c.id} value={c.id}>
                          {c.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <div>
                <Label>Location</Label>
                <Input
                  value={fLocation}
                  onChange={(e) => setFLocation(e.target.value)}
                  placeholder="Courtroom, address, Zoom link…"
                />
              </div>
              <div>
                <Label>Description</Label>
                <Textarea value={fNotes} onChange={(e) => setFNotes(e.target.value)} rows={3} />
              </div>
            </div>
            <DialogFooter className="gap-2 sm:justify-between">
              {editingId ? (
                <Button variant="ghost" onClick={handleDelete} disabled={saving} className="text-destructive">
                  <Trash2 className="h-4 w-4 mr-1" /> Delete
                </Button>
              ) : <span />}
              <div className="flex gap-2">
                <Button variant="outline" onClick={() => setDialogOpen(false)} disabled={saving}>
                  Cancel
                </Button>
                <Button onClick={handleCreate} disabled={saving}>
                  {saving ? "Saving…" : editingId ? "Save changes" : "Save event"}
                </Button>
              </div>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </PageContainer>
    </ProtectedLayout>
  );
}

// ---- Subcomponents ----

function MonthGrid({
  days,
  cursor,
  selected,
  eventsByDay,
  onSelectDay,
  onCreateOnDay,
}: {
  days: Date[];
  cursor: Date;
  selected: Date;
  eventsByDay: Map<string, Evt[]>;
  onSelectDay: (d: Date) => void;
  onCreateOnDay: (d: Date) => void;
}) {
  const dayLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
  const today = new Date();
  return (
    <div>
      <div
        className="text-xs font-medium text-muted-foreground border-b"
        style={{ display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))" }}
      >
        {dayLabels.map((d) => (
          <div key={d} className="px-2 py-1.5 text-center">
            {d}
          </div>
        ))}
      </div>
      <div
        style={{ display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))", gridAutoRows: "1fr" }}
      >
        {days.map((d) => {
          const key = format(d, "yyyy-MM-dd");
          const dayEvts = eventsByDay.get(key) ?? [];
          const inMonth = isSameMonth(d, cursor);
          const isToday = isSameDay(d, today);
          const isSel = isSameDay(d, selected);
          return (
            <div
              key={key}
              onClick={() => onSelectDay(d)}
              onDoubleClick={() => onCreateOnDay(d)}
              style={{ minHeight: 100 }}
              className={cn(
                "border-b border-r p-1.5 cursor-pointer transition-colors",
                "hover:bg-accent/40",
                !inMonth && "bg-muted/30 text-muted-foreground",
                isSel && "ring-1 ring-primary ring-inset",
              )}
            >
              <div className="flex items-center justify-between mb-1">
                <span
                  className={cn(
                    "text-xs font-medium h-5 w-5 flex items-center justify-center rounded-full",
                    isToday && "bg-primary text-primary-foreground",
                  )}
                >
                  {format(d, "d")}
                </span>
              </div>
              <div className="space-y-0.5">
                {dayEvts.slice(0, 3).map((e) => {
                  const meta = typeMeta(e.event_type);
                  const initials = ownerInitials(e.owner_name);
                  return (
                    <div
                      key={`${e.source}-${e.id}`}
                      className={cn(
                        "text-[10px] leading-tight px-1.5 py-0.5 rounded truncate text-white flex items-center gap-1",
                        meta.bg,
                      )}
                      title={`${e.title}${e.owner_name ? ` — ${e.owner_name}` : ""}`}
                    >
                      {initials && (
                        <span className="shrink-0 text-[9px] font-semibold bg-white/25 rounded px-1 leading-tight">
                          {initials}
                        </span>
                      )}
                      <span className="truncate">
                        {!e.all_day && formatInEST(e.start, "h:mma ")}
                        {e.title}
                      </span>
                    </div>
                  );
                })}
                {dayEvts.length > 3 && (
                  <div className="text-[10px] text-muted-foreground px-1.5">
                    +{dayEvts.length - 3} more
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function WeekStrip({
  days,
  selected,
  eventsByDay,
  onSelectDay,
}: {
  days: Date[];
  selected: Date;
  eventsByDay: Map<string, Evt[]>;
  onSelectDay: (d: Date) => void;
}) {
  const today = new Date();
  return (
    <div
      style={{ display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))", gap: "0.5rem" }}
    >
      {days.map((d) => {
        const key = format(d, "yyyy-MM-dd");
        const dayEvts = eventsByDay.get(key) ?? [];
        const isToday = isSameDay(d, today);
        const isSel = isSameDay(d, selected);
        return (
          <div
            key={key}
            onClick={() => onSelectDay(d)}
            className={cn(
              "border rounded-md p-2 min-h-[200px] cursor-pointer hover:bg-accent/40 transition-colors",
              isSel && "ring-1 ring-primary",
            )}
          >
            <div className="text-xs text-muted-foreground">{format(d, "EEE")}</div>
            <div
              className={cn(
                "text-lg font-semibold mb-2",
                isToday && "text-primary",
              )}
            >
              {format(d, "d")}
            </div>
            <div className="space-y-1">
              {dayEvts.map((e) => {
                const meta = typeMeta(e.event_type);
                const initials = ownerInitials(e.owner_name);
                return (
                  <div
                    key={`${e.source}-${e.id}`}
                    className={cn(
                      "text-[11px] px-1.5 py-1 rounded truncate text-white flex items-center gap-1",
                      meta.bg,
                    )}
                    title={`${e.title}${e.owner_name ? ` — ${e.owner_name}` : ""}`}
                  >
                    {initials && (
                      <span className="shrink-0 text-[9px] font-semibold bg-white/25 rounded px-1 leading-tight">
                        {initials}
                      </span>
                    )}
                    <span className="truncate">
                      {!e.all_day && formatInEST(e.start, "h:mma ")}
                      {e.title}
                    </span>
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}

function ListView({
  events,
  onEdit,
  staff,
  onBulkUpdated,
}: {
  events: Evt[];
  onEdit?: (e: Evt) => void;
  staff: StaffRow[];
  onBulkUpdated: () => void | Promise<void>;
}) {
  const today = startOfDay(new Date());
  const upcoming = [...events]
    .filter((e) => parseISO(e.start) >= today)
    .sort((a, b) => a.start.localeCompare(b.start));
  const grouped = new Map<string, Evt[]>();
  upcoming.forEach((e) => {
    const k = e.start.slice(0, 10);
    const arr = grouped.get(k) ?? [];
    arr.push(e);
    grouped.set(k, arr);
  });

  // Bulk-edit state. Only rows with source === "event" can be bulk updated
  // because they're the only ones backed by the editable `events` table.
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [bulkType, setBulkType] = useState<string>("");
  const [bulkAssignee, setBulkAssignee] = useState<string>("");
  const [applying, setApplying] = useState(false);

  const editableUpcoming = upcoming.filter((e) => e.source === "event");
  const allEditableSelected =
    editableUpcoming.length > 0 && editableUpcoming.every((e) => selected.has(e.id));

  const toggleOne = (id: string) => {
    setSelected((s) => {
      const n = new Set(s);
      if (n.has(id)) n.delete(id);
      else n.add(id);
      return n;
    });
  };
  const toggleAll = () => {
    if (allEditableSelected) setSelected(new Set());
    else setSelected(new Set(editableUpcoming.map((e) => e.id)));
  };

  const applyBulk = async () => {
    if (selected.size === 0) {
      toast.error("Select at least one event");
      return;
    }
    if (!bulkType && !bulkAssignee) {
      toast.error("Choose a category or assignee to update");
      return;
    }
    setApplying(true);
    const patch: { event_type?: string; assigned_to?: string } = {};
    if (bulkType) patch.event_type = bulkType;
    if (bulkAssignee) patch.assigned_to = bulkAssignee;
    const { error } = await supabase
      .from("events")
      .update(patch)
      .in("id", Array.from(selected));
    setApplying(false);
    if (error) {
      toast.error(error.message);
      return;
    }
    toast.success(`Updated ${selected.size} event${selected.size === 1 ? "" : "s"}`);
    setSelected(new Set());
    setBulkType("");
    setBulkAssignee("");
    await onBulkUpdated();
  };

  if (upcoming.length === 0)
    return <p className="text-sm text-muted-foreground py-8 text-center">No upcoming events.</p>;

  return (
    <div className="space-y-4">
      {/* Bulk action toolbar */}
      <div className="flex flex-wrap items-center gap-2 border rounded-md p-2 bg-muted/30">
        <label className="flex items-center gap-2 text-xs cursor-pointer pl-1">
          <Checkbox
            checked={allEditableSelected}
            onCheckedChange={toggleAll}
            disabled={editableUpcoming.length === 0}
          />
          <span className="text-muted-foreground">
            {selected.size > 0 ? `${selected.size} selected` : "Select all"}
          </span>
        </label>
        <div className="h-5 w-px bg-border mx-1" />
        <Select value={bulkType} onValueChange={setBulkType}>
          <SelectTrigger className="h-8 w-[170px] text-xs">
            <SelectValue placeholder="Set category…" />
          </SelectTrigger>
          <SelectContent>
            {EVENT_TYPES.map((t) => (
              <SelectItem key={t.key} value={t.key}>
                <span className="flex items-center gap-2">
                  <span className={cn("h-2.5 w-2.5 rounded-full", t.bg)} />
                  {t.label}
                </span>
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Select value={bulkAssignee} onValueChange={setBulkAssignee}>
          <SelectTrigger className="h-8 w-[180px] text-xs">
            <SelectValue placeholder="Assign to…" />
          </SelectTrigger>
          <SelectContent>
            {staff.map((s) => (
              <SelectItem key={s.id} value={s.id}>
                {s.full_name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Button
          size="sm"
          onClick={applyBulk}
          disabled={applying || selected.size === 0 || (!bulkType && !bulkAssignee)}
        >
          {applying ? "Applying…" : "Apply"}
        </Button>
        {selected.size > 0 && (
          <Button size="sm" variant="ghost" onClick={() => setSelected(new Set())}>
            Clear
          </Button>
        )}
      </div>

      {Array.from(grouped.entries()).map(([day, evts]) => (
        <div key={day}>
          <h4 className="font-serif text-sm font-semibold mb-2">
            {format(parseISO(`${day}T00:00:00`), "EEEE, MMMM d, yyyy")}
          </h4>
          <ul className="space-y-2">
            {evts.map((e) => (
              <li key={`${e.source}-${e.id}`} className="flex items-start gap-2">
                {e.source === "event" ? (
                  <Checkbox
                    className="mt-3 ml-1"
                    checked={selected.has(e.id)}
                    onCheckedChange={() => toggleOne(e.id)}
                  />
                ) : (
                  <span className="w-4 ml-1" />
                )}
                <div className="flex-1 min-w-0">
                  <EventRow evt={e} onEdit={onEdit} />
                </div>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

function EventRow({
  evt,
  showDate,
  onEdit,
}: {
  evt: Evt;
  showDate?: boolean;
  onEdit?: (e: Evt) => void;
}) {
  const meta = typeMeta(evt.event_type);
  const Icon = evt.source === "task" ? CheckSquare : Briefcase;
  const content = (
    <div className="flex items-start gap-3 px-3 py-2 rounded-md border bg-card hover:bg-accent/40 transition-colors">
      <span className={cn("h-2.5 w-2.5 rounded-full mt-1.5 shrink-0", meta.bg)} />
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2 flex-wrap">
          <Icon className="h-3.5 w-3.5 text-muted-foreground" />
          <span className="text-sm font-medium truncate">{evt.title}</span>
          <Badge variant="outline" className="text-[10px] py-0">
            {meta.label}
          </Badge>
        </div>
        <div className="text-xs text-muted-foreground flex items-center gap-3 flex-wrap mt-0.5">
          {showDate && <span>{formatInEST(evt.start, "EEE, MMM d")}</span>}
          {!evt.all_day && <span>{formatInEST(evt.start, "h:mm a")} EST</span>}
          {evt.all_day && <span>All day</span>}
          {evt.case_label && <span className="truncate">· {evt.case_label}</span>}
          {evt.client_label && !evt.case_label && (
            <span className="truncate">· {evt.client_label}</span>
          )}
          {evt.owner_name && <span>· {evt.owner_name}</span>}
          {evt.location && (
            <span className="flex items-center gap-1">
              · <MapPin className="h-3 w-3" /> {evt.location}
            </span>
          )}
        </div>
      </div>
    </div>
  );
  // For real "event" rows, clicking opens the edit dialog (preferred over case nav).
  if (evt.source === "event" && onEdit) {
    return (
      <li>
        <button
          type="button"
          onClick={() => onEdit(evt)}
          className="w-full text-left"
        >
          {content}
        </button>
      </li>
    );
  }
  if (evt.case_id) {
    return (
      <li>
        <Link to="/cases/$caseId" params={{ caseId: evt.case_id }}>
          {content}
        </Link>
      </li>
    );
  }
  return <li>{content}</li>;
}