import { useRef, useState, useCallback, useEffect } from "react";
import { WorkspaceMode } from "../lib/types";
import { socketClient } from "../lib/socket";
import FileTree, { FileTreeHandle } from "./FileTree";

interface FilesPanelProps {
  workspaceMode: WorkspaceMode;
  onFileSelect?: (path: string) => void;
}

export default function FilesPanel({ workspaceMode, onFileSelect }: FilesPanelProps) {
  const isReadOnly = workspaceMode === WorkspaceMode.Agent;
  const isReadWrite = workspaceMode === WorkspaceMode.User;

  const fileTreeRef = useRef<FileTreeHandle>(null);

  // New file creation state
  const [isCreatingFile, setIsCreatingFile] = useState(false);
  const [newFilePath, setNewFilePath] = useState("");
  const [isCreating, setIsCreating] = useState(false);
  const [createError, setCreateError] = useState<string | undefined>(undefined);
  const inputRef = useRef<HTMLInputElement>(null);

  // Focus the input when the creation UI appears
  useEffect(() => {
    if (isCreatingFile && inputRef.current) {
      inputRef.current.focus();
    }
  }, [isCreatingFile]);

  const handleRefresh = useCallback(() => {
    fileTreeRef.current?.refresh();
  }, []);

  const handleStartCreate = useCallback(() => {
    if (!isReadWrite) return;
    setIsCreatingFile(true);
    setNewFilePath("");
    setCreateError(undefined);
  }, [isReadWrite]);

  const handleCancelCreate = useCallback(() => {
    setIsCreatingFile(false);
    setNewFilePath("");
    setCreateError(undefined);
  }, []);

  const handleConfirmCreate = useCallback(async () => {
    const trimmed = newFilePath.trim();
    if (!trimmed) return;

    // Strip leading slash if present (paths are relative to project root)
    const normalizedPath = trimmed.startsWith("/") ? trimmed.slice(1) : trimmed;

    setIsCreating(true);
    setCreateError(undefined);

    try {
      const result = await socketClient.requestFileWrite({
        path: normalizedPath,
        content: "",
      });

      if (result.success) {
        setIsCreatingFile(false);
        setNewFilePath("");
        setCreateError(undefined);
        // Refresh the tree to show the new file, then open it in the editor
        fileTreeRef.current?.refresh();
        onFileSelect?.(normalizedPath);
      } else {
        setCreateError(result.error || "Failed to create file");
      }
    } catch (err) {
      setCreateError(err instanceof Error ? err.message : "Failed to create file");
    } finally {
      setIsCreating(false);
    }
  }, [newFilePath, onFileSelect]);

  const handleInputKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === "Enter") {
        e.preventDefault();
        handleConfirmCreate();
      } else if (e.key === "Escape") {
        e.preventDefault();
        handleCancelCreate();
      }
    },
    [handleConfirmCreate, handleCancelCreate],
  );

  return (
    <div className="border-t border-border-subtle flex flex-col flex-1 min-h-0">
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-2 bg-bg-tertiary">
        <h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
          Files
        </h3>
        <div className="flex items-center gap-1">
          {/* New File button */}
          <button
            onClick={handleStartCreate}
            disabled={!isReadWrite}
            className={`p-1.5 rounded transition-colors ${
              isReadWrite
                ? "text-text-muted hover:text-text-primary hover:bg-bg-secondary"
                : "text-text-muted/30 cursor-not-allowed"
            }`}
            title={
              isReadWrite
                ? "New file"
                : "Switch to User mode to create files"
            }
          >
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
            </svg>
          </button>

          {/* Refresh button */}
          <button
            onClick={handleRefresh}
            className="p-1.5 text-text-muted hover:text-text-primary hover:bg-bg-secondary rounded transition-colors"
            title="Refresh file tree"
          >
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
          </button>

          {/* RW indicator */}
          <span
            className={`w-6 h-6 flex items-center justify-center font-mono font-bold text-xs rounded border ${
              isReadWrite
                ? "border-green-500 strobe text-green-500"
                : "border-border-default text-text-muted"
            }`}
            title="Read / Write"
          >
            RW
          </span>
          {/* RO indicator */}
          <span
            className={`w-6 h-6 flex items-center justify-center font-mono font-bold text-xs rounded border ${
              isReadOnly
                ? "border-green-500 strobe text-green-500"
                : "border-border-default text-text-muted"
            }`}
            title="Read Only"
          >
            RO
          </span>
        </div>
      </div>

      {/* New file creation input */}
      {isCreatingFile && (
        <div className="px-3 py-2 bg-bg-secondary border-b border-border-subtle">
          <div className="flex items-center gap-1">
            <input
              ref={inputRef}
              type="text"
              value={newFilePath}
              onChange={(e) => setNewFilePath(e.target.value)}
              onKeyDown={handleInputKeyDown}
              placeholder="src/utils/helper.ts"
              disabled={isCreating}
              className="flex-1 bg-bg-primary border border-border-default rounded px-2 py-1 text-sm text-text-primary placeholder-text-muted/50 focus:outline-none focus:border-brand"
            />
            {/* Confirm button */}
            <button
              onClick={handleConfirmCreate}
              disabled={isCreating || !newFilePath.trim()}
              className={`p-1 rounded transition-colors ${
                isCreating || !newFilePath.trim()
                  ? "text-text-muted/30 cursor-not-allowed"
                  : "text-green-500 hover:bg-bg-tertiary"
              }`}
              title="Create file"
            >
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </button>
            {/* Cancel button */}
            <button
              onClick={handleCancelCreate}
              disabled={isCreating}
              className="p-1 text-text-muted hover:text-red-400 hover:bg-bg-tertiary rounded transition-colors"
              title="Cancel"
            >
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          {createError && (
            <p className="mt-1 text-xs text-red-400">{createError}</p>
          )}
        </div>
      )}

      {/* File tree */}
      <div className="flex-1 overflow-auto">
        <FileTree
          ref={fileTreeRef}
          workspaceMode={workspaceMode}
          onFileSelect={onFileSelect}
        />
      </div>

      {/* Footer */}
      <div className="px-4 py-2 bg-bg-tertiary border-t border-border-subtle">
        <p className="text-xs text-text-muted">
          {isReadOnly
            ? "Read-only: Agent is working"
            : isReadWrite
              ? "Read-write mode enabled"
              : "Select User or Agent mode to access files"}
        </p>
      </div>
    </div>
  );
}
