"use client";

import { useEffect, useState, useRef } from "react";
import { BarChart, TrendingUp } from "lucide-react";

export default function AnalyticsPage() {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    fetch("/api/analytics/overview")
      .then(res => res.json())
      .then(json => {
        if (json.success) {
          setData(json.data);
          drawChart(json.data);
        }
        setLoading(false);
      });
  }, []);

  const drawChart = (analyticsData: any) => {
    if (!canvasRef.current) return;
    const ctx = canvasRef.current.getContext('2d');
    if (!ctx) return;

    // Simple mock bar chart for demonstration
    ctx.clearRect(0, 0, 800, 300);
    
    const bars = [
      { label: 'Total Sessions', value: analyticsData.totalSessions, color: '#3b82f6' },
      { label: 'Avg Score', value: analyticsData.averageScore, color: '#8b5cf6' },
      { label: 'Training Hrs', value: analyticsData.totalTrainingHours, color: '#10b981' }
    ];

    const maxVal = Math.max(...bars.map(b => b.value), 100);
    
    bars.forEach((bar, i) => {
      const height = (bar.value / maxVal) * 200;
      const x = 100 + (i * 200);
      const y = 250 - height;
      
      ctx.fillStyle = bar.color;
      ctx.fillRect(x, y, 100, height);
      
      ctx.fillStyle = '#1e293b';
      ctx.font = '14px sans-serif';
      ctx.fillText(bar.label, x + 10, 270);
      ctx.fillText(bar.value.toString(), x + 40, y - 10);
    });
  };

  if (loading) return <div className="p-8">Loading analytics...</div>;

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-2xl font-bold text-slate-800">Global Analytics</h2>
          <p className="text-slate-500">Platform-wide performance and engagement metrics.</p>
        </div>
      </div>

      <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm flex flex-col items-center">
        <h3 className="font-semibold text-slate-800 w-full mb-4 flex items-center gap-2">
          <BarChart size={18} className="text-blue-600"/> Key Metrics
        </h3>
        <canvas ref={canvasRef} width={800} height={300} className="max-w-full bg-slate-50 rounded-lg border border-slate-100"></canvas>
      </div>
      
      {/* A placeholder for more complex canvas charts as defined in tasks */}
      <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
        <h3 className="font-semibold text-slate-800 border-b border-slate-100 pb-3 mb-4 flex items-center gap-2">
          <TrendingUp size={18} className="text-blue-600"/> Note
        </h3>
        <p className="text-sm text-slate-600">
          Detailed individual analytics, element mastery heatmaps, and emotional trajectory charts are available on the individual Practitioner profile pages.
        </p>
      </div>
    </div>
  );
}