"use client";

import * as React from "react";
import { AnimatePresence, motion } from "framer-motion";
import { IconCheck, IconCloudUpload, IconExternalLink, IconFile, IconFileTypePdf, IconPhoto, IconX } from "@tabler/icons-react";
import type { ColineFilePreview, ColineUploadedFile } from "@colineapp/sdk/v2";
import { cn } from "../lib/utils";
import { staggerDelay, transitions } from "../lib/motion";
import { useColine } from "../provider";
import { Button } from "./button";
import { Spinner } from "./spinner";

function FileTypeIcon({ mimeType }: { mimeType: string | null | undefined }) {
  if (mimeType?.startsWith("image/")) return <IconPhoto className="size-4" />;
  if (mimeType === "application/pdf") return <IconFileTypePdf className="size-4" />;
  return <IconFile className="size-4" />;
}

/**
 * Any readable workspace file, previewed: images and video inline, other
 * files as a card that opens them in Coline. Uses the viewer's access;
 * apps preview each other's files without integrations.
 */
export function FilePreview({
  fileId,
  variant = "card",
  className,
}: {
  fileId: string;
  variant?: "inline" | "card" | "full";
  className?: string;
}) {
  const coline = useColine();
  // Keyed by file so a new fileId shows the skeleton, not the last file.
  const [loaded, setLoaded] = React.useState<{ fileId: string; preview: ColineFilePreview | null; error: string | null } | null>(
    null,
  );
  React.useEffect(() => {
    let cancelled = false;
    coline.files
      .preview(fileId)
      .then((result) => {
        if (!cancelled) setLoaded({ fileId, preview: result, error: null });
      })
      .catch((cause: unknown) => {
        if (!cancelled) setLoaded({ fileId, preview: null, error: cause instanceof Error ? cause.message : String(cause) });
      });
    return () => {
      cancelled = true;
    };
  }, [coline, fileId]);
  const current = loaded?.fileId === fileId ? loaded : null;
  const preview = current?.preview ?? null;
  const error = current?.error ?? null;

  const open = () => void coline.navigation.openFile(fileId);

  if (error) {
    return (
      <div className={cn("flex items-center gap-2 rounded-xl border border-dashed border-border px-3 py-2 text-sm text-muted-foreground", className)}>
        <IconFile className="size-4" /> Preview unavailable
      </div>
    );
  }
  if (!preview) {
    return <div className={cn("animate-pulse rounded-xl bg-muted", variant === "inline" ? "h-8 w-48" : "h-24 w-full", className)} />;
  }

  const media = preview.media;
  if (variant !== "inline" && media?.mimeType?.startsWith("image/")) {
    return (
      <motion.button
        type="button"
        onClick={open}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        className={cn("group block overflow-hidden rounded-xl border border-border/60 bg-muted/30 text-left", className)}
      >
        <img
          src={media.url}
          alt={preview.name}
          loading="lazy"
          className={cn(
            "w-full object-cover transition-transform duration-300 ease-[var(--ease-out-quint)] group-hover:scale-[1.015]",
            variant === "full" ? "max-h-[70vh] object-contain" : "max-h-56",
          )}
        />
        <span className="flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground">
          <IconPhoto className="size-3.5" />
          <span className="truncate">{preview.name}</span>
        </span>
      </motion.button>
    );
  }
  if (variant !== "inline" && media?.mimeType?.startsWith("video/")) {
    return (
      <video src={media.url} controls preload="metadata" className={cn("w-full rounded-xl border border-border/60 bg-black", className)} />
    );
  }
  return (
    <button
      type="button"
      onClick={open}
      className={cn(
        "group flex w-full min-w-0 items-center gap-3 rounded-xl border border-border/60 bg-card text-left transition-[transform,box-shadow] duration-150 hover:-translate-y-px hover:shadow-[0_4px_16px_-6px_rgba(0,0,0,0.15)]",
        variant === "inline" ? "w-auto px-2.5 py-1.5" : "px-3 py-2.5",
        className,
      )}
    >
      <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
        <FileTypeIcon mimeType={media?.mimeType} />
      </span>
      <span className="min-w-0 flex-1">
        <span className="block truncate text-sm font-medium text-foreground">{preview.name}</span>
        {variant !== "inline" ? <span className="block truncate text-xs text-muted-foreground">Open in Coline</span> : null}
      </span>
      <IconExternalLink className="size-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
    </button>
  );
}

interface UploadState {
  id: string;
  name: string;
  status: "uploading" | "done" | "failed";
  error?: string;
  file?: ColineUploadedFile;
}

/**
 * Drop files (or click to choose) and they upload to Drive through
 * Coline, with per-file status. Large files stream directly to storage.
 */
