// src/components/MyForm.tsx
import React, { useState } from 'react';
import { CustomCaptcha } from '@opentech-lab/custom-captcha';
import '@opentech-lab/custom-captcha/dist/index.css';

export default function MyForm() {
  const [captchaToken, setCaptchaToken] = useState<string | null>(null);

  // Define your CAPTCHA questions
  const questions = [
    {
      type: 'multiple-choice' as const,
      question: 'Which of these is a prime number?',
      choices: ['4', '7', '9', '12'],
      answer: '7',
    },
    {
      type: 'image-select' as const,
      question: 'Select all images containing a cat',
      images: [
        { src: '/path/to/cat1.jpg', isCorrect: true },
        { src: '/path/to/dog1.jpg', isCorrect: false },
        { src: '/path/to/cat2.jpg', isCorrect: true },
        { src: '/path/to/bird1.jpg', isCorrect: false },
      ],
    },
  ];

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    // Your form submission logic here
    // The captchaToken is sent to the server for validation
    console.log('Submitting with token:', captchaToken);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" placeholder="Your email" required />

      <CustomCaptcha
        siteKey="YOUR_UNIQUE_SITE_KEY"
        questions={questions}
        onSuccess={(token) => {
          console.log('CAPTCHA solved:', token);
          setCaptchaToken(token);
        }}
        onError={(error) => {
          console.error('CAPTCHA failed:', error);
          setCaptchaToken(null);
        }}
        theme="light"
      />

      <button type="submit" disabled={!captchaToken}>
        Submit
      </button>
    </form>
  );
}

// src/components/CaptchaDialog.tsx
import React, { useState, useEffect } from 'react';
import { CustomCaptcha } from '@opentech-lab/custom-captcha';
import '@opentech-lab/custom-captcha/dist/index.css';

const CACHE_KEY = 'captcha_verified';
const CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours in milliseconds

export function CaptchaDialog({ onVerified }: { onVerified: () => void }) {
  const [showCaptcha, setShowCaptcha] = useState(false);

  useEffect(() => {
    // Check if user has already verified within the last 24 hours
    const cachedVerification = localStorage.getItem(CACHE_KEY);
    if (cachedVerification) {
      const verificationData = JSON.parse(cachedVerification);
      const now = Date.now();
      
      if (now - verificationData.timestamp < CACHE_DURATION) {
        // Still valid, user doesn't need to verify again
        onVerified();
        return;
      } else {
        // Cache expired, remove it
        localStorage.removeItem(CACHE_KEY);
      }
    }
    
    // Show CAPTCHA dialog
    setShowCaptcha(true);
  }, [onVerified]);

  const handleCaptchaSuccess = (token: string) => {
    // Store verification in localStorage with timestamp
    const verificationData = {
      token,
      timestamp: Date.now(),
    };
    localStorage.setItem(CACHE_KEY, JSON.stringify(verificationData));
    
    setShowCaptcha(false);
    onVerified();
  };

  const questions = [
    {
      type: 'multiple-choice' as const,
      question: 'What is 5 + 3?',
      choices: ['6', '7', '8', '9'],
      answer: '8',
    },
  ];

  if (!showCaptcha) return null;

  return (
    <div className="captcha-overlay">
      <div className="captcha-dialog">
        <h3>Please verify you're human</h3>
        <CustomCaptcha
          siteKey="your-site-key"
          questions={questions}
          onSuccess={handleCaptchaSuccess}
          onError={(error) => console.error('CAPTCHA failed:', error)}
          theme="light"
        />
      </div>
    </div>
  );
}

// Add these styles to your CSS
const styles = `
.captcha-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha-dialog {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
}
`;

// src/App.tsx
import React, { useState } from 'react';
import { CaptchaDialog } from './components/CaptchaDialog';

export default function App() {
  const [isVerified, setIsVerified] = useState(false);
  const [showProtectedContent, setShowProtectedContent] = useState(false);

  const handleAccessProtectedContent = () => {
    if (isVerified) {
      setShowProtectedContent(true);
    } else {
      // This will trigger the CAPTCHA dialog if not cached
      setIsVerified(false);
    }
  };

  return (
    <div>
      <h1>My Website</h1>
      <button onClick={handleAccessProtectedContent}>
        Access Protected Content
      </button>
      
      {showProtectedContent && (
        <div>
          <h2>Protected Content</h2>
          <p>This content is only shown after CAPTCHA verification.</p>
        </div>
      )}

      {!isVerified && (
        <CaptchaDialog onVerified={() => setIsVerified(true)} />
      )}
    </div>
  );
}