import { Component } from 'solid-js';

const REVENUE_KPIS = [
  { key: 'mrr', label: 'Monthly Recurring Revenue', target: '$550K by EOY', unit: 'USD' },
  { key: 'churn_rate', label: 'Monthly Churn Rate', target: '<3%', unit: '%' },
  { key: 'ltv', label: 'Customer Lifetime Value', target: '>$120', unit: 'USD' },
  { key: 'arpu', label: 'Avg Revenue Per User', target: 'Growing', unit: 'USD' },
  { key: 'upgrades', label: 'Plan Upgrades', target: '>10% MoM', unit: '%' },
];

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

      <div class="freno-kpi-metrics-grid">
        {REVENUE_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 Stripe Integration</h3>
        <p>Revenue KPIs are powered by Stripe. Once Stripe webhooks are configured and subscription events are flowing, these metrics will populate automatically.</p>
        <ul>
          <li>Track MRR, ARPU, and subscription changes</li>
          <li>Monitor churn with automated alerts</li>
          <li>Analyze LTV with cohort analysis</li>
        </ul>
      </div>
    </div>
  );
};
