import { useState } from "react";
import type { TaskCheckpoint } from "../../lib/api";
import { forkTask, resumeFromCheckpoint } from "../../lib/api";

interface CheckpointCardProps {
  checkpoint: TaskCheckpoint;
  taskId: string;
  onActionComplete: () => void;
}

export function CheckpointCard({ checkpoint, taskId, onActionComplete }: CheckpointCardProps) {
  const [showActions, setShowActions] = useState(false);
  const [showForkDialog, setShowForkDialog] = useState(false);
  const [showResumeDialog, setShowResumeDialog] = useState(false);
  const [forkName, setForkName] = useState(`Fork from checkpoint ${checkpoint.checkpointNumber}`);
  const [forkPlan, setForkPlan] = useState("");
  const [resumePlan, setResumePlan] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleFork = async () => {
    if (!forkName.trim() || !forkPlan.trim()) {
      setError("Name and plan are required");
      return;
    }

    setIsLoading(true);
    setError(null);
    try {
      await forkTask(taskId, {
        forkFromType: "checkpoint",
        forkFromValue: String(checkpoint.checkpointNumber),
        newTaskName: forkName,
        newTaskPlan: forkPlan,
        includeConversation: true,
      });
      setShowForkDialog(false);
      onActionComplete();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Failed to fork task");
    } finally {
      setIsLoading(false);
    }
  };

  const handleResume = async () => {
    if (!resumePlan.trim()) {
      setError("Plan is required");
      return;
    }

    setIsLoading(true);
    setError(null);
    try {
      await resumeFromCheckpoint(taskId, checkpoint.id, {
        plan: resumePlan,
        includeConversation: true,
      });
      setShowResumeDialog(false);
      onActionComplete();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Failed to resume from checkpoint");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <>
      <div className="p-3 hover:bg-[rgba(117,170,252,0.05)] transition-colors">
        <div className="flex items-start justify-between gap-4">
          {/* Checkpoint info */}
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2">
              <span className="font-mono text-sm text-purple-400">#{checkpoint.checkpointNumber}</span>
              <span className="font-mono text-[10px] text-[#7788aa]">
                {checkpoint.commitSha.slice(0, 7)}
              </span>
              <span className="font-mono text-[10px] text-[#556677]">
                on {checkpoint.branchName}
              </span>
            </div>

            {checkpoint.message && (
              <div className="font-mono text-xs text-[#9bc3ff] mt-1">{checkpoint.message}</div>
            )}

            {/* Files changed */}
            {checkpoint.filesChanged.length > 0 && (
              <div className="mt-2 flex flex-wrap gap-2">
                {checkpoint.filesChanged.slice(0, 5).map((file, i) => (
                  <span
                    key={i}
                    className={`font-mono text-[9px] px-1.5 py-0.5 border ${
                      file.action === "A"
                        ? "text-green-400 border-green-400/30"
                        : file.action === "D"
                        ? "text-red-400 border-red-400/30"
                        : "text-yellow-400 border-yellow-400/30"
                    }`}
                  >
                    {file.action} {file.path.split("/").pop()}
                  </span>
                ))}
                {checkpoint.filesChanged.length > 5 && (
                  <span className="font-mono text-[9px] text-[#556677]">
                    +{checkpoint.filesChanged.length - 5} more
                  </span>
                )}
              </div>
            )}

            {/* Stats */}
            <div className="mt-2 flex items-center gap-4 font-mono text-[9px] text-[#556677]">
              <span className="text-green-400">+{checkpoint.linesAdded}</span>
              <span className="text-red-400">-{checkpoint.linesRemoved}</span>
              <span>{new Date(checkpoint.createdAt).toLocaleString()}</span>
            </div>
          </div>

          {/* Actions button */}
          <button
            onClick={() => setShowActions(!showActions)}
            className="shrink-0 p-1 text-[#7788aa] hover:text-[#9bc3ff] transition-colors"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
              />
            </svg>
          </button>
        </div>

        {/* Actions dropdown */}
        {showActions && (
          <div className="mt-3 flex gap-2">
            <button
              onClick={() => {
                setShowForkDialog(true);
                setShowActions(false);
              }}
              className="px-3 py-1.5 font-mono text-[10px] uppercase text-purple-400 border border-purple-400/30 hover:bg-purple-400/10 transition-colors"
            >
              Fork from here
            </button>
            <button
              onClick={() => {
                setShowResumeDialog(true);
                setShowActions(false);
              }}
              className="px-3 py-1.5 font-mono text-[10px] uppercase text-cyan-400 border border-cyan-400/30 hover:bg-cyan-400/10 transition-colors"
            >
              Resume from here
            </button>
          </div>
        )}
      </div>

      {/* Fork dialog */}
      {showForkDialog && (
        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
          <div className="bg-[#0d1b2d] border border-[rgba(117,170,252,0.35)] max-w-lg w-full mx-4">
            <div className="p-4 border-b border-[rgba(117,170,252,0.15)] flex justify-between items-center">
              <h2 className="font-mono text-sm uppercase tracking-wide text-[#9bc3ff]">
                Fork from Checkpoint #{checkpoint.checkpointNumber}
              </h2>
              <button
                onClick={() => setShowForkDialog(false)}
                className="text-[#7788aa] hover:text-[#9bc3ff] transition-colors"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            <div className="p-4 space-y-4">
              {error && (
                <div className="p-2 bg-red-400/10 border border-red-400/30 font-mono text-xs text-red-400">
                  {error}
                </div>
              )}
              <div>
                <label className="block font-mono text-[10px] text-[#7788aa] uppercase mb-1">
                  New Task Name
                </label>
                <input
                  type="text"
                  value={forkName}
                  onChange={(e) => setForkName(e.target.value)}
                  className="w-full font-mono text-xs text-[#9bc3ff] bg-[#0a1525] border border-[rgba(117,170,252,0.25)] px-3 py-2 focus:border-[#3f6fb3] focus:outline-none"
                />
              </div>
              <div>
                <label className="block font-mono text-[10px] text-[#7788aa] uppercase mb-1">
                  Plan for New Task
                </label>
                <textarea
                  value={forkPlan}
                  onChange={(e) => setForkPlan(e.target.value)}
                  rows={4}
                  className="w-full font-mono text-xs text-[#9bc3ff] bg-[#0a1525] border border-[rgba(117,170,252,0.25)] px-3 py-2 focus:border-[#3f6fb3] focus:outline-none resize-none"
                  placeholder="Describe what this forked task should accomplish..."
                />
              </div>
              <div className="flex justify-end gap-2">
                <button
                  onClick={() => setShowForkDialog(false)}
                  className="px-4 py-2 font-mono text-xs uppercase text-[#7788aa] border border-[rgba(117,170,252,0.25)] hover:text-[#9bc3ff] transition-colors"
                >
                  Cancel
                </button>
                <button
                  onClick={handleFork}
                  disabled={isLoading}
                  className="px-4 py-2 font-mono text-xs uppercase text-white bg-purple-600 border border-purple-500 hover:bg-purple-500 transition-colors disabled:opacity-50"
                >
                  {isLoading ? "Creating..." : "Create Fork"}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Resume dialog */}
      {showResumeDialog && (
        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
          <div className="bg-[#0d1b2d] border border-[rgba(117,170,252,0.35)] max-w-lg w-full mx-4">
            <div className="p-4 border-b border-[rgba(117,170,252,0.15)] flex justify-between items-center">
              <h2 className="font-mono text-sm uppercase tracking-wide text-[#9bc3ff]">
                Resume from Checkpoint #{checkpoint.checkpointNumber}
              </h2>
              <button
                onClick={() => setShowResumeDialog(false)}
                className="text-[#7788aa] hover:text-[#9bc3ff] transition-colors"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            <div className="p-4 space-y-4">
              {error && (
                <div className="p-2 bg-red-400/10 border border-red-400/30 font-mono text-xs text-red-400">
                  {error}
                </div>
              )}
              <div>
                <label className="block font-mono text-[10px] text-[#7788aa] uppercase mb-1">
                  Plan for Resumed Task
                </label>
                <textarea
                  value={resumePlan}
                  onChange={(e) => setResumePlan(e.target.value)}
                  rows={4}
                  className="w-full font-mono text-xs text-[#9bc3ff] bg-[#0a1525] border border-[rgba(117,170,252,0.25)] px-3 py-2 focus:border-[#3f6fb3] focus:outline-none resize-none"
                  placeholder="Describe what the resumed task should do..."
                />
              </div>
              <div className="flex justify-end gap-2">
                <button
                  onClick={() => setShowResumeDialog(false)}
                  className="px-4 py-2 font-mono text-xs uppercase text-[#7788aa] border border-[rgba(117,170,252,0.25)] hover:text-[#9bc3ff] transition-colors"
                >
                  Cancel
                </button>
                <button
                  onClick={handleResume}
                  disabled={isLoading}
                  className="px-4 py-2 font-mono text-xs uppercase text-white bg-cyan-600 border border-cyan-500 hover:bg-cyan-500 transition-colors disabled:opacity-50"
                >
                  {isLoading ? "Creating..." : "Resume Task"}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}