// App.js
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import NavBar from './Components/NavBar';
import AddHabit from './Components/AddHabit';
import ViewWeekly from './Components/ViewWeekly';

const App = () => {

return (
    <>
    <NavBar />
    <div className="container mt-5">
        <Routes>
        <Route path="/" element={<AddHabit />} />
        <Route path="/view-weekly" element={<ViewWeekly />} />
        </Routes>
    </div>
    </>
);
};

export default App;

// NavBar.js
import React from 'react';
import { Link } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
const Navbar = () => {
    return (
        <nav className="navbar navbar-expand-lg
    navbar-dark bg-success">
            <div className="container">
                <Link className="navbar-brand"
                    to="/">Habit Tracker
                </Link>
                <div className="collapse navbar-collapse">
                    <ul className="navbar-nav mr-auto">
                        <li className="nav-item">
                            <Link className="nav-link"
                                to="/">Add New Habit
                            </Link>
                        </li>
                        <li className="nav-item">
                            <Link className="nav-link"
                                to="/view-weekly">View Weekly
                            </Link>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    );
};

export default Navbar;

// AddHabit.js

import React, { useState, useEffect } from 'react';
import { AiOutlineDelete, AiOutlineEdit } from 'react-icons/ai';
import 'bootstrap/dist/css/bootstrap.min.css';

const AddHabit = () => {
// Load initial habits from localStorage or use an empty array if none exist
const initialHabits = JSON.parse(localStorage.getItem('habits')) || [];

const [habits, setHabits] = useState(initialHabits);
const [habit, setHabit] = useState('');
const [description, setDescription] = useState('');
const [editIndex, setEditIndex] = useState(null);

useEffect(() => {
    // Save habits to localStorage whenever they change
    localStorage.setItem('habits', JSON.stringify(habits));
}, [habits]);

const handleSubmit = (e) => {
    e.preventDefault();
    if (!habit.trim()) {
    alert('Habit name cannot be empty');
    return;
    }
    if (editIndex !== null) {
    const updatedHabits = [...habits];
    updatedHabits[editIndex].name = habit;
    updatedHabits[editIndex].description = description;
    setHabits(updatedHabits);
    setEditIndex(null);
    } else {
    setHabits([...habits, { name: habit, description, status: { Monday: false, Tuesday: false, Wednesday: false, Thursday: false, Friday: false, Saturday: false, Sunday: false } }]);
    }
    setHabit('');
    setDescription('');
};

const removeHabit = (index) => {
    const updatedHabits = habits.filter((_, i) => i !== index);
    setHabits(updatedHabits);
};

const editHabit = (index) => {
    setHabit(habits[index].name);
    setDescription(habits[index].description || ''); // Handle case where description may be undefined
    setEditIndex(index);
};

return (
    <div>
    <h3 className='text-success'>GeekForGeeks Habit Tracker</h3>
    <h4>Add New Habit</h4>
    <form onSubmit={handleSubmit}>
        <div className="mb-3">
        <input
            type="text"
            className="form-control"
            placeholder="Enter habit name"
            value={habit}
            onChange={(e) => setHabit(e.target.value)}
        />
        </div>
        <div className="mb-3">
        <input
            type="textarea"
            className="form-control"
            placeholder="Enter habit description"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
        />
        </div>
        <button type="submit" className="btn btn-primary">
        {editIndex !== null ? 'Save' : 'Add'}
        </button>
    </form>
    <table className="table">
        <thead>
        <tr>
            <th>Index</th>
            <th>Habit</th>
            <th>Description</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        {habits.map((habit, index) => (
            <tr key={index}>
            <td>{index + 1}</td>
            <td>{habit.name}</td>
            <td>{habit.description}</td>
            <td>
                <button className="btn btn-primary me-2" onClick={() => editHabit(index)}>
                <AiOutlineEdit />
                </button>
                <button className="btn btn-danger" onClick={() => removeHabit(index)}>
                <AiOutlineDelete />
                </button>
            </td>
            </tr>
        ))}
        </tbody>
    </table>
    </div>
);
};

export default AddHabit;

// ViewWeekly.js

import React, { useState } from 'react';
import { FaCheck, FaTimes } from 'react-icons/fa';
import 'bootstrap/dist/css/bootstrap.min.css';

const ViewWeekly = () => {
const [habits, setHabits] = useState(() => {
    const storedHabits = localStorage.getItem('habits');
    return storedHabits ? JSON.parse(storedHabits) : [];
});

const toggleStatus = (habitIndex, day) => {
    const updatedHabits = [...habits];
    updatedHabits[habitIndex].status[day] = !updatedHabits[habitIndex].status[day];
    setHabits(updatedHabits);
    localStorage.setItem('habits', JSON.stringify(updatedHabits));
};

const getPreviousDates = () => {
    const currentDate = new Date();
    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    const previousDates = [];
    for (let i = 6; i >= 0; i--) {
    const prevDate = new Date(currentDate);
    prevDate.setDate(currentDate.getDate() - i);
    const dayOfWeek = days[prevDate.getDay()];
    const date = prevDate.getDate();
    const month = prevDate.getMonth() + 1;
    previousDates.push({ dayOfWeek, date, month });
    }
    return previousDates;
};

const previousDates = getPreviousDates();

return (
    <div>
    <h4>Weekly Habits Progress:</h4>
    <table className="table table-bordered mt-5">
        <thead>
        <tr>
            <th className="bg-success text-white">Habit</th>
            {previousDates.map((date, index) => (
            <th className="bg-success text-white" key={index}>
                {date.dayOfWeek} - {date.date}/{date.month}
            </th>
            ))}
        </tr>
        </thead>
        <tbody>
        {habits.map((habit, habitIndex) => (
            <tr key={habitIndex}>
            <td>
                <h4>{habit.name}</h4>
                <small>{habit.description}</small>
            </td>
            {Object.keys(habit.status).map((day) => (
                <td key={day} className="text-center" style={{ cursor: 'pointer' }} onClick={() => toggleStatus(habitIndex, day)}>
                {habit.status[day] ? (
                    <FaCheck className="text-success" title="Mark undone" size={40} />
                ) : (
                    <FaTimes className="text-danger" title="Mark Done" size={40} />
                )}
                </td>
            ))}
            </tr>
        ))}
        </tbody>
    </table>
    </div>
);
};

export default ViewWeekly;