import React, { useState, useEffect, useRef } from 'react';
import { useSettings } from '../contexts/SettingsContext.jsx';
import { useNotices } from '../contexts/NoticesContext.jsx';
import { getOrderStatuses, getAllCustomFields } from '../Helpers';
import CustomFieldSelect from '../components/CustomFieldSelect.jsx';
import Toggle from '../components/Toggle.jsx';
import ProBadge from '../components/ProBadge.jsx';

const Chevron = () => (
  <svg className="osgsw-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
    <polyline points="6 9 12 15 18 9" />
  </svg>
);

/**
 * One settings row: switch, title, PRO pill, description, then any extra content.
 * A locked row (Pro feature on the free plan) stays off and opens the upgrade popup.
 */
const SettingRow = ({ name, label, description, checked, onChange, locked = false, onLockedClick, danger = false, labelClass = '', children }) => (
  <div className={`form-group${locked ? ' osgsw-promo' : ''}`}>
    <label htmlFor={`osgsw-${name}`}>
      <Toggle
        id={`osgsw-${name}`}
        name={name}
        checked={checked}
        onChange={onChange}
        locked={locked}
        onLockedClick={onLockedClick}
        danger={danger}
        describedBy={`osgsw-desc-${name}`}
      />
      <span className={`label-text ${labelClass}`.trim()}>{label}</span>
      {locked && <ProBadge />}
    </label>
    <div className="description" id={`osgsw-desc-${name}`}>
      <p>{description}</p>
    </div>
    {children}
  </div>
);

// Button that opens one of the custom dropdowns.
const SelectTrigger = ({ open, small = false, onClick, children }) => (
  <button
    type="button"
    className={`osgsw-custom-select${small ? ' osgsw-custom-select--sm' : ''}${open ? ' is-open' : ''}`}
    aria-haspopup="listbox"
    aria-expanded={open}
    onClick={onClick}
  >
    <span>{children}</span>
    <Chevron />
  </button>
);

