/*
 * React Context for User Consent Management
 * This provides a basic structure to manage and access user consent status throughout your application.
 */

import React, { createContext, useContext, useState, useEffect } from 'react';

// Define the shape of our consent context
interface ConsentContextType {
  isMarketingAllowed: boolean;
  isAnalyticsAllowed: boolean;
  updateConsent: (type: 'marketing' | 'analytics', allowed: boolean) => void;
}

// Create the context with default (non-consented) values
const ConsentContext = createContext<ConsentContextType | undefined>(undefined);

// Provider component to wrap your application or relevant parts
export const ConsentProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [isMarketingAllowed, setIsMarketingAllowed] = useState(false);
  const [isAnalyticsAllowed, setIsAnalyticsAllowed] = useState(false);

  // Load consent preferences from localStorage on mount
  useEffect(() => {
    const storedMarketing = localStorage.getItem('consent_marketing');
    const storedAnalytics = localStorage.getItem('consent_analytics');
    if (storedMarketing) setIsMarketingAllowed(JSON.parse(storedMarketing));
    if (storedAnalytics) setIsAnalyticsAllowed(JSON.parse(storedAnalytics));
  }, []);

  // Function to update consent status and persist it
  const updateConsent = (type: 'marketing' | 'analytics', allowed: boolean) => {
    if (type === 'marketing') {
      setIsMarketingAllowed(allowed);
      localStorage.setItem('consent_marketing', JSON.stringify(allowed));
    } else if (type === 'analytics') {
      setIsAnalyticsAllowed(allowed);
      localStorage.setItem('consent_analytics', JSON.stringify(allowed));
    }
    // Log consent change for accountability (e.g., send to backend)
    console.log(`Consent for ${type} updated to: ${allowed}`);
    // Here you would typically dispatch an event or call an API to log this consent change centrally
  };

  return (
    <ConsentContext.Provider value={{
      isMarketingAllowed,
      isAnalyticsAllowed,
      updateConsent
    }}>
      {children}
    </ConsentContext.Provider>
  );
};

// Custom hook to easily consume consent context
export const useConsent = () => {
  const context = useContext(ConsentContext);
  if (context === undefined) {
    throw new Error('useConsent must be used within a ConsentProvider');
  }
  return context;
};

// Example of how to use it in a component:
/*
function MyComponent() {
  const { isAnalyticsAllowed, updateConsent } = useConsent();

  useEffect(() => {
    // Conditionally load analytics scripts based on consent
    if (isAnalyticsAllowed) {
      console.log('Loading analytics scripts...');
      // Example: Google Analytics, Matomo, etc.
    } else {
      console.log('Analytics not allowed. Ensuring no tracking scripts are active.');
    }
  }, [isAnalyticsAllowed]);

  return (
    <div>
      <p>Analytics Consent: {isAnalyticsAllowed ? 'Granted' : 'Denied'}</p>
      <button onClick={() => updateConsent('analytics', !isAnalyticsAllowed)}>
        Toggle Analytics Consent
      </button>
    </div>
  );
}
*/

/*
 * React Component for a GDPR-Compliant Cookie Consent Banner with Preference Options
 * This component demonstrates how to collect granular consent from users.
 */

import React, { useState, useEffect } from 'react';
import { useConsent } from './ConsentContext'; // Assuming ConsentContext.ts/js from previous example

