// Agents grid + Automations + Workflow story modal screens.

Object.assign(STRINGS.ar, {
  sc3_breadcrumb_apps: "تطبيقاتي",
  sc3_breadcrumb_wosool: "وصول - موظف متجرك الذكي",
  sc3_breadcrumb_usage: "إستخدام التطبيق",

  // Agents grid
  sc3_refresh: "تحديث",
  sc3_agents_title: "الوكلاء",
  sc3_agents_subtitle: "إدارة وإعدادات الوكلاء الأذكياء",
  sc3_agents_summary: "3 من 3 وكلاء نشطون · النظام يعمل بنسبة 100%",
  sc3_badge_active: "نشط",
  sc3_badge_inactive: "غير مفعل",

  // Customer agent
  sc3_agent_customer_name: "وكيل العملاء",
  sc3_agent_customer_desc: "يرد على رسائل العملاء تلقائياً عبر واتساب",
  sc3_agent_customer_row1: "محادثات نشطة",
  sc3_agent_customer_row2: "رسائل اليوم",
  sc3_agent_customer_row3: "سلات متروكة",
  sc3_agent_customer_link: "عرض الرسائل",

  // Manager agent
  sc3_agent_manager_name: "وكيل المدير",
  sc3_agent_manager_desc: "ينفذ عمليات المتجر تلقائياً — طلبات وشحن وتقارير",
  sc3_agent_manager_row1: "عمليات اليوم",
  sc3_agent_manager_row2: "إفادة الصباح",
  sc3_agent_manager_row3: "طلبات جديدة",
  sc3_agent_manager_link: "عرض الطلبات",

  // Intel agent
  sc3_agent_intel_name: "وكيل الذكاء",
  sc3_agent_intel_desc: "يحلل أداء متجرك ويرسل تقارير صباحية ومسائية عبر واتساب",
  sc3_agent_intel_body: "تقارير دورية تلقائية بأهم مؤشرات أداء متجرك — مبيعات، تحويلات، عملاء جدد",
  sc3_agent_intel_cta: "فعّل الآن",
  sc3_agent_intel_link: "الإعدادات",

  // Sales agent
  sc3_agent_sales_name: "وكيل المبيعات",
  sc3_agent_sales_desc: "يتفاعل مع زوار متجرك مباشرة ويحوّلهم لمشترين",
  sc3_agent_sales_row1: "حالة الويدجت",
  sc3_agent_sales_row2: "زوار متصلون الآن",
  sc3_agent_sales_row3: "إجمالي الزوار",
  sc3_agent_sales_link: "عرض الزوار",

  // Automation grid
  sc3_auto_title: "الأتمتة",
  sc3_auto_subtitle: "15 سيناريو · 15 مفعّل",
  sc3_auto_channel_whatsapp: "واتساب",
  sc3_auto_channel_sms: "SMS",
  sc3_auto_channel_email: "بريد",

  sc3_auto_cart_name: "استرداد السلة المتروكة",
  sc3_auto_cart_desc: "استرداد السلات المتروكة برسالة متعددة الخطوات",
  sc3_auto_leads_name: "رعاية العملاء المحتملين",
  sc3_auto_leads_desc: "ترحيب ورعاية العملاء المحتملين الجدد",
  sc3_auto_welcome_name: "سلسلة الترحيب",
  sc3_auto_welcome_desc: "رسائل ترحيب مخططة للمستخدم الجديد",
  sc3_auto_reactivate_name: "إعادة تنشيط العملاء",
  sc3_auto_reactivate_desc: "إعادة تفاعل العملاء عبر التخفيض مع تواصل تدريجي",
  sc3_auto_review_name: "تقييم ما بعد الشراء",
  sc3_auto_review_desc: "طلب تقييم المنتجات والخدمات بعد التوصيل",
  sc3_auto_backinstock_name: "تنبيهات عودة المخزون",
  sc3_auto_backinstock_desc: "إشعار العملاء المرتقبين عند عودة المنتجات للمخزون",
  sc3_auto_pricedrop_name: "تنبيه انخفاض السعر",
  sc3_auto_pricedrop_desc: "تنبيه العملاء المتطلعين لأسعار المنتجات المنافسة",
  sc3_auto_browse_name: "التصفح المتروك",
  sc3_auto_browse_desc: "إعادة تفاعل العملاء عالية الاهتمام في الإنترنت، بدون إضافة للسلة",
  sc3_auto_loyalty_name: "مراحل الولاء",
  sc3_auto_loyalty_desc: "إرسال مكافآت وتذكرات عند بلوغ مراحل، برنامج الولاء",

  // Workflow modal
  sc3_wf_kind_trigger: "WORKFLOW TRIGGER",
  sc3_wf_kind_wait: "WAIT",
  sc3_wf_kind_condition: "CONDITION",
  sc3_wf_step_create_cart: "إنشاء سلة",
  sc3_wf_step_two_hours: "ساعتان",
  sc3_wf_step_ordered_q: "تم الطلب؟",
  sc3_wf_card_title: "استرداد السلة المتروكة",
  sc3_wf_msg_greeting: "مرحباً",
  sc3_wf_msg_part1: "! 👋",
  sc3_wf_msg_part2: "لاحظنا أن سلتك في",
  sc3_wf_msg_part3: "بقيمة",
  sc3_wf_msg_part4: "ريال لا تزال تنتظرك 🛒",
  sc3_wf_msg_part5: "أتمم طلبك الآن قبل نفاد الكميات!",
});

