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

interface MessageEvent {
  origin: string;
  data: {
    type: string;
    payload?: { platformSessionToken?: string; code?: string; message?: string };
    error?: string;
  };
}

interface AgeGateProps {
  children: React.ReactNode;
  platformKey: string;
}

export function AgeGate({ children, platformKey }: AgeGateProps) {
  const [isVerified, setIsVerified] = useState(
    () => localStorage.getItem('age_verified') === 'true'
  );

  useEffect(() => {
    const handleMessage = async (event: MessageEvent) => {
      // Security: Only accept messages from vouchID widget
      const allowedOrigins = [
        'https://widget.vouchid.co',
        ...(process.env.NODE_ENV === 'development' ? ['http://localhost:3003'] : []),
      ];
      if (!allowedOrigins.includes(event.origin)) return;

      if (event.data.type === 'VOUCHID_SUCCESS') {
        const token = event.data.payload?.platformSessionToken;
        console.log('Received secure token (no verification data):', { tokenReceived: !!token });

        try {
          // REQUIRED: Exchange token for verification data on backend
          const response = await fetch('/api/vouchid/validate', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              platformSessionToken: token
            })
          });

          const validation = await response.json();

          // Backend returns HTTP 200 even when token is invalid; check both response.ok and validation.valid
          if (response.ok && validation.valid && validation.ageVerified) {
            localStorage.setItem('age_verified', 'true');
            localStorage.setItem('verification_token', token || '');
            setIsVerified(true);
          } else {
            throw new Error(validation.error || 'Backend validation failed');
          }
        } catch (error) {
          console.error('Validation error:', error);
          alert('Verification validation failed. Please try again.');
        }
      } else if (event.data.type === 'VOUCHID_FAILURE' || event.data.type === 'VOUCHID_ERROR') {
        const message =
          event.data.payload?.message ||
          event.data.payload?.code ||
          event.data.error ||
          'Verification failed';
        console.error('Age verification failed:', message);
        alert(`Verification failed: ${message}`);
      }
    };

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  if (isVerified) {
    return <>{children}</>;
  }

  return (
    <div className="age-gate max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg">
      <h2 className="text-2xl font-bold mb-4">Age Verification Required</h2>
      <p className="mb-6 text-gray-600">
        To access this content, please verify that you are 18 or older using
        your payment account (PayPal or Revolut).
      </p>

      {/* vouchID Age Verification Widget */}
      <iframe
        src={`https://widget.vouchid.co?platformKey=${platformKey}&mode=age&allowAnonymous=true&parentOrigin=${encodeURIComponent(window.location.origin)}`}
        width="400"
        height="600"
        className="w-full border-0 rounded-lg shadow-md"
        title="Age Verification Widget"
      />
    </div>
  );
}

// Usage Example
export default function App() {
  return (
    <AgeGate platformKey={process.env.NEXT_PUBLIC_VOUCHID_PLATFORM_KEY!}>
      <div className="p-8">
        <h1>Welcome! You are verified as 18+</h1>
        <p>This is the age-restricted content.</p>
      </div>
    </AgeGate>
  );
}

// app/api/vouchid/validate/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  try {
    const { platformSessionToken } = await request.json();

    // Exchange the token for verification data with vouchID API
    const validationResponse = await fetch('https://api.vouchid.co/api/verifications/validate-platform-token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.VOUCHID_API_KEY}` // Your application API key
      },
      body: JSON.stringify({
        platformSessionToken: platformSessionToken
      })
    });

    const verificationData = await validationResponse.json();

    // NOTE: The API returns HTTP 200 even when tokens are invalid; check validationData.valid
    if (!validationResponse.ok || !verificationData.valid) {
      return NextResponse.json(
        { valid: false, error: verificationData.error || 'Invalid token' },
        { status: validationResponse.status || 200 }
      );
    }

    // Store user's verified status in your database or session
    // Example: Update user record with age_verified: true

    return NextResponse.json({
      valid: true,
      ageVerified: verificationData.ageVerified,
      scopedVid: verificationData.scopedVid,
      applicationId: verificationData.applicationId,
      issuedAt: verificationData.issuedAt,
      expiresAt: verificationData.expiresAt,
      verificationDetails: verificationData.verificationDetails
    });

  } catch (error) {
    console.error('Token exchange error:', error);
    return NextResponse.json({ error: 'Token exchange failed' }, { status: 500 });
  }
}

// components/AgeVerificationGate.tsx
import React, { useEffect, useState } from 'react';

type WidgetMessage =
  | {
      type: 'VOUCHID_SUCCESS';
      payload?: { platformSessionToken?: string };
    }
  | {
      type: 'VOUCHID_FAILURE' | 'VOUCHID_ERROR';
      payload?: { code?: string; message?: string };
    };

export function AgeVerificationGate({
  children,
  platformKey,
}: {
  children: React.ReactNode;
  platformKey: string;
}) {
  const [isVerified, setIsVerified] = useState(
    () => localStorage.getItem('age_verified') === 'true'
  );
  const [status, setStatus] = useState<'idle' | 'validating' | 'error'>('idle');
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (isVerified) {
      return;
    }

    const handleMessage = async (event: MessageEvent<WidgetMessage>) => {
      const allowedOrigins = [
        'https://widget.vouchid.co',
        ...(process.env.NODE_ENV === 'development' ? ['http://localhost:3003'] : []),
      ];
      if (!allowedOrigins.includes(event.origin)) return;

      if (event.data.type === 'VOUCHID_SUCCESS') {
        const token = event.data.payload?.platformSessionToken;
        if (!token) {
          setStatus('error');
          setError('Verification token missing.');
          return;
        }

        setStatus('validating');
        setError(null);

        try {
          const response = await fetch('/api/vouchid/validate', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ platformSessionToken: token }),
          });

          const result = await response.json();

          if (response.ok && result.valid && result.ageVerified) {
            localStorage.setItem('age_verified', 'true');
            setIsVerified(true);
          } else {
            throw new Error(result.error || 'Token exchange failed');
          }
        } catch (err) {
          console.error('Token exchange failed', err);
          setStatus('error');
          setError('Verification failed. Please try again.');
        } finally {
          setStatus('idle');
        }
      }

      if (event.data.type === 'VOUCHID_FAILURE' || event.data.type === 'VOUCHID_ERROR') {
        setStatus('error');
        setError(
          event.data.payload?.message ||
          event.data.payload?.code ||
          'Verification was cancelled.'
        );
      }
    };

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, [isVerified]);

  if (isVerified) {
    return <>{children}</>;
  }

  return (
    <div className="age-gate">
      <div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg">
        <h2 className="text-2xl font-bold mb-4">Age Verification Required</h2>
        <p className="mb-6 text-gray-600">
          Complete the verification to access restricted content.
        </p>

        <iframe
          src={`https://widget.vouchid.co?platformKey=${platformKey}&mode=age&allowAnonymous=true&parentOrigin=${encodeURIComponent(window.location.origin)}`}
          width="100%"
          height="600"
          className="border-0 rounded-lg shadow-md"
          title="vouchID age verification"
          allow="camera *; microphone *"
        />

        {status === 'validating' && (
          <p className="mt-4 text-gray-500">Validating verification...</p>
        )}

        {status === 'error' && error && (
          <p className="mt-4 text-red-600">{error}</p>
        )}
      </div>
    </div>
  );
}