"use client";
import Link from "next/link";
import { MapPin, Star } from "lucide-react";

import type { Musician, ServiceType } from "@/lib/types";
import { cn } from "@/lib/utils";

interface Props {
  musician: Musician;
  serviceTypes: ServiceType[];
  active?: boolean;
  onHover?: (m: Musician) => void;
}

export function MusicianCard({ musician, serviceTypes, active, onHover }: Props) {
  const types = musician.service_types
    .map((slug) => serviceTypes.find((s) => s.slug === slug))
    .filter(Boolean) as ServiceType[];
  const emoji = types[0]?.emoji ?? "🎵";
  const typeLabel = types.map((t) => t.name).join(" · ");

  return (
    <Link
      href={`/musico/${musician.id}`}
      onMouseEnter={() => onHover?.(musician)}
      className={cn(
        "grid grid-cols-[auto_1fr_auto] items-center gap-3 rounded-2xl border p-3 transition-all",
        active
          ? "border-accent bg-bg-card ring-1 ring-accent shadow-soft"
          : "border-line bg-bg-card hover:-translate-y-0.5 hover:border-accent/60 hover:shadow-soft",
      )}
    >
      {/* Miniatura */}
      <div className="relative grid h-[54px] w-[54px] place-items-center rounded-[13px] text-2xl"
        style={{ background: "radial-gradient(80% 80% at 30% 20%, #a5f3fc, transparent 65%), linear-gradient(160deg, #0891b2, #0e4a5a)" }}>
        {emoji}
        {musician.is_available && (
          <span className="absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded-full bg-success ring-[2.5px] ring-white" />
        )}
      </div>

      {/* Info */}
      <div className="min-w-0">
        <div className="truncate text-[15px] font-semibold tracking-tight">{musician.stage_name}</div>
        <div className="mt-0.5 truncate text-xs text-accent-deep">{typeLabel}</div>
        <div className="mt-1 text-xs text-ink-mute">
          <Star size={11} className="mb-0.5 mr-0.5 inline fill-star text-star" />
          {musician.rating.toFixed(1)} ({musician.reviews_count}) · {musician.city}
        </div>
      </div>

      {/* Precio + distancia */}
      <div className="text-right">
        <div className="text-sm font-semibold">
          {musician.base_price.toLocaleString()} <span className="text-[11px] font-normal text-ink-mute">{musician.currency}</span>
        </div>
        {musician.distance_km != null && (
          <div className="mt-2 inline-flex items-center gap-0.5 text-[11px] text-ink-soft">
            <MapPin size={11} /> {musician.distance_km} km
          </div>
        )}
      </div>
    </Link>
  );
}