import NginxLinkInstructions from "@/common/NginxLinkInstructions";
import Tooltip from "@/common/Tooltip";
import Badge from "@/components/Badge";
import Card, { CardContent, CardHeader } from "@/components/Card";
import Notice from "@/components/Notice";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import ControlsGroup from "@/pages/settings/controls/ControlsGroup";
import { useSettingsStore } from "@/store/optionsStore";
import { useAppStore } from "@/store/store";
import { createInterpolateElement } from "@wordpress/element";
import { __ } from "@wordpress/i18n";

const AdvancedCache = () => {
  const { isToggleOn } = useSettingsStore();
  const { validPro } = useAppStore();

  const controls = [
    {
      id: 'cf_fallback_cache_curl',
      type: 'toggle',
      label: __('Use cURL', 'wp-cloudflare-page-cache'),
      description: __('Use cURL instead of WordPress advanced-cache.php to generate the page cache. It can increase the time it takes to generate the Page cache but improves compatibility with other performance plugins.', 'wp-cloudflare-page-cache'),
    },
    {
      id: 'cf_fallback_cache_ttl',
      type: 'number',
      min: 0,
      label: `${__('Cache Lifespan', 'wp-cloudflare-page-cache')} (${__('seconds', 'wp-cloudflare-page-cache')})`,
      description: __('Enter 0 for no expiration.', 'wp-cloudflare-page-cache'),
      hide: !isToggleOn('cf_fallback_cache'),
    },
    {
      id: 'stale_while_revalidate',
      type: 'toggle',
      label: __('Enable stale-while-revalidate for HTML cache', 'wp-cloudflare-page-cache'),
      description: __('Serve stale HTML briefly while the cache is refreshed in the background.', 'wp-cloudflare-page-cache'),
    },
    {
      id: 'stale_while_revalidate_ttl',
      type: 'number',
      min: 0,
      label: `${__('Stale window', 'wp-cloudflare-page-cache')} (${__('seconds', 'wp-cloudflare-page-cache')})`,
      description: __('How long an expired HTML page may still be served while a background refresh is triggered.', 'wp-cloudflare-page-cache'),
      hide: !isToggleOn('stale_while_revalidate'),
    },
    {
      id: 'cf_fallback_cache_save_headers',
      type: 'toggle',
      label: __('Save response headers', 'wp-cloudflare-page-cache'),
      description: `${__('Save response headers together with HTML code.', 'wp-cloudflare-page-cache')} ${__('The following response header will never be saved:', 'wp-cloudflare-page-cache')}`,
      hide: !isToggleOn('cf_fallback_cache'),
      children: <pre className="text-xs mt-1">cache-control, set-cookie, X-WP-CF-Super-Cache*</pre>
    },
    {
      id: 'cf_fallback_cache_http_response_code',
      type: 'toggle',
      label: __('Don\'t cache 4xx / 5xx responses', 'wp-cloudflare-page-cache'),
      description: __('Exclude 4xx and 5xx HTTP error responses from being cached.', 'wp-cloudflare-page-cache'),
      hide: !isToggleOn('cf_fallback_cache'),
    },
    {
      id: 'cf_fallback_cache_prevent_cache_urls_without_trailing_slash',
      type: 'toggle',
      label: __('Prevent caching URLs without a trailing slash (/)', 'wp-cloudflare-page-cache'),
      hide: !isToggleOn('cf_fallback_cache'),
    },
    {
      id: 'cf_auto_purge_on_comments',
      type: 'toggle',
      label: __('Auto-Purge Cache on Comment Activity', 'wp-cloudflare-page-cache'),
      description: __('Automatically purge single post cache when a new comment is inserted into the database or when a comment is approved or deleted', 'wp-cloudflare-page-cache'),
    }, 
    {
      id: 'cf_auto_purge_on_upgrader_process_complete',
      type: 'toggle',
      label: __('Auto-purge on Updates', 'wp-cloudflare-page-cache'),
      description: __('Automatically purge the cache when the plugin update process is complete', 'wp-cloudflare-page-cache'),
    },
    {
      id: 'enable_nonce_refresh',
      type: 'toggle',
      label: __('Enable nonce refresh', 'wp-cloudflare-page-cache'),
      description: __('Keeps forms, login, and cart actions working on long-cached pages by refreshing expired security tokens.', 'wp-cloudflare-page-cache'),
      utmCampaign: 'enable-nonce-refresh',
      locked: !validPro,
    },
    {
      id: 'cache_tags',
      type: 'toggle',
      label: __('Enable Cache Tags', 'wp-cloudflare-page-cache'),
      description: __('Tag cached responses so granular invalidations (a single post, an author, a taxonomy term) clear only what changed instead of the whole cache.', 'wp-cloudflare-page-cache'),
      utmCampaign: 'cache-tags',
      locked: !validPro,
    },
    {
      id: 'cf_strip_cookies',
      type: 'toggle', 
      label: __('Strip response cookies', 'wp-cloudflare-page-cache'),
      description: __('Cloudflare will not cache responses that contain cookies. Enable this option to strip cookies from cached responses. Disable it if you notice issues with login or dynamic content.', 'wp-cloudflare-page-cache'),
    },
    {
      id: 'cf_cache_control_htaccess',
      type: 'toggle',
      label: __('Overwrite the cache-control header for WordPress\'s pages using web server rules', 'wp-cloudflare-page-cache'),
      description: (
        <Badge variant="destructive">
          {__('Writes into .htaccess', 'wp-cloudflare-page-cache')}
        </Badge>
      ),
      children: <div className="grid gap-2 mt-2">
        <Notice description={__('This option is useful if you use Super Page Cache together with other performance plugins that could affect the Cloudflare cache with their cache-control headers. It works automatically if you are using Apache as web server or as backend web server.', 'wp-cloudflare-page-cache')} />
        <OverwriteHeaderDescription />
      </div>
    },
    {
      id: 'cf_purge_only_html',
      type: 'toggle',
      label: __('Purge HTML pages only', 'wp-cloudflare-page-cache'),
      description: __('Purge only cached HTML pages, keeping static assets (CSS, JS, images) in cache.', 'wp-cloudflare-page-cache'),
    },
    {
      id: 'cf_disable_cache_purging_queue',
      type: 'toggle',
      label: __('Disable cache purging using queue', 'wp-cloudflare-page-cache'),
      description: __('By default, this plugin purges the cache after 10 seconds from the purging action, to avoid a high number of purge requests in case of multiple events triggered by third party plugins. This is done using a classic WordPress scheduled event. If you notice any errors regarding the scheduled intervals, you can deactivate this mode by enabling this option.', 'wp-cloudflare-page-cache')
    },
    {
      id: 'advanced_exclude_dynamic_content',
      type: 'checkbox-group',
      label: __('Don\'t cache the following dynamic contents:', 'wp-cloudflare-page-cache'),
      controls: [
        {
          id: 'cf_bypass_404',
          type: 'checkbox',
          label: <div className="flex items-center">{__('404 Page', 'wp-cloudflare-page-cache')} <Tooltip><code>is_404</code></Tooltip> </div>,
        },
        {
          id: 'cf_bypass_single_post',
          type: 'checkbox',
          label: <div className="flex items-center">{__('Single posts', 'wp-cloudflare-page-cache')} <Tooltip><code>is_single</code></Tooltip> </div>,
        },
        {
          id: 'cf_bypass_pages',
          type: 'checkbox',
          label: <div className="flex items-center">{__('Pages', 'wp-cloudflare-page-cache')} <Tooltip><code>is_page</code></Tooltip> </div>,
        },
        {
          id: 'cf_bypass_front_page',
          type: 'checkbox',
          label: <div className="flex items-center">{__('Front Page', 'wp-cloudflare-page-cache')} <Tooltip><code>is_front_page</code></Tooltip> </div>,
        },
        {
          id: 'cf_bypass_home',
          type: 'checkbox',
          label: <div className="flex items-center">{__('Home', 'wp-cloudflare-page-cache')} <Tooltip><code>is_home</code></Tooltip> </div>,
        },
        {
          id: 'cf_bypass_archives',
          type: 'checkbox',
          label: <div className="flex items-center">{__('Archives', 'wp-cloudflare-page-cache')} <Tooltip><code>is_archive</code></Tooltip> </div>,
        },
        {
          id: 'cf_bypass_tags',
          type: 'checkbox',
          label: <div className="flex items-center">{__('Tags', 'wp-cloudflare-page-cache')} <Tooltip><code>is_tag</code></Tooltip> </div>,
        },
        {
          id: 'cf_bypass_category',
          type: 'checkbox',
          label: <div className="flex items-center">{__('Categories', 'wp-cloudflare-page-cache')} <Tooltip><code>is_category</code></Tooltip> </div>,
        },
        {
          id: 'cf_bypass_feeds',
          type: 'checkbox',
          label: <div className="flex items-center">{__('Feeds', 'wp-cloudflare-page-cache')} <Tooltip><code>is_feed</code></Tooltip> </div>,
        },
        {
          id: 'cf_bypass_search_pages',
          type: 'checkbox',
          label: <div className="flex items-center">{
            __('Search Pages', 'wp-cloudflare-page-cache')} <Tooltip><code>is_search</code></Tooltip> </div>,
        },
        {
          id: 'cf_bypass_author_pages',
          type: 'checkbox',
          label: <div className="flex items-center">{__('Author Pages', 'wp-cloudflare-page-cache')} <Tooltip><code>is_author</code></Tooltip> </div>,
        },
        {
          id: 'cf_bypass_amp',
          type: 'checkbox',
          label: <div className="flex items-center">{__('AMP pages', 'wp-cloudflare-page-cache')} <Tooltip><code>is_amp</code></Tooltip> </div>,
        },
        {
          id: 'cf_bypass_ajax',
          type: 'checkbox',
          label: <div className="flex items-center">{__('Ajax requests', 'wp-cloudflare-page-cache')} <Tooltip><code>is_ajax</code></Tooltip> </div>,
        },
        {
          id: 'cf_bypass_query_var',
          type: 'checkbox',
          label: <div className="flex items-center">{__('Pages with query args', 'wp-cloudflare-page-cache')} <Tooltip><code>is_query_var</code></Tooltip> </div>,
        },
        {
          id: 'cf_bypass_wp_json_rest',
          type: 'checkbox',
          label: <div className="flex items-center">{__('WP JSON endpoints', 'wp-cloudflare-page-cache')} <Tooltip><code>is_wp_json_rest</code></Tooltip> </div>,
        }
      ],
    },
    {
      id: 'advanced_exclude_dynamic_content',
      type: 'checkbox-group',
      label: __('Don\'t cache the following static contents:', 'wp-cloudflare-page-cache'),
      stack: true,
      description: (
        <>
          {createInterpolateElement(
            __('<strong>If you use Nginx:</strong> It is recommended to add the browser caching rules that you find in the instructions <button>here</button>.', 'wp-cloudflare-page-cache'),
            {
              strong: <strong />,
              button: <NginxLinkInstructions />
            }
          )}

          <br />

          <Badge variant="destructive" className="mt-3">
            {__('Writes into .htaccess', 'wp-cloudflare-page-cache')}
          </Badge>
        </>
      ),
      controls: [
        {
          id: 'cf_bypass_sitemap',
          type: 'checkbox',
          label: __('XML sitemaps', 'wp-cloudflare-page-cache'),
        },
        {
          id: 'cf_bypass_file_robots',
          type: 'checkbox',
          label: __('Robots.txt', 'wp-cloudflare-page-cache'),
        },
      ]
    },
    {
      id: 'cf_post_per_page',
      type: 'number',
      min: 1,
      max: 100,
      label: __('Posts per page', 'wp-cloudflare-page-cache'),
      description: __('Enter how many posts per page (or category) the theme shows to your users. It will be used to clean up the pagination on cache purge.', 'wp-cloudflare-page-cache'),
    },
  ];

  const browserCachingControls = [
    {
      id: 'cf_browser_caching_htaccess',
      type: 'toggle',
      label: __('Add browser caching rules for static assets', 'wp-cloudflare-page-cache'),
      description: (
        <>
          {createInterpolateElement(
            __('<strong>If you use Nginx:</strong> it is not possible for Super Page Cache to automatically change the settings to allow this option to work immediately. For it to work, update these settings and then follow the instructions <button>here</button>.'),
            {
              button: <NginxLinkInstructions />,
              strong: <strong />
            }
          )}
          <br />
          <Badge variant="destructive" className="mt-3">
            {__('Writes into .htaccess', 'wp-cloudflare-page-cache')}
          </Badge>
        </>
      ),
      children: (
        <Notice type="warning" className="mt-5">
          {__('If you are using Plesk, make sure you have disabled the options "Smart static files processing" and "Serve static files directly by Nginx" on "Apache & Nginx Settings" page of your Plesk panel or ask your hosting provider to update browser caching rules for you.', 'wp-cloudflare-page-cache')}
        </Notice>
      )
    },
  ]

  return (
    <>
      <Card>
        <CardHeader className="bg-muted">
          <h3 className="font-semibold text-base flex items-center">{__('Cache', 'wp-cloudflare-page-cache')}</h3>
        </CardHeader>

        <CardContent className="p-0">
          <ControlsGroup controls={controls} />
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="bg-muted">
          <h3 className="font-semibold text-base flex items-center">{__('Browser Caching', 'wp-cloudflare-page-cache')}</h3>
        </CardHeader>

        <CardContent className="p-0">

          <div className="p-4">
            <Notice description={__('This option is useful if you want to use Super Page Cache to enable browser caching rules for assets such like images, CSS, scripts, etc. It works automatically if you use Apache as web server or as backend web server.', 'wp-cloudflare-page-cache')} />
          </div>

          <ControlsGroup controls={browserCachingControls} />
        </CardContent>
      </Card>
    </>
  )
}

