import { type FormEvent, useMemo, useState } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { ChevronRight, FileIcon, FilesIcon, Folder, FolderOpen, FolderPlus, Home, Pencil, Trash2 } from "lucide-react";
import { useNavigate, useSearch } from "@tanstack/react-router";

import { $api } from "@/client/lib/api";
import type { FileNode } from "@/client/lib/types";
import { Button } from "@/client/components/ui/button";
import { ConfirmDialog } from "@/client/components/ui/confirm-dialog";
import { Dialog } from "@/client/components/ui/dialog";
import { EmptyState } from "@/client/components/empty-state";
import { ErrorBanner } from "@/client/components/error-banner";
import { Input } from "@/client/components/ui/input";
import { Label } from "@/client/components/ui/label";
import { PageHeader } from "@/client/components/ui/page-header";
import { Skeleton } from "@/client/components/loading-panel";
import { formatBytes, formatDate } from "@/client/lib/format";
import { paths } from "@/client/lib/paths";
import { toast } from "@/client/lib/toast";

function normalizeDirPath(input: string): string {
  let value = input.trim();
  if (!value) value = "/files/";
  if (!value.startsWith("/files")) value = "/files" + (value.startsWith("/") ? value : `/${value}`);
  if (!value.endsWith("/")) value += "/";
  return value;
}

function parentOf(dir: string): string | null {
  if (dir === "/files/" || dir === "/files") return null;
  const trimmed = dir.endsWith("/") ? dir.slice(0, -1) : dir;
  const idx = trimmed.lastIndexOf("/");
  return idx <= "/files".length - 1 ? "/files/" : `${trimmed.slice(0, idx)}/`;
}

function buildBreadcrumbs(dir: string): { label: string; path: string }[] {
  const segments = dir.replace(/^\/+/, "").replace(/\/+$/, "").split("/");
  const crumbs: { label: string; path: string }[] = [];
  let acc = "";
  for (const segment of segments) {
    acc += `/${segment}`;
    crumbs.push({ label: segment, path: `${acc}/` });
  }
  return crumbs;
}

export function FilesPage() {
  const search = useSearch({ from: paths.files });
  const navigate = useNavigate();
  const dir = normalizeDirPath(search.path);

  const listing = $api.useQuery("get", "/api/v1/files/list", { params: { query: { path: dir } } });
  const [mkdirOpen, setMkdirOpen] = useState(false);
  const [renameTarget, setRenameTarget] = useState<FileNode | null>(null);

  const breadcrumbs = useMemo(() => buildBreadcrumbs(dir), [dir]);
  const parent = parentOf(dir);

  const goTo = (path: string) => navigate({ to: paths.files, search: { path } });

  return (
    <div className="space-y-6">
      <PageHeader
        icon={<FilesIcon className="h-7 w-7" strokeWidth={2} aria-hidden="true" />}
        title="Files"
        description="Your WebDAV file tree."
        actions={
          <Button
            variant="primary"
            leftIcon={<FolderPlus className="h-4 w-4" aria-hidden="true" />}
            onClick={() => setMkdirOpen(true)}
            aria-label="New folder"
          >
            <span className="hidden sm:inline">New folder</span>
          </Button>
        }
      />

      <nav aria-label="Breadcrumb" className="flex flex-wrap items-center gap-1 text-sm text-zinc-400">
        <button
          type="button"
          onClick={() => goTo("/files/")}
          className="inline-flex items-center gap-1 rounded-md px-2 py-1 transition-colors hover:bg-zinc-800/70 hover:text-zinc-100"
        >
          <Home className="h-3.5 w-3.5" aria-hidden="true" />
          files
        </button>
        {breadcrumbs.slice(1).map((crumb, i) => {
          const isCurrent = i === breadcrumbs.length - 2;
          return (
            <span key={crumb.path} className="flex items-center gap-1">
              <ChevronRight className="h-3.5 w-3.5 text-zinc-600" aria-hidden="true" />
              <button
                type="button"
                onClick={() => goTo(crumb.path)}
                aria-current={isCurrent ? "page" : undefined}
                className={`rounded-md px-2 py-1 transition-colors hover:bg-zinc-800/70 hover:text-zinc-100 ${
                  isCurrent ? "text-zinc-200" : ""
                }`}
              >
                {crumb.label}
              </button>
            </span>
          );
        })}
      </nav>

      {listing.isPending ? (
        <div className="space-y-2">
          <Skeleton className="h-12 w-full" />
          <Skeleton className="h-12 w-full" />
          <Skeleton className="h-12 w-full" />
        </div>
      ) : listing.error ? (
        <ErrorBanner error={listing.error} title="Could not list this folder" />
      ) : (
        <FileTable
          entries={listing.data?.entries ?? []}
          parent={parent}
          onNavigate={goTo}
          onRename={setRenameTarget}
          currentDir={dir}
        />
      )}

      <MkdirDialog open={mkdirOpen} onClose={() => setMkdirOpen(false)} parentDir={dir} />
      <RenameDialog
        open={renameTarget != null}
        node={renameTarget}
        onClose={() => setRenameTarget(null)}
        currentDir={dir}
      />
    </div>
  );
}

