Header Week

"use client";

import { useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeaderWeekProps {
  /** ISO Monday of the initial week. */
  weekStart?: string;
  onWeekChange?: (iso: string) => void;
  progress?: { done: number; total: number };
  className?: string;
}

function shift(iso: string, days: number) {
  const d = new Date(`${iso}T12:00:00`);
  d.setDate(d.getDate() + days);
  return d.toISOString().slice(0, 10);
}

/** Week-planner header: prev/next arrows around the week range, a “Today” pill, and a mint week-progress pill with a mini bar. */
export function HeaderWeek({ weekStart = "2026-10-05", onWeekChange, progress = { done: 18, total: 31 }, className }: HeaderWeekProps) {
  const [start, setStart] = useState(weekStart);
  const go = (n: number) => {
    const next = n === 0 ? weekStart : shift(start, n * 7);
    setStart(next);
    onWeekChange?.(next);
  };
  const fmt = (iso: string) => new Date(`${iso}T12:00:00`).toLocaleDateString("en-US", { month: "short", day: "numeric" });
  const pct = Math.round((progress.done / progress.total) * 100);

  return (
    <header className={cn("flex flex-wrap items-center gap-3 bg-da-bg px-4 py-5 text-da-fg sm:px-8", className)}>
      <div className="flex items-center gap-2">
        <button
          type="button"
          aria-label="Previous week"
          onClick={() => go(-1)}
          className="da-focus grid size-11 place-items-center rounded-full bg-da-surface shadow-da-sm hover:-translate-x-0.5"
        >
          <ChevronLeft aria-hidden className="size-5" />
        </button>
        <h1 className="min-w-44 text-center font-da-display text-2xl font-extrabold tracking-da-display" aria-live="polite">
          {fmt(start)} – {fmt(shift(start, 4))}
        </h1>
        <button
          type="button"
          aria-label="Next week"
          onClick={() => go(1)}
          className="da-focus grid size-11 place-items-center rounded-full bg-da-surface shadow-da-sm hover:translate-x-0.5"
        >
          <ChevronRight aria-hidden className="size-5" />
        </button>
      </div>
      <button
        type="button"
        onClick={() => go(0)}
        disabled={start === weekStart}
        className="da-focus inline-flex h-11 items-center rounded-da-pill bg-da-primary/12 px-5 font-semibold disabled:opacity-50"
      >
        Today
      </button>
      <div className="ml-auto flex items-center gap-3 rounded-da-pill bg-da-secondary py-2 pr-4 pl-3 text-da-secondary-fg">
        <span aria-hidden className="text-lg">
          🌿
        </span>
        <span className="text-sm font-semibold">
          {progress.done}/{progress.total} done
        </span>
        <span
          className="h-2 w-20 overflow-hidden rounded-full bg-da-surface/70"
          role="progressbar"
          aria-valuenow={pct}
          aria-valuemin={0}
          aria-valuemax={100}
          aria-label="Week progress"
        >
          <span className="block h-full rounded-full bg-da-secondary-fg" style={{ width: `${pct}%` }} />
        </span>
      </div>
    </header>
  );
}

export default HeaderWeek;