// 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";

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;
    
    if (!stateData || !stateData.user_id) {
      return new Response("", {
        status: 302,
        headers: { Location: "/auth/login" },
      });
    }

    const { user_id } = stateData;

    try {
      const response = await fetch(`http://${ctx.req.headers.get("host")}/api/lease/pending-approvals`, {
        headers: {
          "Content-Type": "application/json",
          "Cookie": ctx.req.headers.get("cookie") || "",
        },
      });

      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) {
    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 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"
        ? `http://${ctx.req.headers.get("host")}/api/lease/approve`
        : `http://${ctx.req.headers.get("host")}/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",
          "Cookie": ctx.req.headers.get("cookie") || "",
        },
        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 (
      <div class="min-h-screen bg-gray-50">
        <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">
                                <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">
                                <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">
                              <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>
    );
  },
);