"use client";

import { useEffect, useState, useRef } from "react";
import { useParams, useSearchParams } from "next/navigation";
import Link from "next/link";
import { CanvasViewer } from "@/components/canvas/CanvasViewer";
import { ExportButton } from "@/components/pdf";
import { UserMenu, useAuth } from "@/components/auth";
import { getCanvasById } from "@/lib/canvas-data";
import { useCanvasStore } from "@/lib/store";
import { useAutoSave, useLoadCanvas, useRealtimeCanvas } from "@/lib/hooks";
import { createClient } from "@/lib/supabase/client";
import type { Team } from "@/lib/supabase/types";

export default function CanvasPage() {
  const params = useParams();
  const searchParams = useSearchParams();
  const canvasId = params.id as string;
  const canvasRef = useRef<HTMLDivElement>(null);

  // Get teamId from query params (for admin viewing) or null
  const teamIdOverride = searchParams.get("teamId");

  const { team: authTeam, isLoading: authLoading, isAdmin } = useAuth();
  const canvas = getCanvasById(canvasId);
  const { initializeCanvas, getCanvas, hasUnsavedChanges } = useCanvasStore();

  // For admins viewing another team, fetch that team's info
  const [viewingTeam, setViewingTeam] = useState<Team | null>(null);
  const [isLoadingViewingTeam, setIsLoadingViewingTeam] = useState(!!teamIdOverride);
  const supabase = createClient();

  // Fetch the team being viewed (for admins)
  useEffect(() => {
    async function fetchViewingTeam() {
      if (!teamIdOverride) {
        setViewingTeam(null);
        setIsLoadingViewingTeam(false);
        return;
      }

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

      if (!error && data) {
        setViewingTeam(data);
      }
      setIsLoadingViewingTeam(false);
    }

    fetchViewingTeam();
  }, [teamIdOverride, supabase]);

  // Determine which team to display
  const displayTeam = viewingTeam || authTeam;
  const isAdminViewing = isAdmin && !!teamIdOverride;

  // Auto-save to Supabase with optional team override
  // isAdminContext: true when admin is viewing another team's canvas
  // This prevents falling back to the admin's own team ID
  const { saveNow, isSaving } = useAutoSave(canvasId, {
    teamIdOverride,
    isAdminContext: !!teamIdOverride
  });

  // Load saved data from Supabase with optional team override
  const { isLoading: dataLoading } = useLoadCanvas(canvasId, {
    teamIdOverride,
    isAdminContext: !!teamIdOverride
  });

  // Subscribe to real-time updates for this canvas
  // Use the effective team ID (override for admins, otherwise auth team)
  const effectiveTeamId = teamIdOverride || authTeam?.id || null;
  useRealtimeCanvas(canvasId, { teamIdOverride: effectiveTeamId });

  useEffect(() => {
    if (canvas && !getCanvas(canvasId)) {
      initializeCanvas(canvasId, canvas.templateId, canvas.week, canvas.day, canvas.title);
    }
  }, [canvas, canvasId, getCanvas, initializeCanvas]);

  // Determine back link based on admin status
  // Include week parameter so users return to the correct week
  const backLink = isAdminViewing
    ? `/admin/team/${teamIdOverride}?week=${canvas?.week || 1}`
    : `/?week=${canvas?.week || 1}`;
  const backLabel = isAdminViewing ? "← Retour à l'équipe" : "← Retour";

  // Show loading state
  if (authLoading || dataLoading || isLoadingViewingTeam) {
    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-64 bg-gray-200 rounded mb-4 mx-auto"></div>
            <div className="h-4 w-48 bg-gray-200 rounded mx-auto"></div>
          </div>
          <p className="text-[#6a7282] mt-4">Chargement du canevas...</p>
        </div>
      </div>
    );
  }

  if (!canvas) {
    return (
      <div className="min-h-screen bg-[#f3f4f6] flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-[#0a0a0a] mb-4">
            Canevas non trouvé
          </h1>
          <p className="text-[#4a5565] mb-8">
            Ce canevas n&apos;existe pas ou a été supprimé.
          </p>
          <Link
            href={backLink}
            className="inline-flex items-center px-6 py-3 bg-black text-white font-medium hover:bg-gray-800 transition-colors"
          >
            Retour
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#f3f4f6] flex flex-col">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-10 no-print">
        <div className="max-w-[1200px] mx-auto px-3 md:px-6 py-2 md:py-3 flex items-center justify-between gap-2">
          <div className="flex items-center gap-2 md:gap-4 min-w-0 flex-1">
            <Link
              href={backLink}
              className="text-xs md:text-sm text-[#4a5565] hover:text-[#0a0a0a] transition-colors shrink-0"
            >
              {backLabel}
            </Link>
            <span className="text-gray-300 hidden md:inline">|</span>
            <span className="text-xs md:text-sm font-medium text-[#0a0a0a] truncate hidden md:inline max-w-[300px]">
              {canvas.title}
            </span>
            {isAdminViewing && (
              <span className="px-2 py-1 bg-purple-50 text-purple-700 text-xs font-medium rounded hidden lg:inline">
                Admin
              </span>
            )}
            {displayTeam && (
              <span className="px-2 py-1 bg-blue-50 text-blue-700 text-xs font-medium rounded hidden lg:inline">
                {displayTeam.name}
              </span>
            )}
          </div>
          <div className="flex items-center gap-2 md:gap-3 shrink-0">
            {/* Save indicator */}
            {hasUnsavedChanges && (
              <span className="text-xs text-amber-600 hidden md:inline">
                Modifications non sauvegardées
              </span>
            )}
            {isSaving && (
              <span className="text-xs text-blue-600 hidden md:inline">
                Sauvegarde en cours...
              </span>
            )}
            <UserMenu />
          </div>
        </div>
      </header>

      {/* Canvas Content - Takes full viewport */}
      <main className="flex-1 py-4 md:py-8">
        <div ref={canvasRef} data-canvas-id={canvas.id}>
          <CanvasViewer canvas={canvas} teamName={displayTeam?.name} />
        </div>
      </main>

      {/* Bottom Action Bar - Hidden during print, stacked on mobile */}
      <div className="py-4 md:py-6 flex flex-col md:flex-row items-center justify-center gap-3 md:gap-4 px-4 no-print">
        <Link
          href={backLink}
          className="w-full md:w-auto text-center px-4 md:px-6 py-2 md:py-3 bg-white border-2 border-black text-[#0a0a0a] font-medium text-[14px] md:text-[18px] hover:bg-gray-50 transition-colors"
        >
          {isAdminViewing ? "← Retour à l'équipe" : "← Retour aux canevas"}
        </Link>

        {/* Buttons: Reset and Finish */}
        <button
          onClick={() => {
            if (window.confirm("Êtes-vous sûr de vouloir effacer tout le contenu de ce canevas ? Cette action est irréversible.")) {
              // Reset canvas to template defaults and 'not_started' status
              useCanvasStore.getState().resetCanvas(
                canvas.id,
                canvas.templateId,
                canvas.week,
                canvas.day,
                canvas.title
              );
              // Force save immediately to persist the reset
              setTimeout(() => saveNow(), 0);
            }
          }}
          className="w-full md:w-auto text-center px-4 md:px-6 py-2 md:py-3 bg-red-50 text-red-600 border-2 border-red-200 font-medium text-[14px] md:text-[18px] hover:bg-red-100 hover:border-red-300 transition-colors"
        >
          Effacer le canevas
        </button>

        <button
          onClick={() => {
            // Update status to 'finished'
            useCanvasStore.getState().updateCanvasMetadata(canvas.id, { status: 'finished' });
            // Force save immediately
            setTimeout(() => saveNow(), 0);
          }}
          className="w-full md:w-auto text-center px-4 md:px-6 py-2 md:py-3 bg-green-600 text-white border-2 border-green-700 font-medium text-[14px] md:text-[18px] hover:bg-green-700 transition-colors"
        >
          Terminer
        </button>

        <ExportButton
          canvas={canvas}
          canvasRef={canvasRef as React.RefObject<HTMLElement>}
          className="w-full md:w-auto text-center px-4 md:px-8 py-2 md:py-3 text-[14px] md:text-[18px]"
        />
      </div>
    </div>
  );
}