import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Scorecard = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

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

  const fetchScorecard = async () => {
    try {
      const res = await axios.get('/scorecard/weekly-summary');
      setData(res.data);
    } catch (err) {
      console.error("Failed to load BSC");
    } finally {
      setLoading(false);
    }
  };

  if (loading) return <div className="p-10 text-center">Calculating HR Metrics...</div>;

  const perspectives = [
    { id: 'financial', label: 'Financial (ROI & Costs)', color: 'bg-emerald-600' },
    { id: 'customer', label: 'Employee Experience (EX)', color: 'bg-blue-600' },
    { id: 'internal_process', label: 'Process Excellence', color: 'bg-purple-600' },
    { id: 'learning_growth', label: 'Talent & Culture', color: 'bg-orange-600' }
  ];

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-bold text-gray-800">Balanced Scorecard - HR Health</h2>
        <span className="text-sm text-gray-500">Week Starting: {data.week}</span>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {perspectives.map((p) => (
          <div key={p.id} className="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
            <div className={`${p.color} p-3 text-white font-semibold flex justify-between`}>
              <span>{p.label}</span>
              <span>Health: {data.health[p.id].healthScore}%</span>
            </div>
            <div className="p-4 space-y-4">
              {data.metrics.filter(m => m.perspective === p.id).map(metric => (
                <div key={metric.id} className="flex justify-between items-center border-b pb-2">
                  <div>
                    <div className="text-sm font-medium text-gray-700">{metric.name}</div>
                    <div className="text-xs text-gray-400">Target: {metric.target_value}{metric.unit}</div>
                  </div>
                  <div className="text-right">
                    <div className={`text-lg font-bold ${metric.current_value >= metric.target_value ? 'text-green-600' : 'text-red-500'}`}>
                      {metric.current_value || 0}{metric.unit}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Scorecard;