import React, { useState, useEffect } from 'react';
import { documentService } from '../services/documentService';
import { cn } from '../utils/cn';

interface AnalyticsData {
  sessionStats: Array<{
    date: string;
    total_sessions: string;
    successful_sessions: string;
    failed_sessions: string;
    avg_processing_time: string;
    avg_cost: string;
  }>;
  agentStats: Array<{
    agent_name: string;
    total_executions: string;
    successful_executions: string;
    avg_processing_time: string;
    avg_retries: string;
  }>;
  qualityStats: Array<{
    metric_type: string;
    avg_value: string;
    min_value: string;
    max_value: string;
  }>;
  period: {
    startDate: string;
    endDate: string;
    days: number;
  };
}

interface ProcessingStats {
  totalDocuments: number;
  chunkingSuccess: number;
  ragSuccess: number;
  agenticRagSuccess: number;
  averageProcessingTime: {
    chunking: number;
    rag: number;
    agenticRag: number;
  };
  averageApiCalls: {
    chunking: number;
    rag: number;
    agenticRag: number;
  };
}

interface AgenticRAGHealth {
  status: string;
  agents: Record<string, {
    status: string;
    lastExecutionTime: number;
    successRate: number;
    averageProcessingTime: string;
  }>;
  overall: {
    successRate: number;
    averageProcessingTime: number;
    activeSessions: number;
    errorRate: number;
  };
  timestamp: string;
}

