"use client";

/**
 * CalendarView — month grid for CALENDAR views.
 *
 * The date source is view.config: the view's *group* property when it is a
 * date (calendar views group by date), else config.datePropertyId, else the
 * first date property. Each day shows record dots; clicking a day opens a
 * side list of that day's records; record click → panel. Prev/next/today
 * navigation; records are matched client-side over the loaded pages (the
 * query engine remains server-side).
 */
import { useMemo, useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  DatabaseProperty,
  DatabaseView,
  RecordDto,
  UseDatabaseRecordsResult,
  valueToText
} from "@/hooks/use-database";
import { formatDateValue } from "@/components/database/cell-renderer";

export interface CalendarProps {
  databaseId: string;
  view: DatabaseView;
  properties: DatabaseProperty[];
  records: UseDatabaseRecordsResult;
  onOpenRecord: (record: RecordDto) => void;
}

/** UTC date → "YYYY-MM-DD". */
function dayKey(d: Date): string {
  return d.toISOString().slice(0, 10);
}

function recordDay(record: RecordDto, dateProp: DatabaseProperty): string | null {
  const start = record.properties[dateProp.id]?.start;
  return start ? start.slice(0, 10) : null;
}

export function CalendarView({ view, properties, records, onOpenRecord }: CalendarProps) {
  const { data, isLoading } = records;
  const [cursor, setCursor] = useState(() => {
    const now = new Date();
    return new Date(Date.UTC(now.getFullYear(), now.getMonth(), 1));
  });
  const [selectedDay, setSelectedDay] = useState<string | null>(null);

  const dateProp = useMemo<DatabaseProperty | undefined>(() => {
    const groupProp = view.group?.[0] ? properties.find((p) => p.id === view.group[0].propertyId) : undefined;
    if (groupProp && groupProp.type === "date") return groupProp;
    if (view.config.datePropertyId) {
      const p = properties.find((x) => x.id === view.config.datePropertyId);
      if (p) return p;
    }
    return properties.find((p) => p.type === "date");
  }, [view.group, view.config.datePropertyId, properties]);

  const titleProp = properties.find((p) => p.isTitle);

  // ---- month grid ------------------------------------------------------------
  const days = useMemo(() => {
    const year = cursor.getUTCFullYear();
    const month = cursor.getUTCMonth();
    const firstWeekday = new Date(Date.UTC(year, month, 1)).getUTCDay(); // 0=Sun
    const daysInMonth = new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
    const cells: (Date | null)[] = [];
    for (let i = 0; i < firstWeekday; i++) cells.push(null);
    for (let d = 1; d <= daysInMonth; d++) cells.push(new Date(Date.UTC(year, month, d)));
    while (cells.length % 7 !== 0) cells.push(null);
    return cells;
  }, [cursor]);

  // ---- records per day (over loaded pages) ------------------------------------
  const byDay = useMemo(() => {
    const map = new Map<string, RecordDto[]>();
    if (!dateProp) return map;
    for (const r of data.records) {
      const k = recordDay(r, dateProp);
      if (!k) continue;
      const arr = map.get(k) ?? [];
      arr.push(r);
      map.set(k, arr);
    }
    return map;
  }, [data.records, dateProp]);

  const todayKey = dayKey(new Date());
  const monthLabel = cursor.toLocaleDateString("en-US", {
    timeZone: "UTC",
    month: "long",
    year: "numeric"
  });

  const move = (delta: number) =>
    setCursor((c) => new Date(Date.UTC(c.getUTCFullYear(), c.getUTCMonth() + delta, 1)));

  const selectedRecords = selectedDay ? byDay.get(selectedDay) ?? [] : [];

  if (!dateProp) {
    return (
      <div className="flex h-full items-center justify-center p-6 text-center text-sm text-muted-foreground">
        This calendar needs a date property. Set the view's group to a date property (or add one).
      </div>
    );
  }

  return (
    <div className="flex h-full">
      <div className="flex min-w-0 flex-1 flex-col p-3">
        {/* header */}
        <div className="mb-2 flex items-center gap-2">
          <h3 className="text-sm font-medium">{monthLabel}</h3>
          <div className="ml-auto flex items-center gap-1">
            <button type="button" className="rounded p-1 text-muted-foreground hover:bg-muted" onClick={() => move(-1)} aria-label="Previous month">
              <ChevronLeft className="size-4" />
            </button>
            <button
              type="button"
              className="rounded border px-2 py-0.5 text-xs hover:bg-muted"
              onClick={() => {
                const now = new Date();
                setCursor(new Date(Date.UTC(now.getFullYear(), now.getMonth(), 1)));
                setSelectedDay(dayKey(now));
              }}
            >
              Today
            </button>
            <button type="button" className="rounded p-1 text-muted-foreground hover:bg-muted" onClick={() => move(1)} aria-label="Next month">
              <ChevronRight className="size-4" />
            </button>
          </div>
        </div>

        {/* grid */}
        <div className="min-h-0 flex-1 overflow-y-auto">
          <div className="grid grid-cols-7 border-b border-border text-[11px] text-muted-foreground">
            {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((d) => (
              <div key={d} className="py-1 text-center">
                {d}
              </div>
            ))}
          </div>
          <div className="grid grid-cols-7">
            {days.map((d, i) => {
              if (!d) return <div key={i} className="min-h-16 border-b border-r border-border/40 bg-muted/20" />;
              const k = dayKey(d);
              const dayRecords = byDay.get(k) ?? [];
              return (
                <button
                  key={i}
                  type="button"
                  className={cn(
                    "min-h-16 border-b border-r border-border/40 p-1 text-left align-top hover:bg-muted/40",
                    k === selectedDay && "bg-primary/10",
                    k === todayKey && "ring-1 ring-inset ring-primary/40"
                  )}
                  onClick={() => setSelectedDay(k)}
                  aria-label={`Day ${d.getUTCDate()}, ${dayRecords.length} records`}
                >
                  <span
                    className={cn(
                      "inline-flex size-5 items-center justify-center rounded-full text-[11px]",
                      k === todayKey && "bg-primary text-primary-foreground"
                    )}
                  >
                    {d.getUTCDate()}
                  </span>
                  <div className="mt-0.5 flex flex-wrap gap-0.5">
                    {dayRecords.slice(0, 5).map((r) => (
                      <span key={r.id} className="size-1.5 rounded-full bg-primary/70" title={titleProp ? valueToText(r.properties[titleProp.id], titleProp) : r.id} />
                    ))}
                    {dayRecords.length > 5 && (
                      <span className="text-[10px] text-muted-foreground">+{dayRecords.length - 5}</span>
                    )}
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      </div>

      {/* side list for selected day */}
      {selectedDay && (
        <aside className="flex w-72 shrink-0 flex-col border-l border-border">
          <div className="border-b border-border px-3 py-2 text-xs font-medium">
            {formatDateValue(`${selectedDay}T00:00:00Z`)} · {selectedRecords.length} record(s)
          </div>
          <div className="min-h-0 flex-1 overflow-y-auto">
            {isLoading && <div className="p-3 text-xs text-muted-foreground">Loading…</div>}
            {selectedRecords.length === 0 && !isLoading && (
              <p className="p-3 text-xs text-muted-foreground">No records on this day.</p>
            )}
            {selectedRecords.map((r) => (
              <button
                key={r.id}
                type="button"
                className="flex w-full items-center gap-2 border-b border-border/40 px-3 py-1.5 text-left text-sm hover:bg-muted/50"
                onClick={() => onOpenRecord(r)}
              >
                <span className="w-4 text-center" aria-hidden>
                  {r.icon ?? "•"}
                </span>
                <span className="truncate">
                  {titleProp ? valueToText(r.properties[titleProp.id], titleProp) || "Untitled" : r.id.slice(-6)}
                </span>
              </button>
            ))}
          </div>
        </aside>
      )}
    </div>
  );
}