import Link from "next/link";
import {
  Clock,
  MapPin,
  Navigation,
  Phone,
  Star,
} from "lucide-react";
import type { SearchResult } from "@/data/mock-results";
import type { Category } from "@/data/categories";
import { getGoogleMapsDirectionsUrl } from "@/lib/google-maps";

interface ResultCardProps {
  result: SearchResult;
  category: Category;
  rank: number;
}

export default function ResultCard({ result, category, rank }: ResultCardProps) {
  const isOnDuty = category.slug === "nobetci-eczane";

  return (
    <article
      className={`group relative overflow-hidden rounded-2xl border p-4 transition-all sm:p-5 ${
        isOnDuty
          ? "border-amber-500/20 bg-amber-500/5 hover:border-amber-500/35 hover:bg-amber-500/8"
          : "border-white/6 bg-white/3 hover:border-emerald-500/25 hover:bg-white/5"
      }`}
    >
      <div className="flex gap-4">
        <div
          className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-sm font-bold ${
            rank <= 3
              ? "bg-emerald-500/15 text-emerald-400"
              : "bg-white/5 text-slate-500"
          }`}
        >
          {rank}
        </div>

        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-start justify-between gap-2">
            <div>
              <h3 className="text-base font-bold text-white sm:text-lg">
                {result.slug ? (
                  <Link
                    href={`/isletme/${result.slug}`}
                    className="hover:text-emerald-300 transition-colors"
                  >
                    {result.name}
                  </Link>
                ) : (
                  result.name
                )}
              </h3>
              <p className="mt-0.5 flex items-center gap-1 text-xs text-slate-500 sm:text-sm">
                <MapPin className="h-3.5 w-3.5 shrink-0" />
                {result.address} · {result.district}
              </p>
            </div>
            <div className="shrink-0 text-right">
              <p className="text-lg font-extrabold text-emerald-400">{result.distance}</p>
              <p className="text-xs text-slate-500">{result.walkTime}</p>
            </div>
          </div>

          <div className="mt-3 flex flex-wrap items-center gap-2">
            {result.badges.map((badge) => (
              <span
                key={badge}
                className={`rounded-full px-2 py-0.5 text-[10px] font-bold uppercase ${
                  badge === "Nöbetçi" || badge === "7/24"
                    ? "bg-amber-500 text-black"
                    : badge === "Acil"
                      ? "bg-red-500/20 text-red-300"
                      : "bg-emerald-500/15 text-emerald-300"
                }`}
              >
                {badge}
              </span>
            ))}
            <span
              className={`rounded-full px-2 py-0.5 text-[10px] font-semibold ${
                result.isOpen
                  ? "bg-emerald-500/15 text-emerald-300"
                  : "bg-red-500/10 text-red-400"
              }`}
            >
              {result.isOpen
                ? result.openUntil
                  ? `Açık · ${result.openUntil}'e kadar`
                  : "Açık"
                : "Kapalı"}
            </span>
            <span className="flex items-center gap-1 text-xs text-slate-400">
              <Star className="h-3 w-3 fill-amber-400 text-amber-400" />
              {result.rating}
              <span className="text-slate-600">({result.reviewCount})</span>
            </span>
          </div>

          <div className="mt-4 flex flex-wrap gap-2">
            <a
              href={`tel:${result.phone.replace(/\s/g, "")}`}
              className="flex items-center gap-1.5 rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-xs font-semibold text-slate-200 transition-colors hover:border-white/20 hover:text-white sm:text-sm"
            >
              <Phone className="h-3.5 w-3.5" />
              Ara
            </a>
            <a
              href={getGoogleMapsDirectionsUrl(result.lat, result.lng)}
              target="_blank"
              rel="noopener noreferrer"
              className={`flex items-center gap-1.5 rounded-xl px-4 py-2 text-xs font-semibold transition-colors sm:text-sm ${
                isOnDuty
                  ? "bg-amber-500/15 text-amber-300 hover:bg-amber-500/25"
                  : "bg-emerald-500/15 text-emerald-300 hover:bg-emerald-500/25"
              }`}
            >
              <Navigation className="h-3.5 w-3.5" />
              Yol Tarifi
            </a>
            {isOnDuty && (
              <span className="flex items-center gap-1 text-xs text-amber-400/80">
                <Clock className="h-3.5 w-3.5" />
                Nöbet bitiş: yarın 08:00
              </span>
            )}
          </div>
        </div>
      </div>
    </article>
  );
}