// File: src/pages/User/Me/ExportData.jsx
// UIX version - Theme-aware Export Data Page with DetailLiteView
import React, { useMemo } from "react";
import withPasswordProtection from "../../../hocs/withPasswordProtection";
import Layout from "../../../components/Layout/Layout";
import { DetailLiteView, Button, useUIXTheme } from "../../../components/UIX";
import {
  ArrowDownTrayIcon,
  ComputerDesktopIcon,
  HomeIcon,
  UserIcon,
  ArrowTopRightOnSquareIcon,
} from "@heroicons/react/24/outline";

// Constant empty object to prevent re-renders (reused across renders)
const EMPTY_ENTITY_DATA = {};

const ExportData = () => {
  const { getThemeClasses } = useUIXTheme();

  // Breadcrumb configuration
  const breadcrumbItems = useMemo(
    () => [
      {
        label: "Dashboard",
        to: "/dashboard",
        icon: HomeIcon,
      },
      {
        label: "My Account",
        to: "/me",
        icon: UserIcon,
      },
      {
        label: "Export Data",
        isActive: true,
      },
    ],
    [],
  );

  // Header configuration
  const headerConfig = useMemo(
    () => ({
      title: "Export Your Data",
      subtitle: "Download a complete copy of your account data (GDPR Article 20)",
      icon: ArrowDownTrayIcon,
    }),
    [],
  );

  // Content sections
  const contentSections = useMemo(() => {
    return (
      <div className="space-y-6" role="main" aria-label="Export data information">
        {/* Desktop App Required Notice */}
        <section
          aria-labelledby="desktop-required-heading"
          className={`${getThemeClasses("bg-accent-light")} border-2 ${getThemeClasses("border-accent")} rounded-xl p-6`}
        >
          <div className="flex items-start">
            <ComputerDesktopIcon className={`h-8 w-8 ${getThemeClasses("text-accent")} mr-4 flex-shrink-0 mt-0.5`} aria-hidden="true" />
            <div className="flex-1">
              <h3 id="desktop-required-heading" className={`text-xl font-semibold ${getThemeClasses("text-primary")} mb-3`}>
                Desktop App Required
              </h3>
              <p className={`${getThemeClasses("text-secondary")} mb-4 text-base`}>
                Data export is only available through the <strong>MapleFile Desktop Application</strong>. Due to end-to-end encryption, your files can only be decrypted and exported using the native app.
              </p>
              <a
                href="https://maplefile.com"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Download MapleFile Desktop App (opens in new tab)"
              >
                <Button
                  variant="primary"
                  icon={ArrowTopRightOnSquareIcon}
                >
                  Download at maplefile.com
                </Button>
              </a>
            </div>
          </div>
        </section>

        {/* GDPR Information */}
        <section
          aria-labelledby="gdpr-heading"
          className={`${getThemeClasses("bg-muted")} border ${getThemeClasses("border-secondary")} rounded-xl p-6`}
        >
          <h3 id="gdpr-heading" className={`text-sm font-semibold mb-2 ${getThemeClasses("text-primary")}`}>
            GDPR Article 20 - Right to Data Portability
          </h3>
          <p className={`text-sm ${getThemeClasses("text-secondary")}`}>
            You have the right to receive your personal data in a structured, commonly used, and machine-readable format. The MapleFile Desktop Application provides your complete data archive in standard formats.
          </p>
        </section>
      </div>
    );
  }, [getThemeClasses]);

  // Field sections for DetailLiteView
  const fieldSections = useMemo(() => {
    return [
      {
        column: "primary",
        component: contentSections,
      },
    ];
  }, [contentSections]);

  return (
    <Layout>
      <DetailLiteView
        entityData={EMPTY_ENTITY_DATA} // Stable reference to prevent unnecessary re-renders
        breadcrumbItems={breadcrumbItems}
        headerConfig={headerConfig}
        fieldSections={fieldSections}
        isLoading={false}
      />
    </Layout>
  );
};

export default withPasswordProtection(ExportData);
