"use client";

import { motion } from "framer-motion";
import { ChevronLeft, ChevronRight, Calendar, LayoutGrid } from "lucide-react";
import { MONTH_SCHEDULE, SCHEDULE } from "@/lib/mock-data";

const totalTokens = SCHEDULE.reduce((acc, s) => acc + s.estimatedTokens, 0);
const totalMonthTokens = MONTH_SCHEDULE.reduce((acc, s) => acc + s.estimatedTokens, 0);

function formatTokensShort(n: number): string {
  if (n >= 1000) return (n / 1000).toFixed(0) + " 000";
  return n.toString();
}

export type ViewType = "week" | "month";

type Props = {
  view: ViewType;
  onViewChange: (v: ViewType) => void;
  onPrev: () => void;
  onNext: () => void;
  onToday: () => void;
  label: string;
};

export function WeekNav({ view, onViewChange, onPrev, onNext, onToday, label }: Props) {
  const itemCount = view === "month" ? MONTH_SCHEDULE.length : SCHEDULE.length;
  const tokens = view === "month" ? totalMonthTokens : totalTokens;

  return (
    <div className="flex flex-wrap items-center gap-3 mb-6">
      {/* Arrows + label */}
      <div className="flex items-center gap-1">
        <motion.button
          whileTap={{ x: -3 }}
          transition={{ duration: 0.2 }}
          onClick={onPrev}
          className="p-1.5 rounded-lg hover:bg-bg-card border border-transparent hover:border-border transition-colors"
        >
          <ChevronLeft className="w-4 h-4 text-text-dim" />
        </motion.button>
        <span className="px-3 text-[13px] font-medium text-text">
          {label}
        </span>
        <motion.button
          whileTap={{ x: 3 }}
          transition={{ duration: 0.2 }}
          onClick={onNext}
          className="p-1.5 rounded-lg hover:bg-bg-card border border-transparent hover:border-border transition-colors"
        >
          <ChevronRight className="w-4 h-4 text-text-dim" />
        </motion.button>
      </div>

      {/* Aujourd'hui */}
      <button
        onClick={onToday}
        className="px-3 py-1.5 text-[12px] border border-border rounded-lg text-text-dim hover:text-text hover:border-border-bright transition-colors"
      >
        Aujourd&apos;hui
      </button>

      {/* Badge stats */}
      <div className="ml-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-bg-card border border-border text-[12px] text-text-dim">
        <Calendar className="w-3.5 h-3.5 text-accent" />
        <span>
          <span className="text-text font-medium">{itemCount} contenus</span>
          {" planifiés · "}
          <span className="text-text font-mono font-medium">{formatTokensShort(tokens)}</span>
          {" tokens estimés"}
        </span>
      </div>

      {/* Toggle vue */}
      <div className="flex items-center gap-0.5 p-0.5 bg-bg-card border border-border rounded-lg">
        {(["week", "month"] as const).map((v) => (
          <button
            key={v}
            onClick={() => onViewChange(v)}
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[12px] transition-all ${
              view === v
                ? "bg-accent/15 text-text border border-border-bright"
                : "text-text-dimmer hover:text-text-dim"
            }`}
          >
            <LayoutGrid className="w-3.5 h-3.5" />
            {v === "week" ? "Semaine" : "Mois"}
          </button>
        ))}
      </div>
    </div>
  );
}