Object.assign(STRINGS.en, {
  sc3_breadcrumb_apps: "My Apps",
  sc3_breadcrumb_wosool: "Wosool - Your Smart Store Employee",
  sc3_breadcrumb_usage: "Use App",

  // Agents grid
  sc3_refresh: "Refresh",
  sc3_agents_title: "Agents",
  sc3_agents_subtitle: "Manage and configure your smart agents",
  sc3_agents_summary: "3 of 3 agents active · System running at 100%",
  sc3_badge_active: "Active",
  sc3_badge_inactive: "Inactive",

  // Customer agent
  sc3_agent_customer_name: "Customer agent",
  sc3_agent_customer_desc: "Replies to customer messages automatically over WhatsApp",
  sc3_agent_customer_row1: "Active chats",
  sc3_agent_customer_row2: "Messages today",
  sc3_agent_customer_row3: "Abandoned carts",
  sc3_agent_customer_link: "View messages",

  // Manager agent
  sc3_agent_manager_name: "Manager agent",
  sc3_agent_manager_desc: "Runs store operations automatically — orders, shipping, and reports",
  sc3_agent_manager_row1: "Operations today",
  sc3_agent_manager_row2: "Morning briefing",
  sc3_agent_manager_row3: "New orders",
  sc3_agent_manager_link: "View orders",

  // Intel agent
  sc3_agent_intel_name: "Intelligence agent",
  sc3_agent_intel_desc: "Analyzes store performance and sends morning and evening reports over WhatsApp",
  sc3_agent_intel_body: "Automated scheduled reports with your key store KPIs — sales, conversions, new customers",
  sc3_agent_intel_cta: "Activate now",
  sc3_agent_intel_link: "Settings",

  // Sales agent
  sc3_agent_sales_name: "Sales agent",
  sc3_agent_sales_desc: "Engages live storefront visitors and converts them into buyers",
  sc3_agent_sales_row1: "Widget status",
  sc3_agent_sales_row2: "Visitors online now",
  sc3_agent_sales_row3: "Total visitors",
  sc3_agent_sales_link: "View visitors",

  // Automation grid
  sc3_auto_title: "Automations",
  sc3_auto_subtitle: "15 scenarios · 15 enabled",
  sc3_auto_channel_whatsapp: "WhatsApp",
  sc3_auto_channel_sms: "SMS",
  sc3_auto_channel_email: "Email",

  sc3_auto_cart_name: "Abandoned cart recovery",
  sc3_auto_cart_desc: "Recover abandoned carts with a multi-step message sequence",
  sc3_auto_leads_name: "Lead nurturing",
  sc3_auto_leads_desc: "Welcome and nurture new potential customers",
  sc3_auto_welcome_name: "Welcome series",
  sc3_auto_welcome_desc: "Planned welcome messages for new users",
  sc3_auto_reactivate_name: "Customer reactivation",
  sc3_auto_reactivate_desc: "Re-engage customers with discounts through gradual outreach",
  sc3_auto_review_name: "Post-purchase review",
  sc3_auto_review_desc: "Request product and service reviews after delivery",
  sc3_auto_backinstock_name: "Back-in-stock alerts",
  sc3_auto_backinstock_desc: "Notify waiting customers when products are back in stock",
  sc3_auto_pricedrop_name: "Price drop alerts",
  sc3_auto_pricedrop_desc: "Alert interested customers about competitive product prices",
  sc3_auto_browse_name: "Browse abandonment",
  sc3_auto_browse_desc: "Re-engage high-intent online customers who didn't add to cart",
  sc3_auto_loyalty_name: "Loyalty milestones",
  sc3_auto_loyalty_desc: "Send rewards and reminders when customers hit loyalty program milestones",

  // Workflow modal
  sc3_wf_kind_trigger: "WORKFLOW TRIGGER",
  sc3_wf_kind_wait: "WAIT",
  sc3_wf_kind_condition: "CONDITION",
  sc3_wf_step_create_cart: "Cart created",
  sc3_wf_step_two_hours: "2 hours",
  sc3_wf_step_ordered_q: "Order placed?",
  sc3_wf_card_title: "Abandoned cart recovery",
  sc3_wf_msg_greeting: "Hi",
  sc3_wf_msg_part1: "! 👋",
  sc3_wf_msg_part2: "We noticed your cart at",
  sc3_wf_msg_part3: "worth",
  sc3_wf_msg_part4: "SAR is still waiting for you 🛒",
  sc3_wf_msg_part5: "Complete your order now before items sell out!",
});

