import React from "react";
import { Calendar, CheckCircle2 } from "lucide-react";
import { PlansTable } from "../shared/PlansTable";
import { EmployeeData } from "@/performance-management/types/planHierarchyTypes";

interface EmployeeViewProps {
  employeeData: EmployeeData;
}

export const EmployeeView: React.FC<EmployeeViewProps> = ({ employeeData }) => {
  return (
    <div className="space-y-6">
      {/* Weekly Expectations */}
      <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 flex items-center gap-2">
          <Calendar className="h-5 w-5" />
          My Weekly Expectations
        </h2>

        {employeeData.weeklyTasks.length > 0 ? (
          <div className="space-y-3">
            {employeeData.weeklyTasks.map((task) => (
              <div
                key={task.id}
                className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                <div className="flex items-start justify-between mb-2">
                  <h3 className="font-medium text-gray-900 dark:text-gray-100">
                    {task.description}
                  </h3>
                  <span
                    className={`px-2 py-1 rounded-full text-xs font-medium ${
                      task.status === "completed"
                        ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-primary-300"
                        : task.status === "in-progress"
                        ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300"
                        : "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300"
                    }`}>
                    {task.status}
                  </span>
                </div>
                <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                  <strong>Expected Outcome:</strong> {task.expectedOutcome}
                </p>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  <strong>Deadline:</strong> {task.deadline}
                </p>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-center py-8 text-gray-500 dark:text-gray-400">
            No weekly tasks assigned yet
          </div>
        )}
      </div>

      {/* Assigned Plans */}
      <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 flex items-center gap-2">
          <CheckCircle2 className="h-5 w-5" />
          Assigned Plans
        </h2>
        <PlansTable plans={employeeData.plans} />
      </div>

      {/* Performance Summary */}
      <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">
          Performance Summary
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
            <div className="text-sm text-purple-600 dark:text-purple-400 mb-1">
              Total Plans
            </div>
            <div className="text-2xl font-bold text-purple-900 dark:text-purple-100">
              {employeeData.plans.length}
            </div>
          </div>
          <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
            <div className="text-sm text-blue-600 dark:text-blue-400 mb-1">
              Weekly Tasks
            </div>
            <div className="text-2xl font-bold text-blue-900 dark:text-blue-100">
              {employeeData.weeklyTasks.length}
            </div>
          </div>
          <div className="p-4 bg-green-50 dark:bg-primary-900/20 rounded-lg">
            <div className="text-sm text-primary-600 dark:text-primary-400 mb-1">
              Completed
            </div>
            <div className="text-2xl font-bold text-green-900 dark:text-green-100">
              {
                employeeData.weeklyTasks.filter((t) => t.status === "completed")
                  .length
              }
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
