Integrate the Takaful Calculator API

curl --get "https://khaleejiapi.dev/api/v1/takaful/calculate" \
  --data-urlencode "type=health" \
  --data-urlencode "coverage=100000" \
  --data-urlencode "currency=AED" \
  --data-urlencode "country=AE" \
  --data-urlencode "model=wakalah_mudarabah" \
  --data-urlencode "age=30" \
  -H "Authorization: Bearer $KHALEEJI_API_KEY"

{
  "data": {
    "estimate": {
      "type": "health",
      "coverageAmount": 100000,
      "currency": "AED",
      "country": "AE",
      "annualContribution": 4000,
      "monthlyContribution": 333.33,
      "wakalahFee": 800,
      "riskPoolContribution": 3200,
      "estimatedSurplus": 384,
      "effectiveRate": 4
    },
    "model": {
      "id": "wakalah_mudarabah",
      "name": "Wakalah-Mudarabah Hybrid",
      "nameAr": "نموذج الوكالة-المضاربة الهجين",
      "description": "Combines agency fee for underwriting with profit-sharing on investments.",
      "descriptionAr": "يجمع بين رسوم الوكالة للاكتتاب ومشاركة الأرباح في الاستثمارات.",
      "wakalahFeePercent": 20,
      "mudarabahSharePercent": 40
    },
    "adjustments": [{ "factor": "Age loading", "value": 1 }],
    "regulator": {
      "name": "Central Bank of the UAE (CBUAE)",
      "nameAr": "مصرف الإمارات المركزي"
    },
    "disclaimer": {
      "en": "This is an indicative estimate only. Actual takaful contributions depend on individual risk assessment, medical underwriting, and operator-specific pricing. Please consult a licensed takaful operator.",
      "ar": "هذا تقدير إرشادي فقط. تعتمد مساهمات التكافل الفعلية على تقييم المخاطر الفردي والاكتتاب الطبي وتسعير المشغل. يرجى استشارة مشغل تكافل مرخص."
    }
  },
  "meta": { "timestamp": "2026-10-22T11:17:00.000Z" }
}

const apiKey = process.env.KHALEEJI_API_KEY
 
if (!apiKey) throw new Error("KHALEEJI_API_KEY is not configured")
 
type TakafulEstimate = {
  estimate: {
    annualContribution: number
    monthlyContribution: number
    wakalahFee: number
    riskPoolContribution: number
    estimatedSurplus: number
    effectiveRate: number
    currency: string
  }
  model: {
    id: "wakalah" | "wakalah_mudarabah"
    name: string
    nameAr: string
    wakalahFeePercent: number
    mudarabahSharePercent: number | null
  }
  disclaimer: { en: string; ar: string }
}
 
export async function calculateTakaful(
  input: { type: string; coverage: number; country?: string; currency?: string; model?: string },
): Promise<TakafulEstimate> {
  const url = new URL("https://khaleejiapi.dev/api/v1/takaful/calculate")
  for (const [key, value] of Object.entries(input)) {
    if (value !== undefined) url.searchParams.set(key, String(value))
  }
 
  const response = await fetch(url, {
    headers: { Authorization: "Bearer " + apiKey, Accept: "application/json" },
    cache: "no-store",
    signal: AbortSignal.timeout(10_000),
  })
  const payload = (await response.json()) as {
    data?: TakafulEstimate
    error?: { message?: string }
  }
  if (!response.ok || !payload.data) {
    throw new Error(payload.error?.message ?? `Takaful API returned HTTP ${response.status}`)
  }
  return payload.data
}
 
const quote = await calculateTakaful({
  type: "health",
  coverage: 100000,
  country: "AE",
  currency: "AED",
  model: "wakalah_mudarabah",
})
console.log(quote.estimate.annualContribution, quote.model.nameAr)

// app/api/takaful/route.ts
import { NextResponse } from "next/server"
 
const parameterNames = [
  "type", "coverage", "currency", "country", "model", "age", "dependents",
  "vehicle_age", "property_type", "trip_days", "destination", "employees", "industry",
]
 
