/**
 * Fix Contact Page Colors
 * Updates the contact page content in the database to use the pink color palette
 */

const { query } = require("./config/database");
const logger = require("./config/logger");

const UPDATED_CONTACT_CONTENT = `
                                    <div style="text-align: center; margin-bottom: 48px;">
                                      <h2 style="font-size: 2rem; font-weight: 700; color: #202023; margin-bottom: 12px;">
                                        Our Contact Information
                                      </h2>
                                      <p style="font-size: 1rem; color: #202023">
                                        Reach out to us through any of these channels
                                      </p>
                                    </div>

                                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px;">
                                      <!-- Phone Card -->
                                      <div style="background: linear-gradient(135deg, #FFEBEB 0%, #FFD0D0 100%); padding: 32px; border-radius: 16px; text-align: center; color: #202023; box-shadow: 0 8px 24px rgba(252, 177, 216, 0.3);">
                                        <div style="font-size: 48px; margin-bottom: 16px;">
                                          <i class="bi bi-telephone-fill"></i>
                                        </div>
                                        <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 12px; color: #202023;">Phone</h3>
                                        <p style="font-size: 1rem; opacity: 0.9; margin: 0; color: #202023;">+1 (555) 123-4567</p>
                                      </div>

                                      <!-- Email Card -->
                                      <div style="background: linear-gradient(135deg, #FFD0D0 0%, #FCB1D8 100%); padding: 32px; border-radius: 16px; text-align: center; color: #202023; box-shadow: 0 8px 24px rgba(252, 177, 216, 0.3);">
                                        <div style="font-size: 48px; margin-bottom: 16px;">
                                          <i class="bi bi-envelope-fill"></i>
                                        </div>
                                        <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 12px; color: #202023;">Email</h3>
                                        <p style="font-size: 1rem; opacity: 0.9; margin: 0; color: #202023;">contact@skyartshop.com</p>
                                      </div>

                                      <!-- Location Card -->
                                      <div style="background: linear-gradient(135deg, #F6CCDE 0%, #FCB1D8 100%); padding: 32px; border-radius: 16px; text-align: center; color: #202023; box-shadow: 0 8px 24px rgba(252, 177, 216, 0.3);">
                                        <div style="font-size: 48px; margin-bottom: 16px;">
                                          <i class="bi bi-geo-alt-fill"></i>
                                        </div>
                                        <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 12px; color: #202023;">Location</h3>
                                        <p style="font-size: 1rem; opacity: 0.9; margin: 0; color: #202023;">123 Art Street, Creative City, CC 12345</p>
                                      </div>
                                    </div>

                                    <!-- Business Hours -->
                                    <div style="background: linear-gradient(135deg, #FCB1D8 0%, #FFD0D0 50%, #F6CCDE 100%); padding: 40px; border-radius: 16px; text-align: center; color: #202023; box-shadow: 0 8px 24px rgba(252, 177, 216, 0.3);">
                                      <h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 24px; color: #202023;">Business Hours</h3>
                                      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; max-width: 800px; margin: 0 auto;">
                                        <div>
                                          <p style="font-weight: 600; margin-bottom: 8px; color: #202023;">Monday - Friday</p>
                                          <p style="opacity: 0.85; margin: 0; color: #202023;">9:00 AM - 6:00 PM</p>
                                        </div>
                                        <div>
                                          <p style="font-weight: 600; margin-bottom: 8px; color: #202023;">Saturday</p>
                                          <p style="opacity: 0.85; margin: 0; color: #202023;">10:00 AM - 4:00 PM</p>
                                        </div>
                                        <div>
                                          <p style="font-weight: 600; margin-bottom: 8px; color: #202023;">Sunday</p>
                                          <p style="opacity: 0.85; margin: 0; color: #202023;">Closed</p>
                                        </div>
                                      </div>
                                    </div>
`;

async function fixContactColors() {
  try {
    logger.info(
      "🎨 Updating contact page colors to match pink color palette..."
    );

    const result = await query(
      `UPDATE pages 
       SET pagecontent = $1,
           updatedat = CURRENT_TIMESTAMP
       WHERE slug = 'contact'
       RETURNING id, slug`,
      [UPDATED_CONTACT_CONTENT]
    );

    if (result.rowCount > 0) {
      logger.info("✅ Contact page colors updated successfully!");
      logger.info(
        `   Updated page: ${result.rows[0].slug} (ID: ${result.rows[0].id})`
      );
      console.log(
        "\n✅ SUCCESS: Contact page now uses the pink color palette!"
      );
      console.log("\nUpdated gradients:");
      console.log("  • Phone card: #FFEBEB → #FFD0D0 (light pink)");
      console.log("  • Email card: #FFD0D0 → #FCB1D8 (medium pink)");
      console.log("  • Location card: #F6CCDE → #FCB1D8 (rosy pink)");
      console.log(
        "  • Business Hours: #FCB1D8 → #FFD0D0 → #F6CCDE (multi-tone pink)"
      );
      console.log("  • All text: #202023 (dark charcoal)\n");
    } else {
      logger.warn("⚠️  No contact page found to update");
      console.log("\n⚠️  WARNING: Contact page not found in database");
    }

    process.exit(0);
  } catch (error) {
    logger.error("❌ Error updating contact page colors:", error);
    console.error("\n❌ ERROR:", error.message);
    process.exit(1);
  }
}

// Run the fix
fixContactColors();