"use client";

import { useState, useCallback, useRef, useEffect } from "react";
import { useQuery } from "@tanstack/react-query";
import { format } from "date-fns";
import { Plus, ChevronDown, ChevronRight, Image, MessageSquare, Loader2, Clapperboard } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import type { TakeQuality } from "@prisma/client";

// ─── Types ───────────────────────────────────────────────────────────────────

export interface TakeSummary {
  id: string;
  takeNumber: number;
  clipName: string | null;
  quality: TakeQuality;
  supervisorNotes: string | null;
  continuityNotes: string | null;
  vfxRequirements: string | null;
  _count: { attachments: number };
}

export interface SetupWithTakes {
  id: string;
  name: string;
  description: string | null;
  sortOrder: number;
  takes: TakeSummary[];
}

export interface ShootDayWithSetups {
  id: string;
  date: string;
  unit: string;
  label: string | null;
  setups: SetupWithTakes[];
}

// ─── Quality helpers ──────────────────────────────────────────────────────────

const QUALITY_DOT: Record<TakeQuality, string> = {
  HERO: "bg-green-400",
  GOOD: "bg-blue-400",
  PRINT: "bg-amber-400",
  NO_GOOD: "bg-red-500",
  FALSE_START: "bg-zinc-500",
};

const QUALITY_LABEL: Record<TakeQuality, string> = {
  HERO: "Hero",
  GOOD: "Good",
  PRINT: "Print",
  NO_GOOD: "NG",
  FALSE_START: "FS",
};

// ─── Component ───────────────────────────────────────────────────────────────

interface Props {
  projectId: string;
  selectedTakeId: string | null;
  onSelectTake: (takeId: string, setupId: string) => void;
  onNewDay: () => void;
  onNewSetup: (dayId: string) => void;
  onNewTake: (setupId: string) => void;
  /** When set, auto-expands this day ID (e.g. after creation) */
  expandDayId?: string | null;
}

