"use client";

import { useState } from "react";
import { STORE_CATALOG } from "@/lib/store-catalog";
import { StoreCheckoutModal, type LockedCourse } from "./store-checkout-modal";

interface Props {
  courses: LockedCourse[];
  buyer: { name: string; email: string };
}

// Blurred card body shared by both the modal-trigger button and the
// fallback landing link.
function CardBody({ course }: { course: LockedCourse }) {
  return (
    <>
      {/* Overlay: замок + призыв, поверх размытого контента */}
      <div
        className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 transition-opacity"
        style={{ backgroundColor: "color-mix(in srgb, var(--background) 55%, transparent)" }}
      >
        <span className="text-2xl">🔒</span>
        <span
          className="text-sm font-bold px-4 py-2"
          style={{
            border: "2px solid var(--foreground)",
            backgroundColor: "var(--accent)",
            color: "var(--foreground)",
          }}
        >
          Подробнее →
        </span>
      </div>
      {/* Размытый контент карточки */}
      <div
        className="flex flex-col flex-1"
        style={{ filter: "blur(1.8px)", opacity: 0.82, pointerEvents: "none" }}
      >
        {course.coverImage ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={course.coverImage}
            alt={course.title}
            className="w-full aspect-video object-cover"
          />
        ) : (
          <div
            className="w-full aspect-video flex items-center justify-center text-4xl"
            style={{ backgroundColor: "var(--color-surface)" }}
          >
            📚
          </div>
        )}
        <div className="p-4 flex-1 flex flex-col gap-2">
          <h2 className="font-bold text-lg leading-tight">{course.title}</h2>
          {course.description && (
            <p className="text-sm line-clamp-3" style={{ color: "var(--muted-foreground)" }}>
              {course.description}
            </p>
          )}
        </div>
      </div>
    </>
  );
}

export function StoreShowcase({ courses, buyer }: Props) {
  const [selectedSlug, setSelectedSlug] = useState<string | null>(null);

  const selected = courses.find((c) => c.slug === selectedSlug);
  const selectedEntry = selected ? STORE_CATALOG[selected.slug] : undefined;

  const cardClass = "card-aubade p-0 overflow-hidden flex flex-col relative group";

  return (
    <div className="mt-10">
      <p
        className="text-xs font-bold uppercase tracking-widest mb-3"
        style={{ color: "var(--muted-foreground)" }}
      >
        Другие курсы Second Brain
      </p>
      <div className="grid gap-4 sm:grid-cols-2">
        {courses.map((course) => {
          const entry = STORE_CATALOG[course.slug];
          if (!entry || entry.tariffs.length === 0) {
            // Fallback: no catalog entry → keep the old landing link
            return (
              <a
                key={course.id}
                href={entry?.landingUrl ?? "https://second-brain.ru"}
                target="_blank"
                rel="noopener noreferrer"
                className={cardClass}
              >
                <CardBody course={course} />
              </a>
            );
          }
          return (
            <button
              key={course.id}
              type="button"
              aria-haspopup="dialog"
              onClick={() => setSelectedSlug(course.slug)}
              className={`${cardClass} text-left w-full cursor-pointer`}
            >
              <CardBody course={course} />
            </button>
          );
        })}
      </div>

      {selected && selectedEntry && (
        <StoreCheckoutModal
          course={selected}
          entry={selectedEntry}
          buyer={buyer}
          onClose={() => setSelectedSlug(null)}
        />
      )}
    </div>
  );
}