import React, { useState, useEffect } from 'react';
import {
  Trash2,
  Edit3,
  Check,
  X,
  Percent,
  EuroIcon,
  Tag,
  Plus,
} from 'lucide-react';
import Table from '@/components/Table';
import Popup from '@/components/Popup';
import CheckBox from '@/components/Form/CheckBox';
import InputText from '@/components/Form/InputText';
import logger from '@/utils/logger';
import SectionHeader from '@/components/SectionHeader';
import { useEstablishment } from '@/context/EstablishmentContext';
import EmptyState from '@/components/EmptyState';

const DISCOUNT_TYPE_LABELS = { 0: 'Inscription', 1: 'Scolarité' };

const DiscountsSection = ({
  discounts,
  setDiscounts,
  handleCreate,
  handleEdit,
  handleDelete,
  type,
  unified = false,
  subscriptionMode = false,
  selectedDiscounts,
  handleDiscountSelection,
}) => {
  const [editingDiscount, setEditingDiscount] = useState(null);
  const [newDiscount, setNewDiscount] = useState(null);
  const [formData, setFormData] = useState({});
  const [localErrors, setLocalErrors] = useState({});
  const [popupVisible, setPopupVisible] = useState(false);
  const [popupMessage, setPopupMessage] = useState('');
  const [removePopupVisible, setRemovePopupVisible] = useState(false);
  const [removePopupMessage, setRemovePopupMessage] = useState('');
  const [removePopupOnConfirm, setRemovePopupOnConfirm] = useState(() => {});
  const ITEMS_PER_PAGE = 10;
  const [currentPage, setCurrentPage] = useState(1);
  useEffect(() => {
    setCurrentPage(1);
  }, [discounts]);
  useEffect(() => {
    if (newDiscount) setCurrentPage(1);
  }, [newDiscount]);
  const totalPages = Math.ceil(discounts.length / ITEMS_PER_PAGE);
  const pagedDiscounts = discounts.slice(
    (currentPage - 1) * ITEMS_PER_PAGE,
    currentPage * ITEMS_PER_PAGE
  );

  const { selectedEstablishmentId } = useEstablishment();

  const handleAddDiscount = () => {
    setNewDiscount({
      id: Date.now(),
      name: '',
      amount: '',
      description: '',
      discount_type: 0,
      type: unified ? 0 : type,
      establishment: selectedEstablishmentId,
    });
  };

  const handleRemoveDiscount = (id) => {
    return handleDelete(id)
      .then(() => {
        setDiscounts((prevDiscounts) =>
          prevDiscounts.filter((discount) => discount.id !== id)
        );
      })
      .catch((error) => {
        logger.error(error);
      });
  };

  const handleSaveNewDiscount = () => {
    if (newDiscount.name && newDiscount.amount) {
      const discountData = {
        ...newDiscount,
        establishment: selectedEstablishmentId,
      };
      handleCreate(discountData)
        .then((createdDiscount) => {
          setDiscounts([createdDiscount, ...discounts]);
          setNewDiscount(null);
          setLocalErrors({});
        })
        .catch((error) => {
          if (error && typeof error === 'object') {
            setLocalErrors(error);
          } else {
            logger.error(error);
          }
        });
    } else {
      setPopupMessage('Tous les champs doivent être remplis');
      setPopupVisible(true);
    }
  };

  const handleUpdateDiscount = (id, updatedDiscount) => {
    if (updatedDiscount.name && updatedDiscount.amount) {
      handleEdit(id, updatedDiscount)
        .then(() => {
          setEditingDiscount(null);
          setLocalErrors({});
        })
        .catch((error) => {
          if (error && typeof error === 'object') {
            setLocalErrors(error);
          } else {
            logger.error(error);
          }
        });
    } else {
      setPopupMessage('Tous les champs doivent être remplis');
      setPopupVisible(true);
    }
  };

  const handleToggleDiscountType = (id) => {
    const discount = discounts.find((discount) => discount.id === id);
    if (!discount) return;

    const updatedData = {
      ...discount,
      discount_type: discount.discount_type === 0 ? 1 : 0,
    };

    handleEdit(id, updatedData)
      .then(() => {
        setDiscounts((prevDiscounts) =>
          prevDiscounts.map((discount) =>
            discount.id === id
              ? { ...discount, discount_type: updatedData.discount_type }
              : discount
          )
        );
      })
      .catch((error) => {
        logger.error(error);
      });
  };

  const handleToggleDiscountTypeEdition = (id) => {
    if (editingDiscount) {
      setFormData((prevData) => ({
        ...prevData,
        discount_type: prevData.discount_type === 0 ? 1 : 0,
      }));
    } else if (newDiscount) {
      setNewDiscount((prevData) => ({
        ...prevData,
        discount_type: prevData.discount_type === 0 ? 1 : 0,
      }));
    }
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    if (editingDiscount) {
      setFormData((prevData) => ({
        ...prevData,
        [name]: value,
      }));
    } else if (newDiscount) {
      setNewDiscount((prevData) => ({
        ...prevData,
        [name]: value,
      }));
    }
  };

  const renderInputField = (field, value, onChange, placeholder) => (
    <div className="flex justify-center space-x-2">
      <div className="w-full max-w-xs">
        <InputText
          name={field}
          type={field === 'amount' ? 'number' : 'text'}
          value={value}
          onChange={onChange}
          placeholder={placeholder}
          errorMsg={
            localErrors &&
            localErrors[field] &&
            Array.isArray(localErrors[field])
              ? localErrors[field][0]
              : ''
          }
        />
      </div>
    </div>
  );

  const renderDiscountCell = (discount, column) => {
    const isEditing = editingDiscount === discount.id;
    const isCreating = newDiscount && newDiscount.id === discount.id;
    const currentData = isEditing ? formData : newDiscount;

    if (isEditing || isCreating) {
      switch (column) {
        case 'LIBELLE':
          return renderInputField(
            'name',
            currentData.name,
            handleChange,
            'Libellé de la réduction'
          );
        case 'REMISE':
          return (
            <div className="flex justify-center space-x-2">
              {renderInputField(
                'amount',
                currentData.amount,
                handleChange,
                'Montant'
              )}

              <button
                type="button"
                onClick={() => handleToggleDiscountTypeEdition(discount.id)}
                className="flex justify-center items-center text-primary hover:text-secondary ml-2"
              >
                {currentData.discount_type === 0 ? (
                  <EuroIcon className="w-5 h-5" />
                ) : (
                  <Percent className="w-5 h-5" />
                )}
              </button>
            </div>
          );
        case 'DESCRIPTION':
          return renderInputField(
            'description',
            currentData.description,
            handleChange,
            'Description'
          );
        case 'TYPE':
          return (
            <select
              className="border rounded px-2 py-1 text-sm"
              value={currentData.type}
              onChange={(e) => {
                const val = parseInt(e.target.value, 10);
                if (editingDiscount) setFormData((p) => ({ ...p, type: val }));
                else setNewDiscount((p) => ({ ...p, type: val }));
              }}
            >
              <option value={0}>Inscription</option>
              <option value={1}>Scolarité</option>
            </select>
          );
        case 'ACTIONS':
          return (
            <div className="flex justify-center space-x-2">
              <button
                type="button"
                onClick={() =>
                  isEditing
                    ? handleUpdateDiscount(editingDiscount, formData)
                    : handleSaveNewDiscount()
                }
                className="text-primary hover:text-secondary"
              >
                <Check className="w-5 h-5" />
              </button>
              <button
                type="button"
                onClick={() =>
                  isEditing ? setEditingDiscount(null) : setNewDiscount(null)
                }
                className="text-red-500 hover:text-red-700"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
          );
        default:
          return null;
      }
    } else {
      switch (column) {
        case 'LIBELLE':
          return discount.name;
        case 'REMISE':
          return discount.discount_type === 0
            ? `${discount.amount} €`
            : `${discount.amount} %`;
        case 'DESCRIPTION':
          return discount.description;
        case 'MISE A JOUR':
          return discount.updated_at_formatted;
        case 'TYPE':
          return (
            <span
              className={`text-xs font-semibold px-2 py-1 rounded-full ${
                discount.type === 0
                  ? 'bg-blue-100 text-blue-700'
                  : 'bg-purple-100 text-purple-700'
              }`}
            >
              {DISCOUNT_TYPE_LABELS[discount.type]}
            </span>
          );
        case 'ACTIONS':
          return (
            <div className="flex justify-center space-x-2">
              <button
                type="button"
                onClick={() => handleToggleDiscountType(discount.id)}
                className="flex justify-center items-center text-primary hover:text-secondary"
              >
                {discount.discount_type === 0 ? (
                  <EuroIcon className="w-5 h-5" />
                ) : (
                  <Percent className="w-5 h-5" />
                )}
              </button>
              <button
                type="button"
                onClick={() =>
                  setEditingDiscount(discount.id) || setFormData(discount)
                }
                className="text-blue-500 hover:text-blue-700"
              >
                <Edit3 className="w-5 h-5" />
              </button>
              <button
                type="button"
                onClick={() => {
                  setRemovePopupVisible(true);
                  setRemovePopupMessage(
                    "Attentions ! \nVous êtes sur le point de supprimer un tarif personnalisé.\nÊtes-vous sûr(e) de vouloir poursuivre l'opération ?"
                  );
                  setRemovePopupOnConfirm(() => () => {
                    handleRemoveDiscount(discount.id)
                      .then((data) => {
                        logger.debug('Success:', data);
                        setPopupMessage(
                          `Réduction sur les frais ${type === 0 ? "d'inscription" : 'de scolarité'} correctement supprimée`
                        );
                        setPopupVisible(true);
                        setRemovePopupVisible(false);
                      })
                      .catch((error) => {
                        logger.error('Error archiving data:', error);
                        setPopupMessage(
                          `Erreur lors de la suppression de la réduction sur les frais ${type === 0 ? "d'inscription" : 'de scolarité'}`
                        );
                        setPopupVisible(true);
                        setRemovePopupVisible(false);
                      });
                  });
                }}
                className="text-red-500 hover:text-red-700"
              >
                <Trash2 className="w-5 h-5" />
              </button>
            </div>
          );
        case '':
          return (
            <div className="flex justify-center">
              <CheckBox
                item={discount}
                formData={{ selectedDiscounts }}
                handleChange={() => handleDiscountSelection(discount.id)}
                fieldName="selectedDiscounts"
              />
            </div>
          );
        default:
          return null;
      }
    }
  };

  const columns = subscriptionMode
    ? [
        { name: 'LIBELLE', label: 'Libellé' },
        { name: 'DESCRIPTION', label: 'Description' },
        { name: 'REMISE', label: 'Remise' },
        ...(unified ? [{ name: 'TYPE', label: 'Type' }] : []),
        { name: '', label: 'Sélection' },
      ]
    : [
        { name: 'LIBELLE', label: 'Libellé' },
        { name: 'REMISE', label: 'Remise' },
        { name: 'DESCRIPTION', label: 'Description' },
        ...(unified ? [{ name: 'TYPE', label: 'Type' }] : []),
        { name: 'MISE A JOUR', label: 'Date mise à jour' },
        { name: 'ACTIONS', label: 'Actions' },
      ];

  const emptyMessage = (
    <EmptyState
      icon={Tag}
      title={`Aucune réduction sur les frais ${type === 0 ? "d'inscription" : 'de scolarité'} enregistrée`}
      description={`Créez des réductions pour offrir des tarifs personnalisés sur les frais ${type === 0 ? "d'inscription" : 'de scolarité'}`}
      actionLabel={!subscriptionMode ? 'Ajouter une réduction' : undefined}
      onAction={!subscriptionMode ? handleAddDiscount : undefined}
      actionIcon={!subscriptionMode ? Plus : undefined}
    />
  );

  return (
    <div className="space-y-4">
      {!subscriptionMode && (pagedDiscounts.length > 0 || newDiscount) && (
        <SectionHeader
          icon={Tag}
          discountStyle={true}
          title={`Liste des réductions sur les frais ${type === 0 ? "d'inscription" : 'de scolarité'}`}
          description={`Gérez vos réductions sur les frais ${type === 0 ? "d'inscription" : 'de scolarité'}`}
          button={true}
          onClick={handleAddDiscount}
        />
      )}
      <Table
        data={newDiscount ? [newDiscount, ...pagedDiscounts] : pagedDiscounts}
        columns={columns}
        renderCell={renderDiscountCell}
        defaultTheme="bg-yellow-50"
        emptyMessage={emptyMessage}
        itemsPerPage={ITEMS_PER_PAGE}
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={setCurrentPage}
      />
      <Popup
        isOpen={popupVisible}
        message={popupMessage}
        onConfirm={() => setPopupVisible(false)}
        onCancel={() => setPopupVisible(false)}
        uniqueConfirmButton={true}
      />
      <Popup
        isOpen={removePopupVisible}
        message={removePopupMessage}
        onConfirm={removePopupOnConfirm}
        onCancel={() => setRemovePopupVisible(false)}
      />
    </div>
  );
};

export default DiscountsSection;
