'use client';

import { useState } from 'react';
import styles from '../commonstyle/dattabale.module.css';
import EmailSettingsForm from './Form/EmailSettingsForm';
import { useModulePermissions } from '@/lib/api/hooks/useModulePermissions';

interface Props {
  refreshData?: () => void;
}

export default function EmailSettingsHeader({ refreshData }: Props) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const { canPerform, isReady } = useModulePermissions('email-settings');

  return (
    <>
      <div className={styles.header}>
        <div className={styles.headerLeft}>
          <h1 className={styles.title}>Email Settings</h1>
          <p className={styles.subtitle}>
            Per-user SMTP configurations — each user can send mail from their own address
          </p>
        </div>

        <div className={styles.headerRight}>
          {!isReady ? (
            <span style={{ fontSize: 12, color: '#9ca3af' }}>Loading...</span>
          ) : (
            <>
              {canPerform('create') && (
                <button
                  className={styles.btnPrimary}
                  onClick={() => setIsModalOpen(true)}
                >
                  ＋ New SMTP Config
                </button>
              )}
            </>
          )}
        </div>
      </div>

      <EmailSettingsForm
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        refreshData={refreshData}
      />
    </>
  );
}