import Link from "next/link";
import { formatDistanceToNow } from "date-fns";
import { tr } from "date-fns/locale";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { Property } from "@/lib/appwrite/schema";

const statusDot: Record<string, { color: string; label: string }> = {
  aktif:      { color: "bg-emerald-500", label: "Aktif" },
  pasif:      { color: "bg-zinc-400",    label: "Pasif" },
  satildi:    { color: "bg-blue-500",    label: "Satıldı" },
  kiralandit: { color: "bg-orange-400",  label: "Kiralandı" },
};

const listingLabel: Record<string, string> = { satilik: "Satılık", kiralik: "Kiralık" };
const typeLabel: Record<string, string> = {
  daire: "Daire", villa: "Villa", arsa: "Arsa",
  dukkan: "Dükkan", ofis: "Ofis", depo: "Depo",
};

function formatPrice(price: number, currency = "TRY") {
  return new Intl.NumberFormat("tr-TR", {
    style: "currency", currency, maximumFractionDigits: 0,
  }).format(price);
}

export function RecentProperties({ properties }: { properties: Property[] }) {
  return (
    <Card className="overflow-hidden flex flex-col lg:h-full">
      <CardHeader className="shrink-0">
        <CardTitle className="text-base">Son Eklenen İlanlar</CardTitle>
      </CardHeader>
      <CardContent className="px-0 pb-4 lg:flex-1 lg:min-h-0 lg:overflow-y-auto">
        {properties.length === 0 ? (
          <p className="text-sm text-muted-foreground py-6 text-center px-4">
            Henüz ilan yok
          </p>
        ) : (
          <ul className="divide-y">
            {properties.map((p) => {
              const dot = statusDot[p.status] ?? { color: "bg-zinc-400", label: p.status };
              return (
                <li key={p.$id}>
                  <Link
                    href={`/properties/${p.$id}`}
                    className="flex items-center gap-3 px-6 py-3 hover:bg-muted/50 transition-colors"
                  >
                    <span
                      title={dot.label}
                      className={`size-2 rounded-full shrink-0 ${dot.color}`}
                    />
                    <div className="min-w-0 flex-1">
                      <p className="text-sm font-medium truncate">{p.title}</p>
                      <p className="text-xs text-muted-foreground mt-0.5 truncate">
                        {typeLabel[p.propertyType] ?? p.propertyType} · {listingLabel[p.listingType] ?? p.listingType}
                        {p.city ? ` · ${p.city}` : ""}
                        {p.roomCount ? ` · ${p.roomCount}` : ""}
                      </p>
                    </div>
                    <div className="flex flex-col items-end gap-0.5 shrink-0">
                      <p className="text-sm font-semibold tabular-nums">
                        {formatPrice(p.price, p.currency)}
                      </p>
                      <span className="text-xs text-muted-foreground">
                        {formatDistanceToNow(new Date(p.$createdAt), { addSuffix: true, locale: tr })}
                      </span>
                    </div>
                  </Link>
                </li>
              );
            })}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}
