"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import type { Offering } from "@/lib/offerings";

const periods = ["All", "Morning", "Evening"] as const;
const modes = ["All", "Studio", "Online", "Hybrid"] as const;

export function ClassSchedule({ classes }: { classes: Offering[] }) {
  const [period, setPeriod] = useState<(typeof periods)[number]>("All");
  const [mode, setMode] = useState<(typeof modes)[number]>("All");
  const [level, setLevel] = useState("All");
  const [trainer, setTrainer] = useState("All");

  const levels = useMemo(
    () => ["All", ...Array.from(new Set(classes.map((item) => item.level).filter(Boolean))) as string[]],
    [classes],
  );
  const trainers = useMemo(
    () => ["All", ...Array.from(new Set(classes.map((item) => item.trainer).filter(Boolean)))],
    [classes],
  );

  const filtered = classes.filter((item) => {
    if (period !== "All" && item.period !== period) return false;
    if (mode !== "All" && item.mode !== mode) return false;
    if (level !== "All" && item.level !== level) return false;
    if (trainer !== "All" && item.trainer !== trainer) return false;
    return true;
  });

  return (
    <div>
      <div className="mb-6 flex flex-wrap gap-2">
        {[
          ["Period", periods, period, setPeriod],
          ["Mode", modes, mode, setMode],
        ].map(([label, options, value, setter]) => (
          <label key={label as string} className="text-sm text-white/70">
            <span className="sr-only">{label as string}</span>
            <select
              className="rounded-full bg-white/10 px-4 py-2.5 text-sm font-semibold text-white outline-none"
              value={value as string}
              onChange={(event) => (setter as (v: never) => void)(event.target.value as never)}
            >
              {(options as readonly string[]).map((option) => (
                <option key={option} value={option} className="text-[#1a2228]">
                  {label as string}: {option}
                </option>
              ))}
            </select>
          </label>
        ))}
        <select
          className="rounded-full bg-white/10 px-4 py-2.5 text-sm font-semibold text-white outline-none"
          value={level}
          onChange={(event) => setLevel(event.target.value)}
        >
          {levels.map((option) => (
            <option key={option} value={option} className="text-[#1a2228]">
              Level: {option}
            </option>
          ))}
        </select>
        <select
          className="rounded-full bg-white/10 px-4 py-2.5 text-sm font-semibold text-white outline-none"
          value={trainer}
          onChange={(event) => setTrainer(event.target.value)}
        >
          {trainers.map((option) => (
            <option key={option} value={option} className="text-[#1a2228]">
              Trainer: {option}
            </option>
          ))}
        </select>
      </div>

      <div className="premium-card overflow-hidden rounded-[1.75rem]">
        {filtered.length === 0 ? (
          <p className="p-8 text-[15px] text-white/65">No classes match these filters.</p>
        ) : (
          filtered.map((item) => (
            <div
              key={item.slug}
              className="grid gap-4 border-b border-white/10 p-5 last:border-b-0 lg:grid-cols-[1fr_auto] lg:items-center"
            >
              <div>
                <h3 className="text-xl font-semibold text-white">{item.title}</h3>
                <p className="mt-2 text-[15px] text-white/75">
                  {item.days} · {item.startTime}–{item.endTime}
                </p>
                <p className="mt-1 text-[15px] text-white/60">
                  {item.mode} · {item.level} · {item.trainer}
                </p>
                <p className="mt-3 text-sm font-semibold text-[#c4a882]">
                  {item.dropIn} drop-in
                  {item.monthly && item.monthly !== "—" ? ` / ${item.monthly} monthly` : ""}
                  {item.seatsRemaining != null ? ` · ${item.seatsRemaining} seats available` : ""}
                </p>
                {item.statusNote?.includes("Next:") ? (
                  <p className="mt-1 text-sm text-white/55">{item.statusNote}</p>
                ) : null}
              </div>
              <div className="flex flex-wrap gap-2">
                <Link
                  href={`/offer/${item.slug}`}
                  className="rounded-full bg-white/10 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-white/16"
                >
                  View details
                </Link>
                <Link href={`/contact?type=class&item=${encodeURIComponent(item.bookingItem)}#booking`} className="btn-primary !min-h-10 !px-4 !py-2.5 text-sm">
                  Reserve
                </Link>
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}