"use client";

import { Plus } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import type { EditableTimeOff, TimeOffActionSet } from "./time-off-form-sheet";
import { TimeOffFormSheet } from "./time-off-form-sheet";

function formatRange(startDate: string, endDate: string): string {
  const start = new Date(`${startDate}T00:00:00`);
  const end = new Date(`${endDate}T00:00:00`);
  const startLabel = start.toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "short" });
  if (startDate === endDate) return startLabel;
  const endLabel = end.toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "short" });
  return `${startLabel} – ${endLabel}`;
}

export function TimeOffList({
  upcoming,
  past,
  actions,
  appointmentHrefBase,
}: {
  upcoming: EditableTimeOff[];
  past: EditableTimeOff[];
  actions?: TimeOffActionSet;
  appointmentHrefBase?: string;
}) {
  const [sheetOpen, setSheetOpen] = useState(false);
  const [editing, setEditing] = useState<EditableTimeOff | null>(null);

  const openNew = () => {
    setEditing(null);
    setSheetOpen(true);
  };
  const openEdit = (t: EditableTimeOff) => {
    setEditing(t);
    setSheetOpen(true);
  };

  return (
    <div className="space-y-6">
      <Button variant="secondary" className="w-full" onClick={openNew}>
        <Plus className="h-4 w-4" aria-hidden="true" />
        Add Time Off
      </Button>

      <div>
        <p className="mb-2 text-xs font-bold uppercase tracking-widest text-muted">Upcoming</p>
        {upcoming.length === 0 ? (
          <p className="text-muted rounded-jumbo border border-line bg-white p-5 text-center text-sm">
            No upcoming time off.
          </p>
        ) : (
          <ul className="divide-y divide-line rounded-jumbo border border-line bg-white">
            {upcoming.map((t) => (
              <li key={t.id}>
                <button
                  type="button"
                  onClick={() => openEdit(t)}
                  className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left hover:bg-stone"
                >
                  <div>
                    <p className="text-sm font-bold">{formatRange(t.startDate, t.endDate)}</p>
                    {t.reason && <p className="text-xs text-muted">{t.reason}</p>}
                  </div>
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>

      {past.length > 0 && (
        <div>
          <p className="mb-2 text-xs font-bold uppercase tracking-widest text-muted">Past</p>
          <ul className="divide-y divide-line rounded-jumbo border border-line bg-stone/50">
            {past.map((t) => (
              <li key={t.id} className="px-5 py-4">
                <p className="text-sm font-bold text-muted">{formatRange(t.startDate, t.endDate)}</p>
                {t.reason && <p className="text-xs text-muted">{t.reason}</p>}
              </li>
            ))}
          </ul>
        </div>
      )}

      <TimeOffFormSheet
        key={editing?.id ?? "new"}
        open={sheetOpen}
        onClose={() => setSheetOpen(false)}
        existing={editing}
        actions={actions}
        appointmentHrefBase={appointmentHrefBase}
      />
    </div>
  );
}