import { useState, useEffect, useRef } from "react";
import type { FileVersionSummary, FileVersion, VersionSource } from "../../lib/api";

interface VersionHistoryDropdownProps {
  currentVersion: number;
  versions: FileVersionSummary[];
  loading: boolean;
  selectedVersion: FileVersion | null;
  loadingVersion: boolean;
  onSelectVersion: (version: number) => void;
  onRestoreVersion: (version: number) => void;
  onClearSelection: () => void;
  restoring: boolean;
}

function formatDate(dateString: string): string {
  const date = new Date(dateString);
  return date.toLocaleString("en-US", {
    month: "short",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
}

function getSourceLabel(source: VersionSource): string {
  switch (source) {
    case "user":
      return "User";
    case "llm":
      return "AI";
    case "system":
      return "System";
  }
}

function getSourceColor(source: VersionSource): string {
  switch (source) {
    case "user":
      return "text-blue-400";
    case "llm":
      return "text-purple-400";
    case "system":
      return "text-gray-400";
  }
}

export function VersionHistoryDropdown({
  currentVersion,
  versions,
  loading,
  selectedVersion,
  loadingVersion,
  onSelectVersion,
  onRestoreVersion,
  onClearSelection,
  restoring,
}: VersionHistoryDropdownProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);
  const [versionToRestore, setVersionToRestore] = useState<number | null>(null);
  const dropdownRef = useRef<HTMLDivElement>(null);

  // Close dropdown when clicking outside
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const handleVersionClick = (version: number) => {
    if (version === currentVersion) return;
    onSelectVersion(version);
    setIsOpen(false);
  };

  const handleRestoreClick = (version: number) => {
    setVersionToRestore(version);
    setShowConfirm(true);
  };

  const handleConfirmRestore = () => {
    if (versionToRestore !== null) {
      onRestoreVersion(versionToRestore);
    }
    setShowConfirm(false);
    setVersionToRestore(null);
  };

  const handleCancelRestore = () => {
    setShowConfirm(false);
    setVersionToRestore(null);
    onClearSelection();
  };

  // If showing the selected version preview
  if (selectedVersion) {
    return (
      <div className="border border-[#3f6fb3]/50 bg-[#0d1b2d] p-4">
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center gap-2">
            <span className="font-mono text-xs text-[#75aafc] uppercase">Viewing Version</span>
            <span className="font-mono text-sm text-[#dbe7ff] font-bold">
              v{selectedVersion.version}
            </span>
            <span className={`font-mono text-xs ${getSourceColor(selectedVersion.source)}`}>
              ({getSourceLabel(selectedVersion.source)})
            </span>
          </div>
          <button
            onClick={onClearSelection}
            className="font-mono text-xs text-[#555] hover:text-white/70"
          >
            Close
          </button>
        </div>

        <div className="text-[10px] font-mono text-[#555] mb-3">
          {formatDate(selectedVersion.createdAt)}
          {selectedVersion.changeDescription && (
            <span className="ml-2 text-[#9bc3ff]">- {selectedVersion.changeDescription}</span>
          )}
        </div>

        {/* Preview of version content */}
        <div className="max-h-48 overflow-y-auto mb-4 border border-[#333] bg-black/20 p-3">
          {selectedVersion.body.length === 0 ? (
            <div className="text-[#555] text-xs italic">No content</div>
          ) : (
            <div className="space-y-2">
              {selectedVersion.body.map((element, index) => (
                <div key={index} className="font-mono text-xs text-white/70">
                  {element.type === "heading" && (
                    <div className="text-[#9bc3ff] font-bold">
                      {"#".repeat(element.level)} {element.text}
                    </div>
                  )}
                  {element.type === "paragraph" && (
                    <div className="text-white/60">{element.text}</div>
                  )}
                  {element.type === "chart" && (
                    <div className="text-purple-400">[Chart: {element.title || element.chartType}]</div>
                  )}
                  {element.type === "image" && (
                    <div className="text-green-400">[Image: {element.alt || element.src}]</div>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Restore button */}
        {!showConfirm ? (
          <button
            onClick={() => handleRestoreClick(selectedVersion.version)}
            disabled={restoring}
            className="w-full px-3 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors disabled:opacity-50"
          >
            {restoring ? "Restoring..." : "Restore This Version"}
          </button>
        ) : (
          <div className="border border-yellow-500/30 bg-yellow-500/10 p-3">
            <div className="font-mono text-xs text-yellow-400 mb-2">
              Are you sure you want to restore to version {versionToRestore}?
            </div>
            <div className="font-mono text-[10px] text-white/50 mb-3">
              This will create a new version with the content from v{versionToRestore}.
              Your current changes will be preserved as a separate version.
            </div>
            <div className="flex gap-2">
              <button
                onClick={handleConfirmRestore}
                disabled={restoring}
                className="flex-1 px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-yellow-600/50 border border-yellow-500/50 hover:bg-yellow-600/70 transition-colors disabled:opacity-50"
              >
                {restoring ? "Restoring..." : "Confirm Restore"}
              </button>
              <button
                onClick={handleCancelRestore}
                disabled={restoring}
                className="px-3 py-1.5 font-mono text-xs text-[#555] border border-[#333] hover:text-white/70"
              >
                Cancel
              </button>
            </div>
          </div>
        )}
      </div>
    );
  }

  return (
    <div ref={dropdownRef} className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 px-3 py-1.5 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors"
      >
        <span>v{currentVersion}</span>
        <svg
          width="10"
          height="6"
          viewBox="0 0 10 6"
          fill="none"
          className={`transition-transform ${isOpen ? "rotate-180" : ""}`}
        >
          <path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
      </button>

      {isOpen && (
        <div className="absolute top-full left-0 mt-1 w-64 max-h-72 overflow-y-auto bg-[#0d1b2d] border border-[#3f6fb3]/50 shadow-lg z-50">
          <div className="p-2 border-b border-[#333] font-mono text-[10px] text-[#555] uppercase">
            Version History
          </div>

          {loading ? (
            <div className="p-4 text-center font-mono text-xs text-[#555]">Loading...</div>
          ) : versions.length === 0 ? (
            <div className="p-4 text-center font-mono text-xs text-[#555]">No versions found</div>
          ) : (
            <div>
              {versions.map((version) => (
                <button
                  key={version.version}
                  onClick={() => handleVersionClick(version.version)}
                  disabled={version.version === currentVersion || loadingVersion}
                  className={`w-full text-left px-3 py-2 font-mono text-xs transition-colors ${
                    version.version === currentVersion
                      ? "bg-[#0f3c78]/50 text-[#dbe7ff]"
                      : "hover:bg-[#0f3c78]/30 text-white/70"
                  } ${loadingVersion ? "opacity-50" : ""}`}
                >
                  <div className="flex items-center justify-between">
                    <span className="font-bold">v{version.version}</span>
                    <span className={getSourceColor(version.source)}>
                      {getSourceLabel(version.source)}
                    </span>
                  </div>
                  <div className="text-[10px] text-[#555] mt-0.5">
                    {formatDate(version.createdAt)}
                  </div>
                  {version.changeDescription && (
                    <div className="text-[10px] text-[#75aafc] mt-0.5 truncate">
                      {version.changeDescription}
                    </div>
                  )}
                  {version.version === currentVersion && (
                    <div className="text-[10px] text-green-400 mt-0.5">(current)</div>
                  )}
                </button>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}