// fake-app.jsx — generic SaaS analytics dashboard "Acme Reports" + the broken Export CSV button

function AcmeAnalyticsApp({ exportButtonState = 'broken', shakeX = 0 }) {
  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        background: '#fafafa',
        color: '#0f172a',
        display: 'flex',
        overflow: 'hidden',
        fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif',
      }}
    >
      {/* Sidebar */}
      <aside
        style={{
          width: 232,
          background: '#ffffff',
          borderRight: '1px solid #e5e7eb',
          padding: '22px 12px',
          display: 'flex',
          flexDirection: 'column',
          gap: 4,
          flexShrink: 0,
        }}
      >
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: 10,
            padding: '0 10px 18px',
          }}
        >
          <div
            style={{
              width: 30,
              height: 30,
              background: '#0f172a',
              borderRadius: 8,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: '#fff',
              fontWeight: 800,
              fontSize: 15,
              letterSpacing: '-0.02em',
            }}
          >
            A
          </div>
          <div style={{ fontWeight: 700, fontSize: 15, letterSpacing: '-0.01em' }}>
            Acme
          </div>
        </div>
        {[
          { label: 'Overview', active: false },
          { label: 'Customers', active: false },
          { label: 'Reports', active: true },
          { label: 'Exports', active: false },
          { label: 'Integrations', active: false },
          { label: 'Settings', active: false },
        ].map((item) => (
          <div
            key={item.label}
            style={{
              padding: '9px 12px',
              fontSize: 13.5,
              fontWeight: item.active ? 600 : 500,
              borderRadius: 7,
              background: item.active ? '#f1f5f9' : 'transparent',
              color: item.active ? '#0f172a' : '#64748b',
            }}
          >
            {item.label}
          </div>
        ))}
        <div style={{ flex: 1 }} />
        <div
          style={{
            padding: 10,
            fontSize: 12,
            color: '#94a3b8',
            borderTop: '1px solid #f1f5f9',
            display: 'flex',
            alignItems: 'center',
            gap: 8,
          }}
        >
          <div
            style={{
              width: 26,
              height: 26,
              borderRadius: 99,
              background: '#e2e8f0',
            }}
          />
          jamie@acme.io
        </div>
      </aside>

      {/* Main */}
      <div
        style={{
          flex: 1,
          padding: '28px 36px',
          overflow: 'hidden',
          transform: `translateX(${shakeX}px)`,
          willChange: 'transform',
        }}
      >
        {/* Header */}
        <div
          style={{
            display: 'flex',
            alignItems: 'flex-end',
            justifyContent: 'space-between',
            marginBottom: 24,
            gap: 24,
          }}
        >
          <div>
            <div
              style={{
                fontSize: 11.5,
                color: '#64748b',
                textTransform: 'uppercase',
                letterSpacing: '0.08em',
                fontWeight: 600,
              }}
            >
              Reports
            </div>
            <div
              style={{
                fontSize: 28,
                fontWeight: 700,
                letterSpacing: '-0.02em',
                marginTop: 4,
              }}
            >
              Q3 2025 · Revenue Breakdown
            </div>
          </div>
          <ExportCSVButton state={exportButtonState} />
        </div>

        {/* KPI cards */}
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 16,
            marginBottom: 20,
          }}
        >
          {[
            { label: 'Net Revenue', value: '$248,420', delta: '+12.4%', up: true },
            { label: 'New Customers', value: '1,284', delta: '+8.1%', up: true },
            { label: 'Churn Rate', value: '2.3%', delta: '−0.4%', up: true },
            { label: 'ARPU', value: '$93.20', delta: '+3.2%', up: true },
          ].map((k) => (
            <div
              key={k.label}
              style={{
                padding: 18,
                background: '#fff',
                border: '1px solid #e5e7eb',
                borderRadius: 10,
              }}
            >
              <div style={{ fontSize: 12, color: '#64748b', fontWeight: 500 }}>
                {k.label}
              </div>
              <div
                style={{
                  fontSize: 24,
                  fontWeight: 700,
                  marginTop: 6,
                  letterSpacing: '-0.02em',
                }}
              >
                {k.value}
              </div>
              <div
                style={{
                  fontSize: 12,
                  color: k.up ? '#16a34a' : '#dc2626',
                  fontWeight: 600,
                  marginTop: 4,
                }}
              >
                {k.delta}
              </div>
            </div>
          ))}
        </div>

        {/* Chart */}
        <div
          style={{
            padding: '18px 20px',
            background: '#fff',
            border: '1px solid #e5e7eb',
            borderRadius: 10,
            marginBottom: 16,
          }}
        >
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              marginBottom: 12,
            }}
          >
            <div style={{ fontSize: 14, fontWeight: 600 }}>
              Revenue · last 12 weeks
            </div>
            <div
              style={{
                display: 'flex',
                gap: 6,
                fontSize: 12,
                color: '#64748b',
              }}
            >
              <span
                style={{
                  padding: '4px 10px',
                  background: '#f1f5f9',
                  borderRadius: 6,
                  fontWeight: 600,
                  color: '#0f172a',
                }}
              >
                12w
              </span>
              <span style={{ padding: '4px 10px' }}>30d</span>
              <span style={{ padding: '4px 10px' }}>7d</span>
            </div>
          </div>
          <svg
            width="100%"
            height="180"
            viewBox="0 0 1400 180"
            preserveAspectRatio="none"
            style={{ display: 'block' }}
          >
            {[0, 1, 2, 3].map((i) => (
              <line
                key={i}
                x1="0"
                x2="1400"
                y1={20 + i * 40}
                y2={20 + i * 40}
                stroke="#f1f5f9"
                strokeWidth="1"
              />
            ))}
            <path
              d="M 20 140 L 120 122 L 220 130 L 320 100 L 420 110 L 520 82 L 620 88 L 720 70 L 820 60 L 920 75 L 1020 55 L 1120 44 L 1220 32 L 1380 38"
              fill="none"
              stroke="#3b82f6"
              strokeWidth="2.5"
              strokeLinejoin="round"
              strokeLinecap="round"
            />
            <path
              d="M 20 140 L 120 122 L 220 130 L 320 100 L 420 110 L 520 82 L 620 88 L 720 70 L 820 60 L 920 75 L 1020 55 L 1120 44 L 1220 32 L 1380 38 L 1380 180 L 20 180 Z"
              fill="rgba(59,130,246,0.10)"
            />
          </svg>
        </div>

        {/* Table */}
        <div
          style={{
            background: '#fff',
            border: '1px solid #e5e7eb',
            borderRadius: 10,
            overflow: 'hidden',
          }}
        >
          <div
            style={{
              display: 'grid',
              gridTemplateColumns: '2.4fr 1fr 1fr 1fr',
              padding: '12px 20px',
              fontSize: 11,
              fontWeight: 600,
              color: '#64748b',
              textTransform: 'uppercase',
              letterSpacing: '0.08em',
              background: '#f8fafc',
              borderBottom: '1px solid #e5e7eb',
            }}
          >
            <div>Customer</div>
            <div>Plan</div>
            <div>MRR</div>
            <div>Status</div>
          </div>
          {[
            ['Stripe Inc.', 'Enterprise', '$24,800', 'Active'],
            ['Linear', 'Pro', '$1,240', 'Active'],
            ['Notion Labs', 'Enterprise', '$18,400', 'Active'],
            ['Figma', 'Pro', '$2,800', 'Trial'],
          ].map((r) => (
            <div
              key={r[0]}
              style={{
                display: 'grid',
                gridTemplateColumns: '2.4fr 1fr 1fr 1fr',
                padding: '14px 20px',
                fontSize: 13.5,
                borderBottom: '1px solid #f1f5f9',
                alignItems: 'center',
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div
                  style={{
                    width: 28,
                    height: 28,
                    borderRadius: 7,
                    background: '#f1f5f9',
                    color: '#475569',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontWeight: 700,
                    fontSize: 12,
                  }}
                >
                  {r[0][0]}
                </div>
                <div style={{ fontWeight: 600 }}>{r[0]}</div>
              </div>
              <div style={{ color: '#475569' }}>{r[1]}</div>
              <div style={{ fontWeight: 600 }}>{r[2]}</div>
              <div>
                <span
                  style={{
                    padding: '3px 10px',
                    background: r[3] === 'Active' ? '#dcfce7' : '#fef3c7',
                    color: r[3] === 'Active' ? '#166534' : '#92400e',
                    borderRadius: 99,
                    fontSize: 11.5,
                    fontWeight: 600,
                  }}
                >
                  {r[3]}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ExportCSVButton({ state }) {
  const broken = state === 'broken';
  return (
    <div
      data-target="exportCsv"
      style={{
        position: 'relative',
        padding: '11px 18px',
        borderRadius: 8,
        border: broken
          ? '1.5px dashed #dc2626'
          : '1px solid #0f172a',
        background: broken ? 'rgba(220, 38, 38, 0.05)' : '#0f172a',
        color: broken ? '#7f1d1d' : '#fff',
        fontWeight: 600,
        fontSize: 14,
        display: 'inline-flex',
        alignItems: 'center',
        gap: 10,
        cursor: 'pointer',
        animation: broken ? 'fzPulseRed 2.4s ease-in-out infinite' : 'none',
      }}
    >
      {broken && (
        <span
          style={{
            width: 8,
            height: 8,
            borderRadius: 99,
            background: '#dc2626',
          }}
        />
      )}
      {Icons.download(14, 'currentColor')}
      Export CSV
    </div>
  );
}

Object.assign(window, { AcmeAnalyticsApp, ExportCSVButton });