/* ─────────────────────────────────────────────────────────────
   Integrations / data-sources showcase content.
   Separate from the component so it can be fed from the panel/API
   later (replace INTEGRATIONS with a fetch to the same shape).

   `logo` (a path under /public) renders a real image when present.
   Otherwise the component falls back to the `icon` key (a Lucide icon).
   ───────────────────────────────────────────────────────────── */

export type IntegrationIcon =
  | 'exchange' | 'globe' | 'chart' | 'activity' | 'database'
  | 'newspaper' | 'building' | 'trending' | 'coins'

export type Integration = {
  id: string
  name: string             // tooltip / aria label
  icon: IntegrationIcon    // fallback Lucide icon
  logo?: string            // optional real logo path under /public (e.g. '/logos/lme.svg')
  accent?: string          // tile accent tint
  col: number              // grid column (1-6)
  row: number              // grid row (1-5)
}

/* Global steel data sources & exchanges, scattered across a 6×5 grid.
   Empty cells stay as faint placeholders for the "constellation" look. */
export const INTEGRATIONS: Integration[] = [
  { id: 'lme',        name: 'London Metal Exchange',     icon: 'exchange',  accent: '#CD9E53', col: 6, row: 1 },
  { id: 'shfe',       name: 'Shanghai Futures Exchange', icon: 'trending',  accent: '#c0392b', col: 4, row: 2 },
  { id: 'platts',     name: 'S&P Global Platts',         icon: 'chart',     accent: '#2471a3', col: 6, row: 2 },
  { id: 'reuters',    name: 'Reuters',                   icon: 'newspaper', accent: '#e67e22', col: 3, row: 3 },
  { id: 'fastmarkets',name: 'Fastmarkets',               icon: 'activity',  accent: '#1e8449', col: 5, row: 3 },
  { id: 'worldsteel', name: 'World Steel Association',   icon: 'building',  accent: '#7d3c98', col: 4, row: 4 },
  { id: 'mysteel',    name: 'Mysteel',                   icon: 'database',  accent: '#16a085', col: 6, row: 4 },
  { id: 'cme',        name: 'CME Group',                 icon: 'coins',     accent: '#2980b9', col: 5, row: 5 },
  { id: 'dce',        name: 'Dalian Commodity Exchange', icon: 'globe',     accent: '#d35400', col: 3, row: 5 },
]

export const INTEGRATIONS_META = {
  fa: {
    overline: 'DATA SOURCES',
    heading: 'نبض صنعت',
    sub: 'پنجره‌ای واحد به جهان داده‌های فولاد؛ دسترسی به شاخص‌ها، قیمت‌ها، تجارت جهانی و داده‌های کلیدی از معدن تا محصول نهایی.',
    cta: 'مشاهده منابع داده',
  },
  en: {
    overline: 'DATA SOURCES',
    heading: 'Industry Pulse',
    sub: 'A single window into the world of steel data — access to indices, prices, global trade and key data from mine to finished product.',
    cta: 'View data sources',
  },
}

const PANEL_API =
  (import.meta as ImportMeta & { env?: Record<string, string> }).env?.VITE_PANEL_API ||
  ''

const ICON_TYPES: IntegrationIcon[] = [
  'exchange', 'globe', 'chart', 'activity', 'database',
  'newspaper', 'building', 'trending', 'coins',
]
const asIcon = (v: unknown): IntegrationIcon =>
  ICON_TYPES.includes(v as IntegrationIcon) ? (v as IntegrationIcon) : 'globe'

export async function bootstrapIntegrations(): Promise<void> {
  try {
    const res = await fetch(`${PANEL_API}/api/integrations?limit=50`)
    if (!res.ok) return
    const fetched = await res.json()
    if (!Array.isArray(fetched) || fetched.length === 0) return
    INTEGRATIONS.length = 0
    INTEGRATIONS.push(
      ...fetched.map((it: Record<string, unknown>) => ({
        id: String(it.id),
        name: String(it.name ?? ''),
        icon: asIcon(it.icon),
        logo: it.logo ? String(it.logo) : undefined,
        accent: it.accent ? String(it.accent) : undefined,
        col: Number(it.gridCol) || 1,
        row: Number(it.gridRow) || 1,
      })),
    )
  } catch {
    /* panel offline → keep static fallback */
  }
}
