import Toggle from '../UI/Toggle';

/**
 * AdvancedSettings — GDPR mode and IP/geo tracking controls are Pro-only.
 * Free users see the data retention setting only.
 */
export default function AdvancedSettings({ settings, onChange, isPro }) {
  const upgradeUrl = window.rescueFill?.upgradeUrl || 'https://themefreex.com/rescuefill-pro';

  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-base font-semibold text-slate-900 mb-1">Advanced Settings</h3>
        <p className="text-sm text-slate-500">Control data tracking, GDPR compliance and location features.</p>
      </div>

      {/* IP Tracking & Geolocation — Pro only */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 space-y-4">
        <div className="flex items-center justify-between">
          <h4 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">Data Tracking</h4>
          {!isPro && (
            <span className="text-[9px] font-bold text-amber-600 bg-amber-50 border border-amber-200 px-1.5 py-0.5 rounded">PRO</span>
          )}
        </div>

        {isPro ? (
          <>
            <Toggle id="rf-track-ip" label="Track IP Addresses"
              helpText="Store visitor IP with each lead. Required for geolocation. Disable for stricter privacy."
              checked={settings.trackIp !== false} onChange={val => onChange('trackIp', val)} />
            <hr className="border-slate-100" />
            <Toggle id="rf-track-location" label="Enable IP Geolocation"
              helpText="Automatically look up country, region and city for each lead using their IP address."
              checked={settings.trackLocation !== false} onChange={val => onChange('trackLocation', val)} />
            <hr className="border-slate-100" />
            <div className="flex items-start gap-3">
              <input type="checkbox" id="rf-auto-list-location" checked={!!settings.autoListByLocation}
                onChange={e => onChange('autoListByLocation', e.target.checked)}
                className="mt-0.5 w-4 h-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
              <label htmlFor="rf-auto-list-location">
                <p className="text-sm font-medium text-slate-900">Auto-Assign Lists by Location</p>
                <p className="text-xs text-slate-500 mt-0.5">
                  Automatically sort leads into lists based on country, city, or region using rules in{' '}
                  <a href="#/lists" className="text-indigo-600 underline">Lists</a>.
                </p>
              </label>
            </div>
          </>
        ) : (
          <div className="p-3 bg-amber-50 border border-amber-100 rounded-lg">
            <p className="text-xs text-amber-700 leading-relaxed">
              🔒 IP Tracking, Geolocation, and Location-based Auto-Lists are available in the{' '}
              <a href={upgradeUrl} target="_blank" rel="noopener noreferrer" className="font-bold underline">Pro addon</a>.
              The free plugin captures email and form data only.
            </p>
          </div>
        )}
      </div>

      {/* GDPR — Pro only */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 space-y-4">
        <div className="flex items-center justify-between">
          <h4 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">GDPR &amp; Privacy</h4>
          {!isPro && (
            <span className="text-[9px] font-bold text-amber-600 bg-amber-50 border border-amber-200 px-1.5 py-0.5 rounded">PRO</span>
          )}
        </div>

        {isPro ? (
          <>
            <Toggle id="rf-gdpr-mode" label="GDPR Mode"
              helpText="When enabled, only stores data after the user starts typing. Adds a consent note to recovery emails."
              checked={!!settings.gdprMode} onChange={val => onChange('gdprMode', val)} />
            <div className="text-xs text-slate-500 bg-slate-50 rounded-lg p-3 border border-slate-200 space-y-1">
              <p className="font-semibold text-slate-700">Privacy Checklist</p>
              <p>✓ No data is shared with third parties unless you configure Webhooks/Zapier.</p>
              <p>✓ Lead data can be permanently deleted from the Leads screen.</p>
              <p>✓ Enabling GDPR Mode limits data collection to submitted content only.</p>
            </div>
          </>
        ) : (
          <div className="p-3 bg-amber-50 border border-amber-100 rounded-lg">
            <p className="text-xs text-amber-700 leading-relaxed">
              🔒 GDPR Mode and advanced privacy controls are available in the{' '}
              <a href={upgradeUrl} target="_blank" rel="noopener noreferrer" className="font-bold underline">Pro addon</a>.
            </p>
            <p className="text-xs text-slate-500 mt-2">
              Free: lead data can always be deleted individually from the Leads screen.
            </p>
          </div>
        )}
      </div>

      {/* Data Retention — available in free too */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 space-y-4">
        <h4 className="text-sm font-semibold text-slate-700 uppercase tracking-wide">Data Retention</h4>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Auto-purge recovered/submitted leads after</label>
          <select value={settings.dataRetentionDays || 90} onChange={e => onChange('dataRetentionDays', parseInt(e.target.value))}
            className="border border-slate-300 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
            <option value={30}>30 days</option>
            <option value={60}>60 days</option>
            <option value={90}>90 days (default)</option>
            <option value={180}>180 days</option>
            <option value={365}>1 year</option>
            <option value={0}>Never (keep forever)</option>
          </select>
          <p className="text-xs text-slate-400 mt-1">Older recovered and submitted leads are automatically removed by the cron job.</p>
        </div>
      </div>

      {/* Danger Zone */}
      <div className="bg-red-50 border border-red-200 rounded-xl p-5">
        <h4 className="text-sm font-semibold text-red-900 uppercase tracking-wide mb-3">Danger Zone</h4>
        <p className="text-sm text-red-700 mb-3">
          To delete all captured leads, use the Leads screen to bulk-delete, or deactivate and re-activate the plugin.
          These actions are irreversible.
        </p>
      </div>
    </div>
  );
}