import { useEffect, useState } from "react";
import { Folder, File as FileIcon, ArrowUp, CornerDownLeft } from "lucide-react";
import { volumesApi } from "@/api/volumes";
import { apiErrorMessage } from "@/api/client";
import { Button } from "@/components/ui";
import type { HostPathResult } from "@/types";

export function HostPathBrowser({
  onPick,
}: {
  onPick: (path: string) => void;
}) {
  const [data, setData] = useState<HostPathResult | null>(null);
  const [path, setPath] = useState("/");
  const [error, setError] = useState<string | null>(null);

  const load = (p: string) => {
    volumesApi
      .hostPaths(p)
      .then((d) => {
        setData(d);
        setPath(d.path);
        setError(null);
      })
      .catch((e) => setError(apiErrorMessage(e)));
  };

  useEffect(() => {
    load("/");
  }, []);

  return (
    <div className="rounded-lg border border-slate-200 dark:border-slate-700">
      <div className="flex flex-wrap items-center gap-2 border-b border-slate-200 p-2 dark:border-slate-700">
        {data?.roots.map((r) => (
          <button
            key={r}
            onClick={() => load(r)}
            className="rounded bg-slate-100 px-2 py-0.5 text-xs hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600"
          >
            {r}
          </button>
        ))}
        <span className="ml-auto font-mono text-xs text-slate-500">{path}</span>
      </div>

      <div className="flex items-center gap-2 border-b border-slate-200 p-2 dark:border-slate-700">
        <Button
          variant="outline"
          onClick={() => data?.parent && load(data.parent)}
          disabled={!data?.parent}
        >
          <ArrowUp className="h-4 w-4" /> Up
        </Button>
        <Button variant="primary" onClick={() => onPick(path)}>
          <CornerDownLeft className="h-4 w-4" /> Use this folder
        </Button>
      </div>

      {error && <p className="p-2 text-xs text-red-500">{error}</p>}

      <div className="max-h-56 overflow-auto p-1">
        {data?.entries.length === 0 && (
          <p className="p-2 text-xs text-slate-500">Empty directory.</p>
        )}
        {data?.entries.map((e) => (
          <button
            key={e.name}
            disabled={e.type !== "dir"}
            onClick={() => e.type === "dir" && load(`${path === "/" ? "" : path}/${e.name}`)}
            className="flex w-full items-center gap-2 rounded px-2 py-1 text-left text-sm enabled:hover:bg-slate-100 disabled:opacity-50 dark:enabled:hover:bg-slate-700"
          >
            {e.type === "dir" ? (
              <Folder className="h-4 w-4 text-sky-500" />
            ) : (
              <FileIcon className="h-4 w-4 text-slate-400" />
            )}
            <span className="truncate">{e.name}</span>
            <span className="ml-auto font-mono text-[10px] text-slate-400">
              {e.permissions}
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}