import { Button } from "@/components/ui/button";
import { MessageSquare, Trash, Edit, Check, X, Eye, EyeOff, FileText } from "lucide-react";
import { CardFooter } from "@/components/ui/card";
import { useState } from "react";
import { DocumentUploadForStep } from "../../documents/DocumentUploadForStep";
import { useIsMobile } from "@/hooks/use-mobile";
import { StepValidationStatus } from "@/types";

interface StepCardFooterProps {
  isPlanner: boolean;
  commentsCount: number;
  accentColor: string;
  bgColor: string;
  onOpenComments: () => void;
  onOpenEdit: () => void;
  onDelete: () => void;
  onValidate: (status: Exclude<StepValidationStatus, "pending">) => void;
  onPublish?: (isPublished: boolean) => void;
  validationStatus: StepValidationStatus;
  isPublished?: boolean;
  pendingStatus: 'validating' | 'rejecting' | 'publishing' | 'unpublishing' | null;
  stepType: string;
  tripId: string;
  stepId: string;
}

export function StepCardFooter({
  isPlanner,
  commentsCount,
  accentColor,
  bgColor,
  onOpenComments,
  onOpenEdit,
  onDelete,
  onValidate,
  onPublish,
  validationStatus,
  isPublished,
  pendingStatus,
  stepType,
  tripId,
  stepId
}: StepCardFooterProps) {
  const [showDocumentUpload, setShowDocumentUpload] = useState(false);
  const isMobile = useIsMobile();

  return (
    <>
      <CardFooter className="p-2 pt-0 flex justify-between">
        <div className="flex gap-1">
          <Button
            variant="ghost"
            size="sm"
            onClick={(e) => {
              e.stopPropagation();
              onOpenComments();
            }}
            className="text-xs h-7 px-2"
            style={{ color: accentColor }}
          >
            <MessageSquare className="h-3 w-3 mr-1" />
            {!isMobile && (commentsCount > 0 ? commentsCount : "Commenter")}
          </Button>

          {isPlanner && (
            <>
              <Button
                variant="ghost"
                size="sm"
                onClick={(e) => {
                  e.stopPropagation();
                  onOpenEdit();
                }}
                className="text-xs h-7 px-2"
                style={{ color: accentColor }}
              >
                <Edit className="h-3 w-3 mr-1" />
                {!isMobile && "Modifier"}
              </Button>

              <Button
                variant="ghost"
                size="sm"
                onClick={(e) => {
                  e.stopPropagation();
                  setShowDocumentUpload(true);
                }}
                className="text-xs h-7 px-2"
                style={{ color: accentColor }}
              >
                <FileText className="h-3 w-3 mr-1" />
                {!isMobile && "Documents de l’étape"}
              </Button>

              <Button
                variant="ghost"
                size="sm"
                onClick={(e) => {
                  e.stopPropagation();
                  onDelete();
                }}
                className="text-xs h-7 px-2 text-red-500 hover:text-red-600 hover:bg-red-50"
              >
                <Trash className="h-3 w-3" />
              </Button>
            </>
          )}
        </div>

        {!isPlanner && (
          <div className="flex gap-1">
              <>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={(e) => {
                    e.stopPropagation();
                    onValidate("approved");
                  }}
                  disabled={pendingStatus !== null}
                  className={`text-xs h-7 px-2 border-green-200 hover:bg-green-50 ${validationStatus === "approved" ? "bg-green-50 text-green-700" : "text-green-600"}`}
                >
                  <Check className="h-3 w-3 mr-1" />
                  {!isMobile && "Approuver"}
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={(e) => {
                    e.stopPropagation();
                    onValidate("rejected");
                  }}
                  disabled={pendingStatus !== null}
                  className={`text-xs h-7 px-2 border-red-200 hover:bg-red-50 ${validationStatus === "rejected" ? "bg-red-50 text-red-700" : "text-red-600"}`}
                >
                  <X className="h-3 w-3 mr-1" />
                  {!isMobile && "Refuser"}
                </Button>
              </>
          </div>
        )}

        {/* Publication button removed for mobile */}
        {isPlanner && onPublish && !isMobile && (
          <Button
            type="button"
            variant="outline"
            size="sm"
            onClick={(e) => {
              e.stopPropagation();
              onPublish(!isPublished);
            }}
            disabled={pendingStatus !== null}
            className={`text-xs h-7 px-2 ${
              isPublished
                ? "text-amber-500 border-amber-200 hover:bg-amber-50"
                : "text-emerald-500 border-emerald-200 hover:bg-emerald-50"
            }`}
          >
            {isPublished ? (
              <>
                <EyeOff className="h-3 w-3 mr-1" />
                {!isMobile && "Masquer"}
              </>
            ) : (
              <>
                <Eye className="h-3 w-3 mr-1" />
                {!isMobile && "Publier"}
              </>
            )}
          </Button>
        )}
      </CardFooter>

      {/* Document upload dialog */}
      {showDocumentUpload && (
        <DocumentUploadForStep
          tripId={tripId}
          stepId={stepId}
          isOpen={showDocumentUpload}
          onClose={() => setShowDocumentUpload(false)}
        />
      )}
    </>
  );
}