import { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import slug from "slug";
import type { User, Project, ProjectSkill, ProjectTask } from "../lib/api";
import {
  projectApi,
  droneApi,
  chatSessionApi,
  type DroneRegistration,
  type ChatSession,
  type AiProvider,
  providerApi,
} from "../lib/api";
import { socketClient } from "../lib/socket";
import gabAiImage from "./assets/gab-ai.jpeg";

interface ProjectManagerProps {
  user: User | null;
}

function NewProjectForm({
  onCancel,
  onSuccess,
}: {
  onCancel: () => void;
  onSuccess: () => void;
}) {
  const [name, setName] = useState("");
  const [slug, setSlug] = useState("");
  const [gitUrl, setGitUrl] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!name || !slug) {
      setError("Name and slug are required");
      return;
    }

    setSubmitting(true);
    setError("");

    try {
      await projectApi.create({ name, slug, gitUrl: gitUrl || undefined });
      onSuccess();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to create project");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="max-w-lg">
      <h2 className="text-xl font-semibold mb-6">Create New Project</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-sm text-text-secondary mb-1">
            Project Name *
          </label>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            className="w-full px-3 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary focus:border-brand focus:outline-none"
            placeholder="My Project"
          />
        </div>
        <div>
          <label className="block text-sm text-text-secondary mb-1">
            Project Slug *
          </label>
          <input
            type="text"
            value={slug}
            onChange={(e) => setSlug(e.target.value)}
            className="w-full px-3 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary focus:border-brand focus:outline-none"
            placeholder="my-project"
          />
          <p className="text-xs text-text-muted mt-1">
            Unique identifier for the project directory
          </p>
        </div>
        <div>
          <label className="block text-sm text-text-secondary mb-1">
            Git Repository URL
          </label>
          <input
            type="text"
            value={gitUrl}
            onChange={(e) => setGitUrl(e.target.value)}
            className="w-full px-3 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary focus:border-brand focus:outline-none"
            placeholder="https://github.com/user/repo.git"
          />
        </div>
        {error && <p className="text-red-500 text-sm">{error}</p>}
        <div className="flex gap-3 pt-2">
          <button
            type="submit"
            disabled={submitting}
            className="px-4 py-2 bg-brand text-white rounded hover:bg-red-700 transition-colors disabled:opacity-50"
          >
            {submitting ? "Creating..." : "Create Project"}
          </button>
          <button
            type="button"
            onClick={onCancel}
            className="px-4 py-2 border border-border-default text-text-secondary rounded hover:bg-bg-tertiary transition-colors"
          >
            Cancel
          </button>
        </div>
      </form>
    </div>
  );
}

function PullProjectForm({
  onCancel,
  onSuccess,
}: {
  onCancel: () => void;
  onSuccess: (project: Project) => void;
}) {
  const [gitUrl, setGitUrl] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!gitUrl.trim()) {
      setError("Git Repository URL is required");
      return;
    }

    setSubmitting(true);
    setError("");

    try {
      const project = await projectApi.pull(gitUrl.trim());
      onSuccess(project);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to pull project");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="max-w-lg">
      <h2 className="text-xl font-semibold mb-2">Pull New Project</h2>
      <p className="text-sm text-text-muted mb-6">
        Import an existing project from a git repository. The project name and
        slug will be derived automatically from the repository URL.
      </p>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-sm text-text-secondary mb-1">
            Git Repository URL *
          </label>
          <input
            type="text"
            value={gitUrl}
            onChange={(e) => setGitUrl(e.target.value)}
            className="w-full px-3 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary focus:border-brand focus:outline-none"
            placeholder="https://github.com/user/repo.git"
            autoFocus
          />
          <p className="text-xs text-text-muted mt-1">
            HTTPS or SSH format (e.g., git@github.com:user/repo.git)
          </p>
        </div>
        {error && <p className="text-red-500 text-sm">{error}</p>}
        <div className="flex gap-3 pt-2">
          <button
            type="submit"
            disabled={submitting}
            className="px-4 py-2 bg-brand text-white rounded hover:bg-red-700 transition-colors disabled:opacity-50"
          >
            {submitting ? "Pulling..." : "Pull Project"}
          </button>
          <button
            type="button"
            onClick={onCancel}
            className="px-4 py-2 border border-border-default text-text-secondary rounded hover:bg-bg-tertiary transition-colors"
          >
            Cancel
          </button>
        </div>
      </form>
    </div>
  );
}

interface EditProjectFormProps {
  project: Project;
  providers: AiProvider[];
  onCancel: () => void;
  onSuccess: () => void;
}

const MODE_OPTIONS = [
  { value: "plan", label: "Plan", color: "bg-blue-900/50 text-blue-300" },
  { value: "build", label: "Build", color: "bg-green-900/50 text-green-300" },
  { value: "test", label: "Test", color: "bg-yellow-900/50 text-yellow-300" },
  { value: "ship", label: "Ship", color: "bg-purple-900/50 text-purple-300" },
  { value: "dev", label: "Dev", color: "bg-red-900/50 text-red-300" },
];

