const FIDDO_WHATSAPP = "252619309259";

const COUNTRIES = {
  KE: { label: "Kenya", flag: "🇰🇪", note: "Payments run through Daraja API (STK Push)" },
  SO: { label: "Somalia", flag: "🇸🇴", note: "Payments run through regular Mobile Money" },
};

// Kenya: real STK Push via each merchant's own Daraja app.
const KENYA_METHODS = {
  till: { label: "Buy Goods (Till)", desc: "Till Number — for buying goods in-store" },
  paybill: { label: "Paybill", desc: "Paybill Number — for services/bills" },
};

// Somalia: no public payment API exists for these providers, so the pay page just
// displays the merchant's own number — the customer sends money the way they already do.
// EVC Plus's send-money USSD format has been confirmed by Fiddo directly:
//   Regular number:  *712*<number>*<amount>#
//   Merchant code:   *789*<merchant>*<amount>#
// The others (Zaad/Sahal/Jeeb/Premier) don't have a confirmed USSD format yet, so their
// pay page falls back to a plain phone dial rather than guessing an unverified code.
const SOMALIA_METHODS = {
  evc_number: {
    label: "EVC Plus (Number)",
    desc: "A regular Hormuud EVC Plus phone number",
    brand: "mpesa_evc",
    color: "#D2232A",
    ussdAmount: (shortcode, amount) => `*712*${shortcode}*${amount}#`,
  },
  evc_merchant: {
    label: "EVC Plus (Merchant)",
    desc: "A Hormuud EVC Plus merchant code",
    brand: "mpesa_evc",
    color: "#D2232A",
    ussdAmount: (shortcode, amount) => `*789*${shortcode}*${amount}#`,
  },
  zaad: { label: "Zaad", desc: "A regular Telesom Zaad number", brand: "zaad", color: "#F7941D" },
  sahal: { label: "Sahal", desc: "A regular Golis Sahal number", brand: "sahal", color: "#6B2E9E" },
  jeeb: { label: "Jeeb", desc: "A regular Jeeb number", brand: "jeeb", color: "#0E9594" },
  premier: { label: "Premier Wallet", desc: "A regular Premier Wallet number", brand: "premier", color: "#1B2A4A" },
};
// Backward-compat: orders registered before EVC Plus was split into Number/Merchant
// variants are stored with method = "evc" — treat that the same as "evc_number".
// Defined non-enumerable so it resolves correctly on lookup but never shows up as a
// duplicate option in method-selection dropdowns (which iterate via Object.entries).
Object.defineProperty(SOMALIA_METHODS, "evc", { value: SOMALIA_METHODS.evc_number, enumerable: false });

function methodsFor(country) {
  return country === "SO" ? SOMALIA_METHODS : KENYA_METHODS;
}

function qrUrl(data, size = 240) {
  return `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&margin=6&color=0B1B3B&bgcolor=FFFFFF&data=${encodeURIComponent(data)}`;
}

function payLinkFor(slug) {
  return `${window.location.origin}/${slug}`;
}

// ---- Shared React components ----
const { useState, useEffect, useRef } = React;

function FiddoLogo({ variant = "light", frame = true }) {
  const imgSrc = variant === "white" ? "/assets/logo-white.png" : "/assets/logo.png";
  return (
    <div className={frame ? "logo" : "logo logo-plain"}>
      <img src={imgSrc} alt="Fiddo Pay" style={{ height: 32, width: "auto", display: "block" }} />
    </div>
  );
}

// ---- Professional Modern SVG Icon Set (Stroke-based, 24x24) ----
function IconBase({ children, size = 20, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      {children}
    </svg>
  );
}

function IconTill(props) {
  return (
    <IconBase {...props}>
      <path d="M3 9.5 4.6 4h14.8L21 9.5" />
      <path d="M4 9.5h16V19a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9.5Z" />
      <path d="M9 20v-5h6v5" />
    </IconBase>
  );
}