export function FileDropzone({
  onUploaded,
  accept,
  multiple = true,
  driveId,
  parentId,
  label = "Drop files here",
  hint = "or click to choose",
  className,
}: {
  onUploaded?: (file: ColineUploadedFile) => void;
  accept?: string;
  multiple?: boolean;
  driveId?: string;
  parentId?: string | null;
  label?: string;
  hint?: string;
  className?: string;
}) {
  const coline = useColine();
  const inputRef = React.useRef<HTMLInputElement | null>(null);
  const [dragging, setDragging] = React.useState(false);
  const [uploads, setUploads] = React.useState<UploadState[]>([]);
  const depth = React.useRef(0);

  const upload = (files: File[]) => {
    for (const file of files) {
      const id = `${file.name}-${file.size}-${Date.now()}-${Math.random().toString(36).slice(2)}`;
      setUploads((current) => [{ id, name: file.name, status: "uploading" as const }, ...current].slice(0, 8));
      void coline.files
        .upload({
          name: file.name,
          data: file,
          ...(file.type ? { mimeType: file.type } : {}),
          ...(driveId ? { driveId } : {}),
          ...(parentId !== undefined ? { parentId } : {}),
        })
        .then((uploaded) => {
          setUploads((current) => current.map((entry) => (entry.id === id ? { ...entry, status: "done", file: uploaded } : entry)));
          onUploaded?.(uploaded);
        })
        .catch((cause: unknown) => {
          const message = cause instanceof Error ? cause.message : String(cause);
          setUploads((current) => current.map((entry) => (entry.id === id ? { ...entry, status: "failed", error: message } : entry)));
        });
    }
  };

  return (
    <div className={cn("flex flex-col gap-2", className)}>
      <motion.button
        type="button"
        onClick={() => inputRef.current?.click()}
        onDragEnter={(event) => {
          event.preventDefault();
          depth.current += 1;
          setDragging(true);
        }}
        onDragOver={(event) => event.preventDefault()}
        onDragLeave={() => {
          depth.current -= 1;
          if (depth.current <= 0) setDragging(false);
        }}
        onDrop={(event) => {
          event.preventDefault();
          depth.current = 0;
          setDragging(false);
          const files = Array.from(event.dataTransfer.files);
          upload(multiple ? files : files.slice(0, 1));
        }}
        animate={{ scale: dragging ? 1.01 : 1 }}
        transition={transitions.spring}
        className={cn(
          "flex w-full flex-col items-center justify-center gap-2 rounded-2xl border border-dashed px-6 py-8 text-center outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-ring/50",
          dragging ? "border-action bg-action/[0.06]" : "border-border hover:border-foreground/25 hover:bg-muted/30",
        )}
      >
        <motion.span
          animate={{ y: dragging ? -3 : 0 }}
          transition={transitions.spring}
          className={cn("flex size-10 items-center justify-center rounded-xl", dragging ? "bg-action/12 text-action" : "bg-muted text-muted-foreground")}
        >
          <IconCloudUpload className="size-5" />
        </motion.span>
        <span className="text-sm font-medium text-foreground">{label}</span>
        <span className="text-xs text-muted-foreground">{hint}</span>
      </motion.button>
      <input
        ref={inputRef}
        type="file"
        hidden
        multiple={multiple}
        accept={accept}
        onChange={(event) => {
          upload(Array.from(event.target.files ?? []));
          event.target.value = "";
        }}
      />
      <ul className="flex flex-col gap-1">
        <AnimatePresence initial={false}>
          {uploads.map((entry, index) => (
            <motion.li
              key={entry.id}
              layout
              initial={{ opacity: 0, y: -4 }}
              animate={{ opacity: 1, y: 0, transition: { ...transitions.enter, delay: staggerDelay(index) } }}
              exit={{ opacity: 0 }}
              className="flex items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-sm"
            >
              <span className="flex size-4 items-center justify-center">
                {entry.status === "uploading" ? (
                  <Spinner size="sm" label={`Uploading ${entry.name}`} className="text-muted-foreground" />
                ) : entry.status === "done" ? (
                  <motion.span initial={{ scale: 0 }} animate={{ scale: 1 }} transition={transitions.spring} className="flex text-positive-fg">
                    <IconCheck className="size-4" />
                  </motion.span>
                ) : (
                  <IconX className="size-4 text-risk-fg" />
                )}
              </span>
              <span className="min-w-0 flex-1 truncate text-foreground">{entry.name}</span>
              {entry.status === "failed" ? <span className="truncate text-xs text-risk-fg">{entry.error}</span> : null}
            </motion.li>
          ))}
        </AnimatePresence>
      </ul>
    </div>
  );
}

/** A file picked from the workspace (host-rendered picker). */
export function useFilePicker() {
  const coline = useColine();
  return React.useCallback((types?: string[]) => coline.pickers.file(types ? { types } : undefined), [coline]);
}

/** Ask where to keep a file, then move it there. Resolves null when dismissed. */
export function SaveAsButton({
  fileId,
  children = "Save to…",
  onSaved,
}: {
  fileId: string;
  children?: React.ReactNode;
  onSaved?: (file: { fileId: string; driveId: string; parentId: string | null }) => void;
}) {
  const coline = useColine();
  const [pending, setPending] = React.useState(false);
  return (
    <Button
      variant="outline"
      disabled={pending}
      onClick={() => {
        setPending(true);
        void coline.files
          .saveAs(fileId)
          .then((file) => {
            if (file) onSaved?.({ fileId: file.fileId, driveId: file.driveId, parentId: file.parentId });
          })
          .finally(() => setPending(false));
      }}
    >
      {pending ? <Spinner size="sm" /> : null}
      {children}
    </Button>
  );
}