import type { BaseTabProps } from "../types";
import { HighlightableField } from "../../components/HighlightableField";

export interface AdvancedTabProps extends BaseTabProps {
  showUninstallCleanup?: boolean;
}

type AdvancedUninstallCleanupFieldProps = Pick<
  BaseTabProps,
  "settings" | "setSettings"
>;

export function AdvancedUninstallCleanupField({
  settings,
  setSettings,
}: AdvancedUninstallCleanupFieldProps) {
  return (
    <HighlightableField id="advanced-uninstall-cleanup">
      <div className="b3-wvs-border b3-wvs-border-gray-200 b3-wvs-rounded-md b3-wvs-p-4 b3-wvs-space-y-3">
        <div className="b3-wvs-flex b3-wvs-items-start b3-wvs-justify-between b3-wvs-gap-4">
          <div className="b3-wvs-space-y-1">
            <h3 className="b3-wvs-text-sm b3-wvs-font-semibold b3-wvs-text-gray-900">
              Uninstall Cleanup
            </h3>
            <p className="b3-wvs-text-xs b3-wvs-text-gray-500">
              By default we keep swatch settings, per-product overrides, and
              term meta when the plugin is uninstalled. Enable this to remove
              them and reset attribute types back to WooCommerce selects.
            </p>
            <p className="b3-wvs-text-xs b3-wvs-text-gray-500">
              Developers can also force cleanup in code via the{" "}
              <code>b3wvs_uninstall_remove_data</code> filter.
            </p>
          </div>
          <label className="b3-wvs-relative b3-wvs-inline-flex b3-wvs-items-center b3-wvs-cursor-pointer">
            <input
              type="checkbox"
              checked={!!settings.remove_on_uninstall}
              onChange={(e) =>
                setSettings({
                  ...settings,
                  remove_on_uninstall: e.target.checked,
                })
              }
              className="b3-wvs-sr-only b3-wvs-peer"
            />
            <div className="b3-wvs-w-11 b3-wvs-h-6 b3-wvs-bg-gray-300 b3-wvs-border b3-wvs-border-gray-400 b3-wvs-shadow-inner b3-wvs-transition-colors peer-focus:b3-wvs-outline-none peer-focus:b3-wvs-ring-4 peer-focus:b3-wvs-ring-emerald-200 b3-wvs-rounded-full peer-checked:b3-wvs-bg-emerald-500 peer-checked:b3-wvs-border-emerald-600 peer-checked:b3-wvs-shadow-sm peer-checked:after:b3-wvs-translate-x-full peer-checked:after:b3-wvs-border-white after:b3-wvs-content-[''] after:b3-wvs-absolute after:b3-wvs-top-[2px] after:b3-wvs-left-[2px] after:b3-wvs-bg-white after:b3-wvs-border-gray-400 after:b3-wvs-border after:b3-wvs-shadow-sm after:b3-wvs-rounded-full after:b3-wvs-h-5 after:b3-wvs-w-5 after:b3-wvs-transition-all"></div>
          </label>
        </div>
      </div>
    </HighlightableField>
  );
}

export function AdvancedTab({
  settings,
  setSettings,
  adminColor: _adminColor,
  showUninstallCleanup = true,
}: AdvancedTabProps) {
  return (
    <div className="b3-wvs-space-y-8">
      <h2 className="b3-wvs-text-xl b3-wvs-font-semibold">Advanced</h2>

      {showUninstallCleanup ? (
        <AdvancedUninstallCleanupField
          settings={settings}
          setSettings={setSettings}
        />
      ) : null}
    </div>
  );
}