import { Component } from 'solid-js';

const ACQUISITION_KPIS = [
  { key: 'cac', label: 'Customer Acquisition Cost', target: '<$15', unit: 'USD' },
  { key: 'traffic_sources', label: 'Traffic by Source', target: 'Diversified', unit: '%' },
  { key: 'signup_rate', label: 'Signup Conversion Rate', target: '>5%', unit: '%' },
  { key: 'channel_breakdown', label: 'Channel Performance', target: 'All channels', unit: '' },
];

export const GA4Panel: Component = () => {
  return (
    <div class="freno-kpi-panel-content">
      <div class="freno-kpi-panel-header">
        <div>
          <h2>Acquisition KPIs</h2>
          <p class="freno-text-muted">GA4-powered web analytics</p>
        </div>
        <div class="freno-kpi-external-links">
          <a href="https://analytics.google.com" target="_blank" rel="noopener noreferrer" class="freno-btn freno-btn-secondary freno-btn-small">
            Open GA4 ↗
          </a>
        </div>
      </div>

      <div class="freno-kpi-metrics-grid">
        {ACQUISITION_KPIS.map((kpi) => (
          <div class="freno-kpi-metric-card freno-kpi-metric-pending">
            <div class="freno-kpi-metric-header">
              <span class="freno-kpi-metric-label">{kpi.label}</span>
              <span class="freno-kpi-badge freno-badge-draft">Pending</span>
            </div>
            <div class="freno-kpi-metric-value">—</div>
            <div class="freno-kpi-metric-target">Target: {kpi.target}</div>
          </div>
        ))}
      </div>

      <div class="freno-kpi-info-card">
        <h3>About GA4 Integration</h3>
        <p>Acquisition KPIs are powered by Google Analytics 4. Once GA4 is configured with enhanced e-commerce tracking, these metrics will populate automatically.</p>
        <ul>
          <li>Track traffic sources and channel attribution</li>
          <li>Monitor CAC across marketing channels</li>
          <li>Analyze landing page conversion funnels</li>
        </ul>
      </div>
    </div>
  );
};