const CookieConsentBanner: React.FC = () => {
  const { isMarketingAllowed, isAnalyticsAllowed, updateConsent } = useConsent();
  const [showBanner, setShowBanner] = useState(false);
  const [showPreferences, setShowPreferences] = useState(false);

  // Determine if the banner should be shown based on stored consent
  useEffect(() => {
    const consentGiven = localStorage.getItem('gdpr_consent_status');
    if (!consentGiven) {
      setShowBanner(true);
    }
  }, []);

  // Handle accepting all cookies/data processing
  const handleAcceptAll = () => {
    updateConsent('marketing', true);
    updateConsent('analytics', true);
    localStorage.setItem('gdpr_consent_status', 'accepted');
    setShowBanner(false);
    setShowPreferences(false);
  };

  // Handle rejecting all non-essential cookies/data processing
  const handleRejectAll = () => {
    updateConsent('marketing', false);
    updateConsent('analytics', false);
    localStorage.setItem('gdpr_consent_status', 'rejected');
    setShowBanner(false);
    setShowPreferences(false);
  };

  // Save specific preferences
  const handleSavePreferences = () => {
    localStorage.setItem('gdpr_consent_status', 'custom');
    setShowBanner(false);
    setShowPreferences(false);
  };

  if (!showBanner) return null;

  return (
    <div style={{
      position: 'fixed',
      bottom: 0,
      left: 0,
      width: '100%',
      backgroundColor: '#f0f0f0',
      padding: '20px',
      boxShadow: '0 -2px 10px rgba(0,0,0,0.1)',
      zIndex: 1000
    }}>
      {!showPreferences ? (
        <div>
          <p>We use cookies to enhance your experience. By clicking "Accept All", you agree to our <a href="/privacy-policy">Privacy Policy</a>.</p>
          <button onClick={handleAcceptAll} style={{ marginRight: '10px', padding: '10px 15px' }}>Accept All</button>
          <button onClick={handleRejectAll} style={{ marginRight: '10px', padding: '10px 15px' }}>Reject All</button>
          <button onClick={() => setShowPreferences(true)} style={{ padding: '10px 15px' }}>Manage Preferences</button>
        </div>
      ) : (
        <div>
          <h3>Manage Your Privacy Preferences</h3>
          <p>Select which types of data processing you allow:</p>
          <label style={{ display: 'block', marginBottom: '10px' }}>
            <input
              type="checkbox"
              checked={isAnalyticsAllowed}
              onChange={(e) => updateConsent('analytics', e.target.checked)}
            />
            Analytics Cookies (collect anonymous usage data to improve our service)
          </label>
          <label style={{ display: 'block', marginBottom: '10px' }}>
            <input
              type="checkbox"
              checked={isMarketingAllowed}
              onChange={(e) => updateConsent('marketing', e.target.checked)}
            />
            Marketing Cookies (personalize your experience and show relevant ads)
          </label>
          <button onClick={handleSavePreferences} style={{ marginTop: '15px', padding: '10px 15px' }}>Save Preferences</button>
          <button onClick={() => setShowPreferences(false)} style={{ marginLeft: '10px', padding: '10px 15px' }}>Back</button>
        </div>
      )}
    </div>
  );
};

export default CookieConsentBanner;

/*
 * React Component for a Sensitive Data Input Field with Data Minimization
 * This component demonstrates capturing necessary data without over-collecting and client-side processing
 * (e.g., pseudonymization/hashing for demonstration purposes before potential transmission).
 * In a real-world scenario, sensitive data processing (like hashing) should often happen server-side
 * for enhanced security, but client-side minimization is still crucial.
 */

import React, { useState } from 'react';

interface SensitiveInputFieldProps {
  label: string;
  placeholder?: string;
  onSave: (processedValue: string) => void; // Callback with the processed value
  maxLength?: number; // Data minimization: enforce max length
}

