<script
  src="https://cdn.ztakonai.com/widget.js"
  data-widget-id="wgt_abc123"
  data-api-key="tk_live_xxxx">
</script>

window.Takonai.init({
  externalId: 'user_123',       // ID unik user dari sistem Anda
  currentStep: 1,               // Step aktif saat ini (opsional)
  context: {                    // Data konteks tambahan (opsional)
    planType: 'pro',
    cartTotal: 150000,
  },
});

window.Takonai.init(opts: TakonaiInitOptions): void

interface TakonaiInitOptions {
  externalId: string;                  // Required — ID user dari sistem Anda
  currentStep?: number;                // Optional — step aktif (default: 1)
  context?: Record<string, unknown>;   // Optional — data konteks dinamis
  welcomeMessage?: string;             // Optional — override pesan sapaan dari dashboard
}

window.Takonai.init({
  externalId: 'usr_4891',
  currentStep: 2,
  context: {
    category: 'electronics',
    priceRange: '500k-1jt',
  },
  welcomeMessage: 'Halo, Budi! Ada yang bisa kami bantu hari ini?',
});

window.Takonai.setStep(step: number, context?: Record<string, unknown>): void

// User pindah ke step checkout pengiriman
window.Takonai.setStep(2, {
  selectedItems: ['item_001', 'item_002'],
  total: 320000,
});

window.Takonai.setContext(context: Record<string, unknown>): void

// User memilih produk lain tanpa pindah step
window.Takonai.setContext({
  selectedProduct: 'SKU-9921',
  color: 'black',
  size: 'XL',
});

window.Takonai.open(): void
window.Takonai.close(): void

// Buka widget otomatis setelah 5 detik
setTimeout(() => {
  window.Takonai.open();
}, 5000);

// Tutup widget setelah form selesai diisi
window.Takonai.onFill = (payload) => {
  fillMyForm(payload.data);
  window.Takonai.close();
};

window.Takonai.onFill = (payload: TakonaiFillPayload) => void

interface TakonaiFillPayload {
  step: number;                        // Step yang di-fill
  formName: string;                    // Nama form (dari konfigurasi widget)
  data: Record<string, unknown>;       // Field-value hasil fill AI
}

window.Takonai.onFill = ({ step, formName, data }) => {
  console.log('Form filled:', formName, data);

  // Isi field HTML dengan data dari AI
  Object.entries(data).forEach(([field, value]) => {
    const el = document.querySelector(`[name="${field}"]`);
    if (el) el.value = value;
  });
};

window.Takonai.onError = (payload: TakonaiErrorPayload) => void

interface TakonaiErrorPayload {
  code: string;     // Error code, contoh: 'STREAM_ERROR', 'CONFIG_NOT_FOUND'
  message: string;  // Pesan error human-readable
}

window.Takonai.onError = ({ code, message }) => {
  console.error('[TakonAI]', code, message);
  // Log ke Sentry, tampilkan fallback UI, dll
};

window.Takonai.sendImage(url: string): void

// Pra-lampirkan foto produk saat user membuka detail produk
window.Takonai.sendImage('https://cdn.toko.com/products/kaos-putih.jpg');

// User bisa langsung tanya "berapa harga ini?" dan AI sudah bisa melihat gambarnya

window.Takonai.onImageUpload = (payload: TakonaiImagePayload) => void

interface TakonaiImagePayload {
  url: string;        // URL publik gambar di Supabase Storage (atau URL asli untuk sendImage)
  mimeType: string;   // MIME type gambar, contoh: "image/jpeg"
  sizeBytes: number;  // Ukuran file dalam bytes (0 untuk sendImage)
  fileName: string;   // Nama file asli
}

// Analytics: lacak setiap gambar yang diupload user
window.Takonai.onImageUpload = ({ url, mimeType, sizeBytes, fileName }) => {
  console.log('Image attached:', fileName, '(' + Math.round(sizeBytes / 1024) + 'KB)');

  // Contoh: tampilkan preview di sidebar halaman host
  document.getElementById('image-preview').src = url;
};

// Intercept langsung jika perlu (biasanya tidak diperlukan)
window.addEventListener('message', (event) => {
  if (event.data?.type === 'TAKONAI_FILL') {
    console.log('Fill event:', event.data.payload);
  }
});

// Opsi untuk window.Takonai.init()
interface TakonaiInitOptions {
  externalId: string;
  currentStep?: number;
  context?: Record<string, unknown>;
}

// Payload dari callback onFill
interface TakonaiFillPayload {
  step: number;
  formName: string;
  data: Record<string, unknown>;
}

// Payload dari callback onError
interface TakonaiErrorPayload {
  code: string;
  message: string;
}

