import React from "react";
import { Button } from "@/shared/common/ui/button";
import { Edit, Trash2 } from "lucide-react";

import { Plan } from "@/performance-management/types/planHierarchyTypes";

interface PlansTableProps {
  plans: Plan[];
  editable?: boolean;
  onEdit?: (planId: string) => void;
  onDelete?: (planId: string) => void;
}

const StatusBadge: React.FC<{ status: Plan["status"] }> = ({ status }) => {
  const statusColors = {
    pending:
      "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
    "in-progress":
      "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
    completed:
      "bg-green-100 text-green-800 dark:bg-green-900 dark:text-primary-300",
    overdue: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
  };

  return (
    <span
      className={`px-2 py-1 rounded-full text-xs font-medium ${statusColors[status]}`}>
      {status}
    </span>
  );
};

const ProgressBar: React.FC<{ progress: number }> = ({ progress }) => {
  return (
    <div className="w-full">
      <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: `${progress}%` }}
          />
        </div>
        <span className="text-sm text-gray-600 dark:text-gray-400 min-w-[3rem]">
          {progress}%
        </span>
      </div>
    </div>
  );
};

export const PlansTable: React.FC<PlansTableProps> = ({
  plans,
  editable = false,
  onEdit,
  onDelete,
}) => {
  if (!plans || plans.length === 0) {
    return (
      <div className="text-center py-8 text-gray-500 dark:text-gray-400">
        No plans available
      </div>
    );
  }

  return (
    <div className="overflow-x-auto">
      <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead className="bg-gray-100 dark:bg-gray-800">
          <tr>
            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-200">
              Plan Name
            </th>
            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-200">
              Weight
            </th>
            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-200">
              Timeline
            </th>
            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-200">
              Status
            </th>
            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-200">
              Progress
            </th>
            {editable && (
              <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-200">
                Actions
              </th>
            )}
          </tr>
        </thead>
        <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
          {plans.map((plan) => (
            <tr
              key={plan.id}
              className="hover:bg-gray-50 dark:hover:bg-gray-800">
              <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
                {plan.name}
              </td>
              <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
                {plan.weight}
              </td>
              <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
                {plan.timeline}
              </td>
              <td className="px-4 py-3">
                <StatusBadge status={plan.status} />
              </td>
              <td className="px-4 py-3">
                <ProgressBar progress={plan.progress} />
              </td>
              {editable && (
                <td className="px-4 py-3">
                  <div className="flex gap-2">
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => onEdit?.(plan.id)}>
                      <Edit className="h-4 w-4" />
                    </Button>
                    <Button
                      size="sm"
                      variant="destructive"
                      onClick={() => onDelete?.(plan.id)}>
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </td>
              )}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};
