import React, { useState } from 'react';
import FeeTypeSection from '@/components/Structure/Tarification/FeeTypeSection';

const FeesManagement = ({
  registrationDiscounts,
  setRegistrationDiscounts,
  tuitionDiscounts,
  setTuitionDiscounts,
  registrationFees,
  setRegistrationFees,
  tuitionFees,
  setTuitionFees,
  registrationPaymentPlans,
  setRegistrationPaymentPlans,
  tuitionPaymentPlans,
  setTuitionPaymentPlans,
  registrationPaymentModes,
  setRegistrationPaymentModes,
  tuitionPaymentModes,
  setTuitionPaymentModes,
  handleCreate,
  handleEdit,
  handleDelete,
}) => {
  const [activeTab, setActiveTab] = useState('inscription');

  return (
    <div className="w-full space-y-4">
      {/* Onglets */}
      <div className="flex gap-2">
        {[
          { key: 'inscription', label: "Frais d'inscription" },
          { key: 'scolarite', label: 'Frais de scolarité' },
        ].map(({ key, label }) => (
          <button
            key={key}
            type="button"
            onClick={() => setActiveTab(key)}
            className={`px-5 py-2 rounded-md font-headline font-bold text-sm transition-colors border-b-4 min-h-[44px] ${
              activeTab === key
                ? 'border-primary text-primary bg-primary/5'
                : 'border-transparent text-gray-400 hover:text-gray-700 hover:bg-gray-50'
            }`}
          >
            {label}
          </button>
        ))}
      </div>

      {/* Contenu */}
      {activeTab === 'inscription' && (
        <FeeTypeSection
          title="Frais d'inscription"
          type={0}
          fees={registrationFees ?? []}
          setFees={setRegistrationFees}
          discounts={registrationDiscounts ?? []}
          setDiscounts={setRegistrationDiscounts}
          paymentPlans={registrationPaymentPlans ?? []}
          setPaymentPlans={setRegistrationPaymentPlans}
          paymentModes={registrationPaymentModes ?? []}
          setPaymentModes={setRegistrationPaymentModes}
          handleCreate={handleCreate}
          handleEdit={handleEdit}
          handleDelete={handleDelete}
          onDiscountDelete={(id) => {
            setRegistrationFees((prevFees) =>
              prevFees.map((fee) => ({
                ...fee,
                discounts: fee.discounts.filter((dId) => dId !== id),
              }))
            );
          }}
        />
      )}
      {activeTab === 'scolarite' && (
        <FeeTypeSection
          title="Frais de scolarité"
          type={1}
          fees={tuitionFees ?? []}
          setFees={setTuitionFees}
          discounts={tuitionDiscounts ?? []}
          setDiscounts={setTuitionDiscounts}
          paymentPlans={tuitionPaymentPlans ?? []}
          setPaymentPlans={setTuitionPaymentPlans}
          paymentModes={tuitionPaymentModes ?? []}
          setPaymentModes={setTuitionPaymentModes}
          handleCreate={handleCreate}
          handleEdit={handleEdit}
          handleDelete={handleDelete}
          onDiscountDelete={(id) => {
            setTuitionFees((prevFees) =>
              prevFees.map((fee) => ({
                ...fee,
                discounts: fee.discounts.filter((dId) => dId !== id),
              }))
            );
          }}
        />
      )}
    </div>
  );
};

export default FeesManagement;