const SensitiveInputField: React.FC<SensitiveInputFieldProps> = ({ label, placeholder, onSave, maxLength }) => {
  const [inputValue, setInputValue] = useState('');
  const [isProcessing, setIsProcessing] = useState(false);

  // Simple client-side pseudonymization (for demonstration only, use stronger methods/server-side in production)
  const pseudonymizeData = (data: string): string => {
    if (!data) return '';
    // Example: Replace all characters except first and last with asterisks
    if (data.length <= 2) return data;
    return data[0] + '*'.repeat(data.length - 2) + data[data.length - 1];
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    if (maxLength && value.length > maxLength) {
      setInputValue(value.substring(0, maxLength)); // Enforce max length client-side
    } else {
      setInputValue(value);
    }
  };

  const handleSubmit = () => {
    if (inputValue.trim() === '') return;

    setIsProcessing(true);
    // Simulate API call or complex processing
    setTimeout(() => {
      const processedValue = pseudonymizeData(inputValue);
      onSave(processedValue); // Pass the pseudonymized value to parent component or state
      setInputValue(''); // Clear input after processing for security
      setIsProcessing(false);
      console.log('Sensitive data processed and cleared from input.');
    }, 500);
  };

  return (
    <div style={{ marginBottom: '15px' }}>
      <label htmlFor={label.toLowerCase().replace(/ /g, '-')}>
        <strong>{label}:</strong>
      </label>
      <br />
      <input
        id={label.toLowerCase().replace(/ /g, '-')}
        type="text" // Use 'password' for actual passwords
        value={inputValue}
        onChange={handleChange}
        placeholder={placeholder}
        maxLength={maxLength} // HTML5 max length attribute
        disabled={isProcessing}
        style={{ padding: '8px', width: '300px', borderRadius: '4px', border: '1px solid #ccc' }}
      />
      {maxLength && <p style={{ fontSize: '0.8em', color: '#666' }}>Max length: {maxLength} characters</p>}
      <br />
      <button onClick={handleSubmit} disabled={isProcessing} style={{ marginTop: '10px', padding: '10px 15px' }}>
        {isProcessing ? 'Processing...' : 'Submit Sensitive Data'}
      </button>
      <p style={{ fontSize: '0.9em', color: '#888' }}>
        Note: Actual hashing/encryption for sensitive data typically occurs server-side.
        This example demonstrates client-side data minimization and pseudonymization.
      </p>
    </div>
  );
};

export default SensitiveInputField;

// Example Usage in a Parent Component:
/*
function UserProfileForm() {
  const handleSensitiveDataSave = (processedData: string) => {
    console.log('Received processed sensitive data:', processedData);
    // Here, you would send 'processedData' to your backend API
  };

  return (
    <div>
      <h2>User Profile</h2>
      <SensitiveInputField
        label="Payment Reference Number"
        placeholder="Enter reference (e.g., 1234-5678)"
        onSave={handleSensitiveDataSave}
        maxLength={15} // Enforce data minimization at the point of entry
      />
      <SensitiveInputField
        label="Security Code (Last 4 digits)"
        placeholder="e.g., 1234"
        onSave={handleSensitiveDataSave}
        maxLength={4} // Enforce data minimization at the point of entry
      />
    </div>
  );
}
*/

/*
 * React Component for Data Subject Rights (DSR) Requests
 * This component allows users to request their data or request data deletion.
 * It interacts with a hypothetical backend API for DSR fulfillment.
 */

import React, { useState } from 'react';

interface DSRRequestStatus {
  message: string;
  isError: boolean;
}

const DSRRequestForm: React.FC = () => {
  const [email, setEmail] = useState('');
  const [requestType, setRequestType] = useState<'access' | 'deletion'>('access');
  const [status, setStatus] = useState<DSRRequestStatus | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!email || !email.includes('@')) {
      setStatus({ message: 'Please enter a valid email address.', isError: true });
      return;
    }

    setIsLoading(true);
    setStatus(null);

    try {
      // Simulate API call to your backend DSR endpoint
      const response = await fetch('/api/dsr-requests', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email, requestType }),
      });

      if (response.ok) {
        setStatus({ message: `Your ${requestType} request has been submitted successfully. Please check your email for further instructions.`, isError: false });
        setEmail('');
      } else {
        const errorData = await response.json();
        setStatus({ message: errorData.message || 'An error occurred while processing your request.', isError: true });
      }
    } catch (error) {
      console.error('DSR request failed:', error);
      setStatus({ message: 'Network error or server unavailable. Please try again later.', isError: true });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '500px', margin: '30px auto', border: '1px solid #eee', borderRadius: '8px', boxShadow: '0 2px 10px rgba(0,0,0,0.05)' }}>
      <h2>Submit a Data Subject Rights Request</h2>
      <p>Under GDPR, you have the right to request access to your personal data or to request its deletion.</p>
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: '15px' }}>
          <label htmlFor="email-dsr" style={{ display: 'block', marginBottom: '5px' }}><strong>Your Email:</strong></label>
          <input
            id="email-dsr"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="your.email@example.com"
            required
            style={{ width: '100%', padding: '10px', borderRadius: '4px', border: '1px solid #ddd' }}
            disabled={isLoading}
          />
        </div>

        <div style={{ marginBottom: '20px' }}>
          <label style={{ display: 'block', marginBottom: '5px' }}><strong>Request Type:</strong></label>
          <label style={{ marginRight: '15px' }}>
            <input
              type="radio"
              value="access"
              checked={requestType === 'access'}
              onChange={() => setRequestType('access')}
              disabled={isLoading}
            />
            Access My Data
          </label>
          <label>
            <input
              type="radio"
              value="deletion"
              checked={requestType === 'deletion'}
              onChange={() => setRequestType('deletion')}
              disabled={isLoading}
            />
            Delete My Data
          </label>
        </div>

        <button
          type="submit"
          disabled={isLoading}
          style={{ padding: '10px 20px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}
        >
          {isLoading ? 'Submitting...' : 'Submit Request'}
        </button>

        {status && (
          <p style={{ marginTop: '15px', color: status.isError ? 'red' : 'green' }}>
            {status.message}
          </p>
        )}
      </form>
    </div>
  );
};

