"use client";

import { useState, useCallback } from "react";
import { createPortal } from "react-dom";
import { X, CaretLeft, CaretRight, MapPin, House, ImageSquare } from "@/lib/icons";
import {
  getPropertyImageUrl,
  getPropertyImagePreviewUrl,
  parseImageIds,
} from "@/lib/appwrite/storage-utils";
import {
  PROPERTY_TYPE_LABELS,
  LISTING_TYPE_LABELS,
  PROPERTY_STATUS_LABELS,
  type Property,
} from "@/lib/appwrite/schema";

/* ── Status style map ── */
const STATUS_STYLE: Record<string, string> = {
  aktif: "bg-green-500/90 text-white",
  pasif: "bg-gray-500/80 text-white",
  satildi: "bg-orange-500/90 text-white",
  kiralandit: "bg-blue-500/90 text-white",
};

/* ── Mini gallery (card içi) ── */
function CardGallery({ imageIds, title, onOpenLightbox, onOpenDetail }: {
  imageIds: string[];
  title: string;
  onOpenLightbox: (idx: number) => void;
  onOpenDetail: () => void;
}) {
  const [idx, setIdx] = useState(0);
  const safeIdx = Math.min(idx, imageIds.length - 1);

  if (imageIds.length === 0) {
    return (
      <button
        type="button"
        onClick={onOpenDetail}
        className="flex h-full w-full items-center justify-center flex-col gap-2"
      >
        <ImageSquare className="size-12 text-slate-200" />
      </button>
    );
  }

  return (
    <>
      {/* Ana görsel */}
      <div className="relative h-full group/img">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={getPropertyImagePreviewUrl(imageIds[safeIdx], 640, 420)}
          alt={title}
          className="h-full w-full object-cover cursor-zoom-in transition-transform duration-500 group-hover:scale-[1.03]"
          onClick={() => onOpenLightbox(safeIdx)}
        />
        {/* Prev / Next */}
        {imageIds.length > 1 && (
          <>
            <button
              type="button"
              onClick={(e) => { e.stopPropagation(); setIdx((i) => (i - 1 + imageIds.length) % imageIds.length); }}
              className="absolute left-2 top-1/2 -translate-y-1/2 size-7 rounded-full bg-black/40 hover:bg-black/65 text-white flex items-center justify-center opacity-0 group-hover/img:opacity-100 transition-opacity"
            >
              <CaretLeft className="size-3.5" />
            </button>
            <button
              type="button"
              onClick={(e) => { e.stopPropagation(); setIdx((i) => (i + 1) % imageIds.length); }}
              className="absolute right-2 top-1/2 -translate-y-1/2 size-7 rounded-full bg-black/40 hover:bg-black/65 text-white flex items-center justify-center opacity-0 group-hover/img:opacity-100 transition-opacity"
            >
              <CaretRight className="size-3.5" />
            </button>
            <div className="absolute bottom-2 right-2 bg-black/50 text-white text-xs px-1.5 py-0.5 rounded-full tabular-nums opacity-0 group-hover/img:opacity-100 transition-opacity">
              {safeIdx + 1}/{imageIds.length}
            </div>
          </>
        )}
      </div>

      {/* Thumbnail şeridi */}
      {imageIds.length > 1 && (
        <div className="flex gap-1 px-2 pb-2 overflow-x-auto scrollbar-hide shrink-0">
          {imageIds.map((id, i) => (
            <button
              key={id}
              type="button"
              onClick={() => setIdx(i)}
              className={`shrink-0 w-12 h-9 rounded overflow-hidden border-2 transition-all ${
                i === safeIdx ? "border-white" : "border-white/20 hover:border-white/50"
              }`}
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={getPropertyImagePreviewUrl(id, 100, 75)}
                alt=""
                className="h-full w-full object-cover"
              />
            </button>
          ))}
        </div>
      )}
    </>
  );
}

