"use client";

import Link from "next/link";
import { AuthenticatedWorkspaceNavbar } from "@/components/authenticated-workspace-navbar";

type ClubServicesHomeClientProps = {
  club: {
    name: string;
    contactEmail: string;
  };
};

type ServiceCard = {
  name: string;
  eyebrow: string;
  description: string;
  href?: string;
  status: "live" | "soon";
  accent: string;
};

const serviceCards: ServiceCard[] = [
  {
    name: "Entrenadores",
    eyebrow: "En proceso",
    description: "Calendario, analiticas, sedes y profesores para ordenar toda la operacion del club.",
    href: "/clubs/coaches",
    status: "live",
    accent: "from-[#d7f53b]/30 via-[#c4d600]/10 to-transparent",
  },
  {
    name: "Maquinas expendedoras",
    eyebrow: "Proximamente",
    description: "Controla stock, ventas y estado de cada maquina desde un solo lugar.",
    status: "soon",
    accent: "from-[#35d3ff]/20 via-[#35d3ff]/8 to-transparent",
  },
  {
    name: "Limpieza",
    eyebrow: "Proximamente",
    description: "Sigue turnos, checklists y alertas para mantener cada sede impecable.",
    status: "soon",
    accent: "from-[#ffb238]/18 via-[#ffb238]/8 to-transparent",
  },
  {
    name: "Pantallas",
    eyebrow: "Proximamente",
    description: "Programa contenidos y revisa que cada pantalla del club este online.",
    status: "soon",
    accent: "from-[#ff6b9d]/16 via-[#ff6b9d]/6 to-transparent",
  },
  {
    name: "Torneos",
    eyebrow: "Proximamente",
    description: "Organiza cuadros, categorias y seguimiento competitivo desde el club.",
    status: "soon",
    accent: "from-[#8bffb7]/16 via-[#8bffb7]/6 to-transparent",
  },
  {
    name: "Membresias",
    eyebrow: "Proximamente",
    description: "Ordena planes, beneficios y seguimiento comercial de tus jugadores.",
    status: "soon",
    accent: "from-[#b88cff]/16 via-[#b88cff]/6 to-transparent",
  },
];

function cardClass(card: ServiceCard) {
  const stateClass =
    card.status === "live"
      ? "border-[#c4d600]/35 bg-[#111711] text-white shadow-[0_28px_90px_-50px_rgba(196,214,0,0.45)] hover:-translate-y-1 hover:border-[#d7f53b]/60"
      : "border-white/8 bg-[#121515]/96 text-white/78 saturate-[0.65] hover:-translate-y-1 hover:border-white/18 hover:saturate-100";

  return `group relative overflow-hidden rounded-[2rem] border p-6 transition duration-200 md:min-h-[16rem] ${stateClass}`;
}

function ServiceCardBody({ card }: { card: ServiceCard }) {
  const badgeClass =
    card.status === "live"
      ? "border-[#c4d600]/35 bg-[#c4d600]/12 text-[#e4f46c]"
      : "border-white/10 bg-black/25 text-white/72";

  return (
    <>
      <div
        className={`absolute inset-0 bg-gradient-to-br transition-opacity duration-200 ${
          card.status === "live" ? "opacity-100" : "opacity-35 group-hover:opacity-80"
        } ${card.accent}`}
      />
      <div className="absolute inset-x-6 top-0 h-px bg-gradient-to-r from-transparent via-white/35 to-transparent opacity-40" />
      <div className="relative flex h-full flex-col justify-between">
        <div className="space-y-4">
          <div className="flex items-start justify-between gap-3">
            <div>
              <p className="text-xs uppercase tracking-[0.22em] text-white/45">{card.eyebrow}</p>
              <h2 className="mt-3 text-2xl font-semibold tracking-[-0.03em] text-white">{card.name}</h2>
            </div>
            <span className={`rounded-full border px-3 py-1 text-[11px] uppercase tracking-[0.18em] ${badgeClass}`}>
              {card.status === "live" ? "Activo" : "Proximamente"}
            </span>
          </div>

          <p className="max-w-[30rem] text-sm leading-6 text-white/64 group-hover:text-white/72">{card.description}</p>
        </div>

        <div className="mt-8 flex items-center justify-between gap-3">
          <span className="text-sm text-white/48">{card.status === "live" ? "Abrir servicio" : "Disponible mas adelante"}</span>
          <span
            className={`inline-flex items-center rounded-full border px-4 py-2 text-sm transition ${
              card.status === "live"
                ? "border-[#c4d600]/35 bg-[#c4d600]/12 text-white group-hover:border-[#d7f53b]/70 group-hover:bg-[#c4d600]/20"
                : "border-white/10 bg-black/20 text-white/72 group-hover:border-white/18 group-hover:bg-black/30"
            }`}
          >
            {card.status === "live" ? "Entrar" : "Proximamente"}
          </span>
        </div>
      </div>
    </>
  );
}

export function ClubServicesHomeClient({ club }: ClubServicesHomeClientProps) {
  return (
    <section className="space-y-6 text-white">
      <AuthenticatedWorkspaceNavbar
        email={club.contactEmail}
        sections={[{ label: "Servicios", active: true, href: "/clubs" }]}
        onSignOut={async () => {
          await fetch("/api/clubs/logout", { method: "POST" });
          window.location.href = "/coaches";
        }}
      />

      <div className="px-1">
        <p className="text-xs uppercase tracking-[0.24em] text-[#c4d600]">Club</p>
        <div className="mt-3 flex flex-wrap items-end justify-between gap-4">
          <div>
            <h1 className="text-4xl font-semibold tracking-[-0.04em] text-white sm:text-5xl">{club.name}</h1>
            <p className="mt-3 max-w-2xl text-sm text-white/58">
              Todos los servicios del club viven aca. Entras por entrenadores y el resto queda listo para sumarse sin mezclar
              operaciones.
            </p>
          </div>
          <div className="rounded-full border border-white/10 bg-black/20 px-4 py-2 text-sm text-white/55">
            {serviceCards.length} servicios
          </div>
        </div>
      </div>

      <div className="grid gap-5 md:grid-cols-3">
        {serviceCards.map((card) =>
          card.href ? (
            <Link key={card.name} href={card.href} className={cardClass(card)}>
              <ServiceCardBody card={card} />
            </Link>
          ) : (
            <div key={card.name} className={cardClass(card)}>
              <ServiceCardBody card={card} />
            </div>
          )
        )}
      </div>
    </section>
  );
}