const OverwriteHeaderDescription = () => (
  <div className="grid gap-1">
    <Accordion type="single" collapsible className="rounded-sm border overflow-hidden">
      <AccordionItem value="htaccess">
        <AccordionTrigger className="!m-0 bg-muted px-4 py-3 !text-sm">
          {__('Additional info', 'wp-cloudflare-page-cache')}
        </AccordionTrigger>

        <AccordionContent className="p-4 bg-muted/20">
          <Notice
            type="warning"
            title={__('Important Notes', 'wp-cloudflare-page-cache')}
            description={
              createInterpolateElement(__('This option is not essential as in most cases this plugin works out of the box. If the page cache does not work after several cache tests or you see that max-age and s-maxage values of <code>X-WP-CF-Super-Cache-Cache-Control</code> response header are not the same of the ones in <code>Cache-Control</code> response header, activate this option.', 'wp-cloudflare-page-cache'),
                {
                  code: <code />
                }
              )
            }
          />

          <div className="grid lg:grid-cols-2 gap-4 mt-4">
            <Notice
              type="success"
              title={`${__('Apache configuration instructions', 'wp-cloudflare-page-cache')} (.htaccess):`}
              description={
                createInterpolateElement(__('For overwriting to work, make sure that the rules added by Super Page Cache are placed at the bottom of the <code>.htaccess</code> file. If they are present <strong>BEFORE</strong> other caching rules of other plugins, move them to the bottom manually.', 'wp-cloudflare-page-cache'),
                  {
                    code: <code />,
                    strong: <strong />
                  }
                )
              }
            />

            <Notice
              type="info"
              title={`${__('Nginx configuration instructions', 'wp-cloudflare-page-cache')}:`}
              description={createInterpolateElement(
                __('It is not possible for Super Page Cache to automatically change the settings to allow this option to work immediately. For it to work, update these settings and then follow the instructions <button>here</button>.', 'wp-cloudflare-page-cache'),
                {
                  button: <NginxLinkInstructions />
                }
              )}
            />
          </div>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  </div >

)

export default AdvancedCache;