export default DSRRequestForm;

/*
 * Placeholder for a hypothetical client-side audit function
 * In a real scenario, this would involve integrating with compliance tools or logging libraries.
 *
 * This function demonstrates a basic concept of 'checking' consent status and logging it.
 */

import { useConsent } from './ConsentContext'; // Assuming ConsentContext.ts/js from previous example

export const performClientSideGDPRAudit = () => {
  // In a real application, you would not call useConsent outside of a React component.
  // This is illustrative of what an audit might check for.
  // For a true audit, you would have a more complex setup, potentially a browser extension or a dedicated tool.

  console.log('--- Initiating Client-Side GDPR Audit ---');

  // 1. Check for unexpected cookies or local storage items without consent
  const nonEssentialCookies = ['_ga', '_fbp', 'marketing_id']; // Example non-essential cookies
  nonEssentialCookies.forEach(cookieName => {
    if (document.cookie.includes(cookieName)) {
      console.warn(`[AUDIT WARNING] Non-essential cookie '${cookieName}' detected. Verify consent management.`);
    }
  });

  const nonEssentialLocalStorageKeys = ['user_preferences_marketing', 'user_analytics_data']; // Example
  nonEssentialLocalStorageKeys.forEach(key => {
    if (localStorage.getItem(key)) {
      console.warn(`[AUDIT WARNING] Non-essential localStorage item '${key}' detected. Verify consent.`);
    }
  });

  // 2. Check existence of Privacy Policy Link
  const privacyPolicyLink = document.querySelector('a[href*="privacy-policy"]');
  if (!privacyPolicyLink) {
    console.error('[AUDIT ERROR] No privacy policy link found on the page.');
  } else {
    console.log('[AUDIT OK] Privacy policy link found.');
  }

  // 3. Check for presence of consent banner (if consent not yet given)
  const consentStatus = localStorage.getItem('gdpr_consent_status');
  if (!consentStatus && !document.getElementById('consent-banner-root')) { // Assuming banner has an ID
    console.warn('[AUDIT WARNING] Consent banner not detected, but consent status is unknown.');
  } else if (consentStatus) {
      console.log(`[AUDIT INFO] Consent status: ${consentStatus}`);
  }

  // 4. Inspect network requests for data transmission to unauthorized third parties
  // This is highly complex client-side but tools like browser dev tools can help manually.
  // In an automated test, you'd intercept network calls.
  console.log('[AUDIT HINT] Manually inspect network requests in DevTools for suspicious data transmissions.');

  console.log('--- Client-Side GDPR Audit Complete ---');
};

// To run this (for demonstration, not in production as-is):
// You might call this from a cypress test, or a specific admin tool, not directly in your main app bundle.
// Example: performClientSideGDPRAudit();