code_context.txt

// File: backend/database.js
const mysql = require('mysql2/promise');
const dotenv = require('dotenv');
dotenv.config();

const dbName = 'healthconsultant'; // Your database name

let pool; // Use a connection pool for efficiency

async function connectToDatabase() {
    try {
        pool = mysql.createPool({
            host: process.env.DB_HOST || 'localhost',  // Replace with your MySQL host
            user: process.env.DB_USER || 'root',       // Replace with your MySQL user
            password: process.env.DB_PASSWORD || '',   // Replace with your MySQL password,
            waitForConnections: true,
            connectionLimit: 10,
            queueLimit: 0
        });

        // Test the connection and create the database if it doesn't exist
        const connection = await pool.getConnection();
        try {
            await connection.query(`CREATE DATABASE IF NOT EXISTS \`${dbName}\`;`);
            console.log(`Database "${dbName}" created (if it didn't exist).`);
        } finally {
            connection.release();
        }

        // Now, switch the connection pool to use the created database
        pool = mysql.createPool({
            host: process.env.DB_HOST || 'localhost',  // Replace with your MySQL host
            user: process.env.DB_USER || 'root',       // Replace with your MySQL user
            password: process.env.DB_PASSWORD || '',   // Replace with your MySQL password
            database: process.env.DB_NAME || dbName,
            waitForConnections: true,
            connectionLimit: 10,
            queueLimit: 0
        });

        const newConnection = await pool.getConnection();
        console.log('Connected to the database.');
        newConnection.release(); // Release the connection back to the pool
        return pool;

    } catch (error) {
        console.error('Database connection error:', error.message);
        throw error;
    }
}

async function initializeDatabase() {
    try {
        await connectToDatabase();
        await createTables();
        await seedConsultants();
        console.log("Database initialized successfully.");
    } catch (error) {
        console.error("Database initialization failed:", error.message);
        throw error;
    }
}


async function createTables() {
  try {
      const connection = await pool.getConnection();

      // Users Table
      await connection.query(`
          CREATE TABLE IF NOT EXISTS users (
              id INT AUTO_INCREMENT PRIMARY KEY,
              fullName VARCHAR(255) NOT NULL,
              email VARCHAR(255) NOT NULL UNIQUE,
              password VARCHAR(255) NOT NULL,
              role VARCHAR(50) DEFAULT 'user',
              phone VARCHAR(20) NOT NULL,
              profilePicture VARCHAR(255) DEFAULT NULL,
              bloodGroup VARCHAR(10) DEFAULT NULL,
              medicalHistory TEXT DEFAULT NULL,
              currentPrescriptions TEXT DEFAULT NULL,
              isConsultant TINYINT DEFAULT 0,
              bio TEXT DEFAULT NULL,
              qualification VARCHAR(255) DEFAULT NULL,
              areasOfExpertise TEXT DEFAULT NULL,
              speciality VARCHAR(255) DEFAULT NULL,
              availability TEXT DEFAULT NULL,
              bankAccount VARCHAR(255) DEFAULT NULL,
              consultingFees DECIMAL(10, 2) DEFAULT NULL,
              certificates TEXT DEFAULT NULL,
              isApproved TINYINT DEFAULT 0
          );
      `);

      // Consultants Table (Consider removing - fields are now in users)
      await connection.query(`
          CREATE TABLE IF NOT EXISTS consultants (
              id INT PRIMARY KEY AUTO_INCREMENT,
              userId INT,
              specialty VARCHAR(255),
              qualifications TEXT,
              availability TEXT,
              imageUrl VARCHAR(255),
              FOREIGN KEY (userId) REFERENCES users(id)
          );
      `);

      // Bookings Table
      await connection.query(`
          CREATE TABLE IF NOT EXISTS bookings (
              id INT PRIMARY KEY AUTO_INCREMENT,
              userId INT,
              consultantId INT,
              date DATE,
              time TIME,
              status VARCHAR(50),
              FOREIGN KEY (userId) REFERENCES users(id),
              FOREIGN KEY (consultantId) REFERENCES users(id)
          );
      `);

      // Health Records Table
      await connection.query(`
          CREATE TABLE IF NOT EXISTS healthrecords (
              id INT PRIMARY KEY AUTO_INCREMENT,
              userId INT,
              medicalHistory TEXT,
              ongoingTreatments TEXT,
              prescriptions TEXT,
              FOREIGN KEY (userId) REFERENCES users(id)
          );
      `);

      // Messages Table
      await connection.query(`
          CREATE TABLE IF NOT EXISTS messages (
              id INT PRIMARY KEY AUTO_INCREMENT,
              userId INT,
              consultantId INT,
              message TEXT,
              timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
              FOREIGN KEY (userId) REFERENCES users(id),
              FOREIGN KEY (consultantId) REFERENCES users(id)
          );
      `);

      // Chat Requests Table
      await connection.query(`
          CREATE TABLE IF NOT EXISTS chat_requests (
              id INT PRIMARY KEY AUTO_INCREMENT,
              userId INT NOT NULL,
              consultantId INT NOT NULL,
              bookingId INT NOT NULL,
              status VARCHAR(20) DEFAULT 'pending',
              FOREIGN KEY (userId) REFERENCES users(id),
              FOREIGN KEY (consultantId) REFERENCES users(id),
              FOREIGN KEY (bookingId) REFERENCES bookings(id),
              UNIQUE (userId, consultantId, bookingId)
          );
      `);

      // Chats Table
      await connection.query(`
          CREATE TABLE IF NOT EXISTS chats (
              id INT PRIMARY KEY AUTO_INCREMENT,
              chatRequestId INT NOT NULL,
              senderId INT NOT NULL,
              message TEXT NOT NULL,
              timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
              FOREIGN KEY (chatRequestId) REFERENCES chat_requests(id),
              FOREIGN KEY (senderId) REFERENCES users(id)
          );
      `);

      // Reviews Table
      await connection.query(`
          CREATE TABLE IF NOT EXISTS reviews (
              id INT PRIMARY KEY AUTO_INCREMENT,
              userId INT,
              consultantId INT,
              rating INT,
              review TEXT,
              bookingId INT,
              FOREIGN KEY (userId) REFERENCES users(id),
              FOREIGN KEY (consultantId) REFERENCES users(id),
              FOREIGN KEY (bookingId) REFERENCES bookings(id)
          );
      `);

      // Contacts Table
      await connection.query(`
          CREATE TABLE IF NOT EXISTS contacts (
              id INT PRIMARY KEY AUTO_INCREMENT,
              name VARCHAR(255),
              email VARCHAR(255),
              subject VARCHAR(255),
              message TEXT
          );
      `);

      // Payments Table
      await connection.query(`
          CREATE TABLE IF NOT EXISTS payments (
              id INT PRIMARY KEY AUTO_INCREMENT,
              bookingId INT NOT NULL,
              userId INT NOT NULL,
              amount DECIMAL(10, 2) NOT NULL,
              paymentDate DATETIME NOT NULL,
              paymentMethod VARCHAR(255),
              status VARCHAR(50) NOT NULL,
              FOREIGN KEY (bookingId) REFERENCES bookings(id),
              FOREIGN KEY (userId) REFERENCES users(id)
          );
      `);

      // Refunds Table
      await connection.query(`
          CREATE TABLE IF NOT EXISTS refunds (
              id INT PRIMARY KEY AUTO_INCREMENT,
              paymentId INT NOT NULL,
              refundDate DATETIME NOT NULL,
              refundAmount DECIMAL(10, 2) NOT NULL,
              reason TEXT,
              FOREIGN KEY (paymentId) REFERENCES payments(id)
          );
      `);

      connection.release();
      console.log('Tables created successfully.');

  } catch (error) {
      console.error('Error creating tables:', error.message);
      throw error;
  }
}

async function seedConsultants() {
    try {
        const connection = await pool.getConnection();

        // Check if users table is empty
        const [rows] = await connection.query("SELECT COUNT(*) AS count FROM users");
        const count = rows[0].count;

        if (count === 0) {
            const users = [
                {
                    fullName: "Dr. Jane Doe",
                    email: "jane.doe@example.com",
                    password: "$2b$10$O3jfFgJVuZ028Z2u.GCrk.SSpvbdzVUFc4sjI78Jzgsd.3qhyOlo.",
                    role: "consultant",
                    phone: "555-123-4567",
                    bio: "Experienced cardiologist",
                    qualification: "MD, Cardiology",
                    areasOfExpertise: "Heart failure, Hypertension",
                    speciality: "Cardiology",
                    availability: JSON.stringify({"Monday": "9:00-17:00", "Tuesday": "9:00-17:00"}),
                    bankAccount: "1234567890",
                    isApproved: 1,
                    profilePicture: "uploads\\doc2.avif",
                    consultingFees: 250.00,
                    certificates: JSON.stringify([{"name":"document1","path":"uploads\\document1.png"},{"name":"document2","path":"uploads\\document2.png"}]),
                    isConsultant: 1,
                },
                {
                    fullName: "Dr. John Smith",
                    email: "john.smith@example.com",
                    password: "$2b$10$O3jfFgJVuZ028Z2u.GCrk.SSpvbdzVUFc4sjI78Jzgsd.3qhyOlo.",
                    role: "consultant",
                    phone: "555-987-6543",
                    bio: "Neurologist specializing in migraines",
                    qualification: "PhD, Neurology",
                    areasOfExpertise: "Migraines, Epilepsy",
                    speciality: "Neurology",
                    availability: JSON.stringify({"Monday": "9:00-17:00", "Tuesday": "9:00-17:00"}),
                    bankAccount: "0987654321",
                    isApproved: 0,
                    profilePicture: "uploads\\doc1.jpeg",
                    consultingFees: 300.00,
                    certificates: JSON.stringify([{"name":"document1","path":"uploads\\document1.png"},{"name":"document2","path":"uploads\\document2.png"}]),
                    isConsultant: 1,
                },
                {
                    fullName: "Dr. Emily Chen",
                    email: "emily.chen@example.com",
                    password: "$2b$10$O3jfFgJVuZ028Z2u.GCrk.SSpvbdzVUFc4sjI78Jzgsd.3qhyOlo.",
                    role: "consultant",
                    phone: "555-555-5555",
                    bio: "Pediatrician with a passion for child health",
                    qualification: "MD, Pediatrics",
                    areasOfExpertise: "Childhood illnesses, Vaccinations",
                    speciality: "Pediatrics",
                    availability: JSON.stringify({"Monday": "9:00-17:00", "Tuesday": "9:00-17:00"}),
                    bankAccount: "1122334455",
                    isApproved: 1,
                    profilePicture: "uploads\\doc3.avif",
                    consultingFees: 400.00,
                    certificates: JSON.stringify([{"name":"document1","path":"uploads\\document1.png"},{"name":"document2","path":"uploads\\document2.png"}]),
                    isConsultant: 1,
                },
                {
                  fullName: "Admin User",
                  email: "admin@example.com",
                  password: "$2b$10$O3jfFgJVuZ028Z2u.GCrk.SSpvbdzVUFc4sjI78Jzgsd.3qhyOlo.",
                  role: "admin",
                  phone: "9999999999",
                  bio: "Admin Here",
                  qualification: "Admin, Health Consultant",
                  areasOfExpertise: "Management",
                  speciality: "Management",
                  availability: JSON.stringify({"Monday": "9:00-17:00", "Tuesday": "9:00-17:00"}),
                  bankAccount: "0000000000",
                  isApproved: 1,
                  profilePicture: "uploads\\admin.png",
                  consultingFees: 120.00,
                  certificates: JSON.stringify([{"name":"document1","path":"uploads\\document1.png"},{"name":"document2","path":"uploads\\document2.png"}]),
                  isConsultant: 2,
                },
                {
                  fullName: "Dr. Alice Johnson",
                  email: "alice.j@example.com",
                  password: "$2b$10$O3jfFgJVuZ028Z2u.GCrk.SSpvbdzVUFc4sjI78Jzgsd.3qhyOlo.",
                  role: "consultant",
                  phone: "8888888888",
                  bio: "Dentist with a passion for child health",
                  qualification: "Dentist",
                  areasOfExpertise: "Child Dentistry",
                  speciality: "Dentist",
                  availability: JSON.stringify({"Monday": "9:00-17:00", "Tuesday": "9:00-17:00"}),
                  bankAccount: "1212121212",
                  isApproved: 0,
                  profilePicture: "uploads\\doc4.avif",
                  consultingFees: 500.00,
                  certificates: JSON.stringify([{"name":"document1","path":"uploads\\document1.png"},{"name":"document2","path":"uploads\\document2.png"}]),
                  isConsultant: 1,
              },
              {
                fullName: "Test User",
                email: "user@example.com",
                password: "$2b$10$O3jfFgJVuZ028Z2u.GCrk.SSpvbdzVUFc4sjI78Jzgsd.3qhyOlo.",
                role: "user",
                phone: "7777777777",
                bio: "Simple User",
                qualification: "None",
                areasOfExpertise: "None",
                speciality: "None",
                availability: null,
                bankAccount: null,
                isApproved: 0,
                profilePicture: "uploads\\default.png",
                consultingFees: null,
                certificates: null,
                isConsultant: 0,
            },
            {
              fullName: "Dr. Bob Williams",
              email: "bob.williams@example.com",
              password: "$2b$10$O3jfFgJVuZ028Z2u.GCrk.SSpvbdzVUFc4sjI78Jzgsd.3qhyOlo.",
              role: "consultant",
              phone: "6666666666",
              bio: "Dermatologist specializing in skin conditions",
              qualification: "MD, Dermatology",
              areasOfExpertise: "Acne, Eczema",
              speciality: "Dermatology",
              availability: JSON.stringify({"Monday": "9:00-17:00", "Tuesday": "9:00-17:00"}),
              bankAccount: "3434343434",
              isApproved: 1,
              profilePicture: "uploads\\doc5.jpg",
              consultingFees: 450.00,
              certificates: JSON.stringify([{"name":"document1","path":"uploads\\document1.png"},{"name":"document2","path":"uploads\\document2.png"}]),
              isConsultant: 1,
          },
            ];

            for (const user of users) {
                const {
                    fullName,
                    email,
                    password,
                    role,
                    phone,
                    bio,
                    qualification,
                    areasOfExpertise,
                    speciality,
                    availability,
                    bankAccount,
                    isApproved,
                    profilePicture,
                    consultingFees,
                    certificates,
                    isConsultant,
                } = user;

                await connection.query(
                    `
                    INSERT INTO users (fullName, email, password, role, phone, isConsultant, bio, qualification, areasOfExpertise, speciality, availability, bankAccount, isApproved, profilePicture, consultingFees, certificates)
                    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
                    `,
                    [
                        fullName,
                        email,
                        password,
                        role,
                        phone,
                        isConsultant,
                        bio,
                        qualification,
                        areasOfExpertise,
                        speciality,
                        availability,
                        bankAccount,
                        isApproved,
                        profilePicture,
                        consultingFees,
                        certificates,
                    ]
                );
            }

            // Add the reviews table data at the end of seedConsultants()
            await connection.query(`
              INSERT INTO reviews (userId, consultantId, rating, review, bookingId) VALUES
                (6, 1, 5, 'Excellent consultation! Highly recommended.', 1),
                (6, 2, 4, 'Very helpful and informative session.', 2),
                (6, 1, 3, 'Good but could be better.', 3);
            `);

            console.log("Consultants table seeded with dummy data.");
        } else {
            console.log("Consultants table already has data, skipping seeding.");
        }
        connection.release();

    } catch (error) {
        console.error('Error seeding consultants:', error.message);
    }
}

module.exports = {
    initializeDatabase,
    getDb: () => pool,  // Return the connection pool
};
// File: backend/server.js
const express = require("express");
const cors = require("cors");
const bcrypt = require("bcrypt");
const jwt = require("jsonwebtoken");
const { body, validationResult } = require("express-validator");
const { initializeDatabase, getDb } = require("./database");
const rateLimit = require("express-rate-limit");
const helmet = require("helmet");
const morgan = require("morgan");
const dotenv = require("dotenv");
const multer = require("multer");
const path = require("path");
const fs = require("fs");
const { promisify } = require("util");

dotenv.config();

const app = express();
const port = process.env.PORT || 5555;

// Security Enhancements
// const limiter = rateLimit({
//     windowMs: 15 * 60 * 1000, // 15 minutes
//     max: 100, // Limit each IP to 100 requests per windowMs
//     message: "Too many requests from this IP, please try again after 15 minutes",
// });

app.use(helmet());
// app.use(limiter);
app.use(morgan("dev"));

// CORS Configuration
app.use(
    cors({
        origin: (origin, callback) => {
            const allowedOrigins = ["http://localhost:5173"]; // Use an environment variable for production
            if (!origin || allowedOrigins.indexOf(origin) !== -1) {
                callback(null, true);
            } else {
                callback(new Error("Not allowed by CORS"));
            }
        },
        methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
        allowedHeaders: ["Content-Type", "Authorization"],
    })
);
app.use(express.json());

// Multer configuration
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, "uploads/");
    },
    filename: function (req, file, cb) {
        const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
        cb(
            null,
            file.fieldname +
            "-" +
            uniqueSuffix +
            "." +
            file.originalname.split(".").pop()
        );
    },
});

const upload = multer({ storage: storage });

