// File Path: monorepo/web/frontend/src/pages/Admin/Organization/Detail/LitePage.jsx

import React, { useState, useEffect, useCallback, useMemo } from "react";
import { Link, useNavigate, useParams } from "react-router";
import {
  ChartBarIcon,
  BuildingOffice2Icon,
  InformationCircleIcon,
  ChevronLeftIcon,
  CheckCircleIcon,
  ArchiveBoxIcon,
  EllipsisHorizontalIcon,
  BuildingOfficeIcon,
  CalendarIcon,
  NoSymbolIcon,
  XCircleIcon,
  HomeIcon,
} from "@heroicons/react/24/outline";
import { useOrganizationManager, useAuthManager } from "../../../../services/Services";
import {
  TagsDisplay,
} from "../../../../components/business/displays";
import {
  UIXThemeProvider,
  Breadcrumb,
  Button,
  DetailPageIcon,
  Alert,
  DetailLiteView,
  EditButton,
  Avatar,
  Badge,
  ContactLink,
  AddressDisplay,
  useUIXTheme,
} from "../../../../components/UIX";
import { formatDateForDisplay } from "../../../../services/Helpers/DateFormatter";
import {
  ORGANIZATION_STATUS_ACTIVE,
  ORGANIZATION_STATUS_ARCHIVED,
  ORGANIZATION_TYPE_MAP,
} from "../../../../constants/Organization";

