import { useState } from 'react';
import { AppModal } from './AppModal';
import { CLIENT_VERSION } from '../../version';

// `answer` is a string, or an array of strings for a multi-paragraph answer.
const FAQ_ITEMS = [
  {
    id: 'checkout',
    question: 'What is checking out?',
    answer:
      'To check out a file or folder, select it and click "Checkout". Checking out gives you the exclusive right to edit it: while a file is checked out to you, nobody else can submit changes to it. This protects your work from being overwritten and stops two people from editing the same file at the same time, so you never lose changes to a surprise conflict.',
  },
  {
    id: 'revert',
    question: 'What does reverting mean?',
    answer: [
      'Reverting a local file resets it to the server’s version. It discards your changes and gives you a clean, up-to-date copy of the file.',
      'Reverting a server file will perform a rollback, changing the file to match a previous revision exactly as it was then. The graph view can help you view a file with complex history to find a specific revision.',
    ],
  },
  {
    id: 'howto',
    question: 'How should I use revision control?',
    answer:
      'Start every work session by checking out what you plan to touch, so nobody else changes it while you work. When you’re done, mark any brand-new files to be added, then select all your changes and click "Submit" — or click "List Changes" first to review everything you’ve changed. Write a brief but accurate description of what you did and submit. If something conflicts, the client will try its best to tell you exactly why so you can sort it out.',
  },
  {
    id: 'upload',
    question: "Why can't I upload a file?",
    answer:
      'A submit can be refused for a few reasons. The file’s name might break a cross-platform naming rule, which shows up as a naming issue status. The file might be on the ignore list (ignore.txt), which deliberately keeps things like settings and temporary files out of the shared repository. Or the file might conflict with a newer copy already on the server because someone changed it since you last synced — revert to pull the latest version, then re-apply your work and submit again.',
  },
  {
    id: 'multi-device',
    question: 'How do I use a repository with multiple devices?',
    answer:
      'Each device is its own workspace and can check out files independently. A lock is tied to the device that made it, so if you make changes on one computer you must check them in (submit) before you can use them on another. If you get stuck — say you left something checked out on a computer you can’t reach — you can force check-in your own files from your device list.',
  },
];

export function HelpModal({ onClose }) {
  const [openIds, setOpenIds] = useState(() => new Set());

  const toggle = (id) => {
    setOpenIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  };

  return (
    <AppModal
      title="Help"
      icon="assets/help.svg"
      className="app-modal--help"
      onClose={onClose}
    >
      <div className="help-faq">
        {FAQ_ITEMS.map((item) => {
          const isOpen = openIds.has(item.id);
          const paragraphs = Array.isArray(item.answer) ? item.answer : [item.answer];
          return (
            <div
              key={item.id}
              className={`help-faq-item${isOpen ? ' help-faq-item--open' : ''}`}
            >
              <button
                type="button"
                className="help-faq-question"
                aria-expanded={isOpen}
                onClick={() => toggle(item.id)}
              >
                <img
                  src="assets/arrow_right.svg"
                  alt=""
                  className="help-faq-chevron"
                />
                <span className="help-faq-question-text">{item.question}</span>
              </button>
              {isOpen &&
                paragraphs.map((text, i) => (
                  <p key={i} className="help-faq-answer">
                    {text}
                  </p>
                ))}
            </div>
          );
        })}
      </div>
      {/* Inside the scroll area on purpose: the modal grows with its content
          up to .app-modal's max-height, past which this scrolls out of view
          like anything else here. */}
      {/* Derived from package.json via vite's __CAMBIUM_VERSION__ (see
          src/version.js), not typed in — this line used to be a hardcoded
          "0.1.0" and was still claiming it at 0.2.0. A release bumps
          package.json and this follows. */}
      <p className="help-version">
        Cambium <span className="help-version-number">{CLIENT_VERSION}</span>
      </p>
      <p className="help-copyright">© Ridgeway Interactive 2026</p>
    </AppModal>
  );
}