function IconReceipt(props) {
  return (
    <IconBase {...props}>
      <path d="M6 3h12v18l-2.5-1.6L13 21l-2.5-1.6L8 21l-2-1.6V3Z" />
      <path d="M9 8h6M9 12h6M9 16h3.5" />
    </IconBase>
  );
}

function IconAgent(props) {
  return (
    <IconBase {...props}>
      <circle cx="12" cy="8" r="3.4" />
      <path d="M5 20c0-3.6 3.1-6.2 7-6.2s7 2.6 7 6.2" />
    </IconBase>
  );
}

function IconShield(props) {
  return (
    <IconBase {...props}>
      <path d="M12 3.2 19 6v6c0 4.6-3 7.9-7 8.8-4-0.9-7-4.2-7-8.8V6l7-2.8Z" />
      <path d="m9 12 2.1 2.1L15.2 10" />
    </IconBase>
  );
}

function IconCheck(props) {
  return (
    <IconBase {...props}>
      <path d="M4 12.5 9.5 18 20 6" />
    </IconBase>
  );
}

function IconWhatsapp({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M17.5 14.4c-.3-.1-1.7-.8-1.9-.9-.3-.1-.4-.1-.6.1-.2.3-.7.9-.8 1-.2.2-.3.2-.5.1-.3-.1-1.2-.4-2.2-1.4-.8-.7-1.4-1.6-1.5-1.9-.2-.3 0-.4.1-.6l.4-.5c.1-.1.2-.3.2-.4.1-.2 0-.3 0-.5l-.8-2c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.2.3-.9.9-.9 2.2s1 2.5 1.1 2.7c.1.2 2 3 4.7 4.2.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.1-.3-.2-.5-.3Z" />
      <path d="M12 3a9 9 0 0 0-7.7 13.6L3 21l4.5-1.3A9 9 0 1 0 12 3Zm5.3 14.1a7.2 7.2 0 0 1-9.9.3l-.3-.2-2.6.8.8-2.5-.2-.3a7.2 7.2 0 1 1 12.2 1.9Z" />
    </svg>
  );
}

function IconSend(props) {
  return (
    <IconBase {...props}>
      <path d="M4 11 20 4l-6.5 16-2.7-6.1L4 11Z" />
      <path d="m10.8 13.9 3.6-3.9" />
    </IconBase>
  );
}
function IconArrowLeft(props) {
  return (
    <IconBase {...props}>
      <path d="M19 12H5" />
      <path d="m11 18-6-6 6-6" />
    </IconBase>
  );
}

function IconCopy(props) {
  return (
    <IconBase {...props}>
      <rect x="9" y="9" width="12" height="12" rx="2" />
      <path d="M5 15V5a2 2 0 0 1 2-2h10" />
    </IconBase>
  );
}

function IconNfc(props) {
  return (
    <IconBase {...props}>
      <path d="M6 8a6 6 0 0 1 12 0" />
      <path d="M8.5 11a3.5 3.5 0 0 1 7 0" />
      <path d="M11 14a1 1 0 0 1 2 0" />
      <rect x="3" y="4" width="18" height="16" rx="3" />
    </IconBase>
  );
}

function IconZap(props) {
  return (
    <IconBase {...props}>
      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
    </IconBase>
  );
}

function IconSmartphone(props) {
  return (
    <IconBase {...props}>
      <rect x="5" y="2" width="14" height="20" rx="3" />
      <path d="M12 18h.01" />
    </IconBase>
  );
}

function IconStore(props) {
  return (
    <IconBase {...props}>
      <path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7" />
      <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
      <path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4" />
      <path d="M2 7h20v5H2z" />
    </IconBase>
  );
}

function IconLock(props) {
  return (
    <IconBase {...props}>
      <rect x="3" y="11" width="18" height="11" rx="2" />
      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
    </IconBase>
  );
}

function IconContactless(props) {
  return (
    <IconBase {...props}>
      <path d="M6 8.5a7 7 0 0 1 0 7" />
      <path d="M9.5 6a11 11 0 0 1 0 12" />
      <path d="M13 3.5a15 15 0 0 1 0 17" />
    </IconBase>
  );
}

