data-manager.js

class QuotationDataManager {
    constructor() {
        this.keys = {
            company: "companyDetails",
            bank: "bankDetails",
            customer: "customerDetails",
        };
    }

    // Save company details to localStorage
    saveCompanyDetails(formData) {
        const companyData = {
            name: formData["company-name"] || "",
            address: formData["company-address"] || "",
            phone: formData["company-phone"] || "",
            email: formData["company-email"] || "",
            gstin: formData["company-gstin"] || "",
        };

        try {
            localStorage.setItem(
                this.keys.company,
                JSON.stringify(companyData),
            );
        } catch (error) {
            console.error("Error saving company details:", error);
        }
    }

    // Save bank details to localStorage
    saveBankDetails(formData) {
        const bankData = {
            name: formData["bank-name"] || "",
            account: formData["bank-account"] || "",
            ifsc: formData["bank-ifsc"] || "",
            branch: formData["bank-branch"] || "",
        };

        try {
            localStorage.setItem(this.keys.bank, JSON.stringify(bankData));
        } catch (error) {
            console.error("Error saving bank details:", error);
        }
    }

    // Save customer details to sessionStorage (temporary)
    saveCustomerDetails(formData) {
        const customerData = {
            name: formData["customer-name"] || "",
            address: formData["customer-address"] || "",
            phone: formData["customer-phone"] || "",
            email: formData["customer-email"] || "",
            gstin: formData["customer-gstin"] || "",
        };

        try {
            sessionStorage.setItem(
                this.keys.customer,
                JSON.stringify(customerData),
            );
        } catch (error) {
            console.error("Error saving customer details:", error);
        }
    }

    // Load company details from localStorage
    loadCompanyDetails() {
        try {
            const data = localStorage.getItem(this.keys.company);
            return data ? JSON.parse(data) : null;
        } catch (error) {
            console.error("Error loading company details:", error);
            return null;
        }
    }

    // Load bank details from localStorage
    loadBankDetails() {
        try {
            const data = localStorage.getItem(this.keys.bank);
            return data ? JSON.parse(data) : null;
        } catch (error) {
            console.error("Error loading bank details:", error);
            return null;
        }
    }

    // Load customer details from sessionStorage
    loadCustomerDetails() {
        try {
            const data = sessionStorage.getItem(this.keys.customer);
            return data ? JSON.parse(data) : null;
        } catch (error) {
            console.error("Error loading customer details:", error);
            return null;
        }
    }

    // Clear all stored data
    clearAllData() {
        try {
            localStorage.removeItem(this.keys.company);
            localStorage.removeItem(this.keys.bank);
            sessionStorage.removeItem(this.keys.customer);
        } catch (error) {
            console.error("Error clearing data:", error);
        }
    }

    // Clear only customer data
    clearCustomerData() {
        try {
            sessionStorage.removeItem(this.keys.customer);
        } catch (error) {
            console.error("Error clearing customer data:", error);
        }
    }

    // Load all saved form data into the form
    loadFormData() {
        // Load company details
        const companyData = this.loadCompanyDetails();
        if (companyData) {
            document.getElementById("company-name").value =
                companyData.name || "";
            document.getElementById("company-address").value =
                companyData.address || "";
            document.getElementById("company-phone").value =
                companyData.phone || "";
            document.getElementById("company-email").value =
                companyData.email || "";
            document.getElementById("company-gstin").value =
                companyData.gstin || "";
        }

        // Load bank details
        const bankData = this.loadBankDetails();
        if (bankData) {
            document.getElementById("bank-name").value = bankData.name || "";
            document.getElementById("bank-account").value =
                bankData.account || "";
            document.getElementById("bank-ifsc").value = bankData.ifsc || "";
            document.getElementById("bank-branch").value =
                bankData.branch || "";
        }

        // Load customer details
        const customerData = this.loadCustomerDetails();
        if (customerData) {
            document.getElementById("customer-name").value =
                customerData.name || "";
            document.getElementById("customer-address").value =
                customerData.address || "";
            document.getElementById("customer-phone").value =
                customerData.phone || "";
            document.getElementById("customer-email").value =
                customerData.email || "";
            document.getElementById("customer-gstin").value =
                customerData.gstin || "";
        }
    }

    // Get form data as object
    getFormData() {
        const formData = new FormData(
            document.getElementById("quotation-form"),
        );
        const data = {};
        for (let [key, value] of formData.entries()) {
            data[key] = value;
        }
        return data;
    }

    // Setup auto-save functionality
    setupAutoSave() {
        // Company fields auto-save
        const companyFields = [
            "company-name",
            "company-address",
            "company-phone",
            "company-email",
            "company-gstin",
        ];
        companyFields.forEach((fieldId) => {
            const field = document.getElementById(fieldId);
            if (field) {
                field.addEventListener("blur", () => {
                    const formData = this.getFormData();
                    this.saveCompanyDetails(formData);
                    this.updateStorageStatus();
                });
            }
        });

        // Bank fields auto-save
        const bankFields = [
            "bank-name",
            "bank-account",
            "bank-ifsc",
            "bank-branch",
        ];
        bankFields.forEach((fieldId) => {
            const field = document.getElementById(fieldId);
            if (field) {
                field.addEventListener("blur", () => {
                    const formData = this.getFormData();
                    this.saveBankDetails(formData);
                    this.updateStorageStatus();
                });
            }
        });

        // Customer fields auto-save (to sessionStorage)
        const customerFields = [
            "customer-name",
            "customer-address",
            "customer-phone",
            "customer-email",
            "customer-gstin",
        ];
        customerFields.forEach((fieldId) => {
            const field = document.getElementById(fieldId);
            if (field) {
                field.addEventListener("blur", () => {
                    const formData = this.getFormData();
                    this.saveCustomerDetails(formData);
                    this.updateStorageStatus();
                });
            }
        });
    }

