import Link from "next/link";
import { Property, formatPrice } from "@/lib/mock-data";
import StatusBadge from "./StatusBadge";
import VerificationStamp from "./VerificationStamp";

interface PropertyCardProps {
  property: Property;
  layout?: "grid" | "list";
}

export default function PropertyCard({ property, layout = "grid" }: PropertyCardProps) {
  const isList = layout === "list";
  const isCommercial = property.category === "commercial";

  return (
    <div
      className={`bg-white rounded-lg border border-mist shadow-card hover:shadow-card-hover transition-all hover:-translate-y-0.5 overflow-hidden flex ${
        isList ? "flex-col sm:flex-row" : "flex-col"
      }`}
    >
      {/* Image / placeholder */}
      <div
        className={`relative bg-gradient-to-br ${isCommercial ? "from-[#2A3A35] to-[#1E4A3D]" : "from-mist to-sage"} flex items-center justify-center font-mono text-xs uppercase tracking-wider ${isCommercial ? "text-white/40" : "text-ink-soft"} ${
          isList ? "h-44 sm:h-auto sm:w-60 shrink-0" : "h-44"
        }`}
      >
        {isCommercial ? "Commercial space" : "Property photo"}

        {/* Commercial badge — top left */}
        {isCommercial && (
          <div className="absolute top-3 left-3 flex items-center gap-1.5 bg-white/15 backdrop-blur-sm border border-white/20 text-white font-mono text-[10px] uppercase tracking-widest px-2.5 py-1 rounded-pill">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-3 h-3">
              <path d="M3 21h18M3 10h18M3 7l9-4 9 4M4 10v11M20 10v11M8 10v11M12 10v11M16 10v11" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            Commercial
          </div>
        )}

        {/* Verification stamp — top right */}
        {property.status === "verified" && (
          <VerificationStamp variant="property" size={56} className="absolute top-3 right-3" />
        )}
      </div>

      {/* Content */}
      <div
        className={`p-4 pb-5 flex flex-col flex-1 ${
          isList ? "sm:flex-row sm:items-center sm:gap-6" : ""
        }`}
      >
        <div className={isList ? "flex-1 min-w-[200px]" : ""}>
          <div className="font-display font-semibold text-lg text-forest-deep mb-0.5">
            {property.title}
          </div>
          <div className="text-sm text-ink-soft mb-3">{property.address}</div>

          <div className="font-mono text-base font-semibold text-forest mb-1">
            {formatPrice(property.price)}{" "}
            <span className="text-xs font-normal text-ink-soft uppercase tracking-wider">/ month</span>
          </div>

          {/* Size for commercial */}
          {isCommercial && property.size && (
            <div className="font-mono text-xs text-ink-soft mb-3">{property.size}</div>
          )}

          <div className="flex gap-2 flex-wrap mt-2 mb-4">
            {/* Type pill */}
            <span className="text-xs font-mono uppercase tracking-wider bg-sage border border-mist text-ink-soft px-2.5 py-1 rounded-pill">
              {property.type}
            </span>
            {property.tags.slice(0, 2).map((tag) => (
              <span
                key={tag}
                className="text-xs font-mono uppercase tracking-wider bg-sage border border-mist text-ink-soft px-2.5 py-1 rounded-pill"
              >
                {tag}
              </span>
            ))}
          </div>
        </div>

        <div
          className={`flex items-center justify-between mt-auto gap-3 ${
            isList ? "sm:flex-col sm:items-end sm:mt-0" : ""
          }`}
        >
          <StatusBadge status={property.status} />
          <Link
            href={`/listings/${property.id}`}
            className="inline-flex items-center justify-center font-semibold text-sm px-5 py-2 rounded-pill border border-mist text-forest hover:bg-forest hover:border-forest hover:text-white transition-colors"
          >
            View
          </Link>
        </div>
      </div>
    </div>
  );
}