const Setting = () => {
  const {
    options,
    updateOption,
    isPro,
    setShowDisableBulkEditPopup,
  } = useSettings();
  const notices = useNotices();

  const [sortingDropdownOpen, setSortingDropdownOpen] = useState(false);
  const [filterDropdownOpen, setFilterDropdownOpen] = useState(false);
  const [statusDropdownOpen, setStatusDropdownOpen] = useState(false);
  const [sortOrderOpen, setSortOrderOpen] = useState(false);

  const sortingRef    = useRef(null);
  const sortOrderRef  = useRef(null);
  const filterRef     = useRef(null);
  const statusRef     = useRef(null);

  // Close dropdowns on outside click and on Esc.
  useEffect(() => {
    const handler = (e) => {
      if (sortingRef.current   && !sortingRef.current.contains(e.target))   setSortingDropdownOpen(false);
      if (sortOrderRef.current && !sortOrderRef.current.contains(e.target)) setSortOrderOpen(false);
      if (filterRef.current    && !filterRef.current.contains(e.target))    setFilterDropdownOpen(false);
      if (statusRef.current    && !statusRef.current.contains(e.target))    setStatusDropdownOpen(false);
    };
    const onKeyDown = (e) => {
      if (e.key !== 'Escape') return;
      setSortingDropdownOpen(false);
      setSortOrderOpen(false);
      setFilterDropdownOpen(false);
      setStatusDropdownOpen(false);
    };
    document.addEventListener('mousedown', handler);
    document.addEventListener('keydown', onKeyDown);
    return () => {
      document.removeEventListener('mousedown', handler);
      document.removeEventListener('keydown', onKeyDown);
    };
  }, []);

  const orderStatuses = getOrderStatuses();

  const showProPopup = () => {
    if (window.WPPOOL && typeof window.WPPOOL.Popup === 'function') {
      try { window.WPPOOL.Popup('order_sync_with_google_sheets_for_woocommerce').show(); }
      catch (err) { console.error('WPPOOL Popup trigger error:', err); }
    }
  };

  const enableColumnFirst = (message) => notices.alert('info', 'Enable Column First', message);

  const proRow = { locked: !isPro, onLockedClick: showProPopup };

  // Sorting criteria that need Ultimate and a matching column.
  const sortOptions = [
    { value: 'order_date', label: 'Order Date', column: 'show_order_date', message: 'Please enable the Order Date column from settings below.' },
    { value: 'order_price', label: 'Order Price', column: 'sync_total_price', message: 'Please enable Total Price column from settings below.' },
    { value: 'order_items', label: 'Order Items', column: 'sync_total_items', message: 'Please enable Total Items column from settings below.' },
  ];

  const renderAddressBlock = (name, label, description, prefix) => (
    <SettingRow
      name={name}
      label={label}
      description={description}
      checked={options[name]}
      onChange={(checked) => {
        updateOption(name, checked);
        const other = name === 'show_billing_details' ? options.add_shipping_details_sheet : options.show_billing_details;
        if (!checked && !other) {
          updateOption('make_billing_shipping_seperate', false);
        }
      }}
    >
      <div className={`osgsw-address-fields${!options[name] ? ' osgsw-address-fields--disabled' : ''}`}>
        <div className="osgsw-fields-grid">
          {[
            { key: `${prefix}_first_name`, label: 'First Name', isPro: false },
            { key: `${prefix}_last_name`, label: 'Last Name', isPro: false },
            { key: `${prefix}_address_1`, label: 'Address Line 1', isPro: false },
            { key: `${prefix}_city`, label: 'City', isPro: false },
            { key: `${prefix}_postcode`, label: 'Postcode/Zip', isPro: false },
            { key: `${prefix}_country`, label: 'Country', isPro: false },
            { key: `${prefix}_address_2`, label: 'Address Line 2', isPro: true },
            { key: `${prefix}_company`, label: 'Company', isPro: true },
            { key: `${prefix}_state`, label: 'State', isPro: true },
            { key: `${prefix}_email`, label: 'Email Address', isPro: true },
            { key: `${prefix}_phone`, label: 'Phone', isPro: true },
          ].map((field) => {
            const locked = field.isPro && !isPro;
            return (
              <label key={field.key} className={`osgsw-field-item${locked ? ' osgsw-field-item--pro' : ''}`}>
                <input
                  type="checkbox"
                  checked={!locked && Boolean(options[field.key])}
                  aria-disabled={locked || undefined}
                  onChange={(e) => {
                    if (locked) { showProPopup(); return; }
                    updateOption(field.key, e.target.checked);
                  }}
                />
                <span>{field.label}</span>
                {locked && <ProBadge />}
              </label>
            );
          })}
        </div>
      </div>
    </SettingRow>
  );

  return (
    <div className="ssgs-dashboard__tab active bounceInRight">
      <div className="ssgs-admin osgsw-settings">
        {/* Preference Block */}
        <div className="ssgs-dashboard__block">
          <h4 className="title">Preference</h4>

          <SettingRow
            name="bulk_edit_option2"
            label="Bulk edit on Google Sheet"
            description="Enable this feature to bulk edit WooCommerce order data from Google Sheets"
            danger
            checked={options.bulk_edit_option2}
            onChange={(checked) => {
              if (!checked) {
                setShowDisableBulkEditPopup(true);
              } else {
                updateOption('bulk_edit_option2', true);
              }
            }}
          />

          <SettingRow
            name="enable_sheet_sorting"
            label="Allow sorting on Google Sheets"
            description="If this option is checked the sorting option will be enabled for Google Sheets"
            checked={options.enable_sheet_sorting}
            onChange={(checked) => updateOption('enable_sheet_sorting', checked)}
          >
            {Boolean(options.enable_sheet_sorting) && (
              <div className="osgsw_description">
                <div className="osgsw-sorting-controls">
                  {/* Criteria Select */}
                  <div className="osgsw-select-wrap" ref={sortingRef}>
                    <span className="label-text osgsw-select-label">Sorting criteria</span>
                    <SelectTrigger open={sortingDropdownOpen} onClick={() => setSortingDropdownOpen((o) => !o)}>
                      {sortOptions.find((o) => o.value === options.sorting_criteria)?.label || 'Order ID'}
                    </SelectTrigger>
                    {sortingDropdownOpen && (
                      <div className="osgsw-dropdown" role="listbox">
                        <button type="button" role="option" aria-selected={!sortOptions.some((o) => o.value === options.sorting_criteria)} className="osgsw-dropdown__item" onClick={() => { updateOption('sorting_criteria', 'order_Id'); setSortingDropdownOpen(false); }}>
                          Order ID
                        </button>
                        {sortOptions.map((option) => (
                          <button
                            key={option.value}
                            type="button"
                            role="option"
                            aria-selected={options.sorting_criteria === option.value}
                            className={`osgsw-dropdown__item${!isPro ? ' osgsw-dropdown__item--pro' : ''}`}
                            onClick={() => {
                              if (!isPro) { showProPopup(); return; }
                              if (!options[option.column]) { enableColumnFirst(option.message); return; }
                              updateOption('sorting_criteria', option.value);
                              setSortingDropdownOpen(false);
                            }}
                          >
                            <span>{option.label}</span>
                            {!isPro && <ProBadge />}
                          </button>
                        ))}
                      </div>
                    )}
                  </div>

                  {/* Sort Order Select */}
                  <div className="osgsw-select-wrap" ref={sortOrderRef}>
                    <span className="label-text osgsw-select-label">Order of sorting</span>
                    <SelectTrigger open={sortOrderOpen} onClick={() => setSortOrderOpen((o) => !o)}>
                      {options.sort_order === 'desc' ? 'Descending' : 'Ascending'}
                    </SelectTrigger>
                    {sortOrderOpen && (
                      <div className="osgsw-dropdown" role="listbox">
                        <button type="button" role="option" aria-selected={options.sort_order !== 'desc'} className="osgsw-dropdown__item" onClick={() => { updateOption('sort_order', 'asc'); setSortOrderOpen(false); }}>Ascending</button>
                        <button type="button" role="option" aria-selected={options.sort_order === 'desc'} className="osgsw-dropdown__item" onClick={() => { updateOption('sort_order', 'desc'); setSortOrderOpen(false); }}>Descending</button>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}
          </SettingRow>

          {/* Unified Filtering (Pro) */}
          <SettingRow
            name="enable_google_sheets_filtering"
            label="Allow Filtering Google Sheets"
            description="If this option is checked the filtering option will be enabled for Google Sheets"
            checked={options.enable_google_sheets_filtering}
            onChange={(checked) => updateOption('enable_google_sheets_filtering', checked)}
            {...proRow}
          >
            {Boolean(options.enable_google_sheets_filtering) && isPro && (
              <div className="osgsw_description">
                <div className="osgsw-filter-box">

                  {/* Add Filter dropdown */}
                  <div className="osgsw-filter-add" ref={filterRef}>
                    <span className="label-text osgsw-select-label">Add a filter</span>
                    <SelectTrigger small open={filterDropdownOpen} onClick={() => setFilterDropdownOpen((o) => !o)}>
                      Please select
                    </SelectTrigger>
                    {filterDropdownOpen && (
                      <div className="osgsw-dropdown osgsw-dropdown--sm">
                        <label className="osgsw-dropdown__item osgsw-dropdown__item--check">
                          <input type="checkbox" checked={Boolean(options.enable_order_status_filter)} onChange={() => { updateOption('enable_order_status_filter', !options.enable_order_status_filter); setFilterDropdownOpen(false); }} />
                          <span>Order status</span>
                        </label>
                        <label className="osgsw-dropdown__item osgsw-dropdown__item--check">
                          <input type="checkbox" checked={Boolean(options.enable_date_filter)} onChange={() => { updateOption('enable_date_filter', !options.enable_date_filter); setFilterDropdownOpen(false); }} />
                          <span>Order date range</span>
                        </label>
                      </div>
                    )}
                  </div>

                  {/* Order Status Filter Panel */}
                  {Boolean(options.enable_order_status_filter) && (
                    <div className="osgsw-filter-panel">
                      <button type="button" className="osgsw-filter-panel__close" aria-label="Remove order status filter" onClick={() => updateOption('enable_order_status_filter', false)}>×</button>
                      <span className="label-text osgsw-select-label">Filter by order statuses</span>

                      {/* Selected status tags */}
                      <div className="osgsw-status-tags">
                        {orderStatuses.filter((st) => Boolean(options[`sync_status_${st.key}`])).map((st) => (
                          <span key={st.key} className="osgsw-status-tag">
                            {st.label}
                            <button type="button" className="osgsw-status-tag__remove" aria-label={`Remove ${st.label}`} onClick={() => updateOption(`sync_status_${st.key}`, false)}>×</button>
                          </span>
                        ))}
                      </div>

                      {/* Status dropdown */}
                      <div className="osgsw-filter-add" ref={statusRef}>
                        <SelectTrigger small open={statusDropdownOpen} onClick={() => setStatusDropdownOpen((o) => !o)}>
                          Select order statuses
                        </SelectTrigger>
                        {statusDropdownOpen && (
                          <div className="osgsw-dropdown osgsw-dropdown--sm osgsw-dropdown--scroll">
                            {orderStatuses.map((st) => {
                              const key = `sync_status_${st.key}`;
                              return (
                                <label key={st.key} className="osgsw-dropdown__item osgsw-dropdown__item--check">
                                  <input type="checkbox" checked={Boolean(options[key])} onChange={(e) => updateOption(key, e.target.checked)} />
                                  <span>{st.label}</span>
                                </label>
                              );
                            })}
                          </div>
                        )}
                      </div>
                    </div>
                  )}

                  {/* Date Range Filter Panel */}
                  {Boolean(options.enable_date_filter) && (
                    <div className="osgsw-filter-panel">
                      <button type="button" className="osgsw-filter-panel__close" aria-label="Remove date range filter" onClick={() => updateOption('enable_date_filter', false)}>×</button>
                      <span className="label-text osgsw-select-label">Filter by order date range</span>

                      <div className="osgsw-radio-group" role="radiogroup" aria-label="Date filter type">
                        <label className="osgsw-radio-label">
                          <input type="radio" name="date_filter_type" value="days_old" checked={options.date_filter_type === 'days_old'} onChange={(e) => updateOption('date_filter_type', e.target.value)} />
                          <span>Days old</span>
                        </label>
                        <label className="osgsw-radio-label">
                          <input type="radio" name="date_filter_type" value="date_range" checked={options.date_filter_type === 'date_range'} onChange={(e) => updateOption('date_filter_type', e.target.value)} />
                          <span>Date Range</span>
                        </label>
                      </div>

                      {options.date_filter_type === 'days_old' ? (
                        <label className="osgsw-date-row">
                          <span>Number of days old</span>
                          <input type="number" className="osgsw-number-input" min="1" max="365" value={options.date_filter_days || 60} onChange={(e) => updateOption('date_filter_days', e.target.value)} />
                        </label>
                      ) : (
                        <div className="osgsw-date-row">
                          <label className="osgsw-date-label">From date <input type="date" className="osgsw-date-input" value={options.date_filter_from || ''} onChange={(e) => updateOption('date_filter_from', e.target.value)} /></label>
                          <label className="osgsw-date-label">To date <input type="date" className="osgsw-date-input" value={options.date_filter_to || ''} onChange={(e) => updateOption('date_filter_to', e.target.value)} /></label>
                        </div>
                      )}
                    </div>
                  )}

                </div>
              </div>
            )}
          </SettingRow>

          {/* Separate Shipping & Billing (Pro) */}
          <SettingRow
            name="make_billing_shipping_seperate"
            label="Show shipping & billing information in separate columns and enable editing"
            description="Enable this to show & edit each shipping & billing field individually."
            checked={options.make_billing_shipping_seperate}
            onChange={(checked) => {
              if (!options.show_billing_details && !options.add_shipping_details_sheet) {
                enableColumnFirst('Please enable Shipping or Billing address column first.');
              } else {
                updateOption('make_billing_shipping_seperate', checked);
              }
            }}
            {...proRow}
          />

          {/* Separate Rows for Multiple Items (Pro) */}
          <SettingRow
            name="multiple_itmes"
            label="Use separate rows to show multiple products of an order"
            description="If an order has multiple products, enabling this feature will display the products in separate rows"
            checked={options.multiple_itmes}
            onChange={(checked) => updateOption('multiple_itmes', checked)}
            {...proRow}
          />

          {/* Information Separator (Pro) */}
          <div className={`form-group osgsw-separator-row${!isPro ? ' osgsw-promo' : ''}`}>
            <label htmlFor="osgsw-separator" className="osgsw-plain-label">
              <span className="label-text">Select information separator</span>
              {!isPro && <ProBadge />}
            </label>
            <div className="description" id="osgsw-desc-separator">
              <p>Choose a separator to divide information (e.g. comma, semicolon, vertical bar).</p>
            </div>
            <div className="osgsw_description" onClick={() => { if (!isPro) showProPopup(); }}>
              <select
                id="osgsw-separator"
                className="osgsw_separator_select"
                name="osgsw_separator"
                value={options.separator_type || ','}
                disabled={!isPro}
                aria-describedby="osgsw-desc-separator"
                onChange={(e) => updateOption('separator_type', e.target.value)}
              >
                <option value=",">Comma (,)</option>
                <option value=";">Semicolon (;)</option>
                <option value="|">Vertical Bar (|)</option>
              </select>
            </div>
          </div>
        </div>

        {/* Google Sheet Columns Block */}
        <div className="ssgs-dashboard__block">
          <h4 className="title">Google Sheet columns</h4>

          {[
            { key: 'sync_order_products', label: 'Display Product Names', desc: 'Show name of ordered products' },
            { key: 'sync_order_status', label: 'Display Order Status', desc: 'Show order status column' },
            { key: 'sync_total_items', label: 'Display Total Items', desc: 'Show number of total items' },
            { key: 'show_product_qt', label: 'Show individual product quantity', desc: 'Show product quantity beside names' },
            { key: 'sync_total_price', label: 'Display Total Price', desc: 'Show total order price' },
          ].map((item) => (
            <SettingRow
              key={item.key}
              name={item.key}
              label={item.label}
              description={item.desc}
              checked={options[item.key]}
              onChange={(checked) => updateOption(item.key, checked)}
            />
          ))}

          {renderAddressBlock('show_billing_details', 'Display Billing Address', 'Enable this to show the billing address in a column on Google Sheet', 'show_billing')}
          {renderAddressBlock('add_shipping_details_sheet', 'Display Shipping Address', 'Enable this to show the shipping address in a column on Google Sheet', 'show_shipping')}

          {[
            { key: 'show_payment_method', label: 'Display Payment Method', isPro: false, desc: 'Show payment method column' },
            { key: 'transaction_id', label: 'Display Transaction ID', isPro: true, desc: 'Show payment transaction ID' },
            { key: 'product_sku_sync', label: 'Sync product SKU', isPro: true, desc: 'Show product SKU column' },
            { key: 'custom_order_status_bolean', label: 'Sync Custom order status', isPro: true, desc: 'Sync custom order status column' },
            { key: 'total_discount', label: 'Display Total Discount', isPro: true, desc: 'Show total order discount' },
            { key: 'show_order_date', label: 'Display Order Date', isPro: true, desc: 'Show order creation date' },
            { key: 'show_customer_note', label: 'Display Customer Note', isPro: true, desc: 'Show customer note column' },
            { key: 'show_order_note', label: 'Display Order Note', isPro: true, desc: 'Show order note column' },
            { key: 'who_place_order', label: 'Display order placement information', isPro: true, desc: 'Show user info who placed order' },
            { key: 'show_order_url', label: 'Display Order URL', isPro: true, desc: 'Show direct order edit link URL' },
          ].map((item) => (
            <SettingRow
              key={item.key}
              name={item.key}
              label={item.label}
              description={item.desc}
              checked={options[item.key]}
              onChange={(checked) => updateOption(item.key, checked)}
              locked={item.isPro && !isPro}
              onLockedClick={showProPopup}
            />
          ))}

          {/* Sync Order Custom Fields (Pro) */}
          <SettingRow
            name="show_custom_meta_fields"
            label="Sync Order Custom Fields"
            labelClass="ssgs_custom_fileds"
            description="Enter or search your order's custom field (meta data) and enable them to display on the Spreadsheet as columns."
            checked={options.show_custom_meta_fields}
            onChange={(checked) => updateOption('show_custom_meta_fields', checked)}
            {...proRow}
          >
            {Boolean(options.show_custom_meta_fields) && isPro && (
              <div className="osgsw_description osgsw-cf-wrapper">
                <CustomFieldSelect
                  allFields={getAllCustomFields()}
                  selected={Array.isArray(options.show_custom_fields) ? options.show_custom_fields : []}
                  onChange={(newVal) => updateOption('show_custom_fields', newVal)}
                />
                <p className="osgsw-cf-count">
                  {(Array.isArray(options.show_custom_fields) ? options.show_custom_fields.length : 0) === 1
                    ? '1 custom field will be added as a column.'
                    : `${Array.isArray(options.show_custom_fields) ? options.show_custom_fields.length : 0} custom fields will be added as columns, in this order.`}
                </p>
              </div>
            )}
          </SettingRow>
        </div>
      </div>
    </div>
  );
};

export default Setting;