const AgentsGrid = React.forwardRef((props, ref) => (
  <div ref={ref} style={{
    width: 1000, height: 760, background: '#F8F8F8', display: 'flex', flexDirection: 'column',
    fontFamily: 'var(--w-font-ar)', direction: 'rtl', position: 'relative',
  }}>
    <TopBar />
    <Breadcrumb items={[t('sc3_breadcrumb_apps'), t('sc3_breadcrumb_wosool'), t('sc3_breadcrumb_usage')]}/>

    <div style={{ flex: 1, padding: '0 80px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div style={{ border: '1px solid #E5E5E5', borderRadius: 8, padding: '6px 12px', fontSize: 12, color: '#6B7280', background: '#fff' }}>↻ {t('sc3_refresh')}</div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 22, fontWeight: 700 }}>{t('sc3_agents_title')}</div>
          <div style={{ fontSize: 12, color: '#6B7280' }}>{t('sc3_agents_subtitle')}</div>
        </div>
      </div>
      <div style={{ background: '#fff', border: '1px solid #E5E5E5', borderRadius: 10, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'flex-end', fontSize: 13 }}>
        <span style={{ fontWeight: 600 }}>{t('sc3_agents_summary')}</span>
        <span style={{ width: 20, height: 20, borderRadius: '50%', background: '#D1FAE5', color: '#10B981', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11 }}>✓</span>
      </div>

      {/* 4 agent cards stacked vertically — each ~150px tall so we can zoom into each */}
      <div data-agent="customer" style={{ flexShrink: 0 }}>
        <AgentCard color="#3B82F6" badge={t('sc3_badge_active')} badgeBg="#D1FAE5" name={t('sc3_agent_customer_name')} desc={t('sc3_agent_customer_desc')} rows={[[toLocaleDigits('0'),t('sc3_agent_customer_row1')],[toLocaleDigits('25'),t('sc3_agent_customer_row2')],[toLocaleDigits('0'),t('sc3_agent_customer_row3')]]} link={t('sc3_agent_customer_link')} />
      </div>
      <div data-agent="manager" style={{ flexShrink: 0 }}>
        <AgentCard color="#8B5CF6" badge={t('sc3_badge_active')} badgeBg="#D1FAE5" name={t('sc3_agent_manager_name')} desc={t('sc3_agent_manager_desc')} rows={[[toLocaleDigits('8'),t('sc3_agent_manager_row1')],[toLocaleDigits('0'),t('sc3_agent_manager_row2')],[toLocaleDigits('0'),t('sc3_agent_manager_row3')]]} link={t('sc3_agent_manager_link')} />
      </div>
      <div data-agent="intel" style={{ flexShrink: 0 }}>
        <AgentCard color="#F5A623" badge={t('sc3_badge_inactive')} badgeBg="#FFF8E6" name={t('sc3_agent_intel_name')} desc={t('sc3_agent_intel_desc')} body={<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flex: 1, gap: 12 }}><div style={{ fontSize: 12, color: '#6B7280', textAlign: 'right', flex: 1 }}>{t('sc3_agent_intel_body')}</div><button style={{ background: '#F5A623', color: '#fff', border: 'none', borderRadius: 8, padding: '8px 18px', fontSize: 13, fontWeight: 600, fontFamily: 'inherit', whiteSpace: 'nowrap' }}>{t('sc3_agent_intel_cta')}</button></div>} link={t('sc3_agent_intel_link')} />
      </div>
      <div data-agent="sales" style={{ flexShrink: 0 }}>
        <AgentCard color="#10B981" badge={t('sc3_badge_active')} badgeBg="#D1FAE5" name={t('sc3_agent_sales_name')} desc={t('sc3_agent_sales_desc')} rows={[[toLocaleDigits('1'),t('sc3_agent_sales_row1')],[toLocaleDigits('0'),t('sc3_agent_sales_row2')],[toLocaleDigits('0'),t('sc3_agent_sales_row3')]]} link={t('sc3_agent_sales_link')} />
      </div>
    </div>
  </div>
));

