import React, { useState, useEffect } from 'react';
import { data } from 'react-router-dom';
const { protocol, hostname, port } = window.location;
import { Helmet } from 'react-helmet';

let fullHost = `${protocol}//${hostname}`;
if (
  (protocol === 'http:' && port !== '80') ||
  (protocol === 'https:' && port !== '443' && port !== '')
) {
  fullHost += `:${port}`;
}

function API() {
  // Widevine device info
  const [deviceInfo, setDeviceInfo] = useState({
    device_type: '',
    system_id: '',
    security_level: '',
    host: '',
    secret: '',
    device_name: ''
  });

  // PlayReady device info
  const [prDeviceInfo, setPrDeviceInfo] = useState({
    security_level: '',
    host: '',
    secret: '',
    device_name: ''
  });

  useEffect(() => {
    // Fetch Widevine info
    fetch('/remotecdm/widevine/deviceinfo')
      .then(response => response.json())
      .then(data => {
        setDeviceInfo({
          device_type: data.device_type,
          system_id: data.system_id,
          security_level: data.security_level,
          host: data.host,
          secret: data.secret,
          device_name: data.device_name
        });
      })
      .catch(error => console.error('Error fetching Widevine info:', error));

    // Fetch PlayReady info
    fetch('/remotecdm/playready/deviceinfo')
      .then(response => response.json())
      .then(data => {
        setPrDeviceInfo({
          security_level: data.security_level,
          host: data.host,
          secret: data.secret,
          device_name: data.device_name
        });
      })
      .catch(error => console.error('Error fetching PlayReady info:', error));
  }, []);

  return (
    <>
      <div className='min-w-full w-full min-h-full overflow-x-auto bg-zinc-900 shadow-lg shadow-black flex flex-col flex-wrap p-10 justify-around'>
      <Helmet>
        <title>API</title>
      </Helmet>
        
        {/* Decryption Request Section */}
        <details open className='p-5 mb-5 border shadow-lg shadow-black overflow-y-auto'>
          <summary className='bg-[rgba(0,0,0,0.2)] p-2 rounded text-white flex shadow-purple-900 shadow-sm'>
            Sending a decryption request | {`(Python)`}
          </summary>
          <br />
          <div className='h-9/10 bg-[rgba(0,0,0,0.2)] p-2 rounded text-white shadow-sm shadow-purple-900 w-full overflow-x-auto overflow-y-auto'>
            <pre className='p-2'>
              {`import requests

print(requests.post(
    url='${fullHost}/api/decrypt',
    headers={
        'Content-Type': 'application/json',
    },
    json={
        'pssh': 'AAAAW3Bzc2gAAAAA7e+LqXnWSs6jyCfc1R0h7QAAADsIARIQ62dqu8s0Xpa7z2FmMPGj2hoNd2lkZXZpbmVfdGVzdCIQZmtqM2xqYVNkZmFsa3IzaioCSEQyAA==',
        'licurl': 'https://cwip-shaka-proxy.appspot.com/no_auth',
        'headers': str({
            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0',
            'Accept': '*/*',
            'Accept-Language': 'en-US,en;q=0.5',
        })
    }
).json()['message'])`}
            </pre>
          </div>
        </details>
        
        {/* Search Request Section */}
        <details open className=' p-5 mb-5 shadow-lg shadow-black border overflow-y-auto' >
          <summary className='bg-[rgba(0,0,0,0.2)] p-2 rounded text-white flex shadow-sm shadow-purple-900'>
            Sending a search request | {`(Python)`}
          </summary>
          <br />
          <div className='h-9/10 bg-[rgba(0,0,0,0.2)] p-2 rounded text-white shadow-sm shadow-purple-900'>
            <pre className='p-2'>{`import requests

print(requests.post(
    url='${fullHost}/api/cache/search',
    json={
        'input': 'AAAAW3Bzc2gAAAAA7e+LqXnWSs6jyCfc1R0h7QAAADsIARIQ62dqu8s0Xpa7z2FmMPGj2hoNd2lkZXZpbmVfdGVzdCIQZmtqM2xqYVNkZmFsa3IzaioCSEQyAA=='
    }
).json())`}</pre>
          </div>
        </details>
        
        {/* Remote CDM Configuration Section */}
        <details open className=' p-5 mb-5 shadow-lg shadow-black border overflow-y-auto'>
          <summary className='bg-[rgba(0,0,0,0.2)] p-2 rounded text-white flex shadow-sm shadow-purple-900'>
            Remote CDM configuration (Widevine) | {`(For PyWidevine / Devine / VineTrimmer / Extensions)`}
          </summary>
          <br />
          <div className='h-9/10 bg-[rgba(0,0,0,0.2)] p-2 rounded text-white shadow-sm shadow-purple-900'>
            <p className='p-2'>
              device_type: <span id='wv_device_type'>"{deviceInfo.device_type}"</span>
              <br></br>
              system_id: <span id='wv_system_id'>{deviceInfo.system_id}</span>
              <br></br>
              security_level: <span id='wv_security_level'>{deviceInfo.security_level}</span>
              <br></br>
              host: <span id='wv_host'>"{fullHost}/remotecdm/widevine"</span>
              <br></br>
              secret: <span id='wv_secret'>"{deviceInfo.secret}"</span>
              <br></br>
              device_name: <span id='wv_device_name'>{deviceInfo.device_name}</span>
            </p>
          </div>
        </details>

        {/* Remote CDM Configuration Section */}
        <details open className=' p-5 mb-5 shadow-lg shadow-black border overflow-y-auto'>
          <summary className='bg-[rgba(0,0,0,0.2)] p-2 rounded text-white flex shadow-sm shadow-purple-900'>
            Remote CDM configuration (PlayReady) | {`(For PyPlayReady / Extensions / PlayReady Proxy)`}
          </summary>
          <br />
          <div className='h-9/10 bg-[rgba(0,0,0,0.2)] p-2 rounded text-white shadow-sm shadow-purple-900'>
            <p className='p-2'>
              device_name: <span id='pr_device_name'>{prDeviceInfo.device_name}</span>
              <br></br>
              security_level: <span id='pr_security_level'>{prDeviceInfo.security_level}</span>
              <br></br>
              host: <span id='pr_host'>"{fullHost}/remotecdm/playready"</span>
              <br></br>
              secret: <span id='pr_secret'>"{prDeviceInfo.secret}"</span>
              <br></br>
            </p>
          </div>
        </details>
        
        {/* Webvault Configuration Section */}
        <details  open className='p-5 mb-5 shadow-lg shadow-black border overflow-y-auto'>
          <summary className='bg-[rgba(0,0,0,0.2)] p-2 rounded text-white flex shadow-sm shadow-purple-900 transition-all transition-300 ease-in'>
            Webvault configuration | {`(For Devine / VineTrimmer)`}
          </summary>
          <br />
          <div className='h-9/10 bg-[rgba(0,0,0,0.2)] p-2 rounded text-white shadow-sm shadow-purple-900'>
            <pre className='p-2'>{`key_vaults:
    - type: API
      name: "Online Vault"
      uri: "${fullHost}/api/cache"
      token: "${deviceInfo.secret}"`}</pre>
          </div>
        </details>
        
      </div>
    </>
  );
}

export default API;
