import { Lease, Property } from "../db/interfaces.ts";
import { PopAddLeaseDialog } from "./dialogs/PopAddLeaseDialog.tsx";
import DeleteLeaseButton from "./DeleteLeaseButton.tsx";

interface LeasedHomeProps {
  leases: Lease[];
  properties: Property[];
}

import { useState } from "preact/hooks";

export default function LeasedHome({ leases, properties }: LeasedHomeProps) {
  const [selectedPropertyId, setSelectedPropertyId] = useState(
    properties[0]?.id || "",
  );
  const [popAddLease, popupAddLeaseDialog] = PopAddLeaseDialog(
    leases,
    properties,
  );

  return (
    <>
      {popupAddLeaseDialog}
      <div class="mb-4">
        <label htmlFor="property-select" class="block mb-1 font-semibold">
          Select Property:
        </label>
        <select
          id="property-select"
          class="border rounded px-3 py-2 w-full"
          value={selectedPropertyId}
          onChange={(e) =>
            setSelectedPropertyId((e.target as HTMLSelectElement).value)}
        >
          {properties.map((property) => (
            <option key={property.id} value={property.id}>
              {property.title} — {property.address_1}
            </option>
          ))}
        </select>
      </div>
      <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-4">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-2xl font-bold">Leased Homes</h2>
          <button
            type="button"
            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow"
            onClick={() => popAddLease(selectedPropertyId, Date.now())}
          >
            Add Lease
          </button>
        </div>
        {leases.length === 0
          ? <div class="text-gray-500">No leases found.</div>
          : (
            <ul class="space-y-2">
              {leases.map((lease) => (
                <li
                  key={lease.id}
                  class="border rounded p-4 bg-white shadow relative group"
                >
                  <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                    <DeleteLeaseButton 
                      leaseId={lease.id}
                      propertyAddress={lease.property_address || lease.title || 'Unknown Property'}
                    />
                  </div>
                  <div class="font-semibold">Title: {lease.title}</div>
                  <div>Rent: {lease.rent}</div>
                  <div>Deposit: {lease.security_deposit}</div>
                  <div>
                    Start: {lease.start_date
                      ? new Date(lease.start_date).toLocaleDateString()
                      : ""}
                  </div>
                  <div>
                    End: {lease.end_date
                      ? new Date(lease.end_date).toLocaleDateString()
                      : ""}
                  </div>
                </li>
              ))}
            </ul>
          )}
      </div>
    </>
  );
}