'use client';
import React, { useState } from 'react';
import Tab from '@/components/Tab';
import TabContent from '@/components/TabContent';
import Button from '@/components/Button';
import InputText from '@/components/InputText';
import logger from '@/utils/logger';

export default function SettingsPage() {
  const [activeTab, setActiveTab] = useState('structure');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [smtpServer, setSmtpServer] = useState('');
  const [smtpPort, setSmtpPort] = useState('');
  const [smtpUser, setSmtpUser] = useState('');
  const [smtpPassword, setSmtpPassword] = useState('');

  const handleTabClick = (tab) => {
    setActiveTab(tab);
  };

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };

  const handleConfirmPasswordChange = (e) => {
    setConfirmPassword(e.target.value);
  };

  const handleSmtpServerChange = (e) => {
    setSmtpServer(e.target.value);
  };

  const handleSmtpPortChange = (e) => {
    setSmtpPort(e.target.value);
  };

  const handleSmtpUserChange = (e) => {
    setSmtpUser(e.target.value);
  };

  const handleSmtpPasswordChange = (e) => {
    setSmtpPassword(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      alert('Les mots de passe ne correspondent pas');
      return;
    }
    // Logique pour mettre à jour l'email et le mot de passe
    logger.debug('Email:', email);
    logger.debug('Password:', password);
  };

  const handleSmtpSubmit = (e) => {
    e.preventDefault();
    // Logique pour mettre à jour les paramètres SMTP
    logger.debug('SMTP Server:', smtpServer);
    logger.debug('SMTP Port:', smtpPort);
    logger.debug('SMTP User:', smtpUser);
    logger.debug('SMTP Password:', smtpPassword);
  };

  return (
    <div className="p-8">
      <div className="flex space-x-4 mb-4">
        <Tab
          text="Informations de la structure"
          active={activeTab === 'structure'}
          onClick={() => handleTabClick('structure')}
        />
        <Tab
          text="Paramètres SMTP"
          active={activeTab === 'smtp'}
          onClick={() => handleTabClick('smtp')}
        />
      </div>
      <div className="mt-4">
        <TabContent isActive={activeTab === 'structure'}>
          <form onSubmit={handleSubmit}>
            <InputText
              label="Email"
              value={email}
              onChange={handleEmailChange}
            />
            <InputText
              label="Mot de passe"
              type="password"
              value={password}
              onChange={handlePasswordChange}
            />
            <InputText
              label="Confirmer le mot de passe"
              type="password"
              value={confirmPassword}
              onChange={handleConfirmPasswordChange}
            />
            <Button type="submit" primary text="Mettre à jour"></Button>
          </form>
        </TabContent>
        <TabContent isActive={activeTab === 'smtp'}>
          <form onSubmit={handleSmtpSubmit}>
            <InputText
              label="Serveur SMTP"
              value={smtpServer}
              onChange={handleSmtpServerChange}
            />
            <InputText
              label="Port SMTP"
              value={smtpPort}
              onChange={handleSmtpPortChange}
            />
            <InputText
              label="Utilisateur SMTP"
              value={smtpUser}
              onChange={handleSmtpUserChange}
            />
            <InputText
              label="Mot de passe SMTP"
              type="password"
              value={smtpPassword}
              onChange={handleSmtpPasswordChange}
            />
            <Button type="submit" primary text="Mettre à jour"></Button>
          </form>
        </TabContent>
      </div>
    </div>
  );
}