// Card is now WIDE and rectangular (full row) — fixed height for consistency
const AgentCard = ({ color, badge, badgeBg, name, desc, rows, body, link }) => (
  <div style={{ background: '#fff', border: '1px solid #E5E5E5', borderRadius: 12, padding: 16, display: 'flex', flexDirection: 'column', gap: 10, height: 130, justifyContent: 'space-between' }}>
    {/* Top row: title block on right, badge + icon on left */}
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{ marginInlineStart: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{ fontSize: 11, fontWeight: 600, padding: '4px 12px', borderRadius: 6, background: badgeBg, color, whiteSpace: 'nowrap' }}>{badge}</span>
      </div>
      <div style={{ textAlign: 'right' }}>
        <div style={{ fontSize: 16, fontWeight: 700, color: '#1A1A1A', lineHeight: 1.2 }}>{name}</div>
        <div style={{ fontSize: 12, color: '#6B7280', marginTop: 4, lineHeight: 1.4 }}>{desc}</div>
      </div>
      <div style={{ width: 40, height: 40, borderRadius: 10, background: color, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, flexShrink: 0 }}>
        {color === '#3B82F6' ? '💬' : color === '#8B5CF6' ? '🔧' : color === '#F5A623' ? '🌐' : '📈'}
      </div>
    </div>
    {/* Stats row OR custom body */}
    {rows ? (
      <div style={{ display: 'flex', gap: 24, justifyContent: 'flex-end', borderTop: '1px solid #F3F4F6', paddingTop: 10 }}>
        {rows.map(([v, l], i) => (
          <div key={i} style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 18, fontWeight: 800, color: '#1A1A1A', lineHeight: 1 }}>{v}</div>
            <div style={{ fontSize: 11, color: '#6B7280', marginTop: 4 }}>{l}</div>
          </div>
        ))}
        <div style={{ marginInlineEnd: 'auto', fontSize: 12, color, fontWeight: 600, alignSelf: 'center' }}>{link} ‹</div>
      </div>
    ) : (
      <div style={{ borderTop: '1px solid #F3F4F6', paddingTop: 10 }}>{body}</div>
    )}
  </div>
);

// ─── Automations grid ───────────────────────────────────────────────────────

