// routes/tenant/maintenance/index.tsx
import { define } from "../../../utils.ts";
import { getMaintenanceRequestsByUser } from "../../../services/maintenanceRequestService.ts";
import { page } from "fresh";
import { MaintenanceRequest } from "../../../db/interfaces.ts";

export const handler = define.handlers({
  async GET(ctx) {
    const { user_id } = ctx.state.data;
    const url = new URL(ctx.req.url);
    const success = url.searchParams.get("success");

    try {
      const maintenanceRequests = await getMaintenanceRequestsByUser(user_id);

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

export default define.page(function TenantMaintenance({ data }) {
  const { maintenanceRequests, success, error } = data as {
    maintenanceRequests: MaintenanceRequest[];
    success?: boolean;
    error?: string;
  };

  return (
    <div class="min-h-screen bg-gray-50 tenant-route">
      {/* 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">
                Track your property maintenance requests
              </p>
            </div>
            <div class="flex space-x-3">
              <a
                href="/tenant/maintenance/new"
                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"
              >
                New Request
              </a>
              <a
                href="/tenant/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">
        {success && (
          <div class="mb-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded">
            Your maintenance request has been submitted successfully!
          </div>
        )}

        {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="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
              {maintenanceRequests.map((request) => (
                <div
                  key={request.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 truncate">
                        {request.description}
                      </h3>
                      <span
                        class={`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="space-y-2 mb-4">
                      <div class="flex items-center text-sm text-gray-600">
                        <svg
                          class="flex-shrink-0 mr-2 h-4 w-4 text-gray-400"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            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"
                          />
                        </svg>
                        <span class="capitalize">
                          {request.request_type || "general"}
                        </span>
                      </div>

                      <div class="flex items-center text-sm text-gray-600">
                        <svg
                          class="flex-shrink-0 mr-2 h-4 w-4 text-gray-400"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
                          />
                        </svg>
                        <span class="capitalize">
                          Priority: {request.priority}
                        </span>
                      </div>

                      <div class="flex items-center text-sm text-gray-600">
                        <svg
                          class="flex-shrink-0 mr-2 h-4 w-4 text-gray-400"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M8 7V3a4 4 0 118 0v4m-9 4h10l-2 8H6l-2-8z"
                          />
                        </svg>
                        <span>
                          {new Date(request.created_on as number)
                            .toLocaleDateString()}
                        </span>
                      </div>
                    </div>

                    {request.description && (
                      <div class="mb-4">
                        <p class="text-sm text-gray-600 line-clamp-3">
                          {request.description}
                        </p>
                      </div>
                    )}

                    <div class="flex justify-between items-center">
                      <a
                        href={`/tenant/maintenance/${request.id}`}
                        class="text-sm text-blue-600 hover:text-blue-500"
                      >
                        View Details
                      </a>

                      {request.status === "completed" && (
                        <span class="text-xs text-green-600 font-medium">
                          ✓ Resolved
                        </span>
                      )}
                    </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="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 haven't submitted any maintenance requests yet.
              </p>
              <div class="mt-6">
                <a
                  href="/tenant/maintenance/new"
                  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"
                >
                  Submit Request
                </a>
              </div>
            </div>
          )}

        {/* Emergency Contact Info */}
        <div class="mt-8 bg-red-50 border border-red-200 rounded-md p-4">
          <div class="flex">
            <div class="flex-shrink-0">
              <svg
                class="h-5 w-5 text-red-400"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                  clip-rule="evenodd"
                />
              </svg>
            </div>
            <div class="ml-3">
              <h3 class="text-sm font-medium text-red-800">
                Emergency Maintenance
              </h3>
              <div class="mt-2 text-sm text-red-700">
                <p>
                  For emergencies (gas leaks, electrical hazards, flooding, no
                  heat in winter, security issues), call the emergency
                  maintenance line immediately: <strong>(555) 123-HELP</strong>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
});