"use client";

import { clsx } from "clsx";
import { useEffect, useRef, useState } from "react";
import { AllocationStatus } from "@planarchy/shared";
import { trpc } from "~/lib/trpc/client.js";
import { DateInput } from "~/components/ui/DateInput.js";

interface NewAllocationPopoverProps {
  resourceId: string;
  startDate: Date;
  endDate: Date;
  /** Pre-selected project (from project-view sub-row context) */
  suggestedProjectId?: string | null;
  anchorX: number;
  anchorY: number;
  onClose: () => void;
  onCreated: () => void;
}

function toDateInput(d: Date): string {
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");
  return `${y}-${m}-${day}`;
}

export function NewAllocationPopover({
  resourceId,
  startDate,
  endDate,
  suggestedProjectId,
  anchorX,
  anchorY,
  onClose,
  onCreated,
}: NewAllocationPopoverProps) {
  const ref = useRef<HTMLDivElement>(null);
  const utils = trpc.useUtils();

  const [search, setSearch] = useState("");
  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(
    suggestedProjectId ?? null,
  );
  const [role, setRole] = useState("Team Member");
  const [hoursPerDay, setHoursPerDay] = useState(8);
  const [start, setStart] = useState(toDateInput(startDate));
  const [end, setEnd] = useState(toDateInput(endDate));
  const [dropdownOpen, setDropdownOpen] = useState(!suggestedProjectId);

  const { data: projectsData } = trpc.project.list.useQuery(
    { search, limit: 20 },
    { staleTime: 30_000 },
  );

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const projects = (projectsData?.projects ?? []) as Array<{ id: string; name: string; orderType?: string }>;
  const selectedProject = projects.find((p) => p.id === selectedProjectId)
    ?? (suggestedProjectId ? projects.find((p) => p.id === suggestedProjectId) : null);

  const createMutation = trpc.timeline.quickAssign.useMutation({
    onSuccess: () => {
      void utils.timeline.getEntries.invalidate();
      void utils.timeline.getEntriesView.invalidate();
      void utils.timeline.getProjectContext.invalidate();
      void utils.timeline.getBudgetStatus.invalidate();
      onCreated();
      onClose();
    },
  });

  // Close on outside click
  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        onClose();
      }
    }
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, [onClose]);

  function handleCreate() {
    if (!selectedProjectId) return;
    createMutation.mutate({
      resourceId,
      projectId: selectedProjectId,
      startDate: new Date(start),
      endDate: new Date(end),
      hoursPerDay,
      role,
      status: AllocationStatus.PROPOSED,
    });
  }

  const canCreate = !!selectedProjectId && !!start && !!end && hoursPerDay > 0;

  const left = Math.min(anchorX - 10, typeof window !== "undefined" ? window.innerWidth - 340 : anchorX);
  const top = Math.min(anchorY + 8, typeof window !== "undefined" ? window.innerHeight - 440 : anchorY);

  return (
    <div
      ref={ref}
      style={{ position: "fixed", left, top, zIndex: 60, width: 320 }}
      className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-2xl dark:shadow-black/40 overflow-hidden"
    >
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-gray-900 border-b border-gray-100 dark:border-gray-700">
        <span className="text-sm font-semibold text-gray-700 dark:text-gray-200">Assign to Project</span>
        <button onClick={onClose} className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 text-lg leading-none">&times;</button>
      </div>

      <div className="p-4 space-y-3">
        {/* Date range */}
        <div className="grid grid-cols-2 gap-2">
          <div>
            <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Start</label>
            <DateInput
              value={start}
              onChange={setStart}
              className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
            />
          </div>
          <div>
            <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">End</label>
            <DateInput
              value={end}
              onChange={setEnd}
              min={start}
              className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
            />
          </div>
        </div>

        {/* Project picker */}
        <div>
          <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Project</label>
          {selectedProject && !dropdownOpen ? (
            <div
              className="flex items-center gap-2 border border-brand-300 dark:border-sky-700 rounded-lg px-3 py-2 cursor-pointer bg-brand-50 dark:bg-sky-950/30"
              onClick={() => { setDropdownOpen(true); setSearch(""); }}
            >
              <span className="text-sm text-gray-800 dark:text-gray-200 truncate flex-1">{selectedProject.name}</span>
              <span className="text-xs text-gray-400 dark:text-gray-500">▾</span>
            </div>
          ) : (
            <div className="relative">
              <input
                autoFocus={dropdownOpen}
                type="text"
                placeholder="Search projects…"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                onFocus={() => setDropdownOpen(true)}
                className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
              />
              {dropdownOpen && projects.length > 0 && (
                <div className="absolute top-full left-0 right-0 z-50 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg dark:shadow-black/40 mt-1 max-h-44 overflow-y-auto">
                  {projects.map((p) => (
                    <button
                      key={p.id}
                      type="button"
                      onClick={() => { setSelectedProjectId(p.id); setDropdownOpen(false); setSearch(""); }}
                      className="w-full text-left px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2 border-b border-gray-50 dark:border-gray-700 last:border-0"
                    >
                      <span className="text-sm text-gray-800 dark:text-gray-200 truncate">{p.name}</span>
                    </button>
                  ))}
                </div>
              )}
            </div>
          )}
        </div>

        {/* Role */}
        <div>
          <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Role</label>
          <input
            type="text"
            value={role}
            onChange={(e) => setRole(e.target.value)}
            className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
          />
        </div>

        {/* Hours per day */}
        <div>
          <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Hours / day</label>
          <div className="flex items-center gap-2">
            <input
              type="number"
              min={0.5}
              max={24}
              step={0.5}
              value={hoursPerDay}
              onChange={(e) => setHoursPerDay(parseFloat(e.target.value))}
              className="w-24 border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
            />
            <div className="flex gap-1">
              {[4, 6, 8].map((h) => (
                <button
                  key={h}
                  type="button"
                  onClick={() => setHoursPerDay(h)}
                  className={clsx(
                    "px-2 py-1 rounded text-xs font-medium border transition-colors",
                    hoursPerDay === h
                      ? "bg-brand-600 text-white border-brand-600"
                      : "border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700",
                  )}
                >
                  {h}h
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* Overbooking notice */}
        <p className="text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-3 py-2 rounded-lg">
          Overlapping allocations are allowed — resource may be overbooked.
        </p>

        {/* Error */}
        {createMutation.isError && (
          <p className="text-xs text-red-600 dark:text-red-400">{createMutation.error.message}</p>
        )}

        {/* Actions */}
        <div className="flex gap-2 pt-1">
          <button
            onClick={handleCreate}
            disabled={!canCreate || createMutation.isPending}
            className={clsx(
              "flex-1 py-2 rounded-lg text-sm font-medium transition-colors",
              "bg-brand-600 text-white hover:bg-brand-700 disabled:opacity-40 disabled:cursor-not-allowed",
            )}
          >
            {createMutation.isPending ? "Creating…" : "Assign"}
          </button>
          <button
            onClick={onClose}
            className="flex-1 py-2 rounded-lg text-sm font-medium border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
          >
            Cancel
          </button>
        </div>
      </div>
    </div>
  );
}