// routes/landlord/approvals/index.tsx
import { define } from "../../../utils.ts";
import { page } from "fresh";
import { SessionCookie } from "../../auth/callback.ts";
import { createPublicId } from "../../../helpers.ts";
import ConfirmSubmitGuard from "../../../islands/ConfirmSubmitGuard.tsx";

interface PendingApproval {
  id: string;
  property_id?: string;
  tenant_id?: string;
  approval_status?: string;
  approval_requested_at?: number;
  approved_at?: number;
  approved_by?: string;
  rejection_reason?: string | null;
  property?: {
    id: string;
    title?: string;
    address_1?: string;
    address_2?: string;
    city?: string;
    state?: string;
    zip?: string;
    monthly_rent?: number;
    bedrooms?: number;
    bathrooms?: number;
  } | null;
  tenant?: {
    id: string;
    name?: string;
    email?: string;
    phone?: string;
  } | null;
}

interface LandlordApprovalsData {
  stateData?: SessionCookie;
  approvals?: PendingApproval[];
  error?: string;
  publicId?: string;
  [key: string]: unknown;
}

interface LandlordApprovalsProps {
  data: LandlordApprovalsData;
}

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

    try {
      const response = await fetch("/api/lease/pending-approvals", {
        headers: {
          "Content-Type": "application/json",
        },
      });

      if (!response.ok) {
        throw new Error("Failed to fetch pending approvals");
      }

      const data = await response.json();
      const publicId = await createPublicId(user_id);

      return page({
        stateData,
        approvals: data.approvals || [],
        error: "",
        publicId,
      });
    } catch (error) {
      console.error("Error loading pending approvals:", error);
      const publicId = await createPublicId(user_id);
      return page({
        stateData,
        error: "Failed to load pending approvals",
        publicId,
      });
    }
  },

  async POST(ctx) {
    try {
      const formData = await ctx.req.formData();
      const lease_id = formData.get("lease_id") as string;
      const action = formData.get("action") as string;
      const rejection_reason = formData.get("rejection_reason") as string || "";

      if (!lease_id || !action) {
        return new Response(
          JSON.stringify({ error: "lease_id and action are required" }),
          {
            status: 400,
            headers: { "Content-Type": "application/json" },
          },
        );
      }

      const apiEndpoint = action === "approve"
        ? "/api/lease/approve"
        : "/api/lease/reject";

      const body = action === "reject"
        ? { lease_id, rejection_reason }
        : { lease_id };

      const response = await fetch(apiEndpoint, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(body),
      });

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({
          error: "Unknown error",
        }));
        return new Response(
          JSON.stringify({
            error: errorData.error || "Failed to process approval",
          }),
          {
            status: response.status,
            headers: { "Content-Type": "application/json" },
          },
        );
      }

      return new Response("", {
        status: 302,
        headers: { Location: "/landlord/approvals" },
      });
    } catch (error) {
      console.error("Error processing approval:", error);
      return new Response(
        JSON.stringify({ error: String(error) }),
        {
          status: 500,
          headers: { "Content-Type": "application/json" },
        },
      );
    }
  },
});

