import Link from "next/link";
import {
  MapPin,
  Navigation,
  Phone,
  Star,
  Clock,
  CheckCircle2,
} from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Breadcrumb from "@/components/search/Breadcrumb";
import CategoryIcon from "@/lib/category-icons";
import { getGoogleMapsDirectionsUrl } from "@/lib/google-maps";
import type { SampleBusiness } from "@/data/sample-businesses";

interface BusinessDetailPageProps {
  business: SampleBusiness;
  fromDb?: boolean;
}

export default function BusinessDetailPage({ business, fromDb = false }: BusinessDetailPageProps) {
  const isOnDuty = business.categorySlug === "nobetci-eczane";

  return (
    <>
      <Header />
      <main className="min-h-screen pt-24 pb-16">
        <div className="relative mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
          <div className="py-4">
            <Breadcrumb
              items={[
                { label: business.categoryTitle, href: `/${business.categorySlug}` },
                { label: business.name },
              ]}
            />
          </div>

          <div className="mt-4 overflow-hidden rounded-3xl border border-white/8 bg-white/3">
            <div
              className={`h-2 bg-gradient-to-r ${business.color}`}
            />
            <div className="p-6 sm:p-8">
              <div className="flex flex-wrap items-start gap-4">
                <div
                  className={`flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br ${business.color}`}
                >
                  <CategoryIcon name={business.icon} className="h-8 w-8 text-white" />
                </div>
                <div className="min-w-0 flex-1">
                  <div className="flex flex-wrap gap-2">
                    {business.badges.map((b) => (
                      <span
                        key={b}
                        className={`rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase ${
                          b === "Nöbetçi" || b === "7/24"
                            ? "bg-amber-500 text-black"
                            : b === "Acil"
                              ? "bg-red-500/20 text-red-300"
                              : "bg-emerald-500/15 text-emerald-300"
                        }`}
                      >
                        {b}
                      </span>
                    ))}
                  </div>
                  <h1 className="mt-2 text-2xl font-extrabold text-white sm:text-3xl">
                    {business.name}
                  </h1>
                  <p className="mt-1 text-slate-400">{business.categoryTitle}</p>
                  <div className="mt-2 flex items-center gap-3 text-sm">
                    <span className="flex items-center gap-1 text-amber-400">
                      <Star className="h-4 w-4 fill-current" />
                      {business.rating}
                    </span>
                    <span className="text-slate-500">({business.reviewCount} yorum)</span>
                    <span
                      className={
                        business.isOpen ? "text-emerald-400" : "text-red-400"
                      }
                    >
                      {business.isOpen ? "Açık" : "Kapalı"}
                    </span>
                  </div>
                </div>
              </div>

              <p className="mt-6 leading-relaxed text-slate-400">{business.description}</p>

              <div className="mt-6 grid gap-4 sm:grid-cols-2">
                <div className="content-card">
                  <div className="flex items-start gap-3">
                    <MapPin className="mt-0.5 h-5 w-5 shrink-0 text-emerald-400" />
                    <div>
                      <p className="text-sm font-semibold text-white">Adres</p>
                      <p className="mt-1 text-sm text-slate-400">
                        {business.address}
                        <br />
                        {business.district}, {business.city}
                      </p>
                    </div>
                  </div>
                </div>
                <div className="content-card">
                  <div className="flex items-start gap-3">
                    <Clock className="mt-0.5 h-5 w-5 shrink-0 text-emerald-400" />
                    <div>
                      <p className="text-sm font-semibold text-white">Çalışma Saati</p>
                      <p className="mt-1 text-sm text-slate-400">{business.openHours}</p>
                    </div>
                  </div>
                </div>
              </div>

              <div className="mt-4 flex flex-wrap gap-2">
                {business.features.map((f) => (
                  <span
                    key={f}
                    className="flex items-center gap-1 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-slate-300"
                  >
                    <CheckCircle2 className="h-3 w-3 text-emerald-400" />
                    {f}
                  </span>
                ))}
              </div>

              <div className="mt-8 flex flex-wrap gap-3">
                <a
                  href={`tel:${business.phone.replace(/\s/g, "")}`}
                  className="flex items-center gap-2 rounded-xl bg-gradient-to-r from-emerald-500 to-emerald-600 px-6 py-3 text-sm font-bold text-white shadow-lg shadow-emerald-500/25"
                >
                  <Phone className="h-4 w-4" />
                  {business.phone}
                </a>
                <a
                  href={getGoogleMapsDirectionsUrl(business.lat, business.lng)}
                  target="_blank"
                  rel="noopener noreferrer"
                  className={`flex items-center gap-2 rounded-xl px-6 py-3 text-sm font-bold ${
                    isOnDuty
                      ? "bg-amber-500/15 text-amber-300"
                      : "bg-white/5 text-white border border-white/10"
                  }`}
                >
                  <Navigation className="h-4 w-4" />
                  Yol Tarifi Al
                </a>
              </div>

              <p className="mt-6 rounded-xl border border-amber-500/15 bg-amber-500/5 px-4 py-3 text-xs text-amber-200/80">
                {fromDb
                  ? "SQLite veritabanından gösterilen sahte seed verisi — MySQL geçişinde gerçek kaynaklar bağlanacak."
                  : "Örnek işletme sayfası — dinamik veri bağlandığında gerçek bilgiler gösterilecektir."}
              </p>
            </div>
          </div>

          <div className="mt-6 text-center">
            <Link
              href={`/${business.categorySlug}`}
              className="text-sm font-semibold text-emerald-400 hover:text-emerald-300"
            >
              ← {business.categoryTitle} listesine dön
            </Link>
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}