// routes/landlord/maintenance/index.tsx
import { define } from "../../../utils.ts";
import {
  getMaintenanceDataByLandlord,
  MaintenanceData,
  updateMaintenanceRequestStatus,
} from "../../../services/maintenanceRequestService.ts";
import { page } from "fresh";
import { useRef } from "preact/hooks";
import { SessionCookie } from "../../auth/callback.ts";

interface LandlordMaintenancePageData {
  stateData?: SessionCookie;
  maintenanceRequests?: MaintenanceData[];
  error?: string;
}

interface LandlordMaintenanceProps {
  data: LandlordMaintenancePageData;
}

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 maintenanceRequests: MaintenanceData[] =
        await getMaintenanceDataByLandlord(user_id);

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

  async POST(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 formData = await ctx.req.formData();
      const request_id = formData.get("request_id") as string;
      const new_status = formData.get("new_status") as string;
      const new_priority = formData.get("new_priority") as string;

      const updateData: any = {};
      if (new_status) updateData.status = new_status;
      if (new_priority) updateData.priority = new_priority;

      if (Object.keys(updateData).length > 0) {
        await updateMaintenanceRequestStatus(request_id, updateData);
      }

      return new Response("", {
        status: 302,
        headers: { Location: "/landlord/maintenance" },
      });
    } catch (error) {
      console.error("Error updating maintenance request:", error);
      return page({
        stateData,
        error: "Failed to update maintenance request",
      });
    }
  },
});