function FileTable({
  entries,
  parent,
  onNavigate,
  onRename,
  currentDir,
}: {
  entries: FileNode[];
  parent: string | null;
  onNavigate: (path: string) => void;
  onRename: (node: FileNode) => void;
  currentDir: string;
}) {
  if (entries.length === 0 && !parent) {
    return (
      <EmptyState
        icon={<FolderOpen className="h-7 w-7" aria-hidden="true" />}
        title="This folder is empty"
        description="Use the New folder button above, or upload via a WebDAV client."
      />
    );
  }

  return (
    <div className="overflow-hidden rounded-2xl border border-zinc-800/60">
      <table className="w-full text-sm">
        <thead className="bg-zinc-900/60 text-left text-xs font-medium uppercase tracking-wider text-zinc-500">
          <tr>
            <th scope="col" className="px-4 py-2">
              Name
            </th>
            <th scope="col" className="px-4 py-2">
              Size
            </th>
            <th scope="col" className="px-4 py-2">
              Modified
            </th>
            <th scope="col" className="px-4 py-2 text-right">
              Actions
            </th>
          </tr>
        </thead>
        <tbody className="divide-y divide-zinc-800/60">
          {parent ? (
            <tr className="transition-colors hover:bg-zinc-800/60">
              <td className="px-4 py-2">
                <button
                  type="button"
                  onClick={() => onNavigate(parent)}
                  className="inline-flex items-center gap-2 text-zinc-300 hover:text-accent-400"
                >
                  <Folder className="h-4 w-4 text-zinc-500" aria-hidden="true" />
                  ..
                </button>
              </td>
              <td className="px-4 py-2 text-zinc-500">—</td>
              <td className="px-4 py-2 text-zinc-500">—</td>
              <td />
            </tr>
          ) : null}
          {entries.map((node) => (
            <FileRow key={node.path} node={node} onNavigate={onNavigate} onRename={onRename} currentDir={currentDir} />
          ))}
        </tbody>
      </table>
    </div>
  );
}

function FileRow({
  node,
  onNavigate,
  onRename,
  currentDir,
}: {
  node: FileNode;
  onNavigate: (path: string) => void;
  onRename: (node: FileNode) => void;
  currentDir: string;
}) {
  const queryClient = useQueryClient();
  const [confirming, setConfirming] = useState(false);
  const remove = $api.useMutation("delete", "/api/v1/files/delete", {
    onSuccess: () => {
      toast.success(`Deleted ${node.name}.`);
      void queryClient.invalidateQueries({
        queryKey: ["get", "/api/v1/files/list", { params: { query: { path: currentDir } } }],
      });
      void queryClient.invalidateQueries({ queryKey: ["get", "/api/v1/files/list"] });
      setConfirming(false);
    },
  });

  const isDir = node.kind === "collection";
  const Icon = isDir ? Folder : FileIcon;

  return (
    <tr className="transition-colors hover:bg-zinc-800/60">
      <td className="px-4 py-2">
        {isDir ? (
          <button
            type="button"
            onClick={() => onNavigate(node.path.endsWith("/") ? node.path : `${node.path}/`)}
            className="inline-flex items-center gap-2 text-zinc-200 hover:text-accent-400"
          >
            <Icon className="h-4 w-4 text-accent-400" aria-hidden="true" />
            <span className="font-medium">{node.name}</span>
          </button>
        ) : (
          <span className="inline-flex items-center gap-2 text-zinc-200">
            <Icon className="h-4 w-4 text-zinc-500" aria-hidden="true" />
            {node.name}
          </span>
        )}
      </td>
      <td className="px-4 py-2 text-zinc-400">{isDir ? "—" : formatBytes(node.size)}</td>
      <td className="px-4 py-2 text-zinc-400">{formatDate(node.modified_at, { relative: true })}</td>
      <td className="px-4 py-2">
        <div className="flex justify-end gap-1">
          <Button
            size="sm"
            variant="ghost"
            aria-label={`Rename ${node.name}`}
            leftIcon={<Pencil className="h-3 w-3" aria-hidden="true" />}
            onClick={() => onRename(node)}
          >
            <span className="sr-only">Rename</span>
          </Button>
          <Button
            size="sm"
            variant="ghost"
            aria-label={`Delete ${node.name}`}
            leftIcon={<Trash2 className="h-3 w-3 text-red-400" aria-hidden="true" />}
            onClick={() => setConfirming(true)}
          >
            <span className="sr-only">Delete</span>
          </Button>
        </div>
      </td>
      <ConfirmDialog
        open={confirming}
        onClose={() => setConfirming(false)}
        onConfirm={() => remove.mutate({ body: { path: node.path } })}
        title={`Delete ${node.name}?`}
        description={isDir ? "All contents will be removed. This cannot be undone." : "This cannot be undone."}
        confirmLabel={isDir ? "Delete folder" : "Delete file"}
        destructive
        loading={remove.isPending}
      >
        <p className="text-xs text-zinc-500">
          Path: <span className="font-mono text-zinc-300">{node.path}</span>
        </p>
      </ConfirmDialog>
    </tr>
  );
}

