import React, { useEffect, useState } from 'react';
import Table from '../components/Table/HotelTable';
import '../components/Filters/Filters.css';

// Fake data para probar la tabla con filtros
const fakeEmployees = [
  {
    id: '0001',
    name: 'María Fernanda López',
    nss: '00111111',
    position: 'Concierge',
    area: 'Hotel',
    phone: '33-33-33-33-33',
    endDate: '2025-01-17',
    status: 'ACTIVE',
  },
  {
    id: '0002',
    name: 'José Ángel Ramírez',
    nss: '00111111',
    position: 'Chef',
    area: 'Restaurant',
    phone: '33-33-33-33-33',
    endDate: '2025-01-15',
    status: 'ACTIVE',
  },
  {
    id: '0003',
    name: 'Ana Sofía Torres',
    nss: '00111111',
    position: 'Chef',
    area: 'Restaurant',
    phone: '33-33-33-33-33',
    endDate: '2025-01-23',
    status: 'ACTIVE',
  },
  {
    id: '0004',
    name: 'Luis Eduardo Mendoza',
    nss: '00111111',
    position: 'Hostess',
    area: 'Restaurant',
    phone: '33-33-33-33-33',
    endDate: '2025-04-28',
    status: 'INACTIVE',
  },
];

export default function Employees() {
  const [employees, setEmployees] = useState([]);
  const [filteredEmployees, setFilteredEmployees] = useState([]);

  const [areaFilter, setAreaFilter] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [dateRange, setDateRange] = useState({ from: '', to: '' });

  useEffect(() => {
    setEmployees(fakeEmployees);
    setFilteredEmployees(fakeEmployees);
  }, []);

  useEffect(() => {
    let filtered = [...employees];

    if (areaFilter) {
      filtered = filtered.filter((e) => e.area === areaFilter);
    }

    if (statusFilter) {
      filtered = filtered.filter((e) => e.status === statusFilter);
    }

    if (dateRange.from && dateRange.to) {
      filtered = filtered.filter(
        (e) => e.endDate >= dateRange.from && e.endDate <= dateRange.to
      );
    }

    setFilteredEmployees(filtered);
  }, [areaFilter, statusFilter, dateRange, employees]);

  const columns = [
    { header: 'NAME', key: 'name' },
    { header: 'NSS', key: 'nss' },
    { header: 'POSITION', key: 'position' },
    { header: 'AREA', key: 'area' },
    { header: 'PHONE', key: 'phone' },
    { header: 'END OF CONTRACT', key: 'endDate' },
    {
      header: 'STATUS',
      key: 'status',
      render: (status) => (
        <button className={`status-button ${status.toLowerCase()}`}>
          {status}
        </button>
      ),
    },
  ];

  return (
    <div>
      <h2>Employees</h2>

      {/* Filtros */}
      <div style={{ display: 'flex', gap: '10px', marginBottom: '15px' }}>
        <select value={areaFilter} onChange={(e) => setAreaFilter(e.target.value)}>
          <option value="">Area: Hotel, Restaurant</option>
          <option value="Hotel">Hotel</option>
          <option value="Restaurant">Restaurant</option>
        </select>

        <select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}>
          <option value="">Status: Active, Inactive</option>
          <option value="ACTIVE">ACTIVE</option>
          <option value="INACTIVE">INACTIVE</option>
        </select>

        <input
          type="date"
          value={dateRange.from}
          onChange={(e) => setDateRange({ ...dateRange, from: e.target.value })}
        />
        <input
          type="date"
          value={dateRange.to}
          onChange={(e) => setDateRange({ ...dateRange, to: e.target.value })}
        />
      </div>

      <Table columns={columns} data={filteredEmployees} />
    </div>
  );
}

// import React, { useEffect, useState } from 'react';
// import Table from '../components/Table/HotelTable';
// import '../components/Filters/Filters.css';
// import Filters from '../components/Filters/Filters';

// export default function Employees() {
//   const [employees, setEmployees] = useState([]);

//   // Filtros
//   const [selectedArea, setSelectedArea] = useState('Hotel, Restaurant');
//   const [selectedStatus, setSelectedStatus] = useState('Active');

//   useEffect(() => {
//     // Datos de prueba
//     const fakeData = [
//       {
//         name: 'Maria Fernanda López',
//         nss: '00111111',
//         position: 'Concierge',
//         area: 'Hotel',
//         phone: '33-33-33-33-33',
//         endDate: '17/01/2025',
//         status: 'ACTIVE',
//       },
//       {
//         name: 'José Ángel Ramírez',
//         nss: '00111111',
//         position: 'Chef',
//         area: 'Restaurant',
//         phone: '33-33-33-33-33',
//         endDate: '15/01/2025',
//         status: 'ACTIVE',
//       },
//     ];
//     setEmployees(fakeData);
//   }, []);

//   const columns = [
//     { header: 'NAME', key: 'name' },
//     { header: 'NSS', key: 'nss' },
//     { header: 'POSITION', key: 'position' },
//     { header: 'AREA', key: 'area' },
//     { header: 'PHONE', key: 'phone' },
//     { header: 'END OF CONTRACT', key: 'endDate' },
//     { header: 'STATUS', key: 'status' },
//   ];

//   return (
//     <div>
//       <h2>Employees</h2>

//       {/* Filtros */}
//       <Filters
//         areaOptions={['Hotel, Restaurant']}
//         statusOptions={['Active', 'Inactive']}
//         selectedArea={selectedArea}
//         selectedStatus={selectedStatus}
//         onAreaChange={(e) => setSelectedArea(e.target.value)}
//         onStatusChange={(e) => setSelectedStatus(e.target.value)}
//       />

//       {/* Tabla */}
//       <Table columns={columns} data={employees} />
//     </div>
//   );
// }

/**Reemplazar fakeData por */
// const data = await getEmployees();
// setEmployees(data);



/**Sin los datos de Prueba */
// import React, { useEffect, useState } from 'react';
// import { getEmployees } from '../services/employeeService';
// import Table from '../components/Table/HotelTable';

// export default function Employees() {
//   const [employees, setEmployees] = useState([]);

//   useEffect(() => {
//     async function fetchData() {
//       const data = await getEmployees();
//       setEmployees(data);
//     }

//     fetchData();
//   }, []);

//   const columns = [
//     { header: 'NAME', key: 'name' },
//     { header: 'NSS', key: 'nss' },
//     { header: 'POSITION', key: 'position' },
//     { header: 'AREA', key: 'area' },
//     { header: 'PHONE', key: 'phone' },
//     { header: 'END OF CONTRACT', key: 'endDate' },
//     { header: 'STATUS', key: 'status' },
//   ];

//   return (
//     <div>
//       <h2>Employees</h2>
//       <Table columns={columns} data={employees} />
//     </div>
//   );
// }
