'use client';

import { useState, useEffect } from 'react';
import { useNotification } from '../../context/NotificationContext';

export default function LeasesPage() {
    const [leases, setLeases] = useState([]);
    const { showNotification } = useNotification();

    const fetchLeases = async () => {
        try {
            const response = await fetch('/api/dhcp/leases'); // Replace with your actual API endpoint for leases
            const data = await response.json();
            if (response.ok) {
                setLeases(data.leases);
                showNotification('Leases refreshed successfully.', 'success');
            } else {
                showNotification(data.error, 'error');
            }
        } catch (error) {
            showNotification('Failed to fetch leases.', 'error');
        }
    };

    useEffect(() => {
        fetchLeases();
    }, []);

    return (
        <div className="container mt-5">
            <h1 className="mb-4">Current DHCP Leases</h1>
            <button className="btn btn-secondary mb-3" onClick={fetchLeases}>
                Refresh Leases
            </button>
            <table className="table table-striped">
                <thead>
                <tr>
                    <th scope="col">IP Address</th>
                    <th scope="col">Start Time</th>
                    <th scope="col">End Time</th>
                    <th scope="col">MAC Address</th>
                    <th scope="col">Hostname</th>
                    <th scope="col">State</th>
                </tr>
                </thead>
                <tbody>
                {leases.map((lease, index) => (
                    <tr key={index}>
                        <td>{lease.ip}</td>
                        <td>{lease.start}</td>
                        <td>{lease.end}</td>
                        <td>{lease.mac}</td>
                        <td>{lease.hostname}</td>
                        <td>{lease.state}</td>
                    </tr>
                ))}
                </tbody>
            </table>
        </div>
    );
}