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 fakeContracts = [
  {
    id: '0000001',
    name: 'María Fernanda López',
    position: 'Concierge',
    area: 'Hotel',
    startDate: '2024-01-17',
    endDate: '2025-01-17',
    status: 'ACTIVE',
  },
  {
    id: '0000002',
    name: 'José Ángel Ramírez',
    position: 'Chef',
    area: 'Restaurant',
    startDate: '2024-01-15',
    endDate: '2025-01-15',
    status: 'ACTIVE',
  },
  {
    id: '0000003',
    name: 'Ana Sofía Torres',
    position: 'Chef',
    area: 'Restaurant',
    startDate: '2024-01-23',
    endDate: '2025-01-23',
    status: 'ACTIVE',
  },
  {
    id: '0000004',
    name: 'Luis Eduardo Mendoza',
    position: 'Hostess',
    area: 'Restaurant',
    startDate: '2024-01-28',
    endDate: '2025-04-28',
    status: 'INACTIVE',
  },
];

export default function Contracts() {
  const [contracts, setContracts] = useState([]);
  const [filteredContracts, setFilteredContracts] = useState([]);
  const [areaFilter, setAreaFilter] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [dateRange, setDateRange] = useState({ from: '', to: '' });

  useEffect(() => {
    // Simular fetch de datos
    setContracts(fakeContracts);
    setFilteredContracts(fakeContracts);
  }, []);

  // 🔍 Función para filtrar
  useEffect(() => {
    let filtered = [...contracts];

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

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

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

    setFilteredContracts(filtered);
  }, [areaFilter, statusFilter, dateRange, contracts]);

  const columns = [
    { header: 'CONTRACT ID', key: 'id' },
    { header: 'NAME', key: 'name' },
    { header: 'POSITION', key: 'position' },
    { header: 'AREA', key: 'area' },
    { header: 'START OF CONTRACT', key: 'startDate' },
    { header: 'END OF CONTRACT', key: 'endDate' },
    { header: 'STATUS', key: 'status' },
  ];

  return (
    <div>
      <h2>Contracts</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={filteredContracts} />
    </div>
  );
}




// import React, { useEffect, useState } from 'react';
// import { getContracts } from '../services/contractService';
// import Table from '../components/Table/HotelTable';

// export default function Contracts() {
//   const [contracts, setContracts] = useState([]);

//   useEffect(() => {
//     async function fetchData() {
//       const data = await getContracts();
//       setContracts(data);
//     }

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

//   const columns = [
//     { header: 'CONTRACT ID', key: 'id' },
//     { header: 'NAME', key: 'name' },
//     { header: 'POSITION', key: 'position' },
//     { header: 'AREA', key: 'area' },
//     { header: 'START OF CONTRACT', key: 'startDate' },
//     { header: 'END OF CONTRACT', key: 'endDate' },
//     { header: 'STATUS', key: 'status' },
//   ];

//   return (
//     <div>
//       <h2>Contracts</h2>
//       <Table columns={columns} data={contracts} />
//     </div>
//   );
// }
