"use client";

import { CheckSquare, FolderKanban } from "lucide-react";
import { cn } from "@/lib/utils";
import type {
  AchievementProjectOption,
  AchievementTaskOption,
} from "@/hooks/use-achievements";

interface LinkedEntityPickerProps {
  projectIds: string[];
  projects: AchievementProjectOption[];
  setProjectIds: (value: string[]) => void;
  setTaskIds: (value: string[]) => void;
  taskIds: string[];
  tasks: AchievementTaskOption[];
}

function toggleId(current: string[], id: string) {
  return current.includes(id)
    ? current.filter((item) => item !== id)
    : [...current, id];
}

export function LinkedEntityPicker({
  projectIds,
  projects,
  setProjectIds,
  setTaskIds,
  taskIds,
  tasks,
}: LinkedEntityPickerProps) {
  return (
    <div className="grid gap-4 lg:grid-cols-2">
      <div className="rounded-2xl border border-white/[0.08] bg-white/[0.02] p-4">
        <div className="mb-3 flex items-center gap-2">
          <CheckSquare className="h-4 w-4 text-sky-300" />
          <p className="text-sm font-semibold text-white">Linked tasks</p>
        </div>
        <div className="space-y-2">
          {tasks.length === 0 ? (
            <p className="text-xs text-white/35">No tasks available in this workspace yet.</p>
          ) : (
            tasks.map((task) => {
              const selected = taskIds.includes(task.id);
              return (
                <button
                  key={task.id}
                  type="button"
                  onClick={() => setTaskIds(toggleId(taskIds, task.id))}
                  className={cn(
                    "flex w-full items-center justify-between gap-3 rounded-xl border px-3 py-3 text-left transition-all",
                    selected
                      ? "border-sky-400/20 bg-sky-500/10 text-white"
                      : "border-white/[0.06] bg-white/[0.02] text-white/70 hover:bg-white/[0.05]",
                  )}
                >
                  <span className="min-w-0">
                    <span className="block truncate text-sm font-medium">{task.title}</span>
                    <span className="mt-1 block text-[11px] uppercase tracking-[0.16em] text-white/30">
                      {task.status.replace("_", " ")}
                    </span>
                  </span>
                  <span
                    className={cn(
                      "h-3 w-3 rounded-full",
                      selected ? "bg-sky-300" : "bg-white/20",
                    )}
                  />
                </button>
              );
            })
          )}
        </div>
      </div>

      <div className="rounded-2xl border border-white/[0.08] bg-white/[0.02] p-4">
        <div className="mb-3 flex items-center gap-2">
          <FolderKanban className="h-4 w-4 text-violet-300" />
          <p className="text-sm font-semibold text-white">Linked projects</p>
        </div>
        <div className="space-y-2">
          {projects.length === 0 ? (
            <p className="text-xs text-white/35">No projects available in this workspace yet.</p>
          ) : (
            projects.map((project) => {
              const selected = projectIds.includes(project.id);
              return (
                <button
                  key={project.id}
                  type="button"
                  onClick={() => setProjectIds(toggleId(projectIds, project.id))}
                  className={cn(
                    "flex w-full items-center justify-between gap-3 rounded-xl border px-3 py-3 text-left transition-all",
                    selected
                      ? "border-violet-400/20 bg-violet-500/10 text-white"
                      : "border-white/[0.06] bg-white/[0.02] text-white/70 hover:bg-white/[0.05]",
                  )}
                >
                  <span className="flex min-w-0 items-center gap-2">
                    <span
                      className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-sm"
                      style={{ backgroundColor: `${project.color}26` }}
                    >
                      {project.icon}
                    </span>
                    <span className="truncate text-sm font-medium">{project.name}</span>
                  </span>
                  <span
                    className={cn(
                      "h-3 w-3 rounded-full",
                      selected ? "bg-violet-300" : "bg-white/20",
                    )}
                  />
                </button>
              );
            })
          )}
        </div>
      </div>
    </div>
  );
}