// routes/landlord/messages/index.tsx
import { define } from "../../../utils.ts";
import { page } from "fresh";
import { SessionCookie } from "../../auth/callback.ts";
import {
  deleteMessagesForUser,
  getMessagesForUser,
  MessagePage,
} from "../../../services/messageService.ts";
import LandlordMessageSelection from "../../../islands/LandlordMessageSelection.tsx";
import LandlordMessageThreads from "../../../islands/LandlordMessageThreads.tsx";

type FilterValue = "all" | "read" | "unread";
type TypeValue = "all" | "general" | "maintenance" | "payment" | "notice";
type DirectionValue = "all" | "sent" | "received";
type SortValue = "newest" | "oldest";

interface Filters {
  status: FilterValue;
  type: TypeValue;
  direction: DirectionValue;
  sort: SortValue;
  search: string;
  pageSize: number;
}

interface MessagesPageData {
  stateData: SessionCookie;
  messagePage: MessagePage;
  filters: Filters;
  error?: string;
}

const STATUS_VALUES: FilterValue[] = ["all", "read", "unread"];
const TYPE_VALUES: TypeValue[] = [
  "all",
  "general",
  "maintenance",
  "payment",
  "notice",
];
const DIRECTION_VALUES: DirectionValue[] = ["all", "sent", "received"];
const SORT_VALUES: SortValue[] = ["newest", "oldest"];
const PAGE_SIZES = [10, 20, 50];

function sanitizeEnum<T extends string>(
  value: string | null,
  allowed: T[],
  fallback: T,
) {
  if (!value) return fallback;
  return allowed.includes(value as T) ? (value as T) : fallback;
}

function buildPageUrl(
  filters: Filters,
  pageNumber: number,
) {
  const params = new URLSearchParams();
  params.set("page", String(pageNumber));
  params.set("page_size", String(filters.pageSize));
  params.set("status", filters.status);
  params.set("type", filters.type);
  params.set("direction", filters.direction);
  params.set("sort", filters.sort);
  if (filters.search) params.set("q", filters.search);
  return `/landlord/messages?${params.toString()}`;
}

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 url = new URL(ctx.req.url);
      const pageNumber = Math.max(
        1,
        Number(url.searchParams.get("page") || "1"),
      );
      const rawPageSize = Number(url.searchParams.get("page_size") || "10");
      const pageSize = PAGE_SIZES.includes(rawPageSize) ? rawPageSize : 10;

      const status = sanitizeEnum(
        url.searchParams.get("status"),
        STATUS_VALUES,
        "all",
      );
      const type = sanitizeEnum(
        url.searchParams.get("type"),
        TYPE_VALUES,
        "all",
      );
      const direction = sanitizeEnum(
        url.searchParams.get("direction"),
        DIRECTION_VALUES,
        "all",
      );
      const sort = sanitizeEnum(
        url.searchParams.get("sort"),
        SORT_VALUES,
        "newest",
      );
      const search = url.searchParams.get("q")?.trim() || "";

      const messagePage = await getMessagesForUser(user_id, {
        page: pageNumber,
        pageSize,
        sort,
        status,
        type,
        direction,
        search,
      });

      return page({
        stateData,
        messagePage,
        filters: {
          status,
          type,
          direction,
          sort,
          search,
          pageSize,
        },
      });
    } catch (error) {
      console.error("Error loading messages:", error);
      return page({
        stateData,
        messagePage: {
          messages: [],
          page: 1,
          pageSize: 10,
          total: 0,
          totalMessages: 0,
          totalPages: 1,
          unread: 0,
        },
        filters: {
          status: "all",
          type: "all",
          direction: "all",
          sort: "newest",
          search: "",
          pageSize: 10,
        },
        error: "Failed to load messages.",
      });
    }
  },
  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 action = formData.get("action")?.toString() || "";
      const returnTo = formData.get("return_to")?.toString() ||
        "/landlord/messages";
      const safeReturnTo = returnTo.startsWith("/")
        ? returnTo
        : "/landlord/messages";
      const redirectUrl = new URL(safeReturnTo, ctx.req.url);

      if (action !== "delete_selected") {
        return Response.redirect(redirectUrl, 303);
      }

      const ids = formData.getAll("message_ids")
        .map((value) => value.toString())
        .filter(Boolean);

      if (ids.length > 0) {
        await deleteMessagesForUser(user_id, ids);
      }

      return Response.redirect(redirectUrl, 303);
    } catch (error) {
      console.error("Error deleting messages:", error);
      const fallbackUrl = new URL("/landlord/messages", ctx.req.url);
      return Response.redirect(fallbackUrl, 303);
    }
  },
});

