import React from 'react'
import { useStore } from '@nanostores/react'
import { Link } from 'react-router-dom'
import { documentUiEnabledStore, setDocumentUiEnabled } from '../stores'

type Props = {
  isOpen: boolean
  onClose: () => void
  skipIntro: boolean
  onSkipIntroChange: (skip: boolean) => void
}

export const ConfigModal: React.FC<Props> = ({ isOpen, onClose, skipIntro, onSkipIntroChange }) => {
  const documentUiEnabled = useStore(documentUiEnabledStore)

  if (!isOpen) return null

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="config-modal" onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <h2>Configuration</h2>
          <button className="close-btn" onClick={onClose}>{'\u00D7'}</button>
        </div>

        <div className="modal-content">
          <div className="config-option">
            <label className="config-label">
              <input
                type="checkbox"
                checked={skipIntro}
                onChange={e => onSkipIntroChange(e.target.checked)}
                className="config-checkbox"
              />
              <span className="config-text">Skip Intro</span>
            </label>
            <div className="config-description">
              Skip the loading screen animation on startup
            </div>
          </div>

          <div className="config-option" style={{ marginTop: '16px' }}>
            <label className="config-label">
              <input
                type="checkbox"
                checked={documentUiEnabled}
                onChange={e => setDocumentUiEnabled(e.target.checked)}
                className="config-checkbox"
              />
              <span className="config-text">Enable Document UI (Experimental)</span>
            </label>
            <div className="config-description">
              Replace the directive management interface with an interactive document editor. This is a proof of concept.
            </div>
            {documentUiEnabled && (
              <Link
                to="/directives"
                style={{ display: 'inline-block', marginTop: '8px', color: '#ff66cc', fontSize: '0.9em' }}
                onClick={onClose}
              >
                Open Directives Editor {'\u2192'}
              </Link>
            )}
          </div>
        </div>

        <div className="modal-footer">
          <button className="modal-btn" onClick={onClose}>Close</button>
        </div>
      </div>
    </div>
  )
}