import { useState, useCallback, useEffect } from "react";
import type { TaskWithSubtasks, TaskStatus } from "../../lib/api";
import { getTask, updateTask } from "../../lib/api";

interface InlineSubtaskEditorProps {
  subtaskId: string;
  onClose: () => void;
  onUpdated: () => void;
  onNavigate?: (taskId: string) => void;
}

function getStatusColor(status: TaskStatus): string {
  switch (status) {
    case "pending":
      return "text-[#9bc3ff]";
    case "running":
      return "text-green-400";
    case "paused":
      return "text-yellow-400";
    case "blocked":
      return "text-orange-400";
    case "done":
      return "text-emerald-400";
    case "failed":
      return "text-red-400";
    case "merged":
      return "text-purple-400";
    default:
      return "text-[#9bc3ff]";
  }
}

function getStatusBgColor(status: TaskStatus): string {
  switch (status) {
    case "pending":
      return "bg-[rgba(117,170,252,0.1)]";
    case "running":
      return "bg-green-400/10";
    case "paused":
      return "bg-yellow-400/10";
    case "blocked":
      return "bg-orange-400/10";
    case "done":
      return "bg-emerald-400/10";
    case "failed":
      return "bg-red-400/10";
    case "merged":
      return "bg-purple-400/10";
    default:
      return "bg-[rgba(117,170,252,0.1)]";
  }
}

