import { Calendar, Edit, Trash2 } from "lucide-react";
import { useTranslation } from "react-i18next";
import { PlanYear } from "../../types/planYearTypes";
import { Button } from "@/shared/common/ui/button";
import { Badge } from "@/shared/common/ui/badge";
import { useLocalizedName } from "@/shared/common/localizedName";
import { useNavigate, useLocation } from "react-router-dom";

interface PlanYearCardProps {
  planYear: PlanYear;
  onEdit?: (id: string) => void;
  onDelete?: (id: string) => void;
  isUnitAdmin?: boolean;
}

export const PlanYearCard = ({
  planYear,
  onEdit,
  onDelete,
  isUnitAdmin = false,
}: PlanYearCardProps) => {
  const localizedName = useLocalizedName();
  const navigate = useNavigate();
  const location = useLocation();
  const { t } = useTranslation();

  console.log("plan yera ", planYear.id);

  const handleCardClick = () => {
    // Check if we're in the OKR context (objective-management)
    const isOKRContext = location.pathname.startsWith("/objective-management");
    const planYearLabel = localizedName(planYear.name) || String(planYear.year);
    const routeState = {
      planYearName: planYearLabel,
      planYearLabel,
      planYear: {
        id: planYear.id,
        year: planYear.year,
        name: planYear.name,
      },
    };

    if (isOKRContext) {
      navigate(`/objective-management/${planYear.id}/dashboard`, {
        state: routeState,
      });
    } else {
      navigate(`/performance-management/${planYear.id}/dashboard`, {
        state: routeState,
      });
    }
  };

  const handleEdit = (e: React.MouseEvent) => {
    e.stopPropagation();
    onEdit?.(planYear.id);
  };

  const handleDelete = (e: React.MouseEvent) => {
    e.stopPropagation();
    onDelete?.(planYear.id);
  };

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
    });
  };

  return (
    <div
      onClick={handleCardClick}
      className="group relative bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 hover:shadow-lg hover:border-purple-300 dark:hover:border-purple-600 transition-all cursor-pointer"
    >
      {/* Active Badge */}
      {planYear.isActive && (
        <div className="absolute top-3 right-3">
          <Badge className="bg-green-500 hover:bg-primary-600 text-white">
            {t("planYearList.active", "Active")}
          </Badge>
        </div>
      )}

      {/* Year Number - Large Display */}
      <div className="flex items-center gap-3 mb-4">
        <div className="p-3 bg-purple-100 dark:bg-purple-900 rounded-lg">
          <Calendar className="h-6 w-6 text-purple-600 dark:text-purple-300" />
        </div>
        <h3 className="text-3xl font-bold text-gray-900 dark:text-white">
          {planYear.year}
        </h3>
      </div>

      {/* Name */}
      <h4 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">
        {localizedName(planYear.name)}
      </h4>

      {/* Description */}
      {planYear.description && (
        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
          {localizedName(planYear.description)}
        </p>
      )}

      {/* Actions - Only visible to unit admins */}
      {isUnitAdmin && (
        <div className="flex gap-2 pt-4 border-t border-gray-200 dark:border-gray-700 opacity-0 group-hover:opacity-100 transition-opacity">
          <Button
            variant="outline"
            size="sm"
            onClick={handleEdit}
            className="flex-1"
          >
            <Edit className="h-4 w-4 mr-1" />
            {t("planYearList.edit", "Edit")}
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={handleDelete}
            className="flex-1 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20"
          >
            <Trash2 className="h-4 w-4 mr-1" />
            {t("planYearList.delete", "Delete")}
          </Button>
        </div>
      )}

      {/* Click indicator */}
      <div className="absolute bottom-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity">
        <span className="text-xs text-purple-600 dark:text-purple-400 font-medium">
          {t("planYearList.viewPlans", "View Plans")} →
        </span>
      </div>
    </div>
  );
};