export async function GET(request: Request) {
  const apiKey = process.env.KHALEEJI_API_KEY
  if (!apiKey) {
    return NextResponse.json(
      { error: { code: "SERVER_CONFIG", message: "Takaful estimates are unavailable" } },
      { status: 500 },
    )
  }
 
  const incoming = new URL(request.url)
  const upstreamUrl = new URL("https://khaleejiapi.dev/api/v1/takaful/calculate")
  for (const name of parameterNames) {
    const value = incoming.searchParams.get(name)
    if (value !== null) upstreamUrl.searchParams.set(name, value)
  }
 
  try {
    const upstream = await fetch(upstreamUrl, {
      headers: { Authorization: "Bearer " + apiKey, Accept: "application/json" },
      cache: "no-store",
    })
    const body: unknown = await upstream.json()
    return NextResponse.json(body, { status: upstream.status })
  } catch {
    return NextResponse.json(
      { error: { code: "UPSTREAM_ERROR", message: "Could not reach the Takaful service" } },
      { status: 502 },
    )
  }
}

"use client"
 
import { useState, type FormEvent } from "react"
 
type Locale = "en" | "ar"
type Model = "wakalah" | "wakalah_mudarabah"
type Quote = {
  data?: {
    estimate: { annualContribution: number; currency: string }
    model: { name: string; nameAr: string; wakalahFeePercent: number; mudarabahSharePercent: number | null }
    disclaimer: { en: string; ar: string }
  }
  error?: { message?: string }
}
 
export function TakafulQuoteForm({ locale = "en" }: { locale?: Locale }) {
  const [model, setModel] = useState<Model>("wakalah_mudarabah")
  const [coverage, setCoverage] = useState("100000")
  const [quote, setQuote] = useState<Quote["data"]>()
  const [message, setMessage] = useState("")
  const [loading, setLoading] = useState(false)
  const isArabic = locale === "ar"
 
  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setLoading(true)
    setQuote(undefined)
    setMessage("")
    try {
      const query = new URLSearchParams({ type: "health", coverage, country: "AE", currency: "AED", model })
      const response = await fetch(`/api/takaful?${query}`)
      const result = (await response.json()) as Quote
      if (!response.ok || !result.data) {
        throw new Error(result.error?.message ?? "Request failed")
      }
      setQuote(result.data)
    } catch {
      setMessage(isArabic ? "تعذر الحصول على التقدير. حاول مرة أخرى." : "Could not get an estimate. Please try again.")
    } finally {
      setLoading(false)
    }
  }
 
  return (
    <form onSubmit={submit} dir={isArabic ? "rtl" : "ltr"} className="space-y-4">
      <label className="block">
        <span>{isArabic ? "مبلغ التغطية (درهم)" : "Coverage amount (AED)"}</span>
        <input
          type="number"
          min="0.01"
          step="0.01"
          required
          value={coverage}
          onChange={(event) => setCoverage(event.target.value)}
        />
      </label>
      <label className="block">
        <span>{isArabic ? "نموذج التكافل" : "Takaful model"}</span>
        <select value={model} onChange={(event) => setModel(event.target.value as Model)}>
          <option value="wakalah">{isArabic ? "الوكالة" : "Wakalah"}</option>
          <option value="wakalah_mudarabah">{isArabic ? "الوكالة والمضاربة" : "Wakalah-Mudarabah"}</option>
        </select>
      </label>
      <button type="submit" disabled={loading}>
        {loading ? (isArabic ? "جارٍ الحساب…" : "Calculating…") : (isArabic ? "احسب التقدير" : "Get estimate")}
      </button>
      {message && <p role="alert">{message}</p>}
      {quote && (
        <section aria-live="polite">
          <h2>{isArabic ? quote.model.nameAr : quote.model.name}</h2>
          <p>
            {isArabic ? "المساهمة السنوية التقديرية: " : "Estimated annual contribution: "}
            {new Intl.NumberFormat(isArabic ? "ar-AE" : "en-AE", {
              style: "currency",
              currency: quote.estimate.currency,
            }).format(quote.estimate.annualContribution)}
          </p>
          <p>{isArabic ? quote.disclaimer.ar : quote.disclaimer.en}</p>
        </section>
      )}
    </form>
  )
}