'use client';

import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { MetricCard } from './MetricCard';
import styles from './PerformanceMetrics.module.css';

interface MetricData {
  current: number;
  previous: number;
  changePercent: number;
}

interface DashboardStats {
  traffic: MetricData;
  inquiries: MetricData;
  clicks: {
    amsoil: MetricData;
    internal: MetricData;
    social: MetricData;
    external: MetricData;
  };
  period: {
    type: string;
    start: string;
    end: string;
    previousStart: string;
    previousEnd: string;
  };
  /** Present when admin is supporting a dealer who doesn't normally have analytics access */
  adminBypass?: { dealerTier: string };
}

/**
 * PerformanceMetrics - compact analytics widget for dashboard
 *
 * Shows traffic and inquiry metrics for Last 30 Days.
 * Links to /dashboard/stats for full analytics with period selection.
 */
export function PerformanceMetrics() {
  const [stats, setStats] = useState<DashboardStats | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const fetchStats = useCallback(async () => {
    setLoading(true);
    setError(null);

    try {
      const response = await fetch('/api/stats/dashboard?period=30d');
      const data = await response.json();

      if (!response.ok) {
        if (data.error === 'upgrade_required') {
          setError('upgrade_required');
        } else {
          setError(data.message || 'Failed to load stats');
        }
        return;
      }

      setStats(data);
    } catch {
      setError('Failed to load stats');
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchStats();
  }, [fetchStats]);

  if (error === 'upgrade_required') {
    return <UpgradePrompt />;
  }

  const locked = !!stats?.adminBypass;

  return (
    <Link href="/dashboard/stats" className={styles.containerLink}>
      <section className={styles.container}>
        <h3 className={styles.title}>Your Site&apos;s Performance</h3>
        {stats?.adminBypass && (
          <p className={styles.adminNote}>
            Admin view — dealer is on the {stats.adminBypass.dealerTier} plan (no analytics
            access)
          </p>
        )}

        {loading ? (
          <div className={styles.loading}>
            <div className={styles.spinner} />
            <span>Loading stats...</span>
          </div>
        ) : error ? (
          <div className={styles.error}>
            <p>{error}</p>
            <button
              className={styles.retryButton}
              onClick={(e) => {
                e.preventDefault();
                fetchStats();
              }}
            >
              Try Again
            </button>
          </div>
        ) : stats ? (
          <div className={styles.metricsGrid}>
            <MetricCard
              label="Traffic"
              value={stats.traffic.current}
              subLabel="Visits"
              changePercent={stats.traffic.changePercent}
              locked={locked}
            />
            <MetricCard
              label="Inquiries"
              value={stats.inquiries.current}
              subLabel="Form Submissions"
              changePercent={stats.inquiries.changePercent}
              locked={locked}
            />
          </div>
        ) : null}

        <div className={styles.footer}>
          <span className={styles.periodLabel}>Last 30 Days</span>
          <span className={styles.viewMore}>View detailed analytics →</span>
        </div>
      </section>
    </Link>
  );
}

/**
 * UpgradePrompt - shown to Starter/Growth tier dealers
 */
export function UpgradePrompt() {
  return (
    <section className={styles.container}>
      <div className={styles.header}>
        <h3 className={styles.title}>Your Site&apos;s Performance</h3>
      </div>

      <div className={styles.upgradePrompt}>
        <p className={styles.upgradeText}>
          See how your site is performing with traffic and lead metrics.
        </p>
        <a href="/dashboard/subscription" className={styles.upgradeButton}>
          Upgrade to Enhanced
        </a>
      </div>
    </section>
  );
}

export default PerformanceMetrics;