// Initialize database
initializeDatabase()
    .then(() => {
        // Helper function to handle database errors
        const handleDatabaseError = (req, res, err, message) => {
            console.error(req.originalUrl + ": ", err.message);
            if (res && typeof res.status === "function") {
                return res.status(500).json({
                    message: message || "Database operation failed",
                    error: err.message,
                });
            } else {
                console.error("Response object is not valid:", res);
                return; // Or throw an error, depending on the desired behavior
            }
        };

        // Helper function to generate JWT token
        const generateToken = (user) => {
            return jwt.sign(
                { userId: user.id, role: user.role },
                process.env.JWT_SECRET || "secret",
                { expiresIn: "1h" }
            ); // Use environment variable for secret
        };

        // User Registration
        app.post(
            "/api/register",
            upload.fields([
                { name: "profilePicture", maxCount: 1 },
                { name: "certificates", maxCount: 10 }, // Allow up to 10 certificates
            ]),
            [
                body("fullName").notEmpty().withMessage("Full name is required"),
                body("email").isEmail().withMessage("Invalid email address"),
                body("password")
                    .isLength({ min: 6 })
                    .withMessage("Password must be at least 6 characters long"),
                body("role")
                    .isIn(["user", "consultant", "admin"]) //Removed admin role from here
                    .withMessage("Invalid role selected"),
                body("phone").notEmpty().withMessage("Phone number is required"), //Added phone validation
            ],
            async (req, res) => {
                const errors = validationResult(req);
                if (!errors.isEmpty()) {
                    return res.status(400).json({ errors: errors.array() });
                }

                const {
                    fullName,
                    email,
                    password,
                    role,
                    phone, //Get the phone number here
                    bloodGroup,
                    medicalHistory,
                    currentPrescriptions,
                    bio, // Consultant specific
                    qualification, // Consultant specific
                    areasOfExpertise,
                    speciality, // Consultant specific
                    availability, // Consultant specific
                    bankAccount, // Consultant Specific
                    consultingFees, // Consultant Specific
                } = req.body;

                const profilePicture =
                    req.files && req.files["profilePicture"]
                        ? req.files["profilePicture"][0].path
                        : null;

                let certificatesData = [];

                if (req.files && req.files["certificates"]) {
                    const certificates = Array.isArray(req.files["certificates"])
                        ? req.files["certificates"]
                        : [req.files["certificates"]];

                    try {
                        const certificateNames = JSON.parse(req.body.certificateNames); // Parse certificate names from request body
                        certificatesData = certificates.map((file, index) => ({
                            name: certificateNames[index] || file.originalname, // Use provided name or original filename
                            path: file.path,
                        }));
                    } catch (error) {
                        console.error("Error parsing certificateNames:", error);
                        return res
                            .status(400)
                            .json({ message: "Invalid certificate names format" });
                    }
                }

                try {
                    const hashedPassword = await bcrypt.hash(password, 10);
                    const pool = getDb(); // Get the connection pool
                    const connection = await pool.getConnection(); // Get a connection from the pool

                    try {
                        const isConsultant = role === "consultant" ? 1 : 0; // Set isConsultant flag

                        // Construct the SQL query dynamically
                        let sql =
                            "INSERT INTO users (fullName, email, password, role, phone, isConsultant, profilePicture";
                        let values = [
                            fullName,
                            email,
                            hashedPassword,
                            role,
                            phone,
                            isConsultant,
                            profilePicture,
                        ];

                        // Add fields based on role
                        if (role === "user") {
                            sql +=
                                ", bloodGroup, medicalHistory, currentPrescriptions) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
                            values.push(bloodGroup, medicalHistory, currentPrescriptions);
                        } else if (role === "consultant") {
                            sql +=
                                ", bio, qualification, areasOfExpertise, speciality, availability, bankAccount, consultingFees, certificates, isApproved) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";
                            values.push(
                                bio,
                                qualification,
                                areasOfExpertise,
                                speciality,
                                availability,
                                bankAccount,
                                consultingFees,
                                JSON.stringify(certificatesData),
                                0
                            ); // isApproved default 0
                        } else {
                            sql += ") VALUES (?, ?, ?, ?, ?, ?, ?)"; //role = admin
                        }

                        // Execute the SQL query
                        const [result] = await connection.query(sql, values);
                        const userId = result.insertId;

                        // Send successful response
                        res.status(201).json({
                            id: userId,
                            fullName,
                            email,
                            phone,
                            role,
                            isConsultant,
                            isApproved: 0,
                            profilePicture,
                        });
                    } finally {
                        connection.release(); // Release the connection back to the pool
                    }
                } catch (error) {
                    console.error(error);
                    if (error.code === 'ER_DUP_ENTRY') {
                        return res.status(400).json({ message: "Email already exists" });
                    }
                    res.status(500).json({ message: "Registration failed", error: error.message });
                }
            }
        );

        // User Login
        app.post(
            "/api/login",
            [
                body("email").isEmail().withMessage("Invalid email address"),
                body("password").notEmpty().withMessage("Password is required"),
            ],
            async (req, res) => {
                const errors = validationResult(req);
                if (!errors.isEmpty()) {
                    return res.status(400).json({ errors: errors.array() });
                }

                const { email, password } = req.body;
                try {
                    const pool = getDb();
                    const connection = await pool.getConnection();

                    try {
                        const [rows] = await connection.query("SELECT * FROM users WHERE email = ?", [email]);
                        const user = rows[0];

                        if (!user) {
                            return res.status(400).json({ message: "Invalid credentials" });
                        }

                        const passwordMatch = await bcrypt.compare(password, user.password);
                        if (!passwordMatch) {
                            return res.status(400).json({ message: "Invalid credentials" });
                        }

                        const token = generateToken(user);
                        res.json({
                            token,
                            role: user.role,
                            userId: user.id,
                            isConsultant: user.isConsultant,
                            isApproved: user.isApproved,
                            profilePicture: user.profilePicture,
                        });
                    } finally {
                        connection.release();
                    }
                } catch (error) {
                    console.error(error);
                    res.status(500).json({ message: "Login failed", error: error.message });
                }
            }
        );

        // Authentication Middleware
        const authenticateToken = (req, res, next) => {
            const authHeader = req.headers["authorization"];
            const token = authHeader && authHeader.split(" ")[1];

            if (!token) {
                return res.status(401).json({ message: "Authentication required" });
            }

            jwt.verify(token, process.env.JWT_SECRET || "secret", (err, user) => {
                if (err) {
                    return res
                        .status(403)
                        .json({ message: "Invalid token", error: err.message });
                }
                req.user = user;
                next();
            });
        };

        // Endpoint to fetch consultant's documents
        app.get("/api/consultant/:consultantId/documents", async (req, res) => {
            const { consultantId } = req.params;

            try {
                const pool = getDb();
                const connection = await pool.getConnection();

                try {
                    // Fetch user by ID
                    const [rows] = await connection.query(
                        "SELECT certificates FROM users WHERE id = ? AND role = 'consultant'",
                        [consultantId]
                    );

                    const row = rows[0];

                    if (!row) {
                        return res
                            .status(404)
                            .json({
                                message: "Consultant not found or does not have documents.",
                            });
                    }
                    // Parse the certificates from string to array
                    const certificates = JSON.parse(row.certificates) || [];

                    res.status(200).json({ certificates });
                } finally {
                    connection.release();
                }
            } catch (error) {
                console.error(error);
                res
                    .status(500)
                    .json({ message: "Failed to fetch consultant documents", error: error.message });
            }
        });

        // User Payments API (GET)
        app.get("/api/user/payments", authenticateToken, async (req, res) => {
            const userId = req.user.userId;
            try {
                const pool = getDb();
                const connection = await pool.getConnection();

                try {
                    const [payments] = await connection.query(
                        `SELECT
                          p.*,
                          b.date AS bookingDate,
                          b.time AS bookingTime,
                          r.refundAmount AS refundAmount
                        FROM
                          payments p
                        INNER JOIN
                          bookings b ON p.bookingId = b.id
                        LEFT JOIN
                          refunds r ON p.id = r.paymentId
                        WHERE
                          p.userId = ?`,
                        [userId]
                    );

                    // Process payments to calculate final amount
                    const processedPayments = payments.map((payment) => {
                        let finalAmount = payment.amount;
                        if (payment.status === "refunded" && payment.refundAmount) {
                            finalAmount -= payment.refundAmount; // Make the refund amount negative
                        }

                        return {
                            ...payment,
                            finalAmount: finalAmount,
                        };
                    });

                    res.json(processedPayments);
                } finally {
                    connection.release();
                }
            } catch (error) {
                console.error(error);
                res.status(500).json({ message: "Failed to retrieve payments", error: error.message });
            }
        });

        // Consultant Earnings API (GET)
        app.get("/api/consultant/earnings", authenticateToken, async (req, res) => {
            const userId = req.user.userId;
            try {
                const pool = getDb();
                const connection = await pool.getConnection();

                try {
                    const [earnings] = await connection.query(
                        `
                        SELECT p.*, b.date as bookingDate, b.time as bookingTime
                        FROM payments p
                        INNER JOIN bookings b ON p.bookingId = b.id
                        WHERE b.consultantId = ?
                        AND p.status = 'paid'
                        AND b.status NOT IN ('rejected', 'canceled')  -- Exclude rejected and cancelled bookings
                        `,
                        [userId]
                    );

                    res.json(earnings);
                } finally {
                    connection.release();
                }
            } catch (error) {
                console.error(error);
                res.status(500).json({ message: "Failed to retrieve earnings", error: error.message });
            }
        });

        // User Profile (GET)
        app.get("/api/profile", authenticateToken, async (req, res) => {
            const userId = req.user.userId;
            try {
                const pool = getDb();
                const connection = await pool.getConnection();
                try {
                    const [rows] = await connection.query(`SELECT
                        id,
                        fullName,
                        email,
                        role,
                        phone,
                        profilePicture,
                        bloodGroup,
                        medicalHistory,
                        currentPrescriptions,
                        isConsultant,
                        bio,
                        qualification,
                        areasOfExpertise,
                        speciality,
                        availability,
                        bankAccount,
                        isApproved
                    FROM users WHERE id = ?`, [userId]);
                    const user = rows[0];
                    if (!user) {
                        return res.status(404).json({ message: "Profile not found" });
                    }
                    res.json(user);
                } finally {
                    connection.release();
                }
            } catch (error) {
                console.error(error);
                res.status(500).json({ message: "Failed to retrieve profile", error: error.message });
            }
        });

       // User Profile (PUT)
app.put(
    "/api/profile",
    upload.single("profilePicture"),
    authenticateToken,
    [
        body("fullName").optional().notEmpty().withMessage("Full name is required"),
        body("email").optional().isEmail().withMessage("Invalid email address"),
    ],
    async (req, res) => {
        const errors = validationResult(req);
        if (!errors.isEmpty()) {
            return res.status(400).json({ errors: errors.array() });
        }

        const userId = req.user.userId;
        const {
            fullName,
            email,
            bloodGroup,
            medicalHistory,
            currentPrescriptions,
            phone,
            bio,
            qualification,
            areasOfExpertise,
            speciality,
            availability,
            bankAccount,
        } = req.body;
        const profilePicture = req.file ? req.file.path : null;

        try {
            const pool = getDb();
            const connection = await pool.getConnection();

            try {
                let sql = "UPDATE users SET ";
                const values = [];

                // Only include non-null or non-empty fields in the update query
                if (fullName && fullName.trim() !== "") {
                    sql += "fullName = ?, ";
                    values.push(fullName);
                }

                if (email && email.trim() !== "") {
                    sql += "email = ?, ";
                    values.push(email);
                }

                if (req.user.role === "user") {
                    if (bloodGroup && bloodGroup.trim() !== "") {
                        sql += "bloodGroup = ?, ";
                        values.push(bloodGroup);
                    }

                    if (medicalHistory && medicalHistory.trim() !== "") {
                        sql += "medicalHistory = ?, ";
                        values.push(medicalHistory);
                    }

                    if (currentPrescriptions && currentPrescriptions.trim() !== "") {
                        sql += "currentPrescriptions = ?, ";
                        values.push(currentPrescriptions);
                    }
                } else if (req.user.role === "consultant") {
                    if (phone && phone.trim() !== "") {
                        sql += "phone = ?, ";
                        values.push(phone);
                    }

                    if (bio && bio.trim() !== "") {
                        sql += "bio = ?, ";
                        values.push(bio);
                    }

                    if (qualification && qualification.trim() !== "") {
                        sql += "qualification = ?, ";
                        values.push(qualification);
                    }

                    if (areasOfExpertise && areasOfExpertise.trim() !== "") {
                        sql += "areasOfExpertise = ?, ";
                        values.push(areasOfExpertise);
                    }

                    if (speciality && speciality.trim() !== "") {
                        sql += "speciality = ?, ";
                        values.push(speciality);
                    }

                    if (availability && availability.trim() !== "") {
                        sql += "availability = ?, ";
                        values.push(availability);
                    }

                    if (bankAccount && bankAccount.trim() !== "") {
                        sql += "bankAccount = ?, ";
                        values.push(bankAccount);
                    }
                }

                // Only update profilePicture if provided (not null)
                if (profilePicture) {
                    sql += "profilePicture = ?, ";
                    values.push(profilePicture);
                }

                // Remove the trailing comma and space
                sql = sql.slice(0, -2);

                // Add the WHERE condition
                sql += " WHERE id = ?";

                // Push userId to the values array
                values.push(userId);

                await connection.query(sql, values);
                res.json({ id: userId, fullName, email, profilePicture });
            } finally {
                connection.release();
            }
        } catch (error) {
            console.error(error);
            res.status(500).json({ message: "Failed to update profile", error: error.message });
        }
    }
);


        // Consultant Profile (GET)
        app.get("/api/consultant/profile", authenticateToken, async (req, res) => {
            const userId = req.user.userId;
            try {
                const pool = getDb();
                const connection = await pool.getConnection();

                try {
                    // First, check if the user is a consultant
                    const [rows] = await connection.query(
                        "SELECT * FROM users WHERE id = ? AND isConsultant = 1",
                        [userId]
                    );

                    const user = rows[0];

                    if (!user) {
                        return res
                            .status(403)
                            .json({ message: "User is not a consultant" });
                    }

                    // If the user is a consultant, retrieve the consultant profile
                    res.json(user);
                } finally {
                    connection.release();
                }
            } catch (error) {
                console.error(error);
                res.status(500).json({ message: "Failed to get consultant profile", error: error.message });
            }
        });

        app.put(
            "/api/consultant/profile",
            authenticateToken,
            [
                body("specialty").notEmpty().withMessage("Specialty is required"),
                body("specialty")
                    .isLength({ max: 50 })
                    .withMessage("Specialty must be less than 50 characters"),
                body("qualifications")
                    .notEmpty()
                    .withMessage("Qualifications are required"),
                body("availability").notEmpty().withMessage("Availability is required"),
                body("bio").optional().isString().withMessage("Bio must be a string"),
                body("areasOfExpertise")
                    .optional()
                    .isString()
                    .withMessage("Areas of expertise must be a string"),
                body("fullName").notEmpty().withMessage("Full name is required"),
                body("profilePicture")
                    .optional()
                    .isURL()
                    .withMessage("Profile picture must be a valid URL"),
            ],
            async (req, res) => {
                const userId = req.user.userId;
                const {
                    specialty,
                    qualifications,
                    availability,
                    bio,
                    areasOfExpertise,
                    fullName,
                    profilePicture,
                } = req.body; // Extract all fields from the request body

                try {
                    const pool = getDb();
                    const connection = await pool.getConnection();

                    try {
                        // Verify if the user is a consultant before updating the profile
                        const [rows] = await connection.query(
                            "SELECT isConsultant FROM users WHERE id = ?",
                            [userId]
                        );

                        const user = rows[0];

                        if (!user || user.isConsultant !== 1) {
                            return res
                                .status(403)
                                .json({ message: "User is not a consultant" });
                        }

                        // Update the consultant profile (Corrected field name: 'speciality' to 'specialty')
                        await connection.query(
                            `UPDATE users SET
                        fullName = ?,
                        speciality = ?,  -- Corrected field name
                        qualification = ?,
                        availability = ?,
                        bio = ?,
                        areasOfExpertise = ?,
                        profilePicture = ?
                    WHERE id = ?`,
                            [
                                fullName,
                                specialty,
                                qualifications,
                                availability,
                                bio,
                                areasOfExpertise,
                                profilePicture,
                                userId,
                            ]
                        );

                        res.json({
                            userId,
                            fullName,
                            specialty,
                            qualifications,
                            availability,
                            bio,
                            areasOfExpertise,
                            profilePicture,
                        });
                    } finally {
                        connection.release();
                    }
                } catch (error) {
                    console.error(error);
                    res.status(500).json({ message: "Failed to update consultant profile", error: error.message });
                }
            }
        );
        // List Consultants (GET)
        app.get("/api/consultants", async (req, res) => {
            const { specialty, rating, availability } = req.query;
            let query =
              "SELECT * FROM users WHERE isConsultant = 1 AND isApproved = 1"; // Start with a base query

            const params = [];
            if (specialty) {
              query += " AND speciality LIKE ?";
              params.push(`%${specialty}%`);
            }
            // if (availability) {
            //   query += " AND availability LIKE ?";
            //   params.push(`%${availability}%`);
            // }

            try {
                const pool = getDb();
                const connection = await pool.getConnection();

                try {
                    const [consultants] = await connection.query(query, params);
                    res.json(consultants);
                } finally {
                    connection.release();
                }
            } catch (error) {
                console.error(error.message);
                return res
                    .status(500)
                    .json({ message: "Failed to retrieve consultants" });
            }
          });

        // Send Chat Request (POST)
        app.post("/api/chat/request", authenticateToken, async (req, res) => {
            const userId = req.user.userId;
            const { consultantId, bookingId, message } = req.body;
            const pool = getDb();

            try {
                const connection = await pool.getConnection();
                try {
                    // Verify booking exists and belongs to user
                    const [bookingRows] = await connection.query(
                        "SELECT 1 FROM bookings WHERE id = ? AND userId = ? AND consultantId = ?",
                        [bookingId, userId, consultantId]
                    );
                    if (bookingRows.length === 0) {
                        return res
                            .status(403)
                            .json({ message: "Invalid booking or unauthorized" });
                    }

                    // Check if payment is valid
                    const [paymentRows] = await connection.query(
                        "SELECT 1 FROM payments WHERE bookingId = ? AND userId = ? AND status = 'paid'",
                        [bookingId, userId]
                    );
                    if (paymentRows.length === 0) {
                        return res
                            .status(403)
                            .json({ message: "Payment not found or not paid" });
                    }

                    // Create the chat request
                    const [chatRequestResult] = await connection.query(
                        "INSERT INTO chat_requests (userId, consultantId, bookingId) VALUES (?, ?, ?)",
                        [userId, consultantId, bookingId]
                    );
                    const chatRequestId = chatRequestResult.insertId;

                    // Insert the first message
                    await connection.query(
                        "INSERT INTO chats (chatRequestId, senderId, message) VALUES (?, ?, ?)",
                        [chatRequestId, userId, message]
                    );

                    res.status(201).json({
                        message: "Chat request sent and message sent successfully",
                        chatRequestId,
                    });
                } finally {
                    connection.release();
                }
            } catch (error) {
                console.error(error);
                res.status(500).json({ message: "Failed to send chat request", error: error.message });
            }
        });

        // Get Chat Requests for a User (GET)
        app.get("/api/chat/requests", authenticateToken, async (req, res) => {
            const userId = req.user.userId;
            const pool = getDb();

            try {
                const connection = await pool.getConnection();
                try {
                    // Determine the user's role (consultant or other)
                    const [userRows] = await connection.query(
                        "SELECT isConsultant FROM users WHERE id = ?",
                        [userId]
                    );
                    const user = userRows[0];

                    let query = `
                SELECT cr.*, u.fullName as userName, u.profilePicture as userProfilePicture, cu.fullName as consultantName, cu.profilePicture as consultantProfilePicture, b.date as bookingDate, b.time as bookingTime
                FROM chat_requests cr
                INNER JOIN users u ON cr.userId = u.id
                INNER JOIN users cu ON cr.consultantId = cu.id
                INNER JOIN bookings b ON cr.bookingId = b.id
                WHERE `;

                    const params = [];

                    if (user && user.isConsultant === 1) {
                        // Consultant: Get all requests *for* this consultant
                        query += "cr.consultantId = ?";
                        params.push(userId);
                    } else {
                        // User: Get all requests *from* this user
                        query += "cr.userId = ?";
                        params.push(userId);
                    }

                    // Retrieve all messages
                    const [requests] = await connection.query(query, params);
                    res.json(requests);
                } finally {
                    connection.release();
                }
            } catch (error) {
                console.error(error);
                res.status(500).json({ message: "Failed to retrieve chat requests", error: error.message });
            }
        });

        app.get(
            "/api/chat/requestStatus/:consultantId",
            authenticateToken,
            async (req, res) => {
                const userId = req.user.userId;
                const { consultantId } = req.params;
                const pool = getDb();

                try {
                    const connection = await pool.getConnection();
                    try {
                        const [rows] = await connection.query(
                            "SELECT * FROM chat_requests WHERE userId = ? AND consultantId = ?",
                            [userId, consultantId]
                        );
                        const request = rows[0];

                        if (!request) {
                            return res.json({ message: "No Chat Requests" });
                        }
                        res.json({ request });
                    } finally {
                        connection.release();
                    }
                } catch (error) {
                    console.error(error);
                    res
                        .status(500)
                        .json({ message: "Failed to retrieve chat request status", error: error.message });
                }
            }
        );

        // Accept/Reject Chat Request (PUT)
        app.put(
            "/api/chat/requests/:requestId",
            authenticateToken,
            async (req, res) => {
                const { requestId } = req.params;
                const { status } = req.body; // 'accepted' or 'rejected'
                const userId = req.user.userId; // Consultant id
                const pool = getDb();

                if (!["accepted", "rejected"].includes(status)) {
                    return res.status(400).json({ message: "Invalid status" });
                }

                try {
                    const connection = await pool.getConnection();
                    try {
                        const [userRows] = await connection.query(
                            "SELECT isConsultant FROM users WHERE id = ?",
                            [userId]
                        );
                        const user = userRows[0];

                        if (!user || user.isConsultant !== 1) {
                            return res
                                .status(403)
                                .json({ message: "User is not a consultant" });
                        }

                        const [updateResult] = await connection.query(
                            "UPDATE chat_requests SET status = ? WHERE id = ? AND consultantId = ?",
                            [status, requestId, userId]
                        );

                        if (updateResult.affectedRows === 0) {
                            return res
                                .status(404)
                                .json({
                                    message: "Chat request not found or unauthorized",
                                });
                        }

                        res.json({ message: "Chat request updated successfully" });
                    } finally {
                        connection.release();
                    }
                } catch (error) {
                    console.error(error);
                    res
                        .status(500)
                        .json({ message: "Failed to update chat request", error: error.message });
                }
            }
        );

        // Get Messages for a Chat (GET)
        app.get(
            "/api/chat/:chatRequestId/messages",
            authenticateToken,
            async (req, res) => {
                const { chatRequestId } = req.params;
                const userId = req.user.userId;
                const pool = getDb();

                try {
                    const connection = await pool.getConnection();
                    try {
                        // Validate user is part of this chat
                        const [chatRequestRows] = await connection.query(
                            `SELECT 1 FROM chat_requests WHERE id = ? AND (userId = ? OR consultantId = ?)`,
                            [chatRequestId, userId, userId]
                        );
                        if (chatRequestRows.length === 0) {
                            return res
                                .status(403)
                                .json({ message: "Unauthorized to access this chat" });
                        }

                        // Fetch messages
                        const [messages] = await connection.query(
                            "SELECT * FROM chats WHERE chatRequestId = ? ORDER BY timestamp",
                            [chatRequestId]
                        );
                        res.json(messages);
                    } finally {
                        connection.release();
                    }
                } catch (error) {
                    console.error(error);
                    res.status(500).json({ message: "Failed to retrieve messages", error: error.message });
                }
            }
        );

        // Send Message (POST)
        app.post(
            "/api/chat/:chatRequestId/messages",
            authenticateToken,
            async (req, res) => {
                const { chatRequestId } = req.params;
                const { message } = req.body;
                const senderId = req.user.userId;
                const pool = getDb();

                try {
                    const connection = await pool.getConnection();
                    try {
                        // Validate user is part of this chat
                        const [chatRequestRows] = await connection.query(
                            `SELECT 1 FROM chat_requests WHERE id = ? AND (userId = ? OR consultantId = ?) AND status = 'accepted'`,
                            [chatRequestId, senderId, senderId]
                        );
                        if (chatRequestRows.length === 0) {
                            return res
                                .status(403)
                                .json({
                                    message: "Unauthorized to send messages in this chat",
                                });
                        }

                        // Insert message
                        const [insertResult] = await connection.query(
                            "INSERT INTO chats (chatRequestId, senderId, message) VALUES (?, ?, ?)",
                            [chatRequestId, senderId, message]
                        );
                        const messageId = insertResult.insertId;
                        res.status(201).json({
                            message: "Message sent successfully",
                            messageId: messageId,
                        });
                    } finally {
                        connection.release();
                    }
                } catch (error) {
                    console.error(error);
                    res.status(500).json({ message: "Failed to send message", error: error.message });
                }
            }
        );

        // Reviews (POST)
        app.post(
            "/api/reviews",
            authenticateToken,
            [
                body("consultantId")
                    .notEmpty()
                    .withMessage("Consultant ID is required"),
                body("rating")
                    .isInt({ min: 1, max: 5 })
                    .withMessage("Rating must be between 1 and 5"),
                body("review").notEmpty().withMessage("Review text is required"),
            ],
            async (req, res) => {
                const errors = validationResult(req);
                if (!errors.isEmpty()) {
                    return res.status(400).json({ errors: errors.array() });
                }

                const userId = req.user.userId;
                const { consultantId, rating, review } = req.body;
                const pool = getDb();

                try {
                    const connection = await pool.getConnection();
                    try {
                        //Verify user
                        const [bookingRows] = await connection.query(
                            "SELECT * FROM bookings WHERE userId = ? AND consultantId = ?",
                            [userId, consultantId]
                        );

                        if (bookingRows.length === 0) {
                            return res
                                .status(403)
                                .json({
                                    message: "You can't post review without an appointment",
                                });
                        }
                        const [insertResult] = await connection.query(
                            "INSERT INTO reviews (userId, consultantId, rating, review) VALUES (?, ?, ?, ?)",
                            [userId, consultantId, rating, review]
                        );
                        const reviewId = insertResult.insertId;
                        res
                            .status(201)
                            .json({ id: reviewId, userId, consultantId, rating, review });
                    } finally {
                        connection.release();
                    }
                } catch (error) {
                    console.error(error);
                    res.status(500).json({ message: "Failed to create review", error: error.message });
                }
            }
        );

        // Get Consultant by ID (GET)
        app.get("/api/consultants/:id", async (req, res) => {
            const consultantId = req.params.id;
            const pool = getDb();
            try {
                const connection = await pool.getConnection();
                try {
                    const [consultantRows                    ] = await connection.query(
                      "SELECT * FROM users WHERE id = ? AND isConsultant = 1",
                      [consultantId]
                  );
                  const consultant = consultantRows[0];

                  if (!consultant) {
                      return res.status(404).json({ message: "Consultant not found" });
                  }
                  const [reviews] = await connection.query(
                      "SELECT * FROM reviews WHERE consultantId = ?",
                      [consultantId]
                  );
                  res.json({
                      consultant,
                      reviews,
                  });
              } finally {
                  connection.release();
              }
          } catch (error) {
              console.error(error);
              res.status(500).json({ message: "Failed to retrieve consultant", error: error.message });
          }
      });

      // Bookings (GET)
      app.get("/api/bookings", authenticateToken, async (req, res) => {
          const userId = req.user.userId;
          const pool = getDb();

          try {
              const connection = await pool.getConnection();
              try {
                  const [bookings] = await connection.query(
                      "SELECT * FROM bookings WHERE userId = ?",
                      [userId]
                  );
                  res.json(bookings);
              } finally {
                  connection.release();
              }
          } catch (error) {
              console.error(error);
              res.status(500).json({ message: "Failed to retrieve bookings", error: error.message });
          }
      });

      // Booking acceptance route
      app.put("/api/bookings/:id/accept", authenticateToken, async (req, res) => {
          const bookingId = req.params.id;
          const pool = getDb();

          try {
              const connection = await pool.getConnection();
              try {
                  const [bookingRows] = await connection.query(
                      "SELECT consultantId, date, time FROM bookings WHERE id = ?",
                      [bookingId]
                  );
                  const booking = bookingRows[0];

                  if (!booking) {
                      return res.status(404).json({ message: "Booking not found" });
                  }
                  const [conflictRows] = await connection.query(
                      "SELECT COUNT(*) AS count FROM bookings WHERE consultantId = ? AND date = ? AND time = ? AND status = 'accepted'",
                      [booking.consultantId, booking.date, booking.time]
                  );

                  if (conflictRows[0].count > 0) {
                      return res.status(400).json({
                          message:
                              "This timeslot is already booked by another booking.",
                      });
                  }

                  const [updateResult] = await connection.query(
                      "UPDATE bookings SET status = 'accepted' WHERE id = ?",
                      [bookingId]
                  );

                  if (updateResult.affectedRows === 0) {
                      return res
                          .status(404)
                          .json({ message: "Booking not found" });
                  }

                  res.json({ message: "Booking accepted successfully" });
              } finally {
                  connection.release();
              }
          } catch (error) {
              console.error(error);
              res.status(500).json({ message: "Failed to accept booking", error: error.message });
          }
      });

      app.put("/api/bookings/:id/cancel", authenticateToken, async (req, res) => {
          const bookingId = req.params.id;
          const pool = getDb();

          try {
              const connection = await pool.getConnection();
              try {
                  const [bookingRows] = await connection.query(
                      "SELECT consultantId, date, time FROM bookings WHERE id = ?",
                      [bookingId]
                  );
                  const booking = bookingRows[0];

                  if (!booking) {
                      return res.status(404).json({ message: "Booking not found" });
                  }
                  const [updateResult] = await connection.query(
                      "UPDATE bookings SET status = 'canceled' WHERE id = ?",
                      [bookingId]
                  );
                  if (updateResult.affectedRows === 0) {
                      return res
                          .status(404)
                          .json({ message: "Booking not found" });
                  }
                  const [paymentRows] = await connection.query(
                      "SELECT id, amount FROM payments WHERE bookingId = ?",
                      [bookingId]
                  );
                  const payment = paymentRows[0];

                  if (payment) {
                      // Calculating the refund amount and inserting the details
                      const refundAmount = (
                          (payment.amount - ((payment.amount * 18) / 100 + 25)) *
                          0.95
                      ).toFixed(2); // Deducting a 5% cancellation fee, platform fees and gst

                      const [refundInsertResult] = await connection.query(
                          "INSERT INTO refunds (paymentId, refundDate, refundAmount, reason) VALUES (?, ?, ?, ?)",
                          [
                              payment.id,
                              new Date().toISOString(),
                              refundAmount,
                              "Booking cancellation",
                          ]
                      );

                      // Update the payment status to refunded after the refund amount calculation
                      await connection.query(
                          "UPDATE payments SET status = 'refunded' WHERE bookingId = ?",
                          [bookingId]
                      );

                      res.json({
                          message: "Booking canceled successfully",
                          refundId: refundInsertResult.insertId,
                      });
                  } else {
                      return res
                          .status(404)
                          .json({ message: "Payment not found" });
                  }
              } finally {
                  connection.release();
              }
          } catch (error) {
              console.error(error);
              res.status(500).json({ message: "Failed to cancel booking", error: error.message });
          }
      });

      app.put("/api/bookings/:id/reject", authenticateToken, async (req, res) => {
          const bookingId = req.params.id;
          const pool = getDb();

          try {
              const connection = await pool.getConnection();
              try {
                  const [bookingRows] = await connection.query(
                      "SELECT consultantId, date, time, userId FROM bookings WHERE id = ?",
                      [bookingId]
                  );
                  const booking = bookingRows[0];

                  if (!booking) {
                      return res.status(404).json({ message: "Booking not found" });
                  }
                  const [updateResult] = await connection.query(
                      "UPDATE bookings SET status = 'rejected' WHERE id = ?",
                      [bookingId]
                  );

                  if (updateResult.affectedRows === 0) {
                      return res
                          .status(404)
                          .json({ message: "Booking not found" });
                  }

                  // Refund logic (similar to cancel route)
                  const [paymentRows] = await connection.query(
                      "SELECT id, amount FROM payments WHERE bookingId = ?",
                      [bookingId]
                  );
                  const payment = paymentRows[0];

                  if (payment) {
                      // Calculating the refund amount and inserting the details
                      const refundAmount =
                          payment.amount - ((payment.amount * 18) / 100 + 25); // Deducting gst and platform fees

                      const [refundInsertResult] = await connection.query(
                          "INSERT INTO refunds (paymentId, refundDate, refundAmount, reason) VALUES (?, ?, ?, ?)",
                          [
                              payment.id,
                              new Date().toISOString(),
                              refundAmount,
                              "Booking rejection",
                          ]
                      );

                      // Update the payment status to refunded after the refund amount calculation
                      await connection.query(
                          "UPDATE payments SET status = 'refunded' WHERE bookingId = ?",
                          [bookingId]
                      );
                      res.json({
                          message: "Booking rejected successfully",
                          refundId: refundInsertResult.insertId,
                      });
                  } else {
                      return res
                          .status(404)
                          .json({ message: "Payment not found" });
                  }
              } finally {
                  connection.release();
              }
          } catch (error) {
              console.error(error);
              res.status(500).json({ message: "Failed to reject booking", error: error.message });
          }
      });

      app.post(
          "/api/bookings",
          authenticateToken,
          [
              body("consultantId")
                  .notEmpty()
                  .withMessage("Consultant ID is required"),
              body("date").notEmpty().withMessage("Date is required"),
              body("time").notEmpty().withMessage("Time is required"),
          ],
          async (req, res) => {
              const errors = validationResult(req);
              if (!errors.isEmpty()) {
                  return res.status(400).json({ errors: errors.array() });
              }

              const userId = req.user.userId;
              const { consultantId, date, time, status = "pending" } = req.body;

              // Validate that the consultantId is a valid integer
              if (isNaN(consultantId)) {
                  return res
                      .status(400)
                      .json({ message: "Invalid consultant ID. Must be a number." });
              }
              const pool = getDb();
              try {
                  const connection = await pool.getConnection();
                  try {
                      // Fetch consultant information, including availability and consultingFees
                      const [consultantRows] = await connection.query(
                          "SELECT availability, consultingFees, speciality FROM users WHERE id = ? AND isConsultant = 1",
                          [consultantId]
                      );

                      const consultant = consultantRows[0];

                      if (!consultant) {
                          return res.status(404).json({ message: "Consultant not found." });
                      }
                      try {
                          // Validate that the specified time is in the consultant's availability
                          let availableTimes = JSON.parse(consultant.availability);
                          const bookingDay = new Date(date).toLocaleDateString("en-US", {
                              weekday: "long",
                          });

                          // Check if bookingDay is a valid day of the week
                          if (!availableTimes.hasOwnProperty(bookingDay)) {
                              return res.status(400).json({
                                  message:
                                      "Consultant is not available on the specified day. Check days with consultant.",
                              });
                          }

                          // Validate that time is in the consultant's availability
                          const validTimes = availableTimes[bookingDay];
                          if (
                              !validTimes ||
                              validTimes.startTime > time ||
                              validTimes.endTime < time
                          ) {
                              return res.status(400).json({
                                  message:
                                      "Consultant is not available on the specified time. Check valid times.",
                              });
                          }

                          // Additional validation
                          const [countRows] = await connection.query(
                              "SELECT COUNT(*) AS count FROM bookings WHERE consultantId = ? AND date = ? AND time = ? AND status = 'accepted'",
                              [consultantId, date, time]
                          );
                          if (countRows[0].count > 0) {
                              return res.status(400).json({
                                  message:
                                      "Consultant is already booked for this date and time.",
                              });
                          }

                          const [userCountRows] = await connection.query(
                              "SELECT COUNT(*) AS count FROM bookings WHERE userId = ? AND date = ? AND time = ?",
                              [userId, date, time]
                          );

                          if (userCountRows[0].count > 0) {
                              return res.status(400).json({
                                  message:
                                      "You already have a booking for this date and time.",
                              });
                          }

                          const [insertResult] = await connection.query(
                              "INSERT INTO bookings (userId, consultantId, date, time, status) VALUES (?, ?, ?, ?, ?)",
                              [userId, consultantId, date, time, status]
                          );
                          const bookingId = insertResult.insertId;
                          const paymentDate = new Date().toISOString();
                          const amount = (
                              Number(consultant.consultingFees) +
                              (Number(consultant.consultingFees) * 18) / 100 +
                              25
                          ).toFixed(2); // Using consultingFees from users table
                          // Insert payment information into the payments table
                          const [paymentInsertResult] = await connection.query(
                              "INSERT INTO payments (bookingId, userId, amount, paymentDate, status) VALUES (?, ?, ?, ?, ?)",
                              [bookingId, userId, amount, paymentDate, "paid"]
                          );
                          const paymentId = paymentInsertResult.insertId;
                          res.status(201).json({
                              id: bookingId,
                              userId,
                              consultantId,
                              date,
                              time,
                              status,
                              paymentId,
                          });
                      } catch (parseError) {
                          console.error("Error parsing availability data:", parseError);
                          return res
                              .status(500)
                              .json({ message: "Failed to parse availability data" });
                      }
                  } finally {
                      connection.release();
                  }
              } catch (error) {
                  console.error(error);
                  res.status(500).json({ message: "Failed to create booking", error: error.message });
              }
          }
      );

      // API to Fetch Consultant Availability
      app.get("/api/consultant/:consultantId/availability", async (req, res) => {
          const consultantId = req.params.consultantId;
          const pool = getDb();

          try {
              const connection = await pool.getConnection();
              try {
                  const [consultantRows] = await connection.query(
                      "SELECT availability FROM users WHERE id = ? AND isConsultant = 1",
                      [consultantId]
                  );
                  const consultant = consultantRows[0];

                  if (!consultant) {
                      return res.status(404).json({ message: "Consultant not found" });
                  }
                  try {
                      const availability = JSON.parse(consultant.availability);
                      res.json(availability);
                  } catch (error) {
                      return res
                          .status(500)
                          .json({ message: "Failed to parse availability data" });
                  }
              } finally {
                  connection.release();
              }
          } catch (error) {
              console.error(error);
              res.status(500).json({ message: "Failed to get consultant availability", error: error.message });
          }
      });

      // Health Records (GET and POST)
      app.get("/api/healthrecords", authenticateToken, async (req, res) => {
          const userId = req.user.userId;
          const { userId1 } = req.query; // FIXED: Use query instead of body

          try {
              const pool = getDb();
              const connection = await pool.getConnection();
              try {
                  const [healthrecords] = await connection.query(
                      "SELECT * FROM healthrecords WHERE userId = ?",
                      [userId1 ? userId1 : userId]
                  );

                  res.json(healthrecords);
              } finally {
                  connection.release();
              }
          } catch (error) {
              console.error(error);
              res.status(500).json({ message: "Failed to retrieve health records", error: error.message });
          }
      });

      app.post(
          "/api/healthrecords",
          authenticateToken,
          [
              body("medicalHistory")
                  .notEmpty()
                  .withMessage("Medical history is required"),
              body("ongoingTreatments")
                  .notEmpty()
                  .withMessage("Ongoing treatments are required"),
              body("prescriptions")
                  .notEmpty()
                  .withMessage("Prescriptions are required"),
          ],
          async (req, res) => {
              const errors = validationResult(req);
              if (!errors.isEmpty()) {
                  return res.status(400).json({ errors: errors.array() });
              }

              const userId = req.user.userId;
              const { medicalHistory, ongoingTreatments, prescriptions } = req.body;

              try {
                  const pool = getDb();
                  const connection = await pool.getConnection();
                  try {
                      const [insertResult] = await connection.query(
                          "INSERT INTO healthrecords (userId, medicalHistory, ongoingTreatments, prescriptions) VALUES (?, ?, ?, ?)",
                          [userId, medicalHistory, ongoingTreatments, prescriptions]
                      );
                      const recordId = insertResult.insertId;
                      res.status(201).json({
                          id: recordId,
                          userId,
                          medicalHistory,
                          ongoingTreatments,
                          prescriptions,
                      });
                  } finally {
                      connection.release();
                  }
              } catch (error) {
                  console.error(error);
                  res.status(500).json({ message: "Failed to create health record", error: error.message });
              }
          }
      );

      // Messages (GET and POST)
      app.get("/api/messages", authenticateToken, async (req, res) => {
          const userId = req.user.userId;

          try {
              const pool = getDb();
              const connection = await pool.getConnection();

              try {
                  const [messages] = await connection.query(
                      "SELECT * FROM messages WHERE userId = ?",
                      [userId]
                  );
                  res.json(messages);
              } finally {
                  connection.release();
              }
          } catch (error) {
              console.error(error);
              res.status(500).json({ message: "Failed to retrieve messages", error: error.message });
          }
      });

      app.post(
          "/api/messages",
          authenticateToken,
          [
              body("consultantId")
                  .notEmpty()
                  .withMessage("Consultant ID is required"),
              body("message").notEmpty().withMessage("Message text is required"),
          ],
          async (req, res) => {
              const errors = validationResult(req);
              if (!errors.isEmpty()) {
                  return res.status(400).json({ errors: errors.array() });
              }
              const userId = req.user.userId;
              const { consultantId, message } = req.body;
              const timestamp = new Date().toISOString();
              try {
                  const pool = getDb();
                  const connection = await pool.getConnection();
                  try {
                      const [insertResult] = await connection.query(
                          "INSERT INTO messages (userId, consultantId, message, timestamp) VALUES (?, ?, ?, ?)",
                          [userId, consultantId, message, timestamp]
                      );
                      const messageId = insertResult.insertId;
                      res.status(201).json({
                          id: messageId,
                          userId,
                          consultantId,
                          message,
                          timestamp,
                      });
                  } finally {
                      connection.release();
                  }
              } catch (error) {
                  console.error(error);
                  res.status(500).json({ message: "Failed to create message", error: error.message });
              }
          }
      );

      // Payments (GET)
      app.get("/api/payments", authenticateToken, async (req, res) => {
          const userId = req.user.userId;

          try {
              const pool = getDb();
              const connection = await pool.getConnection();
              try {
                  // Check if the user is an admin
                  const [userRows] = await connection.query(
                      "SELECT role FROM users WHERE id = ?",
                      [userId]
                  );
                  const user = userRows[0];

                  if (!user) {
                      return res.status(404).json({ message: "User not found" });
                  }

                  let payments;
                  if (user.role === "admin") {
                      // If the user is an admin, return all payments
                      [payments] = await connection.query("SELECT * FROM payments");
                  } else {
                      // If the user is not an admin, return only their payments
                      [payments] = await connection.query(
                          "SELECT * FROM payments WHERE userId = ?",
                          [userId]
                      );
                  }
                  res.json(payments);
              } finally {
                  connection.release();
              }
          } catch (error) {
              console.error(error);
              res.status(500).json({ message: "Failed to retrieve payments", error: error.message });
          }
      });

      // Reviews (POST)
      app.post(
          "/api/reviews",
          authenticateToken,
          [
              body("consultantId")
                  .notEmpty()
                  .withMessage("Consultant ID is required"),
              body("rating")
                  .isInt({ min: 1, max: 5 })
                  .withMessage("Rating must be between 1 and 5"),
              body("review").notEmpty().withMessage("Review text is required"),
          ],
          async (req, res) => {
              const errors = validationResult(req);
              if (!errors.isEmpty()) {
                  return res.status(400).json({ errors: errors.array() });
              }
              const userId = req.user.userId;
              const { consultantId, rating, review } = req.body;

              try {
                  const pool = getDb();
                  const connection = await pool.getConnection();
                  try {
                      const [insertResult] = await connection.query(
                          "INSERT INTO reviews (userId, consultantId, rating, review) VALUES (?, ?, ?, ?)",
                          [userId, consultantId, rating, review]
                      );
                      const reviewId = insertResult.insertId;
                      res
                          .status(201)
                          .json({ id: reviewId, userId, consultantId, rating, review });
                  } finally {
                      connection.release();
                  }
              } catch (error) {
                  console.error(error);
                  res.status(500).json({ message: "Failed to create review", error: error.message });
              }
          }
      );

      // Admin Authentication Middleware
      const authenticateAdmin = (req, res, next) => {
          const authHeader = req.headers["authorization"];
          const token = authHeader && authHeader.split(" ")[1];

          if (!token) {
              return res.status(401).json({ message: "Authentication required" });
          }

          jwt.verify(token, process.env.JWT_SECRET || "secret", (err, user) => {
              if (err) {
                  return res
                      .status(403)
                      .json({ message: "Invalid token", error: err.message });
              }
              if (user.role !== "admin") {
                  return res
                      .status(403)
                      .json({ message: "Unauthorized: Admin access required" });
              }
              req.user = user;
              next();
          });
      };

      // Admin - Get All Users
      app.get("/api/admin/users", authenticateAdmin, async (req, res) => {
          try {
              const pool = getDb();
              const connection = await pool.getConnection();
              try {
                  const [users] = await connection.query(
                      "SELECT id, fullName, email, role, isConsultant, bloodGroup, medicalHistory, currentPrescriptions, phone, areasOfExpertise, isApproved, profilePicture FROM users WHERE isConsultant = 0"
                  );
                  res.json(users);
              } finally {
                  connection.release();
              }
          } catch (error) {
              console.error(error);
              res.status(500).json({ message: "Failed to retrieve users", error: error.message });
          }
      });

      // Admin - Get All Consultants
      app.get("/api/admin/consultants", authenticateAdmin, async (req, res) => {
          try {
              const pool = getDb();
              const connection = await pool.getConnection();
              try {
                  const [consultants] = await connection.query(
                      "SELECT * FROM users WHERE isConsultant = 1"
                  );
                  res.json(consultants);
              } finally {
                  connection.release();
              }
          } catch (error) {
              console.error(error);
              res.status(500).json({ message: "Failed to retrieve consultants", error: error.message });
          }
      });

      // Admin - Get All Bookings
      app.get("/api/admin/bookings", authenticateAdmin, async (req, res) => {
          try {
              const pool = getDb();
              const connection = await pool.getConnection();
              try {
                  const [bookings] = await connection.query("SELECT * FROM bookings");
                  res.json(bookings);
              } finally {
                  connection.release();
              }
          } catch (error) {
              console.error(error);
              res.status(500).json({ message: "Failed to retrieve bookings", error: error.message });
          }
      });

      // Contact Form Submission (POST)
      app.post(
          "/api/contact",
          [
              body("name").notEmpty().withMessage("Name is required"),
              body("email").isEmail().withMessage("Invalid email address"),
              body("subject").notEmpty().withMessage("Subject is required"),
              body("message").notEmpty().withMessage("Message is required"),
          ],
          async (req, res) => {
              const errors = validationResult(req);
              if (!errors.isEmpty()) {
                  return res.status(400).json({ errors: errors.array() });
              }

              const { name, email, subject, message } = req.body;

              try {
                  const pool = getDb();
                  const connection = await pool.getConnection();
                  try {
                      await connection.query(
                          "INSERT INTO contacts (name, email, subject, message) VALUES (?, ?, ?, ?)",
                          [name, email, subject, message]
                      );
                      res
                          .status(200)
                          .json({ message: "Contact form submitted successfully" });
                  } finally {
                      connection.release();
                  }
              } catch (error) {
                  console.error(error);
                  res
                      .status(500)
                      .json({ message: "Failed to submit contact form", error: error.message });
              }
          }
      );

      // Consultant Bookings Route
      app.get("/api/consultant/bookings", authenticateToken, async (req, res) => {
          const userId = req.user.userId;
          try {
              const pool = getDb();
              const connection = await pool.getConnection();
              try {
                  // Verify if the user is a consultant
                  const [userRows] = await connection.query(
                      "SELECT isConsultant FROM users WHERE id = ?",
                      [userId]
                  );

                  const user = userRows[0];

                  if (!user || user.isConsultant !== 1) {
                      return res
                          .status(403)
                          .json({ message: "User is not a consultant" });
                  }

                  // Get the consultant's bookings
                  const [bookings] = await connection.query(
                      "SELECT * FROM bookings WHERE consultantId = ?",
                      [userId]
                  );
                  res.json(bookings);
              } finally {
                  connection.release();
              }
          } catch (error) {
              console.error(error);
              res.status(500).json({ message: "Failed to retrieve consultant bookings", error: error.message });
          }
      });

      app.get("/api/getDetails/:bookingId", authenticateToken, async (req, res) => {
          const { bookingId } = req.params;

          // Validate that bookingId is a valid integer
          if (isNaN(bookingId)) {
              return res.status(400).json({ error: "Invalid booking ID" });
          }

          try {
              const pool = getDb();
              const connection = await pool.getConnection();
              try {
                  const [userRows] = await connection.query(
                      `SELECT u.id, u.fullName, u.email, u.password, u.role, u.isConsultant, u.phone,
             u.bloodGroup, u.medicalHistory, u.currentPrescriptions,
             u.areasOfExpertise, u.isApproved, u.profilePicture, u.speciality, u.availability, u.bankAccount, u.qualification, u.bio
           FROM users u
           JOIN bookings b ON u.id = b.userId
           WHERE b.id = ?;`,
                      [bookingId]
                  );

                  const userDetails = userRows[0];

                  if (!userDetails) {
                      return res.status(404).json({ error: "Booking not found" });
                  }
                  // Fetch all health records related to the user
                  const [healthRecords] = await connection.query(
                      `SELECT hr.medicalHistory, hr.ongoingTreatments, hr.prescriptions
               FROM healthrecords hr
               WHERE hr.userId = ?;`,
                      [userDetails.id]
                  );
                  // Return user details along with their health records
                  res.json({
                      user: userDetails,
                      healthRecords: healthRecords || [], // Ensure an empty array if no records found
                  });
              } finally {
                  connection.release();
              }
          } catch (error) {
              console.error(error);
              res.status(500).json({ message: "Failed to retrieve user details", error: error.message });
          }
      });

      // Consultant approval route for admin
      app.put(
          "/api/admin/consultants/:userId/approve",
          authenticateAdmin,
          async (req, res) => {
              const { userId } = req.params;

              try {
                  const pool = getDb();
                  const connection = await pool.getConnection();
                  try {
                      const [updateResult] = await connection.query(
                          "UPDATE users SET isApproved = 1 WHERE id = ?",
                          [userId]
                      );
                      if (updateResult.affectedRows === 0) {
                          return res.status(404).json({ message: "Consultant not found" });
                      }
                      res.json({ message: "Consultant approved successfully" });
                  } finally {
                      connection.release();
                  }
              } catch (error) {
                  console.error(error);
                  res.status(500).json({ message: "Failed to approve consultant", error: error.message });
              }
          }
      );

            // Consultant decline route for admin
            app.put(
                "/api/admin/consultants/:userId/reject",
                authenticateAdmin,
                async (req, res) => {
                    const { userId } = req.params;
      
                    try {
                        const pool = getDb();
                        const connection = await pool.getConnection();
                        try {
                            const [updateResult] = await connection.query(
                                "UPDATE users SET isApproved = 2 WHERE id = ?",
                                [userId]
                            );
                            if (updateResult.affectedRows === 0) {
                                return res.status(404).json({ message: "Consultant not found" });
                            }
                            res.json({ message: "Consultant approved successfully" });
                        } finally {
                            connection.release();
                        }
                    } catch (error) {
                        console.error(error);
                        res.status(500).json({ message: "Failed to approve consultant", error: error.message });
                    }
                }
            );

      // Route to get all bookings for a specific consultant ID
      app.get(
          "/api/consultants/:consultantId/bookings",
          authenticateToken,
          async (req, res) => {
              const { consultantId } = req.params;
              const userId = req.user.userId;

              try {
                  const pool = getDb();
                  const connection = await pool.getConnection();
                  try {
                      // Verify if the requesting user is the consultant or admin
                      const [consultantRows] = await connection.query(
                          "SELECT isConsultant, id, isApproved FROM users WHERE id = ?",
                          [consultantId]
                      );
                      const consultant = consultantRows[0];

                      if (!consultant || consultant.isConsultant !== 1) {
                          return res
                              .status(404)
                              .json({
                                  message: "Consultant not found or is not a consultant",
                              });
                      }
                      if (!consultant || consultant.isApproved !== 1) {
                          return res
                              .status(404)
                              .json({
                                  message:
                                      "We are currently reviewing your profile as part of our standard security procedures.\n\n Rest assured, this is simply a routine check to ensure the integrity of our platform and maintain the trust of all our valued customers.\n\n Your account will be activated shortly after the review process is complete.\n\n Thank you for your patience and understanding.",
                              });
                      }

                      //Check If consultant or Admin is requesting bookings
                      const [userRows] = await connection.query(
                          "SELECT role FROM users WHERE id = ?",
                          [userId]
                      );

                      const user = userRows[0];

                      if (!user) {
                          return res.status(404).json({ message: "User not found" });
                      }
                      // Get all bookings for the consultant
                      const [bookings] = await connection.query(
                          "SELECT * FROM bookings WHERE consultantId = ?",
                          [consultantId]
                      );

                      res.json(bookings);
                  } finally {
                      connection.release();
                  }
              } catch (error) {
                  console.error(error);
                  res.status(500).json({ message: "Failed to retrieve consultant bookings", error: error.message });
              }
          }
      );

      app.use(
          "/uploads",
          express.static(path.join(__dirname, "uploads"), {
              setHeaders: (res, path, stat) => {
                  res.set("Access-Control-Allow-Origin", "*"); // Allow any origin
                  res.set("Cross-Origin-Resource-Policy", "cross-origin"); // Allow cross-origin resource access
              },
          })
      );

      // Start the server
      app.listen(port, () => {
          console.log(`Server is running on port ${port}`);
      });
  })
  .catch((error) => {
      console.error("Failed to initialize database:", error);
  });
