"use client";
import { useParams } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
import {
  BadgeCheck,
  Bookmark,
  Loader2,
  MapPin,
  MessageSquare,
  Play,
  Share2,
  Star,
  Zap,
} from "lucide-react";

import { ContratarModal } from "@/components/ContratarModal";
import { Navbar } from "@/components/Navbar";
import { api } from "@/lib/api";
import type { MediaItem, Musician, ServiceType } from "@/lib/types";

// Fondos especiales (mismos que el mockup aprobado)
const NAVY =
  "radial-gradient(80% 130% at 22% 2%, #12326b, transparent 56%), linear-gradient(160deg, #0b1a34, #070f20)";
const NAME_GRADIENT = {
  backgroundImage: "linear-gradient(120deg,#bfe3ff,#60a5fa 50%,#2563eb)",
  WebkitBackgroundClip: "text",
  backgroundClip: "text",
  color: "transparent",
  filter: "drop-shadow(0 2px 20px rgba(37,99,235,.5))",
} as const;

function providerLabel(provider: string): string {
  const map: Record<string, string> = {
    youtube: "YouTube",
    instagram: "Instagram",
    tiktok: "TikTok",
    vimeo: "Vimeo",
  };
  return map[provider] ?? "Video";
}

export default function PerfilMusico() {
  const params = useParams<{ id: string }>();
  const id = Number(params.id);

  const [musician, setMusician] = useState<Musician | null>(null);
  const [serviceTypes, setServiceTypes] = useState<ServiceType[]>([]);
  const [tab, setTab] = useState<"all" | "photo" | "video">("all");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [contratando, setContratando] = useState(false);

  useEffect(() => {
    api.serviceTypes().then(setServiceTypes).catch(() => {});
    api
      .musician(id)
      .then(setMusician)
      .catch((e) => setError(e instanceof Error ? e.message : "Error"))
      .finally(() => setLoading(false));
  }, [id]);

  const typeMeta = useMemo(
    () => (slug: string) => serviceTypes.find((s) => s.slug === slug),
    [serviceTypes],
  );

  if (loading) {
    return (
      <div className="min-h-screen">
        <Navbar />
        <div className="grid place-items-center py-32 text-ink-mute">
          <Loader2 className="animate-spin text-accent" />
        </div>
      </div>
    );
  }

  if (error || !musician) {
    return (
      <div className="min-h-screen">
        <Navbar />
        <p className="mx-auto max-w-md px-4 py-24 text-center text-ink-mute">
          No pudimos cargar este músico. {error}
        </p>
      </div>
    );
  }

  const media: MediaItem[] = musician.media ?? [];
  const featured = media.find((m) => m.kind === "video" && m.is_featured) ?? null;
  const gallery = media.filter((m) => m !== featured);
  const visible = gallery.filter((m) => tab === "all" || m.kind === tab);
  const avatarEmoji = typeMeta(musician.service_types[0])?.emoji ?? "🎵";

  return (
    <div className="min-h-screen pb-28">
      <Navbar />

      {/* HERO azul */}
      <div className="mx-auto max-w-3xl px-4">
        <div
          className="matte mt-3 overflow-hidden rounded-[18px] border border-white/10 border-l-4 border-l-accent"
          style={{ background: NAVY }}
        >
          <div className="flex flex-col items-center gap-5 p-6 text-center sm:flex-row sm:items-center sm:text-left">
            <div className="relative shrink-0">
              <div
                className="grid h-24 w-24 place-items-center rounded-3xl border-[3px] border-white/90 text-4xl"
                style={{
                  background:
                    "radial-gradient(90% 90% at 30% 20%, #ffd78a, transparent 60%), linear-gradient(150deg, #d1502f, #9a2c26)",
                  boxShadow: "0 12px 30px -10px rgba(0,0,0,.6)",
                }}
              >
                {musician.photo_url ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img src={musician.photo_url} alt="" className="h-full w-full rounded-3xl object-cover" />
                ) : (
                  avatarEmoji
                )}
              </div>
              {musician.is_available && (
                <span className="absolute bottom-1 right-1 h-5 w-5 rounded-full bg-success ring-[3px] ring-[#0b1a34]">
                  <span className="absolute inset-0 rounded-full border-2 border-success opacity-50 animate-pulse-ring" />
                </span>
              )}
            </div>

            <div className="min-w-0">
              {musician.city && (
                <div className="mb-1 text-sm text-white/70">En vivo en {musician.city}</div>
              )}
              <div className="flex flex-wrap items-center justify-center gap-2.5 sm:justify-start">
                <h1
                  className="text-3xl font-extrabold leading-tight tracking-tight sm:text-4xl"
                  style={NAME_GRADIENT}
                >
                  {musician.stage_name}
                </h1>
                <BadgeCheck className="text-blue-soft" size={22} />
                {musician.is_available && (
                  <span className="inline-flex items-center gap-1.5 rounded-full border border-emerald-400/30 bg-emerald-500/15 px-2.5 py-0.5 text-xs font-semibold text-emerald-300">
                    <span className="h-1.5 w-1.5 rounded-full bg-emerald-300" /> Disponible ahora
                  </span>
                )}
              </div>

              <div className="mt-2 flex flex-wrap items-center justify-center gap-x-3.5 gap-y-1 text-sm text-white/70 sm:justify-start">
                {musician.city && (
                  <span className="inline-flex items-center gap-1">
                    <MapPin size={14} /> {musician.city}
                  </span>
                )}
                <span className="inline-flex items-center gap-1">
                  <Star size={14} className="fill-star text-star" /> {musician.rating.toFixed(1)}{" "}
                  <span className="opacity-70">({musician.reviews_count})</span>
                </span>
                <span className="opacity-70">Viaja hasta {musician.travel_radius_km} km</span>
              </div>

              <div className="mt-3.5 flex flex-wrap justify-center gap-2 sm:justify-start">
                {musician.service_types.map((slug) => {
                  const t = typeMeta(slug);
                  return (
                    <span
                      key={slug}
                      className="rounded-full border border-accent-soft/30 bg-accent/15 px-2.5 py-1 text-xs font-semibold text-accent-soft"
                    >
                      {t ? `${t.emoji} ${t.name}` : slug}
                    </span>
                  );
                })}
                {musician.genres.map((g) => (
                  <span
                    key={g}
                    className="rounded-full border border-white/15 bg-white/[0.08] px-2.5 py-1 text-xs text-white/90"
                  >
                    {g}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Acciones */}
        <div className="mt-5 flex flex-wrap items-center gap-2.5">
          <button className="inline-flex items-center gap-2 rounded-xl border border-line px-4 py-2 text-sm font-semibold hover:border-accent hover:text-accent-deep">
            <MessageSquare size={15} /> Mensaje
          </button>
          <button className="inline-flex items-center gap-2 rounded-xl border border-line px-4 py-2 text-sm font-semibold hover:border-accent hover:text-accent-deep">
            <Share2 size={15} /> Compartir
          </button>
          <button className="inline-flex items-center gap-2 rounded-xl border border-line px-4 py-2 text-sm font-semibold hover:border-accent hover:text-accent-deep">
            <Bookmark size={15} /> Guardar
          </button>
          <span className="ml-auto inline-flex items-center gap-1.5 text-sm font-semibold text-emerald-600">
            <Zap size={14} className="fill-emerald-500 text-emerald-500" /> Responde rápido
          </span>
        </div>

        {/* Stats */}
        <div className="mt-5 grid grid-cols-3 overflow-hidden rounded-2xl border border-line bg-bg-card shadow-soft">
          {[
            { n: musician.rating.toFixed(1), l: "Rating" },
            { n: musician.reviews_count, l: "Reseñas" },
            {
              n: musician.years_experience ? `${musician.years_experience} años` : "—",
              l: "Experiencia",
            },
          ].map((s, i) => (
            <div key={s.l} className={i > 0 ? "border-l border-line p-4 text-center" : "p-4 text-center"}>
              <div className="text-xl font-bold tracking-tight">{s.n}</div>
              <div className="mt-0.5 text-[11px] uppercase tracking-wider text-ink-mute">{s.l}</div>
            </div>
          ))}
        </div>

        {/* Bio + espectáculo */}
        {musician.bio && (
          <div className="mt-6">
            <div className="mb-2 text-[11px] font-semibold uppercase tracking-widest text-ink-mute">
              Sobre {musician.stage_name}
            </div>
            <p className="text-[15px] text-ink-soft">{musician.bio}</p>
          </div>
        )}

        {musician.show_description && (
          <div
            className="matte mt-5 overflow-hidden rounded-2xl border border-white/10 border-l-4 border-l-accent p-[18px] pl-5"
            style={{ background: NAVY }}
          >
            <div className="mb-2 text-[11px] font-semibold uppercase tracking-widest text-blue-soft">
              Nuestro espectáculo
            </div>
            <p className="text-[15px] text-white">{musician.show_description}</p>
          </div>
        )}

        {/* Video destacado */}
        {featured && (
          <div className="mt-6">
            <div className="mb-2 text-[11px] font-semibold uppercase tracking-widest text-ink-mute">
              Video destacado
            </div>
            <a
              href={featured.url}
              target="_blank"
              rel="noopener noreferrer"
              className="relative block aspect-[16/10] overflow-hidden rounded-[18px] border border-[#14252b]"
              style={{
                background:
                  "radial-gradient(70% 90% at 50% 25%, rgba(209,80,47,.5), transparent 60%), radial-gradient(90% 120% at 80% 10%, rgba(6,182,212,.35), transparent 55%), linear-gradient(160deg, #101820, #05090c)",
                boxShadow: "0 20px 50px -24px rgba(2,8,20,.8)",
              }}
            >
              <span className="absolute left-3.5 top-3.5 z-10 inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/15 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wide text-white backdrop-blur">
                ▶ {providerLabel(featured.provider)} · Destacado
              </span>
              <span className="absolute inset-0 z-10 m-auto grid h-16 w-16 place-items-center rounded-full bg-white/95 shadow-lg">
                <Play size={24} className="fill-ink text-ink" />
              </span>
              {featured.caption && (
                <div className="absolute inset-x-4 bottom-4 z-10">
                  <div className="text-[17px] font-semibold text-white">{featured.caption}</div>
                </div>
              )}
            </a>
          </div>
        )}

        {/* Galería */}
        {gallery.length > 0 && (
          <>
            <div className="mt-8 flex gap-1 border-b border-line">
              {([
                ["all", "Todo", gallery.length],
                ["photo", "Fotos", gallery.filter((m) => m.kind === "photo").length],
                ["video", "Videos", gallery.filter((m) => m.kind === "video").length],
              ] as const).map(([key, label, count]) => (
                <button
                  key={key}
                  onClick={() => setTab(key)}
                  className={`-mb-px border-b-2 px-3.5 py-3 text-[13px] font-semibold uppercase tracking-wide transition-colors ${
                    tab === key
                      ? "border-accent text-accent-deep"
                      : "border-transparent text-ink-mute hover:text-ink"
                  }`}
                >
                  {label} <span className="font-normal text-ink-mute">{count}</span>
                </button>
              ))}
            </div>

            <div className="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3">
              {visible.map((m) => (
                <a
                  key={m.id}
                  href={m.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="relative aspect-square overflow-hidden rounded-2xl border border-line bg-bg-elev transition-transform hover:-translate-y-1"
                >
                  <span
                    className={`absolute left-2 top-2 z-10 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase ${
                      m.kind === "video" ? "bg-accent text-white" : "bg-white/90 text-ink"
                    }`}
                  >
                    {m.kind === "video" ? `▶ ${providerLabel(m.provider)}` : "📷 Foto"}
                  </span>
                  {m.kind === "video" && (
                    <span className="absolute inset-0 z-10 m-auto grid h-11 w-11 place-items-center rounded-full bg-white/90">
                      <Play size={16} className="fill-accent text-accent" />
                    </span>
                  )}
                  {m.caption && (
                    <div className="absolute inset-x-0 bottom-0 z-10 bg-gradient-to-t from-ink/70 to-transparent p-2 pt-6 text-[11px] text-white">
                      {m.caption}
                    </div>
                  )}
                </a>
              ))}
            </div>
          </>
        )}
      </div>

      {/* Barra fija contratar */}
      <div className="fixed inset-x-0 bottom-0 z-40 border-t border-line bg-bg/90 backdrop-blur-md">
        <div className="mx-auto flex max-w-3xl items-center justify-between gap-4 px-4 py-3">
          <div>
            <span className="block text-[11px] uppercase tracking-wider text-ink-mute">Desde</span>
            <span className="text-xl font-bold tracking-tight">
              {musician.base_price.toLocaleString()}
            </span>{" "}
            <span className="text-[13px] text-ink-mute">{musician.currency} / presentación</span>
          </div>
          <button
            onClick={() => setContratando(true)}
            className="flex flex-col items-center rounded-2xl px-8 py-2.5 font-bold text-white shadow-glow-blue"
            style={{ background: "linear-gradient(120deg,#3b82f6,#1d4ed8)" }}
          >
            <span className="text-xl leading-none tracking-tight">Contratar</span>
            <small className="mt-1 text-[13px] font-medium opacity-95">
              Express hoy · o programá tu evento
            </small>
          </button>
        </div>
      </div>

      {contratando && (
        <ContratarModal
          musician={musician}
          serviceTypes={serviceTypes}
          onClose={() => setContratando(false)}
        />
      )}
    </div>
  );
}