import React from "react";
import InputField from "./InputField";
import TextAreaField from "./TextAreaField";
import { isProActive } from "../../../Helpers";
import { Tooltip } from 'react-tooltip'
import 'react-tooltip/dist/react-tooltip.css'
const { __ } = wp.i18n;
import PassInputField from "../common-fields/PassInputField";
import { langString } from "../../../Helpers";
import { PUBLIC_DOMAINS } from "../../dashboard/RandomDomainGenerator";

const ApiSettingsTab = ({ formData, setFormData }) => {
  const handleDomainChange = (event) => {
    setFormData({
      ...formData,
      domain_type: event.target.value
    });
  };

  const handleInputChange = (field, value) => {
    setFormData(prevState => ({
      ...prevState,
      [field]: value
    }));
  };

  const { domain_type, custom_domain, app_id, api_key, private_key, selected_public_domain } = formData;

  const handlePublicDomainChange = (e) => {
    setFormData({ ...formData, selected_public_domain: e.target.value });
  };

  return (
    <div className="api-settings-tab">
      <div className="jitsi-section-pannel">
        <div className="select-domain-title">
          <h3>{langString('select_hosted_domain') }</h3>
        </div>
        <div className="select-domain-description">
          <p>{langString('select_hosted_domain_hint')}</p>
        </div>

        <div className="radio-field">
          <input
            type="radio"
            id="jitsi_random_public"
            value="jitsi_random_public"
            checked={domain_type === "jitsi_random_public"}
            onChange={handleDomainChange}
          />
          <label htmlFor="jitsi_random_public">
            {langString('random_public_domain') }
            <a className="mhub-info" data-tooltip-id="jitsi_random_public" data-tooltip-content={langString('random_public_domain_hint') }>𝒊</a>
          </label>

          <Tooltip id="jitsi_random_public" place="right" type="info" effect="float" style={{ fontSize: '14px', width: '400px' }} />
        </div>

        {domain_type === "jitsi_random_public" && (
          <div className="select-domain-wrapper" style={{ marginLeft: '28px', marginBottom: '16px', marginTop: '8px' }}>
            <label htmlFor="selected_public_domain" style={{ display: 'block', marginBottom: '6px', fontSize: '13px', fontWeight: '600', color: '#3c434a' }}>
              {langString('select_domain') || 'Select Domain'}
            </label>
            <select
              id="selected_public_domain"
              value={selected_public_domain || ''}
              onChange={handlePublicDomainChange}
              style={{
                display: 'block',
                width: '260px',
                padding: '8px 32px 8px 12px',
                fontSize: '13px',
                lineHeight: '1.4',
                color: '#3c434a',
                background: '#fff url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'8\' viewBox=\'0 0 12 8\'%3E%3Cpath fill=\'%23646970\' d=\'M1.5 1.5 6 6l4.5-4.5\'/%3E%3C/svg%3E") no-repeat right 10px center',
                backgroundSize: '10px',
                border: '1px solid #8c8f94',
                borderRadius: '4px',
                appearance: 'none',
                WebkitAppearance: 'none',
                cursor: 'pointer',
                boxShadow: '0 1px 2px rgba(0,0,0,0.07)',
                outline: 'none',
              }}
              onFocus={e => { e.target.style.borderColor = '#2271b1'; e.target.style.boxShadow = '0 0 0 1px #2271b1'; }}
              onBlur={e => { e.target.style.borderColor = '#8c8f94'; e.target.style.boxShadow = '0 1px 2px rgba(0,0,0,0.07)'; }}
            >
              <option value="">{langString('select_domain_placeholder') || '— Select a domain —'}</option>
              {PUBLIC_DOMAINS.map((d) => (
                <option key={d.value} value={d.value}>{d.label}</option>
              ))}
            </select>
            <p style={{ marginTop: '6px', color: '#646970', fontSize: '12px' }}>
              {langString('select_domain_note') || 'Leave blank to use a random domain each time.'}
            </p>
          </div>
        )}

        <div className={`radio-field`}>
          <input
            type="radio"
            id="jitsi_jass_premium"
            value="jitsi_jass_premium"
            checked={domain_type === "jitsi_jass_premium"}
            onChange={handleDomainChange}
          />
         <label htmlFor="jitsi_jass_premium">
            {langString('jaas_8x8') }
            <a className="mhub-info" data-tooltip-id="jitsi_jass_premium" data-tooltip-content={langString('jaas_8x8_hint') }>𝒊</a>
          </label>

          <Tooltip id="jitsi_jass_premium" place="right" type="info" effect="float" style={{ fontSize: '14px', width: '400px' }} />
        </div>

        <div className={`radio-field`}>
          <input
            type="radio"
            id="jitsi_self_hosted"
            value="jitsi_self_hosted"
            checked={domain_type === "jitsi_self_hosted"}
            onChange={handleDomainChange}
          />
         <label htmlFor="jitsi_self_hosted">
            {langString('use_own_domain') }
            <a className="mhub-info" data-tooltip-id="jitsi_self_hosted" data-tooltip-content={langString('custom_domain_info') }>𝒊</a>
          </label>

          <Tooltip id="jitsi_self_hosted" place="right" type="info" effect="float" style={{ fontSize: '14px', width: '400px' }} />

        </div>

        {domain_type === "jitsi_self_hosted" && (
          <div className={`sefl-hosted-wrapper`}>
             <p className="description">
                {langString('any_valid_domain_note') }{' '}
                <a
                  href="https://jitsi.github.io/handbook/docs/devops-guide/"
                  target="_blank"
                  rel="noreferrer noopener"
                >
                  {langString('selfhosted_server') }
                </a>{' '}
                {langString('follow_guidance') }
              </p>

            <div className={`field-wrapper`}>
              <InputField
                label={langString('hosted_domain') }
                type="text"
                id="meetinghub_hosted_domain"
                value={custom_domain}
                onChange={(value) => handleInputChange("custom_domain", value)}
                placeholder={langString('example_8x8') }
                tooltip={langString('selfhosted_or_other_domain') }
              />
            </div>
          </div>
        )}

        {domain_type === "jitsi_jass_premium" && (
        <div className={`jass-wrapper`}>
          <p className="description">
              {langString('jaas_setup_note') }{' '}
              <a
                href="https://jaas.8x8.vc/#/"
                target="_blank"
                rel="noreferrer noopener"
              >
                {langString('login_jaas_account') }
              </a>
              . {langString('watch_our') }{' '}
              <a
                href="https://youtu.be/YqQ7Kcap5vo"
                target="_blank"
                rel="noreferrer noopener"
              >
                {langString('tutorial_video') }
              </a>{' '}
              {langString('for_guidance') }
            </p>

          <div className={`field-wrapper`}>
              <PassInputField
                label={langString('app_id') }
                type="password"
                id="jass_app_id"
                name="app_id"
                value={app_id}
                onChange={(value) => handleInputChange("app_id", value)}
                tooltip={langString('retrieve_the_App') }
              />

              <PassInputField
                label={langString('api_key') }
                type="password"
                id="jass_api_key"
                name="api_key"
                value={api_key}
                onChange={(value) => handleInputChange("api_key", value)}
                tooltip={langString('obtain_api_key') }
              />

              <TextAreaField
                label={langString('private_key') }
                id="jass_private_key"
                value={private_key}
                onChange={(value) => handleInputChange("private_key", value)}
                rows='6'
                tooltip={langString('generate_private_key') }
              />

          </div>
        </div>
        )}

      </div>
    </div>
  );
};

export default ApiSettingsTab;