// Payload dari callback onImageUpload
interface TakonaiImagePayload {
  url: string;
  mimeType: string;
  sizeBytes: number;
  fileName: string;
}

// Global window.Takonai object
interface TakonaiWidget {
  init(opts: TakonaiInitOptions): void;
  setStep(step: number, context?: Record<string, unknown>): void;
  setContext(context: Record<string, unknown>): void;
  open(): void;
  close(): void;
  sendImage(url: string): void;
  onFill: ((payload: TakonaiFillPayload) => void) | null;
  onError: ((payload: TakonaiErrorPayload) => void) | null;
  onImageUpload: ((payload: TakonaiImagePayload) => void) | null;
}

declare global {
  interface Window {
    Takonai: TakonaiWidget;
  }
}

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "Nama produk tiket"
    },
    "sku": {
      "type": "string",
      "description": "Kode SKU tiket"
    },
    "description": {
      "type": "string",
      "description": "Deskripsi lengkap terkait produk wisata"
    },
    "category_id": {
      "type": "integer",
      "description": "ID kategori produk (misal: 3 untuk tiket wisata)"
    },
    "price": {
      "type": "number",
      "description": "Harga jual"
    },
    "publish_rate": {
      "type": "number",
      "description": "Harga coret / harga publish"
    },
    "product_advantages_item": {
      "type": "array",
      "description": "Keunggulan produk",
      "items": {
        "type": "object",
        "properties": {
          "name": { "type": "string" }
        }
      }
    },
    "attributes": {
      "type": "array",
      "description": "Atribut varian (contoh: paket, waktu)",
      "items": {
        "type": "object",
        "properties": {
          "name": { "type": "string" },
          "items": {
            "type": "array",
            "items": { "type": "string" }
          },
          "priority": { "type": "integer" }
        }
      }
    },
    "varian_items": {
      "type": "array",
      "description": "Kombinasi hasil varian beserta spesifikasinya",
      "items": {
        "type": "object",
        "properties": {
          "name": { "type": "string" },
          "sku": { "type": "string" },
          "price": { "type": "number" },
          "stok": { "type": "integer" }
        }
      }
    },
    "tracking_adds": {
      "type": "object",
      "description": "Pengaturan tracking pixel",
      "properties": {
        "all_event": { "type": "boolean" },
        "facebook_pixel": {
          "type": "object",
          "properties": {
            "pixel_id": { "type": "array", "items": { "type": "string"} },
            "event": { "type": "array", "items": { "type": "string"} }
          }
        }
      }
    }
  },
  "required": ["name", "sku", "description", "price", "attributes", "varian_items"]
}

<!DOCTYPE html>
<html>
<head>
  <title>Checkout</title>
</head>
<body>

  <!-- Step 1: Data Pembeli -->
  <form id="form-buyer">
    <input name="full_name" placeholder="Nama Lengkap" />
    <input name="email" placeholder="Email" />
    <input name="phone" placeholder="No. HP" />
    <button type="button" onclick="goToStep2()">Lanjut</button>
  </form>

  <!-- Step 2: Alamat Pengiriman -->
  <form id="form-shipping" style="display:none">
    <input name="address" placeholder="Alamat" />
    <input name="city" placeholder="Kota" />
    <input name="postal_code" placeholder="Kode Pos" />
    <button type="submit">Bayar</button>
  </form>

  <!-- 1. Embed widget -->
  <script
    src="https://cdn.ztakonai.com/widget.js"
    data-widget-id="wgt_abc123"
    data-api-key="tk_live_xxxx">
  </script>

  <script>
    // 2. Init saat halaman load
    window.Takonai.init({
      externalId: 'usr_' + currentUserId,
      currentStep: 1,
      context: {
        cartItems: 3,
        totalAmount: 450000,
      },
    });

    // 3. Isi form otomatis saat AI selesai
    window.Takonai.onFill = ({ step, formName, data }) => {
      const formEl = step === 1
        ? document.getElementById('form-buyer')
        : document.getElementById('form-shipping');

      Object.entries(data).forEach(([field, value]) => {
        const el = formEl.querySelector('[name="' + field + '"]');
        if (el) el.value = value;
      });
    };

    // 4. Handle error
    window.Takonai.onError = ({ code, message }) => {
      console.error('[TakonAI Error]', code, message);
    };

    // 5. Update step saat user pindah halaman
    function goToStep2() {
      document.getElementById('form-buyer').style.display = 'none';
      document.getElementById('form-shipping').style.display = 'block';

      window.Takonai.setStep(2, {
        buyerName: document.querySelector('[name="full_name"]').value,
      });
    }
  </script>

</body>
</html>