    // Check if localStorage is available
    isLocalStorageAvailable() {
        try {
            const test = "__localStorage_test__";
            localStorage.setItem(test, test);
            localStorage.removeItem(test);
            return true;
        } catch (_error) {
            return false;
        }
    }

    // Show status modal
    showModal(message, type = "info") {
        const modal = document.getElementById("status-modal");
        const modalMessage = document.getElementById("modal-message");

        modalMessage.innerHTML = `<p class="text-${type === "error" ? "red" : "green"}-600">${message}</p>`;
        modal.classList.remove("hidden");
        modal.classList.add("flex");
    }

    // Hide status modal
    hideModal() {
        const modal = document.getElementById("status-modal");
        modal.classList.add("hidden");
        modal.classList.remove("flex");
    }

    // Setup event handlers for data management buttons
    setupDataManagementHandlers() {
        // Save data button
        const saveButton = document.getElementById("save-data");
        if (saveButton) {
            saveButton.addEventListener("click", () => {
                try {
                    const formData = this.getFormData();
                    this.saveCompanyDetails(formData);
                    this.saveBankDetails(formData);
                    this.saveCustomerDetails(formData);
                    this.updateStorageStatus();
                    this.showModal("✅ Data saved successfully!", "success");
                } catch (error) {
                    console.error("Error saving data:", error);
                    this.showModal(
                        "❌ Error saving data. Please try again.",
                        "error",
                    );
                }
            });
        }

        // Clear data button
        const clearButton = document.getElementById("clear-data");
        if (clearButton) {
            clearButton.addEventListener("click", () => {
                if (
                    confirm(
                        "Are you sure you want to clear all saved data? This cannot be undone.",
                    )
                ) {
                    try {
                        this.clearAllData();
                        // Clear form fields
                        document.getElementById("quotation-form").reset();
                        this.updateStorageStatus();
                        this.showModal(
                            "🗑️ All saved data cleared successfully!",
                            "success",
                        );
                    } catch (error) {
                        console.error("Error clearing data:", error);
                        this.showModal(
                            "❌ Error clearing data. Please try again.",
                            "error",
                        );
                    }
                }
            });
        }

        // Modal close button
        const modalCloseButton = document.getElementById("modal-close");
        if (modalCloseButton) {
            modalCloseButton.addEventListener("click", () => {
                this.hideModal();
            });
        }

        // Close modal when clicking outside
        const modal = document.getElementById("status-modal");
        if (modal) {
            modal.addEventListener("click", (e) => {
                if (e.target === modal) {
                    this.hideModal();
                }
            });
        }

        // Storage info panel handlers
        const showStorageInfoButton =
            document.getElementById("show-storage-info");
        const hideStorageInfoButton =
            document.getElementById("hide-storage-info");
        const storageInfoPanel = document.getElementById("storage-info-panel");

        if (showStorageInfoButton && storageInfoPanel) {
            showStorageInfoButton.addEventListener("click", () => {
                this.updateStorageStatus();
                storageInfoPanel.classList.remove("hidden");
            });
        }

        if (hideStorageInfoButton && storageInfoPanel) {
            hideStorageInfoButton.addEventListener("click", () => {
                storageInfoPanel.classList.add("hidden");
            });
        }
    }

    // Update storage status display
    updateStorageStatus() {
        const companyData = this.loadCompanyDetails();
        const bankData = this.loadBankDetails();
        const customerData = this.loadCustomerDetails();

        // Update company status
        const companyStatus = document.getElementById("company-storage-status");
        if (companyStatus) {
            if (companyData && companyData.name) {
                companyStatus.textContent = `✅ Saved (${companyData.name})`;
                companyStatus.className = "text-blue-600";
            } else {
                companyStatus.textContent = "❌ Not saved";
                companyStatus.className = "text-gray-600";
            }
        }

        // Update bank status
        const bankStatus = document.getElementById("bank-storage-status");
        if (bankStatus) {
            if (bankData && bankData.name) {
                bankStatus.textContent = `✅ Saved (${bankData.name})`;
                bankStatus.className = "text-green-600";
            } else {
                bankStatus.textContent = "❌ Not saved";
                bankStatus.className = "text-gray-600";
            }
        }

        // Update customer status
        const customerStatus = document.getElementById(
            "customer-storage-status",
        );
        if (customerStatus) {
            if (customerData && customerData.name) {
                customerStatus.textContent = `✅ Saved in session (${customerData.name})`;
                customerStatus.className = "text-yellow-600";
            } else {
                customerStatus.textContent = "❌ Not saved (Session only)";
                customerStatus.className = "text-gray-600";
            }
        }
    }

    // Initialize data manager
    init() {
        if (!this.isLocalStorageAvailable()) {
            console.warn(
                "localStorage is not available. Data will not be saved.",
            );
            return;
        }

        // Load existing data when page loads
        document.addEventListener("DOMContentLoaded", () => {
            this.loadFormData();
            this.setupAutoSave();
            this.setupDataManagementHandlers();
            this.updateStorageStatus();
        });

        // Clear customer data when page unloads (optional)
        window.addEventListener("beforeunload", () => {
            this.clearCustomerData();
        });
    }
}

// Initialize the data manager
const dataManager = new QuotationDataManager();
dataManager.init();