import { Component } from 'solid-js';

const PRODUCT_KPIS = [
  { key: 'mau', label: 'Monthly Active Users', target: 'Growth MoM', unit: 'users' },
  { key: 'paying_users', label: 'Paying Users', target: '50K by EOY', unit: 'users' },
  { key: 'conversion_rate', label: 'Conversion Rate', target: '>3%', unit: '%' },
  { key: 'nps', label: 'Net Promoter Score', target: '>60', unit: 'pts' },
  { key: 'viral_coefficient', label: 'Viral Coefficient', target: '>0.5', unit: '' },
];

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

      <div class="freno-kpi-metrics-grid">
        {PRODUCT_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 Mixpanel Integration</h3>
        <p>Product KPIs are powered by Mixpanel analytics. Once the Mixpanel SDK is integrated and events are flowing, these metrics will populate automatically.</p>
        <ul>
          <li>Track user signups, project creation, feature usage</li>
          <li>Set up funnels for conversion analysis</li>
          <li>Monitor retention and engagement cohorts</li>
        </ul>
      </div>
    </div>
  );
};
