'use client';

import React, { useEffect, useState } from 'react';
import Select from 'react-select';
import toast from 'react-hot-toast';
import styles from '../../commonstyle/FormStyles.module.css';
import {
  createEmailSetting,
  updateEmailSetting,
  getEmailSetting,
} from '@/lib/api/email-settings.api';
import type {
  UpsertEmailSettingDto,
  SmtpEncryption,
} from '@/lib/api/types/email-settings.types';

interface SelectOption { value: string; label: string; }

interface Props {
  isOpen: boolean;
  onClose: () => void;
  refreshData?: () => void;
  editId?: number | null;
}

// Masked value the backend returns for the password — never resend this.
const MASK = '••••••••';

const DEFAULT = {
  smtp_host: '',
  smtp_port: 587,
  smtp_username: '',
  smtp_password: '',
  smtp_encryption: 'tls' as SmtpEncryption,
  from_email: '',
  from_name: '',
  user_id: '' as string | number,
};

const ENCRYPTION_OPTIONS: SelectOption[] = [
  { value: 'tls',  label: 'TLS (STARTTLS, port 587)' },
  { value: 'ssl',  label: 'SSL (port 465)' },
  { value: 'none', label: 'None (unencrypted)' },
];

export default function EmailSettingsForm({ isOpen, onClose, refreshData, editId }: Props) {
  const isEdit = Boolean(editId);

  const [form, setForm]               = useState({ ...DEFAULT });
  const [errors, setErrors]           = useState<Record<string, string>>({});
  const [saving, setSaving]           = useState(false);
  const [loadingEdit, setLoadingEdit] = useState(false);
  // tracks whether the user typed a new password (only then do we send it on edit)
  const [passwordTouched, setPasswordTouched] = useState(false);

  // ── Hydrate on edit ────────────────────────────────────────────────────────
  useEffect(() => {
    if (!isOpen) return;
    setErrors({});
    setPasswordTouched(false);
    if (editId) {
      setLoadingEdit(true);
      getEmailSetting(editId)
        .then((cfg) => {
          setForm({
            smtp_host: cfg.smtp_host || '',
            smtp_port: cfg.smtp_port || 587,
            smtp_username: cfg.smtp_username || '',
            smtp_password: '', // never prefill the masked secret
            smtp_encryption: (cfg.smtp_encryption || 'tls') as SmtpEncryption,
            from_email: cfg.from_email || '',
            from_name: cfg.from_name || '',
            user_id: cfg.user_id ?? '',
          });
        })
        .catch(() => toast.error('Failed to load SMTP config'))
        .finally(() => setLoadingEdit(false));
    } else {
      setForm({ ...DEFAULT });
    }
  }, [isOpen, editId]);

  if (!isOpen) return null;

  const setField = (key: keyof typeof DEFAULT, value: any) =>
    setForm((f) => ({ ...f, [key]: value }));

  // ── Validation ───────────────────────────────────────────────────────────
  const validate = (): boolean => {
    const e: Record<string, string> = {};
    if (!form.smtp_host.trim()) e.smtp_host = 'SMTP host is required';
    if (!form.smtp_port || Number(form.smtp_port) <= 0) e.smtp_port = 'Valid port required';
    if (!form.smtp_username.trim()) e.smtp_username = 'Username is required';
    if (!form.from_email.trim()) e.from_email = 'From email is required';
    // password required only when creating
    if (!isEdit && !form.smtp_password.trim()) e.smtp_password = 'Password is required';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  // ── Submit ───────────────────────────────────────────────────────────────
  const handleSubmit = async () => {
    if (!validate()) { toast.error('Please fix the errors'); return; }

    const dto: UpsertEmailSettingDto = {
      smtp_host: form.smtp_host.trim(),
      smtp_port: Number(form.smtp_port),
      smtp_username: form.smtp_username.trim(),
      smtp_encryption: form.smtp_encryption,
      from_email: form.from_email.trim(),
      from_name: form.from_name.trim() || null,
      user_id: form.user_id === '' ? null : Number(form.user_id),
    };

    // Only include the password when creating OR when the user typed a new one.
    if (!isEdit || (passwordTouched && form.smtp_password.trim())) {
      dto.smtp_password = form.smtp_password;
    }

    setSaving(true);
    try {
      if (isEdit && editId) {
        await updateEmailSetting(editId, dto);
        toast.success('SMTP config updated');
      } else {
        await createEmailSetting(dto);
        toast.success('SMTP config created');
      }
      refreshData?.();
      onClose();
    } catch (err: any) {
      toast.error(err.message || 'Failed to save');
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className={styles.modalOverlay}>
      <div className={styles.modalContent}>
        {/* Header */}
        <div className={styles.modalHeader}>
          <h2 className={styles.modalTitle}>
            {isEdit ? '✏️ Edit SMTP Config' : '＋ New SMTP Config'}
          </h2>
          <button className={styles.closeBtn} onClick={onClose}>✕</button>
        </div>

        {/* Body */}
        {loadingEdit ? (
          <div style={{ padding: 40, textAlign: 'center', color: '#9ca3af' }}>Loading…</div>
        ) : (
          <div className={styles.formBody}>
            <div className={styles.grid2}>

              {/* From email */}
              <div className={styles.formGroup}>
                <label className={styles.label}>From Email *</label>
                <input
                  className={styles.input}
                  type="email"
                  value={form.from_email}
                  onChange={(e) => setField('from_email', e.target.value)}
                  placeholder="auditor@qrs.ae"
                />
                {errors.from_email && <span className={styles.error}>{errors.from_email}</span>}
              </div>

              {/* From name */}
              <div className={styles.formGroup}>
                <label className={styles.label}>From Name</label>
                <input
                  className={styles.input}
                  value={form.from_name}
                  onChange={(e) => setField('from_name', e.target.value)}
                  placeholder="Mr. Auditor"
                />
              </div>

              {/* SMTP host */}
              <div className={styles.formGroup}>
                <label className={styles.label}>SMTP Host *</label>
                <input
                  className={styles.input}
                  value={form.smtp_host}
                  onChange={(e) => setField('smtp_host', e.target.value)}
                  placeholder="smtp.gmail.com"
                />
                {errors.smtp_host && <span className={styles.error}>{errors.smtp_host}</span>}
              </div>

              {/* SMTP port */}
              <div className={styles.formGroup}>
                <label className={styles.label}>SMTP Port *</label>
                <input
                  className={styles.input}
                  type="number"
                  value={form.smtp_port}
                  onChange={(e) => setField('smtp_port', e.target.value)}
                  placeholder="587"
                />
                {errors.smtp_port && <span className={styles.error}>{errors.smtp_port}</span>}
              </div>

              {/* Username */}
              <div className={styles.formGroup}>
                <label className={styles.label}>SMTP Username *</label>
                <input
                  className={styles.input}
                  value={form.smtp_username}
                  onChange={(e) => setField('smtp_username', e.target.value)}
                  placeholder="auditor@qrs.ae"
                />
                {errors.smtp_username && <span className={styles.error}>{errors.smtp_username}</span>}
              </div>

              {/* Password */}
              <div className={styles.formGroup}>
                <label className={styles.label}>
                  SMTP Password {isEdit ? '(leave blank to keep current)' : '*'}
                </label>
                <input
                  className={styles.input}
                  type="password"
                  value={form.smtp_password}
                  onChange={(e) => { setField('smtp_password', e.target.value); setPasswordTouched(true); }}
                  placeholder={isEdit ? MASK : 'App password / SMTP password'}
                  autoComplete="new-password"
                />
                {errors.smtp_password && <span className={styles.error}>{errors.smtp_password}</span>}
              </div>

              {/* Encryption */}
              <div className={styles.formGroup}>
                <label className={styles.label}>Encryption *</label>
                <Select
                  options={ENCRYPTION_OPTIONS}
                  value={ENCRYPTION_OPTIONS.find(o => o.value === form.smtp_encryption) || null}
                  onChange={(opt) => setField('smtp_encryption', (opt?.value || 'tls') as SmtpEncryption)}
                  classNamePrefix="rs"
                  menuPortalTarget={typeof document !== 'undefined' ? document.body : undefined}
                  styles={{ menuPortal: (base) => ({ ...base, zIndex: 2000 }) }}
                />
              </div>

              {/* User ID */}
              <div className={styles.formGroup}>
                <label className={styles.label}>User ID (owner)</label>
                <input
                  className={styles.input}
                  type="number"
                  value={form.user_id}
                  onChange={(e) => setField('user_id', e.target.value)}
                  placeholder="e.g. 2 — leave blank for shared/default"
                />
                <span style={{ fontSize: 11, color: '#9ca3af', marginTop: 4, display: 'block' }}>
                  The user whose mail sends from this address. Must match their account user_id.
                </span>
              </div>

            </div>
          </div>
        )}

        {/* Footer */}
        <div className={styles.modalFooter}>
          <button className={styles.btnSecondary} onClick={onClose} disabled={saving}>
            Cancel
          </button>
          <button className={styles.btnPrimary} onClick={handleSubmit} disabled={saving || loadingEdit}>
            {saving ? 'Saving…' : isEdit ? 'Save Changes' : 'Create Config'}
          </button>
        </div>
      </div>
    </div>
  );
}