/* ── Lightbox ── */
function Lightbox({ imageIds, title, initialIndex, onClose }: {
  imageIds: string[];
  title: string;
  initialIndex: number;
  onClose: () => void;
}) {
  const [idx, setIdx] = useState(initialIndex);
  const prev = useCallback(() => setIdx((i) => (i - 1 + imageIds.length) % imageIds.length), [imageIds.length]);
  const next = useCallback(() => setIdx((i) => (i + 1) % imageIds.length), [imageIds.length]);

  return createPortal(
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
      onClick={onClose}
    >
      <button
        type="button"
        onClick={onClose}
        className="absolute top-4 right-4 size-9 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white"
      >
        <X className="size-5" />
      </button>
      <div className="absolute top-4 left-1/2 -translate-x-1/2 text-white/70 text-sm tabular-nums select-none">
        {idx + 1} / {imageIds.length}
      </div>
      {imageIds.length > 1 && (
        <button
          type="button"
          onClick={(e) => { e.stopPropagation(); prev(); }}
          className="absolute left-3 sm:left-6 size-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white"
        >
          <CaretLeft className="size-5" />
        </button>
      )}
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={getPropertyImageUrl(imageIds[idx])}
        alt={`${title} ${idx + 1}`}
        className="max-h-[90dvh] max-w-[90vw] object-contain rounded-lg select-none"
        onClick={(e) => e.stopPropagation()}
        draggable={false}
      />
      {imageIds.length > 1 && (
        <button
          type="button"
          onClick={(e) => { e.stopPropagation(); next(); }}
          className="absolute right-3 sm:right-6 size-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white"
        >
          <CaretRight className="size-5" />
        </button>
      )}
      {imageIds.length > 1 && (
        <div
          className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-1.5 overflow-x-auto max-w-[90vw] px-2 scrollbar-hide"
          onClick={(e) => e.stopPropagation()}
        >
          {imageIds.map((id, i) => (
            <button
              key={id}
              type="button"
              onClick={() => setIdx(i)}
              className={`shrink-0 w-14 h-10 rounded overflow-hidden border-2 transition-all ${
                i === idx ? "border-white" : "border-white/20 hover:border-white/50"
              }`}
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={getPropertyImagePreviewUrl(id, 160, 120)} alt="" className="w-full h-full object-cover" />
            </button>
          ))}
        </div>
      )}
    </div>,
    document.body,
  );
}

