import {
  createMintelDirectusClient,
  ensureDirectusAuthenticated,
} from "@mintel/next-utils";
import { createCollection, createField, updateSettings } from "@directus/sdk";

const client = createMintelDirectusClient();

async function setupBranding() {
  const prjName = process.env.PROJECT_NAME || "MB Grid Solutions";
  const prjColor = process.env.PROJECT_COLOR || "#82ed20";

  console.log(`🎨 Refining Directus Branding for ${prjName}...`);
  await ensureDirectusAuthenticated(client);

  const cssInjection = `
  <style>
      @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');
      
      body, .v-app { font-family: 'Outfit', sans-serif !important; }
      
      .public-view .v-card { 
          backdrop-filter: blur(20px);
          background: rgba(255, 255, 255, 0.9) !important;
          border-radius: 32px !important; 
          box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.4) !important;
          border: 1px solid rgba(255, 255, 255, 0.3) !important;
      }

      .v-navigation-drawer { background: #000c24 !important; }
      
      .v-list-item--active {
          color: ${prjColor} !important;
          background: rgba(130, 237, 32, 0.1) !important;
      }
  </style>
  <div style="font-family: 'Outfit', sans-serif; text-align: center; margin-top: 24px;">
      <p style="color: rgba(255,255,255,0.6); font-size: 11px; letter-spacing: 2px; margin-bottom: 4px; font-weight: 600; text-transform: uppercase;">Mintel Infrastructure Engine</p>
      <h1 style="color: #ffffff; font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.5px;">${prjName.toUpperCase()} <span style="color: ${prjColor};">SYNC.</span></h1>
  </div>
  `;

  try {
    await client.request(
      updateSettings({
        project_name: prjName,
        project_color: prjColor,
        public_note: cssInjection,
        module_bar_background: "#00081a",
        theme_light_overrides: {
          primary: prjColor,
          borderRadius: "12px",
          navigationBackground: "#000c24",
          navigationForeground: "#ffffff",
          moduleBarBackground: "#00081a",
        },
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
      } as any),
    );
    console.log("✨ Branding applied!");

    await createCollectionAndFields();
    console.log("🏗️ Schema alignment complete!");
  } catch (error) {
    console.error("❌ Error during bootstrap:", error);
  }
}

async function createCollectionAndFields() {
  const collectionName = "contact_submissions";

  try {
    await client.request(
      createCollection({
        collection: collectionName,
        schema: {},
        meta: {
          icon: "contact_mail",
          display_template: "{{name}} <{{email}}>",
          group: null,
          sort: null,
          collapse: "open",
        },
      }),
    );

    // Add ID field
    await client.request(
      createField(collectionName, {
        field: "id",
        type: "integer",
        meta: { hidden: true },
        schema: { is_primary_key: true, has_auto_increment: true },
      }),
    );
    console.log(`✅ Collection ${collectionName} created.`);
  } catch {
    console.log(`ℹ️ Collection ${collectionName} exists.`);
  }

  const safeAddField = async (
    field: string,
    type: string,
    meta: Record<string, unknown> = {},
  ) => {
    try {
      await client.request(createField(collectionName, { field, type, meta }));
      console.log(`✅ Field ${field} added.`);
    } catch {
      // Ignore if exists
    }
  };

  await safeAddField("name", "string", {
    interface: "input",
    display: "raw",
    width: "half",
  });
  await safeAddField("email", "string", {
    interface: "input",
    display: "raw",
    width: "half",
  });
  await safeAddField("company", "string", {
    interface: "input",
    display: "raw",
    width: "half",
  });
  await safeAddField("message", "text", {
    interface: "textarea",
    display: "raw",
    width: "full",
  });
  await safeAddField("date_created", "timestamp", {
    interface: "datetime",
    special: ["date-created"],
    display: "datetime",
    display_options: { relative: true },
    width: "half",
  });
}

setupBranding();