export function InlineSubtaskEditor({
  subtaskId,
  onClose,
  onUpdated,
  onNavigate,
}: InlineSubtaskEditorProps) {
  const [subtask, setSubtask] = useState<TaskWithSubtasks | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [editName, setEditName] = useState("");
  const [editDescription, setEditDescription] = useState("");
  const [editPlan, setEditPlan] = useState("");

  // Load subtask details
  useEffect(() => {
    setLoading(true);
    getTask(subtaskId)
      .then((task) => {
        setSubtask(task);
        setEditName(task.name);
        setEditDescription(task.description || "");
        setEditPlan(task.plan);
      })
      .catch((err) => {
        console.error("Failed to load subtask:", err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [subtaskId]);

  const handleSave = useCallback(async () => {
    if (!subtask || saving) return;
    setSaving(true);
    try {
      await updateTask(subtaskId, {
        name: editName,
        description: editDescription || undefined,
        plan: editPlan,
        version: subtask.version,
      });
      // Refresh subtask
      const updated = await getTask(subtaskId);
      setSubtask(updated);
      setIsEditing(false);
      onUpdated();
    } catch (err) {
      console.error("Failed to save subtask:", err);
    } finally {
      setSaving(false);
    }
  }, [subtask, subtaskId, editName, editDescription, editPlan, saving, onUpdated]);

  const handleCancel = useCallback(() => {
    if (subtask) {
      setEditName(subtask.name);
      setEditDescription(subtask.description || "");
      setEditPlan(subtask.plan);
    }
    setIsEditing(false);
  }, [subtask]);

  if (loading) {
    return (
      <div className="p-4 bg-[rgba(0,0,0,0.2)] border-l-2 border-[#3f6fb3]">
        <div className="font-mono text-xs text-[#75aafc]">Loading subtask...</div>
      </div>
    );
  }

  if (!subtask) {
    return (
      <div className="p-4 bg-[rgba(0,0,0,0.2)] border-l-2 border-red-400">
        <div className="font-mono text-xs text-red-400">Failed to load subtask</div>
      </div>
    );
  }

  return (
    <div className="bg-[rgba(0,0,0,0.2)] border-l-2 border-[#3f6fb3]">
      {/* Header */}
      <div className="flex items-center justify-between p-3 border-b border-[rgba(117,170,252,0.15)]">
        <div className="flex items-center gap-2">
          <button
            onClick={onClose}
            className="font-mono text-[10px] text-[#555] hover:text-[#75aafc]"
          >
            [close]
          </button>
          <span
            className={`px-1.5 py-0.5 font-mono text-[9px] uppercase ${getStatusColor(
              subtask.status as TaskStatus
            )} ${getStatusBgColor(subtask.status as TaskStatus)} border border-current/20`}
          >
            {subtask.status}
          </span>
          {onNavigate && (
            <button
              onClick={() => onNavigate(subtaskId)}
              className="font-mono text-[10px] text-[#75aafc] hover:text-[#9bc3ff]"
            >
              [open full view]
            </button>
          )}
        </div>
        <div className="flex items-center gap-2">
          {isEditing ? (
            <>
              <button
                onClick={handleCancel}
                disabled={saving}
                className="px-2 py-0.5 font-mono text-[10px] text-[#555] hover:text-[#9bc3ff] disabled:opacity-50"
              >
                Cancel
              </button>
              <button
                onClick={handleSave}
                disabled={saving}
                className="px-2 py-0.5 font-mono text-[10px] text-green-400 border border-green-400/30 hover:border-green-400/50 disabled:opacity-50"
              >
                {saving ? "..." : "Save"}
              </button>
            </>
          ) : (
            <button
              onClick={() => setIsEditing(true)}
              className="px-2 py-0.5 font-mono text-[10px] text-[#75aafc] hover:text-[#9bc3ff]"
            >
              Edit
            </button>
          )}
        </div>
      </div>

      {/* Content */}
      <div className="p-3 space-y-3">
        {/* Name */}
        {isEditing ? (
          <input
            type="text"
            value={editName}
            onChange={(e) => setEditName(e.target.value)}
            className="w-full bg-transparent border border-[rgba(117,170,252,0.25)] text-[#dbe7ff] font-mono text-sm px-2 py-1 outline-none focus:border-[#3f6fb3]"
            placeholder="Subtask name"
          />
        ) : (
          <div className="font-mono text-sm text-[#dbe7ff]">{subtask.name}</div>
        )}

        {/* Description */}
        {isEditing ? (
          <textarea
            value={editDescription}
            onChange={(e) => setEditDescription(e.target.value)}
            className="w-full bg-transparent border border-[rgba(117,170,252,0.25)] text-[#9bc3ff] font-mono text-xs px-2 py-1 outline-none focus:border-[#3f6fb3] min-h-[40px] resize-y"
            placeholder="Description (optional)"
          />
        ) : subtask.description ? (
          <div className="font-mono text-xs text-[#75aafc]">{subtask.description}</div>
        ) : null}

        {/* Plan */}
        <div className="space-y-1">
          <div className="font-mono text-[10px] text-[#555] uppercase">Plan</div>
          {isEditing ? (
            <textarea
              value={editPlan}
              onChange={(e) => setEditPlan(e.target.value)}
              className="w-full bg-[rgba(0,0,0,0.2)] border border-[rgba(117,170,252,0.25)] text-[#dbe7ff] font-mono text-xs px-2 py-1 outline-none focus:border-[#3f6fb3] min-h-[100px] resize-y"
              placeholder="Plan/instructions..."
            />
          ) : (
            <pre className="bg-[rgba(0,0,0,0.2)] border border-[rgba(117,170,252,0.15)] p-2 font-mono text-xs text-[#9bc3ff] whitespace-pre-wrap max-h-[150px] overflow-y-auto">
              {subtask.plan}
            </pre>
          )}
        </div>

        {/* Progress/Error */}
        {subtask.progressSummary && (
          <div className="font-mono text-[10px] text-[#75aafc]">
            <span className="text-[#555]">Progress:</span> {subtask.progressSummary}
          </div>
        )}
        {subtask.errorMessage && (
          <div className="font-mono text-[10px] text-red-400">
            <span className="text-red-400/50">Error:</span> {subtask.errorMessage}
          </div>
        )}

        {/* Nested subtasks indicator */}
        {subtask.subtasks.length > 0 && (
          <div className="font-mono text-[10px] text-[#555]">
            Has {subtask.subtasks.length} subtask{subtask.subtasks.length > 1 ? "s" : ""}
            {onNavigate && (
              <button
                onClick={() => onNavigate(subtaskId)}
                className="ml-2 text-[#75aafc] hover:text-[#9bc3ff]"
              >
                [view all]
              </button>
            )}
          </div>
        )}
      </div>
    </div>
  );
}