function TapPhoneGlyph({ size = 96 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
      <circle cx="50" cy="50" r="46" stroke="currentColor" strokeWidth="2.5" opacity="0.85" />
      <path d="M38 33a22 22 0 0 1 0 34" stroke="currentColor" strokeWidth="4" strokeLinecap="round" opacity="0.5" />
      <path d="M47 28a30 30 0 0 1 0 44" stroke="currentColor" strokeWidth="4" strokeLinecap="round" opacity="0.75" />
      <path d="M56 23a38 38 0 0 1 0 54" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
      <circle cx="30" cy="50" r="3.2" fill="currentColor" />
    </svg>
  );
}

// Real SVG flags instead of emoji — flag emoji render inconsistently across OSes
// (Windows Chrome, for example, often shows plain "KE"/"SO" letter codes instead of
// an actual flag), so these are drawn directly for a consistent, polished look everywhere.
function FlagIcon({ country, size = 20 }) {
  const w = size, h = Math.round(size * 0.7);
  if (country === "SO") {
    return (
      <svg width={w} height={h} viewBox="0 0 30 21" style={{ display: "block" }}>
        <rect width="30" height="21" fill="#4189DD" />
        <path d="M15 4.8 16.5 9.2 21.1 9.2 17.4 11.9 18.9 16.3 15 13.6 11.1 16.3 12.6 11.9 8.9 9.2 13.5 9.2Z" fill="#fff" />
      </svg>
    );
  }
  return (
    <svg width={w} height={h} viewBox="0 0 30 21" style={{ display: "block" }}>
      <rect width="30" height="21" fill="#fff" />
      <rect width="30" height="6" fill="#0A0A0A" />
      <rect y="6" width="30" height="1.4" fill="#fff" />
      <rect y="7.4" width="30" height="6.2" fill="#BE1E2D" />
      <rect y="13.6" width="30" height="1.4" fill="#fff" />
      <rect y="15" width="30" height="6" fill="#006747" />
      <circle cx="15" cy="10.5" r="4.4" fill="#BE1E2D" stroke="#0A0A0A" strokeWidth="0.6" />
      <circle cx="15" cy="10.5" r="2.7" fill="#fff" />
    </svg>
  );
}
function FlagBadge({ country, size = 18 }) {
  return (
    <span className="flag-badge">
      <FlagIcon country={country} size={size} />
    </span>
  );
}

function SafeBanner() {
  return (
    <div className="safe-banner">
      <div className="shield"><IconShield size={20} /></div>
      <div>
        <h4>Your payment is secure</h4>
        <p>All data is protected end-to-end, and your information is never shared with anyone else.</p>
      </div>
    </div>
  );
}

const PAYMENT_BRANDS = {
  mpesa: { label: "M-PESA", color: "#00A651" },
  evc: { label: "EVC PLUS", color: "#D2232A" },
  zaad: { label: "ZAAD", color: "#F7941D" },
  sahal: { label: "SAHAL", color: "#6B2E9E" },
  jeeb: { label: "JEEB", color: "#0E9594" },
  premier: { label: "PREMIER WALLET", color: "#1B2A4A" },
};

function PaymentBadge({ id, size = "md" }) {
  const brand = PAYMENT_BRANDS[id];
  const [imgFailed, setImgFailed] = useState(false);
  if (!brand) return null;
  return (
    <span className={"payment-badge payment-badge-" + size}>
      {!imgFailed && (
        <img
          src={`/assets/payments/${id}.png`}
          alt={brand.label}
          onError={() => setImgFailed(true)}
          style={{ display: "block", height: size === "sm" ? 18 : 26, width: "auto" }}
        />
      )}
      {imgFailed && <span style={{ color: brand.color, fontWeight: 800, letterSpacing: "-0.01em" }}>{brand.label}</span>}
    </span>
  );
}