import React from 'react';
import { Users, TrendingUp, Award, Target } from 'lucide-react';
import type { Team, Employee } from '../../types/index.js';

interface TeamOverviewProps {
  teams?: Team[];
  employees?: Employee[];
}

export const TeamOverview: React.FC<TeamOverviewProps> = ({
  teams = [],
  employees = [],
}) => {
  const totalMembers = teams.reduce((sum, t) => sum + (t.memberIds?.length || 0), 0);
  const avgTeamSize = teams.length > 0 ? (totalMembers / teams.length).toFixed(1) : 0;

  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-6">Team Overview</h2>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <div className="bg-blue-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Total Teams</p>
              <p className="text-3xl font-bold text-blue-600">{teams.length}</p>
            </div>
            <Users className="w-10 h-10 text-blue-400" />
          </div>
        </div>

        <div className="bg-green-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Total Members</p>
              <p className="text-3xl font-bold text-green-600">{totalMembers}</p>
            </div>
            <Target className="w-10 h-10 text-green-400" />
          </div>
        </div>

        <div className="bg-purple-50 p-4 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">Avg Team Size</p>
              <p className="text-3xl font-bold text-purple-600">{avgTeamSize}</p>
            </div>
            <TrendingUp className="w-10 h-10 text-purple-400" />
          </div>
        </div>
      </div>

      <div className="space-y-4">
        <h3 className="font-semibold text-lg">All Teams</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {teams.map((team) => {
            const memberCount = team.memberIds?.length || 0;
            const manager = team.managerId 
              ? employees.find(e => e.id === team.managerId)
              : null;

            return (
              <div key={team.id} className="border rounded-lg p-4 hover:shadow-md transition">
                <div className="flex items-start justify-between mb-3">
                  <div className="flex items-center gap-2">
                    <div className="bg-blue-100 p-2 rounded-lg">
                      <Users className="w-5 h-5 text-blue-600" />
                    </div>
                    <div>
                      <h4 className="font-bold">{team.name}</h4>
                      {team.description && (
                        <p className="text-sm text-gray-600">{team.description}</p>
                      )}
                    </div>
                  </div>
                  <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
                    {memberCount} {memberCount === 1 ? 'member' : 'members'}
                  </span>
                </div>

                {manager && (
                  <div className="bg-gray-50 rounded p-3 mb-3">
                    <div className="flex items-center gap-2">
                      <Award className="w-4 h-4 text-gray-600" />
                      <div>
                        <p className="text-xs text-gray-500">Team Manager</p>
                        <p className="text-sm font-medium">
                          {manager.firstName} {manager.lastName}
                        </p>
                      </div>
                    </div>
                  </div>
                )}

                {team.memberIds && team.memberIds.length > 0 && (
                  <div className="flex flex-wrap gap-2">
                    {team.memberIds.slice(0, 5).map((memberId) => {
                      const member = employees.find(e => e.id === memberId);
                      return member ? (
                        <div
                          key={memberId}
                          className="bg-gray-100 px-2 py-1 rounded text-xs"
                          title={`${member.firstName} ${member.lastName}`}
                        >
                          {member.firstName} {member.lastName.charAt(0)}.
                        </div>
                      ) : null;
                    })}
                    {team.memberIds.length > 5 && (
                      <div className="bg-gray-200 px-2 py-1 rounded text-xs font-medium">
                        +{team.memberIds.length - 5} more
                      </div>
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};