function EditProjectForm({
  project,
  providers,
  onCancel,
  onSuccess,
}: EditProjectFormProps) {
  const [name, setName] = useState(project.name);
  const [slugValue, setSlugValue] = useState(project.slug);
  const [gitUrl, setGitUrl] = useState(project.gitUrl || "");
  const [description, setDescription] = useState(project.description || "");
  const [system, setSystem] = useState(project.system || "");
  const [skills, setSkills] = useState<ProjectSkill[]>(project.skills || []);
  const [tasks, setTasks] = useState<ProjectTask[]>(project.tasks || []);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");

  // Track which skills/tasks are expanded
  const [expandedSkills, setExpandedSkills] = useState<Set<string>>(new Set());
  const [expandedTasks, setExpandedTasks] = useState<Set<string>>(new Set());

  const toggleSkillExpanded = (id: string) => {
    setExpandedSkills((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  const toggleTaskExpanded = (id: string) => {
    setExpandedTasks((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  const addSkill = () => {
    const newSkill: ProjectSkill = {
      _id: crypto.randomUUID(),
      name: "",
      content: "",
      modes: [],
    };
    setSkills([...skills, newSkill]);
    setExpandedSkills((prev) => new Set(prev).add(newSkill._id));
  };

  const removeSkill = (id: string) => {
    setSkills(skills.filter((s) => s._id !== id));
    setExpandedSkills((prev) => {
      const next = new Set(prev);
      next.delete(id);
      return next;
    });
  };

  const updateSkill = (id: string, updates: Partial<ProjectSkill>) => {
    setSkills(skills.map((s) => (s._id === id ? { ...s, ...updates } : s)));
  };

  const toggleSkillMode = (id: string, mode: string) => {
    const skill = skills.find((s) => s._id === id);
    if (!skill) return;
    const modes = skill.modes.includes(mode)
      ? skill.modes.filter((m) => m !== mode)
      : [...skill.modes, mode];
    updateSkill(id, { modes });
  };

  const addTask = () => {
    const newTask: ProjectTask = {
      _id: crypto.randomUUID(),
      name: "",
      provider: providers[0]?._id || "",
      selectedModel: "",
      mode: "build",
      crontab: "0 0 * * * *",
      content: "",
      enabled: true,
    };
    setTasks([...tasks, newTask]);
    setExpandedTasks((prev) => new Set(prev).add(newTask._id));
  };

  const removeTask = (id: string) => {
    setTasks(tasks.filter((t) => t._id !== id));
    setExpandedTasks((prev) => {
      const next = new Set(prev);
      next.delete(id);
      return next;
    });
  };

  const updateTask = (id: string, updates: Partial<ProjectTask>) => {
    setTasks(tasks.map((t) => (t._id === id ? { ...t, ...updates } : t)));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!name || !slugValue) {
      setError("Name and slug are required");
      return;
    }

    setSubmitting(true);
    setError("");

    try {
      await projectApi.update(project._id, {
        name,
        slug: slug(slugValue),
        gitUrl: gitUrl || undefined,
        description: description || undefined,
        system: system || undefined,
        skills: skills.filter((s) => s.name.trim()), // only send skills with names
        tasks: tasks.filter((t) => t.name.trim()),   // only send tasks with names
      });
      onSuccess();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to update project");
    } finally {
      setSubmitting(false);
    }
  };

  const inputClass =
    "w-full px-3 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary focus:border-brand focus:outline-none";

  return (
    <div className="max-w-2xl">
      <h2 className="text-xl font-semibold mb-6">Edit Project</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        {/* Basic Fields */}
        <div>
          <label className="block text-sm text-text-secondary mb-1">
            Project Name *
          </label>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            className={inputClass}
            placeholder="My Project"
          />
        </div>
        <div>
          <label className="block text-sm text-text-secondary mb-1">
            Project Slug *
          </label>
          <input
            type="text"
            value={slugValue}
            onChange={(e) => setSlugValue(e.target.value)}
            className={inputClass}
            placeholder="my-project"
          />
          <p className="text-xs text-text-muted mt-1">
            Unique identifier for the project directory. Changing this will
            affect the workspace directory name on drones.
          </p>
        </div>
        <div>
          <label className="block text-sm text-text-secondary mb-1">
            Git Repository URL
          </label>
          <input
            type="text"
            value={gitUrl}
            onChange={(e) => setGitUrl(e.target.value)}
            className={inputClass}
            placeholder="https://github.com/user/repo.git"
          />
        </div>

        {/* Description */}
        <div>
          <label className="block text-sm text-text-secondary mb-1">
            Description
          </label>
          <textarea
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            className={`${inputClass} resize-y`}
            rows={3}
            placeholder="Brief description of the project"
          />
        </div>

        {/* System Prompt */}
        <div>
          <label className="block text-sm text-text-secondary mb-1">
            System Prompt
          </label>
          <textarea
            value={system}
            onChange={(e) => setSystem(e.target.value)}
            className={`${inputClass} resize-y font-mono text-sm`}
            rows={6}
            placeholder="Project-specific instructions appended to the agent's system prompt..."
          />
          <p className="text-xs text-text-muted mt-1">
            Appended to the agent's system prompt when working on this project.
            Use this to provide project-specific instructions, such as how to
            manage API servers as subprocesses during development.
          </p>
        </div>

        {/* Skills Editor */}
        <div className="border border-border-default rounded">
          <div className="flex items-center justify-between p-3 border-b border-border-subtle">
            <h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
              Skills ({skills.length})
            </h3>
            <button
              type="button"
              onClick={addSkill}
              className="px-3 py-1 text-xs border border-border-default text-text-secondary rounded hover:bg-bg-tertiary hover:text-text-primary transition-colors"
            >
              + Add Skill
            </button>
          </div>
          {skills.length === 0 ? (
            <div className="p-3 text-sm text-text-muted">
              No skills defined. Skills provide project-specific knowledge that
              agents can discover using the <code className="text-text-secondary">list_skills()</code> and{" "}
              <code className="text-text-secondary">read_skill()</code> tools.
            </div>
          ) : (
            <div className="divide-y divide-border-subtle">
              {skills.map((skill) => {
                const isExpanded = expandedSkills.has(skill._id);
                return (
                  <div key={skill._id}>
                    <div
                      className="flex items-center justify-between p-3 cursor-pointer hover:bg-bg-tertiary/50 transition-colors"
                      onClick={() => toggleSkillExpanded(skill._id)}
                    >
                      <div className="flex items-center gap-2 min-w-0">
                        <span className="text-text-muted text-xs">
                          {isExpanded ? "▼" : "▶"}
                        </span>
                        <span className="text-sm text-text-primary truncate">
                          {skill.name || "Unnamed Skill"}
                        </span>
                        <div className="flex gap-1">
                          {skill.modes.map((mode) => {
                            const opt = MODE_OPTIONS.find(
                              (m) => m.value === mode,
                            );
                            return opt ? (
                              <span
                                key={mode}
                                className={`px-1.5 py-0.5 text-[10px] rounded ${opt.color}`}
                              >
                                {opt.label}
                              </span>
                            ) : null;
                          })}
                        </div>
                      </div>
                      <button
                        type="button"
                        onClick={(e) => {
                          e.stopPropagation();
                          removeSkill(skill._id);
                        }}
                        className="p-1 text-text-muted hover:text-red-400 transition-colors"
                        title="Remove skill"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="14"
                          height="14"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        >
                          <line x1="18" y1="6" x2="6" y2="18" />
                          <line x1="6" y1="6" x2="18" y2="18" />
                        </svg>
                      </button>
                    </div>
                    {isExpanded && (
                      <div className="p-3 pt-0 space-y-3">
                        <div>
                          <label className="block text-xs text-text-muted mb-1">
                            Name
                          </label>
                          <input
                            type="text"
                            value={skill.name}
                            onChange={(e) =>
                              updateSkill(skill._id, {
                                name: e.target.value,
                              })
                            }
                            className={inputClass}
                            placeholder="Skill name"
                          />
                        </div>
                        <div>
                          <label className="block text-xs text-text-muted mb-1">
                            Content
                          </label>
                          <textarea
                            value={skill.content}
                            onChange={(e) =>
                              updateSkill(skill._id, {
                                content: e.target.value,
                              })
                            }
                            className={`${inputClass} resize-y font-mono text-sm`}
                            rows={6}
                            placeholder="Skill instructions and knowledge..."
                          />
                          <p className="text-xs text-text-muted mt-1">
                            What the agent reads via the{" "}
                            <code>read_skill()</code> tool
                          </p>
                        </div>
                        <div>
                          <label className="block text-xs text-text-muted mb-1">
                            Available Modes
                          </label>
                          <div className="flex flex-wrap gap-2">
                            {MODE_OPTIONS.map((opt) => (
                              <label
                                key={opt.value}
                                className="flex items-center gap-1.5 cursor-pointer"
                              >
                                <input
                                  type="checkbox"
                                  checked={skill.modes.includes(opt.value)}
                                  onChange={() =>
                                    toggleSkillMode(skill._id, opt.value)
                                  }
                                  className="rounded border-border-default bg-bg-tertiary"
                                />
                                <span
                                  className={`px-1.5 py-0.5 text-xs rounded ${opt.color}`}
                                >
                                  {opt.label}
                                </span>
                              </label>
                            ))}
                          </div>
                          <p className="text-xs text-text-muted mt-1">
                            Which modes can see this skill via{" "}
                            <code>list_skills()</code>
                          </p>
                        </div>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* Tasks Editor */}
        <div className="border border-border-default rounded">
          <div className="flex items-center justify-between p-3 border-b border-border-subtle">
            <h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
              Tasks ({tasks.length})
            </h3>
            <button
              type="button"
              onClick={addTask}
              className="px-3 py-1 text-xs border border-border-default text-text-secondary rounded hover:bg-bg-tertiary hover:text-text-primary transition-colors"
            >
              + Add Task
            </button>
          </div>
          {tasks.length === 0 ? (
            <div className="p-3 text-sm text-text-muted">
              No tasks defined. Tasks are scheduled agent runs with a crontab
              schedule.
            </div>
          ) : (
            <div className="divide-y divide-border-subtle">
              {tasks.map((task) => {
                const isExpanded = expandedTasks.has(task._id);
                const taskProvider = providers.find(
                  (p) => p._id === task.provider,
                );
                return (
                  <div key={task._id}>
                    <div
                      className="flex items-center justify-between p-3 cursor-pointer hover:bg-bg-tertiary/50 transition-colors"
                      onClick={() => toggleTaskExpanded(task._id)}
                    >
                      <div className="flex items-center gap-2 min-w-0">
                        <span className="text-text-muted text-xs">
                          {isExpanded ? "▼" : "▶"}
                        </span>
                        <span className="text-sm text-text-primary truncate">
                          {task.name || "Unnamed Task"}
                        </span>
                        {task.enabled ? (
                          <span className="px-1.5 py-0.5 text-[10px] rounded bg-green-900/50 text-green-300">
                            Enabled
                          </span>
                        ) : (
                          <span className="px-1.5 py-0.5 text-[10px] rounded bg-gray-900/50 text-gray-400">
                            Disabled
                          </span>
                        )}
                        {task.crontab && (
                          <span className="font-mono text-[10px] text-text-muted">
                            {task.crontab}
                          </span>
                        )}
                      </div>
                      <button
                        type="button"
                        onClick={(e) => {
                          e.stopPropagation();
                          removeTask(task._id);
                        }}
                        className="p-1 text-text-muted hover:text-red-400 transition-colors"
                        title="Remove task"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="14"
                          height="14"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        >
                          <line x1="18" y1="6" x2="6" y2="18" />
                          <line x1="6" y1="6" x2="18" y2="18" />
                        </svg>
                      </button>
                    </div>
                    {isExpanded && (
                      <div className="p-3 pt-0 space-y-3">
                        <div>
                          <label className="block text-xs text-text-muted mb-1">
                            Name
                          </label>
                          <input
                            type="text"
                            value={task.name}
                            onChange={(e) =>
                              updateTask(task._id, {
                                name: e.target.value,
                              })
                            }
                            className={inputClass}
                            placeholder="Task name"
                          />
                        </div>
                        <div className="grid grid-cols-2 gap-3">
                          <div>
                            <label className="block text-xs text-text-muted mb-1">
                              Provider
                            </label>
                            <select
                              value={task.provider}
                              onChange={(e) => {
                                updateTask(task._id, {
                                  provider: e.target.value,
                                  selectedModel: "",
                                });
                              }}
                              className={inputClass}
                            >
                              <option value="">Select provider</option>
                              {providers.map((p) => (
                                <option key={p._id} value={p._id}>
                                  {p.name} ({p.apiType})
                                </option>
                              ))}
                            </select>
                          </div>
                          <div>
                            <label className="block text-xs text-text-muted mb-1">
                              Model
                            </label>
                            <select
                              value={task.selectedModel}
                              onChange={(e) =>
                                updateTask(task._id, {
                                  selectedModel: e.target.value,
                                })
                              }
                              className={inputClass}
                              disabled={!taskProvider}
                            >
                              <option value="">Select model</option>
                              {taskProvider?.models
                                ?.sort((a, b) =>
                                  a.name.localeCompare(b.name),
                                )
                                .map((model) => (
                                  <option key={model.id} value={model.id}>
                                    {model.name}
                                    {model.parameterLabel
                                      ? ` (${model.parameterLabel})`
                                      : ""}
                                  </option>
                                ))}
                            </select>
                          </div>
                        </div>
                        <div className="grid grid-cols-2 gap-3">
                          <div>
                            <label className="block text-xs text-text-muted mb-1">
                              Mode
                            </label>
                            <select
                              value={task.mode}
                              onChange={(e) =>
                                updateTask(task._id, {
                                  mode: e.target.value,
                                })
                              }
                              className={inputClass}
                            >
                              <option value="plan">Plan</option>
                              <option value="build">Build</option>
                              <option value="test">Test</option>
                              <option value="ship">Ship</option>
                              <option value="dev">Dev</option>
                            </select>
                          </div>
                          <div>
                            <label className="block text-xs text-text-muted mb-1">
                              Schedule
                            </label>
                            <input
                              type="text"
                              value={task.crontab}
                              onChange={(e) =>
                                updateTask(task._id, {
                                  crontab: e.target.value,
                                })
                              }
                              className={`${inputClass} font-mono text-sm`}
                              placeholder="0 0 * * * *"
                            />
                            <p className="text-xs text-text-muted mt-1">
                              6-field cron: sec min hour day month weekday
                            </p>
                          </div>
                        </div>
                        <div>
                          <label className="block text-xs text-text-muted mb-1">
                            Prompt
                          </label>
                          <textarea
                            value={task.content}
                            onChange={(e) =>
                              updateTask(task._id, {
                                content: e.target.value,
                              })
                            }
                            className={`${inputClass} resize-y font-mono text-sm`}
                            rows={4}
                            placeholder="Task prompt for the agent..."
                          />
                        </div>
                        <label className="flex items-center gap-2 cursor-pointer">
                          <input
                            type="checkbox"
                            checked={task.enabled}
                            onChange={(e) =>
                              updateTask(task._id, {
                                enabled: e.target.checked,
                              })
                            }
                            className="rounded border-border-default bg-bg-tertiary"
                          />
                          <span className="text-sm text-text-secondary">
                            Enabled
                          </span>
                        </label>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {error && <p className="text-red-500 text-sm">{error}</p>}
        <div className="flex gap-3 pt-2">
          <button
            type="submit"
            disabled={submitting}
            className="px-4 py-2 bg-brand text-white rounded hover:bg-red-700 transition-colors disabled:opacity-50"
          >
            {submitting ? "Updating..." : "Save Changes"}
          </button>
          <button
            type="button"
            onClick={onCancel}
            className="px-4 py-2 border border-border-default text-text-secondary rounded hover:bg-bg-tertiary transition-colors"
          >
            Cancel
          </button>
        </div>
      </form>
    </div>
  );
}

interface ProjectInspectorProps {
  project: Project;
  providers: AiProvider[];
  onDelete: () => void;
  onUpdate: () => void;
}

function ProjectInspector({
  project,
  providers,
  onDelete,
  onUpdate,
}: ProjectInspectorProps) {
  const [deleting, setDeleting] = useState(false);
  const [editing, setEditing] = useState(false);

  const handleDelete = async () => {
    if (
      !confirm(
        "Are you sure you want to delete this project? This cannot be undone.",
      )
    ) {
      return;
    }
    setDeleting(true);
    try {
      await projectApi.delete(project._id);
      onDelete();
    } catch (err) {
      console.error("Failed to delete project", err);
    } finally {
      setDeleting(false);
    }
  };

  const modeBadge = (mode: string) => {
    const opt = MODE_OPTIONS.find((m) => m.value === mode);
    return opt ? (
      <span className={`px-1.5 py-0.5 text-[10px] rounded ${opt.color}`}>
        {opt.label}
      </span>
    ) : null;
  };

  return (
    <div className="flex-1 overflow-y-auto p-6">
      <div className="max-w-3xl">
        <h2 className="text-xl font-semibold mb-6">Project Inspector</h2>
        {editing ? (
          <EditProjectForm
            project={project}
            providers={providers}
            onCancel={() => setEditing(false)}
            onSuccess={() => {
              setEditing(false);
              onUpdate();
            }}
          />
        ) : (
          <>
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="p-4 bg-bg-secondary border border-border-default rounded">
                  <div className="text-sm text-text-muted mb-1">Name</div>
                  <div className="text-text-primary font-medium">
                    {project.name}
                  </div>
                </div>
                <div className="p-4 bg-bg-secondary border border-border-default rounded">
                  <div className="text-sm text-text-muted mb-1">Slug</div>
                  <div className="font-mono text-text-primary">
                    {project.slug}
                  </div>
                </div>
              </div>

              {/* Description */}
              <div className="p-4 bg-bg-secondary border border-border-default rounded">
                <div className="text-sm text-text-muted mb-1">Description</div>
                <div className="text-text-primary text-sm">
                  {project.description || (
                    <span className="text-text-muted">Not configured</span>
                  )}
                </div>
              </div>

              <div className="p-4 bg-bg-secondary border border-border-default rounded">
                <div className="text-sm text-text-muted mb-1">Git URL</div>
                <div className="text-text-primary font-mono text-sm break-all">
                  {project.gitUrl || (
                    <span className="text-text-muted">Not configured</span>
                  )}
                </div>
              </div>

              {/* System Prompt */}
              <div className="p-4 bg-bg-secondary border border-border-default rounded">
                <div className="text-sm text-text-muted mb-1">System Prompt</div>
                <div className="text-text-primary text-sm font-mono">
                  {project.system ? (
                    project.system.length > 200 ? (
                      <span>{project.system.slice(0, 200)}...</span>
                    ) : (
                      project.system
                    )
                  ) : (
                    <span className="text-text-muted font-sans">Not configured</span>
                  )}
                </div>
              </div>

              {/* Skills */}
              <div className="p-4 bg-bg-secondary border border-border-default rounded">
                <div className="text-sm text-text-muted mb-2">Skills ({project.skills?.length || 0})</div>
                {project.skills && project.skills.length > 0 ? (
                  <div className="space-y-1.5">
                    {project.skills.map((skill) => (
                      <div
                        key={skill._id}
                        className="flex items-center gap-2 text-sm"
                      >
                        <span className="text-text-primary">{skill.name}</span>
                        <div className="flex gap-1">
                          {skill.modes.map((mode) => modeBadge(mode))}
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <span className="text-text-muted text-sm">No skills defined</span>
                )}
              </div>

              {/* Tasks */}
              <div className="p-4 bg-bg-secondary border border-border-default rounded">
                <div className="text-sm text-text-muted mb-2">Tasks ({project.tasks?.length || 0})</div>
                {project.tasks && project.tasks.length > 0 ? (
                  <div className="space-y-1.5">
                    {project.tasks.map((task) => (
                      <div
                        key={task._id}
                        className="flex items-center gap-2 text-sm"
                      >
                        <span className="text-text-primary">{task.name}</span>
                        {task.enabled ? (
                          <span className="px-1.5 py-0.5 text-[10px] rounded bg-green-900/50 text-green-300">
                            Enabled
                          </span>
                        ) : (
                          <span className="px-1.5 py-0.5 text-[10px] rounded bg-gray-900/50 text-gray-400">
                            Disabled
                          </span>
                        )}
                        <span className="font-mono text-[10px] text-text-muted">
                          {task.crontab}
                        </span>
                      </div>
                    ))}
                  </div>
                ) : (
                  <span className="text-text-muted text-sm">No tasks defined</span>
                )}
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="p-4 bg-bg-secondary border border-border-default rounded">
                  <div className="text-sm text-text-muted mb-1">Status</div>
                  <div className="text-text-primary capitalize">
                    <span
                      className={`inline-block w-2 h-2 rounded-full mr-2 ${
                        project.status === "active"
                          ? "bg-green-500"
                          : project.status === "inactive"
                            ? "bg-yellow-500"
                            : "bg-gray-500"
                      }`}
                    />
                    {project.status}
                  </div>
                </div>
                <div className="p-4 bg-bg-secondary border border-border-default rounded">
                  <div className="text-sm text-text-muted mb-1">Created</div>
                  <div className="text-text-primary">
                    {new Date(project.createdAt).toLocaleDateString()}
                  </div>
                </div>
              </div>

              <div className="pt-6 border-t border-border-subtle flex gap-3">
                <button
                  onClick={() => setEditing(true)}
                  className="px-4 py-2 bg-brand text-white rounded hover:bg-red-700 transition-colors"
                >
                  Edit Project
                </button>
                <button
                  onClick={handleDelete}
                  disabled={deleting}
                  className="px-4 py-2 border border-red-600 text-red-500 rounded hover:bg-red-900/20 transition-colors disabled:opacity-50"
                >
                  {deleting ? "Deleting..." : "Delete Project"}
                </button>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

interface RightSidebarProps {
  project: Project;
  selectedDrone: DroneRegistration | null;
  onSelectDrone: (drone: DroneRegistration) => void;
  onOpenChatSession: (sessionId: string) => void;
}

function RightSidebar({
  project,
  selectedDrone,
  onSelectDrone,
  onOpenChatSession,
}: RightSidebarProps) {
  const [drones, setDrones] = useState<DroneRegistration[]>([]);
  const [chatSessions, setChatSessions] = useState<ChatSession[]>([]);
  const [providers, setProviders] = useState<AiProvider[]>([]);
  const [showNewChatModal, setShowNewChatModal] = useState(false);
  const [loading, setLoading] = useState(true);
  const [deletingSessions, setDeletingSessions] = useState<Set<string>>(
    new Set(),
  );

  useEffect(() => {
    loadData();
  }, [project]);

  const loadData = async () => {
    setLoading(true);
    try {
      // Load available drones (backend filters offline)
      const availableDrones = await droneApi.getAll();
      setDrones(availableDrones);

      // Load chat sessions for this project
      const sessions = await chatSessionApi.getAll(project._id);
      setChatSessions(sessions);

      // Load providers for new chat session
      const allProviders = await providerApi.getAll();
      setProviders(allProviders.sort((a, b) => a.name.localeCompare(b.name)));
    } catch (err) {
      console.error("Failed to load sidebar data", err);
    } finally {
      setLoading(false);
    }
  };

  const handleCreateChatSession = async (data: {
    providerId: string;
    selectedModel: string;
    mode: string;
    name?: string;
  }) => {
    try {
      const session = await chatSessionApi.create({
        projectId: project._id,
        providerId: data.providerId,
        selectedModel: data.selectedModel,
        mode: data.mode as any,
        name: data.name,
      });
      setShowNewChatModal(false);

      // Lock the drone to this session BEFORE navigating
      if (selectedDrone) {
        const success = await socketClient.requestSessionLock(
          selectedDrone,
          project,
          session,
        );
        if (!success) {
          console.error("Failed to lock drone session");
        }
      }

      onOpenChatSession(session._id);
      await loadData(); // Refresh list
    } catch (err) {
      console.error("Failed to create chat session", err);
    }
  };

  const handleDeleteChatSession = async (sessionId: string) => {
    if (!confirm("Delete this chat session?")) return;
    setDeletingSessions((prev) => new Set(prev).add(sessionId));
    try {
      await chatSessionApi.delete(sessionId);
      await loadData();
    } catch (err) {
      console.error("Failed to delete chat session", err);
    } finally {
      setDeletingSessions((prev) => {
        const next = new Set(prev);
        next.delete(sessionId);
        return next;
      });
    }
  };

  return (
    <>
      <aside className="w-80 border-l border-border-subtle bg-bg-secondary flex flex-col overflow-hidden">
        {/* Available Drones Section - 40% of available space (excluding button row) */}
        <div
          className="flex flex-col min-h-0 flex-[2]"
          style={{ minHeight: 0 }}
        >
          <div className="p-3 border-b border-border-subtle flex-shrink-0">
            <h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
              Available Drones ({drones.length})
            </h3>
          </div>
          <div className="flex-1 overflow-y-auto p-2 space-y-2 min-h-0">
            {loading ? (
              <p className="text-sm text-text-muted p-2">Loading...</p>
            ) : drones.length === 0 ? (
              <div className="text-text-muted text-sm p-2">
                No available drones. Start a gadget-drone instance to begin
                working.
              </div>
            ) : (
              drones.map((drone) => (
                <div
                  key={drone._id}
                  className={`p-3 border rounded transition-colors ${
                    selectedDrone?._id === drone._id
                      ? "border-brand bg-bg-tertiary"
                      : "border-border-default bg-bg-tertiary hover:bg-bg-elevated"
                  }`}
                >
                  <div className="flex items-center justify-between mb-2">
                    <div className="flex items-center gap-2">
                      <div
                        className={`w-2 h-2 rounded-full ${
                          drone.status === "available"
                            ? "bg-green-500"
                            : drone.status === "busy"
                              ? "bg-yellow-500"
                              : "bg-gray-500"
                        }`}
                      />
                      <span className="font-mono text-sm font-medium">
                        {drone.hostname}
                      </span>
                    </div>
                    <button
                      onClick={() => onSelectDrone(drone)}
                      disabled={drone.status === "busy"}
                      className={`px-2 py-1 text-xs rounded ${
                        selectedDrone?._id === drone._id
                          ? "bg-brand text-white"
                          : drone.status === "busy"
                            ? "bg-bg-tertiary text-text-muted cursor-not-allowed"
                            : "border border-border-default hover:bg-bg-elevated"
                      }`}
                    >
                      {selectedDrone?._id === drone._id ? "Selected" : "Select"}
                    </button>
                  </div>
                  <div className="text-xs text-text-muted truncate">
                    {drone.workspaceDir}
                  </div>
                  <div className="text-xs text-text-muted mt-1">
                    Registered: {new Date(drone.createdAt).toLocaleDateString()}
                  </div>
                </div>
              ))
            )}
          </div>
        </div>

        {/* Chat Sessions Section - 60% of available space (excluding button row) */}
        <div
          className="flex flex-col min-h-0 flex-[3]"
          style={{ minHeight: 0 }}
        >
          <div className="p-3 border-b border-border-subtle flex-shrink-0 flex items-center justify-between">
            <h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
              Chat Sessions ({chatSessions.length})
            </h3>
          </div>
          <div className="flex-1 overflow-y-auto p-2 space-y-2 min-h-0">
            {loading ? (
              <p className="text-sm text-text-muted p-2">Loading...</p>
            ) : chatSessions.length === 0 ? (
              <div className="text-text-muted text-sm p-2">
                No chat sessions yet. Create a new session to start working.
              </div>
            ) : (
              chatSessions.map((session) => (
                <div
                  key={session._id}
                  className="p-3 border border-border-default rounded bg-bg-tertiary hover:bg-bg-elevated transition-colors cursor-pointer group relative"
                  onClick={() => onOpenChatSession(session._id)}
                >
                  <div className="font-medium text-text-primary text-sm mb-1">
                    {session.name}
                  </div>
                  <div className="text-xs text-text-muted flex items-center gap-2">
                    <span className="capitalize">{session.mode}</span>
                    <span>•</span>
                    <span className="truncate">{session.selectedModel}</span>
                  </div>
                  <div className="text-xs text-text-muted mt-1">
                    {new Date(session.createdAt).toLocaleDateString()}
                  </div>
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      handleDeleteChatSession(session._id);
                    }}
                    disabled={deletingSessions.has(session._id)}
                    className="absolute top-2 right-2 p-1.5 rounded opacity-0 group-hover:opacity-100 hover:bg-red-900/50 text-text-muted hover:text-red-400 transition-all disabled:opacity-50"
                    title="Delete session"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <polyline points="3 6 5 6 21 6"></polyline>
                      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                    </svg>
                  </button>
                </div>
              ))
            )}
          </div>
        </div>

        {/* New Chat Session Button - Fixed at bottom */}
        <div className="p-3 border-t border-border-subtle bg-bg-secondary flex-shrink-0">
          <button
            onClick={() => setShowNewChatModal(true)}
            disabled={!selectedDrone}
            className="w-full px-4 py-2.5 bg-brand text-white rounded hover:bg-red-700 transition-colors text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
            title={
              !selectedDrone
                ? "Select a drone first"
                : "Create new chat session"
            }
          >
            New Chat Session
          </button>
        </div>
      </aside>

      {/* New Chat Session Modal */}
      {showNewChatModal && (
        <NewChatSessionModal
          providers={providers}
          selectedDrone={selectedDrone}
          onCancel={() => setShowNewChatModal(false)}
          onCreate={handleCreateChatSession}
        />
      )}
    </>
  );
}

interface NewChatSessionModalProps {
  providers: AiProvider[];
  selectedDrone: DroneRegistration | null;
  onCancel: () => void;
  onCreate: (data: {
    providerId: string;
    selectedModel: string;
    mode: string;
    name?: string;
  }) => void;
}

function NewChatSessionModal({
  providers,
  selectedDrone,
  onCancel,
  onCreate,
}: NewChatSessionModalProps) {
  const [selectedProviderId, setSelectedProviderId] = useState("");
  const [selectedModel, setSelectedModel] = useState("");
  const [mode, setMode] = useState("build");
  const [name, setName] = useState("");
  const [creating, setCreating] = useState(false);

  const selectedProvider = providers.find((p) => p._id === selectedProviderId);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedProviderId || !selectedModel) {
      return;
    }

    setCreating(true);
    try {
      onCreate({
        providerId: selectedProviderId,
        selectedModel,
        mode,
        name: name || undefined,
      });
    } catch (err) {
      console.error("Failed to create chat session", err);
    } finally {
      setCreating(false);
    }
  };

  const affiliateHref = "https://gab.ai/?ref=c7182f6e";

  return (
    <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50">
      <div className="bg-bg-secondary border border-border-default rounded p-6 w-full max-w-2xl flex gap-6">
        <div className="w-48 flex-shrink-0 flex flex-col">
          <a
            href={affiliateHref}
            target="_blank"
            rel="noopener noreferrer"
            className="flex-shrink-0"
          >
            <img src={gabAiImage} alt="Gab AI" className="w-full rounded" />
          </a>
          <p className="flex-1 flex items-center justify-center text-center text-lg text-text-secondary px-1">
            Need big-brain inference for this session?
          </p>
          <p className="flex-1 flex items-center justify-center text-left text-sm text-text-secondary px-1">
            Sign up for Gab AI and get 250 credits to see if it's right for you!
          </p>
          <a
            href={affiliateHref}
            target="_blank"
            rel="noopener noreferrer"
            className="flex-shrink-0"
          >
            <button className="w-full px-4 py-2 border border-[#00d178] text-[#00d178] rounded hover:bg-[#00d178] hover:text-white text-sm font-medium transition-colors">
              Get Started
            </button>
          </a>
        </div>
        <div className="flex-1 border-l border-border-subtle pl-6">
          <h3 className="text-lg font-semibold mb-4">New Chat Session</h3>
          {selectedDrone && (
            <div className="mb-4 p-3 bg-bg-tertiary border border-border-default rounded">
              <div className="text-xs text-text-muted mb-1">Selected Drone</div>
              <div className="font-mono text-sm text-text-primary">
                {selectedDrone.hostname}
              </div>
              <div className="text-xs text-text-muted truncate">
                {selectedDrone.workspaceDir}
              </div>
            </div>
          )}
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="block text-sm text-text-secondary mb-1">
                Session Name (optional)
              </label>
              <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="w-full px-3 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary focus:border-brand focus:outline-none"
                placeholder="Auto-generated from first prompt"
              />
            </div>

            <div>
              <label className="block text-sm text-text-secondary mb-1">
                AI Provider *
              </label>
              <select
                value={selectedProviderId}
                onChange={(e) => {
                  setSelectedProviderId(e.target.value);
                  setSelectedModel("");
                }}
                className="w-full px-3 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary focus:border-brand focus:outline-none"
              >
                <option value="">Select a provider</option>
                {providers.map((provider) => (
                  <option key={provider._id} value={provider._id}>
                    {provider.name} ({provider.apiType})
                  </option>
                ))}
              </select>
            </div>

            {selectedProvider && (
              <div>
                <label className="block text-sm text-text-secondary mb-1">
                  Model *
                </label>
                <select
                  value={selectedModel}
                  onChange={(e) => setSelectedModel(e.target.value)}
                  className="w-full px-3 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary focus:border-brand focus:outline-none"
                  disabled={selectedProvider.models.length === 0}
                >
                  <option value="">Select a model</option>
                  {[...selectedProvider.models]
                    .sort((a, b) => a.name.localeCompare(b.name))
                    .map((model) => (
                      <option key={model.id} value={model.id}>
                        {model.name}{" "}
                        {model.parameterLabel
                          ? `(${model.parameterLabel})`
                          : ""}
                      </option>
                    ))}
                </select>
                {selectedProvider.models.length === 0 && (
                  <p className="text-xs text-text-muted mt-1">
                    No models discovered. Run `pnpm cli provider probe{" "}
                    {selectedProvider._id}` to discover models.
                  </p>
                )}
              </div>
            )}

            <div>
              <label className="block text-sm text-text-secondary mb-1">
                Mode
              </label>
              <select
                value={mode}
                onChange={(e) => setMode(e.target.value)}
                className="w-full px-3 py-2 bg-bg-tertiary border border-border-default rounded text-text-primary focus:border-brand focus:outline-none"
              >
                <option value="plan">Plan - Planning and brainstorming</option>
                <option value="build">Build - Building and coding</option>
                <option value="test">Test - Testing and debugging</option>
                <option value="ship">Ship - Finalizing and shipping</option>
                <option value="dev">Dev - Working on Gadget Code itself</option>
              </select>
            </div>

            <div className="flex gap-3 pt-4">
              <button
                type="submit"
                disabled={creating || !selectedProviderId || !selectedModel}
                className="px-4 py-2 bg-brand text-white rounded hover:bg-red-700 transition-colors disabled:opacity-50 flex-1"
              >
                {creating ? "Creating..." : "Create Session"}
              </button>
              <button
                type="button"
                onClick={onCancel}
                className="px-4 py-2 border border-border-default text-text-secondary rounded hover:bg-bg-tertiary transition-colors"
              >
                Cancel
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

export default function ProjectManager({ user }: ProjectManagerProps) {
  const navigate = useNavigate();
  const { slug } = useParams();
  const [projects, setProjects] = useState<Project[]>([]);
  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
  const [selectedDrone, setSelectedDrone] = useState<DroneRegistration | null>(
    null,
  );
  const [providers, setProviders] = useState<AiProvider[]>([]);
  const [loading, setLoading] = useState(true);
  const [showNewForm, setShowNewForm] = useState(false);
  const [showPullForm, setShowPullForm] = useState(false);

  useEffect(() => {
    loadProjects();
    loadProviders();
  }, []);

  useEffect(() => {
    if (slug && projects.length > 0) {
      const found = projects.find((p) => p.slug === slug);
      setSelectedProject(found || null);
    } else if (!slug) {
      setSelectedProject(null);
    }
  }, [slug, projects]);

  const loadProjects = async () => {
    try {
      const data = await projectApi.getAll();
      setProjects(data);
    } catch (err) {
      console.error("Failed to load projects", err);
    } finally {
      setLoading(false);
    }
  };

  const loadProviders = async () => {
    try {
      const data = await providerApi.getAll();
      setProviders(data.sort((a, b) => a.name.localeCompare(b.name)));
    } catch (err) {
      console.error("Failed to load providers", err);
    }
  };

  const handleSelectProject = (project: Project) => {
    navigate(`/projects/${project.slug}`);
  };

  const handleProjectCreated = () => {
    setShowNewForm(false);
    loadProjects();
  };

  const handleProjectPulled = (project: Project) => {
    setShowPullForm(false);
    loadProjects();
    navigate(`/projects/${project.slug}`);
  };

  const handleProjectDeleted = () => {
    setSelectedProject(null);
    loadProjects();
    navigate("/projects");
  };

  const handleProjectUpdated = () => {
    loadProjects();
  };

  const handleSelectDrone = (drone: DroneRegistration) => {
    setSelectedDrone(drone);
  };

  const handleOpenChatSession = async (sessionId: string) => {
    if (!selectedProject || !selectedDrone) return;

    try {
      const session = await chatSessionApi.get(sessionId);
      const success = await socketClient.requestSessionLock(
        selectedDrone,
        selectedProject,
        session,
      );
      if (!success) {
        console.error("Failed to lock drone session");
        return;
      }
      localStorage.setItem(
        "dtp_drone_registration",
        JSON.stringify(selectedDrone),
      );
      navigate(`/projects/${selectedProject._id}/chat-session/${sessionId}`);
    } catch (err) {
      console.error("Failed to open chat session", err);
    }
  };

  if (!user) {
    return (
      <div className="flex-1 flex items-center justify-center bg-bg-primary">
        <p className="text-text-muted">Please sign in to view projects.</p>
      </div>
    );
  }

  if (loading) {
    return (
      <div className="flex-1 flex items-center justify-center bg-bg-primary">
        <p className="text-text-muted">Loading projects...</p>
      </div>
    );
  }

  const showForm = showNewForm || showPullForm;

  return (
    <div className="flex-1 flex bg-bg-primary overflow-hidden">
      {/* Left Sidebar - Project List */}
      <aside className="w-64 border-r border-border-subtle bg-bg-secondary flex flex-col overflow-hidden">
        <div className="p-3 border-b border-border-subtle flex-shrink-0 space-y-2">
          <button
            onClick={() => {
              setShowNewForm(true);
              setShowPullForm(false);
            }}
            className="w-full px-3 py-2 bg-brand text-white rounded hover:bg-red-700 transition-colors text-sm font-medium"
          >
            New Project
          </button>
          <button
            onClick={() => {
              setShowPullForm(true);
              setShowNewForm(false);
            }}
            className="w-full px-3 py-2 border border-border-default text-text-secondary rounded hover:bg-bg-tertiary hover:text-text-primary transition-colors text-sm font-medium"
          >
            Pull Project
          </button>
        </div>
        <div className="flex-1 overflow-y-auto p-2">
          {showForm ? (
            <div className="p-2">
              <p className="text-sm text-text-muted mb-2">
                {showNewForm ? "Creating new project..." : "Pulling project..."}
              </p>
              <button
                onClick={() => {
                  setShowNewForm(false);
                  setShowPullForm(false);
                }}
                className="text-sm text-text-secondary hover:text-text-primary transition-colors"
              >
                ← Cancel
              </button>
            </div>
          ) : (
            <>
              <div className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-2 px-2">
                Projects ({projects.length})
              </div>
              {projects.length === 0 ? (
                <p className="text-sm text-text-muted px-2">No projects yet.</p>
              ) : (
                <div className="space-y-1">
                  {projects.map((project) => (
                    <button
                      key={project._id}
                      onClick={() => handleSelectProject(project)}
                      className={`w-full text-left px-2 py-1.5 text-sm rounded truncate transition-colors ${
                        selectedProject?.slug === project.slug
                          ? "bg-brand text-white"
                          : "text-text-secondary hover:bg-bg-tertiary hover:text-text-primary"
                      }`}
                    >
                      {project.name}
                    </button>
                  ))}
                </div>
              )}
            </>
          )}
        </div>
      </aside>

      {/* Main Content Area */}
      <div className="flex-1 flex overflow-hidden">
        {showNewForm ? (
          <div className="flex-1 overflow-y-auto p-6">
            <NewProjectForm
              onCancel={() => setShowNewForm(false)}
              onSuccess={handleProjectCreated}
            />
          </div>
        ) : showPullForm ? (
          <div className="flex-1 overflow-y-auto p-6">
            <PullProjectForm
              onCancel={() => setShowPullForm(false)}
              onSuccess={handleProjectPulled}
            />
          </div>
        ) : selectedProject ? (
          <>
            {/* Center - Project Inspector */}
            <ProjectInspector
              project={selectedProject}
              providers={providers}
              onDelete={handleProjectDeleted}
              onUpdate={handleProjectUpdated}
            />

            {/* Right Sidebar - Drones & Chat Sessions */}
            <RightSidebar
              project={selectedProject}
              selectedDrone={selectedDrone}
              onSelectDrone={handleSelectDrone}
              onOpenChatSession={handleOpenChatSession}
            />
          </>
        ) : (
          <div className="flex-1 flex items-center justify-center bg-bg-primary">
            <div className="text-center text-text-muted">
              <p className="mb-4">Select a project to view details</p>
              <p className="text-sm">or create a new project to get started</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
