import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Form, Button, Container, Row, Col, Table, FloatingLabel } from 'react-bootstrap';
import './EditMenuGroupPage.css';

const EditMenuGroupPage = () => {
    const { id } = useParams();
    const navigate = useNavigate();

    // Mock data based on Angular component analysis
    const [header, setHeader] = useState({
        menu_name: '',
        description: '',
        active: true,
        start_date: '',
        end_date: '',
    });

    const [lines, setLines] = useState([]);
    const types = ['user', 'admin', 'mis report', 'bi report'];
    const [menuDropDown, setMenuDropDown] = useState([]); // Mocked menu items for dropdown

    useEffect(() => {
        // Mock fetching data since services are commented out in Angular component
        console.log("Fetching data for menu group with id:", id);
        setHeader({
            menu_name: 'Admin Menu Group',
            description: 'Main administrative menu group.',
            active: true,
            start_date: '2025-01-01',
            end_date: '2025-12-31',
        });
        setLines([
            { id: 1, name: 'User Management', type: 'admin', menu_id: '101', active: true, start_date: '2025-01-01', end_date: '2025-12-31', seq: 10 },
            { id: 2, name: 'System Reports', type: 'mis report', menu_id: '102', active: false, start_date: '2025-01-01', end_date: '2025-06-30', seq: 20 },
        ]);
        setMenuDropDown([
            { id: '101', name: 'User Admin Menu' },
            { id: '102', name: 'Reporting Menu' },
        ]);
    }, [id]);

    const handleHeaderChange = (e) => {
        const { name, value, type, checked } = e.target;
        setHeader(prev => ({ ...prev, [name]: type === 'checkbox' ? checked : value }));
    };

    const handleLineChange = (index, e) => {
        const { name, value, type, checked } = e.target;
        const newLines = [...lines];
        newLines[index] = { ...newLines[index], [name]: type === 'checkbox' ? checked : value };
        setLines(newLines);
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log("Submitting data:", { id, header, lines });
        // Mock navigation on successful update
        navigate('/admin/menu-group/all'); // A hypothetical route
    };
    
    const back = () => {
        navigate(-1); // Go back to the previous page
    }

    return (
        <Container>
            <h3 className="center"><b>Menu Group Edit Form</b></h3>
            <p>ID: {id}</p>
            <hr />

            <Form onSubmit={handleSubmit}>
                <div className="section">
                    <p>Menu Group Header</p>
                </div>
                <Row className="mb-3">
                    <Form.Group as={Col} md="4">
                        <FloatingLabel label="Menu Name">
                            <Form.Control type="text" name="menu_name" value={header.menu_name} onChange={handleHeaderChange} placeholder="Enter Menu Name" />
                        </FloatingLabel>
                    </Form.Group>
                    <Form.Group as={Col} md="4">
                        <FloatingLabel label="Menu Description">
                            <Form.Control type="text" name="description" value={header.description} onChange={handleHeaderChange} placeholder="Enter Menu Description" />
                        </FloatingLabel>
                    </Form.Group>
                    <Form.Group as={Col} md="4" className="d-flex align-items-center">
                         <Form.Check type="switch" id="header-active" name="active" label="Active" checked={header.active} onChange={handleHeaderChange} />
                    </Form.Group>
                </Row>
                <Row className="mb-3">
                    <Form.Group as={Col} md="4">
                        <FloatingLabel label="Start Date">
                            <Form.Control type="date" name="start_date" value={header.start_date} onChange={handleHeaderChange} />
                        </FloatingLabel>
                    </Form.Group>
                     <Form.Group as={Col} md="4">
                        <FloatingLabel label="End Date">
                            <Form.Control type="date" name="end_date" value={header.end_date} onChange={handleHeaderChange} />
                        </FloatingLabel>
                    </Form.Group>
                </Row>

                <div className="section">
                    <p>Menu Group Lines Details</p>
                </div>
                <Table striped bordered hover responsive id="lines">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Menu Name</th>
                            <th>Active</th>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th>Order</th>
                        </tr>
                    </thead>
                    <tbody>
                        {lines.map((line, index) => (
                            <tr key={line.id}>
                                <td><Form.Control type="text" name="name" value={line.name} onChange={(e) => handleLineChange(index, e)} /></td>
                                <td>
                                    <Form.Select name="type" value={line.type} onChange={(e) => handleLineChange(index, e)}>
                                        <option>Choose Type</option>
                                        {types.map(t => <option key={t} value={t}>{t}</option>)}
                                    </Form.Select>
                                </td>
                                <td>
                                    <Form.Select name="menu_id" value={line.menu_id} onChange={(e) => handleLineChange(index, e)}>
                                        <option>Choose Menu</option>
                                        {menuDropDown.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
                                    </Form.Select>
                                </td>
                                <td className="text-center align-middle"><Form.Check type="switch" name="active" checked={line.active} onChange={(e) => handleLineChange(index, e)} /></td>
                                <td><Form.Control type="date" name="start_date" value={line.start_date} onChange={(e) => handleLineChange(index, e)} /></td>
                                <td><Form.Control type="date" name="end_date" value={line.end_date} onChange={(e) => handleLineChange(index, e)} /></td>
                                <td><Form.Control type="number" name="seq" value={line.seq} onChange={(e) => handleLineChange(index, e)} /></td>
                            </tr>
                        ))}
                    </tbody>
                </Table>
                
                <Button variant="secondary" onClick={back} className="me-2">Back</Button>
                <Button type="submit" variant="primary">UPDATE</Button>
            </Form>
        </Container>
    );
};

export default EditMenuGroupPage;