const Analytics: React.FC = () => {
  const [analyticsData, setAnalyticsData] = useState<AnalyticsData | null>(null);
  const [processingStats, setProcessingStats] = useState<ProcessingStats | null>(null);
  const [healthStatus, setHealthStatus] = useState<AgenticRAGHealth | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [selectedPeriod, setSelectedPeriod] = useState(30);

  useEffect(() => {
    loadAnalyticsData();
  }, [selectedPeriod]);

  const loadAnalyticsData = async () => {
    try {
      setLoading(true);
      setError(null);

      const [analytics, stats, health] = await Promise.all([
        documentService.getAnalytics(selectedPeriod),
        documentService.getProcessingStats(),
        documentService.getAgenticRAGHealth()
      ]);

      setAnalyticsData(analytics);
      setProcessingStats(stats);
      setHealthStatus(health);
    } catch (err) {
      setError('Failed to load analytics data');
      console.error('Analytics loading error:', err);
    } finally {
      setLoading(false);
    }
  };

  const formatTime = (ms: number | string): string => {
    const milliseconds = typeof ms === 'string' ? parseFloat(ms) : ms;
    if (milliseconds < 1000) return `${Math.round(milliseconds)}ms`;
    if (milliseconds < 60000) return `${(milliseconds / 1000).toFixed(1)}s`;
    return `${(milliseconds / 60000).toFixed(1)}m`;
  };

  const formatCost = (cost: string | number): string => {
    const value = typeof cost === 'string' ? parseFloat(cost) : cost;
    return `$${value.toFixed(4)}`;
  };


  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-red-50 border border-red-200 rounded-lg p-4">
        <div className="flex">
          <div className="flex-shrink-0">
            <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
            </svg>
          </div>
          <div className="ml-3">
            <h3 className="text-sm font-medium text-red-800">Error loading analytics</h3>
            <p className="mt-1 text-sm text-red-700">{error}</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-gray-900">Analytics Dashboard</h1>
        <div className="flex items-center space-x-4">
          <label className="text-sm font-medium text-gray-700">Time Period:</label>
          <select
            value={selectedPeriod}
            onChange={(e) => setSelectedPeriod(Number(e.target.value))}
            className="border border-gray-300 rounded-md px-3 py-1 text-sm"
          >
            <option value={7}>Last 7 days</option>
            <option value={30}>Last 30 days</option>
            <option value={90}>Last 90 days</option>
          </select>
          <button
            onClick={loadAnalyticsData}
            className="bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700"
          >
            Refresh
          </button>
        </div>
      </div>

      {/* System Health Overview */}
      {healthStatus && (
        <div className="bg-white rounded-lg shadow p-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">System Health</h2>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div className="bg-gray-50 rounded-lg p-4">
              <div className="flex items-center">
                <div className={cn(
                  "w-3 h-3 rounded-full mr-2",
                  healthStatus.status === 'healthy' ? 'bg-green-500' : 'bg-red-500'
                )}></div>
                <span className="text-sm font-medium text-gray-900">Overall Status</span>
              </div>
              <p className="text-2xl font-bold text-gray-900 mt-2">
                {healthStatus.status.charAt(0).toUpperCase() + healthStatus.status.slice(1)}
              </p>
            </div>
            <div className="bg-gray-50 rounded-lg p-4">
              <p className="text-sm font-medium text-gray-500">Success Rate</p>
              <p className="text-2xl font-bold text-gray-900">
                {(healthStatus.overall.successRate * 100).toFixed(1)}%
              </p>
            </div>
            <div className="bg-gray-50 rounded-lg p-4">
              <p className="text-sm font-medium text-gray-500">Avg Processing Time</p>
              <p className="text-2xl font-bold text-gray-900">
                {formatTime(healthStatus.overall.averageProcessingTime)}
              </p>
            </div>
            <div className="bg-gray-50 rounded-lg p-4">
              <p className="text-sm font-medium text-gray-500">Active Sessions</p>
              <p className="text-2xl font-bold text-gray-900">
                {healthStatus.overall.activeSessions}
              </p>
            </div>
          </div>
        </div>
      )}

      {/* Processing Statistics */}
      {processingStats && (
        <div className="bg-white rounded-lg shadow p-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">Processing Statistics</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="space-y-4">
              <h3 className="text-md font-medium text-gray-700">Success Rates</h3>
              <div className="space-y-2">
                <div className="flex justify-between">
                  <span className="text-sm text-gray-600">Chunking</span>
                  <span className="text-sm font-medium">
                    {processingStats.totalDocuments > 0 
                      ? ((processingStats.chunkingSuccess / processingStats.totalDocuments) * 100).toFixed(1)
                      : 0}%
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-gray-600">RAG</span>
                  <span className="text-sm font-medium">
                    {processingStats.totalDocuments > 0 
                      ? ((processingStats.ragSuccess / processingStats.totalDocuments) * 100).toFixed(1)
                      : 0}%
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-gray-600">Agentic RAG</span>
                  <span className="text-sm font-medium">
                    {processingStats.totalDocuments > 0 
                      ? ((processingStats.agenticRagSuccess / processingStats.totalDocuments) * 100).toFixed(1)
                      : 0}%
                  </span>
                </div>
              </div>
            </div>
            <div className="space-y-4">
              <h3 className="text-md font-medium text-gray-700">Average Processing Time</h3>
              <div className="space-y-2">
                <div className="flex justify-between">
                  <span className="text-sm text-gray-600">Chunking</span>
                  <span className="text-sm font-medium">{formatTime(processingStats.averageProcessingTime.chunking)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-gray-600">RAG</span>
                  <span className="text-sm font-medium">{formatTime(processingStats.averageProcessingTime.rag)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-gray-600">Agentic RAG</span>
                  <span className="text-sm font-medium">{formatTime(processingStats.averageProcessingTime.agenticRag)}</span>
                </div>
              </div>
            </div>
            <div className="space-y-4">
              <h3 className="text-md font-medium text-gray-700">Average API Calls</h3>
              <div className="space-y-2">
                <div className="flex justify-between">
                  <span className="text-sm text-gray-600">Chunking</span>
                  <span className="text-sm font-medium">{processingStats.averageApiCalls.chunking.toFixed(1)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-gray-600">RAG</span>
                  <span className="text-sm font-medium">{processingStats.averageApiCalls.rag.toFixed(1)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-gray-600">Agentic RAG</span>
                  <span className="text-sm font-medium">{processingStats.averageApiCalls.agenticRag.toFixed(1)}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Session Statistics */}
      {analyticsData && (
        <div className="bg-white rounded-lg shadow p-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">Session Statistics</h2>
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Sessions</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Successful</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Failed</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg Time</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg Cost</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {analyticsData.sessionStats.map((stat, index) => (
                  <tr key={index}>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      {new Date(stat.date).toLocaleDateString()}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{stat.total_sessions}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-green-600">{stat.successful_sessions}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-red-600">{stat.failed_sessions}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      {formatTime(stat.avg_processing_time)}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                      {formatCost(stat.avg_cost)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Agent Performance */}
      {analyticsData && (
        <div className="bg-white rounded-lg shadow p-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">Agent Performance</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {analyticsData.agentStats.map((agent, index) => (
              <div key={index} className="bg-gray-50 rounded-lg p-4">
                <h3 className="text-sm font-medium text-gray-900 mb-2">
                  {agent.agent_name.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
                </h3>
                <div className="space-y-1">
                  <div className="flex justify-between text-xs">
                    <span className="text-gray-600">Total Executions:</span>
                    <span className="font-medium">{agent.total_executions}</span>
                  </div>
                  <div className="flex justify-between text-xs">
                    <span className="text-gray-600">Success Rate:</span>
                    <span className="font-medium text-green-600">
                      {parseInt(agent.total_executions) > 0 
                        ? ((parseInt(agent.successful_executions) / parseInt(agent.total_executions)) * 100).toFixed(1)
                        : 0}%
                    </span>
                  </div>
                  <div className="flex justify-between text-xs">
                    <span className="text-gray-600">Avg Time:</span>
                    <span className="font-medium">{formatTime(agent.avg_processing_time)}</span>
                  </div>
                  <div className="flex justify-between text-xs">
                    <span className="text-gray-600">Avg Retries:</span>
                    <span className="font-medium">{parseFloat(agent.avg_retries).toFixed(1)}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Quality Metrics */}
      {analyticsData && (
        <div className="bg-white rounded-lg shadow p-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">Quality Metrics</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {analyticsData.qualityStats.map((metric, index) => (
              <div key={index} className="bg-gray-50 rounded-lg p-4">
                <h3 className="text-sm font-medium text-gray-900 mb-2">
                  {metric.metric_type.charAt(0).toUpperCase() + metric.metric_type.slice(1)}
                </h3>
                <div className="space-y-1">
                  <div className="flex justify-between text-xs">
                    <span className="text-gray-600">Average:</span>
                    <span className="font-medium">{(parseFloat(metric.avg_value) * 100).toFixed(1)}%</span>
                  </div>
                  <div className="flex justify-between text-xs">
                    <span className="text-gray-600">Min:</span>
                    <span className="font-medium">{(parseFloat(metric.min_value) * 100).toFixed(1)}%</span>
                  </div>
                  <div className="flex justify-between text-xs">
                    <span className="text-gray-600">Max:</span>
                    <span className="font-medium">{(parseFloat(metric.max_value) * 100).toFixed(1)}%</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default Analytics; 