"use client";

import { useState, useEffect, useMemo } from "react";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import { WeekTabs } from "@/components/canvas";
import { ExportAllButton } from "@/components/pdf";
import { UserMenu, useAuth } from "@/components/auth";
import { getCanvasesByDay, getDaysForWeek } from "@/lib/canvas-data";
import { createClient } from "@/lib/supabase/client";
import { ArrowLeft } from "lucide-react";
import type { Week, CanvasTemplate, CanvasStatus } from "@/lib/types";
import type { Team } from "@/lib/supabase/types";
import { AdminDaySection } from "./AdminDaySection";

export default function AdminTeamView() {
  const params = useParams();
  const router = useRouter();
  const searchParams = useSearchParams();
  const teamId = params.teamId as string;

  // Get initial week from URL parameter
  const initialWeek = useMemo((): Week => {
    const weekParam = searchParams.get("week");
    if (weekParam) {
      const weekNum = parseInt(weekParam, 10);
      if (weekNum === 1 || weekNum === 2 || weekNum === 3) {
        return weekNum as Week;
      }
    }
    return 1;
  }, [searchParams]);

  const [activeWeek, setActiveWeek] = useState<Week>(initialWeek);
  const [viewingTeam, setViewingTeam] = useState<Team | null>(null);
  const [isLoadingTeam, setIsLoadingTeam] = useState(true);
  const [canvasStatuses, setCanvasStatuses] = useState<Record<string, CanvasStatus>>({});

  const { isAdmin, isLoading: authLoading, lockedWeeks } = useAuth();
  const supabase = createClient();

  // Sync week when URL changes (e.g., browser back/forward)
  useEffect(() => {
    setActiveWeek(initialWeek);
  }, [initialWeek]);

  const days = getDaysForWeek(activeWeek);

  // Fetch the team being viewed
  useEffect(() => {
    async function fetchTeam() {
      if (!teamId) return;

      setIsLoadingTeam(true);
      const { data, error } = await supabase
        .from("teams")
        .select("*")
        .eq("id", teamId)
        .single();

      if (error) {
        console.error("Error fetching team:", error);
        router.push("/admin");
        return;
      }

      setViewingTeam(data);
      setIsLoadingTeam(false);
    }

    // Fetch canvas statuses
    async function fetchStatuses() {
      if (!teamId) return;
      // We can use canvasDB.getAll here similar to HomePage logic
      // Need to import canvasDB
      const { data } = (await supabase
        .from("canvas_data")
        .select("canvas_id, metadata")
        .eq("team_id", teamId)) as {
          data: { canvas_id: string; metadata: any }[] | null;
        };

      if (data) {
        const statuses: Record<string, CanvasStatus> = {};
        data.forEach((row) => {
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          const metadata = row.metadata as any;
          if (metadata?.status) {
            statuses[row.canvas_id] = metadata.status;
          }
        });
        setCanvasStatuses(statuses);
      }
    }

    fetchTeam();
    fetchStatuses();

    // Subscribe to changes
    const channel = supabase
      .channel('admin-canvas-updates')
      .on(
        'postgres_changes',
        {
          event: '*',
          schema: 'public',
          table: 'canvas_data',
          filter: `team_id=eq.${teamId}`,
        },
        (payload) => {
          if (payload.new && 'metadata' in payload.new) {
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            const newRecord = payload.new as any;
            if (newRecord.metadata?.status) {
              setCanvasStatuses((prev) => ({
                ...prev,
                [newRecord.canvas_id]: newRecord.metadata.status,
              }));
            }
          }
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [teamId, supabase, router]);

  // Redirect non-admins
  useEffect(() => {
    if (!authLoading && !isAdmin) {
      router.push("/");
    }
  }, [isAdmin, authLoading, router]);

  if (authLoading || isLoadingTeam) {
    return (
      <div className="min-h-screen bg-[#f3f4f6] flex items-center justify-center">
        <div className="text-center">
          <div className="animate-pulse">
            <div className="h-8 w-48 bg-gray-200 rounded mb-4 mx-auto"></div>
            <div className="h-4 w-32 bg-gray-200 rounded mx-auto"></div>
          </div>
        </div>
      </div>
    );
  }

  if (!isAdmin || !viewingTeam) {
    return null;
  }

  return (
    <div className="min-h-screen bg-[#f3f4f6]">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div className="max-w-[1066px] mx-auto px-6 lg:px-0 py-3 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Link
              href="/admin"
              className="flex items-center gap-1 text-sm text-[#4a5565] hover:text-[#0a0a0a] transition-colors"
            >
              <ArrowLeft className="w-4 h-4" />
              Retour
            </Link>
            <span className="text-gray-300">|</span>
            <span className="text-sm font-medium text-[#0a0a0a]">
              Programme Pionniers
            </span>
            <span className="px-2 py-1 bg-purple-50 text-purple-700 text-xs font-medium rounded">
              Admin
            </span>
            <span className="px-2 py-1 bg-blue-50 text-blue-700 text-xs font-medium rounded">
              {viewingTeam.name}
            </span>
          </div>
          <UserMenu />
        </div>
      </header>

      <main className="max-w-[1066px] mx-auto px-6 lg:px-0 pt-12 pb-8">
        {/* Hero Section */}
        <div className="text-center mb-10">
          <h1 className="text-[48px] font-normal text-[#0a0a0a] mb-4 tracking-[1.5px] leading-[48px]">
            CANEVAS D&apos;ATELIER
          </h1>
          <p className="text-[18px] text-[#4a5565] mb-2 leading-[28px] tracking-[-0.44px]">
            {viewingTeam.name}
          </p>
          <p className="text-[14px] text-[#6a7282] leading-[20px] tracking-[-0.15px]">
            31 canevas A3 paysage
          </p>
        </div>

        {/* Week Tabs */}
        <div className="flex items-center justify-center gap-4 mb-10">
          <WeekTabs
            activeWeek={activeWeek}
            onWeekChange={setActiveWeek}
            lockedWeeks={lockedWeeks}
            isAdmin={true}
          />
        </div>

        {/* Canvas Grid by Day */}
        <div className="space-y-10">
          {days.map((day) => {
            const dayCanvases = getCanvasesByDay(activeWeek, day);
            // For weeks 2 and 3, skip days with no canvases
            // For week 1, show empty day sections
            if (activeWeek !== 1 && dayCanvases.length === 0) return null;
            return (
              <AdminDaySection
                key={`${activeWeek}-${day}`}
                week={activeWeek}
                day={day}
                canvases={dayCanvases}
                teamId={teamId}
                canvasStatuses={canvasStatuses}
              />
            );
          })}
        </div>

        {/* Print All Button */}
        <div className="flex flex-col items-center mt-16">
          <ExportAllButton teamId={teamId} />
          <p className="mt-4 text-[14px] text-[#4a5565] tracking-[-0.15px]">
            Tous les canevas sont optimisés pour l&apos;impression A3 paysage
          </p>
        </div>

        {/* Footer Info */}
        <footer className="mt-12 text-center">
          <p className="text-[12px] text-[#6a7282] leading-[16px]">
            © Mathieu Aguesse 2026 — Tous droits réservés
          </p>
        </footer>
      </main>
    </div>
  );
}