"use client";

import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Shell } from "@/components/Shell";
import { WeekNav, type ViewType } from "@/components/planning/WeekNav";
import { CalendarGrid } from "@/components/planning/CalendarGrid";
import { MonthView } from "@/components/planning/MonthView";
import { PlanSidebar } from "@/components/planning/PlanSidebar";

// Semaine mock : lundi 21 avril 2026 = référence
const WEEK_ANCHOR = { year: 2026, month: 3, day: 21 }; // month 0-indexed

function addDays(base: Date, n: number): Date {
  const d = new Date(base);
  d.setDate(d.getDate() + n);
  return d;
}

function fmtDate(d: Date): string {
  return d.toLocaleDateString("fr-FR", { day: "numeric", month: "long" });
}

export default function PlanningPage() {
  const [view, setView] = useState<ViewType>("week");
  // Week offset en semaines (0 = semaine courante)
  const [weekOffset, setWeekOffset] = useState(0);
  // Month offset en mois (0 = avril 2026)
  const [monthOffset, setMonthOffset] = useState(0);

  const anchorDate = new Date(WEEK_ANCHOR.year, WEEK_ANCHOR.month, WEEK_ANCHOR.day);

  // Calcul label semaine
  const weekStart = addDays(anchorDate, weekOffset * 7);
  const weekEnd = addDays(weekStart, 6);
  const weekLabel = `Semaine du ${fmtDate(weekStart)} au ${fmtDate(weekEnd)} 2026`;

  // Calcul label mois
  const monthDate = new Date(2026, 3 + monthOffset, 1);
  const monthLabel = monthDate.toLocaleDateString("fr-FR", { month: "long", year: "numeric" });
  const monthLabelCapitalized = monthLabel.charAt(0).toUpperCase() + monthLabel.slice(1);

  function handlePrev() {
    if (view === "week") setWeekOffset((o) => o - 1);
    else setMonthOffset((o) => o - 1);
  }
  function handleNext() {
    if (view === "week") setWeekOffset((o) => o + 1);
    else setMonthOffset((o) => o + 1);
  }
  function handleToday() {
    setWeekOffset(0);
    setMonthOffset(0);
  }

  const displayLabel = view === "week" ? weekLabel : monthLabelCapitalized;

  return (
    <Shell>
      <div className="max-w-[1400px] mx-auto">
        <div className="mb-6">
          <h1 className="text-[22px] font-semibold tracking-tight text-text">Planning éditorial</h1>
          <p className="text-[13px] text-text-dim mt-1">
            Organisez et planifiez vos contenus semaine par semaine.
          </p>
        </div>

        <WeekNav
          view={view}
          onViewChange={setView}
          onPrev={handlePrev}
          onNext={handleNext}
          onToday={handleToday}
          label={displayLabel}
        />

        <div className="flex gap-5">
          {/* Calendrier principal */}
          <div className="flex-1 min-w-0">
            <AnimatePresence mode="wait">
              {view === "week" ? (
                <motion.div
                  key="week"
                  initial={{ opacity: 0, y: 6 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -6 }}
                  transition={{ duration: 0.2 }}
                >
                  <CalendarGrid weekOffset={weekOffset} />
                </motion.div>
              ) : (
                <motion.div
                  key="month"
                  initial={{ opacity: 0, y: 6 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -6 }}
                  transition={{ duration: 0.2 }}
                >
                  <MonthView
                    year={monthDate.getFullYear()}
                    month={monthDate.getMonth()}
                  />
                </motion.div>
              )}
            </AnimatePresence>
          </div>

          {/* Sidebar suggestions — visible desktop uniquement */}
          <aside className="hidden lg:flex flex-col w-72 shrink-0">
            <PlanSidebar />
          </aside>
        </div>

        {/* Sidebar suggestions — visible mobile, stacked en dessous */}
        <div className="lg:hidden mt-5">
          <PlanSidebar />
        </div>
      </div>
    </Shell>
  );
}