export default define.page(function LandlordMessages({ data }) {
  const { stateData, messagePage, filters, error } = data as MessagesPageData;
  const { messages, page, pageSize, total, totalPages } = messagePage;
  const startIndex = total === 0 ? 0 : (page - 1) * pageSize + 1;
  const endIndex = Math.min(total, page * pageSize);
  const returnTo = buildPageUrl(filters, page);
  const hasMessages = messages.length > 0;

  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 flex-col gap-4 py-6 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <h1 class="text-3xl font-bold text-gray-900">
                Messages
              </h1>
              <p class="mt-1 text-sm text-gray-500">
                Review all landlord-tenant conversations in one place.
              </p>
            </div>
            <div class="flex flex-wrap gap-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>
        )}

        <form method="GET" class="bg-white shadow rounded-lg p-6 mb-8">
          <div class="grid grid-cols-1 gap-4 lg:grid-cols-5">
            <div class="lg:col-span-2">
              <label class="block text-sm font-medium text-gray-700">
                Search
              </label>
              <input
                type="text"
                name="q"
                value={filters.search}
                placeholder="Search subject or message..."
                class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700">
                Status
              </label>
              <select
                name="status"
                class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
              >
                {STATUS_VALUES.map((value) => (
                  <option value={value} selected={filters.status === value}>
                    {value === "all"
                      ? "All"
                      : value === "read"
                      ? "Read"
                      : "Unread"}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700">
                Type
              </label>
              <select
                name="type"
                class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
              >
                {TYPE_VALUES.map((value) => (
                  <option value={value} selected={filters.type === value}>
                    {value === "all"
                      ? "All"
                      : value.charAt(0).toUpperCase() + value.slice(1)}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700">
                Direction
              </label>
              <select
                name="direction"
                class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
              >
                {DIRECTION_VALUES.map((value) => (
                  <option value={value} selected={filters.direction === value}>
                    {value === "all"
                      ? "All"
                      : value === "sent"
                      ? "Sent"
                      : "Received"}
                  </option>
                ))}
              </select>
            </div>
          </div>

          <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
            <div>
              <label class="block text-sm font-medium text-gray-700">
                Sort by
              </label>
              <select
                name="sort"
                class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
              >
                {SORT_VALUES.map((value) => (
                  <option value={value} selected={filters.sort === value}>
                    {value === "newest" ? "Newest first" : "Oldest first"}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700">
                Page size
              </label>
              <select
                name="page_size"
                class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
              >
                {PAGE_SIZES.map((size) => (
                  <option value={size} selected={filters.pageSize === size}>
                    {size} per page
                  </option>
                ))}
              </select>
            </div>
            <div class="flex items-end">
              <button 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">
                Apply Filters
              </button>
            </div>
          </div>
        </form>

        <div
          class="bg-white shadow rounded-lg"
          data-message-form
          data-status-filter={filters.status}
          data-e2e-user={stateData.user_id || ""}
        >
          <form
            method="POST"
            id="bulk-delete-form"
            class="px-4 py-5 sm:px-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
          >
            <input type="hidden" name="return_to" value={returnTo} />
            <div>
              <h2 class="text-lg font-semibold text-gray-900">
                All Messages
              </h2>
              <p class="text-sm text-gray-500">
                showing {startIndex}-{endIndex} of {total} messages
              </p>
            </div>
            <div class="flex flex-wrap items-center gap-3 text-sm text-gray-500">
              <label class="inline-flex items-center gap-2">
                <input
                  type="checkbox"
                  class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                  data-select-all
                  disabled={!hasMessages}
                />
                <span>Select all</span>
              </label>
              <button
                type="submit"
                name="action"
                value="delete_selected"
                class="inline-flex items-center px-3 py-2 rounded-md border border-red-200 text-red-600 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed"
                data-delete-button
                disabled
              >
                Delete selected
              </button>
              <span>
                page {page} of {totalPages}
              </span>
            </div>
          </form>

          {messages.length === 0
            ? (
              <div class="px-6 py-12 text-center text-sm text-gray-500">
                No messages match the selected filters.
              </div>
            )
            : (
              <div class="divide-y divide-gray-200">
                {messages.map((message) => {
                  const isOutbound = message.sender_id === stateData.user_id;
                  const counterpart = isOutbound
                    ? message.recipient_name || "Recipient"
                    : message.sender_name || "Tenant";
                  const replyRecipientId = isOutbound
                    ? message.recipient_id
                    : message.sender_id;
                  const replySubject = message.subject
                    ? `Re: ${message.subject}`
                    : "Re: Message";
                  const canReply = Boolean(replyRecipientId);
                  const isUnreadInbound = !isOutbound &&
                    message.recipient_id === stateData.user_id &&
                    !message.is_read;
                  const subjectClass = isUnreadInbound
                    ? "mt-2 text-sm font-semibold text-gray-900"
                    : "mt-2 text-sm font-medium text-gray-700";
                  const previewClass = isUnreadInbound
                    ? "mt-1 text-sm text-gray-700 line-clamp-2"
                    : "mt-1 text-sm text-gray-500 line-clamp-2";
                  const panelId = `message-panel-${message.id}`;
                  return (
                    <div
                      key={message.id}
                      class="px-6 py-5"
                      data-message-row
                      data-message-status={isUnreadInbound ? "unread" : "read"}
                    >
                      <div class="flex items-start gap-4">
                        <input
                          type="checkbox"
                          name="message_ids"
                          value={message.id}
                          form="bulk-delete-form"
                          class="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                          data-message-checkbox
                          aria-label={`Select message ${
                            message.subject || "No subject"
                          }`}
                        />
                        <div class="flex-1">
                          <button
                            type="button"
                            class="w-full text-left rounded-lg p-2 -m-2 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
                            data-message-toggle
                            data-message-id={message.id}
                            data-message-unread={isUnreadInbound
                              ? "true"
                              : "false"}
                            aria-expanded="false"
                            aria-controls={panelId}
                          >
                            <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                              <div class="flex-1">
                                <div class="flex items-center gap-2">
                                  <span class="text-xs uppercase tracking-wide text-gray-400">
                                    {isOutbound ? "To" : "From"}
                                  </span>
                                  <span class="text-sm font-medium text-gray-900">
                                    {counterpart}
                                  </span>
                                </div>
                                <p
                                  class={subjectClass}
                                  data-message-subject
                                >
                                  {message.subject || "No subject"}
                                </p>
                                <p
                                  class={previewClass}
                                  data-message-preview
                                >
                                  {message.content ||
                                    "Message content is unavailable."}
                                </p>
                                {message.property_address && (
                                  <p class="mt-2 text-xs text-gray-400">
                                    Property: {message.property_address}
                                  </p>
                                )}
                              </div>
                              <div class="flex flex-col items-start gap-2 text-sm text-gray-500 lg:items-end">
                                <span>
                                  {message.message_type
                                    ? message.message_type.charAt(0)
                                      .toUpperCase() +
                                      message.message_type.slice(1)
                                    : "General"}
                                </span>
                                <span class="inline-flex items-center gap-2">
                                  {message.created_on
                                    ? new Date(message.created_on)
                                      .toLocaleDateString()
                                    : "Unknown date"}
                                  {isUnreadInbound && (
                                    <span
                                      class="h-2 w-2 rounded-full bg-blue-600"
                                      data-unread-dot
                                    />
                                  )}
                                </span>
                              </div>
                            </div>
                          </button>
                          <div
                            id={panelId}
                            class="mt-4 hidden"
                            data-message-panel
                          >
                            <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
                              <p class="text-sm text-gray-700 whitespace-pre-line">
                                {message.content ||
                                  "Message content is unavailable."}
                              </p>
                              {message.property_address && (
                                <p class="mt-3 text-xs text-gray-500">
                                  Property: {message.property_address}
                                </p>
                              )}
                            </div>
                            <div class="mt-4">
                              <p class="text-sm font-semibold text-gray-900">
                                Quick reply
                              </p>
                              <p class="mt-1 text-xs text-gray-500">
                                Subject: {replySubject}
                              </p>
                              {canReply
                                ? (
                                  <form
                                    method="POST"
                                    action="/api/create/message"
                                    class="mt-3 space-y-3"
                                  >
                                    <input
                                      type="hidden"
                                      name="sender"
                                      value={returnTo}
                                    />
                                    <input
                                      type="hidden"
                                      name="lease_id"
                                      value={message.lease_id || ""}
                                    />
                                    <input
                                      type="hidden"
                                      name="recipient_id"
                                      value={replyRecipientId || ""}
                                    />
                                    <input
                                      type="hidden"
                                      name="message_type"
                                      value={message.message_type || "general"}
                                    />
                                    <input
                                      type="hidden"
                                      name="subject"
                                      value={replySubject}
                                    />
                                    <textarea
                                      name="content"
                                      rows={6}
                                      required
                                      placeholder="Type your reply..."
                                      class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
                                    />
                                    <div class="flex justify-end">
                                      <button
                                        type="submit"
                                        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"
                                      >
                                        Send reply
                                      </button>
                                    </div>
                                  </form>
                                )
                                : (
                                  <p class="mt-3 text-sm text-gray-500">
                                    Reply is unavailable for this message.
                                  </p>
                                )}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}

          <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between text-sm">
            <a
              href={buildPageUrl(filters, Math.max(1, page - 1))}
              class={`inline-flex items-center px-3 py-2 rounded-md border ${
                page === 1
                  ? "border-gray-200 text-gray-400 pointer-events-none"
                  : "border-gray-300 text-gray-700 hover:bg-gray-50"
              }`}
            >
              Previous
            </a>
            <div class="flex gap-2">
              {Array.from({ length: totalPages }, (_, index) => index + 1)
                .slice(Math.max(0, page - 3), Math.min(totalPages, page + 2))
                .map((pageNumber) => (
                  <a
                    key={pageNumber}
                    href={buildPageUrl(filters, pageNumber)}
                    class={`inline-flex items-center px-3 py-2 rounded-md border ${
                      pageNumber === page
                        ? "border-blue-600 bg-blue-50 text-blue-700"
                        : "border-gray-300 text-gray-700 hover:bg-gray-50"
                    }`}
                  >
                    {pageNumber}
                  </a>
                ))}
            </div>
            <a
              href={buildPageUrl(filters, Math.min(totalPages, page + 1))}
              class={`inline-flex items-center px-3 py-2 rounded-md border ${
                page === totalPages
                  ? "border-gray-200 text-gray-400 pointer-events-none"
                  : "border-gray-300 text-gray-700 hover:bg-gray-50"
              }`}
            >
              Next
            </a>
          </div>
        </div>
        <LandlordMessageSelection />
        <LandlordMessageThreads />
      </div>
    </div>
  );
});