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

interface DirectorViewProps {
  directorateData: DirectorData;
  onAddPlan: () => void;
  onViewTeamLead: (teamLeadId: string) => void;
}

export const DirectorView: React.FC<DirectorViewProps> = ({
  directorateData,
  onAddPlan,
  onViewTeamLead,
}) => {
  return (
    <div className="space-y-6">
      {/* Directorate 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={directorateData.plans} editable />
      </div>

      {/* Team Leads List */}
      <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 Leads
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {directorateData.teamLeads.map((tl) => (
            <div
              key={tl.id}
              className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition cursor-pointer"
              onClick={() => onViewTeamLead(tl.id)}>
              <h3 className="font-medium text-gray-900 dark:text-gray-100 mb-2">
                {tl.name}
              </h3>
              <div className="space-y-1 text-sm text-gray-600 dark:text-gray-400">
                <p>{tl.planCount} plans assigned</p>
                <div className="flex items-center gap-2">
                  <div className="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                    <div
                      className="bg-purple-600 h-2 rounded-full transition-all"
                      style={{ width: `${tl.progress}%` }}
                    />
                  </div>
                  <span>{tl.progress}%</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};
