// routes/tenant/settings/index.tsx
import { define } from "../../../utils.ts";
import { page } from "fresh";
import { getUser } from "../../../services/userService.ts";
import { User } from "../../../db/interfaces.ts";
import TenantSettings from "../../../islands/TenantSettings.tsx";

interface SettingsPageData {
  user: User;
  error?: string;
}

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

    if (!user_id) {
      return new Response("", {
        status: 302,
        headers: { Location: "/auth/login" },
      });
    }

    try {
      const user = await getUser(user_id);

      if (!user) {
        return page<SettingsPageData>({
          user: {} as User,
          error: "User profile not found.",
        });
      }

      // Parse JSON fields for the island component
      const notificationPreferences = user.notification_preferences_json
        ? JSON.parse(user.notification_preferences_json as string)
        : {};
      const paymentPreferences = user.payment_preferences_json
        ? JSON.parse(user.payment_preferences_json as string)
        : {};

      // Pass parsed objects back to the page component
      user.notification_preferences_json = notificationPreferences;
      user.payment_preferences_json = paymentPreferences;

      return page<SettingsPageData>({
        user,
      });
    } catch (error) {
      console.error("Error loading settings:", error);
      return page<SettingsPageData>({
        user: {} as User,
        error: "Failed to load settings.",
      });
    }
  },
});

export default define.page(function TenantSettingsPage({ data }: { data: SettingsPageData }) {
  const { user, error } = data as SettingsPageData;

  if (error) {
    return (
      <div class="min-h-screen bg-gray-50 p-8">
        <div class="max-w-4xl mx-auto">
          <h1 class="text-3xl font-bold text-red-600 mb-4">Error</h1>
          <p class="text-gray-700">{error}</p>
          <div class="mt-6">
            <a
              href="/tenant/dashboard"
              class="text-blue-600 hover:text-blue-500 font-medium"
            >
              Go to Dashboard
            </a>
          </div>
        </div>
      </div>
    );
  }

  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="py-6">
            <h1 class="text-3xl font-bold text-gray-900">Tenant Settings</h1>
            <p class="mt-1 text-sm text-gray-500">
              Manage your notification and payment preferences.
            </p>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div class="max-w-4xl mx-auto sm:px-6 lg:px-8 py-8">
        <TenantSettings user={user} />
      </div>
    </div>
  );
});