// File: src/pages/User/Help/Help.jsx
// UIX version - Theme-aware Help Page with Layout
import React from "react";
import { useNavigate } from "react-router";
import withPasswordProtection from "../../../hocs/withPasswordProtection";
import Layout from "../../../components/Layout/Layout";
import { Button, Card, Breadcrumb, GDPRFooter, useUIXTheme } from "../../../components/UIX";
import {
  QuestionMarkCircleIcon,
  ShieldCheckIcon,
  FolderIcon,
  CloudArrowUpIcon,
  ArrowDownTrayIcon,
  ShareIcon,
  TrashIcon,
  DocumentTextIcon,
  LockClosedIcon,
  HomeIcon,
} from "@heroicons/react/24/outline";

const Help = () => {
  const navigate = useNavigate();
  const { getThemeClasses } = useUIXTheme();

  const helpSections = [
    {
      title: "Getting Started",
      icon: QuestionMarkCircleIcon,
      color: getThemeClasses("help-section-blue-text"),
      bgColor: getThemeClasses("help-section-blue-bg"),
      items: [
        {
          title: "What is MapleFile?",
          description:
            "MapleFile is a secure, end-to-end encrypted file storage platform. All your files are encrypted on your device before being uploaded, ensuring complete privacy.",
        },
        {
          title: "Creating Your First Folder",
          description:
            "Navigate to File Manager and click 'Create Folder' to organize your files. Folders are called Collections in MapleFile and can be nested for better organization.",
        },
        {
          title: "Uploading Files",
          description:
            "Click 'Upload Files' or drag and drop files directly into any folder. Files are automatically encrypted before upload using your encryption keys.",
        },
      ],
    },
    {
      title: "Security & Encryption",
      icon: ShieldCheckIcon,
      color: getThemeClasses("help-section-green-text"),
      bgColor: getThemeClasses("help-section-green-bg"),
      items: [
        {
          title: "End-to-End Encryption (E2EE)",
          description:
            "Your files are encrypted on your device before upload. MapleFile servers never have access to your unencrypted data or encryption keys.",
        },
        {
          title: "Encryption Keys",
          description:
            "Each folder has its own encryption key, which is encrypted with your Master Key. Your Master Key is encrypted with a Key Encryption Key (KEK) derived from your password.",
        },
        {
          title: "Password Security",
          description:
            "Always use a strong, unique password. If you lose your password, your data cannot be recovered - this is the trade-off for true end-to-end encryption.",
        },
      ],
    },
    {
      title: "File Management",
      icon: FolderIcon,
      color: getThemeClasses("help-section-purple-text"),
      bgColor: getThemeClasses("help-section-purple-bg"),
      items: [
        {
          title: "Organizing with Folders",
          description:
            "Create nested folders to organize your files. Each folder can have sub-folders and files, creating a hierarchical structure.",
        },
        {
          title: "Searching Files",
          description:
            "Use the search feature to quickly find files and folders by name. Search works across all your collections and shared items.",
        },
        {
          title: "Downloading Files",
          description:
            "Click the download icon on any file to decrypt and download it to your device. Files are decrypted automatically using your cached encryption keys.",
        },
      ],
    },
    {
      title: "Sharing & Collaboration",
      icon: ShareIcon,
      color: getThemeClasses("help-section-pink-text"),
      bgColor: getThemeClasses("help-section-pink-bg"),
      items: [
        {
          title: "Sharing Folders",
          description:
            "Share entire folders with other MapleFile users. You can grant read-only or read-write permissions to collaborators.",
        },
        {
          title: "Permission Levels",
          description:
            "Read-Only: Recipients can view and download files. Read-Write: Recipients can add, modify, and delete files. Admin: Full control including sharing with others.",
        },
        {
          title: "Encryption Key Sharing",
          description:
            "When you share a folder, the folder's encryption key is securely shared with recipients, encrypted with their public key for maximum security.",
        },
      ],
    },
    {
      title: "Data Management",
      icon: TrashIcon,
      color: getThemeClasses("help-section-red-text"),
      bgColor: getThemeClasses("help-section-red-bg"),
      items: [
        {
          title: "Trash & Recovery",
          description:
            "Deleted files are moved to Trash where they can be restored or permanently deleted. Files in Trash still count toward your storage quota.",
        },
        {
          title: "Storage Quota",
          description:
            "Monitor your storage usage in the Dashboard. Your account has a storage limit - manage your files and empty Trash regularly to stay within limits.",
        },
        {
          title: "Data Export (GDPR)",
          description:
            "You have the right to export all your data. Use the MapleFile Desktop Application to download a complete archive of your encrypted files and metadata.",
        },
      ],
    },
  ];

  const quickActions = [
    {
      title: "Upload Files",
      description: "Start uploading your encrypted files",
      icon: CloudArrowUpIcon,
      path: "/file-manager/upload",
      color: getThemeClasses("text-primary"),
    },
    {
      title: "File Manager",
      description: "Browse and organize your files",
      icon: FolderIcon,
      path: "/file-manager",
      color: getThemeClasses("text-primary"),
    },
    {
      title: "Export Data",
      description: "Download your complete data archive",
      icon: ArrowDownTrayIcon,
      path: "/me/export-data",
      color: getThemeClasses("text-primary"),
    },
    {
      title: "My Profile",
      description: "Manage your account settings",
      icon: DocumentTextIcon,
      path: "/me",
      color: getThemeClasses("text-primary"),
    },
  ];

  const breadcrumbItems = [
    {
      label: "Dashboard",
      to: "/dashboard",
      icon: HomeIcon,
    },
    {
      label: "Help",
      isActive: true,
    },
  ];

  return (
    <Layout>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Breadcrumb Navigation */}
        <Breadcrumb items={breadcrumbItems} />

        {/* Main Card */}
        <Card>
          {/* Header with icon, title, and action button */}
          <div className={`p-6 border-b ${getThemeClasses("border-secondary")}`}>
            <div className="flex flex-col space-y-4 lg:flex-row lg:items-center lg:justify-between lg:space-y-0">
              <div className="flex-1 min-w-0">
                <div className="flex items-start">
                  {/* Icon */}
                  <div className={`p-3 rounded-2xl shadow-lg mr-4 flex-shrink-0 ${getThemeClasses("bg-gradient-secondary")}`}>
                    <QuestionMarkCircleIcon className="h-8 w-8 sm:h-10 sm:w-10 text-white" />
                  </div>
                  {/* Title and subtitle */}
                  <div>
                    <h1 className={`text-2xl sm:text-3xl lg:text-4xl font-bold ${getThemeClasses("text-primary")} leading-tight`}>
                      Help & Documentation
                    </h1>
                    <p className={`mt-2 text-base sm:text-lg ${getThemeClasses("text-secondary")}`}>
                      Learn how to use MapleFile's secure file storage features
                    </p>
                  </div>
                </div>
              </div>
              {/* Action button */}
              <div className="flex-shrink-0">
                <Button
                  onClick={() => navigate("/dashboard")}
                  variant="secondary"
                  size="sm"
                >
                  <span className="inline-flex items-center gap-2">
                    <HomeIcon className="h-4 w-4" />
                    <span>Back to Dashboard</span>
                  </span>
                </Button>
              </div>
            </div>
          </div>

          {/* Content */}
          <div className="p-6">
            {/* Quick Actions */}
            <div className="mb-8">
              <h2 className={`text-xl font-semibold mb-4 ${getThemeClasses("text-primary")}`}>
                Quick Actions
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4" role="list" aria-label="Quick actions">
                {quickActions.map((action, index) => (
                  <div
                    key={index}
                    role="listitem"
                    tabIndex={0}
                    aria-label={`${action.title}: ${action.description}`}
                    className={`p-4 rounded-lg border ${getThemeClasses("border-secondary")} ${getThemeClasses("bg-card")} ${getThemeClasses("hover:shadow")} ${getThemeClasses("hover:border-primary")} cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500`}
                    onClick={() => navigate(action.path)}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" || e.key === " ") {
                        e.preventDefault();
                        navigate(action.path);
                      }
                    }}
                  >
                    <div className={`h-10 w-10 rounded-lg ${getThemeClasses("bg-accent-light")} flex items-center justify-center mb-3`} aria-hidden="true">
                      <action.icon className={`h-6 w-6 ${action.color}`} />
                    </div>
                    <h3 className={`font-medium mb-1 ${getThemeClasses("text-primary")}`}>
                      {action.title}
                    </h3>
                    <p className={`text-sm ${getThemeClasses("text-secondary")}`}>
                      {action.description}
                    </p>
                  </div>
                ))}
              </div>
            </div>

            {/* Help Sections */}
            <div className="space-y-8">
              {helpSections.map((section, sectionIndex) => (
                <section key={sectionIndex} aria-labelledby={`section-${sectionIndex}`}>
                  <div className="flex items-center mb-4">
                    <div className={`h-10 w-10 rounded-lg ${section.bgColor} flex items-center justify-center mr-3`} aria-hidden="true">
                      <section.icon className={`h-6 w-6 ${section.color}`} />
                    </div>
                    <h2 id={`section-${sectionIndex}`} className={`text-2xl font-bold ${getThemeClasses("text-primary")}`}>
                      {section.title}
                    </h2>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" role="list" aria-label={`${section.title} topics`}>
                    {section.items.map((item, itemIndex) => (
                      <article
                        key={itemIndex}
                        role="listitem"
                        className={`p-6 rounded-lg border ${getThemeClasses("border-secondary")} ${getThemeClasses("bg-card")} h-full`}
                      >
                        <h3 className={`text-lg font-semibold mb-3 ${getThemeClasses("text-primary")}`}>
                          {item.title}
                        </h3>
                        <p className={`text-sm ${getThemeClasses("text-secondary")} leading-relaxed`}>
                          {item.description}
                        </p>
                      </article>
                    ))}
                  </div>
                </section>
              ))}
            </div>

            {/* Privacy & Security Notice */}
            <div className={`mt-12 p-6 rounded-lg ${getThemeClasses("bg-accent-light")}`}>
              <div className="flex items-start">
                <LockClosedIcon className={`h-6 w-6 ${getThemeClasses("text-accent")} mr-3 flex-shrink-0 mt-0.5`} aria-hidden="true" />
                <div className="flex-1">
                  <h3 className={`text-lg font-semibold mb-2 ${getThemeClasses("text-primary")}`}>
                    Privacy & Security Notice
                  </h3>
                  <p className={`text-sm ${getThemeClasses("text-secondary")} mb-3`}>
                    MapleFile uses end-to-end encryption to protect your data. This means:
                  </p>
                  <ul className={`space-y-2 text-sm ${getThemeClasses("text-secondary")}`} role="list">
                    <li className="flex items-start">
                      <span className={`mr-2 ${getThemeClasses("text-accent")}`} aria-hidden="true">•</span>
                      <span>Your files are encrypted before leaving your device</span>
                    </li>
                    <li className="flex items-start">
                      <span className={`mr-2 ${getThemeClasses("text-accent")}`} aria-hidden="true">•</span>
                      <span>MapleFile cannot access, read, or decrypt your files</span>
                    </li>
                    <li className="flex items-start">
                      <span className={`mr-2 ${getThemeClasses("text-accent")}`} aria-hidden="true">•</span>
                      <span>If you forget your password, your data cannot be recovered</span>
                    </li>
                    <li className="flex items-start">
                      <span className={`mr-2 ${getThemeClasses("text-accent")}`} aria-hidden="true">•</span>
                      <span>Always keep your recovery keys safe and secure</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            {/* Support Section */}
            <div className={`mt-8 p-6 rounded-lg border ${getThemeClasses("border-secondary")}`}>
              <h3 className={`text-lg font-semibold mb-3 ${getThemeClasses("text-primary")}`}>
                Need More Help?
              </h3>
              <p className={`text-sm ${getThemeClasses("text-secondary")} mb-4`}>
                If you have questions not covered in this help documentation:
              </p>
              <ul className={`space-y-2 text-sm ${getThemeClasses("text-secondary")}`} role="list">
                <li className="flex items-start">
                  <span className={`mr-2 ${getThemeClasses("text-accent")}`} aria-hidden="true">•</span>
                  <span>Check the README.md file in the MapleFile repository</span>
                </li>
                <li className="flex items-start">
                  <span className={`mr-2 ${getThemeClasses("text-accent")}`} aria-hidden="true">•</span>
                  <span>Open an issue on Codeberg for technical support</span>
                </li>
                <li className="flex items-start">
                  <span className={`mr-2 ${getThemeClasses("text-accent")}`} aria-hidden="true">•</span>
                  <span>Review the application's documentation and user guide</span>
                </li>
              </ul>
            </div>
          </div>
        </Card>

        {/* GDPR Footer */}
        <GDPRFooter className="mt-8" />
      </div>
    </Layout>
  );
};

export default withPasswordProtection(Help);