function MkdirDialog({ open, onClose, parentDir }: { open: boolean; onClose: () => void; parentDir: string }) {
  const [name, setName] = useState("");
  const queryClient = useQueryClient();
  const create = $api.useMutation("post", "/api/v1/files/mkdir", {
    onSuccess: () => {
      toast.success(`Created ${name}.`);
      void queryClient.invalidateQueries({
        queryKey: ["get", "/api/v1/files/list", { params: { query: { path: parentDir } } }],
      });
      void queryClient.invalidateQueries({ queryKey: ["get", "/api/v1/files/list"] });
      setName("");
      onClose();
    },
  });

  const submit = (event: FormEvent) => {
    event.preventDefault();
    const segment = name.trim();
    if (!segment) return;
    const path = `${parentDir}${segment}/`;
    create.mutate({ body: { path } });
  };

  return (
    <Dialog
      open={open}
      onClose={() => {
        if (!create.isPending) onClose();
      }}
      title="New folder"
      description={`Create inside ${parentDir}`}
      footer={
        <>
          <Button variant="ghost" onClick={onClose} disabled={create.isPending}>
            Cancel
          </Button>
          <Button variant="primary" type="submit" form="mkdir-form" loading={create.isPending} disabled={!name.trim()}>
            Create
          </Button>
        </>
      }
    >
      <form id="mkdir-form" onSubmit={submit} className="space-y-4">
        <Label>
          Folder name
          <Input autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder="documents" required />
        </Label>
        {create.error ? <ErrorBanner error={create.error} /> : null}
      </form>
    </Dialog>
  );
}

function RenameDialog({
  open,
  node,
  onClose,
  currentDir,
}: {
  open: boolean;
  node: FileNode | null;
  onClose: () => void;
  currentDir: string;
}) {
  const [newName, setNewName] = useState("");
  const queryClient = useQueryClient();
  const rename = $api.useMutation("post", "/api/v1/files/rename", {
    onSuccess: () => {
      toast.success(`Renamed ${node?.name}.`);
      void queryClient.invalidateQueries({
        queryKey: ["get", "/api/v1/files/list", { params: { query: { path: currentDir } } }],
      });
      void queryClient.invalidateQueries({ queryKey: ["get", "/api/v1/files/list"] });
      setNewName("");
      onClose();
    },
  });

  if (!node) return null;
  if (open && !newName) setNewName(node.name);

  const submit = (event: FormEvent) => {
    event.preventDefault();
    const target = newName.trim();
    if (!target || target === node.name) return;
    const to = `${currentDir}${target}${node.kind === "collection" ? "/" : ""}`;
    rename.mutate({ body: { from: node.path, to } });
  };

  return (
    <Dialog
      open={open}
      onClose={() => {
        if (!rename.isPending) {
          setNewName("");
          onClose();
        }
      }}
      title={`Rename ${node.name}`}
      description={`Inside ${currentDir}`}
      footer={
        <>
          <Button
            variant="ghost"
            onClick={() => {
              setNewName("");
              onClose();
            }}
            disabled={rename.isPending}
          >
            Cancel
          </Button>
          <Button
            variant="primary"
            type="submit"
            form="rename-form"
            loading={rename.isPending}
            disabled={!newName.trim() || newName.trim() === node.name}
          >
            Rename
          </Button>
        </>
      }
    >
      <form id="rename-form" onSubmit={submit} className="space-y-4">
        <Label>
          New name
          <Input autoFocus value={newName} onChange={(e) => setNewName(e.target.value)} required />
        </Label>
        {rename.error ? <ErrorBanner error={rename.error} /> : null}
      </form>
    </Dialog>
  );
}