// File: frontend/App.jsx
import React, { useState, useEffect, useCallback } from 'react';
import { BrowserRouter as Router, Route, Routes, Link, Navigate } from 'react-router-dom';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Homepage from './pages/Homepage';
import AboutUs from './pages/AboutUs';
import ContactUs from './pages/ContactUs';
import PrivacyPolicy from './pages/PrivacyPolicy';
import TermsOfService from './pages/TermsOfService';
import NotFound from './pages/NotFound';
import Login from './pages/Login';
import Register from './pages/Register';
import UserProfile from './pages/UserProfile';
import ConsultantProfile from './pages/ConsultantProfile';
import ConsultantSearch from './pages/ConsultantSearch';
import ConsultantDetails from './pages/ConsultantDetails';
import Booking from './pages/Booking';
import ConsultationDashboard from './pages/ConsultationDashboard';
import HealthRecords from './pages/HealthRecords';
import Messaging from './pages/Messaging';
import Payment from './pages/Payment';
import Review from './pages/Review';
import AdminDashboard from './pages/AdminDashboard';
import ConsultantDashboardPage from './pages/ConsultantDashboardPage';
import './App.css';
import './index.css'; //Importing index.css to solve global styling issues

function App() {
  // Use state to manage login status, user role, and consultant status
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [userRole, setUserRole] = useState('guest');
  const [isConsultant, setIsConsultant] = useState(() => { // Initialize with boolean
    const storedValue = localStorage.getItem('isConsultant');
    return storedValue === 'true'; // Convert string to boolean
  });
  const [isApproved, setIsApproved] = useState(false);

  // Function to update state from localStorage
  const updateStateFromLocalStorage = useCallback(() => {
    setIsLoggedIn(localStorage.getItem('token') !== null);
    setUserRole(localStorage.getItem('userRole') || 'guest');
    setIsConsultant(localStorage.getItem('isConsultant') === 'true');
    setIsApproved(localStorage.getItem('isApproved') === 'true');
  }, []);

  useEffect(() => {
    // Call the function on component mount
    updateStateFromLocalStorage();

    // Set up a listener for localStorage changes
    window.addEventListener('storage', updateStateFromLocalStorage);

    // Clean up the listener when the component unmounts
    return () => {
      window.removeEventListener('storage', updateStateFromLocalStorage);
    };
  }, [updateStateFromLocalStorage]);

  // Callback function to update login state and user info
  const handleLoginSuccess = useCallback((role, isConsultant, isApproved) => {
    localStorage.setItem('userRole', role);
    localStorage.setItem('isConsultant', String(isConsultant));
    localStorage.setItem('isApproved', String(isApproved));
    setIsLoggedIn(true);
    setUserRole(role);
    setIsConsultant(Boolean(isConsultant === 1 || isConsultant === true)); // Ensure boolean value
    setIsApproved(Boolean(isApproved));   // Ensure boolean value
  }, []);

  // Callback function to handle logout
  const handleLogout = useCallback(() => {
    localStorage.removeItem('token');
    localStorage.removeItem('userRole');
    localStorage.removeItem('isConsultant');
    localStorage.removeItem('isApproved');
    setIsLoggedIn(false);
    setUserRole('guest');
    setIsConsultant(false);
    setIsApproved(false);
  }, []);

  return (
    <Router>
      <Navbar isLoggedIn={isLoggedIn} userRole={userRole} isConsultant={isConsultant} handleLogout={handleLogout} />
      <div className="min-h-screen">
        <Routes>
          <Route path="/" element={<Homepage />} />
          <Route path="/aboutus" element={<AboutUs />} />
          <Route path="/contactus" element={<ContactUs />} />
          <Route path="/privacypolicy" element={<PrivacyPolicy />} />
          <Route path="/termsofservice" element={<TermsOfService />} />
          <Route path="/login" element={<Login onLoginSuccess={handleLoginSuccess} />} />
          <Route path="/register" element={<Register />} />
          <Route path="/userprofile" element={<UserProfile />} />

          {/* User routes, require login and user role */}
          {isLoggedIn && userRole === 'user' && (
            <>
              <Route path="/consultantsearch" element={<ConsultantSearch />} />
              <Route path="/consultantdetails/:id" element={<ConsultantDetails />} />
              <Route path="/booking/:id" element={<Booking />} />
              <Route path="/consultationdashboard" element={<ConsultationDashboard />} />
              <Route path="/healthrecords" element={<HealthRecords />} />
              <Route path="/messaging" element={<Messaging />} />
              <Route path="/payment" element={<Payment />} />
              <Route path="/review/:id" element={<Review />} />
            </>
          )}

          {/* Consultant profile and dashboard only accessible if logged in as consultant, approved,  Navigate to home if not approved*/}
          {isLoggedIn && userRole === 'consultant' ? (
            isApproved ? (
              <>
                <Route path="/consultantprofile" element={<ConsultantProfile />} />
                <Route path="/consultantdashboard" element={<ConsultantDashboardPage />} />
              </>
            ) : (
              <Route path="/consultantprofile" element={<Navigate to="/" />} />
            )
          ) : null}

          {/* Admin dashboard route, require login and admin role */}
          {isLoggedIn && userRole === 'admin' ? (
            <Route path="/admindashboard" element={<AdminDashboard />} />
          ) : (
            // Redirect to login page if not an admin or not logged in
            <Route path="/admindashboard" element={<Navigate to="/login" />} />
          )}

          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
      <Footer />
    </Router>
  );
}

export default App;
// File: frontend/ConsultantDashboardPage.jsx
import React, { useState, useEffect } from 'react';
import { getConsultantBookingsById } from '../utils/api'; // Import the missing function
import { Calendar } from 'lucide-react';
import { Navigate } from 'react-router-dom';

const ConsultantDashboardPage = () => {
  const [bookings, setBookings] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [consultantId, setConsultantId] = useState(null);

  useEffect(() => {
    // Function to fetch bookings
    const fetchBookings = async () => {
      setLoading(true);
      setError('');
      try {
        const token = localStorage.getItem('token');
        const storedConsultantId = localStorage.getItem('userId');
        const userRole = localStorage.getItem('userRole');

        if (!token) {
          setError('Authentication required. Please login.');
          return;
        }

        if (userRole !== 'consultant') {
          setError('You are not authorized to access this page.');
          return;
        }


        // Check if storedConsultantId exists and is a valid number
        if (!storedConsultantId || isNaN(parseInt(storedConsultantId, 10))) {
          setError('Consultant ID not found or invalid. Please login again.');
          return;
        }

        // Convert storedConsultantId to a number
        const parsedConsultantId = parseInt(storedConsultantId, 10);

        //Verify consultantId with userId
        const userId = localStorage.getItem('userId');
        if(parsedConsultantId !== parseInt(userId)){
          setError('Unauthorized access: Consultant ID does not match logged-in user.');
          return;
        }

        setConsultantId(parsedConsultantId); // Set the consultantId state


        const data = await getConsultantBookingsById(token, parsedConsultantId);
        setBookings(data);
      } catch (err) {
        setError('Failed to retrieve bookings. Please try again.');
        console.error('Failed to fetch bookings:', err);
      } finally {
        setLoading(false);
      }
    };

    // Call fetchBookings only if consultantId is valid
    if (localStorage.getItem('userId') && localStorage.getItem('userRole') === 'consultant') {
      fetchBookings();
    } else {
      setError('You must be logged in as a Consultant to access this page');
    }

  }, []);

  return (
    <div className="min-h-screen bg-gray-100 p-10">
      <section className="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8">
        <h2 className="text-3xl font-semibold text-gray-800 text-center mb-6">
          Consultant Dashboard
        </h2>
        {loading && <p className="text-center">Loading bookings...</p>}
        {error && <p className="text-center text-red-500">{error}</p>}
        {!loading && !error && bookings.length === 0 && (
          <p className="text-center">No bookings found.</p>
        )}
        {!loading && !error && bookings.length > 0 && (
          <ul className="divide-y divide-gray-200">
            {bookings.map((booking) => (
              <li key={booking.id} className="py-4">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-lg font-semibold text-gray-700">
                      <Calendar className="inline-block h-5 w-5 mr-1" />
                      {new Date(booking.date).toLocaleDateString()}
                    </p>
                    <p className="text-gray-600">
                      Time: {booking.time}
                    </p>
                    <p className="text-gray-600">
                      Status: {booking.status}
                    </p>
                  </div>
                </div>
              </li>
            ))}
          </ul>
        )}
      </section>
    </div>
  );
};

export default ConsultantDashboardPage;
// File: frontend/Login.jsx
import React, { useState, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { Mail, Lock } from 'lucide-react';
import { loginUser } from '../utils/api';

const Login = ({ onLoginSuccess }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');

    if (!email || !password) {
      setError('Please fill in all fields.');
      return;
    }

    try {
      const data = await loginUser(email, password);
      localStorage.setItem('token', data.token);
      onLoginSuccess(data.role, data.isConsultant, data.isApproved);

      if (data.role === 'consultant') {
        navigate('/consultantdashboard');
      } else if (data.role === 'admin') {
        navigate('/admindashboard');
      }
      else {
        navigate('/consultationdashboard');
      }
    } catch (err) {
      setError('Invalid email or password. Please try again.');
      console.error('Login failed:', err);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full">
        <h2 className="text-3xl font-semibold text-gray-800 text-center mb-6">
          Login
        </h2>

        {error && (
          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span className="block sm:inline">{error}</span>
          </div>
        )}

        <form onSubmit={handleSubmit}>
          <div className="mb-4">
            <label htmlFor="email" className="block text-gray-700 text-sm font-bold mb-2">
              Email
            </label>
            <div className="relative">
              <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <Mail className="w-5 h-5 text-gray-500" />
              </div>
              <input
                type="email"
                id="email"
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline pl-10"
                placeholder="Email Address"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>
          </div>

          <div className="mb-6">
            <label htmlFor="password" className="block text-gray-700 text-sm font-bold mb-2">
              Password
            </label>
            <div className="relative">
              <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <Lock className="w-5 h-5 text-gray-500" />
              </div>
              <input
                type="password"
                id="password"
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline pl-10"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>
          </div>

          <div className="flex items-center justify-between">
            <button
              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full focus:outline-none focus:shadow-outline"
              type="submit"
            >
              Login
            </button>
            <a className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
              Forgot Password?
            </a>
          </div>
        </form>
      </div>
    </div>
  );
};

export default Login;
// File: frontend/Register.jsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Mail, Lock, User } from 'lucide-react';
import { registerUser } from '../utils/api';

const Register = () => {
  const [fullName, setFullName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [role, setRole] = useState('user'); // Default role
  const [bloodGroup, setBloodGroup] = useState('');
  const [medicalHistory, setMedicalHistory] = useState('');
  const [currentPrescriptions, setCurrentPrescriptions] = useState('');
  const [contactInformation, setContactInformation] = useState('');
  const [areasOfExpertise, setAreasOfExpertise] = useState('');
  const [error, setError] = useState('');
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');

    if (!fullName || !email || !password || !confirmPassword || !role) {
      setError('Please fill in all required fields.');
      return;
    }

    if (password !== confirmPassword) {
      setError('Passwords do not match.');
      return;
    }

    try {
      await registerUser(fullName, email, password, role, bloodGroup, medicalHistory, currentPrescriptions, contactInformation, areasOfExpertise);
      navigate('/login');
    } catch (err) {
      setError('Registration failed. Please try again.');
      console.error('Registration failed:', err);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full">
        <h2 className="text-3xl font-semibold text-gray-800 text-center mb-6">
          Register
        </h2>

        {error && (
          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span className="block sm:inline">{error}</span>
          </div>
        )}

        <form onSubmit={handleSubmit}>
          <div className="mb-4">
            <label htmlFor="role" className="block text-gray-700 text-sm font-bold mb-2">
              Registering as:
            </label>
            <select
              id="role"
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              value={role}
              onChange={(e) => setRole(e.target.value)}
            >
              <option value="user">Looking for a Consultant</option>
              <option value="consultant">A Consultant</option>
                <option value="admin">Admin</option>
            </select>
          </div>
          <div className="mb-4">
            <label htmlFor="fullName" className="block text-gray-700 text-sm font-bold mb-2">
              Full Name
            </label>
            <div className="relative">
              <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <User className="w-5 h-5 text-gray-500" />
              </div>
              <input
                type="text"
                id="fullName"
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline pl-10"
                placeholder="Full Name"
                value={fullName}
                onChange={(e) => setFullName(e.target.value)}
              />
            </div>
          </div>

          <div className="mb-4">
            <label htmlFor="email" className="block text-gray-700 text-sm font-bold mb-2">
              Email
            </label>
            <div className="relative">
              <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <Mail className="w-5 h-5 text-gray-500" />
              </div>
              <input
                type="email"
                id="email"
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline pl-10"
                placeholder="Email Address"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>
          </div>

          <div className="mb-4">
            <label htmlFor="password" className="block text-gray-700 text-sm font-bold mb-2">
              Password
            </label>
            <div className="relative">
              <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <Lock className="w-5 h-5 text-gray-500" />
              </div>
              <input
                type="password"
                id="password"
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline pl-10"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>
          </div>

          <div className="mb-6">
            <label htmlFor="confirmPassword" className="block text-gray-700 text-sm font-bold mb-2">
              Confirm Password
            </label>
            <div className="relative">
              <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <Lock className="w-5 h-5 text-gray-500" />
              </div>
              <input
                type="password"
                id="confirmPassword"
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline pl-10"
                placeholder="Confirm Password"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
              />
            </div>
          </div>

          {role === 'user' && (
            <>
              <div className="mb-4">
                <label htmlFor="bloodGroup" className="block text-gray-700 text-sm font-bold mb-2">
                  Blood Group
                </label>
                <input
                  type="text"
                  id="bloodGroup"
                  className="shadow appearance-none border rounded w-full py-2 px-3text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  placeholder="Blood Group"
                  value={bloodGroup}
                  onChange={(e) => setBloodGroup(e.target.value)}
                />
              </div>

              <div className="mb-4">
                <label htmlFor="medicalHistory" className="block text-gray-700 text-sm font-bold mb-2">
                  Medical History
                </label>
                <textarea
                  id="medicalHistory"
                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  placeholder="Medical History"
                  value={medicalHistory}
                  onChange={(e) => setMedicalHistory(e.target.value)}
                  rows="3"
                />
              </div>

              <div className="mb-4">
                <label htmlFor="currentPrescriptions" className="block text-gray-700 text-sm font-bold mb-2">
                  Current Prescriptions
                </label>
                <textarea
                  id="currentPrescriptions"
                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  placeholder="Current Prescriptions"
                  value={currentPrescriptions}
                  onChange={(e) => setCurrentPrescriptions(e.target.value)}
                  rows="3"
                />
              </div>
            </>
          )}

          {role === 'consultant' && (
            <>
              <div className="mb-4">
                <label htmlFor="contactInformation" className="block text-gray-700 text-sm font-bold mb-2">
                  Contact Information
                </label>
                <input
                  type="text"
                  id="contactInformation"
                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  placeholder="Contact Information"
                  value={contactInformation}
                  onChange={(e) => setContactInformation(e.target.value)}
                />
              </div>

              <div className="mb-4">
                <label htmlFor="areasOfExpertise" className="block text-gray-700 text-sm font-bold mb-2">
                  Areas of Expertise
                </label>
                <textarea
                  id="areasOfExpertise"
                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  placeholder="Areas of Expertise"
                  value={areasOfExpertise}
                  onChange={(e) => setAreasOfExpertise(e.target.value)}
                  rows="3"
                />
              </div>
            </>
          )}

          <div className="flex items-center justify-between">
            <button
              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full focus:outline-none focus:shadow-outline"
              type="submit"
            >
              Register
            </button>
            <a className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="/login">
              Already have an account?
            </a>
          </div>
        </form>
      </div>
    </div>
  );
};

export default Register;

// File: frontend/eslint.config.js
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'

export default [
  { ignores: ['dist'] },
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
]

// File: frontend/index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

// File: frontend/src/App.css
/* removed css */
// File: frontend/src/App.jsx
import React, { useState, useEffect, useCallback } from 'react';
import { BrowserRouter as Router, Route, Routes, Link, Navigate } from 'react-router-dom';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Homepage from './pages/Homepage';
import AboutUs from './pages/AboutUs';
import ContactUs from './pages/ContactUs';
import PrivacyPolicy from './pages/PrivacyPolicy';
import TermsOfService from './pages/TermsOfService';
import NotFound from './pages/NotFound';
import Login from './pages/Login';
import Register from './pages/Register.jsx'; // Corrected import path and extension
import UserProfile from './pages/UserProfile.jsx'; // Corrected import path and extension
import ConsultantProfile from './pages/ConsultantProfile';
import ConsultantSearch from './pages/ConsultantSearch';
import ConsultantDetails from './pages/ConsultantDetails';
import Booking from './pages/Booking';
import ConsultationDashboard from './pages/ConsultationDashboard';
import HealthRecords from './pages/HealthRecords';
// import Messaging from './pages/Messaging';
import Payment from './pages/Payment';
import Review from './pages/Review';
import AdminDashboard from './pages/AdminDashboard.jsx'; // Corrected import path and extension
import ConsultantDashboardPage from './pages/ConsultantDashboardPage.jsx'; // Corrected import path and extension
import UserPayments from './pages/UserPayments.jsx';
import ConsultantEarnings from './pages/ConsultantEarnings.jsx';
import MessagingPage from './pages/MessagingPage.jsx'
import './App.css';
import './index.css'; //Importing index.css to solve global styling issues

function App() {
    // Use state to manage login status, user role, and consultant status
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    const [userRole, setUserRole] = useState('guest');
    const [isConsultant, setIsConsultant] = useState(() => { // Initialize with boolean
        const storedValue = localStorage.getItem('isConsultant');
        return storedValue === 'true'; // Convert string to boolean
    });
    const [isApproved, setIsApproved] = useState(false);
    const [profilePicture, setProfilePicture] = useState(''); // State to store profile picture

    // Function to update state from localStorage
    const updateStateFromLocalStorage = useCallback(() => {
        setIsLoggedIn(localStorage.getItem('token') !== null);
        setUserRole(localStorage.getItem('userRole') || 'guest');
        setIsConsultant(localStorage.getItem('isConsultant') === 'true');
        setIsApproved(localStorage.getItem('isApproved') === 'true');
    }, []);

    useEffect(() => {
        // Call the function on component mount
        updateStateFromLocalStorage();

        // Set up a listener for localStorage changes
        window.addEventListener('storage', updateStateFromLocalStorage);

        // Clean up the listener when the component unmounts
        return () => {
            window.removeEventListener('storage', updateStateFromLocalStorage);
        };
    }, [updateStateFromLocalStorage]);

    // Callback function to update login state and user info
    const handleLoginSuccess = useCallback((role, isConsultant, isApproved, profilePicture) => {
        setIsLoggedIn(true);
        setUserRole(role);
        setIsConsultant(isConsultant); // Ensure boolean value
        setIsApproved(Boolean(isApproved));   // Ensure boolean value
        setProfilePicture(profilePicture);
    }, []);

    // Callback function to handle logout
    const handleLogout = useCallback(() => {
        localStorage.removeItem('token');
        localStorage.removeItem('userRole');
        localStorage.removeItem('isConsultant');
        localStorage.removeItem('isApproved');
        setIsLoggedIn(false);
        setUserRole('guest');
        setIsConsultant(false);
        setIsApproved(false);
        setProfilePicture(''); // Clear profile picture on logout
        window.location.href = "/"
    }, []);

    return (
        <Router>
            <Navbar isLoggedIn={isLoggedIn} userRole={userRole} isConsultant={isConsultant} handleLogout={handleLogout} profilePicture={profilePicture} />
            <div className="min-h-screen">
                <Routes>
                    <Route path="/" element={<Homepage />} />
                    <Route path="/aboutus" element={<AboutUs />} />
                    <Route path="/contactus" element={<ContactUs />} />
                    <Route path="/privacypolicy" element={<PrivacyPolicy />} />
                    <Route path="/termsofservice" element={<TermsOfService />} />
                    <Route path="/login" element={<Login setIsLoggedIn={setIsLoggedIn} setUserRole={setUserRole} setIsConsultant={setIsConsultant} setIsApproved={setIsApproved} onLoginSuccess={handleLoginSuccess} setProfilePicture={setProfilePicture} />} />
                    <Route path="/register" element={<Register />} />
                    <Route path="/userprofile" element={<UserProfile setProfilePicture={setProfilePicture} />} />
                    <Route path="/consultantsearch" element={<ConsultantSearch />} />
                    <Route path="/consultantdetails/:id" element={<ConsultantDetails />} />
                    <Route path="/booking/:id" element={<Booking />} />
                    <Route path="/consultationdashboard" element={<ConsultationDashboard />} />
                    <Route path="/healthrecords" element={<HealthRecords />} />
                  <Route path="/messages" element={<MessagingPage/>}/>
                    <Route path="/userpayments" element={<UserPayments />} />
                    <Route path="/consultantearnings" element={<ConsultantEarnings/>}/>
                    <Route path="/review/:id" element={<Review />} />
                     <Route path="/admindashboard" element={<AdminDashboard />} />
                            <Route path="/consultantprofile" element={<ConsultantProfile />} />
                            <Route path="/consultantdashboard" element={<ConsultantDashboardPage />} />
                         <Route path="/admindashboard" element={<Navigate to="/login" />} />
                    <Route path="*" element={<NotFound />} />
                </Routes>
            </div>
                <Footer />
        </Router>
    );
}

export default App;
// File: frontend/src/components/Footer.jsx

import { Home, Phone, Mail, Link } from 'lucide-react';
import { Link as RouterLink } from 'react-router-dom';

const Footer = () => {
  return (
    <footer className="bg-gradient-to-r from-blue-200 to-purple-200 py-12">
      <div className="max-w-6xl mx-auto text-gray-800">
        <div className="md:flex md:justify-between">
          <div className="mb-6 md:mb-0">
            <h3 className="text-lg font-semibold mb-4">About Us</h3>
            <p className="text-sm">
              Your trusted health consultant platform, connecting you with qualified professionals for personalized advice and care.
            </p>
          </div>

          <div className="mb-6 md:mb-0">
            <h3 className="text-lg font-semibold mb-4">Contact Us</h3>
            <p className="text-sm flex items-center mb-2">
              <Phone className="mr-2 h-4 w-4" />
              +1 (555) 123-4567
            </p>
            <p className="text-sm flex items-center mb-2">
              <Mail className="mr-2 h-4 w-4" />
              info@healthconsultant.com
            </p>
            <p className="text-sm flex items-center">
              <Home className="mr-2 h-4 w-4" />
              123 Health Street, Cityville
            </p>
          </div>

          <div>
            <h3 className="text-lg font-semibold mb-4">Quick Links</h3>
            <ul className="list-none p-0">
              <li className="mb-2">
                <RouterLink to="/" className="text-sm hover:text-blue-600 flex items-center">
                  <Home className="mr-2 h-4 w-4" />
                  Home
                </RouterLink>
              </li>
              <li className="mb-2">
                <RouterLink to="/aboutus" className="text-sm hover:text-blue-600 flex items-center">
                  About Us
                </RouterLink>
              </li>
              <li>
                <RouterLink to="/contactus" className="text-sm hover:text-blue-600 flex items-center">
                  Contact Us
                </RouterLink>
              </li>
            </ul>
          </div>
        </div>

        <div className="mt-8 text-center text-sm">
          <p>&copy; {new Date().getFullYear()} Health Consultant. All rights reserved.</p>
          <p>
            <RouterLink to="/privacypolicy" className="hover:text-blue-600 mr-4">
              Privacy Policy
            </RouterLink>
            <RouterLink to="/termsofservice" className="hover:text-blue-600">
              Terms of Service
            </RouterLink>
          </p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
// File: frontend/src/components/Navbar.jsx
import { useState } from "react";
import { Link, useLocation } from "react-router-dom";
import {
  Home,
  Phone,
  User,
  LogOut,
  Calendar,
  File,
  User as Tool,
  CreditCard,
  MessageCircle,
  LayoutDashboard,
  DollarSign,
  Search,
  Info
} from "lucide-react";

const Navbar = ({ isLoggedIn, userRole, handleLogout }) => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const location = useLocation(); // Get the current path

  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);

  return (
    <nav className="bg-gradient-to-r from-blue-200 to-purple-200 shadow-md sticky top-0 z-50">
      <div className="mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <div className="flex items-center">
            <Link to="/" className="flex-shrink-0">
              <img
                className="h-10 w-auto"
                src="https://placehold.co/40x40"
                alt="Logo"
              />
            </Link>

            {/* Desktop Menu */}
            <div className="hidden md:block ml-10">
              <div className="flex items-center space-x-6">
                <NavItem to="/" icon={<Home />} text="Home" location={location} />
                <NavItem to="/aboutus" text="About Us" icon={<Info />} location={location} />
                {/* <NavItem to="/contactus" icon={<Phone />} text="Contact Us" location={location} /> */}

                {isLoggedIn && userRole === "user" && (
                  <>
                    <NavItem to="/consultantsearch" text="Find a Consultant" icon={<Search />} location={location} />
                    <NavItem to="/consultationdashboard" icon={<Calendar />} text="My Appointments" location={location} />
                    <NavItem to="/healthrecords" icon={<File />} text="Health Records" location={location} />
                    <NavItem to="/userpayments" icon={<CreditCard />} text="Payments" location={location} />
                  </>
                )}

                {isLoggedIn && userRole === "consultant" && (
                  <>
                    <NavItem to="/consultantprofile" icon={<Tool />} text="My Profile" location={location} />
                    <NavItem to="/consultantdashboard" icon={<LayoutDashboard />} text="Dashboard" location={location} />
                    <NavItem to="/consultantearnings" icon={<DollarSign />} text="Earnings" location={location} />
                  </>
                )}

                {isLoggedIn && userRole === "admin" && (
                  <NavItem to="/admindashboard" icon={<LayoutDashboard />} text="Admin Dashboard" location={location} />
                )}
              </div>
            </div>
          </div>

          {/* User Profile / Logout */}
          <div className="hidden md:flex items-center space-x-4 ml-14">
            {isLoggedIn ? (
              <>
                {userRole !== "admin" && (<><NavItem to="/userprofile" icon={<User />} text="Profile" location={location} />
                <NavItem to="/messages" icon={<MessageCircle />} text="Chat" location={location} /></>)}
                <button
                  onClick={handleLogout}
                  className="text-white bg-red-500 hover:bg-red-600 px-4 py-2 rounded-md flex items-center transition"
                >
                  <LogOut className="h-5 w-5" />
                </button>
              </>
            ) : (
              <>
                <NavItem to="/login" text="Login" location={location} />
                <NavItem to="/register" text="Register" location={location} />
              </>
            )}
          </div>

          {/* Mobile Menu Button */}
          <div className="md:hidden -mr-2">
            <button onClick={toggleMenu} className="hover:text-gray-300 focus:outline-none">
              <svg
                className={`h-6 w-6 ${isMenuOpen ? "hidden" : "block"}`}
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
              <svg
                className={`h-6 w-6 ${isMenuOpen ? "block" : "hidden"}`}
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      <div className={`${isMenuOpen ? "block" : "hidden"} md:hidden bg-blue-700`}>
        <div className="px-4 py-3 space-y-2">
          <NavItem to="/" icon={<Home />} text="Home" location={location} mobile />
          <NavItem to="/aboutus" text="About Us" location={location} mobile />
          {/* <NavItem to="/contactus" icon={<Phone />} text="Contact Us" location={location} mobile /> */}

          {isLoggedIn && userRole === "user" && (
            <>
              <NavItem to="/consultantsearch" text="Find a Consultant" location={location} mobile />
              <NavItem to="/consultationdashboard" icon={<Calendar />} text="My Appointments" location={location} mobile />
              <NavItem to="/healthrecords" icon={<File />} text="Health Records" location={location} mobile />
              <NavItem to="/userpayments" icon={<CreditCard />} text="Payments" location={location} mobile />
              <NavItem to="/messages" icon={<MessageCircle />} text="Chat" location={location} mobile />
            </>
          )}

          {isLoggedIn && userRole === "consultant" && (
            <>
              <NavItem to="/consultantprofile" icon={<Tool />} text="My Profile" location={location} mobile />
              <NavItem to="/consultantdashboard" icon={<LayoutDashboard />} text="Dashboard" location={location} mobile />
              <NavItem to="/consultantearnings" icon={<DollarSign />} text="Earnings" location={location} mobile />
              <NavItem to="/messages" icon={<MessageCircle />} text="Chat" location={location} mobile />
            </>
          )}

          {isLoggedIn && userRole === "admin" && (
            <NavItem to="/admindashboard" icon={<LayoutDashboard />} text="Admin Dashboard" location={location} mobile />
          )}

          {isLoggedIn ? (
            <button
              onClick={handleLogout}
              className="w-full text-left bg-red-500 hover:bg-red-600 px-4 py-2 rounded-md flex items-center transition"
            >
              <LogOut className="h-5 w-5 mr-2" />
              Logout
            </button>
          ) : (
            <>
              <NavItem to="/login" text="Login" location={location} mobile />
              <NavItem to="/register" text="Register" location={location} mobile />
            </>
          )}
        </div>
      </div>
    </nav>
  );
};

// Reusable NavItem Component with active state styling
const NavItem = ({ to, icon, text, location, mobile }) => {
  const isActive = location.pathname === to;

  return (
    <Link
      to={to}
      className={`flex items-center space-x-2 px-4 py-2 rounded-md text-sm font-medium transition flex-row text-nowrap 
      ${isActive ? "underline scale-105 hover:scale-108" : "hover:scale-105"}
      ${mobile ? "hover:bg-blue-500" : ""}`}
    >
      {icon && <span className="h-5 w-5 mr-3">{icon}</span>}
      <span>{text}</span>
    </Link>
  );
};

export default Navbar;

// File: frontend/src/components/RegisterForm.jsx
import React, { useState } from 'react';
import {
    TextField,
    Grid,
    FormControl,
    InputLabel,
    Typography,
    Box,
    Switch,
    FormGroup,
    FormControlLabel,
    Select,
    MenuItem,
    Input,
    List,
    ListItem,
    ListItemText,
    Checkbox,
    ListItemSecondaryAction,
    IconButton,
    Button,
} from '@mui/material';
import { TimePicker } from '@mui/x-date-pickers';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 200,
    },
  },
};