function AdminOrganizationDetailLitePageContent() {
  const { id } = useParams();
  const organizationManager = useOrganizationManager();
  const authManager = useAuthManager();
  const navigate = useNavigate();
  const { getThemeClasses } = useUIXTheme();

  // State management
  const [organization, setOrganization] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // Handle unauthorized access - MEMOIZED
  const onUnauthorized = useCallback(() => {
    navigate("/login?unauthorized=true");
  }, [navigate]);

  // Fetch callbacks - MEMOIZED
  const onFetchSuccess = useCallback((response) => {
    setOrganization(response);
  }, []);

  const onFetchError = useCallback((errorResponse) => {
    setError(
      errorResponse.message ||
        "Failed to load organization details. Please try again.",
    );
  }, []);

  const onFetchDone = useCallback(() => {
    setLoading(false);
  }, []);

  // Fetch organization data - MEMOIZED
  const fetchOrganization = useCallback(() => {
    if (!id) return;

    setLoading(true);
    setError(null);

    organizationManager.getOrganizationDetailWithCallbacks(
      id,
      onFetchSuccess,
      onFetchError,
      onFetchDone,
      onUnauthorized,
    );
  }, [id, organizationManager, onFetchSuccess, onFetchError, onFetchDone, onUnauthorized]);

  // Initial data load
  useEffect(() => {
    window.scrollTo(0, 0);
    fetchOrganization();
  }, [fetchOrganization]);

  // Extract IDs from array of objects - MEMOIZED
  const extractIds = useMemo(
    () => (items) => {
      if (!items || !Array.isArray(items)) return [];
      return items.map((item) => item.id || item.value).filter(Boolean);
    },
    []
  );

  // Get primary contact from organization - MEMOIZED
  const getPrimaryContact = useMemo(
    () => (organization) => {
      if (
        !organization ||
        !organization.contacts ||
        organization.contacts.length === 0
      ) {
        return null;
      }
      // Find primary contact or return first contact
      return (
        organization.contacts.find((c) => c.isPrimary) || organization.contacts[0]
      );
    },
    []
  );

  // Create status badge component (theme-aware, will be rendered inside DetailLiteView) - MEMOIZED
  const createStatusBadge = useMemo(
    () => (organization) => {
      if (!organization) return null;
      if (organization.isBanned) {
        return (
          <Badge variant="error" size="sm">
            <XCircleIcon className="w-3 sm:w-4 h-3 sm:h-4 mr-1" />
            Banned
          </Badge>
        );
      }
      if (organization.status === ORGANIZATION_STATUS_ACTIVE) {
        return (
          <Badge variant="primary" size="sm">
            <CheckCircleIcon className="w-3 sm:w-4 h-3 sm:h-4 mr-1" />
            Active
          </Badge>
        );
      }
      return (
        <Badge variant="secondary" size="sm">
          Archived
        </Badge>
      );
    },
    []
  );

  // Configure DetailLiteView props - ALL MEMOIZED
  const breadcrumbItems = useMemo(() => [
    {
      label: 'Dashboard',
      to: '/admin/dashboard',
      icon: HomeIcon,
      hideOnMobile: false,
      mobileLabel: 'Dash'
    },
    {
      label: 'Organizations',
      to: '/admin/organizations',
      icon: BuildingOffice2Icon
    },
    {
      label: 'Detail',
      icon: InformationCircleIcon,
      isActive: true
    }
  ], []);

  const headerConfig = useMemo(() => ({
    title: "Organization - Summary",
    icon: BuildingOfficeIcon,
    loadingText: "Loading organization details...",
    notFoundTitle: "Organization Not Found",
    notFoundMessage: "The organization you're looking for doesn't exist or you don't have permission to view it.",
    notFoundAction: {
      label: "Back to Organizations",
      icon: ChevronLeftIcon,
      onClick: () => navigate('/admin/organizations')
    }
  }), [navigate]);

  const actionButtons = useMemo(() => [
    {
      variant: "outline",
      onClick: () => navigate('/admin/organizations'),
      icon: ChevronLeftIcon,
      label: "Back"
    },
    {
      component: (
        <EditButton
          onClick={() => navigate(`/admin/organization/${id}/edit`)}
          disabled={organization?.status === ORGANIZATION_STATUS_ARCHIVED}
          variant="primary"
          className="flex-1 sm:flex-initial"
        />
      )
    }
  ], [id, organization?.status, navigate]);

  const tabs = useMemo(() => [
    {
      label: "Summary",
      isActive: true
    },
    {
      label: "Details",
      to: `/admin/organization/${organization?.id}/full`
    },
    {
      label: "Events",
      to: `/admin/organization/${organization?.id}/events`
    },
    {
      label: "Orders",
      to: `/admin/organization/${organization?.id}/orders`
    },
    {
      label: "Comments",
      to: `/admin/organization/${organization?.id}/comments`
    },
    {
      label: "Attachments",
      to: `/admin/organization/${organization?.id}/attachments`
    },
    {
      label: "More",
      to: `/admin/organization/${organization?.id}/more`,
      icon: EllipsisHorizontalIcon
    }
  ], [organization?.id]);

  const fieldSections = useMemo(() => [
    // Avatar section (using organization logo if available)
    {
      type: 'avatar',
      component: (
        <Avatar
          src={organization?.logoUrl}
          alt={organization?.logoUrl ? "Organization Logo" : "No Logo"}
          size="lg"
          borderStyle="default"
          showFallbackIcon={true}
          fallbackIcon={BuildingOffice2Icon}
        />
      )
    },
    // Primary column sections
    {
      column: 'primary',
      className: 'mb-3 sm:mb-4 lg:mb-5',
      component: (
        <div>
          <h2 className={`text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold ${getThemeClasses("text-primary")} flex items-center justify-center xl:justify-start mb-2`}>
            <span className="break-words">
              {organization?.organizationName || organization?.name}
            </span>
          </h2>
          {organization?.organizationShortName && (
            <p className={`text-sm sm:text-base ${getThemeClasses("text-secondary")} text-center xl:text-left`}>
              ({organization.organizationShortName})
            </p>
          )}
          <div className={`mt-2 text-sm lg:text-base ${getThemeClasses("text-secondary")} text-center xl:text-left`}>
            <Badge variant="primary" size="md">
              {ORGANIZATION_TYPE_MAP[organization?.organizationType] || "Unknown"}
            </Badge>
          </div>
        </div>
      )
    },
    {
      column: 'primary',
      className: 'mb-3 sm:mb-4 lg:mb-5',
      component: (
        <div>
          {/* Primary Contact */}
          {getPrimaryContact(organization) && (
            <div className="mb-3 text-center xl:text-left">
              <h3 className={`text-base sm:text-lg font-semibold ${getThemeClasses("text-primary")} mb-2`}>
                Primary Contact
              </h3>
              <p className={`text-sm sm:text-base ${getThemeClasses("text-secondary")}`}>
                {getPrimaryContact(organization).firstName}{" "}
                {getPrimaryContact(organization).lastName}
                {getPrimaryContact(organization).title && (
                  <span className={getThemeClasses("text-muted")}>
                    {" "}
                    - {getPrimaryContact(organization).title}
                  </span>
                )}
              </p>
            </div>
          )}
          {/* Address */}
          <AddressDisplay
            addressData={organization}
            size="md"
            showIcon={true}
            showMapsLink={true}
          />
        </div>
      )
    },
    {
      column: 'primary',
      className: 'space-y-2 sm:space-y-3',
      component: (
        <div className="space-y-2 sm:space-y-3">
          <ContactLink
            type="email"
            value={getPrimaryContact(organization)?.email || organization?.contactEmail}
            size="md"
            fallbackText="No email"
          />
          <ContactLink
            type="phone"
            value={getPrimaryContact(organization)?.phone || organization?.contactPhone}
            size="md"
            fallbackText="No phone"
          />
          {organization?.website && (
            <ContactLink
              type="website"
              value={organization.website}
              size="md"
              fallbackText="No website"
            />
          )}
        </div>
      )
    },
    // Secondary column sections
    {
      column: 'secondary',
      component: (
        <TagsDisplay
          values={extractIds(organization?.tags)}
          label="Tags"
          onUnauthorized={onUnauthorized}
        />
      )
    },
    {
      column: 'secondary',
      component: (
        <div className={`space-y-2 text-xs sm:text-sm lg:text-base ${getThemeClasses("text-secondary")}`}>
          {organization?.createdAt && (
            <div className="flex items-center justify-center xl:justify-start">
              <CalendarIcon className={`w-3 sm:w-4 h-3 sm:h-4 lg:w-5 lg:h-5 mr-2 ${getThemeClasses("text-muted")}`} />
              <span className="font-medium">Created:</span>
              <span className="ml-2">
                {formatDateForDisplay(organization.createdAt)}
              </span>
            </div>
          )}
          {organization?.modifiedAt && (
            <div className="flex items-center justify-center xl:justify-start">
              <CalendarIcon className={`w-3 sm:w-4 h-3 sm:h-4 lg:w-5 lg:h-5 mr-2 ${getThemeClasses("text-muted")}`} />
              <span className="font-medium">Last Modified:</span>
              <span className="ml-2">
                {formatDateForDisplay(organization.modifiedAt)}
              </span>
            </div>
          )}
          <div className="flex items-center justify-center xl:justify-start">
            <CheckCircleIcon className={`w-3 sm:w-4 h-3 sm:h-4 lg:w-5 lg:h-5 mr-2 ${getThemeClasses("text-muted")}`} />
            <span className="font-medium">Status:</span>
            <span className="ml-2">
              {createStatusBadge(organization)}
            </span>
          </div>
        </div>
      )
    }
  ].filter(section => section.component), [organization, getPrimaryContact, extractIds, onUnauthorized, createStatusBadge]); // Filter out sections with falsy components

  const alerts = useMemo(() => ({
    archived: {
      message: "This organization is archived",
      icon: ArchiveBoxIcon
    },
    banned: {
      message: "This organization is banned",
      icon: NoSymbolIcon
    }
  }), []);

  return (
    <DetailLiteView
      entityData={organization}
      breadcrumbItems={breadcrumbItems}
      headerConfig={headerConfig}
      fieldSections={fieldSections}
      actionButtons={actionButtons}
      tabs={tabs}
      alerts={alerts}
      onUnauthorized={onUnauthorized}
      isLoading={loading}
      error={error}
      onErrorClose={() => setError(null)}
    />
  );
}

function AdminOrganizationDetailLitePage() {
  return (
    <UIXThemeProvider>
      <AdminOrganizationDetailLitePageContent />
    </UIXThemeProvider>
  );
}

export default AdminOrganizationDetailLitePage;