"use client";

import { useState, useEffect, useMemo } from "react";
import { useSearchParams } from "next/navigation";
import { WeekTabs, DaySection } from "@/components/canvas";
import { ExportAllButton } from "@/components/pdf";
import { UserMenu, useAuth } from "@/components/auth";
import { getCanvasesByDay, getDaysForWeek } from "@/lib/canvas-data";
import { canvasDB } from "@/lib/db";
import type { Week, CanvasStatus } from "@/lib/types";

export default function HomePage() {
  const searchParams = useSearchParams();

  // 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 [canvasStatuses, setCanvasStatuses] = useState<Record<string, CanvasStatus>>({});
  const { team, isLoading, lockedWeeks, isAdmin } = useAuth();

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

  const days = getDaysForWeek(activeWeek);

  // Fetch canvas statuses
  useEffect(() => {
    async function fetchStatuses() {
      if (!team) return;

      const canvases = await canvasDB.getAll(team.id);
      const statuses: Record<string, CanvasStatus> = {};

      canvases.forEach((c) => {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const metadata = c.metadata as any;
        if (metadata?.status) {
          statuses[c.canvas_id] = metadata.status;
        }
      });

      setCanvasStatuses(statuses);
    }

    fetchStatuses();
  }, [team]);

  // Show loading state while auth is initializing
  if (isLoading) {
    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>
    );
  }

  return (
    <div className="min-h-screen bg-[#f3f4f6]">
      {/* Header with User Menu */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div className="max-w-[1066px] mx-auto px-4 md:px-6 lg:px-0 py-2 md:py-3 flex items-center justify-between">
          <div className="flex items-center gap-2 md:gap-3">
            <span className="text-xs md:text-sm font-medium text-[#0a0a0a]">
              Programme Pionniers
            </span>
            {team && (
              <span className="px-2 py-1 bg-blue-50 text-blue-700 text-xs font-medium rounded hidden sm:inline">
                {team.name}
              </span>
            )}
          </div>
          <UserMenu />
        </div>
      </header>

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

        {/* Week Tabs */}
        <div className="flex items-center justify-center gap-2 md:gap-4 mb-8 md:mb-10">
          <WeekTabs
            activeWeek={activeWeek}
            onWeekChange={setActiveWeek}
            lockedWeeks={lockedWeeks}
            isAdmin={isAdmin}
          />
        </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 (
              <DaySection
                key={`${activeWeek}-${day}`}
                week={activeWeek}
                day={day}
                canvases={dayCanvases}
                canvasStatuses={canvasStatuses}
              />
            );
          })}
        </div>

        {/* Print All Button */}
        <div className="flex flex-col items-center mt-16">
          <ExportAllButton />
          <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>
  );
}