'use client';

import React, { useState } from 'react';

interface ChartData {
  label: string;
  value: number;
  color: string;
}

const SimpleBarChart: React.FC<{ data: ChartData[]; title: string }> = ({ data, title }) => {
  const maxValue = Math.max(...data.map(d => d.value));

  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
      <div className="space-y-3">
        {data.map((item, index) => (
          <div key={index} className="flex items-center">
            <div className="w-20 text-sm text-gray-600 text-right mr-3">
              {item.label}
            </div>
            <div className="flex-1 bg-gray-200 rounded-full h-4 relative">
              <div
                className={`h-4 rounded-full ${item.color} transition-all duration-500`}
                style={{ width: `${(item.value / maxValue) * 100}%` }}
              />
              <span className="absolute right-2 top-0 h-4 flex items-center text-xs text-white font-medium">
                {item.value}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const SimpleLineChart: React.FC<{ data: number[]; labels: string[]; title: string }> = ({ 
  data, 
  labels, 
  title 
}) => {
  const maxValue = Math.max(...data);
  const minValue = Math.min(...data);
  const range = maxValue - minValue;

  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">{title}</h3>
      <div className="relative h-48">
        <svg className="w-full h-full" viewBox="0 0 400 200">
          {/* Grid lines */}
          {[0, 1, 2, 3, 4].map(i => (
            <line
              key={i}
              x1="40"
              y1={40 + (i * 32)}
              x2="380"
              y2={40 + (i * 32)}
              stroke="#f3f4f6"
              strokeWidth="1"
            />
          ))}
          
          {/* Data line */}
          <polyline
            fill="none"
            stroke="#3b82f6"
            strokeWidth="2"
            points={data.map((value, index) => {
              const x = 40 + (index * (340 / (data.length - 1)));
              const y = 40 + (160 - ((value - minValue) / range) * 160);
              return `${x},${y}`;
            }).join(' ')}
          />
          
          {/* Data points */}
          {data.map((value, index) => {
            const x = 40 + (index * (340 / (data.length - 1)));
            const y = 40 + (160 - ((value - minValue) / range) * 160);
            return (
              <circle
                key={index}
                cx={x}
                cy={y}
                r="4"
                fill="#3b82f6"
                className="hover:r-6 transition-all"
              />
            );
          })}
        </svg>
        
        {/* X-axis labels */}
        <div className="flex justify-between mt-2 px-10">
          {labels.map((label, index) => (
            <span key={index} className="text-xs text-gray-500">
              {label}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
};

const PerformanceChart: React.FC = () => {
  const [activeTab, setActiveTab] = useState<'exam' | 'user'>('exam');

  const examData: ChartData[] = [
    { label: 'Dasar Kuliner', value: 85, color: 'bg-blue-500' },
    { label: 'Teknik Memasak', value: 78, color: 'bg-green-500' },
    { label: 'Food Safety', value: 92, color: 'bg-purple-500' },
    { label: 'Kuliner Internasional', value: 82, color: 'bg-orange-500' },
    { label: 'Pastry & Bakery', value: 88, color: 'bg-red-500' },
    { label: 'Menu Planning', value: 75, color: 'bg-yellow-500' }
  ];

  const userGrowthData = [120, 135, 148, 162, 178, 195, 210];
  const userGrowthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul'];

  return (
    <div className="space-y-6">
      {/* Tab Navigation */}
      <div className="flex space-x-1 bg-gray-100 p-1 rounded-lg w-fit">
        <button
          onClick={() => setActiveTab('exam')}
          className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
            activeTab === 'exam'
              ? 'bg-white text-gray-900 shadow-sm'
              : 'text-gray-600 hover:text-gray-900'
          }`}
        >
          Performa Ujian
        </button>
        <button
          onClick={() => setActiveTab('user')}
          className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
            activeTab === 'user'
              ? 'bg-white text-gray-900 shadow-sm'
              : 'text-gray-600 hover:text-gray-900'
          }`}
        >
          Pertumbuhan Pengguna
        </button>
      </div>

      {/* Chart Content */}
      {activeTab === 'exam' ? (
        <SimpleBarChart 
          data={examData} 
          title="Rata-rata Nilai per Kursus Pelatihan" 
        />
      ) : (
        <SimpleLineChart 
          data={userGrowthData}
          labels={userGrowthLabels}
          title="Pertumbuhan Pengguna (7 Bulan Terakhir)"
        />
      )}
    </div>
  );
};

export default PerformanceChart;