import React from "react";
import { Button } from "@/shared/common/ui/button";
import { Plus, User } from "lucide-react";
import { PlansTable } from "../shared/PlansTable";
import { TeamLeaderData } from "@/performance-management/types/planHierarchyTypes";

interface TeamLeaderViewProps {
  teamLeaderData: TeamLeaderData;
  onAddPlan: () => void;
  onManageWeekly: () => void;
  onViewEmployee: (employeeId: string) => void;
}

export const TeamLeaderView: React.FC<TeamLeaderViewProps> = ({
  teamLeaderData,
  onAddPlan,
  onManageWeekly,
  onViewEmployee,
}) => {
  return (
    <div className="space-y-6">
      {/* Team Lead Plans */}
      <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
            My Plans
          </h2>
          <Button onClick={onAddPlan}>
            <Plus className="mr-2 h-4 w-4" />
            Add Plan
          </Button>
        </div>
        <PlansTable plans={teamLeaderData.plans} />
      </div>

      {/* Weekly Milestones */}
      <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
            Weekly Milestones
          </h2>
          <Button onClick={onManageWeekly} variant="outline">
            Manage Weekly Tasks
          </Button>
        </div>
        <div className="space-y-2">
          {teamLeaderData.weeklyMilestones.length > 0 ? (
            teamLeaderData.weeklyMilestones.map((milestone, index) => (
              <div
                key={index}
                className="flex items-center gap-2 p-3 bg-gray-50 dark:bg-gray-800 rounded">
                <div className="h-2 w-2 rounded-full bg-purple-600"></div>
                <span className="text-sm text-gray-700 dark:text-gray-300">
                  {milestone}
                </span>
              </div>
            ))
          ) : (
            <div className="text-center py-8 text-gray-500 dark:text-gray-400">
              No weekly milestones set
            </div>
          )}
        </div>
      </div>

      {/* Team Members */}
      <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
          Team Members
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {teamLeaderData.employees.map((employee) => (
            <div
              key={employee.id}
              className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition cursor-pointer"
              onClick={() => onViewEmployee(employee.id)}>
              <div className="flex items-start gap-3">
                <div className="p-2 bg-purple-100 dark:bg-purple-900 rounded">
                  <User className="h-5 w-5 text-purple-600 dark:text-purple-300" />
                </div>
                <div className="flex-1">
                  <h3 className="font-medium text-gray-900 dark:text-gray-100">
                    {employee.name}
                  </h3>
                  <p className="text-sm text-gray-600 dark:text-gray-400">
                    {employee.position}
                  </p>
                  <div className="mt-2 space-y-1 text-xs text-gray-500 dark:text-gray-400">
                    <p>
                      {employee.planCount} plans • {employee.weeklyTasksCount}{" "}
                      weekly tasks
                    </p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};
