import React, { useEffect, useState } from 'react';
import { __ } from '@wordpress/i18n';

const SMTP_PASS_MASK = '********';

export default function Settings() {
  const [fromEmail, setFromEmail] = useState('');
  const [fromName, setFromName] = useState('');
  const [overrideMailer, setOverrideMailer] = useState(false);
  const [mailer, setMailer] = useState('php');
  const [smtpHost, setSmtpHost] = useState('');
  const [smtpPort, setSmtpPort] = useState('587');
  const [smtpEncryption, setSmtpEncryption] = useState('');
  const [smtpAuth, setSmtpAuth] = useState(true);
  const [smtpUser, setSmtpUser] = useState('');
  const [smtpPass, setSmtpPass] = useState('');
  const [hasSmtpPass, setHasSmtpPass] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [notice, setNotice] = useState(null);

  useEffect(() => {
    const loadSettings = async () => {
      try {
        const response = await fetch(hqMailAdmin.settingsUrl, {
          method: 'GET',
          headers: {
            'X-WP-Nonce': hqMailAdmin.nonce,
          },
        });

        const data = await response.json();

        if (!response.ok) {
          setNotice({
            type: 'error',
            message: data?.message || __('Unable to load settings.', 'hq-mail'),
          });
          return;
        }

        setFromEmail(data?.from_email || '');
        setFromName(data?.from_name || '');
        setOverrideMailer(Boolean(data?.override_mailer));
        setMailer(data?.mailer || 'php');
        setSmtpHost(data?.smtp_host || '');
        setSmtpPort(String(data?.smtp_port || 587));
        setSmtpEncryption(data?.smtp_encryption || '');
        setSmtpAuth(typeof data?.smtp_auth === 'boolean' ? data.smtp_auth : true);
        const savedSmtpPass = Boolean(data?.has_smtp_pass);
        setSmtpUser(data?.smtp_user || '');
        setHasSmtpPass(savedSmtpPass);
        setSmtpPass(savedSmtpPass ? SMTP_PASS_MASK : '');
      } catch (error) {
        setNotice({
          type: 'error',
          message: __('Network error while loading settings.', 'hq-mail'),
        });
      } finally {
        setIsLoading(false);
      }
    };

    loadSettings();
  }, []);

  const saveSettings = async (e) => {
    e.preventDefault();
    setNotice(null);
    setIsSaving(true);

    try {
      const shouldKeepSmtpPass = hasSmtpPass && smtpPass === SMTP_PASS_MASK;

      const response = await fetch(hqMailAdmin.settingsUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-WP-Nonce': hqMailAdmin.nonce,
        },
        body: JSON.stringify({
          from_email: fromEmail,
          from_name: fromName,
          override_mailer: overrideMailer,
          mailer,
          smtp_host: smtpHost,
          smtp_port: Number.parseInt(smtpPort || '0', 10),
          smtp_encryption: smtpEncryption,
          smtp_auth: smtpAuth,
          smtp_user: smtpUser,
          smtp_pass_action: shouldKeepSmtpPass ? 'keep' : 'set',
          smtp_pass: shouldKeepSmtpPass ? '' : smtpPass,
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        setNotice({
          type: 'error',
          message: data?.message || __('Unable to save settings.', 'hq-mail'),
        });
        return;
      }

      setFromEmail(data?.settings?.from_email || '');
      setFromName(data?.settings?.from_name || '');
      setOverrideMailer(Boolean(data?.settings?.override_mailer));
      setMailer(data?.settings?.mailer || 'php');
      setSmtpHost(data?.settings?.smtp_host || '');
      setSmtpPort(String(data?.settings?.smtp_port || 587));
      setSmtpEncryption(data?.settings?.smtp_encryption || '');
      setSmtpAuth(typeof data?.settings?.smtp_auth === 'boolean' ? data.settings.smtp_auth : true);
      const savedSmtpPass = Boolean(data?.settings?.has_smtp_pass);
      setSmtpUser(data?.settings?.smtp_user || '');
      setHasSmtpPass(savedSmtpPass);
      setSmtpPass(savedSmtpPass ? SMTP_PASS_MASK : '');
      setNotice({
        type: 'success',
        message: data?.message || __('Settings saved.', 'hq-mail'),
      });
    } catch (error) {
      setNotice({
        type: 'error',
        message: __('Network error while saving settings.', 'hq-mail'),
      });
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <div className="mt-5 p-6 bg-white rounded shadow">
      <h2 className="text-2xl font-bold mb-4">{__('Mail Sending Settings', 'hq-mail')}</h2>
      <p className="mb-4">{__('Configure sender details and the email transport mode.', 'hq-mail')}</p>

      <form onSubmit={saveSettings}>
        <div className="mb-4 rounded border p-3">
          <label className="flex items-center gap-2">
            <input type="checkbox" checked={overrideMailer} onChange={(e) => setOverrideMailer(e.target.checked)} disabled={isLoading || isSaving} />
            <span className="font-medium">{__('Intercept sending and override third-party mail settings', 'hq-mail')}</span>
          </label>
          <p className="mt-2 text-sm text-slate-600">{__('When enabled, the plugin applies its own settings to all WordPress emails.', 'hq-mail')}</p>
        </div>

        {overrideMailer && (
          <div>
            <div className="mb-4">
              <label className="mb-1 block font-medium" htmlFor="hq-mail-from-email">
                {__('Sender Email Address', 'hq-mail')}
              </label>
              <input
                id="hq-mail-from-email"
                className="w-full rounded border px-3 py-2"
                type="email"
                value={fromEmail}
                onChange={(e) => setFromEmail(e.target.value)}
                placeholder="sender@example.com"
                disabled={isLoading || isSaving}
              />
            </div>

            <div className="mb-4">
              <label className="mb-1 block font-medium" htmlFor="hq-mail-from-name">
                {__('Sender Name', 'hq-mail')}
              </label>
              <input
                id="hq-mail-from-name"
                className="w-full rounded border px-3 py-2"
                type="text"
                value={fromName}
                onChange={(e) => setFromName(e.target.value)}
                placeholder={__('Hq Mail', 'hq-mail')}
                disabled={isLoading || isSaving}
              />
            </div>

            <div className="mb-4">
              <label className="mb-1 block font-medium">{__('Sending Method', 'hq-mail')}</label>
              <div className="flex flex-col gap-2">
                <label className="flex items-center gap-2">
                  <input type="radio" name="hq-mail-mailer" value="php" checked={mailer === 'php'} onChange={(e) => setMailer(e.target.value)} disabled={isLoading || isSaving} />
                  <span>{__('PHP (mail)', 'hq-mail')}</span>
                </label>
                <label className="flex items-center gap-2">
                  <input type="radio" name="hq-mail-mailer" value="smtp" checked={mailer === 'smtp'} onChange={(e) => setMailer(e.target.value)} disabled={isLoading || isSaving} />
                  <span>{__('SMTP', 'hq-mail')}</span>
                </label>
              </div>
            </div>

            {mailer === 'smtp' && (
              <div className="mb-4 rounded border p-3">
                <p className="mb-3 font-medium">{__('SMTP Settings', 'hq-mail')}</p>

                <div className="mb-3">
                  <label className="mb-1 block font-medium" htmlFor="hq-mail-smtp-host">
                    {__('SMTP Host', 'hq-mail')}
                  </label>
                  <input
                    id="hq-mail-smtp-host"
                    className="w-full rounded border px-3 py-2"
                    type="text"
                    value={smtpHost}
                    onChange={(e) => setSmtpHost(e.target.value)}
                    placeholder="smtp.example.com"
                    disabled={isLoading || isSaving}
                  />
                </div>

                <div className="mb-3">
                  <label className="mb-1 block font-medium" htmlFor="hq-mail-smtp-port">
                    {__('SMTP Port', 'hq-mail')}
                  </label>
                  <input
                    id="hq-mail-smtp-port"
                    className="w-full rounded border px-3 py-2"
                    type="number"
                    value={smtpPort}
                    onChange={(e) => setSmtpPort(e.target.value)}
                    placeholder="587"
                    disabled={isLoading || isSaving}
                  />
                </div>

                <div className="mb-3">
                  <label className="mb-1 block font-medium" htmlFor="hq-mail-smtp-encryption">
                    {__('Encryption', 'hq-mail')}
                  </label>
                  <select
                    id="hq-mail-smtp-encryption"
                    className="w-full rounded border px-3 py-2"
                    value={smtpEncryption}
                    onChange={(e) => setSmtpEncryption(e.target.value)}
                    disabled={isLoading || isSaving}>
                    <option value="">{__('No encryption', 'hq-mail')}</option>
                    <option value="tls">TLS</option>
                    <option value="ssl">SSL</option>
                  </select>
                </div>

                <div className="mb-3">
                  <label className="flex items-center gap-2">
                    <input type="checkbox" checked={smtpAuth} onChange={(e) => setSmtpAuth(e.target.checked)} disabled={isLoading || isSaving} />
                    <span>{__('Use SMTP authentication', 'hq-mail')}</span>
                  </label>
                </div>

                <div className="mb-3">
                  <label className="mb-1 block font-medium" htmlFor="hq-mail-smtp-user">
                    {__('SMTP Username', 'hq-mail')}
                  </label>
                  <input
                    id="hq-mail-smtp-user"
                    className="w-full rounded border px-3 py-2"
                    type="text"
                    value={smtpUser}
                    onChange={(e) => setSmtpUser(e.target.value)}
                    disabled={isLoading || isSaving || !smtpAuth}
                  />
                </div>

                <div className="mb-0">
                  <label className="mb-1 block font-medium" htmlFor="hq-mail-smtp-pass">
                    {__('SMTP Password', 'hq-mail')}
                  </label>
                  <input
                    id="hq-mail-smtp-pass"
                    className="w-full rounded border px-3 py-2"
                    type="password"
                    value={smtpPass}
                    onChange={(e) => setSmtpPass(e.target.value)}
                    disabled={isLoading || isSaving || !smtpAuth}
                  />
                </div>
              </div>
            )}
          </div>
        )}
        <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-60" disabled={isLoading || isSaving}>
          {isSaving ? __('Saving...', 'hq-mail') : __('Save settings', 'hq-mail')}
        </button>
      </form>

      {notice && <p className={`mt-4 ${notice.type === 'success' ? 'text-green-600' : 'text-red-600'}`}>{notice.message}</p>}
    </div>
  );
}