const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

const RegisterForm = ({ formData, setFormData, role, certificateData, setCertificateData }) => {
    const handleInputChange = (e) => {
        const newForm = { ...formData, [e.target.name]: e.target.value }
        setFormData(newForm);
    };

    const [selectedDays, setSelectedDays] = useState([]);

    const handleDayToggle = (day) => {
        if(!day) return
        setSelectedDays(prevSelectedDays => {
            if (prevSelectedDays.includes(day)) {
                return prevSelectedDays.filter(d => d !== day);
            } else {
                return [...prevSelectedDays, day];
            }
        });
    };

    const [startTime, setStartTime] = useState(null);
    const [endTime, setEndTime] = useState(null);

    const handleTimeChange = (newTime, setter) => {
        setter(newTime);
    };

    const updateAvailability = () => {
        if((startTime >= endTime) && startTime && endTime && selectedDays.length > 0){
            alert("Start time must be less then end time")
            setSelectedDays([]);
            return
        }
        else{

            let availabilityData = {};
            selectedDays.forEach(day => {
                availabilityData[day] = {
                    startTime: (startTime) ? startTime.format('HH:mm') : null,
                    endTime: (endTime) ? endTime.format('HH:mm') : null,
                };
            });
            setFormData({ ...formData, availability: JSON.stringify(availabilityData) });
        }
    };

            const validateForm = (formData) => {
                let errors = {};
            
                if (!formData.name || formData.name.trim() === '') {
                    return "Name is required";
                }
            
                if (!formData.email || formData.email.trim() === '') {
                    return "Email is required";
                } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
                    return "Invalid email format";
                }
            
                if (!formData.password || formData.password.length < 6) {
                    return "Password must be at least 6 characters long";
                }
            
                if (role === 'consultant') {
                    if (!formData.bio || formData.bio.trim() === '') {
                        return "Bio is required";
                    }
            
                    if (!formData.qualification || formData.qualification.trim() === '') {
                        return "Qualification is required";
                    }
            
                    if (!formData.areasOfExpertise || formData.areasOfExpertise.trim() === '') {
                        return "Areas of Expertise are required";
                    }
            
                    if (!formData.speciality || formData.speciality.trim() === '') {
                        return "Speciality is required";
                    }
            
                    try {
                        const availability = JSON.parse(formData.availability);
                        if (Object.keys(availability).length === 0) {
                            return "At least one availability slot must be selected";
                        }
                    } catch {
                        errors.availability = "Invalid availability format";
                    }
                }
            
                if (role === 'user') {
                    if (!formData.bloodGroup || formData.bloodGroup.trim() === '') {
                        return "Blood Group is required";
                    }
            
                    if (!formData.medicalHistory || formData.medicalHistory.trim() === '') {
                        return "Medical History is required";
                    }
            
                    if (!formData.currentPrescriptions || formData.currentPrescriptions.trim() === '') {
                        return "Current Prescriptions are required";
                    }
                }
            
                return null;
            };

    React.useEffect(() => {
        updateAvailability();
    }, [startTime, endTime, selectedDays])

    const handleCertificateChange = (index, e) => {
        const newCertificateData = [...certificateData];
        newCertificateData[index] = { ...newCertificateData[index], file: e.target.files[0] };
        setCertificateData(newCertificateData);
    };

    const handleCertificateNameChange = (index, e) => {
        const newCertificateData = [...certificateData];
        newCertificateData[index] = { ...newCertificateData[index], name: e.target.value };
        setCertificateData(newCertificateData);
    };

    const addCertificateField = () => {
        setCertificateData([...certificateData, { file: null, name: '' }]);
    };

    const removeCertificateField = (index) => {
        const newCertificateData = [...certificateData];
        newCertificateData.splice(index, 1);
        setCertificateData(newCertificateData);
    };

    return (
        <>
            {/* Basic Information */}
            <Grid container spacing={2}>

                {role === 'consultant' && (
                    <>
                        <Grid item xs={12}>
                            <TextField
                                fullWidth
                                label="Bio"
                                name="bio"
                                multiline
                                rows={4}
                                value={formData.bio}
                                onChange={handleInputChange}
                            />
                        </Grid>
                        <Grid item xs={12}>
                            <TextField
                                fullWidth
                                label="Qualification"
                                name="qualification"
                                value={formData.qualification}
                                onChange={handleInputChange}
                            />
                        </Grid>
                        <Grid item xs={12}>
                            <TextField
                                fullWidth
                                label="Areas of Expertise"
                                name="areasOfExpertise"
                                value={formData.areasOfExpertise}
                                onChange={handleInputChange}
                            />
                        </Grid>
                        <Grid item xs={12}>
                            <TextField
                                fullWidth
                                label="Speciality"
                                name="speciality"
                                value={formData.speciality}
                                onChange={handleInputChange}
                            />
                        </Grid>
                        <Grid item xs={12} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                            Certificates
                        </Grid>

                        {certificateData.map((certificate, index) => (
                            <Grid container spacing={2} key={index} item xs={12}>
                                <Grid item xs={6}>
                                    <TextField
                                        fullWidth
                                        label={`Certificate ${index + 1} Name`}
                                        value={certificate.name}
                                        onChange={(e) => handleCertificateNameChange(index, e)}
                                    />
                                </Grid>
                                <Grid item xs={6}>
                                    <TextField
                                        fullWidth
                                        type="file"
                                        label={`Certificate ${index + 1} File`}
                                        InputLabelProps={{ shrink: true }}
                                        onChange={(e) => handleCertificateChange(index, e)}
                                    />
                                </Grid>
                                <Grid item xs={12}>
                                    <Button variant="contained" color="error" onClick={() => removeCertificateField(index)}>
                                        Remove
                                    </Button>
                                </Grid>
                            </Grid>
                        ))}

                        <Grid item xs={12}>
                            <Button variant="contained" color="primary" onClick={addCertificateField}>
                                Add Certificate
                            </Button>
                        </Grid>

                        <Grid item xs={12} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                                Availability
                            </Grid>
                        <Grid item xs={12}>
                            <LocalizationProvider dateAdapter={AdapterDayjs}>
                                 <TimePicker
                                      label="Start Time"
                                      value={startTime}
                                      onChange={(newTime) => handleTimeChange(newTime, setStartTime)}
                                       ampm={false}
                                       minutesStep={60}
                                       renderInput={(params) => <TextField {...params} fullWidth />}
                                  />
                            </LocalizationProvider>
                        </Grid>
                         <Grid item xs={12}>
                            <LocalizationProvider dateAdapter={AdapterDayjs}>
                                 <TimePicker
                                      label="End Time"
                                      value={endTime}
                                      onChange={(newTime) => handleTimeChange(newTime, setEndTime)}
                                       ampm={false}
                                       minutesStep={60}
                                       renderInput={(params) => <TextField {...params} fullWidth />}
                                  />
                            </LocalizationProvider>
                        </Grid>
                        <Grid item xs={12} >
                             <Typography component="legend">Select Days</Typography>
                            <FormGroup row>
                                {daysOfWeek.map((day) => (
                                    <FormControlLabel
                                        key={day}
                                        control={<Switch checked={selectedDays.includes(day)} onChange={() => handleDayToggle(day)} name={day} />}
                                        label={day}
                                    />
                                ))}
                            </FormGroup>
                        </Grid>
                    </>
                )}
                {role === 'user' && (
                    <>
                        <Grid item xs={12} sm={6}>
                            <TextField
                                fullWidth
                                label="Blood Group"
                                name="bloodGroup"
                                value={formData.bloodGroup}
                                onChange={handleInputChange}
                            />
                        </Grid>
                        <Grid item xs={12}>
                            <TextField
                                fullWidth
                                label="Medical History"
                                name="medicalHistory"
                                multiline
                                rows={4}
                                value={formData.medicalHistory}
                                onChange={handleInputChange}
                            />
                        </Grid>
                        <Grid item xs={12}>
                            <TextField
                                fullWidth
                                label="Current Prescriptions"
                                name="currentPrescriptions"
                                multiline
                                rows={4}
                                value={formData.currentPrescriptions}
                                onChange={handleInputChange}
                            />
                        </Grid>
                    </>
                )}
            </Grid>
        </>
    );
};

export default RegisterForm;
// File: frontend/src/index.css
@import 'tailwindcss';

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f7f7f7;
  color: #333;
  min-width: 100%; /* Ensure body takes full width */
  overflow-x: hidden; /* Prevent horizontal scroll */
}

html {
    min-width: 100%;
    overflow-x: hidden;
}

#root {
  min-width: 100%;
}
// File: frontend/src/main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

// File: frontend/src/pages/AboutUs.jsx
import React from 'react';

const AboutUs = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-200 to-purple-200 p-10">
      {/* Company Overview */}
      <section className="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8 mb-12">
        <h2 className="text-3xl font-semibold text-gray-800 text-center mb-6">
          Our Mission
        </h2>
        <p className="text-gray-700 leading-relaxed text-lg">
          At Health Consultant, our mission is to connect individuals with the
          best healthcare professionals, providing personalized and accessible
          health advice. We believe in empowering our users to take control of
          their health journey with reliable and expert guidance.
        </p>
      </section>

      {/* Team Section */}
      <section className="max-w-6xl mx-auto">
        <h2 className="text-3xl font-semibold text-gray-800 text-center mb-8">
          Meet Our Team
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {/* Team Member 1 */}
          <div className="bg-white rounded-2xl shadow-md p-6 hover:shadow-lg transition-shadow duration-300">
            <img
              className="rounded-full w-32 h-32 mx-auto mb-4"
              src="https://placehold.co/128x128"
              alt="Team Member"
            />
            <h3 className="text-xl font-semibold text-gray-700 text-center mb-2">
              Dr. Emily Carter
            </h3>
            <p className="text-gray-600 text-center">
              CEO &amp; Founder
            </p>
            <p className="text-gray-600 text-center mt-2">
              "Passionate about improving healthcare access for everyone."
            </p>
          </div>

          {/* Team Member 2 */}
          <div className="bg-white rounded-2xl shadow-md p-6 hover:shadow-lg transition-shadow duration-300">
            <img
              className="rounded-full w-32 h-32 mx-auto mb-4"
              src="https://placehold.co/128x128"
              alt="Team Member"
            />
            <h3 className="text-xl font-semibold text-gray-700 text-center mb-2">
              Dr. David Miller
            </h3>
            <p className="text-gray-600 text-center">
              Chief Medical Officer
            </p>
            <p className="text-gray-600 text-center mt-2">
              "Committed to providing the highest quality medical advice."
            </p>
          </div>

          {/* Team Member 3 */}
          <div className="bg-white rounded-2xl shadow-md p-6 hover:shadow-lg transition-shadow duration-300">
            <img
              className="rounded-full w-32 h-32 mx-auto mb-4"
              src="https://placehold.co/128x128"
              alt="Team Member"
            />
            <h3 className="text-xl font-semibold text-gray-700 text-center mb-2">
              Sarah Johnson
            </h3>
            <p className="text-gray-600 text-center">
              Head of User Experience
            </p>
            <p className="text-gray-600 text-center mt-2">
              "Dedicated to creating a user-friendly and seamless platform."
            </p>
          </div>
        </div>
      </section>
    </div>
  );
};

export default AboutUs;
// File: frontend/src/pages/AdminDashboard.jsx
import React, { useState, useEffect } from "react";
import {
  getAdminUsers,
  getAdminConsultants,
  getAdminBookings,
  approveConsultant,
  declineConsultant,
  getHealthRecords,
  getConsultantDocuments,
  getPayments, // Import the getPayments API
} from "../utils/api";
import { Calendar, Eye, X, Check } from "lucide-react";

import {
  User,
  Calendar as CalendarIcon,
  User as Tool,
  CheckCircle,
} from "lucide-react";
import { PieChart, Pie, Cell, ResponsiveContainer, Legend } from "recharts"; // Import Recharts components
import axios from "axios";