const AutomationGrid = React.forwardRef((props, ref) => {
  const chW = t('sc3_auto_channel_whatsapp');
  const chS = t('sc3_auto_channel_sms');
  const chE = t('sc3_auto_channel_email');
  return (
  <div ref={ref} style={{
    width: 1000, height: 500, background: '#F8F8F8', display: 'flex', flexDirection: 'column',
    fontFamily: 'var(--w-font-ar)', direction: 'rtl', overflow: 'hidden', position: 'relative',
  }}>
    <TopBar />
    <Breadcrumb items={[t('sc3_breadcrumb_apps'), t('sc3_breadcrumb_wosool'), t('sc3_breadcrumb_usage')]}/>

    <div style={{ flex: 1, padding: '0 80px', display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div style={{ display: 'flex', gap: 4, border: '1px solid #E5E5E5', borderRadius: 6, overflow: 'hidden' }}>
          <div style={{ background: '#fff', padding: '4px 8px', fontSize: 11 }}>↻</div>
          <div style={{ background: '#004D5B', color: '#fff', padding: '4px 8px', fontSize: 11 }}>▦</div>
          <div style={{ background: '#fff', padding: '4px 8px', fontSize: 11, color: '#9CA3AF' }}>☰</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 20, fontWeight: 700 }}>{t('sc3_auto_title')}</div>
          <div style={{ fontSize: 10, color: '#6B7280' }}>{t('sc3_auto_subtitle')}</div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, flex: 1, overflow: 'hidden' }}>
        <AutoCard hilite name={t('sc3_auto_cart_name')} desc={t('sc3_auto_cart_desc')} icon="🛒" channels={[chW, chS, chE]} />
        <AutoCard name={t('sc3_auto_leads_name')} desc={t('sc3_auto_leads_desc')} icon="👥" channels={[chW]} />
        <AutoCard name={t('sc3_auto_welcome_name')} desc={t('sc3_auto_welcome_desc')} icon="👤" channels={[chS, chW]} />
        <AutoCard name={t('sc3_auto_reactivate_name')} desc={t('sc3_auto_reactivate_desc')} icon="↻" channels={[chW, chE, chS]} />
        <AutoCard name={t('sc3_auto_review_name')} desc={t('sc3_auto_review_desc')} icon="⭐" channels={[chW, chE]} />
        <AutoCard name={t('sc3_auto_backinstock_name')} desc={t('sc3_auto_backinstock_desc')} icon="🏷" channels={[chE, chW]} />
        <AutoCard name={t('sc3_auto_pricedrop_name')} desc={t('sc3_auto_pricedrop_desc')} icon="🏷" channels={[chW, chS, chE]} />
        <AutoCard name={t('sc3_auto_browse_name')} desc={t('sc3_auto_browse_desc')} icon="🛒" channels={[chW, chE]} />
        <AutoCard name={t('sc3_auto_loyalty_name')} desc={t('sc3_auto_loyalty_desc')} icon="🏆" channels={[chS, chE, chW]} />
      </div>
    </div>
    <BottomNav active="auto"/>
  </div>
  );
});

const AutoCard = ({ name, desc, icon, channels, hilite }) => {
  const chW = t('sc3_auto_channel_whatsapp');
  const chS = t('sc3_auto_channel_sms');
  return (
  <div data-auto={hilite ? 'cart-recovery' : ''} style={{
    background: '#fff', border: hilite ? '1.5px solid #10B981' : '1px solid #E5E5E5',
    boxShadow: hilite ? '0 0 0 3px rgba(16,185,129,0.12)' : 'none',
    borderRadius: 10, padding: 10, display: 'flex', flexDirection: 'column', gap: 6,
    transition: 'border-color 200ms, box-shadow 200ms',
  }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
      <div style={{ width: 28, height: 28, borderRadius: 8, background: '#F0FDF4', color: '#10B981', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14 }}>{icon}</div>
      <div style={{ textAlign: 'right' }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: '#1A1A1A' }}>{name}</div>
        <div style={{ fontSize: 9, color: '#6B7280', marginTop: 2 }}>{desc}</div>
      </div>
    </div>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 'auto' }}>
      <div style={{ width: 32, height: 18, borderRadius: 9, background: '#10B981', position: 'relative' }}>
        <div style={{ position: 'absolute', top: 2, left: 2, width: 14, height: 14, borderRadius: '50%', background: '#fff' }}/>
      </div>
      <div style={{ display: 'flex', gap: 3 }}>
        <div data-eye={hilite ? 'true' : ''} style={{ width: 22, height: 18, borderRadius: 4, background: '#F3F4F6', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10 }}>👁</div>
        {channels.map(c => (
          <span key={c} style={{
            fontSize: 8, fontWeight: 600, padding: '2px 6px', borderRadius: 4,
            background: c === chW ? 'rgba(37,211,102,0.12)' : c === chS ? 'rgba(0,122,255,0.12)' : 'rgba(99,102,241,0.12)',
            color: c === chW ? '#25D366' : c === chS ? '#007AFF' : '#6366F1',
          }}>{c}</span>
        ))}
      </div>
    </div>
  </div>
  );
};

// ─── Workflow modal (story-style) ───────────────────────────────────────────

