import { useMemo, useState } from "react";
import { OutlineButton } from "@/components/outline-button";
import { InquiryForm } from "@/components/inquiry-form";
import { lillithProducts } from "@/lib/content";

function nextSaturdays(count: number) {
  const out: Date[] = [];
  const d = new Date();
  d.setHours(12, 0, 0, 0);
  const day = d.getDay();
  const add = day === 6 ? 0 : (6 - day + 7) % 7;
  d.setDate(d.getDate() + add);
  for (let i = 0; i < count; i++) {
    const n = new Date(d);
    n.setDate(d.getDate() + i * 7);
    out.push(n);
  }
  return out;
}

const fmt = new Intl.DateTimeFormat("en-US", {
  weekday: "short",
  month: "short",
  day: "numeric",
  year: "numeric",
});

export function SaturdayCalendar() {
  const dates = useMemo(() => nextSaturdays(8), []);
  const [hold, setHold] = useState<string | null>(null);

  return (
    <div>
      <div className="grid gap-px bg-line sm:grid-cols-2 lg:grid-cols-4">
        {dates.map((date, i) => {
          const key = date.toISOString();
          const open = i < 3 ? "OPEN" : i < 6 ? "HOLDING" : "WAITLIST";
          return (
            <button
              type="button"
              key={key}
              onClick={() => setHold(fmt.format(date))}
              className="flex flex-col items-start gap-3 bg-bg px-5 py-6 text-left transition-colors duration-[var(--motion-fast)] hover:bg-fg/5"
            >
              <span className="font-display text-xs uppercase tracking-wide text-muted">
                {open}
              </span>
              <span className="font-display text-xl font-semibold uppercase tracking-hero">
                {fmt.format(date)}
              </span>
              <span className="font-display text-xs uppercase tracking-wide text-dim">
                Hold this Saturday
              </span>
            </button>
          );
        })}
      </div>

      <div className="mt-14 grid gap-px bg-line md:grid-cols-2 lg:grid-cols-4">
        {lillithProducts.map((p) => (
          <div key={p.name} className="bg-bg px-5 py-7">
            <p className="font-display text-xs uppercase tracking-wide text-muted">
              Session
            </p>
            <h3 className="mt-2 font-display text-2xl font-semibold uppercase">
              {p.name}
            </h3>
            <p className="mt-4 font-display text-stat font-semibold leading-none">
              {p.price}
            </p>
            <p className="mt-2 text-sm text-muted">{p.meta}</p>
            <p className="mt-4 font-display text-xs uppercase tracking-wide text-dim">
              Hold {p.hold} today
            </p>
          </div>
        ))}
      </div>

      {hold ? (
        <div className="mt-14 border border-line p-6 sm:p-10">
          <p className="font-display text-xs uppercase tracking-wide text-muted">
            Hold request
          </p>
          <h3 className="mt-2 font-display text-hero font-semibold uppercase">
            {hold}
          </h3>
          <p className="mt-3 max-w-lg text-sm text-muted">
            This is an inquiry, not a charge. Fifty percent holds the date once
            we confirm. Files included. Gallery in 48 hours.
          </p>
          <div className="mt-8">
            <InquiryForm defaultInterest="Lillith Saturday" />
          </div>
          <div className="mt-6">
            <OutlineButton onClick={() => setHold(null)}>Cancel</OutlineButton>
          </div>
        </div>
      ) : null}
    </div>
  );
}