// routes/landlord/properties/index.tsx
import { define } from "../../../utils.ts";
import { SessionCookie } from "../../auth/callback.ts";
import { getPropertiesByUser } from "../../../services/propertyService.ts";
import { page } from "fresh";
import { Property } from "../../../db/interfaces.ts";

export const handler = define.handlers({
  async GET(ctx) {
    const stateData: SessionCookie = ctx.state.data;
    const { user_id } = stateData;

    if (!user_id) {
      return new Response("", {
        status: 302,
        headers: { Location: "/auth/login" },
      });
    }

    try {
      const properties = await getPropertiesByUser(user_id);

      return page({
        stateData,
        properties,
      });
    } catch (error) {
      console.error("Error loading properties:", error);
      return page({
        stateData,
        error: "Failed to load properties",
      });
    }
  },
});

export default define.page(function LandlordProperties({ data }) {
  const { stateData, properties, error } = data as {
    stateData: SessionCookie;
    properties: Property[];
    error?: string;
  };

  return (
    <div class="min-h-screen bg-gray-50">
      {/* Header */}
      <div class="bg-white shadow">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="flex justify-between items-center py-6">
            <div>
              <h1 class="text-3xl font-bold text-gray-900">My Properties</h1>
              <p class="mt-1 text-sm text-gray-500">
                Manage your rental properties and listings
              </p>
            </div>
            <div class="flex space-x-3">
              <a
                href="/landlord/properties/add"
                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
              >
                Add Property
              </a>
              <a
                href="/landlord/properties/cleanup"
                class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
              >
                Clean Up Duplicates
              </a>
              <a
                href="/landlord/dashboard"
                class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
              >
                Back to Dashboard
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {error && (
          <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
            {error}
          </div>
        )}

        {properties && properties.length > 0
          ? (
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
              {properties.map((property) => (
                <div
                  key={property.id}
                  class="bg-white overflow-hidden shadow rounded-lg"
                >
                  <div class="px-4 py-5 sm:p-6">
                    <div class="flex items-center justify-between mb-4">
                      <h3 class="text-lg leading-6 font-medium text-gray-900">
                        {property.address_1}
                      </h3>
                      <span
                        class={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                          property.rental_status === "available"
                            ? "bg-green-100 text-green-800"
                            : property.rental_status === "rented"
                            ? "bg-blue-100 text-blue-800"
                            : property.rental_status === "draft"
                            ? "bg-gray-100 text-gray-800"
                            : "bg-yellow-100 text-yellow-800"
                        }`}
                      >
                        {property.rental_status || "draft"}
                      </span>
                    </div>

                    <div class="space-y-2 mb-4">
                      <p class="text-sm text-gray-600">
                        {property.city}, {property.state} {property.zip}
                      </p>
                      <p class="text-sm text-gray-600">
                        {property.bedrooms} bed • {property.bathrooms} bath
                        {property.square_footage &&
                          ` • ${property.square_footage.toLocaleString()} sq ft`}
                      </p>
                      <p class="text-lg font-semibold text-gray-900">
                        ${property.monthly_rent?.toLocaleString() ||
                          "N/A"}/month
                      </p>
                    </div>

                    <div class="flex justify-between items-center">
                      <div class="flex space-x-2">
                        <a
                          href={`/landlord/properties/${property.id}/edit`}
                          class="text-sm text-blue-600 hover:text-blue-500"
                        >
                          Edit
                        </a>
                        <a
                          href={`/landlord/properties/${property.id}/media`}
                          class="text-sm text-blue-600 hover:text-blue-500"
                        >
                          Photos
                        </a>
                        <a
                          href={`/landlord/properties/${property.id}/applications`}
                          class="text-sm text-blue-600 hover:text-blue-500"
                        >
                          Applications
                        </a>
                      </div>

                      {property.rental_status === "draft" && (
                        <button class="text-sm bg-green-100 text-green-800 px-3 py-1 rounded-full hover:bg-green-200">
                          Publish
                        </button>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )
          : (
            <div class="text-center py-12">
              <svg
                class="mx-auto h-12 w-12 text-gray-400"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
                />
              </svg>
              <h3 class="mt-2 text-sm font-medium text-gray-900">
                No properties
              </h3>
              <p class="mt-1 text-sm text-gray-500">
                Get started by adding your first rental property.
              </p>
              <div class="mt-6">
                <a
                  href="/landlord/properties/add"
                  class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
                >
                  Add Property
                </a>
              </div>
            </div>
          )}
      </div>
    </div>
  );
});