const WorkflowModal = ({ step, total = 10 }) => {
  const steps = [
    { kind: 'TRIGGER', kindAr: t('sc3_wf_kind_trigger'), title: t('sc3_wf_step_create_cart'), icon: '⚡', tone: 'green' },
    { kind: 'WAIT', kindAr: t('sc3_wf_kind_wait'), title: t('sc3_wf_step_two_hours'), icon: '🕐', tone: 'gray' },
    { kind: 'CONDITION', kindAr: t('sc3_wf_kind_condition'), title: t('sc3_wf_step_ordered_q'), icon: '🪝', tone: 'orange' },
  ];
  const s = steps[step - 1] || steps[0];

  const toneBg = s.tone === 'green' ? '#1B5E5E' : s.tone === 'orange' ? '#7B3F0E' : '#2A2A2A';
  const toneIconBg = s.tone === 'green' ? '#73FCD7' : s.tone === 'orange' ? '#F5A623' : '#fff';
  const toneIconColor = s.tone === 'green' ? '#0B1A1F' : s.tone === 'orange' ? '#fff' : '#1A1A1A';

  return (
    <div style={{
      width: 320, background: toneBg, borderRadius: 12, padding: 16,
      color: '#fff', textAlign: 'center', position: 'relative',
      boxShadow: '0 16px 48px rgba(0,0,0,0.4)',
      transition: 'background 400ms cubic-bezier(0.16, 1, 0.3, 1)',
    }}>
      {/* Top bar with progress bars */}
      <div style={{ display: 'flex', gap: 3, marginBottom: 10 }}>
        {Array.from({ length: total }).map((_, i) => (
          <div key={i} style={{ flex: 1, height: 2, background: i < step ? '#fff' : 'rgba(255,255,255,0.25)', borderRadius: 1, transition: 'background 300ms' }}/>
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div style={{ width: 22, height: 22, borderRadius: '50%', background: 'rgba(255,255,255,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12 }}>×</div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 12, fontWeight: 600 }}>{t('sc3_wf_card_title')}</div>
          <div style={{ fontSize: 10, opacity: 0.7 }}>{s.title}</div>
        </div>
      </div>
      <div style={{ width: 56, height: 56, borderRadius: 12, background: toneIconBg, color: toneIconColor, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28, margin: '14px auto 8px' }}>{s.icon}</div>
      <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.1em', opacity: 0.8 }}>{s.kindAr}</div>
      <div style={{ fontSize: 22, fontWeight: 700, margin: '4px 0 2px' }}>{s.title}</div>
      <div style={{ fontSize: 10, opacity: 0.6, marginBottom: 12 }}>Step {toLocaleDigits(step)} of {toLocaleDigits(total)}</div>
      <div style={{ background: 'rgba(255,255,255,0.06)', borderRadius: 10, padding: 12, fontSize: 11, lineHeight: 1.7, textAlign: 'right' }}>
        {t('sc3_wf_msg_greeting')} <span style={{ direction: 'ltr' }}>{'{{name}}'}</span>{t('sc3_wf_msg_part1')}<br/>
        {t('sc3_wf_msg_part2')} <span style={{ direction: 'ltr' }}>{'{{store}}'}</span> {t('sc3_wf_msg_part3')} <span style={{ direction: 'ltr' }}>{'{{total}}'}</span> {t('sc3_wf_msg_part4')}<br/>
        {t('sc3_wf_msg_part5')}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10 }}>
        <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14 }}>‹</div>
        <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14 }}>›</div>
      </div>
    </div>
  );
};

const WorkflowStoryScreen = React.forwardRef(({ step }, ref) => (
  <div ref={ref} style={{
    width: 1000, height: 500, background: '#F8F8F8', display: 'flex', flexDirection: 'column',
    fontFamily: 'var(--w-font-ar)', direction: 'rtl', overflow: 'hidden', position: 'relative',
  }}>
    <TopBar />
    <Breadcrumb items={[t('sc3_breadcrumb_apps'), t('sc3_breadcrumb_wosool'), t('sc3_breadcrumb_usage')]}/>
    {/* Dim background */}
    <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.5)', zIndex: 5 }}/>
    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 6 }}>
      <WorkflowModal step={step} />
    </div>
  </div>
));

Object.assign(window, { AgentsGrid, AgentCard, AutomationGrid, AutoCard, WorkflowModal, WorkflowStoryScreen });