interface RentalsOwnedProps {
  properties: Property[];
}

import { Property } from "../db/interfaces.ts";
import { PopAddRentalDialog } from "./dialogs/PopAddRentalDialog.tsx";

export default function RentalsOwned({ properties }: RentalsOwnedProps) {
  const [popAddRental, popupAddRentalDialog] = PopAddRentalDialog(properties);
  return (
    <>
      {popupAddRentalDialog}
      <button
        type="button"
        aria-label="Go back"
        onClick={() => globalThis.location.href = "/"}
        style={{
          position: "fixed",
          bottom: 300,
          left: 4,
          background: "none",
          border: "none",
          zIndex: 50,
          cursor: "pointer",
        }}
      >
        <svg
          width="32"
          height="32"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <polyline points="15 18 9 12 15 6" />
        </svg>
      </button>
      <div class="flex flex-col gap-6">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-2xl font-bold">Your Rentals</h2>
          <button
            type="button"
            class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg font-semibold shadow-lg transition-colors duration-200"
            onClick={() => popAddRental("Add a new rental")}
          >
            + Add Rental
          </button>
        </div>
        {properties.length === 0
          ? (
            <div class="text-gray-500 text-center">
              You do not own any rental properties yet.
            </div>
          )
          : (
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              {properties.map((property: Property) => (
                <div
                  key={property.id}
                  class="rounded-xl shadow-lg bg-white hover:bg-blue-50 transition flex flex-col p-4 border border-gray-100 relative"
                >
                  {
                    /* <button
                    type="button"
                    class={`absolute top-3 right-3 px-4 py-1 rounded-full font-semibold shadow transition-colors duration-200 text-xs z-10
                      ${
                      property.lease_count
                        ? "bg-green-600 hover:bg-green-700 text-white"
                        : "bg-gray-300 text-gray-500 cursor-not-allowed"
                    }`}
                    style={{ minWidth: 120 }}
                    disabled={!property?.lease_count}
                  >
                    Manage Leases ({property?.lease_count ?? 0})
                  </button> */
                  }
                  {property.image_url && (
                    <img
                      src={property.image_url}
                      alt={property.title || "Property Image"}
                      class="w-full h-40 object-cover rounded-md mb-2"
                    />
                  )}
                  <div class="font-semibold text-lg mb-1">
                    {property.title || "Untitled Property"}
                  </div>
                  <div class="text-gray-600 mb-1">
                    {property.address_1} {property.city}, {property.state}
                  </div>
                  <div class="text-blue-700 font-bold">
                    ${property.price?.toLocaleString() || "-"}
                  </div>
                  <a
                    href={`/rental-property/${property.id}`}
                    class="mt-2 text-blue-600 hover:underline text-sm"
                  >
                    View Details
                  </a>
                </div>
              ))}
            </div>
          )}
      </div>
    </>
  );
}