"use client";

import { useRouter } from "next/navigation";

interface MoodOption {
  label: string;
  icon: string;
  description: string;
  filters: Record<string, string>;
}

const moods: MoodOption[] = [
  {
    label: "Adventurous Evening",
    icon: "M13 10V3L4 14h7v7l9-11h-7z",
    description: "Bold, exciting encounters",
    filters: { keyword: "A Levels" },
  },
  {
    label: "Quiet Companionship",
    icon: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z",
    description: "Gentle, relaxed company",
    filters: { keyword: "GFE" },
  },
  {
    label: "Luxury Dinner Date",
    icon: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
    description: "Upscale dining experiences",
    filters: { keyword: "Dinner" },
  },
  {
    label: "Wild Night Out",
    icon: "M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z",
    description: "High-energy fun",
    filters: { keyword: "BDSM" },
  },
  {
    label: "Relaxing Massage",
    icon: "M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11",
    description: "Soothing bodywork",
    filters: { keyword: "Massage" },
  },
  {
    label: "Romantic Getaway",
    icon: "M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
    description: "Intimate travel experiences",
    filters: { keyword: "Travel Companion" },
  },
];

export default function MoodSelector() {
  const router = useRouter();

  function handleMoodClick(mood: MoodOption) {
    const sp = new URLSearchParams(mood.filters);
    router.push(`/search/results?${sp.toString()}`);
  }

  return (
    <section>
      <div className="flex items-center gap-3 mb-5">
        <svg
          className="w-5 h-5 text-purple-400"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
        <h2 className="text-xl md:text-2xl font-bold">What Are You In The Mood For?</h2>
      </div>
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
        {moods.map((mood) => (
          <button
            key={mood.label}
            onClick={() => handleMoodClick(mood)}
            className="group flex flex-col items-center gap-3 rounded-xl bg-surface border border-white/5 p-5 transition-all duration-200 hover:border-primary/30 hover:bg-surface-light hover:-translate-y-1 text-center"
          >
            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary group-hover:bg-primary/20 transition-colors">
              <svg
                className="h-6 w-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={1.5}
                  d={mood.icon}
                />
              </svg>
            </div>
            <div>
              <h3 className="text-sm font-semibold text-white group-hover:text-primary transition-colors">
                {mood.label}
              </h3>
              <p className="text-xs text-text-muted mt-1">{mood.description}</p>
            </div>
          </button>
        ))}
      </div>
    </section>
  );
}