export default define.page(
  function LandlordMaintenance({ data }: LandlordMaintenanceProps) {
    const { stateData, maintenanceRequests, error } = data;

    const statusFormRef = useRef<HTMLFormElement>(null);
    const priorityFormRef = useRef<HTMLFormElement>(null);

    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">
                  Maintenance Requests
                </h1>
                <p class="mt-1 text-sm text-gray-500">
                  Manage maintenance requests from your tenants
                </p>
              </div>
              <div class="flex space-x-3">
                <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>
          )}

          {/* Status Filter */}
          <div class="mb-6">
            <div class="border-b border-gray-200">
              <nav class="-mb-px flex space-x-8">
                <a
                  href="#"
                  class="border-blue-500 text-blue-600 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm"
                >
                  All Requests ({maintenanceRequests?.length || 0})
                </a>
                <a
                  href="#"
                  class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm"
                >
                  Open
                  ({maintenanceRequests?.filter((req) => req.status === "open")
                    .length || 0})
                </a>
                <a
                  href="#"
                  class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm"
                >
                  In Progress ({maintenanceRequests?.filter((req) =>
                    req.status === "in_progress"
                  ).length || 0})
                </a>
                <a
                  href="#"
                  class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm"
                >
                  Completed ({maintenanceRequests?.filter((req) =>
                    req.status === "completed"
                  ).length || 0})
                </a>
              </nav>
            </div>
          </div>

          {maintenanceRequests && maintenanceRequests.length > 0
            ? (
              <div class="bg-white shadow overflow-hidden sm:rounded-md">
                <ul class="divide-y divide-gray-200">
                  {maintenanceRequests.map((request) => (
                    <li key={request.id}>
                      <div class="px-4 py-4 sm:px-6">
                        <div class="flex items-center justify-between">
                          <div class="flex items-center">
                            <div class="flex-shrink-0">
                              <div
                                class={`h-10 w-10 rounded-full flex items-center justify-center ${
                                  request.priority === "emergency"
                                    ? "bg-red-100"
                                    : request.priority === "high"
                                    ? "bg-orange-100"
                                    : request.priority === "medium"
                                    ? "bg-yellow-100"
                                    : "bg-gray-100"
                                }`}
                              >
                                <span
                                  class={`text-sm font-medium ${
                                    request.priority === "emergency"
                                      ? "text-red-700"
                                      : request.priority === "high"
                                      ? "text-orange-700"
                                      : request.priority === "medium"
                                      ? "text-yellow-700"
                                      : "text-gray-700"
                                  }`}
                                >
                                  {request.priority?.charAt(0).toUpperCase() ||
                                    "L"}
                                </span>
                              </div>
                            </div>
                            <div class="ml-4">
                              <div class="flex items-center">
                                <p class="text-sm font-medium text-blue-600 truncate">
                                  {request.description}
                                </p>
                                <span
                                  class={`ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                                    request.status === "open"
                                      ? "bg-red-100 text-red-800"
                                      : request.status === "in_progress"
                                      ? "bg-yellow-100 text-yellow-800"
                                      : request.status === "completed"
                                      ? "bg-green-100 text-green-800"
                                      : "bg-gray-100 text-gray-800"
                                  }`}
                                >
                                  {request.status?.replace("_", " ") || "open"}
                                </span>
                              </div>
                              <div class="mt-2 flex">
                                <div class="flex items-center text-sm text-gray-500">
                                  <svg
                                    class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
                                    viewBox="0 0 20 20"
                                    fill="currentColor"
                                  >
                                    <path
                                      fill-rule="evenodd"
                                      d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                                      clip-rule="evenodd"
                                    />
                                  </svg>
                                  <p>{request.tenant_name || "Tenant"}</p>
                                </div>
                                <div class="ml-6 flex items-center text-sm text-gray-500">
                                  <svg
                                    class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
                                    viewBox="0 0 20 20"
                                    fill="currentColor"
                                  >
                                    <path
                                      fill-rule="evenodd"
                                      d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                                      clip-rule="evenodd"
                                    />
                                  </svg>
                                  <p>
                                    {new Date(request.created_on)
                                      .toLocaleDateString()}
                                  </p>
                                </div>
                                <div class="ml-6 flex items-center text-sm text-gray-500">
                                  <svg
                                    class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
                                    viewBox="0 0 20 20"
                                    fill="currentColor"
                                  >
                                    <path
                                      fill-rule="evenodd"
                                      d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a1.994 1.994 0 01-1.414.586H7a4 4 0 01-4-4V7a4 4 0 014-4z"
                                      clip-rule="evenodd"
                                    />
                                  </svg>
                                  <p class="capitalize">
                                    {request.request_type || "general"}
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="flex items-center space-x-2">
                            {request.status !== "completed" && (
                              <>
                                <form
                                  method="POST"
                                  class="inline"
                                  ref={statusFormRef}
                                >
                                  <input
                                    type="hidden"
                                    name="request_id"
                                    value={request.id}
                                  />
                                  <select
                                    name="new_status"
                                    onChange={() =>
                                      statusFormRef.current?.submit()}
                                    class="text-xs border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                                  >
                                    <option value="">Change Status</option>
                                    <option
                                      value="open"
                                      selected={request.status === "open"}
                                    >
                                      Open
                                    </option>
                                    <option
                                      value="in_progress"
                                      selected={request.status ===
                                        "in_progress"}
                                    >
                                      In Progress
                                    </option>
                                    <option
                                      value="completed"
                                      selected={request.status === "completed"}
                                    >
                                      Completed
                                    </option>
                                  </select>
                                </form>

                                <form
                                  method="POST"
                                  class="inline"
                                  ref={priorityFormRef}
                                >
                                  <input
                                    type="hidden"
                                    name="request_id"
                                    value={request.id}
                                  />
                                  <select
                                    name="new_priority"
                                    onChange={() =>
                                      priorityFormRef.current?.submit()}
                                    class="text-xs border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                                  >
                                    <option value="">Change Priority</option>
                                    <option
                                      value="low"
                                      selected={request.priority === "low"}
                                    >
                                      Low
                                    </option>
                                    <option
                                      value="medium"
                                      selected={request.priority === "medium"}
                                    >
                                      Medium
                                    </option>
                                    <option
                                      value="high"
                                      selected={request.priority === "high"}
                                    >
                                      High
                                    </option>
                                    <option
                                      value="emergency"
                                      selected={request.priority ===
                                        "emergency"}
                                    >
                                      Emergency
                                    </option>
                                  </select>
                                </form>
                              </>
                            )}

                            <a
                              href={`/landlord/maintenance/${request.id}`}
                              class="text-sm text-blue-600 hover:text-blue-500"
                            >
                              View Details
                            </a>
                          </div>
                        </div>

                        <div class="mt-2">
                          <div class="sm:flex sm:justify-between">
                            <div class="sm:flex">
                              <p class="flex items-center text-sm text-gray-500">
                                Property:{" "}
                                {request.property_address || "Property Address"}
                              </p>
                            </div>
                            <div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                              <span
                                class={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${
                                  request.priority === "emergency"
                                    ? "bg-red-100 text-red-800"
                                    : request.priority === "high"
                                    ? "bg-orange-100 text-orange-800"
                                    : request.priority === "medium"
                                    ? "bg-yellow-100 text-yellow-800"
                                    : "bg-gray-100 text-gray-800"
                                }`}
                              >
                                {request.priority} priority
                              </span>
                            </div>
                          </div>
                        </div>

                        {request.description && (
                          <div class="mt-2">
                            <p class="text-sm text-gray-600 line-clamp-2">
                              {request.description}
                            </p>
                          </div>
                        )}
                      </div>
                    </li>
                  ))}
                </ul>
              </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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
                  />
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                  />
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900">
                  No maintenance requests
                </h3>
                <p class="mt-1 text-sm text-gray-500">
                  You don't have any maintenance requests from tenants yet.
                </p>
              </div>
            )}
        </div>
      </div>
    );
  },
);