import { useState } from "react";
import { TripMember, TripStep } from "@/types";
import { Eye, EyeOff, Edit, MessageSquare } from "lucide-react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { StepDetailContent } from "./StepDetailContent";
import { getStepTypeById } from "@/types/stepTypes";
import { DocumentUploadForStep } from "../../documents/DocumentUploadForStep";
import { DocumentsForStep } from "../../documents/DocumentsForStep";
import { PlannerStepValidations } from "../PlannerStepValidations";
import { StepStatusBadge } from "../StepStatusBadge";
import { StepComments } from "../../StepComments";

interface StepDetailDialogProps {
  step: TripStep;
  isPlanner: boolean;
  isOpen: boolean;
  onClose: () => void;
  onEdit: () => void;
  onPublish: (isPublished: boolean) => Promise<void>;
  pendingStatus: 'validating' | 'rejecting' | 'publishing' | 'unpublishing' | null;
  dayDate?: string | null;
  members?: TripMember[];
}

export function StepDetailDialog({
  step,
  isPlanner,
  isOpen,
  onClose,
  onEdit,
  onPublish,
  dayDate,
  pendingStatus,
  members,
}: StepDetailDialogProps) {
  const [showUploadDialog, setShowUploadDialog] = useState(false);
  const [showComments, setShowComments] = useState(false);
  const stepType = step.stepType || 'activity';
  const stepTypeInfo = getStepTypeById(stepType);
  const { accent: accentColor } = stepTypeInfo.colors;

  const handlePublishToggle = async () => {
    await onPublish(!step.isPublished);
  };

  return (
    <>
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent className="sm:max-w-2xl">
          <DialogHeader>
            <div className="flex justify-between items-center">
              <DialogTitle className="flex items-center">
                <span className="mr-2">{stepTypeInfo.icon}</span>
                {step.activity}
                {dayDate && (
                  <span className="ml-2 text-sm font-normal text-gray-500">
                    {dayDate}
                  </span>
                )}
              </DialogTitle>

              <div className="flex gap-2">
                {!isPlanner && <StepStatusBadge validationStatus={step.validationStatus} pendingStatus={null} />}
                {isPlanner && (
                  <>
                    {/* Bouton de publication */}
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={(event) => {
                        event.stopPropagation();
                        void handlePublishToggle();
                      }}
                      disabled={pendingStatus !== null}
                      className={`h-8 ${
                        step.isPublished
                          ? "text-amber-500 border-amber-200 hover:bg-amber-50"
                          : "text-emerald-500 border-emerald-200 hover:bg-emerald-50"
                      }`}
                    >
                      {step.isPublished ? (
                        <>
                          <EyeOff className="h-4 w-4 mr-1" />
                          Masquer
                        </>
                      ) : (
                        <>
                          <Eye className="h-4 w-4 mr-1" />
                          Publier
                        </>
                      )}
                    </Button>

                    {/* Bouton d'édition */}
                    <Button
                      onClick={onEdit}
                      variant="ghost"
                      className="h-8"
                      style={{ color: accentColor }}
                    >
                      <Edit className="h-4 w-4 mr-1" />
                      Modifier
                    </Button>
                  </>
                )}
              </div>
            </div>
          </DialogHeader>

          <StepDetailContent
            step={step}
            isPlanner={isPlanner}
            dayDate={dayDate}
          />

          {isPlanner && <PlannerStepValidations validations={step.validations} members={members} />}

          {/* Affichage des documents liés à cette étape */}
          <DocumentsForStep
            tripId={step.tripId}
            stepId={step.id}
            isPlanner={isPlanner}
          />

          {!isPlanner && <Button type="button" variant="outline" onClick={() => setShowComments(true)} className="w-full"><MessageSquare className="mr-2 h-4 w-4" />Commentaires ({step.comments.length})</Button>}

          {/* Bouton pour ajouter un document lié à cette étape (pour les planners uniquement) */}
          {isPlanner && (
            <div className="mt-4">
              <Button
                onClick={() => setShowUploadDialog(true)}
                variant="outline"
                size="sm"
                className="w-full"
              >
                Ajouter un document pour cette étape
              </Button>
            </div>
          )}
        </DialogContent>
      </Dialog>

      {showUploadDialog && isPlanner && (
        <DocumentUploadForStep
          tripId={step.tripId}
          stepId={step.id}
          isOpen={showUploadDialog}
          onClose={() => setShowUploadDialog(false)}
        />
      )}
      {showComments && !isPlanner && <StepComments isOpen={showComments} onClose={() => setShowComments(false)} tripId={step.tripId} step={step} />}
    </>
  );
}