import { useState, useEffect, useCallback } from "react";
import type { PatchSummary } from "../../lib/api";
import { listTaskPatches } from "../../lib/api";

interface PatchesListPanelProps {
  taskId: string;
  contractId: string;
}

/** Format a date for display */
function formatDate(dateStr: string): string {
  const date = new Date(dateStr);
  return date.toLocaleDateString("en-US", {
    month: "short",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
}

/** Copy text to clipboard and show feedback */
async function copyToClipboard(text: string): Promise<boolean> {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch {
    // Fallback for older browsers
    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.position = "fixed";
    textArea.style.left = "-999999px";
    textArea.style.top = "-999999px";
    document.body.appendChild(textArea);
    textArea.select();
    try {
      document.execCommand("copy");
      return true;
    } catch {
      return false;
    } finally {
      document.body.removeChild(textArea);
    }
  }
}

export function PatchesListPanel({ taskId, contractId }: PatchesListPanelProps) {
  const [patches, setPatches] = useState<PatchSummary[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [copiedPatchId, setCopiedPatchId] = useState<string | null>(null);
  const [expandedPatchId, setExpandedPatchId] = useState<string | null>(null);

  const fetchPatches = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);
      const patchList = await listTaskPatches(taskId, contractId);
      setPatches(patchList);
    } catch (e) {
      console.error("Failed to fetch patches:", e);
      setError(e instanceof Error ? e.message : "Failed to fetch patches");
    } finally {
      setLoading(false);
    }
  }, [taskId, contractId]);

  useEffect(() => {
    fetchPatches();
  }, [fetchPatches]);

  const handleCopyApplyCommand = useCallback(async (patch: PatchSummary) => {
    // Generate the apply command for this patch
    const command = `makima patch apply ${patch.id}`;
    const success = await copyToClipboard(command);
    if (success) {
      setCopiedPatchId(patch.id);
      setTimeout(() => setCopiedPatchId(null), 2000);
    }
  }, []);

  const handleViewPatch = useCallback((patchId: string) => {
    setExpandedPatchId(expandedPatchId === patchId ? null : patchId);
  }, [expandedPatchId]);

  if (loading) {
    return (
      <div className="bg-[rgba(0,0,0,0.2)] border border-[rgba(117,170,252,0.15)] p-3">
        <div className="font-mono text-xs text-[#9bc3ff] tracking-wide uppercase mb-2">
          Exported Patches
        </div>
        <div className="font-mono text-xs text-[#555] animate-pulse">
          Loading patches...
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-[rgba(0,0,0,0.2)] border border-[rgba(117,170,252,0.15)] p-3">
        <div className="flex items-center justify-between mb-2">
          <div className="font-mono text-xs text-[#9bc3ff] tracking-wide uppercase">
            Exported Patches
          </div>
          <button
            onClick={fetchPatches}
            className="font-mono text-[10px] text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
          >
            Retry
          </button>
        </div>
        <div className="font-mono text-xs text-red-400">
          {error}
        </div>
      </div>
    );
  }

  if (patches.length === 0) {
    return (
      <div className="bg-[rgba(0,0,0,0.2)] border border-[rgba(117,170,252,0.15)] p-3">
        <div className="flex items-center justify-between mb-2">
          <div className="font-mono text-xs text-[#9bc3ff] tracking-wide uppercase">
            Exported Patches
          </div>
          <button
            onClick={fetchPatches}
            className="font-mono text-[10px] text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
          >
            Refresh
          </button>
        </div>
        <div className="font-mono text-xs text-[#555]">
          No patches exported yet
        </div>
      </div>
    );
  }

  return (
    <div className="bg-[rgba(0,0,0,0.2)] border border-[rgba(117,170,252,0.15)]">
      {/* Header */}
      <div className="flex items-center justify-between p-3 border-b border-[rgba(117,170,252,0.1)]">
        <div className="font-mono text-xs text-[#9bc3ff] tracking-wide uppercase">
          Exported Patches
        </div>
        <div className="flex items-center gap-2">
          <span className="font-mono text-[10px] text-[#75aafc]">
            {patches.length} patch{patches.length !== 1 ? "es" : ""}
          </span>
          <button
            onClick={fetchPatches}
            className="font-mono text-[10px] text-[#555] hover:text-[#75aafc] transition-colors"
            title="Refresh"
          >
            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <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>
        </div>
      </div>

      {/* Patch list */}
      <div className="divide-y divide-[rgba(117,170,252,0.1)]">
        {patches.map((patch) => (
          <div
            key={patch.id}
            className="p-3"
          >
            {/* Patch header */}
            <div className="flex items-start justify-between gap-2 mb-2">
              <div className="flex-1 min-w-0">
                <div className="font-mono text-sm text-[#dbe7ff] truncate" title={patch.name}>
                  {patch.name}
                </div>
                <div className="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1 font-mono text-[10px] text-[#555]">
                  <span title={new Date(patch.createdAt).toLocaleString()}>
                    {formatDate(patch.createdAt)}
                  </span>
                  <span>
                    {patch.filesCount} file{patch.filesCount !== 1 ? "s" : ""}
                  </span>
                  <span className="text-green-400">+{patch.linesAdded}</span>
                  <span className="text-red-400">-{patch.linesRemoved}</span>
                </div>
              </div>
            </div>

            {/* Action buttons */}
            <div className="flex flex-wrap gap-2">
              <button
                onClick={() => handleViewPatch(patch.id)}
                className="px-2 py-1 font-mono text-[10px] text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] hover:bg-[rgba(117,170,252,0.05)] transition-colors"
              >
                {expandedPatchId === patch.id ? "Hide" : "View"}
              </button>
              <button
                onClick={() => handleCopyApplyCommand(patch)}
                className={`px-2 py-1 font-mono text-[10px] border transition-colors ${
                  copiedPatchId === patch.id
                    ? "text-green-400 border-green-400/30 bg-green-400/10"
                    : "text-[#9bc3ff] border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] hover:bg-[rgba(117,170,252,0.05)]"
                }`}
              >
                {copiedPatchId === patch.id ? "Copied!" : "Copy Apply Command"}
              </button>
            </div>

            {/* Expanded patch content */}
            {expandedPatchId === patch.id && patch.description && (
              <div className="mt-3 p-2 bg-[rgba(0,0,0,0.2)] border border-[rgba(117,170,252,0.1)]">
                <pre className="font-mono text-[10px] text-[#75aafc] whitespace-pre-wrap overflow-x-auto">
                  {patch.description}
                </pre>
              </div>
            )}

            {/* Expanded - show files if available */}
            {expandedPatchId === patch.id && patch.files && patch.files.length > 0 && (
              <div className="mt-2">
                <div className="font-mono text-[10px] text-[#555] mb-1">Changed files:</div>
                <div className="space-y-0.5">
                  {patch.files.map((file, idx) => (
                    <div key={idx} className="font-mono text-[10px] text-[#75aafc] pl-2">
                      {file}
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}