/**
 * Simple Session Stats Component
 *
 * Displays session statistics in a simple card layout
 */

'use client';

import React from 'react';
import { Session } from '@/types/session/session';

interface SessionStatsProps {
  sessions: Session[];
}

interface StatCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  color?: 'blue' | 'green' | 'yellow' | 'red' | 'gray';
}

function StatCard({ title, value, subtitle, color = 'blue' }: StatCardProps) {
  const colorClasses = {
    blue: 'bg-blue-50 border-blue-200 text-blue-800',
    green: 'bg-green-50 border-green-200 text-green-800',
    yellow: 'bg-yellow-50 border-yellow-200 text-yellow-800',
    red: 'bg-red-50 border-red-200 text-red-800',
    gray: 'bg-gray-50 border-gray-200 text-gray-800',
  };

  return (
    <div className={`p-4 rounded-lg border ${colorClasses[color]}`}>
      <h3 className="text-sm font-medium opacity-75">{title}</h3>
      <p className="text-2xl font-bold mt-1">{value}</p>
      {subtitle && <p className="text-xs opacity-75 mt-1">{subtitle}</p>}
    </div>
  );
}

export function SessionStats({ sessions }: SessionStatsProps) {
  const stats = React.useMemo(() => {
    const totalSessions = sessions.length;
    const activeSessions = sessions.filter((s) => s.status === 'Started').length;
    const completedSessions = sessions.filter((s) => s.status === 'Ended').length;
    const cancelledSessions = sessions.filter((s) => s.status === 'Cancelled').length;

    const totalEnergy = sessions.reduce((sum, session) => {
      return sum + (session.metrics?.energy_consumed || 0);
    }, 0);

    const totalCost = sessions.reduce((sum, session) => {
      return sum + (session.cost?.amount || 0);
    }, 0);

    const averageEnergyPerSession = totalSessions > 0 ? totalEnergy / totalSessions : 0;

    return {
      totalSessions,
      activeSessions,
      completedSessions,
      cancelledSessions,
      totalEnergy: Math.round(totalEnergy * 100) / 100,
      totalCost: Math.round(totalCost * 100) / 100,
      averageEnergyPerSession: Math.round(averageEnergyPerSession * 100) / 100,
    };
  }, [sessions]);

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      <StatCard title="Total Sessions" value={stats.totalSessions} color="blue" />

      <StatCard title="Active Sessions" value={stats.activeSessions} color="green" />

      <StatCard title="Completed" value={stats.completedSessions} color="gray" />

      <StatCard title="Cancelled" value={stats.cancelledSessions} color="red" />

      <StatCard title="Total Energy" value={`${stats.totalEnergy} kWh`} color="blue" />

      <StatCard title="Total Cost" value={`$${stats.totalCost}`} color="green" />

      <StatCard
        title="Avg Energy"
        value={`${stats.averageEnergyPerSession} kWh`}
        subtitle="per session"
        color="gray"
      />

      <StatCard
        title="Active Rate"
        value={`${Math.round((stats.activeSessions / Math.max(stats.totalSessions, 1)) * 100)}%`}
        subtitle="sessions active"
        color="yellow"
      />
    </div>
  );
}