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

window.Takonai.onReady = () => {
  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.onReady = () => {
  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',
});

// Kirim data form setiap kali ada perubahan (gunakan 'change' bukan 'input'
// agar tidak terlalu sering mengirim pesan ke widget)
document.getElementById('checkout-form').addEventListener('change', () => {
  window.Takonai.setContext({
    form_full_name: document.querySelector('[name="full_name"]').value,
    form_email:     document.querySelector('[name="email"]').value,
    form_phone:     document.querySelector('[name="phone"]').value,
    form_address:   document.querySelector('[name="address"]').value,
  });
});

// User bisa bertanya:
// "apakah email saya sudah benar?" → AI tahu nilainya dari context
// "cek nomor HP saya" → AI baca form_phone dari context

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 aktif saat tool dipanggil
  formName: string;                    // Nama tool (dari konfigurasi widget)
  data: Record<string, unknown>;       // JSON payload hasil tool call AI
}

window.Takonai.onFill = ({ step, formName, data }) => {
  // Contoh 1: isi form HTML seperti biasa
  if (formName === 'form_checkout') {
    Object.entries(data).forEach(([field, value]) => {
      const el = document.querySelector(`[name="${field}"]`);
      if (el) el.value = value;
    });
  }

  // Contoh 2: langsung panggil API backend
  if (formName === 'create_booking') {
    fetch('/api/booking', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
  }

  // Contoh 3: update state aplikasi (React, Vue, dsb)
  if (formName === 'add_to_cart') {
    store.dispatch('cart/add', { sku: data.sku, qty: data.qty });
  }

  // Contoh 4: navigasi
  if (formName === 'navigate') {
    router.push(data.path);
  }
};

window.Takonai.onReady = () => void

window.Takonai.onReady = () => {
  console.log('Widget siap digunakan!');
  window.Takonai.init({ externalId: 'usr_123' });
};

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;
  onReady: ((payload?: Record<string, unknown>) => void) | null;
  onOpen: (() => void) | null;
  onClose: (() => void) | null;
  onMessage: ((payload: any) => void) | null;
  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"]
}

User chat → AI → Skill Call → Backend HTTP Request → API Response → AI lanjut jawab

{
  "name": "cek_ongkir",
  "description": "Panggil skill ini saat user ingin mengetahui biaya pengiriman. Butuh kota asal, kota tujuan, dan berat dalam gram.",
  "api_url": "https://api.rajaongkir.com/starter/cost",
  "method": "POST",
  "headers": {
    "key": "your_api_key_here",
    "Content-Type": "application/json"
  },
  "parameters": {
    "type": "object",
    "required": ["origin", "destination", "weight"],
    "properties": {
      "origin": {
        "type": "string",
        "description": "ID kota asal pengiriman"
      },
      "destination": {
        "type": "string",
        "description": "ID kota tujuan pengiriman"
      },
      "weight": {
        "type": "integer",
        "description": "Berat paket dalam gram"
      }
    }
  }
}

<!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"
    data-widget-id="wgt_abc123"
    data-api-key="tk_live_xxxx">
  </script>

  <script>
    // 2. Init saat widget siap (iframe dimuat)
    window.Takonai.onReady = () => {
      window.Takonai.init({
        externalId: 'usr_123', // Ganti dengan ID unik user Anda
        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>