const AdminDashboard = () => {
  const [users, setUsers] = useState([]);
  const [consultants, setConsultants] = useState([]);
  const [bookings, setBookings] = useState([]);
  const [healthRecords, setHealthRecords] = useState({});
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [payments, setPayments] = useState([]);
  const [earnings, setEarnings] = useState(0);

  const [unapprovedConsultants, setUnapprovedConsultants] = useState([]);

  // New state variables for document popup
  const [selectedConsultantDocuments, setSelectedConsultantDocuments] =
    useState(null);
  const [isDocumentPopupOpen, setIsDocumentPopupOpen] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      setError("");

      try {
        const token = localStorage.getItem("token");
        if (!token) {
          setError("Authentication required. Please login as an admin.");
          return;
        }

        const usersData = await getAdminUsers(token);
        setUsers(usersData);

        const consultantsData = await getAdminConsultants(token);
        setConsultants(consultantsData);

        const bookingsData = await getAdminBookings(token);
        setBookings(bookingsData);

        // Load Payments
        try {
          const paymentsData = await getPayments(token);
          setPayments(paymentsData);
          console.log(paymentsData)
          const totalEarnings = calculateEarnings(paymentsData);
          setEarnings(totalEarnings)
        } catch (paymentError) {
          setError("Failed to retrieve payments.");
          console.error("Failed to fetch payments:", paymentError);
        }
      } catch (err) {
        setError(
          "Failed to retrieve data. Please ensure you are logged in as admin and try again."
        );
        console.error("Failed to fetch admin data:", err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  useEffect(() => {
    // Filter unapproved consultants after initial data load
    if (consultants.length > 0) {
      setUnapprovedConsultants(
        consultants.filter((consultant) => (consultant.isApproved == 0))
      );
    }
  }, [consultants]); // Re-run when consultants change

  const handleApproveConsultant = async (userId) => {
    setLoading(true);
    try {
      const token = localStorage.getItem("token");
      if (!token) {
        setError("Authentication required. Please login as an admin.");
        return;
      }

      await approveConsultant(token, userId);

      // Update the consultants state to reflect the approval
      setConsultants((prevConsultants) =>
        prevConsultants.map((consultant) =>
          consultant.id === userId
            ? { ...consultant, isApproved: 1 }
            : consultant
        )
      );
      setUnapprovedConsultants((prevConsultants) =>
        prevConsultants.filter((consultant) => consultant.id !== userId)
      );
    } catch (err) {
      setError("Failed to approve consultant. Please try again.");
      console.error("Failed to approve consultant:", err);
    } finally {
      setLoading(false);
    }
  };

  const handleDeclineConsultant = async (userId) => {
    setLoading(true);
    try {
      const token = localStorage.getItem("token");
      if (!token) {
        setError("Authentication required. Please login as an admin.");
        return;
      }

      await declineConsultant(token, userId);

      // Update the consultants state to reflect the approval
      setConsultants((prevConsultants) =>
        prevConsultants.map((consultant) =>
          consultant.id === userId
            ? { ...consultant, isApproved: 2 }
            : consultant
        )
      );
      setUnapprovedConsultants((prevConsultants) =>
        prevConsultants.filter((consultant) => consultant.id !== userId)
      );
    } catch (err) {
      setError("Failed to approve consultant. Please try again.");
      console.error("Failed to approve consultant:", err);
    } finally {
      setLoading(false);
    }
  };

  const getDetails = async (userId) => {
    try {
      const token = localStorage.getItem("token");
      if (!token) {
        setError("Authentication required. Please login.");
        return;
      }

      const data = await getHealthRecords(token, userId);
      setHealthRecords(data[0]);
      console.log(data[0]);
    } catch (err) {
      setError("Failed to retrieve health records. Please try again.");
      setHealthRecords({});
      console.error("Failed to fetch health records:", err);
    }
  };

  const handleOpenDocuments = async (consultantId) => {
    try {
      const token = localStorage.getItem("token");
      if (!token) {
        setError("Authentication required. Please login as an admin.");
        return;
      }

      const documentsData = await getConsultantDocuments(token, consultantId);
      setSelectedConsultantDocuments(documentsData.certificates);
      setIsDocumentPopupOpen(true);
    } catch (err) {
      setError("Failed to retrieve consultant documents. Please try again.");
      console.error("Failed to fetch consultant documents:", err);
    }
  };

  const handleCloseDocuments = () => {
    setIsDocumentPopupOpen(false);
    setSelectedConsultantDocuments(null);
  };

  // --- Start New Functionalities ---
  // Data for Pie Chart
  const userTypeData = [
    { name: "Users", value: users.filter((user) => !user.isConsultant).length },
    { name: "Consultants", value: consultants.length },
  ];

  const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];

  // Calculate Earnings
  const calculateEarnings = (paymentsData) => {
    let earnings = 0;
    paymentsData.forEach((payment) => {
      earnings += 25; // Base amount

      if (payment.status === "canceled") { // Assuming a 'status' field
          earnings += payment.amount * 0.05; // 5% of payment
      }
    });
    return earnings;
  };

  // --- End New Functionalities ---

  return (
    <div className="min-h-screen bg-gray-100 p-10">
      {healthRecords?.userId ? (
        <div
          className="fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center min-w-screen z-[99999]"
          style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
          onClick={() => setHealthRecords({})}
        >
          <div className="rounded-lg bg-gradient-to-r from-blue-500 via-teal-400 to-green-300 p-1">
            <div className="flex justify-center items-center">
              <div className="max-w-6xl bg-white rounded-lg shadow-2xl p-8 space-y-6 transform transition-all hover:shadow-xl w-[40vw]">
                {/* Profile Section */}
                <div className="flex items-center space-x-6">
                  <img
                    src={`http://localhost:5555/${
                      users.find((user) => user.id === healthRecords.userId)
                        ?.profilePicture
                    }`}
                    alt="Profile Picture"
                    className="w-24 h-24 rounded-full object-cover shadow-md"
                  />
                  <div>
                    <h2 className="text-3xl font-semibold text-gray-800">
                      {
                        users.filter(
                          (user) => user.id === healthRecords.userId
                        )[0]?.fullName
                      }
                    </h2>
                    <p className="text-sm text-gray-500">
                      {
                        users.filter(
                          (user) => user.id === healthRecords.userId
                        )[0]?.email
                      }
                      <br />
                      {
                        users.filter(
                          (user) => user.id === healthRecords.userId
                        )[0]?.phone
                      }
                    </p>
                    <p className="text-sm text-gray-600">
                      Blood Group:{" "}
                      <span className="font-bold">
                        {
                          users.filter(
                            (user) => user.id === healthRecords.userId
                          )[0]?.bloodGroup
                        }
                      </span>
                    </p>
                  </div>
                </div>
                {/* Current Prescriptions Section */}
                <div>
                  <h3 className="text-2xl font-semibold text-gray-700">
                    Current Prescriptions
                  </h3>
                  <p className="text-gray-600">
                    {
                      users.filter(
                        (user) => user.id === healthRecords.userId
                      )[0]?.currentPrescriptions
                    }
                  </p>
                </div>

                {/* Medical History Section */}
                <div className="space-y-4">
                  <h3 className="text-2xl font-semibold text-gray-700">
                    Medical History
                  </h3>
                  <p className="text-gray-600">
                    {
                      users.filter(
                        (user) => user.id === healthRecords.userId
                      )[0]?.medicalHistory
                    }
                  </p>
                </div>

                {/* Health Records Section */}
                <div className="space-y-4">
                  <h3 className="text-2xl font-semibold text-gray-700">
                    Health Records
                  </h3>
                  {/* Check if healthRecords exist */}
                  {healthRecords && healthRecords.length > 0 ? (
                    <div className="space-y-6 overflow-auto h-[250px]">
                      {/* Loop through each health record */}
                      {healthRecords.map((record, index) => (
                        <div
                          key={index}
                          className="bg-gray-50 p-4 rounded-lg shadow-md"
                        >
                          <h4 className="text-lg font-medium text-gray-600">
                            Medical History
                          </h4>
                          <p className="text-gray-500">
                            {record.medicalHistory ||
                              "No medical history available"}
                          </p>

                          <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                              <h4 className="text-lg font-medium text-gray-600">
                                Ongoing Treatments
                              </h4>
                              <p className="text-gray-500">
                                {record.ongoingTreatments ||
                                  "No ongoing treatments"}
                              </p>
                            </div>

                            <div>
                              <h4 className="text-lg font-medium text-gray-600">
                                Prescriptions
                              </h4>
                              <p className="text-gray-500">
                                {record.prescriptions ||
                                  "No current prescriptions"}
                              </p>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <p className="text-gray-500">
                      No health records available.
                    </p>
                  )}
                </div>

                {/* Health Medical History Section
          <div>
            <h3 className="text-2xl font-semibold text-gray-700">
              Health Medical History
            </h3>
            <p className="text-gray-600">{details.user.medicalHistory}</p>
          </div> */}
              </div>
            </div>
          </div>
          </div>
        ) : (
        healthRecords == undefined && (
          <div
            className="fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center min-w-screen z-[9999]"
            style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
            onClick={() => setHealthRecords({})}
          >
            <div className="rounded-lg bg-gradient-to-r from-blue-500 via-teal-400 to-green-300 p-1">
              <div className="flex justify-center items-center">
                <div className="max-w-6xl bg-white rounded-lg shadow-2xl p-8 space-y-6 transform transition-all hover:shadow-xl w-[40vw]">
                  No Records Found
                </div>
              </div>
            </div>
          </div>
        )
      )}

      <section className="max-w-8xl mx-auto">
        <h2 className="text-3xl font-semibold text-gray-800 text-center mb-8">
          Admin Dashboard
        </h2>

        {loading && <p className="text-center">Loading data...</p>}
        {error && <p className="text-center text-red-500">{error}</p>}

        {!loading && !error && (
          <>
            {/* Dashboard Summary */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
              {/* User Statistics */}
              <div className="bg-white rounded-2xl shadow-xl p-6">
                <h3 className="text-xl font-semibold text-gray-800 mb-2">
                  User Statistics
                </h3>
                <ResponsiveContainer width="100%" height={230}>
                  <PieChart>
                    <Pie
                      data={userTypeData}
                      dataKey="value"
                      nameKey="name"
                      cx="50%"
                      cy="50%"
                      outerRadius={80}
                      fill="#8884d8"
                      label
                    >
                      {userTypeData.map((entry, index) => (
                        <Cell
                          key={`cell-${index}`}
                          fill={COLORS[index % COLORS.length]}
                        />
                      ))}
                    </Pie>
                    <Legend />
                  </PieChart>
                </ResponsiveContainer>
              </div>

              {/* Earnings/Profit Section */}
              <div className="bg-gradient-to-r from-green-400 to-blue-500 rounded-2xl shadow-xl p-6 text-white flex flex-col justify-between">
                <div>
                  <h3 className="text-xl font-semibold mb-2">
                    Total Earnings
                  </h3>
                  <p className="text-6xl font-bold">
                  ₹{earnings.toFixed(2)}
                  </p>
                </div>
                <div>
                  {/* Add more earnings-related info here if needed */}
                  <p className="text-sm opacity-70">
                    Since last month:{" "}
                    <span className="font-semibold">+15%</span>
                  </p>
                </div>
              </div>

              {/* Bookings Statistics Card */}
              <div className="bg-white rounded-2xl shadow-xl p-6">
                <h3 className="text-xl font-semibold text-gray-800 mb-2">
                  Booking Statistics
                </h3>
                <div className="flex flex-col justify-between h-full">
                  <div>
                    <p className="text-gray-600 mb-1">
                      Total Bookings:{" "}
                      <span className="font-semibold">{bookings.length}</span>
                    </p>
                    <p className="text-gray-600 mb-1">
                      Approved Bookings:{" "}
                      <span className="font-semibold">
                        {bookings.filter(
                          (booking) => booking.status === "accepted"
                        ).length}
                      </span>
                    </p>
                    <p className="text-gray-600 mb-1">
                      Pending Bookings:{" "}
                      <span className="font-semibold">
                        {bookings.filter(
                          (booking) => booking.status === "pending"
                        ).length}
                      </span>
                    </p>
                    <p className="text-gray-600">
                      Cancelled Bookings:{" "}
                      <span className="font-semibold">
                        {bookings.filter(
                          (booking) => booking.status === "canceled"
                        ).length}
                      </span>
                    </p>
                  </div>
                  {/* Optional: Add a small chart or graph here */}
                  {/* Example: <ResponsiveContainer width="100%" height={50}>...</ResponsiveContainer> */}
                </div>
              </div>
            </div>

            {/* Consultant Approval Section */}
            <div className="bg-white rounded-2xl shadow-xl p-6 mb-8">
              <h3 className="text-2xl font-semibold text-gray-800 mb-4">
                Consultant Approvals
              </h3>
              {unapprovedConsultants.length === 0 ? (
                <p className="text-gray-500">No consultants awaiting approval.</p>
              ) : (
                <div className="overflow-x-auto">
                  <table className="min-w-full leading-normal">
                    <thead>
                      <tr className="bg-gray-100 font-semibold">
                        <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                          ID
                        </th>
                        <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                          Name
                        </th>
                        <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                          Email
                        </th>
                        <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                          Actions
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {unapprovedConsultants.map((consultant) => (
                        <tr key={consultant.id}>
                          <td className="px-5 py-3 border-b border-gray-200 text-sm">{consultant.id}</td>
                          <td className="px-5 py-3 border-b border-gray-200 text-sm">{consultant.fullName}</td>
                          <td className="px-5 py-3 border-b border-gray-200 text-sm">{consultant.email}</td>
                          <td className="px-5 py-3 border-b border-gray-200 text-sm">
                            <div className="flex flex-row space-x-3">
                            <button
                              className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                              onClick={() => handleApproveConsultant(consultant.id)}
                            >
                              Approve
                            </button>
                            <button
                              className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                              onClick={() => handleDeclineConsultant(consultant.id)}
                            >
                              Reject
                            </button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>

            {/* User Management */}
            <div className="bg-white rounded-2xl shadow-xl p-6 mb-8">
              <h3 className="text-2xl font-semibold text-gray-800 mb-4">
                User Management
              </h3>
              <div className="overflow-x-auto">
                <table className="min-w-full leading-normal">
                  <thead>
                    <tr className="bg-gray-100 font-semibold">
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        <User className="inline-block h-4 w-4 mr-1" />
                        ID
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Full Name
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Email
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Role
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Health Records
                      </th>
                      {/* <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        isApproved
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Actions
                      </th> */}
                    </tr>
                  </thead>
                  <tbody>
                    {users.map((user) => (
                      <tr key={user.id}>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {user.id}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {user.fullName}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {user.email}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {user.role}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {
                            <button
                              className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                              onClick={() => getDetails(user.id)}
                            >
                              Get Records
                            </button>
                          }
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>

            {/* Consultant Management */}
            <div className="bg-white rounded-2xl shadow-xl p-6 mb-8">
              <h3 className="text-2xl font-semibold text-gray-800 mb-4">
                Consultant Management
              </h3>
              <div className="overflow-x-auto">
                <table className="min-w-full leading-normal">
                  <thead>
                    <tr className="bg-gray-100 font-semibold">
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        <Tool className="inline-block h-4 w-4 mr-1" />
                        ID
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Name
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Email
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Bio
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Expertise
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Speciality
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Qualification
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Bank Account
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Documents
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        isApproved
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Actions
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {consultants.map((consultant) => (
                      <tr key={consultant.id}>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {consultant.id}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {consultant.fullName}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {consultant.email}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {consultant.bio?.length > 10
                            ? consultant.bio.slice(0, 10) + "..."
                            : consultant.bio}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {consultant.areasOfExpertise}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {consultant.speciality}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {consultant.qualification}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {consultant.bankAccount}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          <button
                            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                            onClick={() => handleOpenDocuments(consultant.id)}
                          >
                            View Documents
                          </button>
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {consultant.isApproved == 1 ? "Yes" : "No"}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                        <button
                              className={`text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline ${consultant.isApproved == 1 ? "bg-red-500 hover:bg-red-700" : "bg-green-500 hover:bg-green-700"}`}
                              onClick={() => consultant.isApproved == 1 ? handleDeclineConsultant(consultant.id) : handleApproveConsultant(consultant.id)}
                            >
                              {consultant.isApproved == 1 ? <X/> : <Check/>}
                            </button>
                            </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>

            {/* Consultation Monitoring */}
            <div className="bg-white rounded-2xl shadow-xl p-6">
              <h3 className="text-2xl font-semibold text-gray-800 mb-4">
                Consultation Monitoring
              </h3>
              <div className="overflow-x-auto">
                <table className="min-w-full leading-normal">
                  <thead>
                    <tr className="bg-gray-100 font-semibold">
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        <CalendarIcon className="inline-block h-4 w-4 mr-1" />
                        ID
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        User ID
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Consultant ID
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Date
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Time
                      </th>
                      <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Status
                      </th>
                      {/* <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs uppercase">
                        Actions
                      </th> */}
                    </tr>
                  </thead>
                  <tbody>
                    {bookings.map((booking) => (
                      <tr key={booking.id}>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {booking.id}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {booking.userId}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {booking.consultantId}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {booking.date}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {booking.time}
                        </td>
                        <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {booking.status}
                        </td>
                        {/* <td className="px-5 py-3 border-b border-gray-200 text-sm">
                          {booking.status === 'pending' && (
                            <button
                              className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                              onClick={() => handleAcceptBooking(booking.id)}
                            >
                              Accept
                            </button>
                          )}
                        </td> */}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </>
        )}
      </section>

      {/* Document Popup */}
      {isDocumentPopupOpen && (
        <div
          className="fixed top-0 left-0 w-full h-full bg-opacity-75 flex justify-center items-center"
          style={{ backgroundColor: "rgba(0,0,0,0.4)" }}
        >
          <div className="bg-white rounded-lg p-8 shadow-xl">
            <h2 className="text-2xl font-semibold text-gray-800 mb-4">
              Consultant Documents
            </h2>
            {selectedConsultantDocuments ? (
              <ul>
                {selectedConsultantDocuments.map((document, index) => (
                  <li key={index} className="mb-2">
                    <a
                      href={`http://localhost:5555/${document.path}`} // Adjust URL if needed
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-blue-500 hover:text-blue-700"
                    >
                      {document.name}
                    </a>
                  </li>
                ))}
              </ul>
            ) : (
              <p>No documents found.</p>
            )}
            <button
              className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded mt-4"
              onClick={handleCloseDocuments}
            >
              Close
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default AdminDashboard;
// File: frontend/src/pages/Booking.jsx
import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { getConsultantById, createBooking, getConsultantBookingsById } from '../utils/api';
import dayjs from 'dayjs';
import 'dayjs/locale/en';
import { styled } from '@mui/system';
import {
    Container,
    Typography,
    Grid,
    TextField,
    Button,
    FormControl,
    InputLabel,
    Select,
    MenuItem,
    Alert,
    CircularProgress,
    Card,
    CardContent,
    Box,
    List,
    ListItem,
    ListItemText,
} from '@mui/material';
import { CreditCard, Calendar, Clock, CheckCircle } from 'lucide-react';

// 🌈 Styled Components with Glassmorphism & Gradients
const PageContainer = styled(Container)({
    minHeight: '100vh',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    background: '',
    padding: '20px',
});

const GlassCard = styled(Card)({
    background: 'linear-gradient(135deg,rgba(93, 165, 247, 0.63) 0%,rgba(102, 37, 252, 0.67) 100%)',
    backdropFilter: 'blur(12px)',
    borderRadius: '16px',
    padding: '24px',
    color: '#fff',
    boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)',
});

const GradientButton = styled(Button)({
    background: 'linear-gradient(135deg, #6a11cb 30%, #2575fc 90%)',
    color: '#fff',
    padding: '10px 20px',
    fontWeight: 'bold',
    textTransform: 'none',
    transition: 'all 0.3s ease-in-out',
    borderRadius: '8px',
    '&:hover': {
        background: 'linear-gradient(135deg, #2575fc 30%, #6a11cb 90%)',
        transform: 'scale(1.05)',
    },
});

// Custom Input Styling
const StyledTextField = styled(TextField)({
    '& label.Mui-focused': { color: '#fff' },
    '& .MuiOutlinedInput-root': {
        color: '#fff',
        '& fieldset': { borderColor: '#ddd' },
        '&:hover fieldset': { borderColor: '#6a11cb' },
        '&.Mui-focused fieldset': { borderColor: '#2575fc' },
    },
});

// 🔥 Booking Component
const Booking = () => {
    const { id } = useParams();
    const [consultant, setConsultant] = useState(null);
    const [selectedDate, setSelectedDate] = useState(dayjs());
    const [time, setTime] = useState('');
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const [bookingSuccess, setBookingSuccess] = useState(false);
    const [cardNumber, setCardNumber] = useState('');
    const [expiryDate, setExpiryDate] = useState('');
    const [cvv, setCvv] = useState('');
    const navigate = useNavigate();

    const [availableTimes, setAvailableTimes] = useState({}); // dynamic times
    const [bookings, setBookings] = useState([]);


    useEffect(() => {
        const fetchConsultant = async () => {
            setLoading(true);
            setError('');
            try {
                const data = await getConsultantById(id);
                setConsultant(data);
            } catch (err) {
                setError('Failed to retrieve consultant details. Please try again.');
                setConsultant(null);
                console.error('Failed to fetch consultant:', err);
            } finally {
                setLoading(false);
            }
        };
        fetchConsultant();
    }, [id]);

    useEffect(() => {
      const fetchConsultantAvailability = async () => {
          try {
              const token = localStorage.getItem('token');
              const data = await getConsultantBookingsById(token, id);
              setBookings(data);
              console.log(data)
  
              const response = await fetch(
                  `http://localhost:5555/api/consultant/${id}/availability`,
                  {
                      method: "GET",
                      headers: {
                          "Content-Type": "application/json",
                      },
                  }
              );
              if (!response.ok) {
                  throw new Error(`HTTP error! Status: ${response.status}`);
              }
              const data_available = await response.json();
              setAvailableTimes(data_available);
              console.log("Available Times:", data_available);  // CHECKPOINT
          } catch (parseError) {
              setError("Failed to load data from the server");
              console.error(parseError);
          }
      };
      fetchConsultantAvailability();
  }, [id, selectedDate]);

  const isSlotBooked = (appointments, selectedDate, selectedTime) => appointments.some(app => app.date === selectedDate && app.time === selectedTime && (app.status == "accepted" || app.status == "pending"));

    const handleSubmit = async (e) => {
        console.log(bookings)
        e.preventDefault();
        setLoading(true);
        setError('');
        setBookingSuccess(false);
        if(isSlotBooked(bookings, selectedDate.format('YYYY-MM-DD'), time) || selectedDate === new Date().toISOString().split('T')[0]){
            alert("Time slot already booked select another")
            setLoading(false);
            return
        }


        try {
            const token = localStorage.getItem('token');
            if (!token) {
                setError('Authentication required. Please login.');
                return;
            }

            await createBooking(token, id, selectedDate.format('YYYY-MM-DD'), time);
            setBookingSuccess(true);
            setTimeout(() => {
                navigate('/consultationdashboard');
            }, 2000);
        } catch (err) {
            setError('Failed to create booking. Please try again.');
            console.error('Booking creation failed:', err);
        } finally {
            setLoading(false);
        }
    };
  

    const generateTimeSlots = () => {
      if (!consultant || !availableTimes) return [];
  
      const bookingDay = selectedDate.format('dddd'); // Get full day name (e.g., "Monday")
      console.log("Booking Day:", bookingDay);
  
      if (!availableTimes[bookingDay]) {
          console.log("No availability for this day.");
          return [];
      }
  
      const { startTime, endTime } = availableTimes[bookingDay];
      if (!startTime || !endTime) {
          console.log("Invalid time range.");
          return [];
      }
  
      // Create proper dayjs objects with date and time
      const start = dayjs(`${selectedDate.format('YYYY-MM-DD')} ${startTime}`, "YYYY-MM-DD HH:mm");
      const end = dayjs(`${selectedDate.format('YYYY-MM-DD')} ${endTime}`, "YYYY-MM-DD HH:mm");
  
      if (!start.isValid() || !end.isValid()) {
          console.log("Invalid dayjs objects for time parsing.");
          return [];
      }
  
      let currentTime = start;
      const timeSlots = [];
  
      while (currentTime.isBefore(end)) {
          const slotStart = currentTime.format('HH:mm');
          currentTime = currentTime.add(1, 'hour'); // Increment by 1 hour
          const slotEnd = currentTime.format('HH:mm');
  
          if (currentTime.isAfter(end)) break; // Prevent adding a slot that exceeds the end time
  
          timeSlots.push(`${slotStart}-${slotEnd}`);
      }
  
      console.log("Generated Time Slots:", timeSlots);

      const newTimeSlots = timeSlots.filter(
        (slot) => !bookings.some(app => app.time === slot)
    );
      return newTimeSlots;
  };
  

    if (loading) {
        return <PageContainer><CircularProgress /></PageContainer>;
    }

    if (error) {
        return <PageContainer><Alert severity="error">{error}</Alert></PageContainer>;
    }

    return (
        <PageContainer>
            <GlassCard>
                <Typography variant="h4" gutterBottom align="center" sx={{ fontWeight: 'bold' }}>
                    Book Appointment with Dr. {consultant?.consultant?.fullName}
                </Typography>

                <Grid container spacing={3}>
                    {/* Booking Form */}
                    <Grid item xs={12} md={6}>
                        <form onSubmit={handleSubmit}>
                            <Typography variant="h6" gutterBottom>Booking Details</Typography>

                            <StyledTextField
                                label="Select Date"
                                type="date"
                                fullWidth
                                required
                                value={selectedDate.format('YYYY-MM-DD')}
                                onChange={(e) => setSelectedDate(dayjs(e.target.value))}
                                InputLabelProps={{ shrink: true }}
                                sx={{ mb: 2 }}
                            />

                            <FormControl fullWidth sx={{ mb: 2 }}>
                                <InputLabel style={{ color: '#fff' }}>Select Time Slot</InputLabel>
                                <Select
                                    value={time}
                                    onChange={(e) => setTime(e.target.value)}
                                    style={{ color: '#fff' }}
                                >
                                    {generateTimeSlots().map((slot) => (
                                        <MenuItem key={slot} value={slot}>
                                            {slot}
                                        </MenuItem>
                                    ))}
                                </Select>
                            </FormControl>

                            <Typography variant="h6" gutterBottom>Payment Details</Typography>

                            <StyledTextField label="Card Number" fullWidth required sx={{ mb: 2 }} value={cardNumber} onChange={(e) => setCardNumber(e.target.value)} />
                            <StyledTextField label="Expiry Date (MM/YY)" fullWidth required sx={{ mb: 2 }} value={expiryDate} onChange={(e) => setExpiryDate(e.target.value)} />
                            <StyledTextField label="CVV" fullWidth required sx={{ mb: 2 }} value={cvv} onChange={(e) => setCvv(e.target.value)} />

                            <GradientButton type="submit" fullWidth startIcon={<CheckCircle />}>
                                Confirm Booking
                            </GradientButton>

                            {bookingSuccess && <Alert severity="success" sx={{ mt: 2 }}>Booking Successful! Redirecting...</Alert>}
                        </form>
                    </Grid>

                    {/* Billing Summary */}
                    <Grid item xs={12} md={6}>
                        <Typography variant="h6" gutterBottom>Billing Summary</Typography>
                        <List>
                            <ListItem>
                                <ListItemText primary="Consultation Fee" />
                                <Typography>₹{consultant?.consultant.consultingFees}</Typography>
                            </ListItem>
                            <ListItem>
                                <ListItemText primary="Platform Fee" />
                                <Typography>₹25</Typography>
                            </ListItem>
                            <ListItem>
                                <ListItemText primary="Tax (18%)" />
                                <Typography>₹{(Number(consultant?.consultant.consultingFees) * 18/100).toFixed(2)}</Typography>
                            </ListItem>
                            <ListItem>
                                <ListItemText primary="Total" sx={{ fontWeight: 'bold' }} />
                                <Typography sx={{ fontWeight: 'bold' }}>₹{(Number(consultant?.consultant.consultingFees) + Number(consultant?.consultant.consultingFees) * 18/100 + 25).toFixed(2)}</Typography>
                            </ListItem>
                        </List>
                    </Grid>
                </Grid>
            </GlassCard>
        </PageContainer>
    );
};

export default Booking;

// File: frontend/src/pages/ConsultantDashboardPage.jsx
import React, { useState, useEffect } from "react";
import {
  getConsultantBookingsById,
  acceptBooking,
  rejectBooking,
  cancelBooking,
  get_details,
} from "../utils/api"; // Import the missing function
import { Calendar, Eye, X, Check } from "lucide-react";
import { Navigate } from "react-router-dom";

const ConsultantDashboardPage = () => {
  const [bookings, setBookings] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [details, setDetails] = useState(null);
  const [consultantId, setConsultantId] = useState(null); // Ensure it's null initially
  const [isApproved, setIsApproved] = useState(false);

  const handleAcceptBooking = async (bookingId) => {
    try {
      const token = localStorage.getItem("token");
      if (!token) {
        setError("Authentication required. Please login as an admin.");
        return;
      }

      await acceptBooking(token, bookingId);

      // Update the bookings state to reflect the accepted booking
      setBookings(
        bookings.map((booking) =>
          booking.id === bookingId
            ? { ...booking, status: "accepted" }
            : booking
        )
      );
    } catch (err) {
      setError("Failed to accept booking. Please try again.");
      console.error("Failed to accept booking:", err);
    }
  };
  const getDetails = async (bookingId) => {
    try {
      const token = localStorage.getItem("token");
      if (!token) {
        setError("Authentication required. Please login as an admin.");
        return;
      }

      const data = await get_details(token, bookingId);
      console.log(data);
      setDetails(data);
      // Update the bookings state to reflect the accepted booking
      // setBookings(bookings.map(booking =>
      //     booking.id === bookingId ? { ...booking, status: 'accepted' } : booking
      // ));
    } catch (err) {
      setError("Can't click");
      console.error("Failed to accept booking:", err);
    }
  };

  const handleRejectBooking = async (bookingId) => {
    try {
      const token = localStorage.getItem("token");
      if (!token) {
        setError("Authentication required. Please login as an admin.");
        return;
      }

      const response = await rejectBooking(token, bookingId);

      // Update the bookings state to reflect the rejected booking
      setBookings(
        bookings.map((booking) =>
          booking.id === bookingId
            ? { ...booking, status: "rejected" }
            : booking
        )
      );

      if (response && response.refundId) {
        // Handle success (e.g., display a message)
        console.log(`Booking rejected, refund initiated with ID: ${response.refundId}`);
      }
    } catch (err) {
      setError("Failed to reject booking. Please try again.");
      console.error("Failed to reject booking:", err);
    }
  };

  const handleCancelBooking = async (bookingId, bookingdate) => {
    try {
      const token = localStorage.getItem("token");
      if (!token) {
        setError("Authentication required. Please login as an admin.");
        return;
      }

      const bookingDate = new Date(bookingdate); // Assuming booking.date is a valid date string
      const today = new Date();

      // Reset the time portion of both dates to midnight
      bookingDate.setHours(0, 0, 0, 0);
      today.setHours(0, 0, 0, 0);

      if (bookingDate < today) {
        console.log("Booking date is in the past.");
      } else {
        console.log("Booking date is in the future.");
        await cancelBooking(token, bookingId);
        // Update the bookings state to reflect the accepted booking
        setBookings(
          bookings.map((booking) =>
            booking.id === bookingId
              ? { ...booking, status: "canceled" }
              : booking
          )
        );
      }
    } catch (err) {
      setError("Failed to accept booking. Please try again.");
      console.error("Failed to accept booking:", err);
    }
  };

  useEffect(() => {
    // Function to fetch bookings
    console.log(localStorage.getItem("isConsultant"))
    const fetchBookings = async () => {
      setLoading(true);
      setError("");
      try {
        const token = localStorage.getItem("token");
        const storedConsultantId = localStorage.getItem("userId");
        const storedIsApproved = localStorage.getItem("isApproved");

        if (!token) {
          setError("Authentication required. Please login.");
          return;
        }

        // Check if storedConsultantId exists and is a valid number
        if (!storedConsultantId || isNaN(parseInt(storedConsultantId, 10))) {
          setError("Consultant ID not found or invalid. Please login again.");
          return;
        }

        // Convert storedConsultantId to a number
        const parsedConsultantId = parseInt(storedConsultantId, 10);
        setConsultantId(parsedConsultantId); // Set the consultantId state

        // Set isApproved state
        setIsApproved(storedIsApproved === "true");

        const data = await getConsultantBookingsById(token, parsedConsultantId);
        setBookings(data);
      } catch (err) {
        setError(err.response.data.message.toString());
        console.error("Failed to fetch bookings:", err);
      } finally {
        setLoading(false);
      }
    };

    // Call fetchBookings only if consultantId is valid
    if (
      localStorage.getItem("isConsultant") === "1" &&
      localStorage.getItem("userId")
    ) {
      fetchBookings();
    } else {
      setError("You must be logged in as Consultant to access this page");
    }
  }, []);

  // Redirect if consultant is not approved
  // if (
  //   localStorage.getItem("isConsultant") === "true" &&
  //   localStorage.getItem("isApproved") === "false"
  // ) {
  //   return <Navigate to="/" />;
  // }

  return (
    <div className="min-h-screen bg-gray-100">
      {details && (
        <div
          className="fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center min-w-screen z-[9999]"
          style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
          onClick={() => setDetails(null)}
        >
          <div className="rounded-lg bg-gradient-to-r from-blue-500 via-teal-400 to-green-300 p-1">
            <div className="flex justify-center items-center">
              <div className="max-w-6xl bg-white rounded-lg shadow-2xl p-8 space-y-6 transform transition-all hover:shadow-xl w-[40vw]">
                {/* Profile Section */}
                <div className="flex items-center space-x-6">
                  <img
                    src={
                      `http://localhost:5555/${details.user.profilePicture}`
                    }
                    alt="Profile Picture"
                    className="w-24 h-24 rounded-full object-cover shadow-md"
                  />
                  <div>
                    <h2 className="text-3xl font-semibold text-gray-800">
                      {details.user.fullName}
                    </h2>
                    <p className="text-sm text-gray-500">
                      {details.user.email}
                      <br />
                      {details.user.phone}
                    </p>
                    <p className="text-sm text-gray-600">
                      Blood Group:{" "}
                      <span className="font-bold">
                        {details.user.bloodGroup}
                      </span>
                    </p>
                  </div>
                </div>
                {/* Current Prescriptions Section */}
                <div>
                  <h3 className="text-2xl font-semibold text-gray-700">
                    Current Prescriptions
                  </h3>
                  <p className="text-gray-600">
                    {details.user.currentPrescriptions}
                  </p>
                </div>

                {/* Medical History Section */}
                <div className="space-y-4">
                  <h3 className="text-2xl font-semibold text-gray-700">
                    Medical History
                  </h3>
                  <p className="text-gray-600">{details.user.medicalHistory}</p>
                </div>

                {/* Health Records Section */}
                <div className="space-y-4">
                  <h3 className="text-2xl font-semibold text-gray-700">
                    Health Records
                  </h3>
                  {/* Check if healthRecords exist */}
                  {details.healthRecords && details.healthRecords.length > 0 ? (
                    <div className="space-y-6 overflow-auto h-[250px]">
                      {/* Loop through each health record */}
                      {details.healthRecords.map((record, index) => (
                        <div
                          key={index}
                          className="bg-gray-50 p-4 rounded-lg shadow-md"
                        >
                          <h4 className="text-lg font-medium text-gray-600">
                            Medical History
                          </h4>
                          <p className="text-gray-500">
                            {record.medicalHistory ||
                              "No medical history available"}
                          </p>

                          <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                              <h4 className="text-lg font-medium text-gray-600">
                                Ongoing Treatments
                              </h4>
                              <p className="text-gray-500">
                                {record.ongoingTreatments ||
                                  "No ongoing treatments"}
                              </p>
                            </div>

                            <div>
                              <h4 className="text-lg font-medium text-gray-600">
                                Prescriptions
                              </h4>
                              <p className="text-gray-500">
                                {record.prescriptions ||
                                  "No current prescriptions"}
                              </p>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <p className="text-gray-500">
                      No health records available.
                    </p>
                  )}
                </div>

                {/* Health Medical History Section
            <div>
              <h3 className="text-2xl font-semibold text-gray-700">
                Health Medical History
              </h3>
              <p className="text-gray-600">{details.user.medicalHistory}</p>
            </div> */}
              </div>
            </div>
          </div>
        </div>
      )}

<div className="min-h-screen bg-gradient-to-br from-blue-300 to-purple-400 p-10">
      <section className="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8">
        <h2 className="text-3xl font-semibold text-gray-800 text-center mb-6">
          Consultant Dashboard
        </h2>

        {loading && <p className="text-center text-gray-700">Loading bookings...</p>}
        {error && <p className="text-center text-red-500">{error}</p>}
        {!loading && !error && bookings.length === 0 && (
          <p className="text-center text-gray-700">No bookings found.</p>
        )}

        {!loading && !error && bookings.length > 0 && (
          <ul className="divide-y divide-gray-300">
            {bookings.map((booking) => (
              <li key={booking.id} className="py-4 flex items-center justify-between">
                <div>
                  <p className="text-lg font-semibold text-gray-800 flex items-center gap-2">
                    <Calendar className="h-5 w-5 text-gray-600" />
                    {new Date(booking.date).toLocaleDateString()}
                  </p>
                  <p className="text-gray-600">Time: {booking.time}</p>
                  <p className="text-gray-600">Status: {booking.status}</p>
                </div>

                <div className="flex gap-2">
                  {booking.status === "pending" && (
                    <>
                      <button
                        className="flex items-center gap-1 bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg shadow-md transition"
                        onClick={() => handleAcceptBooking(booking.id)}
                      >
                        <Check className="h-5 w-5" />
                        Accept
                      </button>
                      <button
                        className="flex items-center gap-1 bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg shadow-md transition"
                        onClick={() => handleRejectBooking(booking.id)}
                      >
                        <X className="h-5 w-5" />
                        Reject
                      </button>
                    </>
                  )}
                  {booking.status === "accepted" && (
                    <button
                      className="flex items-center gap-1 bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg shadow-md transition"
                      onClick={() => handleRejectBooking(booking.id)}
                    >
                      <X className="h-5 w-5" />
                      Cancel
                    </button>
                  )}
                  <button
                    className="flex items-center gap-1 bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg shadow-md transition"
                    onClick={() => getDetails(booking.id)}
                  >
                    <Eye className="h-5 w-5" />
                    View
                  </button>
                </div>
              </li>
            ))}
          </ul>
        )}
      </section>
    </div>
    </div>
  );
};

export default ConsultantDashboardPage;
// File: frontend/src/pages/ConsultantDetails.jsx
import React, { useState, useEffect } from "react";
import { useParams, Link } from "react-router-dom";
import { getConsultantById, sendMessageRequest, chatStatus, getBookings } from "../utils/api";
import {
    Container,
    Typography,
    Grid,
    Card,
    CardContent,
    CardMedia,
    Box,
    Chip,
    CircularProgress,
    Alert,
    Button,
    Avatar,
    Dialog,
    DialogActions,
    DialogContent,
    DialogContentText,
    DialogTitle,
    TextField
} from "@mui/material";
import { AccessTime, LocationOn, VerifiedUser } from "@mui/icons-material";
import { styled } from "@mui/system";
import { Star, MessageSquare, Calendar, User, Briefcase } from 'lucide-react';

const gradient = "linear-gradient(45deg, #667eea 30%, #764ba2 90%)";

const StyledCard = styled(Card)(({ theme }) => ({
    borderRadius: theme.spacing(2),
    transition: "transform 0.3s ease-in-out",
    "&:hover": {
        transform: "scale(1.02)",
    },
}));

const ConsultantDetails = () => {
    const { id } = useParams();
    const [consultant, setConsultant] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState("");
    const [bookingId, setBookingId] = useState(0);
    const [userRole, setUserRole] = useState(localStorage.getItem('userRole') || 'guest');
    const [openMessaging, setOpenMessaging] = useState(false);

    // New state for the message dialog
    const [messageDialogOpen, setMessageBoxDialog] = useState(false);
    const [messageText, setMessageText] = useState('');

    useEffect(() => {
        const fetchConsultant = async () => {
            setLoading(true);
            setError("");
            try {
                const data = await getConsultantById(id);
                console.log(data)
                setConsultant(data);
            } catch (err) {
                setError("Failed to retrieve consultant details. Please try again.");
                setConsultant(null);
                console.error("Failed to fetch consultant:", err);
            } finally {
                setLoading(false);
            }
        };

        const fetchBookings = async () => {
          setLoading(true);
            setError('');
            try {
              function getAcceptedAppointmentId(appointments) {
                for (let appointment of appointments) {
                    if (
                        appointment.consultantId.toString() === id &&
                        appointment.status === "accepted" || appointment.status === "pending" 
                    ) {
                        return appointment.id;
                    }
                }
                return 0; // Return null if no matching appointment is found
            }
                const token = localStorage.getItem('token');
                if (!token) {
                    setError('Authentication required. Please login.');
                    return;
                }
                const data = await getBookings(token);
                console.log(data)
                setBookingId(getAcceptedAppointmentId(data));
            } catch (err) {
                setError('Failed to Retrieve Chat Status, please try again.');
                console.error("Failed to fetch consultant:", err);
            } finally {
                setLoading(false);
            }
        }

        const getChatState = async () => {
            setLoading(true);
            setError('');
            try {
                const token = localStorage.getItem('token');
                if (!token) {
                    setError('Authentication required. Please login.');
                    return;
                }
                const data = await chatStatus(token, id);
                console.log(data.request.status)
                setOpenMessaging(data.request.status);
            } catch (err) {
                // setError('Failed to Retrieve Chat Status, please try again.');
                console.error("Failed to fetch consultant:", err);
            } finally {
                setLoading(false);
            }
        }

        fetchConsultant();
        fetchBookings();
        getChatState();
    }, [id]);


    const handleOpenMessageDialog = () => {
      setMessageBoxDialog(true);
    };

    const handleCloseMessageDialog = () => {
        setMessageBoxDialog(false);
        setMessageText(''); // Clear the message when closing
    };

    const handleMessageChange = (event) => {
        setMessageText(event.target.value);
    };


    const sendMsgRequest = async (consultantId) => {
        setLoading(true);
        setError('');
        try {
            const token = localStorage.getItem('token');
            if (!token) {
                setError('Authentication required. Please login.');
                return;
            }
            // Use the message from the state instead of prompt
            await sendMessageRequest(token, consultantId, bookingId, messageText);
            setOpenMessaging("pending");
            handleCloseMessageDialog(); // Close dialog after sending
        } catch (err) {
            setError('Failed to Request Message. Please try again.');
            console.error('Failed to request message:', err);
        } finally {
            setLoading(false);
        }
    };


    if (loading) {
        return (
            <Container sx={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                height: "80vh",
            }}>
                <CircularProgress />
            </Container>
        );
    }

    if (error) {
        return (
            <Container>
                <Alert severity="error">{error}</Alert>
            </Container>
        );
    }

    if (!consultant) {
        return (
            <Container>
                <Alert severity="error">Consultant not found.</Alert>
            </Container>
        );
    }

    const parseAvailability = (availability) => {
        try {
            return JSON.parse(availability);
        } catch (e) {
            console.error("Failed to parse availability:", availability);
            return {};
        }
    };

    return (
        <Container maxWidth="md" sx={{ mt: 5, mb: 4 }}>
            <StyledCard>

                {/* Header Section */}
                <Box sx={{
                    background: gradient,
                    color: 'white',
                    padding: 4,
                    textAlign: 'center',
                }}>
                    <Avatar
                        alt={consultant.consultant.fullName}
                        src={`http://localhost:5555/${consultant.consultant.profilePicture}`}
                        sx={{ width: 80, height: 80, margin: '0 auto', border: '3px solid white' }}
                    />
                    <Typography variant="h5" component="h2" mt={2}>
                        {consultant.consultant.fullName}
                    </Typography>
                    <Chip
                        label={consultant.consultant.speciality}
                        size="small"
                        sx={{ mt: 1, backgroundColor: 'rgba(255,255,255,0.2)', color: 'white' }}
                    />
                </Box>


                <CardContent>
                    <Grid container spacing={3}>

                        {/* About Section */}
                        <Grid item xs={12}>
                            <Typography variant="h6" sx={{ display: 'flex', alignItems: 'center', mb: 1 }}><User className="mr-1 w-5 h-5" />About</Typography>
                            <Typography variant="body2" paragraph>{consultant.consultant.bio || "No bio provided."}</Typography>
                        </Grid>

                        {/* Qualifications and Expertise */}
                        <Grid item xs={12} md={6}>
                            <Typography variant="subtitle2" sx={{ display: 'flex', alignItems: 'center', mb: 1 }}><Briefcase className="mr-1 w-4 h-4" />Qualifications</Typography>
                            <Typography variant="body2">{consultant.consultant.qualification || "Not specified"}</Typography>
                        </Grid>
                        <Grid item xs={12} md={6}>
                            <Typography variant="subtitle2" sx={{ display: 'flex', alignItems: 'center', mb: 1 }}><Star className="mr-1 w-4 h-4" />Areas of Expertise</Typography>
                            <Typography variant="body2">{consultant.consultant.areasOfExpertise || "Not specified"}</Typography>
                        </Grid>

                        {/* Availability */}
                        <Grid item xs={12}>
                            <Typography variant="h6" sx={{ display: 'flex', alignItems: 'center', mb: 1 }}><Calendar className="mr-1 w-5 h-5" />Availability</Typography>
                            <Box sx={{ mt: 1 }}>
                                {consultant.consultant.availability ? (
                                    Object.entries(parseAvailability(consultant.consultant.availability)).map(([day, { startTime, endTime }]) => (
                                        <Box key={day} sx={{
                                            display: "flex",
                                            alignItems: "center",
                                            justifyContent: "space-between",
                                            mb: 1,
                                            padding: 1,
                                            borderRadius: 1,
                                            backgroundColor: 'rgba(0,0,0,0.03)'
                                        }}>
                                            <Typography variant="body2" sx={{ fontWeight: "bold" }}>{day}:</Typography>
                                            <Box sx={{ display: "flex", alignItems: "center" }}>
                                                <AccessTime sx={{ mr: 0.5, fontSize: 'small' }} />
                                                <Typography variant="body2">{startTime} - {endTime}</Typography>
                                            </Box>
                                        </Box>
                                    ))
                                ) : (
                                    <Typography>Not available at the moment</Typography>
                                )}
                            </Box>
                        </Grid>

                        {/* Reviews Section */}
                        <Grid item xs={12}>
                            <Typography variant="h6" sx={{ display: 'flex', alignItems: 'center', mb: 2 }}><Star className="mr-1 w-5 h-5" />Reviews</Typography>
                            <div className="flex flex-col overflow-auto max-h-[300px]">
                            {consultant.reviews && consultant.reviews.length > 0 ? (
                                consultant.reviews.map((review) => (
                                    <Box key={review.id} sx={{
                                        mb: 2,
                                        padding: 2,
                                        borderRadius: 2,
                                        backgroundColor: 'rgba(0,0,0,0.03)'
                                    }}>
                                        <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
                                            {[...Array(5)].map((_, index) => (
                                                <Star key={index} className={`h-4 w-4 ${index < review.rating ? 'text-yellow-500' : 'text-gray-300'}`} />
                                            ))}
                                        </Box>
                                        <Typography variant="body2" paragraph>{review.review}</Typography>
                                    </Box>
                                ))
                            ) : (
                                <Typography>No reviews yet.</Typography>
                            )}
                            </div>
                            {userRole === 'user' && bookingId != 0 && (
                            <Button
                                component={Link}
                                to={`/review/${consultant.consultant.id}`}
                                variant="outlined"
                                size="small"
                                sx={{ mt: 2 }}
                            >
                                Add a Review
                            </Button>)}
                        </Grid>


                        {/* Message Request Button */}
                        <Grid item xs={12} sx={{ textAlign: 'center' }}>
                            {userRole === 'user' && bookingId != 0 ? (
                                openMessaging == 'accepted' ? (
                                    <Button
                                        component={Link}
                                        to={`/messages`}
                                        variant="contained"
                                        size="large"
                                        sx={{ backgroundColor: '#764ba2', '&:hover': { backgroundColor: '#667eea' } }}
                                        startIcon={<MessageSquare />}
                                    >
                                        Message!
                                    </Button>
                                ) : (openMessaging == 'pending' ? (
                                  <Button
                                      // component={Link}
                                      // to={`/messages`}
                                      variant="contained"
                                      size="large"
                                      sx={{ backgroundColor: '#764ba2', '&:hover': { backgroundColor: '#667eea' } }}
                                      startIcon={<MessageSquare />}
                                  >
                                      Request Pending!
                                  </Button>
                              ) : (
                                    <Button
                                        onClick={handleOpenMessageDialog}
                                        variant="contained"
                                        size="large"
                                        sx={{ backgroundColor: '#764ba2', '&:hover': { backgroundColor: '#667eea' } }}
                                        startIcon={<MessageSquare />}
                                    >
                                        Message Request
                                    </Button>
                                ))
                            ):(
                              <Link
                              to={`/booking/${id}`}
                              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-colors duration-300 inline-block"
                            >
                              Book Appointment
                            </Link>
                            )}
                        </Grid>
                    </Grid>
                </CardContent>
            </StyledCard>

             {/* Message Request Dialog */}
             <Dialog open={messageDialogOpen} onClose={handleCloseMessageDialog}>
                <DialogTitle>Send Message Request</DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        Enter the message you want to send to the consultant.
                    </DialogContentText>
                    <TextField
                        autoFocus
                        margin="dense"
                        id="message"
                        label="Your Message"
                        type="text"
                        fullWidth
                        multiline
                        rows={4}
                        value={messageText}
                        onChange={handleMessageChange}
                    />
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleCloseMessageDialog}>Cancel</Button>
                    <Button onClick={() => sendMsgRequest(id)}>Send Request</Button>
                </DialogActions>
            </Dialog>
        </Container>
    );
};

export default ConsultantDetails;
// File: frontend/src/pages/ConsultantEarnings.jsx
import React, { useState, useEffect } from "react";
import { getConsultantEarnings } from "../utils/api";
import { Coins } from "lucide-react";

const ConsultantEarnings = () => {
  const [earnings, setEarnings] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    const fetchEarnings = async () => {
      setLoading(true);
      setError("");
      try {
        const token = localStorage.getItem("token");
        if (!token) {
          setError("Authentication required. Please login.");
          return;
        }

        const data = await getConsultantEarnings(token);
        setEarnings(data);
      } catch (err) {
        setError("Failed to retrieve earnings. Please try again.");
        setEarnings([]);
        console.error("Failed to fetch earnings:", err);
      } finally {
        setLoading(false);
      }
    };

    fetchEarnings();
  }, []);

  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleDateString("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  };
  const formatTime = (timeString) => {
    // Split the time string into hours and minutes
    const [hours, minutes] = timeString.split(":");
    // Convert to 12-hour format
    let period = "AM";
    let hour = parseInt(hours);
    if (hour >= 12) {
      period = "PM";
      hour = hour === 12 ? hour : hour - 12; // Noon should be 12 PM
    }
    if (hour === 0) {
      hour = 12; // Midnight should be 12 AM
    }
    return `${hour}:${minutes} ${period}`;
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-300 to-purple-400 py-12">
      <div className="max-w-4xl mx-auto bg-white shadow-xl rounded-2xl overflow-hidden">
        <div className="px-6 py-8 bg-gradient-to-r from-blue-100 to-purple-100">
          <h2 className="text-3xl font-semibold text-gray-800 text-center">
            My Earnings
          </h2>
        </div>

        {loading && <p className="text-center py-4">Loading earnings...</p>}
        {error && <p className="text-center text-red-500 py-4">{error}</p>}

        {!loading && !error && earnings.length === 0 && (
          <p className="text-center py-4">No earnings found.</p>
        )}

        {!loading && !error && earnings.length > 0 && (
          <div className="overflow-x-auto">
            <table className="min-w-full leading-normal">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    <Coins className="inline-block h-4 w-4 mr-1" />
                    Payment ID
                  </th>
                  <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Payment Date
                  </th>
                  <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Booking Date/Time
                  </th>
                  <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Amount
                  </th>
                </tr>
              </thead>
              <tbody>
                {earnings.map((earning) => (
                  <tr key={earning.id}>
                    <td className="px-5 py-3 border-b border-gray-200 text-sm">
                      {earning.id}
                    </td>
                    <td className="px-5 py-3 border-b border-gray-200 text-sm">
                      {formatDate(earning.paymentDate)}
                    </td>
                    <td className="px-5 py-3 border-b border-gray-200 text-sm">
                      {formatDate(earning.bookingDate)}/{formatTime(earning.bookingTime)}
                    </td>
                    <td className="px-5 py-3 border-b border-gray-200 text-sm">
                      ${earning.amount}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
};

export default ConsultantEarnings;
// File: frontend/src/pages/ConsultantProfile.jsx
import React, { useState, useEffect } from 'react';
import { getConsultantProfile, updateConsultantProfile } from '../utils/api';
import { Edit, User, Calendar, GraduationCap, Briefcase, Clock, CheckCircle, XCircle } from 'lucide-react';

const ConsultantProfile = () => {
    const [specialty, setSpecialty] = useState('');
    const [qualifications, setQualifications] = useState('');
    const [availability, setAvailability] = useState({});
    const [bio, setBio] = useState('');
    const [areasOfExpertise, setAreasOfExpertise] = useState('');
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const [isEditing, setIsEditing] = useState(false);
    const [profilePicture, setProfilePicture] = useState('');
    const [name, setName] = useState('');

    useEffect(() => {
        const fetchProfile = async () => {
            setLoading(true);
            setError('');
            try {
                const token = localStorage.getItem('token');
                if (!token) {
                    setError('Authentication required. Please login.');
                    return;
                }

                const data = await getConsultantProfile(token);
                setSpecialty(data.speciality); // corrected typo
                setQualifications(data.qualification); //corrected typo
                setAvailability(JSON.parse(data.availability));
                setProfilePicture(data.profilePicture);
                setBio(data.bio);
                setAreasOfExpertise(data.areasOfExpertise);
                setName(data.fullName);

                // Ensure minutes are always 00 on initial load
                Object.keys(availability).forEach(day => {
                    if (availability[day]) {
                        if(availability[day].startTime){
                          availability[day].startTime = availability[day].startTime.slice(0, 2) + ":00";
                        }
                        if(availability[day].endTime){
                          availability[day].endTime = availability[day].endTime.slice(0, 2) + ":00";
                        }

                    }
                });
                // setAvailability({...availability});

            } catch (err) {
                setError('Failed to retrieve consultant profile. Please try again.');
                console.error('Failed to fetch consultant profile:', err);
            } finally {
                setLoading(false);
            }
        };

        fetchProfile();
    }, []);

    const handleEditClick = () => {
        setIsEditing(true);
    };

    const handleCancelClick = () => {
        setIsEditing(false);
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);
        setError('');

        // Validation: Check if start time is before end time for each day
        for (const day in availability) {
            if (availability.hasOwnProperty(day)) {
                const startTime = availability[day]?.startTime;
                const endTime = availability[day]?.endTime;

                if (startTime && endTime) {
                    if (startTime >= endTime) {
                        window.alert(`Start time must be before end time for ${day}.`);
                        setLoading(false);
                        return;  // Stop the submission if validation fails
                    }
                }
            }
        }

        try {
            const token = localStorage.getItem('token');
            if (!token) {
                setError('Authentication required. Please login.');
                return;
            }

            // Convert availability back to string for API
            const availabilityString = JSON.stringify(availability);

            await updateConsultantProfile(token, { specialty: specialty, qualifications: qualifications, availability: availabilityString, bio: bio, areasOfExpertise: areasOfExpertise, fullName: name, profilePicture: profilePicture });
            setIsEditing(false);
        } catch (err) {
            setError('Failed to update consultant profile. Please try again.');
            console.error('Consultant profile update failed:', err);
        } finally {
            setLoading(false);
        }
    };

    const handleAvailabilityChange = (day, field, value) => {
        // Ensure minutes are always "00"
        const timeValue = value.slice(0, 2) + ":00";  // Extract hours and set minutes to "00"

        setAvailability(prevAvailability => ({
            ...prevAvailability,
            [day]: {
                ...prevAvailability[day],
                [field]: timeValue,
            },
        }));
    };

    const renderAvailabilityEdit = () => {
        const daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

        return (
            <div className="mb-6">
                <h2 className="text-lg font-semibold text-gray-700 mb-3">Edit Availability</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {daysOfWeek.map(day => (
                        <div key={day} className="bg-white rounded-xl shadow-sm p-4">
                            <label className="block text-gray-700 text-sm font-bold mb-2">{day}</label>
                            <div className="flex space-x-2">
                                <select
                                    className="shadow appearance-none border rounded w-1/2 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline text-sm"
                                    value={(availability[day]?.startTime || '').slice(0,2) || ''} //Only get the hour from the time
                                    onChange={(e) => handleAvailabilityChange(day, 'startTime', e.target.value + ":00")}
                                >
                                  {/* Options for hours (00 - 23) */}
                                  {Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0')).map(hour => (
                                      <option key={hour} value={hour}>{hour}:00</option>
                                  ))}
                                </select>

                                <select
                                    className="shadow appearance-none border rounded w-1/2 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline text-sm"
                                    value={(availability[day]?.endTime || '').slice(0,2) || ''} //Only get the hour from the time
                                    onChange={(e) => handleAvailabilityChange(day, 'endTime',  e.target.value + ":00")}
                                >
                                  {/* Options for hours (00 - 23) */}
                                  {Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0')).map(hour => (
                                      <option key={hour} value={hour}>{hour}:00</option>
                                  ))}
                                </select>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        );
    };



    const renderAvailability = () => {
        return (
            <div className="mb-6">
                <h2 className="text-lg font-semibold text-gray-700 mb-3">Availability</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {Object.entries(availability).length > 0 ? (
                        Object.entries(availability).map(([day, times]) => (
                            <div key={day} className="bg-indigo-50 rounded-xl p-4 flex items-center justify-between">
                                <div>
                                    <p className="text-sm font-medium text-gray-700">{day}</p>
                                    <p className="text-xs text-gray-500">{times?.startTime || 'N/A'} - {times?.endTime || 'N/A'}</p>
                                </div>
                                <Clock className="h-5 w-5 text-indigo-500" />
                            </div>
                        ))
                    ) : (
                        <p className="text-gray-500">No availability specified.</p>
                    )}
                </div>
            </div>
        );
    };

    return (
        <div className="min-h-screen bg-gradient-to-br from-indigo-100 to-purple-200 py-16 px-4 sm:px-6 lg:px-8">
            <div className="max-w-4xl mx-auto bg-white rounded-3xl shadow-xl overflow-hidden">
                <div className="md:flex">
                    {/* Left Side - Profile Picture and Name */}
                    <div className="md:w-1/3 bg-gradient-to-br from-purple-500 to-indigo-500 text-white py-12 px-6 flex flex-col items-center justify-center">
                        <img className="rounded-full w-40 h-40 shadow-lg mb-4 object-cover object-center" src={`http://localhost:5555/${profilePicture}`} alt="Profile" onError={(e) => { e.target.onerror = null; e.target.src = "https://placehold.co/256x256" }} />
                        <h1 className="text-2xl font-semibold mb-2">{name}</h1>
                        <p className="text-gray-100 text-sm italic">{specialty || 'Specialty Not Specified'}</p>
                    </div>

                    {/* Right Side - Profile Details and Edit Form */}
                    <div className="md:w-2/3 py-8 px-6">
                        <h2 className="text-3xl font-semibold text-gray-800 mb-6">
                            {isEditing ? 'Edit Profile' : 'Consultant Profile'}
                        </h2>

                        {loading && <p className="text-center">Loading profile information...</p>}
                        {error && <p className="text-center text-red-500">{error}</p>}

                        {!loading && !error && (
                            <div>
                                {isEditing ? (
                                    <form onSubmit={handleSubmit} className="space-y-4">
                                        <div>
                                            <label className="block text-gray-700 text-sm font-bold mb-2">Full Name</label>
                                            <input
                                                type="text"
                                                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                                value={name}
                                                onChange={(e) => setName(e.target.value)}
                                            />
                                        </div>
                                        <div>
                                            <label className="block text-gray-700 text-sm font-bold mb-2">Specialty</label>
                                            <input
                                                type="text"
                                                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                                value={specialty}
                                                onChange={(e) => setSpecialty(e.target.value)}
                                            />
                                        </div>
                                        <div>
                                            <label className="block text-gray-700 text-sm font-bold mb-2">Qualifications</label>
                                            <input
                                                type="text"
                                                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                                value={qualifications}
                                                onChange={(e) => setQualifications(e.target.value)}
                                            />
                                        </div>
                                        <div>
                                            <label className="block text-gray-700 text-sm font-bold mb-2">Bio</label>
                                            <textarea
                                                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                                value={bio}
                                                onChange={(e) => setBio(e.target.value)}
                                                rows="3"
                                            ></textarea>
                                        </div>
                                        <div>
                                            <label className="block text-gray-700 text-sm font-bold mb-2">Areas of Expertise</label>
                                            <textarea
                                                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                                value={areasOfExpertise}
                                                onChange={(e) => setAreasOfExpertise(e.target.value)}
                                                rows="3"
                                            ></textarea>
                                        </div>

                                        {renderAvailabilityEdit()}

                                        <div className="flex justify-end space-x-4">
                                            <button
                                                className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-xl focus:outline-none focus:shadow-outline flex items-center"
                                                type="submit"
                                            >
                                                <CheckCircle className="w-4 h-4 mr-2" />
                                                Save Changes
                                            </button>
                                            <button
                                                className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-xl focus:outline-none focus:shadow-outline flex items-center"
                                                type="button"
                                                onClick={handleCancelClick}
                                            >
                                                <XCircle className="w-4 h-4 mr-2" />
                                                Cancel
                                            </button>
                                        </div>
                                    </form>
                                ) : (
                                    <div>
                                        <div className="space-y-4">
                                            <div>
                                                <h3 className="text-lg font-semibold text-gray-700 flex items-center mb-2"><User className="w-5 h-5 mr-2 text-gray-500" />Bio</h3>
                                                <p className="text-gray-600">{bio || 'No bio available.'}</p>
                                            </div>
                                            <div>
                                                <h3 className="text-lg font-semibold text-gray-700 flex items-center mb-2"><Briefcase className="w-5 h-5 mr-2 text-gray-500" />Areas of Expertise</h3>
                                                <p className="text-gray-600">{areasOfExpertise || 'No expertise specified.'}</p>
                                            </div>
                                            <div>
                                                <h3 className="text-lg font-semibold text-gray-700 flex items-center mb-2"><GraduationCap className="w-5 h-5 mr-2 text-gray-500" />Qualifications</h3>
                                                <p className="text-gray-600">{qualifications || 'No qualifications specified.'}</p>
                                            </div>
                                            {renderAvailability()}
                                        </div>

                                        <div className="mt-6 text-right">
                                            <button
                                                className="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-xl focus:outline-none focus:shadow-outline flex items-center ml-auto"
                                                type="button"
                                                onClick={handleEditClick}
                                            >
                                                <Edit className="w-4 h-4 mr-2" />
                                                Edit Profile
                                            </button>
                                        </div>
                                    </div>
                                )}
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ConsultantProfile;
// File: frontend/src/pages/ConsultantSearch.jsx
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Search, User, MapPin, Badge, Briefcase, Mail } from 'lucide-react';
import { getConsultants } from '../utils/api';

const ConsultantSearch = () => {
    const [searchQuery, setSearchQuery] = useState('');
    const [specialtyFilter, setSpecialtyFilter] = useState('');
    const [consultants, setConsultants] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');
    const token = localStorage.getItem('token')

    useEffect(() => {
        const fetchConsultants = async () => {
            setLoading(true);
            setError('');
            try {
                const data = await getConsultants(specialtyFilter, null, null); // Removed availability filter
                setConsultants(data);
            } catch (err) {
                setError('Failed to retrieve consultants. Please try again.');
                setConsultants([]);
                console.error('Failed to fetch consultants:', err);
            } finally {
                setLoading(false);
            }
        };

        fetchConsultants();
    }, [specialtyFilter]);

    const handleSearchChange = (e) => {
        setSearchQuery(e.target.value);
    };

    const filteredConsultants = consultants.filter(consultant => {
        const fullName = `${consultant.fullName} ${consultant.speciality} ${consultant.qualification} ${consultant.areasOfExpertise}`.toLowerCase();
        return fullName.includes(searchQuery.toLowerCase());
    });

    return (
        <div className="min-h-screen bg-gradient-to-br from-indigo-50 to-purple-100 py-16">

            {/* Hero Section */}
            <div className="container mx-auto px-4 mb-12 text-center">
                <h1 className="text-4xl font-extrabold text-gray-800 mb-4">Find the Right Consultant</h1>
                <p className="text-lg text-gray-600">Search and connect with experienced professionals in various specialties.</p>
            </div>

            {/* Search Bar */}
            <div className="container mx-auto px-4 mb-8">
                <div className="relative max-w-3xl mx-auto">
                    <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                        <Search className="w-5 h-5 text-gray-500" />
                    </div>
                    <input
                        type="search"
                        className="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-xl bg-white focus:ring-indigo-500 focus:border-indigo-500"
                        placeholder="Search consultants by name, specialty, or expertise..."
                        value={searchQuery}
                        onChange={handleSearchChange}
                    />
                </div>
            </div>

            {/* Filter Options */}
            <div className="container mx-auto px-4 mb-12">
                <div className="flex justify-center">
                    <div className="w-full max-w-md">
                        <label htmlFor="specialty" className="block text-gray-700 text-sm font-bold mb-2 text-center">
                            Filter by Specialty:
                        </label>
                        <div className="relative">
                            <select
                                id="specialty"
                                className="shadow appearance-none border rounded-xl w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline text-center"
                                value={specialtyFilter}
                                onChange={(e) => setSpecialtyFilter(e.target.value)}
                            >
                                <option value="">All Specialties</option>
                                <option value="Cardiology">Cardiology</option>
                                <option value="Neurology">Neurology</option>
                                <option value="Pediatrics">Pediatrics</option>
                                <option value="ENT">ENT</option>
                                <option value="Dermatology">Dermatology</option>
                                <option value="Oncology">Oncology</option>
                            </select>
                            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                {/* Down Arrow Icon (You can use Lucide React's ChevronDown) */}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Consultant List */}
            <section className="container mx-auto px-4">
                <h2 className="text-3xl font-semibold text-gray-800 text-center mb-8">
                    Meet Our Consultants
                </h2>

                {loading && <p className="text-center">Loading consultants...</p>}
                {error && <p className="text-center text-red-500">{error}</p>}

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    {filteredConsultants.map((consultant) => (
                        <div key={consultant.id} className="rounded-2xl overflow-hidden shadow-md transition-shadow duration-300 hover:shadow-lg bg-gradient-to-br from-white to-gray-100">
                            <img
                                className="w-full h-52 object-cover object-center"
                                src={`http://localhost:5555/${consultant.profilePicture}`}
                                alt={consultant.fullName}
                                onError={(e) => { e.target.onerror = null; e.target.src = "https://placehold.co/600x400" }}
                            />
                            <div className="p-6">
                                <h3 className="text-xl font-semibold text-gray-800 mb-2 flex items-center">
                                    <User className="w-4 h-4 mr-2 text-gray-600" />
                                    {consultant.fullName}
                                </h3>
                                <p className="text-gray-600 mb-3 flex items-center">
                                    <Badge className="w-4 h-4 mr-2 text-gray-500" />
                                    {consultant.speciality || 'Specialty Not Specified'}
                                </p>
                                <p className="text-gray-600 mb-3 flex items-center">
                                    <Briefcase className="w-4 h-4 mr-2 text-gray-500" />
                                    {consultant.qualification || 'Qualification Not Specified'}
                                </p>
                                <p className="text-gray-600 mb-3 flex items-center">
                                    <MapPin className="w-4 h-4 mr-2 text-gray-500" />
                                    Expertise: {consultant.areasOfExpertise || 'N/A'}
                                </p>
                                <p className="text-gray-700 mb-4">
                                    {consultant.bio ? consultant.bio.substring(0, 100) + '...' : 'No bio available.'}
                                </p>
                                <div className="flex justify-between items-center">
                                    <Link
                                        to={token ? `/consultantdetails/${consultant.id}` : '/login'}
                                        className="inline-flex items-center justify-center bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-indigo-500 hover:to-purple-500 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline transition-colors duration-300"
                                    >
                                        View Profile
                                    </Link>
                                    <a href={`mailto:${consultant.email}`} className="text-indigo-600 hover:text-indigo-800 flex items-center">
                                        <Mail className="w-4 h-4 mr-1" />
                                        Email
                                    </a>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                {filteredConsultants.length === 0 && !loading && (
                    <p className="text-center text-gray-500 mt-8">No consultants found matching your criteria.</p>
                )}
            </section>
        </div>
    );
};

export default ConsultantSearch;
// File: frontend/src/pages/ConsultationDashboard.jsx
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import {
  getBookings,
  getConsultantBookings,
  cancelBooking,
} from "../utils/api";
import { Calendar, Clock, AlertTriangle, X } from "lucide-react";

const ConsultationDashboard = () => {
  const [upcomingConsultations, setUpcomingConsultations] = useState([]);
  const [pastConsultations, setPastConsultations] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [isConsultant, setIsConsultant] = useState(
    localStorage.getItem("isConsultant") === "true"
  );
  const [cancelConfirmation, setCancelConfirmation] = useState({
    show: false,
    bookingId: null,
    bookingDate: null,
  });

  useEffect(() => {
    const fetchConsultations = async () => {
      setLoading(true);
      setError("");
      try {
        const token = localStorage.getItem("token");
        if (!token) {
          setError("Authentication required. Please login.");
          return;
        }

        let data;
        if (isConsultant === "true") {
          data = await getConsultantBookings(token);
        } else {
          data = await getBookings(token);
        }

        // Filter consultations into upcoming and past
        const now = new Date();
        const upcoming = data.filter(
          (booking) => new Date(booking.date) >= now
        );
        const past = data.filter((booking) => new Date(booking.date) < now);

        setUpcomingConsultations(upcoming);
        setPastConsultations(past);
      } catch (err) {
        setError("Failed to retrieve consultations. Please try again.");
        setUpcomingConsultations([]);
        setPastConsultations([]);
        console.error("Failed to fetch consultations:", err);
      } finally {
        setLoading(false);
      }
    };

    fetchConsultations();
  }, [isConsultant]);

  const handleCancelBooking = async () => {
    try {
      const token = localStorage.getItem("token");
      if (!token) {
        setError("Authentication required. Please login as an admin.");
        return;
      }

      const bookingDate = new Date(cancelConfirmation.bookingDate); // Assuming booking.date is a valid date string
      const today = new Date();

      // Reset the time portion of both dates to midnight
      bookingDate.setHours(0, 0, 0, 0);
      today.setHours(0, 0, 0, 0);

      if (bookingDate < today) {
        console.log("Booking date is in the past.");
      } else {
        console.log("Booking date is in the future.");
        await cancelBooking(token, cancelConfirmation.bookingId);
        // Update the bookings state to reflect the accepted booking
        setUpcomingConsultations(
          upcomingConsultations.map((booking) =>
            booking.id.toString() === cancelConfirmation.bookingId.toString()
              ? { ...booking, status: "canceled" }
              : booking
          )
        );
      }
    } catch (err) {
      setError("Failed to accept booking. Please try again.");
      console.error("Failed to accept booking:", err);
    } finally {
      setCancelConfirmation({ show: false, bookingId: null, bookingDate: null }); // Close the confirmation popup
    }
  };

  const showCancelConfirmation = (bookingId, bookingDate) => {
    setCancelConfirmation({ show: true, bookingId, bookingDate });
  };

  const hideCancelConfirmation = () => {
    setCancelConfirmation({ show: false, bookingId: null, bookingDate: null });
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-300 to-purple-400 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-5xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden">
        {/* Upcoming Consultations */}
        <section className="p-8">
          <h2 className="text-3xl font-semibold text-gray-800 mb-6 flex items-center space-x-2">
            <Calendar className="h-7 w-7 text-blue-500" />
            <span>Upcoming Consultations</span>
          </h2>

          {loading && (
            <p className="text-center text-gray-500">
              Loading upcoming consultations...
            </p>
          )}
          {error && (
            <div className="rounded-md bg-red-50 p-4">
              <div className="flex">
                <div className="flex-shrink-0">
                  <AlertTriangle
                    className="h-5 w-5 text-red-400"
                    aria-hidden="true"
                  />
                </div>
                <div className="ml-3">
                  <h3 className="text-sm font-medium text-red-800">Error</h3>
                  <div className="mt-2 text-sm text-red-700">
                    <p>{error}</p>
                  </div>
                </div>
              </div>
            </div>
          )}

          {upcomingConsultations.length === 0 && !loading && !error ? (
            <p className="text-center text-gray-500">
              No upcoming consultations found.
            </p>
          ) : (
            <ul className="divide-y divide-gray-200">
              {upcomingConsultations.map((consultation) => (
                <li key={consultation.id} className="py-4">
                  <div className="flex flex-row justify-between items-center">
                    <div>
                      <p className="text-lg font-semibold text-gray-700 flex items-center space-x-2">
                        <Calendar className="h-5 w-5 text-blue-400" />
                        <span>
                          {new Date(consultation.date).toLocaleDateString()}
                        </span>
                      </p>
                      <p className="text-gray-600 flex items-center space-x-2">
                        <Clock className="h-4 w-4 text-gray-400" />
                        <span>Time: {consultation.time}</span>
                      </p>
                      <p className="text-gray-600">
                        Status: {consultation.status}
                      </p>
                    </div>
                    <div className="flex space-x-3">
                      <Link
                        to={`/consultantdetails/${consultation.consultantId}`}
                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                      >
                        View Consultant
                      </Link>
                      {consultation.status === "accepted" ||
                        (consultation.status === "pending" && (
                          <button
                            className="flex items-center gap-1 bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg shadow-md transition"
                            onClick={() =>
                              showCancelConfirmation(
                                consultation.id,
                                consultation.date
                              )
                            }
                          >
                            <X className="h-5 w-5" />
                            Cancel
                          </button>
                        ))}
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </section>

        {/* Past Consultations */}
        <section className="p-8 bg-gray-50">
          <h2 className="text-3xl font-semibold text-gray-800 mb-6 flex items-center space-x-2">
            <Calendar className="h-7 w-7 text-blue-500" />
            <span>Past Consultations</span>
          </h2>

          {loading && (
            <p className="text-center text-gray-500">
              Loading past consultations...
            </p>
          )}
          {error && (
            <div className="rounded-md bg-red-50 p-4">
              <div className="flex">
                <div className="flex-shrink-0">
                  <AlertTriangle
                    className="h-5 w-5 text-red-400"
                    aria-hidden="true"
                  />
                </div>
                <div className="ml-3">
                  <h3 className="text-sm font-medium text-red-800">Error</h3>
                  <div className="mt-2 text-sm text-red-700">
                    <p>{error}</p>
                  </div>
                </div>
              </div>
            </div>
          )}

          {pastConsultations.length === 0 && !loading && !error ? (
            <p className="text-center text-gray-500">
              No past consultations found.
            </p>
          ) : (
            <ul className="divide-y divide-gray-200">
              {pastConsultations.map((consultation) => (
                <li key={consultation.id} className="py-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-center">
                    <div>
                      <p className="text-lg font-semibold text-gray-700 flex items-center space-x-2">
                        <Calendar className="h-5 w-5 text-blue-400" />
                        <span>
                          {new Date(consultation.date).toLocaleDateString()}
                        </span>
                      </p>
                      <p className="text-gray-600 flex items-center space-x-2">
                        <Clock className="h-4 w-4 text-gray-400" />
                        <span>Time: {consultation.time}</span>
                      </p>
                      <p className="text-gray-600">
                        Status: {consultation.status}
                      </p>
                    </div>
                    {/* <Link
                                        to={`/consultantdetails/${consultation.consultantId}`}
                                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                                    >
                                        View Consultant
                                    </Link>*/}
                  </div>
                </li>
              ))}
            </ul>
          )}
        </section>
      </div>

      {/* Cancel Confirmation Popup */}
      {cancelConfirmation.show && (
        <div className="fixed z-10 inset-0 overflow-y-auto">
          <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div className="fixed inset-0 transition-opacity" aria-hidden="true">
              <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>

            <span
              className="hidden sm:inline-block sm:align-middle sm:h-screen"
              aria-hidden="true"
            >
              ​
            </span>

            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div className="sm:flex sm:items-start">
                  <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                    <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                  </div>
                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                    <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                      Cancel Consultation
                    </h3>
                    <div className="mt-2">
                      <p className="text-sm text-gray-500">
                        Are you sure you want to cancel this consultation?
                        Please note that a 5% cancellation fee will be applied, and the GST amount is non-refundable.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button
                  type="button"
                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
                  onClick={handleCancelBooking}
                >
                  Confirm Cancellation
                </button>
                <button
                  type="button"
                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
                  onClick={hideCancelConfirmation}
                >
                  Go Back
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default ConsultationDashboard;
// File: frontend/src/pages/ContactUs.jsx
import React, { useState } from 'react';
import { Phone, Mail, MapPin } from 'lucide-react';
import { submitContactForm } from '../utils/api';

const ContactUs = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');
  const [successMessage, setSuccessMessage] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!name || !email || !subject || !message) {
      setError('Please fill in all fields.');
      setSuccessMessage('');
      return;
    }

    try {
      await submitContactForm(name, email, subject, message);
      setSuccessMessage('Form submitted successfully!');
      setError('');
      setName('');
      setEmail('');
      setSubject('');
      setMessage('');
    } catch (err) {
      console.error('Form submission failed:', err);  // Keep the console log for debugging
      setError('Failed to submit the form. Please try again.'); // Display error to the user
      setSuccessMessage('');
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-300 to-purple-400 p-10">
      {/* Contact Information */}
      <section className="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8 mb-12">
        <h2 className="text-3xl font-semibold text-gray-800 text-center mb-6">
          Contact Us
        </h2>
        <div className="md:flex md:justify-between">
          <div className="mb-6 md:mb-0">
            <h3 className="text-lg font-semibold mb-4">Our Information</h3>
            <p className="text-gray-700 flex items-center mb-2">
              <Phone className="mr-2 h-5 w-5 text-blue-500" />
              +1 (555) 123-4567
            </p>
            <p className="text-gray-700 flex items-center mb-2">
              <Mail className="mr-2 h-5 w-5 text-green-500" />
              info@healthconsultant.com
            </p>
            <p className="text-gray-700 flex items-center">
              <MapPin className="mr-2 h-5 w-5 text-red-500" />
              123 Health Street, Cityville
            </p>
          </div>

          {/* Contact Form */}
          <form className="w-full md:w-1/2" onSubmit={handleSubmit}>
            {error && (
              <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
                <span className="block sm:inline">{error}</span>
              </div>
            )}

            {successMessage && (
              <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
                <span className="block sm:inline">{successMessage}</span>
              </div>
            )}

            <div className="mb-4">
              <label htmlFor="name" className="block text-gray-700 text-sm font-bold mb-2">
                Name
              </label>
              <input
                type="text"
                id="name"
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                placeholder="Your Name"
                value={name}
                onChange={(e) => setName(e.target.value)}
              />
            </div>

            <div className="mb-4">
              <label htmlFor="email" className="block text-gray-700 text-sm font-bold mb-2">
                Email
              </label>
              <input
                type="email"
                id="email"
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                placeholder="Your Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>

            <div className="mb-4">
              <label htmlFor="subject" className="block text-gray-700 text-sm font-bold mb-2">
                Subject
              </label>
              <input
                type="text"
                id="subject"
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                placeholder="Subject"
                value={subject}
                onChange={(e) => setSubject(e.target.value)}
              />
            </div>

            <div className="mb-6">
              <label htmlFor="message" className="block text-gray-700 text-sm font-bold mb-2">
                Message
              </label>
              <textarea
                id="message"
                rows="4"
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                placeholder="Your Message"
                value={message}
                onChange={(e) => setMessage(e.target.value)}
              />
            </div>

            <div className="flex items-center justify-between">
              <button
                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                type="submit"
              >
                Submit
              </button>
            </div>
          </form>
        </div>
      </section>
    </div>
  );
};

export default ContactUs;

// File: frontend/src/pages/HealthRecords.jsx
import React, { useState, useEffect } from 'react';
import { getHealthRecords, createHealthRecord } from '../utils/api';
import { FilePlus, FileText } from 'lucide-react';

const HealthRecords = () => {
  const [healthRecords, setHealthRecords] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [medicalHistory, setMedicalHistory] = useState('');
  const [ongoingTreatments, setOngoingTreatments] = useState('');
  const [prescriptions, setPrescriptions] = useState('');
  const [successMessage, setSuccessMessage] = useState('');

  useEffect(() => {
    const fetchHealthRecords = async () => {
      setLoading(true);
      setError('');
      try {
        const token = localStorage.getItem('token');
        if (!token) {
          setError('Authentication required. Please login.');
          return;
        }

        const data = await getHealthRecords(token);
        setHealthRecords(data);
      } catch (err) {
        setError('Failed to retrieve health records. Please try again.');
        setHealthRecords([]);
        console.error('Failed to fetch health records:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchHealthRecords();
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    setSuccessMessage('');

    try {
      const token = localStorage.getItem('token');
      if (!token) {
        setError('Authentication required. Please login.');
        return;
      }

      await createHealthRecord(token, medicalHistory, ongoingTreatments, prescriptions);
      setMedicalHistory('');
      setOngoingTreatments('');
      setPrescriptions('');
      setSuccessMessage('Health record added successfully!');

      // Refresh health records after adding a new one
      const data = await getHealthRecords(token);
      setHealthRecords(data);
    } catch (err) {
      setError('Failed to create health record. Please try again.');
      console.error('Failed to create health record:', err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-300 to-purple-400 py-12 px-6">
      <div className="container mx-auto">
        {/* Medical History */}
        <section className="bg-white rounded-2xl shadow-xl p-8 mb-8">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-3xl font-semibold text-gray-800 flex items-center">
              <FileText className="inline-block h-8 w-8 mr-2 text-green-500" />
              My Health Records
            </h2>
          </div>

          {loading && <p className="text-center text-gray-600">Loading health records...</p>}
          {error && <p className="text-center text-red-500">{error}</p>}

          {healthRecords.length === 0 && !loading && !error ? (
            <p className="text-center text-gray-600">No health records found.</p>
          ) : (
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Record ID
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Medical History
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Ongoing Treatments
                    </th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Prescriptions
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {healthRecords.map((record) => (
                    <tr key={record.id}>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-gray-900">{record.id}</div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="text-sm text-gray-900">{record.medicalHistory}</div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="text-sm text-gray-900">{record.ongoingTreatments}</div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="text-sm text-gray-900">{record.prescriptions}</div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>

        {/* Add Record Form */}
        <section className="bg-white rounded-2xl shadow-xl p-8">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-semibold text-gray-800 flex items-center">
              <FilePlus className="inline-block h-6 w-6 mr-2 text-green-500" />
              Add New Health Record
            </h2>
          </div>


          {successMessage && (
            <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
              <span className="block sm:inline">{successMessage}</span>
            </div>
          )}

          <form onSubmit={handleSubmit}>
            <div className="mb-4">
              <label htmlFor="medicalHistory" className="block text-gray-700 text-sm font-bold mb-2">
                Medical History
              </label>
              <textarea
                id="medicalHistory"
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                value={medicalHistory}
                onChange={(e) => setMedicalHistory(e.target.value)}
                rows="4"
                required
              />
            </div>

            <div className="mb-4">
              <label htmlFor="ongoingTreatments" className="block text-gray-700 text-sm font-bold mb-2">
                Ongoing Treatments
              </label>
              <textarea
                id="ongoingTreatments"
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                value={ongoingTreatments}
                onChange={(e) => setOngoingTreatments(e.target.value)}
                rows="4"
                required
              />
            </div>

            <div className="mb-6">
              <label htmlFor="prescriptions" className="block text-gray-700 text-sm font-bold mb-2">
                Prescriptions
              </label>
              <textarea
                id="prescriptions"
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                value={prescriptions}
                onChange={(e) => setPrescriptions(e.target.value)}
                rows="4"
                required
              />
            </div>

            <button
              type="submit"
              className="bg-gradient-to-r from-green-400 to-green-600 hover:from-green-600 hover:to-green-400 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-colors duration-300"
            >
              Add Record
            </button>
          </form>
        </section>
      </div>
    </div>
  );
};

export default HealthRecords;
// File: frontend/src/pages/Homepage.jsx
import React from 'react';
import { Link } from 'react-router-dom';
import { Home, Phone, User, LogOut } from 'lucide-react';

const Homepage = () => {
  return (
    <div className="min-h-screen bg-gray-100 p-10">
      {/* Hero Section */}
      <section className="bg-gradient-to-br from-blue-100 to-purple-100 rounded-2xl shadow-xl p-8 md:p-16 text-center">
        <h1 className="text-4xl md:text-6xl font-bold text-gray-800 mb-4">
          Find the Best Health Consultant
        </h1>
        <p className="text-lg md:text-xl text-gray-700 mb-8">
          Connect with qualified health consultants and get personalized advice for a healthier life.
        </p>
        <Link
          to="/consultantsearch"
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-colors duration-300"
        >
          Find a Consultant
        </Link>
      </section>

      {/* Features Section */}
      <section className="mt-16">
        <h2 className="text-3xl font-semibold text-gray-800 text-center mb-8">
          Our Key Features
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {/* Feature 1 */}
          <div className="bg-white rounded-2xl shadow-md p-6 hover:shadow-lg transition-shadow duration-300">
            <Home className="h-8 w-8 text-blue-500 mb-4" />
            <h3 className="text-xl font-semibold text-gray-700 mb-2">
              Expert Consultants
            </h3>
            <p className="text-gray-600">
              Connect with experienced and qualified health consultants in various specialties.
            </p>
          </div>
          {/* Feature 2 */}
          <div className="bg-white rounded-2xl shadow-md p-6 hover:shadow-lg transition-shadow duration-300">
            <Phone className="h-8 w-8 text-green-500 mb-4" />
            <h3 className="text-xl font-semibold text-gray-700 mb-2">
              Personalized Advice
            </h3>
            <p className="text-gray-600">
              Receive tailored health advice and guidance based on your unique needs and concerns.
            </p>
          </div>
          {/* Feature 3 */}
          <div className="bg-white rounded-2xl shadow-md p-6 hover:shadow-lg transition-shadow duration-300">
            <User className="h-8 w-8 text-purple-500 mb-4" />
            <h3 className="text-xl font-semibold text-gray-700 mb-2">
              Secure Platform
            </h3>
            <p className="text-gray-600">
              Your health information is safe and secure with our encrypted platform.
            </p>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="mt-16">
        <h2 className="text-3xl font-semibold text-gray-800 text-center mb-8">
          What Our Users Say
        </h2>
        <div className="flex flex-col md:flex-row items-center justify-center gap-8">
          {/* Testimonial 1 */}
          <div className="bg-white rounded-2xl shadow-md p-6 w-full md:w-1/3">
            <img
              className="h-16 w-16 rounded-full mx-auto mb-4"
              src="https://placehold.co/64x64"
              alt="User Avatar"
            />
            <p className="text-gray-700 text-center mb-2">
              "This platform has been a game-changer for managing my health. I highly recommend it!"
            </p>
            <p className="text-gray-600 font-semibold text-center">
              - Sarah Johnson
            </p>
          </div>
          {/* Testimonial 2 */}
          <div className="bg-white rounded-2xl shadow-md p-6 w-full md:w-1/3">
            <img
              className="h-16 w-16 rounded-full mx-auto mb-4"
              src="https://placehold.co/64x64"
              alt="User Avatar"
            />
            <p className="text-gray-700 text-center mb-2">
              "I found the perfect consultant for my needs. The process was easy and efficient."
            </p>
            <p className="text-gray-600 font-semibold text-center">
              - Michael Davis
            </p>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Homepage;
// File: frontend/src/pages/Login.jsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Mail, Lock } from 'lucide-react';
import { loginUser } from '../utils/api';

const Login = ({ setIsLoggedIn, setUserRole, setIsConsultant, setIsApproved, onLoginSuccess, setProfilePicture }) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const navigate = useNavigate();

    const handleSubmit = async (e) => {
        e.preventDefault();
        setError('');

        if (!email || !password) {
            setError('Please fill in all fields.');
            return;
        }

        try {
            const data = await loginUser(email, password);

            // Store necessary data in local storage
            localStorage.setItem('token', data.token);
            localStorage.setItem('userRole', data.role);
            localStorage.setItem('isConsultant', data.isConsultant);
            localStorage.setItem('isApproved', String(data.isApproved)); // Ensure it's a string
            localStorage.setItem('userId', String(data.userId)); // Store userId

            // Update state in App.jsx
            setIsLoggedIn(true);
            setUserRole(data.role);
            setIsConsultant(data.isConsultant === 1 || data.isConsultant === true);
            setIsApproved(Boolean(data.isApproved));
            setProfilePicture(data.profilePicture);

            // Call the callback function to notify the parent component about the successful login
            onLoginSuccess(data.role, data.isConsultant, data.isApproved);


            if (data.role === 'consultant') {
                navigate('/consultantdashboard');
            } else if (data.role === 'admin') {
                navigate('/admindashboard');
            } else {
                navigate('/consultationdashboard');
            }
        } catch (err) {
            setError('Invalid email or password. Please try again.');
            console.error('Login failed:', err);
        }
    };

    return (
        <div className="min-h-screen bg-gray-100 flex items-center justify-center">
            <div className="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full">
                <h2 className="text-3xl font-semibold text-gray-800 text-center mb-6">
                    Login
                </h2>

                {error && (
                    <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
                        <span className="block sm:inline">{error}</span>
                    </div>
                )}

                <form onSubmit={handleSubmit}>
                    <div className="mb-4">
                        <label htmlFor="email" className="block text-gray-700 text-sm font-bold mb-2">
                            Email
                        </label>
                        <div className="relative">
                            <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <Mail className="w-5 h-5 text-gray-500" />
                            </div>
                            <input
                                type="email"
                                id="email"
                                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline pl-10"
                                placeholder="Email Address"
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                            />
                        </div>
                    </div>

                    <div className="mb-6">
                        <label htmlFor="password" className="block text-gray-700 text-sm font-bold mb-2">
                            Password
                        </label>
                        <div className="relative">
                            <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <Lock className="w-5 h-5 text-gray-500" />
                            </div>
                            <input
                                type="password"
                                id="password"
                                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline pl-10"
                                placeholder="Password"
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                            />
                        </div>
                    </div>

                    <div className="flex items-center justify-between">
                        <button
                            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full focus:outline-none focus:shadow-outline"
                            type="submit"
                        >
                            Login
                        </button>
                        <a className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
                            Forgot Password?
                        </a>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default Login;
// File: frontend/src/pages/MessagingPage.jsx
import React, { useState, useEffect, useRef } from "react";
import axios from "axios";
import {
  sendMessage,
  updateChatRequest,
  getMessages,
  getChatRequests,
} from "../utils/api";
import {
  User,
  Clock,
  Send,
  Paperclip,
  ImagePlus,
  Loader2,
  AlertCircle,
} from "lucide-react";
import { Calendar, Eye, X, Check } from "lucide-react";
import { use } from "react";

const MessagingPage = () => {
  const [chatRequests, setChatRequests] = useState([]);
  const [selectedChatRequestId, setSelectedChatRequestId] = useState(null);
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");
  const [ispending, setIspending] = useState(true);
  const [userId, setUserId] = useState(localStorage.getItem("userId") || "");
  const [isConsultant, setIsConsutant] = useState(false);
  const [profilePicture, setProfilePicture] = useState(
    localStorage.getItem("profilePicture") || "https://via.placeholder.com/150"
  ); // Placeholder URL
  const messagesEndRef = useRef(null);

  useEffect(() => {
    const fetchChatRequests = async () => {
      setIsLoading(true);
      setError("");

      try {
        const data = await getChatRequests();
        setChatRequests(data);
        console.log(data);
        const ic = data[0]?.consultantId?.toString() == userId?.toString();
        setIsConsutant(ic);
      } catch (error) {
        setError("");
        console.error(error);
      } finally {
        setIsLoading(false);
      }
    };
    fetchChatRequests();
  }, []);

  useEffect(() => {
    const fetchMessages = async () => {
      if (!selectedChatRequestId) return;

      setIsLoading(true);
      const data = await getMessages(selectedChatRequestId);

      setMessages(data);
      setIsLoading(false);
    };

    fetchMessages();
  }, [selectedChatRequestId]);

  useEffect(() => {
    const isPending = (reqs) => reqs.filter((req) => req.id === selectedChatRequestId)
    const p =isPending(chatRequests)[0]?.status == "pending";
    setIspending(p);
    console.log(p)
  }, [chatRequests, selectedChatRequestId]);

//   useEffect(() => {
//     // Scroll to bottom on message change
//     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
//   }, [messages]);

  const handleSendMessage = async () => {
    if (!newMessage.trim()) return; // Prevent sending empty messages

    try {
      const token = localStorage.getItem("token");
      if (!token) {
        setError("Authentication required. Please login.");
        return;
      }
      await sendMessage(token, selectedChatRequestId, newMessage);

      // After sending, fetch the messages again (optimistic update could be used here)
      const response = await getMessages(selectedChatRequestId);
      setMessages(response);
      setNewMessage("");
    } catch (error) {
      setError("Failed to send message.");
      console.error(error);
    }
  };

  const handleEnterPress = (e) => {
    if (e.key === "Enter") {
      handleSendMessage();
    }
  };

  const handleRequest = async (requestId, status) => {
    try {
      const token = localStorage.getItem("token");
      if (!token) {
        setError("Authentication required. Please login.");
        return;
      }
      await updateChatRequest(token, requestId, status);
      const data = await getChatRequests();
      setChatRequests(data);
    } catch (error) {
      setError("Failed to send message.");
      console.error(error);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 flex items-center justify-center py-10">
      <div className="container mx-auto shadow-xl rounded-3xl overflow-hidden flex flex-col md:flex-row w-full max-w-8xl min-h-[85vh] border border-indigo-100">
        {/* Left Sidebar - Chat List */}
        <aside className="bg-white border-r border-gray-200 w-full md:w-1/3 p-4 flex flex-col">
          <h2 className="font-semibold text-gray-800 mb-3 flex items-center space-x-2">
            <User className="h-5 w-5 text-gray-500" />
            <span>{"Chats"}</span>
          </h2>

          {isLoading && (
            <div className="text-center text-gray-500 py-4">
              <Loader2 className="animate-spin inline-block mr-2" />
              Loading chats...
            </div>
          )}

          {error && (
            <div className="text-red-500 py-4 flex items-center">
              <AlertCircle className="h-4 w-4 mr-2" />
              {error}
            </div>
          )}

          {!isLoading && !error && chatRequests.length === 0 && (
            <p className="text-gray-500 py-4">No chats available.</p>
          )}

          <ul className="flex-grow overflow-y-auto">
            {chatRequests.map((req) => (
              <li key={req.id} onClick={() => setSelectedChatRequestId(req.id)}>
                <div
                  className={`flex items-center justify-between space-x-3 mt-2 py-3 px-4 rounded-xl transition-colors duration-200 hover:bg-gray-100 cursor-pointer ${
                    selectedChatRequestId === req.id
                      ? "bg-blue-100 font-semibold text-blue-800"
                      : "text-gray-700"
                  }`}
                >
                  <div className="flex flex-row space-x-3 ">
                    {isConsultant ? (
                      <>
                        <img
                          src={`http://localhost:5555/${req.userProfilePicture}`}
                          alt={`${req.userName}'s Profile`}
                          className="w-10 h-10 rounded-full object-cover shadow-inner"
                          onError={(e) => {
                            e.target.onerror = null;
                            e.target.src = profilePicture;
                          }} // Prevent broken images
                        />
                        <div className="flex flex-col overflow-hidden">
                          <span className="text-sm font-medium truncate">
                            {req.userName}
                          </span>
                          <div className="flex items-center space-x-1 text-xs text-gray-500">
                            <Clock className="h-4 w-4" />
                            <span className="truncate">
                              {new Date(req.bookingDate).toLocaleDateString()} /{" "}
                              {req.bookingTime.split(':').slice(0, 2).join(':')}
                            </span>
                          </div>
                        </div>
                      </>
                    ) : (
                      <>
                        <img
                          src={`http://localhost:5555/${req .consultantProfilePicture}`}
                          alt={`${req.consultantName}'s Profile`}
                          className="w-10 h-10 rounded-full object-cover shadow-inner"
                          onError={(e) => {
                            e.target.onerror = null;
                            e.target.src = profilePicture;
                          }} // Prevent broken images
                        />
                        <div className="flex flex-col overflow-hidden">
                          <span className="text-sm font-medium truncate">
                            Dr. {req.consultantName}
                          </span>
                          <div className="flex items-center space-x-1 text-xs text-gray-500">
                            <Clock className="h-4 w-4" />
                            <span className="truncate">
                              {new Date(req.bookingDate).toLocaleDateString()} /{" "}
                              {req.bookingTime.split(':').slice(0, 2).join(':')}
                            </span>
                          </div>
                        </div>
                      </>
                    )}
                  </div>
                  {ispending && isConsultant && (
                    <div className="flex flex-row space-x-2">
                      <button
                        className="flex items-center cursor-pointer gap-1 bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg shadow-md transition"
                        onClick={() => handleRequest(req.id, "accepted")}
                      >
                        <Check className="h-5 w-5" />
                      </button>
                      <button
                        className="flex items-center  cursor-pointer gap-1 bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg shadow-md transition"
                        onClick={() => handleRequest(req.id, "rejected")}
                      >
                        <X className="h-5 w-5" />
                      </button>
                    </div>
                  )}
                </div>
              </li>
            ))}
          </ul>
        </aside>

        {/* Right Main - Chat Messages */}
        <main className="bg-blue-50 w-full md:w-2/3 flex flex-col">
          {selectedChatRequestId ? (
            <>
              {/* Message Area */}
              <div className="flex-grow p-4 space-y-2 overflow-y-auto max-h-[80vh]">
                {messages.map((msg) => (
                  <div
                    key={msg.id}
                    className={`rounded-2xl p-3 text-sm break-words max-w-[60%] shadow-sm ${
                      msg.senderId === parseInt(userId)
                        ? "bg-blue-200 ml-auto text-gray-800"
                        : "bg-white mr-auto text-gray-700"
                    }`}
                  >
                    {msg.message}
                    <div className="text-right text-xs opacity-70 mt-1">
                      {new Date(msg.timestamp).toLocaleTimeString()}
                    </div>
                  </div>
                ))}
                <div ref={messagesEndRef} /> {/* Scroll anchor */}
              </div>

              {/* Input Area */}
              <div
                className={`p-4 border-t border-gray-200 ${
                  ispending ? "pointer-events-none opacity-50" : ""
                }`}
              >
                <div className="flex items-center space-x-3">
                  <input
                    type="text"
                    value={newMessage}
                    onChange={(e) => setNewMessage(e.target.value)}
                    onKeyDown={handleEnterPress}
                    placeholder={ispending ? (isConsultant ? "Accept the message request to continue this chat":"Your consultant has't yet accepted your message request") : "Type your message..."}
                    disabled={ispending} // Properly disables the input
                    className="flex-grow border border-gray-300 rounded-full px-4 py-2 focus:ring-2 focus:ring-blue-200 outline-none disabled:bg-gray-100 disabled:cursor-not-allowed"
                  />
                  <button
                    onClick={!ispending ? handleSendMessage : null}
                    disabled={ispending} // Properly disables the button
                    className={`bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full flex items-center space-x-2 shadow-md transition-colors duration-200 disabled:bg-gray-400 disabled:cursor-not-allowed`}
                  >
                    <Send className="h-5 w-5" />
                    <span>Send</span>
                  </button>
                </div>
              </div>
            </>
          ) : (
            // No Chat Selected
            <div className="flex items-center justify-center h-full text-gray-500 text-lg">
              Select a chat to start messaging.
            </div>
          )}
        </main>
      </div>
    </div>
  );
};

export default MessagingPage;

// File: frontend/src/pages/NotFound.jsx
import React from 'react';
import { Link } from 'react-router-dom';
import { Home } from 'lucide-react';

const NotFound = () => {
  return (
    <div className="min-h-screen bg-gray-100 p-10 flex flex-col items-center justify-center">
      {/* Error Message */}
      <section className="text-center mb-8">
        <h2 className="text-4xl font-bold text-gray-800 mb-4">
          404 Not Found
        </h2>
        <p className="text-gray-700 leading-relaxed">
          Oops! The page you are looking for could not be found.
        </p>
      </section>

      {/* Back to Home Button */}
      <Link
        to="/"
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-colors duration-300 flex items-center"
      >
        <Home className="mr-2 h-5 w-5" />
        Back to Home
      </Link>
    </div>
  );
};

export default NotFound;
// File: frontend/src/pages/Payment.jsx
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { getPayments } from '../utils/api';
import { CreditCard, Plus } from 'lucide-react';

const Payment = () => {
  const [payments, setPayments] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    const fetchPayments = async () => {
      setLoading(true);
      setError('');
      try {
        const token = localStorage.getItem('token');
        if (!token) {
          setError('Authentication required. Please login.');
          return;
        }

        const data = await getPayments(token);
        setPayments(data);
      } catch (err) {
        setError('Failed to retrieve payments. Please try again.');
        setPayments([]);
        console.error('Failed to fetch payments:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchPayments();
  }, []);

  return (
    <div className="min-h-screen bg-gray-100 p-10">
      {/* Payment History */}
      <section className="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8 mb-8">
        <h2 className="text-3xl font-semibold text-gray-800 mb-4">
          Payment History
        </h2>

        {loading && <p className="text-center">Loading payment history...</p>}
        {error && <p className="text-center text-red-500">{error}</p>}

        {payments.length === 0 && !loading && !error ? (
          <p className="text-center">No payment history found.</p>
        ) : (
          <ul className="divide-y divide-gray-200">
            {payments.map((payment) => (
              <li key={payment.id} className="py-4">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-lg font-semibold text-gray-700">
                      <CreditCard className="inline-block h-5 w-5 mr-1" />
                      Payment ID: {payment.id}
                    </p>
                    <p className="text-gray-600">
                      Date: {payment.date}
                    </p>
                    <p className="text-gray-600">
                      Amount: ${payment.amount}
                    </p>
                    <p className="text-gray-600">
                      Status: {payment.status}
                    </p>
                  </div>
                </div>
              </li>
            ))}
          </ul>
        )}
      </section>

      {/* Payment Method (Placeholder) */}
      <section className="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8 mb-8">
        <h2 className="text-3xl font-semibold text-gray-800 mb-4">
          Payment Method
        </h2>
        <p className="text-gray-700">
          Visa ending in 4242
        </p>
      </section>

      {/* Add Payment Method Button */}
      <div className="max-w-4xl mx-auto text-center">
        <Link
          to="#"
          className="bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-colors duration-300 inline-flex items-center"
        >
          <Plus className="mr-2 h-5 w-5" />
          Add New Payment Method
        </Link>
      </div>
    </div>
  );
};

export default Payment;
// File: frontend/src/pages/PrivacyPolicy.jsx
import React from 'react';

const PrivacyPolicy = () => {
  return (
    <div className="min-h-screen bg-gray-100 p-10">
      {/* Privacy Policy Text */}
      <section className="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8">
        <h2 className="text-3xl font-semibold text-gray-800 text-center mb-6">
          Privacy Policy
        </h2>
        <p className="text-gray-700 leading-relaxed mb-4">
          Your privacy is important to us. It is Health Consultant's policy to
          respect your privacy regarding any information we may collect from you
          across our website,{' '}
          <a href="/" className="text-blue-500 hover:underline">
            healthconsultant.com
          </a>
          , and other sites we own and operate.
        </p>

        <h3 className="text-2xl font-semibold text-gray-800 mb-4">
          Information We Collect
        </h3>
        <p className="text-gray-700 leading-relaxed mb-4">
          We collect information in the following ways:
        </p>
        <ul className="list-disc pl-5 mb-4">
          <li>
            <strong>Information you directly provide to us</strong>: When you register
            on our website, we may ask for your name, email address, phone
            number, etc.
          </li>
          <li>
            <strong>Information automatically collected</strong>: When you visit our
            website, we may automatically collect certain information such as
            your IP address, device type, browser type, etc.
          </li>
        </ul>

        <h3 className="text-2xl font-semibold text-gray-800 mb-4">
          How We Use Your Information
        </h3>
        <p className="text-gray-700 leading-relaxed mb-4">
          We may use the information we collect from you to:
        </p>
        <ul className="list-disc pl-5 mb-4">
          <li>Provide, operate, and maintain our website</li>
          <li>Improve, personalize, and expand our website</li>
          <li>Understand and analyze how you use our website</li>
          <li>Develop new products, services, features, and functionality</li>
          <li>Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the website, and for marketing and promotional purposes</li>
        </ul>

        <h3 className="text-2xl font-semibold text-gray-800 mb-4">
          Sharing Your Information
        </h3>
        <p className="text-gray-700 leading-relaxed mb-4">
          We may share your information with third parties in the following
          circumstances:
        </p>
        <ul className="list-disc pl-5 mb-4">
          <li>With your consent</li>
          <li>With service providers who perform services on our behalf</li>
          <li>For legal reasons</li>
        </ul>

        <h3 className="text-2xl font-semibold text-gray-800 mb-4">
          Security
        </h3>
        <p className="text-gray-700 leading-relaxed mb-4">
          We take reasonable measures to protect your information from
          unauthorized access, use, or disclosure.
        </p>

        <h3 className="text-2xl font-semibold text-gray-800 mb-4">
          Changes to This Privacy Policy
        </h3>
        <p className="text-gray-700 leading-relaxed mb-4">
          We may update our Privacy Policy from time to time. We will notify you
          of any changes by posting the new Privacy Policy on this page.
        </p>

        <p className="text-gray-700 leading-relaxed">
          This policy is effective as of June 13, 2024.
        </p>
      </section>
    </div>
  );
};

export default PrivacyPolicy;
// File: frontend/src/pages/Register.jsx
// File: Register.jsx
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Mail, Lock, User } from "lucide-react";

// Material-UI Components
import {
  Stepper,
  Step,
  StepLabel,
  Button,
  Typography,
  Box,
  Alert,
  Grid,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  TextField,
} from "@mui/material";

import RegisterForm from "../components/RegisterForm";

import { registerUser } from "../utils/api";

const getSteps = (role) => {
  if (role === "consultant") {
    return ["Basic Information", "Professional Details", "Bank Details & Fees"];
  } else {
    return ["Basic Information", "Medical Information"];
  }
};

const Register = () => {
  const [activeStep, setActiveStep] = useState(0);
  const [skipped, setSkipped] = useState(new Set());

  const [role, setRole] = useState("user");
  const steps = getSteps(role);

  const [formData, setFormData] = useState({
    fullName: "",
    email: "",
    password: "",
    confirmPassword: "",
    phone: "",
    bio: "",
    qualification: "",
    areasOfExpertise: "",
    speciality: "",
    availability: "",
    bloodGroup: "",
    medicalHistory: "",
    currentPrescriptions: "",
    profilePicture: null,
    //certificates: null, // Consultant only - Multiple files
    bankAccount: "", // Consultant only
    consultingFees: "", // Consultant only
  });

  const [certificateData, setCertificateData] = useState([{ file: null, name: '' }]);

  const [error, setError] = useState("");
  const navigate = useNavigate();

  const isStepOptional = (step) => {
    return false; // No steps are optional right now.
  };

  const isStepSkipped = (step) => {
    return skipped.has(step);
  };

  const validateForm = (step) => {
    let errors = {};

    if (!formData.fullName || formData.fullName.trim() === "") {
      return "Name is required";
    }

    if (!formData.email || formData.email.trim() === "") {
      return "Email is required";
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      return "Invalid email format";
    }

    if (!formData.phone || formData.phone.trim() === "") {
      return "Phone no. is required";
    } else if (
      !/^\+?\d{1,4}?[-.\s]?\(?\d{1,3}?\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}[-.\s]?\d{1,9}$/.test(
        formData.phone
      )
    ) {
      return "Invalid phone no.";
    }

    if (!formData.password || formData.password.length < 6) {
      return "Password must be at least 6 characters long";
    }

    if (formData.password != formData.confirmPassword) {
      return "Passwords won't match";
    }

    if (role === "consultant") {
      if (step === 1) { // Professional Details Validation
        if (!formData.bio || formData.bio.trim() === "") {
          return "Bio is required";
        }

        if (!formData.qualification || formData.qualification.trim() === "") {
          return "Qualification is required";
        }

        if (
          !formData.areasOfExpertise ||
          formData.areasOfExpertise.trim() === ""
        ) {
          return "Areas of Expertise are required";
        }

        if (!formData.speciality || formData.speciality.trim() === "") {
          return "Speciality is required";
        }

         if (certificateData.some(item => !item.file || !item.name.trim())) {
              return "All certificates and names are required";
          }

        try {
          const availability = JSON.parse(formData.availability);
          if (Object.keys(availability).length === 0) {
            return "At least one availability slot must be selected";
          }
        } catch {
          errors.availability = "Invalid availability format";
        }
      } else if (step === 2) { // Bank Details & Fees Validation
        if (!formData.bankAccount || formData.bankAccount.trim() === "") {
          return "Bank Account is required";
        }
        if (!formData.consultingFees || isNaN(formData.consultingFees) || parseFloat(formData.consultingFees) <= 0) {
          return "Consulting Fees must be a valid positive number";
        }
      }
    }

    if (role === "user" && step) {
      if (!formData.bloodGroup || formData.bloodGroup.trim() === "") {
        return "Blood Group is required";
      }

      if (!formData.medicalHistory || formData.medicalHistory.trim() === "") {
        return "Medical History is required";
      }

      if (
        !formData.currentPrescriptions ||
        formData.currentPrescriptions.trim() === ""
      ) {
        return "Current Prescriptions are required";
      }
    }

    return null;
  };

  const handleNext = () => {
    setError("");

    var err;
    if (activeStep == steps.length - 1) {
      err = validateForm(2); //last Step Validate Step 2
    } else if (activeStep == 1) {
      err = validateForm(1); // Professional Details
    } else err = validateForm();
    if (err) {
      setError(err);
      return;
    }
    let newSkipped = skipped;
    if (isStepSkipped(activeStep)) {
      newSkipped = new Set(newSkipped.values());
      newSkipped.delete(activeStep);
    }

    setActiveStep((prevActiveStep) => prevActiveStep + 1);
    setSkipped(newSkipped);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleSkip = () => {
    if (!isStepOptional(activeStep)) {
      return;
    }

    setActiveStep((prevActiveStep) => prevActiveStep + 1);
    setSkipped((prevSkipped) => {
      const newSkipped = new Set(prevSkipped.values());
      newSkipped.add(activeStep);
      return newSkipped;
    });
  };

  const handleReset = () => {
    setActiveStep(0);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");

    try {
      const formDataToSend = new FormData();
for (const key in formData) {
    formDataToSend.append(key, formData[key]);
}

const certificateFiles = certificateData.map(item => item.file);
const certificateNames = certificateData.map(item => item.name);

certificateFiles.forEach(file => {
    formDataToSend.append("certificates", file);
});
formDataToSend.append("certificateNames", JSON.stringify(certificateNames));

formDataToSend.append("role", role);

      await registerUser(formDataToSend);
      navigate("/login");
    } catch (err) {
      setError("Registration failed. Please try again.");
      console.error("Registration failed:", err);
    }
  };

  const getStepContent = (step) => {
    switch (step) {
      case 0: // Basic Information and Role Selection
        return (
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <FormControl fullWidth>
                <InputLabel id="role-label">Registering as</InputLabel>
                <Select
                  labelId="role-label"
                  id="role"
                  value={role}
                  label="Registering as"
                  onChange={(e) => {
                    setRole(e.target.value);
                    setFormData((prev) => ({ ...prev })); // Reset to the first step when changing role
                  }}
                >
                  <MenuItem value="user">Looking for a Consultant</MenuItem>
                  <MenuItem value="consultant">A Consultant</MenuItem>
                </Select>
              </FormControl>
            </Grid>
            <Grid item xs={12}>
              <TextField
                fullWidth
                label="Full Name"
                name="fullName"
                value={formData.fullName}
                onChange={(e) =>
                  setFormData({ ...formData, fullName: e.target.value })
                }
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                fullWidth
                label="Email"
                name="email"
                value={formData.email}
                onChange={(e) =>
                  setFormData({ ...formData, email: e.target.value })
                }
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                fullWidth
                label="Phone Number"
                name="phone"
                value={formData.phone}
                onChange={(e) =>
                  setFormData({ ...formData, phone: e.target.value })
                }
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                fullWidth
                label="Password"
                name="password"
                type="password"
                value={formData.password}
                onChange={(e) =>
                  setFormData({ ...formData, password: e.target.value })
                }
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                fullWidth
                label="Confirm Password"
                name="confirmPassword"
                type="password"
                value={formData.confirmPassword}
                onChange={(e) =>
                  setFormData({ ...formData, confirmPassword: e.target.value })
                }
              />
            </Grid>
            <Grid
              item
              xs={12}
              sx={{ display: "flex", alignItems: "center", gap: 1 }}
            >
              Profile Picture
              <TextField
                type="file"
                label="Profile Picture"
                InputLabelProps={{ shrink: true }}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    profilePicture: e.target.files[0],
                  })
                }
              />
            </Grid>
          </Grid>
        );
      case 1:
        return (
          <RegisterForm
            formData={formData}
            setFormData={setFormData}
            role={role}
            certificateData={certificateData}
            setCertificateData={setCertificateData}
          />
        );
      case 2: // Bank Details & Fees (Consultant Only)
        return (
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <TextField
                fullWidth
                label="Bank Account Number"
                name="bankAccount"
                value={formData.bankAccount}
                onChange={(e) =>
                  setFormData({ ...formData, bankAccount: e.target.value })
                }
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                fullWidth
                label="Consulting Fees"
                name="consultingFees"
                type="number"
                value={formData.consultingFees}
                onChange={(e) =>
                  setFormData({ ...formData, consultingFees: e.target.value })
                }
              />
            </Grid>
          </Grid>
        );
      default:
        return "Unknown step";
    }
  };

  return (
    <Box sx={{ width: "100%" }}>
      <div className="min-h-screen bg-gray-100 flex items-center justify-center">
        <div className="bg-white rounded-2xl shadow-xl p-8 max-w-5xl w-full">
          <h2 className="text-3xl font-semibold text-gray-800 text-center mb-6">
            Register
          </h2>

          {error && <Alert severity="error">{error}</Alert>}

          <Stepper activeStep={activeStep}>
            {steps.map((label, index) => {
              const stepProps = {};
              const labelProps = {};
              if (isStepOptional(index)) {
                labelProps.optional = (
                  <Typography variant="caption">Optional</Typography>
                );
              }
              if (isStepSkipped(index)) {
                stepProps.completed = false;
              }
              return (
                <Step key={label} {...stepProps}>
                  <StepLabel {...labelProps}>{label}</StepLabel>
                </Step>
              );
            })}
          </Stepper>
          <br />
          {activeStep === steps.length ? (
            <React.Fragment>
              <Typography sx={{ mt: 2, mb: 1 }}>
                All steps completed - you're ready to register!
              </Typography>
              <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
                <Box sx={{ flex: "1 1 auto" }} />
                <Button onClick={handleReset}>Reset</Button>
                <Button onClick={handleSubmit}>Submit</Button>
              </Box>
            </React.Fragment>
          ) : (
            <React.Fragment>
              {getStepContent(activeStep)}
              <Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
                <Button
                  color="inherit"
                  disabled={activeStep === 0}
                  onClick={handleBack}
                  sx={{ mr: 1 }}
                >
                  Back
                </Button>
                <Box sx={{ flex: "1 1 auto" }} />
                {isStepOptional(activeStep) && (
                  <Button color="inherit" onClick={handleSkip} sx={{ mr: 1 }}>
                    Skip
                  </Button>
                )}

                <Button onClick={handleNext}>
                  {activeStep === steps.length - 1 ? "Submit" : "Next"}
                </Button>
              </Box>
            </React.Fragment>
          )}
          <Typography variant="body2" align="center" sx={{ mt: 2 }}>
            Already have an account? <a href="/login">Login</a>
          </Typography>
        </div>
      </div>
    </Box>
  );
};

export default Register;
// File: frontend/src/pages/Review.jsx
import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { getConsultantById, createReview } from '../utils/api';
import { Star } from 'lucide-react';

const Review = () => {
  const { id } = useParams();
  const [consultant, setConsultant] = useState(null);
  const [rating, setRating] = useState(4);
  const [reviewText, setReviewText] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [successMessage, setSuccessMessage] = useState('');
  const navigate = useNavigate();
  

  useEffect(() => {
    const fetchConsultant = async () => {
      setLoading(true);
      setError('');
      try {
        const data = await getConsultantById(id);
        console.log(data)
        setConsultant(data);
      } catch (err) {
        setError('Failed to retrieve consultant details. Please try again.');
        setConsultant(null);
        console.error('Failed to fetch consultant:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchConsultant();
  }, [id]);

  const handleRatingChange = (newRating) => {
    setRating(newRating);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    setSuccessMessage('');

    try {
      const token = localStorage.getItem('token');
      if (!token) {
        setError('Authentication required. Please login.');
        return;
      }

      await createReview(token, id, rating, reviewText);
      setSuccessMessage('Review submitted successfully!');
      setRating(0);
      setReviewText('');
      setTimeout(() => {
        navigate(`/consultantdetails/${id}`);
    }, 2000);
    } catch (err) {
      setError('Failed to submit review. Please try again.');
      console.error('Review submission failed:', err);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return <div className="text-center">Loading review page...</div>;
  }

  if (error) {
    return <div className="text-center text-red-500">{error}</div>;
  }

  if (!consultant) {
    return <div className="text-center">Consultant not found.</div>;
  }
   const isLoggedIn = localStorage.getItem('token') !== null;

  return (
    <div className="min-h-screen bg-gray-100 p-10">
      {/* Consultant Information */}
      <section className="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8 mb-8">
        <h2 className="text-3xl font-semibold text-gray-800 mb-2">
          Review for Dr. {consultant.consultant.fullName}
        </h2>
        <p className="text-xl text-gray-700 mt-4">
          Specialty: {consultant.consultant.speciality} <br/>
          Expertise: {consultant.consultant.areasOfExpertise}
        </p>
      </section>

      {/* Review Form */}
      <section className="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8">
        <form onSubmit={handleSubmit}>
          {/* Rating Stars */}
          <div className="mb-6">
            <label className="block text-gray-700 text-sm font-bold mb-2">
              Rating:
            </label>
            <div className="flex items-center">
              {[1, 2, 3, 4, 5].map((star) => (
                <button
                  key={star}
                  type="button"
                  className={`text-3xl ${star <= rating ? 'text-yellow-500' : 'text-gray-400'}`}
                  onClick={() => handleRatingChange(star)}
                >
                  <Star />
                </button>
              ))}
            </div>
          </div>

          {/* Review Text */}
          <div className="mb-6">
            <label htmlFor="reviewText" className="block text-gray-700 text-sm font-bold mb-2">
              Review:
            </label>
            <textarea
              id="reviewText"
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              placeholder="Write your review..."
              value={reviewText}
              onChange={(e) => setReviewText(e.target.value)}
              rows="4"
            />
          </div>

          {/* Submit Button */}
          <div className='flex flex-row justify-between items-baseline'>
          <button
            type="submit"
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-colors duration-300"
            disabled={!isLoggedIn}
          >
            Submit Review
          </button>
          <div className="text-gray-500 text-sm mb-4 cursor-pointer" onClick={() => window.history.back()}>
          Go back
        </div> 
        </div>
        </form>

        {successMessage && (
          <div className="mt-4 text-green-500">
            {successMessage}
          </div>
        )}
      </section>
    </div>
  );
};

export default Review;
// File: frontend/src/pages/TermsOfService.jsx
import React from 'react';

const TermsOfService = () => {
  return (
    <div className="min-h-screen bg-gray-100 p-10">
      {/* Terms of Service Text */}
      <section className="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8">
        <h2 className="text-3xl font-semibold text-gray-800 text-center mb-6">
          Terms of Service
        </h2>
        <p className="text-gray-700 leading-relaxed mb-4">
          Welcome to Health Consultant! These terms of service (&quot;Terms&quot;)
          govern your use of our website,{' '}
          <a href="/" className="text-blue-500 hover:underline">
            healthconsultant.com
          </a>
          , and related services. By accessing or using our services, you agree
          to be bound by these Terms.
        </p>

        <h3 className="text-2xl font-semibold text-gray-800 mb-4">
          1. Acceptance of Terms
        </h3>
        <p className="text-gray-700 leading-relaxed mb-4">
          By using our services, you agree to these Terms and our Privacy
          Policy. If you do not agree, please do not use our services.
        </p>

        <h3 className="text-2xl font-semibold text-gray-800 mb-4">
          2. Description of Service
        </h3>
        <p className="text-gray-700 leading-relaxed mb-4">
          Health Consultant provides a platform to connect users with healthcare
          professionals for consultations and health advice.
        </p>

        <h3 className="text-2xl font-semibold text-gray-800 mb-4">
          3. User Accounts
        </h3>
        <p className="text-gray-700 leading-relaxed mb-4">
          You may need to register for an account to access certain features.
          You are responsible for maintaining the confidentiality of your
          account and password.
        </p>

        <h3 className="text-2xl font-semibold text-gray-800 mb-4">
          4. User Conduct
        </h3>
        <p className="text-gray-700 leading-relaxed mb-4">
          You agree not to use our services for any unlawful purpose or in any
          way that could harm our services or other users.
        </p>

        <h3 className="text-2xl font-semibold text-gray-800 mb-4">
          5. Disclaimer
        </h3>
        <p className="text-gray-700 leading-relaxed mb-4">
          The information provided on Health Consultant is for informational
          purposes only and does not constitute medical advice. Always consult
          with a qualified healthcare professional for any health concerns.
        </p>

        <h3 className="text-2xl font-semibold text-gray-800 mb-4">
          6. Limitation of Liability
        </h3>
        <p className="text-gray-700 leading-relaxed mb-4">
          Health Consultant is not liable for any direct, indirect, incidental,
          or consequential damages resulting from your use of our services.
        </p>

        <h3 className="text-2xl font-semibold text-gray-800 mb-4">
          7. Changes to These Terms
        </h3>
        <p className="text-gray-700 leading-relaxed">
          We may update these Terms from time to time. We will notify you of
          any changes by posting the new Terms on this page.
        </p>
      </section>
    </div>
  );
};

export default TermsOfService;
// File: frontend/src/pages/UserPayments.jsx
import React, { useState, useEffect } from "react";
import { getUserPayments } from "../utils/api";
import { CreditCard } from "lucide-react";

const UserPayments = () => {
  const [payments, setPayments] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    const fetchPayments = async () => {
      setLoading(true);
      setError("");
      try {
        const token = localStorage.getItem("token");
        if (!token) {
          setError("Authentication required. Please login.");
          return;
        }

        const data = await getUserPayments(token);
        setPayments(data);
      } catch (err) {
        setError("Failed to retrieve payments. Please try again.");
        setPayments([]);
        console.error("Failed to fetch payments:", err);
      } finally {
        setLoading(false);
      }
    };

    fetchPayments();
  }, []);

  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleDateString("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  };

  const formatTime = (timeString) => {
    // Split the time string into hours and minutes
    const [hours, minutes] = timeString.split(":");
    // Convert to 12-hour format
    let period = "AM";
    let hour = parseInt(hours);
    if (hour >= 12) {
      period = "PM";
      hour = hour === 12 ? hour : hour - 12; // Noon should be 12 PM
    }
    if (hour === 0) {
      hour = 12; // Midnight should be 12 AM
    }
    return `${hour}:${minutes} ${period}`;
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 py-12">
      <div className="max-w-7xl mx-auto bg-white shadow-xl rounded-2xl overflow-hidden">
        <div className="px-6 py-8 bg-gradient-to-r from-blue-400 to-purple-500 ">
          <h2 className="text-3xl font-semibold text-white text-center">
            My Payment History
          </h2>
        </div>

        {loading && <p className="text-center py-4">Loading payments...</p>}
        {error && <p className="text-center text-red-500 py-4">{error}</p>}

        {!loading && !error && payments.length === 0 && (
          <p className="text-center py-4">No payment history found.</p>
        )}

        {!loading && !error && payments.length > 0 && (
          <div className="overflow-x-auto">
            <table className="min-w-full leading-normal">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    <CreditCard className="inline-block h-4 w-4 mr-1" />
                    Payment ID
                  </th>
                  <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Date
                  </th>
                  <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Booking Date/Time
                  </th>
                  <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Amount
                  </th>
                  <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Status
                  </th>
                  <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Refund Amount
                  </th>
                  <th className="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                    Final Amount
                  </th>
                </tr>
              </thead>
              <tbody>
                {payments.map((payment) => (
                  <tr key={payment.id}>
                    <td className="px-5 py-3 border-b border-gray-200 text-sm">
                      {payment.id}
                    </td>
                    <td className="px-5 py-3 border-b border-gray-200 text-sm">
                      {formatDate(payment.paymentDate)}
                    </td>
                    <td className="px-5 py-3 border-b border-gray-200 text-sm">
                      {formatDate(payment.bookingDate)}/{formatTime(payment.bookingTime)}
                    </td>
                    <td className="px-5 py-3 border-b border-gray-200 text-sm">
                      ${payment.amount}
                    </td>
                    <td className="px-5 py-3 border-b border-gray-200 text-sm">
                      {payment.status}
                    </td>
                     <td className="px-5 py-3 border-b border-gray-200 text-sm">
                      {payment.refundAmount ? `$${Number(payment.refundAmount).toFixed(2)}` : "-"}
                    </td>
                    <td className="px-5 py-3 border-b border-gray-200 text-sm">
                      ${Number(payment.finalAmount).toFixed(2)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
};

export default UserPayments;
// File: frontend/src/pages/UserProfile.jsx
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { getProfile, updateProfile } from '../utils/api';
import { User, Mail, Edit, Phone, Text, Image, Droplets, CheckCircle, XCircle } from 'lucide-react';

const UserProfile = ({ setProfilePicture: setAppProfilePicture }) => {
    const [fullName, setFullName] = useState('');
    const [email, setEmail] = useState('');
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const [isEditing, setIsEditing] = useState(false);
    const [isConsultant, setIsConsultant] = useState(false);
    const [bloodGroup, setBloodGroup] = useState('');
    const [medicalHistory, setMedicalHistory] = useState('');
    const [currentPrescriptions, setCurrentPrescriptions] = useState('');
    const [phone, setPhone] = useState('');
    const [areasOfExpertise, setAreasOfExpertise] = useState('');
    const [profilePicture, setProfilePicture] = useState('');
    const [newProfilePicture, setNewProfilePicture] = useState(null);
    const navigate = useNavigate();

    useEffect(() => {
        const fetchProfile = async () => {
            setLoading(true);
            setError('');
            try {
                const token = localStorage.getItem('token');
                if (!token) {
                    setError('Authentication required. Please login.');
                    return;
                }

                const data = await getProfile(token);
                setFullName(data.fullName);
                setEmail(data.email);
                setIsConsultant(data.isConsultant === 1);
                setBloodGroup(data.bloodGroup);
                setMedicalHistory(data.medicalHistory);
                setCurrentPrescriptions(data.currentPrescriptions);
                setAreasOfExpertise(data.areasOfExpertise)
                setPhone(data.phone);
                setEmail(data.email);
                setProfilePicture(data.profilePicture); // Added placeholder
                setAppProfilePicture(data.profilePicture);  // Added placeholder

            } catch (err) {
                setError('Failed to retrieve profile. Please try again.');
                console.error('Failed to fetch profile:', err);
            } finally {
                setLoading(false);
            }
        };

        fetchProfile();
    }, [setAppProfilePicture]);

    const handleEditClick = () => {
        setIsEditing(true);
    };

    const handleCancelClick = () => {
        setIsEditing(false);
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);
        setError('');

        try {
            const token = localStorage.getItem('token');
            if (!token) {
                setError('Authentication required. Please login.');
                return;
            }

            const formData = new FormData();
            formData.append('fullName', fullName);
            formData.append('email', email);

            if (!isConsultant) {
                formData.append('bloodGroup', bloodGroup);
                formData.append('medicalHistory', medicalHistory);
                formData.append('currentPrescriptions', currentPrescriptions);
            } else {
                formData.append('phone', phone);
                formData.append('areasOfExpertise', areasOfExpertise);
            }

            if (newProfilePicture) {
                formData.append('profilePicture', newProfilePicture);
            }

            const updatedProfile = await updateProfile(formData);

            setProfilePicture(updatedProfile.profilePicture);
            setAppProfilePicture(updatedProfile.profilePicture)
            console.log('Profile updated successfully:', updatedProfile);
            setIsEditing(false);
        } catch (err) {
            setError('Failed to update profile. Please try again.');
            console.error('Profile update failed:', err);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="min-h-screen bg-gradient-to-br from-blue-100 to-purple-200 py-12 px-4 sm:px-6 lg:px-8">
            <div className="max-w-4xl mx-auto bg-white shadow-xl rounded-3xl overflow-hidden">
                {/* Header Section */}
                <div className="bg-gradient-to-r from-blue-400 to-purple-500 py-8 px-4 sm:px-6">
                    <h2 className="text-3xl font-extrabold text-white text-center tracking-tight">Your Profile</h2>
                    <p className="mt-2 text-md text-yellow-100 text-center">Manage your account information and settings.</p>
                </div>

                {/* Main Content Section */}
                <div className="p-8 sm:p-10">
                    {loading && <p className="text-center text-gray-600">Loading profile information...</p>}
                    {error && <p className="text-center text-red-500">{error}</p>}

                    {!loading && !error && (
                        <div>
                            {isEditing ? (
                                <form onSubmit={handleSubmit} className="space-y-6">
                                    {/* Full Name */}
                                    <div>
                                        <label htmlFor="fullName" className="block text-sm font-medium text-gray-700">
                                            <User className="h-5 w-5 mr-1 -mt-0.5 inline-block align-middle" />
                                            Full Name
                                        </label>
                                        <input
                                            type="text"
                                            id="fullName"
                                            className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                            value={fullName}
                                            onChange={(e) => setFullName(e.target.value)}
                                        />
                                    </div>

                                    {/* Email */}
                                    <div>
                                        <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                                            <Mail className="h-5 w-5 mr-1 -mt-0.5 inline-block align-middle" />
                                            Email
                                        </label>
                                        <input
                                            type="email"
                                            id="email"
                                            className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                            value={email}
                                            onChange={(e) => setEmail(e.target.value)}
                                        />
                                    </div>

                                    {/* Profile Picture */}
                                    <div>
                                        <label htmlFor="profilePicture" className="block text-sm font-medium text-gray-700">
                                            <Image className="h-5 w-5 mr-1 -mt-0.5 inline-block align-middle" />
                                            Change Profile Picture
                                        </label>
                                        <input
                                            type="file"
                                            id="profilePicture"
                                            className="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-200 file:text-blue-700 hover:file:bg-blue-300"
                                            onChange={(e) => setNewProfilePicture(e.target.files[0])}
                                        />
                                    </div>

                                    {/* Conditional Fields based on Consultant Status */}
                                    {!isConsultant ? (
                                        <>
                                            {/* Blood Group */}
                                            <div>
                                                <label htmlFor="bloodGroup" className="block text-sm font-medium text-gray-700">
                                                    <Droplets className="h-5 w-5 mr-1 -mt-0.5 inline-block align-middle" />
                                                    Blood Group
                                                </label>
                                                <input
                                                    type="text"
                                                    id="bloodGroup"
                                                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                                    value={bloodGroup}
                                                    onChange={(e) => setBloodGroup(e.target.value)}
                                                />
                                            </div>

                                            {/* Medical History */}
                                            <div>
                                                <label htmlFor="medicalHistory" className="block text-sm font-medium text-gray-700">
                                                    <Text className="h-5 w-5 mr-1 -mt-0.5 inline-block align-middle" />
                                                    Medical History
                                                </label>
                                                <textarea
                                                    id="medicalHistory"
                                                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                                    value={medicalHistory}
                                                    onChange={(e) => setMedicalHistory(e.target.value)}
                                                    rows="3"
                                                />
                                            </div>

                                            {/* Current Prescriptions */}
                                            <div>
                                                <label htmlFor="currentPrescriptions" className="block text-sm font-medium text-gray-700">
                                                    <Text className="h-5 w-5 mr-1 -mt-0.5 inline-block align-middle" />
                                                    Current Prescriptions
                                                </label>
                                                <textarea
                                                    id="currentPrescriptions"
                                                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                                    value={currentPrescriptions}
                                                    onChange={(e) => setCurrentPrescriptions(e.target.value)}
                                                    rows="3"
                                                />
                                            </div>
                                        </>
                                    ) : (
                                        <>
                                            {/* Phone */}
                                            <div>
                                                <label htmlFor="phone" className="block text-sm font-medium text-gray-700">
                                                    <Phone className="h-5 w-5 mr-1 -mt-0.5 inline-block align-middle" />
                                                    Contact Number
                                                </label>
                                                <input
                                                    type="text"
                                                    id="phone"
                                                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                                    value={phone}
                                                    onChange={(e) => setPhone(e.target.value)}
                                                />
                                            </div>

                                            {/* Areas of Expertise */}
                                            <div>
                                                <label htmlFor="areasOfExpertise" className="block text-sm font-medium text-gray-700">
                                                    <Text className="h-5 w-5 mr-1 -mt-0.5 inline-block align-middle" />
                                                    Areas of Expertise
                                                </label>
                                                <textarea
                                                    id="areasOfExpertise"
                                                    className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                                    value={areasOfExpertise}
                                                    onChange={(e) => setAreasOfExpertise(e.target.value)}
                                                    rows="3"
                                                />
                                            </div>
                                        </>
                                    )}

                                    {/* Action Buttons */}
                                    <div className="flex justify-end">
                                        <button
                                            type="submit"
                                            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                                        >
                                            <CheckCircle className="h-5 w-5 mr-2" />
                                            Save Changes
                                        </button>
                                        <button
                                            type="button"
                                            onClick={handleCancelClick}
                                            className="ml-3 inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                                        >
                                            <XCircle className="h-5 w-5 mr-2" />
                                            Cancel
                                        </button>
                                    </div>
                                </form>
                            ) : (
                                // Display Mode
                                <div className="space-y-6">
                                    {/* Profile Picture */}
                                    <div className="flex justify-center">
                                        <img
                                            className="rounded-full w-32 h-32 object-cover shadow-md"
                                            src={`http://localhost:5555/${profilePicture}`}
                                            alt="Profile"
                                            onError={(e) => { e.target.onerror = null; e.target.src = "https://placehold.co/200x200"; }}
                                        />
                                    </div>

                                    {/* Full Name and Email */}
                                    <div className="space-y-1">
                                        <div className="flex items-center text-gray-700">
                                            <User className="h-5 w-5 mr-2" />
                                            <span className="font-semibold">Full Name:</span>
                                            <span className="ml-1">{fullName}</span>
                                        </div>
                                        <div className="flex items-center text-gray-700">
                                            <Mail className="h-5 w-5 mr-2" />
                                            <span className="font-semibold">Email:</span>
                                            <span className="ml-1">{email}</span>
                                        </div>
                                    </div>

                                    {/* Conditional Fields Based on Consultant Status */}
                                    {!isConsultant ? (
                                        <>
                                            <div className="flex items-center text-gray-700">
                                                <Droplets className="h-5 w-5 mr-2" />
                                                <span className="font-semibold">Blood Group:</span>
                                                <span className="ml-1">{bloodGroup || 'Not specified'}</span>
                                            </div>
                                            <div className="text-gray-700">
                                                <Text className="h-5 w-5 mr-2 inline-block align-middle" />
                                                <span className="font-semibold">Medical History:</span>
                                                <p className="ml-7 mt-1">{medicalHistory || 'Not specified'}</p>
                                            </div>
                                            <div className="text-gray-700">
                                                <Text className="h-5 w-5 mr-2 inline-block align-middle" />
                                                <span className="font-semibold">Current Prescriptions:</span>
                                                <p className="ml-7 mt-1">{currentPrescriptions || 'Not specified'}</p>
                                            </div>
                                        </>
                                    ) : (
                                        <>
                                            <div className="flex items-center text-gray-700">
                                                <Phone className="h-5 w-5 mr-2" />
                                                <span className="font-semibold">Contact Number:</span>
                                                <span className="ml-1">{phone || 'Not specified'}</span>
                                            </div>
                                            <div className="text-gray-700">
                                                <Text className="h-5 w-5 mr-2 inline-block align-middle" />
                                                <span className="font-semibold">Areas of Expertise:</span>
                                                <p className="ml-7 mt-1">{areasOfExpertise || 'Not specified'}</p>
                                            </div>
                                        </>
                                    )}

                                    {/* Edit Button */}
                                    <div className="text-right">
                                        <button
                                            type="button"
                                            onClick={handleEditClick}
                                            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                                        >
                                            <Edit className="h-5 w-5 mr-2" />
                                            Edit Profile
                                        </button>
                                    </div>
                                </div>
                            )}
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default UserProfile;
// File: frontend/src/utils/api.js
import axios from 'axios';

const BASE_URL = 'http://localhost:5555';

// Authentication Endpoints
export const loginUser = async (email, password) => {
    try {
        const response = await axios.post(`${BASE_URL}/api/login`, { email, password });
        return response.data;
    } catch (error) {
        console.error('Login failed:', error);
        throw error;
    }
};

export const registerUser = async (formData) => {
    try {
        const response = await axios.post(`${BASE_URL}/api/register`, formData, {
            headers: {
                'Content-Type': 'multipart/form-data', // Set content type for FormData
            },
        });
        return response.data;
    } catch (error) {
        console.error('Registration failed:', error);
        throw error;
    }
};

// Data Endpoints
export const getProfile = async (token) => {
    try {
        const response = await axios.get(`${BASE_URL}/api/profile`, {
            headers: { Authorization: `Bearer ${token}` },
        });
        return response.data;
    } catch (error) {
        console.error('Failed to retrieve profile:', error);
        throw error;
    }
};

export const updateProfile = async (formData) => {
  try {
    const token = localStorage.getItem('token');
    const response = await axios.put(`${BASE_URL}/api/profile`, formData, {
      headers: {
        Authorization: `Bearer ${token}`,
        'Content-Type': 'multipart/form-data',
      },
    });
    return response.data;
  } catch (error) {
    console.error('Failed to update profile:', error);
    throw error;
  }
};

export const getConsultantProfile = async (token) => {
    try {
        const response = await axios.request({
            method: 'GET',
            url: `${BASE_URL}/api/consultant/profile`,
            headers: { Authorization: `Bearer ${token}` },
        });
        return response.data;
    } catch (error) {
        console.error('Failed to retrieve consultant profile:', error);
        throw error;
    }
};

export const updateConsultantProfile = async (token, profileData) => {
    try {
        const response = await axios.put(`${BASE_URL}/api/consultant/profile`, profileData, {
            headers: { Authorization: `Bearer ${token}` },
        });
        return response.data;
    } catch (error) {
        console.error('Failed to update consultant profile:', error);
        throw error;
    }
};

export const getConsultants = async (specialty, rating, availability) => {
    try {
        const response = await axios.get(`${BASE_URL}/api/consultants`, {
            params: { specialty, rating, availability },
        });
        return response.data;
    } catch (error) {
        console.error('Failed to retrieve consultants:', error);
        throw error;
    }
};

export const getConsultantById = async (id) => {
    try {
        const response = await axios.get(`${BASE_URL}/api/consultants/${id}`);
        return response.data;
    } catch (error) {
        console.error('Failed to retrieve consultant:', error);
        throw error;
    }
};

export const getBookings = async (token) => {
    try {
        const response = await axios.get(`${BASE_URL}/api/bookings`, {
            headers: { Authorization: `Bearer ${token}` },
        });
        return response.data;
    } catch (error) {
        console.error('Failed to retrieve bookings:', error);
        throw error;
    }
};

export const createBooking = async (token, consultantId, date, time) => {
    try {
        const response = await axios.post(`${BASE_URL}/api/bookings`, { consultantId, date, time }, {
            headers: { Authorization: `Bearer ${token}` },
        });
        return response.data;
    } catch (error) {
        console.error('Failed to create booking:', error);
        throw error;
    }
};

export const getHealthRecords = async (token, userId = null) => {
    try {
        // console.log("Sending Token:", token); // Debugging
        const response = await axios.get(`${BASE_URL}/api/healthrecords`, {
            headers: { Authorization: `Bearer ${token}` },
            params: { userId1: userId } // FIXED: Send userId1 as a query param
        });
        return response.data;
    } catch (error) {
        console.error('Failed to retrieve health records:', error);
        throw error;
    }
};


export const createHealthRecord = async (token, medicalHistory, ongoingTreatments, prescriptions) => {
    try {
        const response = await axios.post(`${BASE_URL}/api/healthrecords`, { medicalHistory, ongoingTreatments, prescriptions }, {
            headers: { Authorization: `Bearer ${token}` },
        });
        return response.data;
    } catch (error) {
        console.error('Failed to create health record:', error);
        throw error;
    }
};

export const createMessage = async (token, consultantId, message) => {
    try {
        const response = await axios.post(`${BASE_URL}/api/messages`, { consultantId, message }, {
            headers: { Authorization: `Bearer ${token}` },
        });
        return response.data;
    } catch (error) {
        console.error('Failed to create message:', error);
        throw error;
    }
};

export const sendMessage = async (token, chatRequestId, message) => {
    try {
      const response = await axios.post(`${BASE_URL}/api/chat/${chatRequestId}/messages`,  {message},{
          headers: { Authorization: `Bearer ${token}` },
      });
      return response.data;
  } catch (error) {
      console.error('Failed to create message:', error);
      throw error;
  }
};

export const sendMessageRequest = async (token, consultantId, bookingId, message) => {
    try {
        const response = await axios.post(`${BASE_URL}/api/chat/request`, { consultantId, bookingId, message }, {
            headers: {
                Authorization: `Bearer ${token}`
            }
        });
        return response.data;
    } catch (error) {
        console.error('Failed to send message request:', error);
        throw error;
    }
};

export const chatStatus = async (token, consultantId) => {
    try {
        const response = await axios.get(`${BASE_URL}/api/chat/requestStatus/${consultantId}`, {
            headers: {
                Authorization: `Bearer ${token}`
            }
        });
        console.log(response.data)
        return response.data;
    } catch (error) {
        console.error('Failed to fetch message request:', error);
        throw error;
    }
};

export const updateChatRequest = async (token, requestId, status) => {
    try {
      const response = await axios.put(
        `${BASE_URL}/api/chat/requests/${requestId}`,
        { status },
        {
          headers: { Authorization: `Bearer ${token}` },
        }
      );
      return response.data;
    } catch (error) {
      console.error("Failed to update chat request:", error);
      throw error;
    }
  };

export const getMessages = async (selectedChatRequestId) => {
    try {
        const token = localStorage.getItem('token');
        // Fetch  chat
        const response = await axios.get(`${BASE_URL}/api/chat/${selectedChatRequestId}/messages`, {
            headers: {
                Authorization: `Bearer ${token}`,
            },
        });
        console.log(response.data)
        return response.data;
    } catch (error) {
        console.error("Failed to fetch chat request:", error);
        throw error;
      }
}

export const getChatRequests = async () => {
    try {
        const token = localStorage.getItem('token');
        if (!token) {
            console.error('Authentication required. Please login.');
            return;
        }

        // Get All Requests
        const response = await axios.get(`${BASE_URL}/api/chat/requests`, {
            headers: {
                Authorization: `Bearer ${token}`,
            },
        });
        return response.data;

    } catch (error) {
        console.error('Failed to fetch chat requests.', error);
    }
}

export const getPayments = async (token) => {
    try {
        const response = await axios.get(`${BASE_URL}/api/payments`, {
            headers: { Authorization: `Bearer ${token}` },
        });
        return response.data;
    } catch (error) {
        console.error('Failed to retrieve payments:', error);
        throw error;
    }
};

export const createReview = async (token, consultantId, rating, review) => {
    try {
        const response = await axios.post(`${BASE_URL}/api/reviews`, { consultantId, rating, review }, {
            headers: { Authorization: `Bearer ${token}` },
        });
        return response.data;
    } catch (error) {
        console.error('Failed to create review:', error);
        throw error;
    }
};

// Admin Endpoints
export const getAdminUsers = async (token) => {
    try {
        const response = await axios.get(`${BASE_URL}/api/admin/users`, {
            headers: { Authorization: `Bearer ${token}` },
        });
        return response.data;
    } catch (error) {
        console.error('Failed to retrieve users:', error);
        throw error;
    }
};

export const getAdminConsultants = async (token) => {
    try {
        const response = await axios.get(`${BASE_URL}/api/admin/consultants`, {
            headers: { Authorization: `Bearer ${token}` },
        });
        return response.data;
    } catch (error) {
        console.error('Failed to retrieve consultants:', error);
        throw error;
    }
};

export const getAdminBookings = async (token) => {
    try {
        const response = await axios.get(`${BASE_URL}/api/admin/bookings`, {
            headers: { Authorization: `Bearer ${token}` },
        });
        return response.data;
    } catch (error) {
        console.error('Failed to retrieve bookings:', error);
        throw error;
    }
};

export const submitContactForm = async (name, email, subject, message) => {
    try {
        const response = await axios.post(`${BASE_URL}/api/contact`, { name, email, subject, message });
        return response.data;
    } catch (error) {
        console.error('Failed to submit contact form:', error);
        throw error;
    }
};

export const acceptBooking = async (token, bookingId) => {
    try {
        const response = await axios.put(`${BASE_URL}/api/bookings/${bookingId}/accept`, {}, {
            headers: {
                Authorization: `Bearer ${token}`
            }
        });
        return response.data;
    } catch (error) {
        console.error('Failed to accept booking:', error);
        throw error;
    }
};

export const rejectBooking = async (token, bookingId) => {
    try {
        const response = await axios.put(`${BASE_URL}/api/bookings/${bookingId}/reject`, {}, {
            headers: {
                Authorization: `Bearer ${token}`
            }
        });
        return response.data;
    } catch (error) {
        console.error('Failed to accept booking:', error);
        throw error;
    }
};

export const cancelBooking = async (token, bookingId) => {
    try {
        const response = await axios.put(`${BASE_URL}/api/bookings/${bookingId}/cancel`, {}, {
            headers: {
                Authorization: `Bearer ${token}`
            }
        });
        return response.data;
    } catch (error) {
        console.error('Failed to accept booking:', error);
        throw error;
    }
};

export const getConsultantBookings = async (token) => {
     try {
        const response = await axios.get(`${BASE_URL}/api/consultant/bookings`, {
            headers: {
                Authorization: `Bearer ${token}`
            }
        });
        return response.data;
    } catch (error) {
        console.error('Failed to retrieve consultant bookings:', error);
        throw error;
    }
};

export const get_details = async (token, bookingId) => {
    try {
       const response = await axios.get(`${BASE_URL}/api/getDetails/${bookingId}`, {
           headers: {
               Authorization: `Bearer ${token}`
           }
       });
       return response.data;
    } catch (error) {
       console.error('Failed to retrieve consultant bookings:', error);
       throw error;
    }

}

// Route to get all bookings for a specific consultant ID
export const getConsultantBookingsById = async (token, consultantId) => {
     try {
        const response = await axios.get(`${BASE_URL}/api/consultants/${consultantId}/bookings`, {
            headers: {
                Authorization: `Bearer ${token}`
            }
        });
        return response.data;
    } catch (error) {
        console.error('Failed to retrieve consultant bookings by ID:', error);
        throw error;
    }
};
export const approveConsultant = async (token, userId) => {
    try {
        const response = await axios.put(`${BASE_URL}/api/admin/consultants/${userId}/approve`, {}, {
            headers: {
                Authorization: `Bearer ${token}`
            }
        });
        return response.data;
    } catch (error) {
        console.error('Failed to approve consultant:', error);
        throw error;
    }
};

export const declineConsultant = async (token, userId) => {
    try {
        const response = await axios.put(`${BASE_URL}/api/admin/consultants/${userId}/reject`, {}, {
            headers: {
                Authorization: `Bearer ${token}`
            }
        });
        return response.data;
    } catch (error) {
        console.error('Failed to reject consultant:', error);
        throw error;
    }
};

//api.js
export const getUserPayments = async (token) => {
    try {
      const response = await axios.get(`${BASE_URL}/api/user/payments`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      return response.data;
    } catch (error) {
      console.error("Failed to retrieve user payments:", error);
      throw error;
    }
  };
  
  export const getConsultantEarnings = async (token) => {
    try {
      const response = await axios.get(`${BASE_URL}/api/consultant/earnings`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      return response.data;
    } catch (error) {
      console.error("Failed to retrieve consultant earnings:", error);
      throw error;
    }
  };

  // New API function to fetch consultant documents
  export const getConsultantDocuments = async (token, consultantId) => {
    try {
      const response = await axios.get(`${BASE_URL}/api/consultant/${consultantId}/documents`, {
        headers: {
          Authorization: `Bearer ${token}`, // Add the JWT token to the Authorization header
        },
      });
      return response.data;
    } catch (error) {
      console.error('Failed to fetch consultant documents:', error);
      throw error;
    }
  };
// File: frontend/vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})