import { useState } from "react";
import { Control, Controller } from "react-hook-form";
import { ImageIcon, Upload, X } from "lucide-react";
import { TripFormData } from "./schemas/tripFormSchema";
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
import { Button } from "../ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { Input } from "../ui/input";

interface CoverImageUploadProps {
  control: Control<TripFormData>;
  initialCoverUrl?: string;
  note?: string;  // Ajout du paramètre note
}

export function CoverImageUpload({ control, initialCoverUrl, note }: CoverImageUploadProps) {
  const [previewUrl, setPreviewUrl] = useState<string | null>(initialCoverUrl || null);
  const [imageTab, setImageTab] = useState<string>(initialCoverUrl ? "url" : "upload");
  const [imageError, setImageError] = useState<boolean>(false);

  // Gestionnaire de changement d'onglet
  const handleTabChange = (tab: string) => {
    setImageTab(tab);
    setImageError(false);
    // Réinitialiser les champs opposés
    if (tab === "upload") {
      control._formValues.coverUrl = undefined;
    } else {
      control._formValues.coverImage = undefined;
      setPreviewUrl(control._formValues.coverUrl || null);
    }
  };

  const handleImageError = () => {
    console.error("Impossible de charger l'image d'aperçu de couverture");
    setImageError(true);
    setPreviewUrl(null);
  };

  return (
    <FormItem className="col-span-2">
      <FormLabel>Image de couverture{note ? "" : " (facultatif)"}</FormLabel>
      {note && <p className="text-sm text-muted-foreground mb-2">{note}</p>}
      <Tabs
        value={imageTab}
        onValueChange={handleTabChange}
        className="w-full"
      >
        <TabsList className="grid grid-cols-2 w-full">
          <TabsTrigger value="upload">Uploader une image</TabsTrigger>
          <TabsTrigger value="url">Utiliser une URL</TabsTrigger>
        </TabsList>

        <TabsContent value="upload" className="pt-4">
          <FormField
            control={control}
            name="coverImage"
            render={({ field: { onChange, value, ...fieldProps } }) => (
              <FormControl>
                <div className="flex flex-col gap-4">
                  <div className="flex items-center justify-center w-full">
                    <label
                      htmlFor="cover-image-upload"
                      className={`flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer bg-background hover:bg-accent/50 ${
                        previewUrl ? "border-transparent" : "border-muted-foreground/25"
                      }`}
                    >
                      {previewUrl ? (
                        <div className="relative w-full h-full">
                          <img
                            src={previewUrl}
                            alt="Aperçu de l'image"
                            className="object-cover w-full h-full rounded-lg"
                            onError={handleImageError}
                          />
                          <Button
                            type="button"
                            variant="destructive"
                            size="icon"
                            className="absolute top-2 right-2"
                            onClick={(e) => {
                              e.preventDefault();
                              e.stopPropagation();
                              onChange(undefined);
                              setPreviewUrl(null);
                            }}
                          >
                            <X className="h-4 w-4" />
                          </Button>
                        </div>
                      ) : (
                        <div className="flex flex-col items-center justify-center py-6">
                          <Upload className="w-8 h-8 text-muted-foreground" />
                          <p className="mt-2 text-sm text-muted-foreground">Cliquez pour sélectionner une image</p>
                        </div>
                      )}
                      <Input
                        id="cover-image-upload"
                        type="file"
                        accept="image/*"
                        className="hidden"
                        onChange={(e) => {
                          if (e.target.files?.[0]) {
                            onChange(e.target.files);
                            const fileUrl = URL.createObjectURL(e.target.files[0]);
                            setPreviewUrl(fileUrl);
                            setImageError(false);
                          }
                        }}
                        {...fieldProps}
                      />
                    </label>
                  </div>
                </div>
              </FormControl>
            )}
          />
        </TabsContent>

        <TabsContent value="url" className="pt-4">
          <FormField
            control={control}
            name="coverUrl"
            render={({ field }) => (
              <FormControl>
                <div className="space-y-4">
                  <div className="flex gap-2">
                    <Input
                      placeholder="https://example.com/image.jpg"
                      {...field}
                      value={field.value || ""}
                      onChange={(e) => {
                        field.onChange(e);
                        setPreviewUrl(e.target.value || null);
                        setImageError(false);
                      }}
                      className="flex-1"
                    />
                    {field.value && (
                      <Button
                        type="button"
                        variant="destructive"
                        size="icon"
                        onClick={() => {
                          field.onChange("");
                          setPreviewUrl(null);
                          setImageError(false);
                        }}
                      >
                        <X className="h-4 w-4" />
                      </Button>
                    )}
                  </div>

                  {previewUrl && !imageError && (
                    <div className="relative w-full h-32 overflow-hidden rounded-lg">
                      <img
                        src={previewUrl}
                        alt="Aperçu de l'image"
                        className="object-cover w-full h-full"
                        onError={handleImageError}
                      />
                    </div>
                  )}

                  {imageError && (
                    <div className="text-destructive text-sm">
                      L'URL d'image fournie n'est pas valide ou n'est pas accessible
                    </div>
                  )}
                </div>
              </FormControl>
            )}
          />
        </TabsContent>
      </Tabs>
      <FormMessage />
    </FormItem>
  );
}