'use client'

/**
 * Agent Help Modal
 * Rich contextual help guide for the Agents page.
 * Collapsible sections with Markdown content inside each.
 */

import { X, LifeBuoy } from 'lucide-react'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import { useLanguage } from '@/lib/i18n'

interface AgentHelpProps {
  onClose: () => void
}

const SECTIONS = [
  { key: 'whatIsAgent', defaultOpen: true },
  { key: 'howToUse', defaultOpen: false },
  { key: 'types', defaultOpen: false },
  { key: 'advanced', defaultOpen: false },
  { key: 'tools', defaultOpen: false },
  { key: 'frequency', defaultOpen: false },
  { key: 'targetNotebook', defaultOpen: false },
  { key: 'templates', defaultOpen: false },
  { key: 'tips', defaultOpen: false },
] as const

export function AgentHelp({ onClose }: AgentHelpProps) {
  const { t } = useLanguage()

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
      <div className="bg-white dark:bg-slate-900 rounded-2xl shadow-2xl w-full max-w-3xl max-h-[85vh] flex flex-col mx-4">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-200 dark:border-slate-700 shrink-0">
          <div className="flex items-center gap-2.5">
            <LifeBuoy className="w-5 h-5 text-primary" />
            <h2 className="text-lg font-semibold">{t('agents.help.title')}</h2>
          </div>
          <button
            onClick={onClose}
            className="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Content — collapsible sections */}
        <div className="flex-1 overflow-y-auto px-6 py-2">
          {SECTIONS.map(section => (
            <details
              key={section.key}
              open={section.defaultOpen}
              className="group border-b border-slate-100 dark:border-slate-800 last:border-b-0"
            >
              <summary className="flex items-center gap-2 cursor-pointer py-3 font-medium text-slate-800 dark:text-slate-200 select-none hover:text-primary transition-colors text-sm">
                <span className="text-primary text-xs transition-transform group-open:rotate-90">&#9656;</span>
                {t(`agents.help.${section.key}`)}
              </summary>
              <div className="pb-4 pl-5 prose prose-slate dark:prose-invert prose-sm max-w-none
                prose-headings:font-semibold prose-headings:text-slate-800 dark:prose-headings:text-slate-200
                prose-h3:text-sm prose-h3:mt-3 prose-h3:mb-1
                prose-p:leading-relaxed prose-p:text-slate-600 dark:prose-p:text-slate-400 prose-p:my-1.5
                prose-li:text-slate-600 dark:prose-li:text-slate-400 prose-li:my-0.5
                prose-strong:text-slate-700 dark:prose-strong:text-slate-300
                prose-code:text-primary prose-code:bg-primary/5 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-xs prose-code:before:content-none prose-code:after:content-none
                prose-ul:my-2 prose-ol:my-2
                prose-hr:border-slate-200 dark:prose-hr:border-slate-700
                prose-table:text-xs
                prose-th:text-left prose-th:font-medium prose-th:text-slate-700 dark:prose-th:text-slate-300 prose-th:py-1 prose-th:pr-3
                prose-td:text-slate-600 dark:prose-td:text-slate-400 prose-td:py-1 prose-td:pr-3
                prose-blockquote:border-primary/30 prose-blockquote:text-slate-500 dark:prose-blockquote:text-slate-400
              ">
                <Markdown remarkPlugins={[remarkGfm]}>
                  {t(`agents.help.${section.key}Content`)}
                </Markdown>
              </div>
            </details>
          ))}
        </div>

        {/* Footer */}
        <div className="px-6 py-4 border-t border-slate-200 dark:border-slate-700 shrink-0">
          <button
            onClick={onClose}
            className="w-full px-4 py-2.5 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary/90 transition-colors"
          >
            {t('agents.help.close')}
          </button>
        </div>
      </div>
    </div>
  )
}