export default define.page(
  function LandlordApprovals({ data }: LandlordApprovalsProps) {
    const { approvals, error } = data;

    return (
      <>
        <ConfirmSubmitGuard />
        <div class="min-h-screen bg-gray-50 landlord-route">
          <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">
                    Lease Approvals
                  </h1>
                  <p class="mt-1 text-sm text-gray-500">
                    Review and manage pending lease approval requests
                  </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>
            )}

            {approvals && approvals.length > 0
              ? (
                <div class="bg-white shadow overflow-hidden sm:rounded-md">
                  <ul class="divide-y divide-gray-200">
                    {approvals.map((approval) => (
                      <li key={approval.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 bg-blue-100 flex items-center justify-center">
                                  <span class="text-sm font-medium text-blue-600">
                                    {approval.tenant?.name?.charAt(0) || "T"}
                                  </span>
                                </div>
                              </div>
                              <div class="ml-4">
                                <p class="text-sm font-medium text-blue-600 truncate">
                                  {approval.tenant?.name || "Tenant"}
                                </p>
                                <span
                                  class={`ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                                    approval.approval_status === "pending"
                                      ? "bg-yellow-100 text-yellow-800"
                                      : approval.approval_status === "approved"
                                      ? "bg-green-100 text-green-800"
                                      : "bg-red-100 text-red-800"
                                  }`}
                                >
                                  {approval.approval_status}
                                </span>
                              </div>
                            </div>

                            <div class="mt-2 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 d="M2.003 5.884L10 9.882l7.997 7.997-1.414 1.414-4.95-4.95-7.071-7.071V13a2 2 0 002-2h12a2 2 0 002-2V6.414L10 9.882z" />
                                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                              </svg>
                              <p>{approval.tenant?.email}</p>
                            </div>
                          </div>

                          <div class="mt-4">
                            <div class="sm:flex sm:justify-between">
                              <div class="sm:flex">
                                <p class="flex items-center text-sm text-gray-500">
                                  Property: {approval.property?.title ||
                                    approval.property?.address_1 ||
                                    "Property Address"}
                                </p>
                              </div>
                              <div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                                <p>
                                  Monthly Rent:
                                  ${approval.property?.monthly_rent
                                    ? `$${approval.property.monthly_rent.toLocaleString()}/mo`
                                    : "N/A"}
                                </p>
                              </div>
                            </div>
                            <div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                              <p>
                                Requested: {approval.approval_requested_at
                                  ? new Date(approval.approval_requested_at)
                                    .toLocaleDateString()
                                  : "Unknown date"}
                              </p>
                            </div>
                          </div>

                          {approval.approval_status === "pending" && (
                            <div class="mt-4 space-y-3">
                              <div class="flex space-x-2">
                                <form
                                  method="POST"
                                  class="inline"
                                  data-confirm-message="Are you sure you want to approve this lease? This will make the lease active and the tenant will be able to access the property."
                                  data-confirm-label="Approve"
                                >
                                  <input
                                    type="hidden"
                                    name="lease_id"
                                    value={approval.id}
                                  />
                                  <input
                                    type="hidden"
                                    name="action"
                                    value="approve"
                                  />
                                  <button
                                    type="submit"
                                    class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
                                  >
                                    Approve
                                  </button>
                                </form>
                                <form
                                  method="POST"
                                  class="inline"
                                  data-confirm-message="Are you sure you want to reject this lease request?"
                                  data-confirm-label="Reject"
                                >
                                  <input
                                    type="hidden"
                                    name="lease_id"
                                    value={approval.id}
                                  />
                                  <input
                                    type="hidden"
                                    name="action"
                                    value="reject"
                                  />
                                  <button
                                    type="submit"
                                    class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                                  >
                                    Reject
                                  </button>
                                </form>
                              </div>

                              <form
                                method="POST"
                                class="mt-2"
                                data-confirm-message="Are you sure you want to reject this lease request?"
                                data-confirm-label="Reject with Reason"
                              >
                                <input
                                  type="hidden"
                                  name="lease_id"
                                  value={approval.id}
                                />
                                <input
                                  type="hidden"
                                  name="action"
                                  value="reject"
                                />
                                <div>
                                  <label
                                    for={`rejection_reason_${approval.id}`}
                                    class="block text-sm font-medium text-gray-700"
                                  >
                                    Rejection Reason (optional)
                                  </label>
                                  <textarea
                                    id={`rejection_reason_${approval.id}`}
                                    name="rejection_reason"
                                    rows={3}
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                                    placeholder="Provide a reason for rejection..."
                                  />
                                </div>
                                <div class="mt-2">
                                  <button
                                    type="submit"
                                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                                  >
                                    Reject with Reason
                                  </button>
                                </div>
                              </form>
                            </div>
                          )}

                          {approval.approval_status === "approved" && (
                            <div class="mt-4 rounded-md bg-green-50 border border-green-200 px-4 py-3">
                              <p class="text-sm text-green-700">
                                This lease has been approved and is now active.
                              </p>
                            </div>
                          )}

                          {approval.approval_status === "rejected" && (
                            <div class="mt-4 rounded-md bg-red-50 border border-red-200 px-4 py-3">
                              <p class="text-sm text-red-700">
                                This lease request has been rejected.
                              </p>
                              {approval.rejection_reason && (
                                <p class="mt-2 text-sm text-red-600">
                                  <strong>Reason:</strong>{" "}
                                  {approval.rejection_reason}
                                </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="M9 12l2 2 4-4m6 2l-4-4m6 2M9 12h6m-6 0h6m-6 0h6"
                    />
                  </svg>
                  <h3 class="mt-2 text-sm font-medium text-gray-900">
                    No pending approvals
                  </h3>
                  <p class="mt-1 text-sm text-gray-500">
                    You don't have any pending lease approval requests at this
                    time.
                  </p>
                  <div class="mt-6">
                    <a
                      href="/landlord/dashboard"
                      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"
                    >
                      Return to Dashboard
                    </a>
                  </div>
                </div>
              )}
          </div>
        </div>
      </>
    );
  },
);