/* ── Detay Modal ── */
function DetailModal({ p, onClose }: { p: Property; onClose: () => void }) {
  const imageIds = parseImageIds(p.imageIds);
  const [activeIdx, setActiveIdx] = useState(0);
  const [lightboxOpen, setLightboxOpen] = useState(false);

  return createPortal(
    <div
      className="fixed inset-0 z-40 flex items-end sm:items-center justify-center bg-black/60 p-0 sm:p-4"
      onClick={onClose}
    >
      <div
        className="bg-white w-full max-w-2xl max-h-[95dvh] rounded-t-2xl sm:rounded-2xl overflow-hidden flex flex-col shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Galeri */}
        <div className="relative shrink-0 bg-black">
          {imageIds.length > 0 ? (
            <>
              <div className="relative aspect-[16/9] group">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={getPropertyImagePreviewUrl(imageIds[activeIdx], 900, 506)}
                  alt={p.title}
                  className="h-full w-full object-cover cursor-zoom-in"
                  onClick={() => setLightboxOpen(true)}
                />
                {imageIds.length > 1 && (
                  <>
                    <button
                      type="button"
                      onClick={() => setActiveIdx((i) => (i - 1 + imageIds.length) % imageIds.length)}
                      className="absolute left-3 top-1/2 -translate-y-1/2 size-9 rounded-full bg-black/40 hover:bg-black/65 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                    >
                      <CaretLeft className="size-4" />
                    </button>
                    <button
                      type="button"
                      onClick={() => setActiveIdx((i) => (i + 1) % imageIds.length)}
                      className="absolute right-3 top-1/2 -translate-y-1/2 size-9 rounded-full bg-black/40 hover:bg-black/65 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                    >
                      <CaretRight className="size-4" />
                    </button>
                    <div className="absolute bottom-3 right-3 bg-black/50 text-white text-xs px-2 py-1 rounded-full tabular-nums">
                      {activeIdx + 1} / {imageIds.length}
                    </div>
                  </>
                )}
              </div>
              {/* Thumbnail şeridi */}
              {imageIds.length > 1 && (
                <div className="flex gap-1.5 px-3 py-2 overflow-x-auto scrollbar-hide bg-black/80">
                  {imageIds.map((id, i) => (
                    <button
                      key={id}
                      type="button"
                      onClick={() => setActiveIdx(i)}
                      className={`shrink-0 w-14 h-10 rounded overflow-hidden border-2 transition-all ${
                        i === activeIdx ? "border-white" : "border-white/20 hover:border-white/50"
                      }`}
                    >
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img src={getPropertyImagePreviewUrl(id, 140, 100)} alt="" className="w-full h-full object-cover" />
                    </button>
                  ))}
                </div>
              )}
            </>
          ) : (
            <div className="aspect-[16/9] flex items-center justify-center">
              <House className="size-16 text-slate-600" />
            </div>
          )}

          {/* Kapat */}
          <button
            type="button"
            onClick={onClose}
            className="absolute top-3 right-3 size-8 rounded-full bg-black/50 hover:bg-black/70 text-white flex items-center justify-center transition-colors"
          >
            <X className="size-4" />
          </button>
        </div>

        {/* İçerik */}
        <div className="overflow-y-auto flex-1 p-5 space-y-4">
          {/* Başlık + durum */}
          <div className="flex items-start justify-between gap-3">
            <h2 className="text-xl font-bold text-gray-900 leading-snug">{p.title}</h2>
            <span className={`shrink-0 text-xs font-semibold px-2.5 py-1 rounded-full ${STATUS_STYLE[p.status] ?? "bg-gray-200 text-gray-700"}`}>
              {PROPERTY_STATUS_LABELS[p.status] ?? p.status}
            </span>
          </div>

          {/* Fiyat */}
          <p className="text-3xl font-bold text-slate-900 tracking-tight">
            {p.price.toLocaleString("tr-TR")}
            <span className="text-base font-normal text-gray-400 ml-2">{p.currency ?? "TRY"}</span>
          </p>

          {/* Konum */}
          {(p.city || p.district || p.neighborhood) && (
            <div className="flex items-center gap-1.5 text-sm text-gray-500">
              <MapPin className="size-3.5 shrink-0 text-gray-400" />
              <span>{[p.neighborhood, p.district, p.city].filter(Boolean).join(", ")}</span>
            </div>
          )}

          {/* Özellik pilleri */}
          <div className="flex flex-wrap gap-2">
            <span className="text-xs bg-slate-100 text-slate-700 px-3 py-1 rounded-full font-medium">
              {PROPERTY_TYPE_LABELS[p.propertyType] ?? p.propertyType}
            </span>
            <span className="text-xs bg-slate-100 text-slate-700 px-3 py-1 rounded-full font-medium">
              {LISTING_TYPE_LABELS[p.listingType] ?? p.listingType}
            </span>
            {p.roomCount && (
              <span className="text-xs bg-slate-100 text-slate-700 px-3 py-1 rounded-full font-medium">{p.roomCount}</span>
            )}
            {p.netM2 && (
              <span className="text-xs bg-slate-100 text-slate-700 px-3 py-1 rounded-full font-medium">{p.netM2} m²</span>
            )}
            {p.grossM2 && (
              <span className="text-xs bg-slate-100 text-slate-700 px-3 py-1 rounded-full font-medium">{p.grossM2} m² brüt</span>
            )}
            {p.floor != null && (
              <span className="text-xs bg-slate-100 text-slate-700 px-3 py-1 rounded-full font-medium">{p.floor}. kat</span>
            )}
            {p.totalFloors != null && (
              <span className="text-xs bg-slate-100 text-slate-700 px-3 py-1 rounded-full font-medium">{p.totalFloors} katlı</span>
            )}
            {p.buildingAge != null && (
              <span className="text-xs bg-slate-100 text-slate-700 px-3 py-1 rounded-full font-medium">{p.buildingAge === 0 ? "Sıfır bina" : `${p.buildingAge} yaşında`}</span>
            )}
          </div>

          {/* Açıklama */}
          {p.description && (
            <div className="border-t pt-4">
              <p className="text-sm font-semibold text-gray-700 mb-1.5">Açıklama</p>
              <p className="text-sm text-gray-600 leading-relaxed whitespace-pre-line">{p.description}</p>
            </div>
          )}

          {/* Harita linki */}
          {p.mapLat != null && p.mapLng != null && (
            <div className="border-t pt-4">
              <a
                href={`https://www.google.com/maps?q=${p.mapLat},${p.mapLng}`}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 text-sm font-medium text-blue-600 hover:text-blue-700 transition-colors"
              >
                <MapPin className="size-4" />
                Google Maps&apos;te Göster
              </a>
            </div>
          )}
        </div>
      </div>

      {lightboxOpen && (
        <Lightbox
          imageIds={imageIds}
          title={p.title}
          initialIndex={activeIdx}
          onClose={() => setLightboxOpen(false)}
        />
      )}
    </div>,
    document.body,
  );
}