export function TakeListPanel({
  projectId,
  selectedTakeId,
  onSelectTake,
  onNewDay,
  onNewSetup,
  onNewTake,
  expandDayId,
}: Props) {
  const [expandedDays, setExpandedDays] = useState<Set<string>>(new Set());
  const [expandedSetups, setExpandedSetups] = useState<Set<string>>(new Set());
  const autoExpandedRef = useRef(false);

  const { data, isLoading } = useQuery<{ days: ShootDayWithSetups[] }>({
    queryKey: ["shoot-log-days", projectId],
    queryFn: async () => {
      const res = await fetch(`/api/shoot-log/days?projectId=${projectId}`);
      if (!res.ok) throw new Error("Failed to load days");
      return res.json();
    },
    enabled: !!projectId,
    staleTime: 0,
  });

  const days = data?.days ?? [];

  const toggleDay = useCallback((id: string) => {
    setExpandedDays((prev) => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  }, []);

  const toggleSetup = useCallback((id: string) => {
    setExpandedSetups((prev) => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  }, []);

  // Auto-expand the first day/setup on first load
  useEffect(() => {
    if (!autoExpandedRef.current && days.length > 0) {
      autoExpandedRef.current = true;
      const firstDay = days[0];
      setExpandedDays(new Set([firstDay.id]));
      if (firstDay.setups.length > 0) {
        setExpandedSetups(new Set([firstDay.setups[0].id]));
      }
    }
  }, [days]);

  // Expand a specific day when requested (e.g. after creation)
  useEffect(() => {
    if (!expandDayId) return;
    setExpandedDays((prev) => new Set([...prev, expandDayId]));
    // Also expand the first setup within that day if present
    const day = days.find((d) => d.id === expandDayId);
    if (day?.setups[0]) {
      setExpandedSetups((prev) => new Set([...prev, day.setups[0].id]));
    }
  }, [expandDayId]); // eslint-disable-line react-hooks/exhaustive-deps

  const hasNotes = (take: TakeSummary) =>
    !!(take.supervisorNotes || take.continuityNotes || take.vfxRequirements);

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="px-3 py-3 border-b border-zinc-800 flex items-center justify-between gap-2 shrink-0">
        <span className="text-xs font-semibold text-zinc-400 uppercase tracking-wider">
          Shoot Days
        </span>
        <Button size="icon-sm" variant="ghost" onClick={onNewDay} title="New Shoot Day">
          <Plus className="h-4 w-4" />
        </Button>
      </div>

      {/* List */}
      <div className="flex-1 overflow-y-auto">
        {isLoading ? (
          <div className="flex justify-center py-8">
            <Loader2 className="h-5 w-5 animate-spin text-zinc-500" />
          </div>
        ) : days.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-12 px-4 text-center gap-3">
            <Clapperboard className="h-8 w-8 text-zinc-600" />
            <p className="text-sm text-zinc-500">No shoot days yet.</p>
            <Button size="sm" variant="outline" onClick={onNewDay}>
              <Plus className="h-3 w-3 mr-1" />
              New Shoot Day
            </Button>
          </div>
        ) : (
          <div className="py-2">
            {days.map((day) => {
              const dayOpen = expandedDays.has(day.id);
              const takeCount = day.setups.reduce((s, set) => s + set.takes.length, 0);
              return (
                <div key={day.id}>
                  {/* Day row */}
                  <button
                    onClick={() => toggleDay(day.id)}
                    className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-zinc-800/60 transition-colors group"
                  >
                    {dayOpen ? (
                      <ChevronDown className="h-3.5 w-3.5 text-zinc-500 shrink-0" />
                    ) : (
                      <ChevronRight className="h-3.5 w-3.5 text-zinc-500 shrink-0" />
                    )}
                    <div className="flex-1 min-w-0">
                      <div className="text-xs font-semibold text-zinc-200 truncate">
                        {format(new Date(day.date), "EEE d MMM yyyy")}
                        {day.unit && day.unit !== "A" && (
                          <span className="ml-1 text-zinc-500">· Unit {day.unit}</span>
                        )}
                      </div>
                      {day.label && (
                        <div className="text-[11px] text-zinc-500 truncate">{day.label}</div>
                      )}
                    </div>
                    <span className="text-[10px] text-zinc-600 shrink-0">{takeCount}t</span>
                    <Button
                      size="icon-sm"
                      variant="ghost"
                      className="h-6 w-6 opacity-0 group-hover:opacity-100 shrink-0"
                      onClick={(e) => {
                        e.stopPropagation();
                        onNewSetup(day.id);
                      }}
                      title="New Setup"
                    >
                      <Plus className="h-3 w-3" />
                    </Button>
                  </button>

                  {/* Setups */}
                  {dayOpen && (
                    <div>
                      {day.setups.length === 0 ? (
                        <div className="pl-8 pr-3 py-1">
                          <button
                            onClick={() => onNewSetup(day.id)}
                            className="text-[11px] text-zinc-600 hover:text-zinc-400 transition-colors"
                          >
                            + Add setup
                          </button>
                        </div>
                      ) : (
                        day.setups.map((setup) => {
                          const setupOpen = expandedSetups.has(setup.id);
                          return (
                            <div key={setup.id}>
                              {/* Setup row */}
                              <button
                                onClick={() => toggleSetup(setup.id)}
                                className="w-full flex items-center gap-2 pl-6 pr-3 py-1.5 text-left hover:bg-zinc-800/40 transition-colors group"
                              >
                                {setupOpen ? (
                                  <ChevronDown className="h-3 w-3 text-zinc-600 shrink-0" />
                                ) : (
                                  <ChevronRight className="h-3 w-3 text-zinc-600 shrink-0" />
                                )}
                                <span className="flex-1 text-xs font-medium text-zinc-300 truncate">
                                  Setup {setup.name}
                                </span>
                                <span className="text-[10px] text-zinc-600 shrink-0">
                                  {setup.takes.length}t
                                </span>
                                <Button
                                  size="icon-sm"
                                  variant="ghost"
                                  className="h-5 w-5 opacity-0 group-hover:opacity-100 shrink-0"
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    onNewTake(setup.id);
                                  }}
                                  title="New Take"
                                >
                                  <Plus className="h-3 w-3" />
                                </Button>
                              </button>

                              {/* Takes */}
                              {setupOpen && (
                                <div>
                                  {setup.takes.map((take) => (
                                    <button
                                      key={take.id}
                                      onClick={() => onSelectTake(take.id, setup.id)}
                                      className={cn(
                                        "w-full flex items-center gap-2 pl-10 pr-3 py-2 text-left transition-colors",
                                        selectedTakeId === take.id
                                          ? "bg-amber-500/10 text-amber-300"
                                          : "hover:bg-zinc-800/40 text-zinc-300"
                                      )}
                                    >
                                      {/* Quality dot */}
                                      <span
                                        className={cn(
                                          "h-2 w-2 rounded-full shrink-0",
                                          QUALITY_DOT[take.quality]
                                        )}
                                      />
                                      {/* Take number */}
                                      <span className="text-[11px] font-mono text-zinc-500 w-5 shrink-0">
                                        T{take.takeNumber}
                                      </span>
                                      {/* Clip name */}
                                      <span
                                        className={cn(
                                          "flex-1 text-xs truncate",
                                          selectedTakeId === take.id
                                            ? "text-amber-200"
                                            : "text-zinc-300"
                                        )}
                                      >
                                        {take.clipName ?? (
                                          <span className="text-zinc-600 italic">No clip name</span>
                                        )}
                                      </span>
                                      {/* Indicators */}
                                      <div className="flex items-center gap-1 shrink-0">
                                        {hasNotes(take) && (
                                          <MessageSquare className="h-3 w-3 text-zinc-500" />
                                        )}
                                        {take._count.attachments > 0 && (
                                          <span className="flex items-center gap-0.5 text-[10px] text-zinc-500">
                                            <Image className="h-3 w-3" />
                                            {take._count.attachments}
                                          </span>
                                        )}
                                      </div>
                                    </button>
                                  ))}
                                  {/* Add take button */}
                                  <button
                                    onClick={() => onNewTake(setup.id)}
                                    className="w-full pl-10 pr-3 py-1.5 text-left text-[11px] text-zinc-600 hover:text-zinc-400 transition-colors"
                                  >
                                    + New take
                                  </button>
                                </div>
                              )}
                            </div>
                          );
                        })
                      )}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}