"use client";

import { useState, useCallback } from "react";
import { useDropzone } from "react-dropzone";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import MediaService from "@/services/media.service";
import type { UploadResponse } from "@/services/media.service";
import {
  Upload,
  Image as ImageIcon,
  Copy,
  Trash,
  Search,
  X,
  Loader2,
} from "lucide-react";
import { format } from "date-fns";
import { id } from "date-fns/locale";

interface MediaItem extends UploadResponse {
  id: string;
  uploadedAt: Date;
}

interface MediaLibraryProps {
  onSelect?: (url: string) => void;
  selectedUrl?: string;
  mode?: "browser" | "manager";
}

const MediaLibrary = ({
  onSelect,
  selectedUrl,
  mode = "manager",
}: MediaLibraryProps) => {
  const [mediaItems, setMediaItems] = useState<MediaItem[]>([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [isUploading, setIsUploading] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [itemToDelete, setItemToDelete] = useState<MediaItem | null>(null);
  const [selectedItem, setSelectedItem] = useState<MediaItem | null>(null);

  const onDrop = useCallback(
    async (acceptedFiles: File[]) => {
      setIsUploading(true);
      const uploadPromises = acceptedFiles.map(async (file) => {
        try {
          const response = await MediaService.upload(file, "media");
          if (response) {
            const newItem: MediaItem = {
              ...response,
              id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
              uploadedAt: new Date(),
            };
            setMediaItems((prev) => [newItem, ...prev]);
            toast.success(`File "${file.name}" berhasil diupload`);
            return newItem;
          }
        } catch (error) {
          toast.error(`Gagal mengupload "${file.name}"`);
          return null;
        }
      });

      await Promise.all(uploadPromises);
      setIsUploading(false);
    },
    []
  );

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      "image/*": [".jpeg", ".jpg", ".png", ".webp", ".gif"],
    },
    maxSize: 5 * 1024 * 1024, // 5MB
    multiple: true,
  });

  const handleDelete = async () => {
    if (!itemToDelete) return;

    try {
      await MediaService.delete(itemToDelete.key);
      setMediaItems((prev) => prev.filter((item) => item.id !== itemToDelete.id));
      toast.success("File berhasil dihapus");
    } catch (error) {
      toast.error("Gagal menghapus file");
    } finally {
      setDeleteDialogOpen(false);
      setItemToDelete(null);
    }
  };

  const handleCopyUrl = (url: string) => {
    navigator.clipboard.writeText(url);
    toast.success("URL berhasil disalin");
  };

  const handleSelect = (item: MediaItem) => {
    setSelectedItem(item);
    if (onSelect) {
      onSelect(item.url);
    }
  };

  const filteredItems = mediaItems.filter((item) =>
    item.filename.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <div className="space-y-4">
      {/* Upload Area */}
      <div
        {...getRootProps()}
        className={`
          border-2 border-dashed rounded-lg p-8 text-center cursor-pointer
          transition-colors duration-200
          ${
            isDragActive
              ? "border-primary bg-primary/5"
              : "border-slate-200 hover:border-slate-300"
          }
        `}
      >
        <input {...getInputProps()} />
        <Upload className="mx-auto h-12 w-12 text-slate-400 mb-4" />
        {isUploading ? (
          <>
            <Loader2 className="mx-auto h-6 w-6 animate-spin mb-2" />
            <p className="text-slate-600">Mengupload file...</p>
          </>
        ) : isDragActive ? (
          <p className="text-primary font-medium">Lepaskan file disini...</p>
        ) : (
          <>
            <p className="text-slate-600 mb-2">
              Drag & drop file disini, atau klik untuk memilih
            </p>
            <p className="text-sm text-slate-400">
              Maksimal 5MB. Format: JPEG, PNG, WebP, GIF
            </p>
          </>
        )}
      </div>

      {/* Search */}
      {mediaItems.length > 0 && (
        <div className="relative">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
          <Input
            placeholder="Cari file..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9"
          />
        </div>
      )}

      {/* Media Grid */}
      {filteredItems.length > 0 ? (
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {filteredItems.map((item) => (
            <div
              key={item.id}
              className={`
                group relative aspect-square rounded-lg overflow-hidden border-2 cursor-pointer
                transition-all duration-200
                ${
                  selectedItem?.id === item.id || selectedUrl === item.url
                    ? "border-primary ring-2 ring-primary/20"
                    : "border-slate-200 hover:border-slate-300"
                }
              `}
              onClick={() => handleSelect(item)}
            >
              {/* Image Preview */}
              {item.mimeType.startsWith("image/") ? (
                <img
                  src={item.url}
                  alt={item.filename}
                  className="w-full h-full object-cover"
                />
              ) : (
                <div className="w-full h-full flex items-center justify-center bg-slate-100">
                  <ImageIcon className="h-12 w-12 text-slate-400" />
                </div>
              )}

              {/* Overlay */}
              <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col items-center justify-center gap-2">
                <p className="text-white text-xs text-center px-2 truncate max-w-full">
                  {item.filename}
                </p>
                <p className="text-white/70 text-xs">
                  {format(item.uploadedAt, "dd MMM yyyy", { locale: id })}
                </p>
                <div className="flex gap-2">
                  <Button
                    size="sm"
                    variant="secondary"
                    onClick={(e) => {
                      e.stopPropagation();
                      handleCopyUrl(item.url);
                    }}
                  >
                    <Copy className="h-3 w-3" />
                  </Button>
                  <Button
                    size="sm"
                    variant="destructive"
                    onClick={(e) => {
                      e.stopPropagation();
                      setItemToDelete(item);
                      setDeleteDialogOpen(true);
                    }}
                  >
                    <Trash className="h-3 w-3" />
                  </Button>
                </div>
              </div>

              {/* Selected Indicator */}
              {(selectedItem?.id === item.id || selectedUrl === item.url) && (
                <div className="absolute top-2 right-2 bg-primary text-primary-foreground rounded-full p-1">
                  <svg
                    className="h-3 w-3"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                </div>
              )}
            </div>
          ))}
        </div>
      ) : mediaItems.length > 0 ? (
        <div className="text-center py-12">
          <Search className="mx-auto h-12 w-12 text-slate-300 mb-4" />
          <p className="text-slate-500">Tidak ada file yang cocok dengan pencarian</p>
        </div>
      ) : (
        <div className="text-center py-12">
          <ImageIcon className="mx-auto h-12 w-12 text-slate-300 mb-4" />
          <p className="text-slate-500">Belum ada file yang diupload</p>
          <p className="text-sm text-slate-400 mt-1">
            Upload file untuk melihatnya disini
          </p>
        </div>
      )}

      {/* Delete Confirmation Dialog */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Hapus File</AlertDialogTitle>
            <AlertDialogDescription>
              Apakah Anda yakin ingin menghapus file "{itemToDelete?.filename}"?
              File yang sudah dihapus tidak dapat dikembalikan.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Batal</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDelete}
              className="bg-red-600 hover:bg-red-700"
            >
              Hapus
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

// Media Library Dialog Component
export const MediaLibraryDialog = ({
  open,
  onOpenChange,
  onSelect,
  selectedUrl,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSelect: (url: string) => void;
  selectedUrl?: string;
}) => {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Media Library</DialogTitle>
        </DialogHeader>
        <MediaLibrary
          onSelect={(url) => {
            onSelect(url);
            onOpenChange(false);
          }}
          selectedUrl={selectedUrl}
          mode="browser"
        />
      </DialogContent>
    </Dialog>
  );
};

export default MediaLibrary;