/* ── Ana kart ── */
function PropertyCard({ p }: { p: Property }) {
  const imageIds = parseImageIds(p.imageIds);
  const [lightboxIdx, setLightboxIdx] = useState<number | null>(null);
  const [detailOpen, setDetailOpen] = useState(false);
  const isSold = p.status === "satildi" || p.status === "kiralandit";

  return (
    <>
      <div
        className={`group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-shadow duration-300 overflow-hidden border border-gray-100 flex flex-col ${isSold ? "opacity-70" : ""}`}
      >
        {/* Görsel alanı */}
        <div className="relative bg-slate-100 overflow-hidden shrink-0 flex flex-col" style={{ height: imageIds.length > 1 ? "calc(13rem + 2.75rem)" : "13rem" }}>
          <div className="relative flex-1 overflow-hidden">
            <CardGallery
              imageIds={imageIds}
              title={p.title}
              onOpenLightbox={(idx) => setLightboxIdx(idx)}
              onOpenDetail={() => setDetailOpen(true)}
            />
          </div>

          {/* Statü */}
          <span
            className={`absolute top-3 left-3 text-xs font-semibold px-2.5 py-1 rounded-full backdrop-blur-sm z-10 ${STATUS_STYLE[p.status] ?? "bg-gray-500/80 text-white"}`}
          >
            {PROPERTY_STATUS_LABELS[p.status] ?? p.status}
          </span>

          {/* Listing type */}
          <span className="absolute top-3 right-3 text-xs font-semibold px-2.5 py-1 rounded-full bg-slate-900/70 text-white backdrop-blur-sm z-10">
            {LISTING_TYPE_LABELS[p.listingType] ?? p.listingType}
          </span>
        </div>

        {/* Body */}
        <div className="p-4 flex flex-col gap-2 flex-1">
          <button
            type="button"
            onClick={() => setDetailOpen(true)}
            className="font-semibold text-gray-900 leading-snug line-clamp-2 text-left hover:text-blue-700 transition-colors"
          >
            {p.title}
          </button>

          {(p.city || p.district || p.neighborhood) && (
            <div className="flex items-start gap-1 text-xs text-gray-500">
              <MapPin className="size-3 shrink-0 mt-0.5 text-gray-400" />
              <span className="line-clamp-1">
                {[p.neighborhood, p.district, p.city].filter(Boolean).join(", ")}
              </span>
            </div>
          )}

          <div className="flex flex-wrap gap-1.5">
            <span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full font-medium">
              {PROPERTY_TYPE_LABELS[p.propertyType] ?? p.propertyType}
            </span>
            {p.roomCount && (
              <span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full font-medium">{p.roomCount}</span>
            )}
            {p.netM2 && (
              <span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full font-medium">{p.netM2} m²</span>
            )}
          </div>

          <div className="mt-auto pt-2 flex items-end justify-between gap-2">
            <p className="text-2xl font-bold text-slate-900 tracking-tight">
              {p.price.toLocaleString("tr-TR")}
              <span className="text-sm font-normal text-gray-400 ml-1.5">{p.currency ?? "TRY"}</span>
            </p>
            <button
              type="button"
              onClick={() => setDetailOpen(true)}
              className="shrink-0 text-xs font-medium text-blue-600 hover:text-blue-700 hover:underline transition-colors"
            >
              Detayları gör →
            </button>
          </div>
        </div>
      </div>

      {lightboxIdx !== null && (
        <Lightbox
          imageIds={imageIds}
          title={p.title}
          initialIndex={lightboxIdx}
          onClose={() => setLightboxIdx(null)}
        />
      )}

      {detailOpen && (
        <DetailModal p={p} onClose={() => setDetailOpen(false)} />
      )}
    </>
  );
}

/* ── Export ── */
export function SunumClient({ properties }: { properties: Property[] }) {
  return (
    <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
      {properties.map((p) => (
        <PropertyCard key={p.$id} p={p} />
      ))}
    </div>
  );
}
