import { useMemo, useState } from "react";
import { useParams, useSearchParams } from "react-router-dom";
import { toast } from "sonner";
import { AgentProfile } from "../components/AgentProfile";
import { FilterBar } from "../components/FilterBar";
import { AgentAvatarOverlay } from "../components/FloatingAvatar";
import { KanbanColumn } from "../components/KanbanColumn";
import { TaskChatDrawer } from "../components/TaskChatDrawer";
import { TaskDetail } from "../components/TaskDetail";
import { TaskSchemaModal } from "../components/TaskSchemaModal";
import { Button } from "../components/ui/button";
import { useAgentPresence } from "../hooks/useAgentPresence";
import { useBoard } from "../hooks/useBoard";
import { api } from "../lib/api";

const TASK_STATUSES = ["backlog", "todo", "in_progress", "in_review", "done", "cancelled"] as const;

const TASK_STATUS_LABELS: Record<string, string> = {
  backlog: "Backlog",
  todo: "Todo",
  in_progress: "In Progress",
  in_review: "In Review",
  done: "Done",
  cancelled: "Cancelled",
};

export function BoardPage() {
  const { boardId, projectId: routeProjectId } = useParams<{ boardId?: string; projectId?: string }>();
  const [searchParams] = useSearchParams();
  const targetId = routeProjectId || boardId;
  const { board, loading, error, refresh } = useBoard(targetId, !!routeProjectId);
  const projectId = routeProjectId || searchParams.get("projectId") || (board as any)?.project_id || undefined;
  const avatars = useAgentPresence(board?.id || targetId);
  const [selectedTask, setSelectedTask] = useState<string | null>(null);
  const [selectedAgent, setSelectedAgent] = useState<string | null>(null);
  const [chatTask, setChatTask] = useState<any | null>(null);
  const [activeRepository, setActiveRepository] = useState<string | null>(null);
  const [activeLabel, setActiveLabel] = useState<string | null>(null);
  const [mobileTab, setMobileTab] = useState(0);
  const [viewMode, _setViewMode] = useState<"board" | "list" | "timeline" | "due">("board");
  const [showFilterBar, setShowFilterBar] = useState(false);

  const repositories = useMemo(() => {
    if (!board?.tasks) return [];
    const map = new Map<string, string>();
    for (const task of board.tasks) {
      if (task.repository_id && task.repository_name) {
        map.set(task.repository_id, task.repository_name);
      }
    }
    return Array.from(map.entries())
      .map(([id, name]) => ({ id, name }))
      .sort((a, b) => a.name.localeCompare(b.name));
  }, [board]);

  const filteredTasks = useMemo(() => {
    if (!board?.tasks) return [];
    return board.tasks.filter((t: any) => {
      if (activeRepository && t.repository_id !== activeRepository) return false;
      if (activeLabel && !t.labels?.includes(activeLabel)) return false;
      return true;
    });
  }, [board, activeRepository, activeLabel]);

  const handleTaskDrop = async (taskId: string, newStatus: string) => {
    try {
      await api.tasks.update(taskId, { status: newStatus });
      toast.success(`Đã chuyển Task sang ${TASK_STATUS_LABELS[newStatus] || newStatus}`);
      await refresh();
    } catch (err: any) {
      console.error("Failed to move task", err);
      toast.error(err.message || "Không thể di chuyển Task");
    }
  };

  const columns = useMemo(() => {
    return TASK_STATUSES.map((status) => ({
      status,
      name: TASK_STATUS_LABELS[status],
      tasks: filteredTasks.filter((t: any) => t.status === status),
    }));
  }, [filteredTasks]);

  if (error === "NOT_AUTHENTICATED") {
    window.location.href = "/auth";
    return null;
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-surface-primary">
        <div className="grid gap-0 p-4" style={{ gridTemplateColumns: `repeat(6, minmax(0, 1fr))` }}>
          {[0, 1, 2, 3, 4, 5].map((i) => (
            <div key={i} className="p-4 space-y-3">
              <div className="h-4 w-20 bg-surface-tertiary rounded animate-pulse" />
              {[0, 1].map((j) => (
                <div key={j} className="h-20 bg-surface-secondary border border-border rounded-lg animate-pulse" />
              ))}
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (!board) {
    return (
      <div className="min-h-screen bg-surface-primary">
        <div className="flex items-center justify-center min-h-[60vh] text-content-tertiary">Board not found</div>
      </div>
    );
  }

  return (
    <div className="h-full flex-1 overflow-hidden bg-surface-primary flex flex-col relative">
      <div className="relative z-10 flex flex-col h-full overflow-hidden">
        {/* Top Board Action & Title Bar */}
        {!routeProjectId && (
          <div className="px-4 py-2 bg-surface-secondary/90 border-b border-border flex items-center justify-between gap-4 shrink-0">
            <div className="flex items-center gap-2">
              <h2 className="text-base font-bold text-content-primary">📋 {board.name}</h2>
            </div>
          </div>
        )}

        {/* Compact Action Bar */}
        <div className="px-4 py-1.5 bg-surface-secondary/60 border-b border-border flex items-center justify-between gap-3 shrink-0">
          <div className="flex items-center gap-2">
            <button
              type="button"
              onClick={() => setShowFilterBar(!showFilterBar)}
              className={`px-3 py-1.5 text-xs font-medium rounded-lg border border-border transition-colors ${
                showFilterBar ? "bg-accent/10 text-accent border-accent/20" : "bg-surface-primary text-content-secondary hover:text-content-primary"
              }`}
            >
              Filters
            </button>
          </div>
          <div className="flex items-center gap-2">
            <TaskSchemaModal
              boardId={board.id}
              projectId={projectId}
              onTaskCreated={() => refresh()}
              trigger={
                <Button
                  size="sm"
                  className="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold text-xs px-3.5 py-1.5 rounded-lg shadow-xs transition-colors h-7"
                >
                  + Add Task
                </Button>
              }
            />
          </div>
        </div>

        {/* Collapsible Filter Bar */}
        {showFilterBar && (
          <FilterBar
            repositories={repositories}
            labels={board.labels ?? []}
            activeRepository={activeRepository}
            activeLabel={activeLabel}
            onRepositoryChange={setActiveRepository}
            onLabelChange={setActiveLabel}
          />
        )}

        {error && (
          <div className="mx-4 mt-2 px-4 py-2 bg-error/10 border-l-2 border-error text-error text-sm rounded">
            {error}
            <button onClick={() => refresh()} className="ml-2 underline">
              Retry
            </button>
          </div>
        )}

        {/* View Switcher Output */}
        {viewMode === "board" && (
          <>
            {/* Mobile tab switcher */}
            <div className="flex md:hidden border-b border-border">
              {columns.map((col, i) => (
                <button
                  key={col.status}
                  onClick={() => setMobileTab(i)}
                  className={`flex-1 py-2.5 text-xs font-semibold uppercase tracking-wide text-center transition-colors ${
                    mobileTab === i ? "text-accent border-b-2 border-accent" : "text-content-tertiary"
                  }`}
                >
                  {col.name} ({col.tasks.length})
                </button>
              ))}
            </div>

            {/* Desktop: 5-column grid */}
            <div
              className="hidden md:grid flex-1 overflow-hidden p-3 gap-3"
              style={{ gridTemplateColumns: `repeat(${columns.length}, minmax(0, 1fr))` }}
            >
              {columns.map((col) => (
                <KanbanColumn
                  key={col.status}
                  column={col}
                  labels={board.labels ?? []}
                  onTaskClick={setSelectedTask}
                  onAgentClick={setChatTask}
                  onTaskDrop={handleTaskDrop}
                  boardId={board.id}
                  projectId={projectId}
                  onTaskCreated={refresh}
                />
              ))}
            </div>

            {/* Mobile: single column based on tab */}
            <div className="md:hidden flex-1 overflow-hidden">
              {columns
                .filter((_, i) => i === mobileTab)
                .map((col) => (
                  <KanbanColumn
                    key={col.status}
                    column={col}
                    labels={board.labels ?? []}
                    onTaskClick={setSelectedTask}
                    onAgentClick={setChatTask}
                    onTaskDrop={handleTaskDrop}
                    boardId={board.id}
                    projectId={projectId}
                    onTaskCreated={refresh}
                  />
                ))}
            </div>
          </>
        )}

        <AgentAvatarOverlay avatars={avatars} />

        {selectedTask && (
          <TaskDetail
            taskId={selectedTask}
            labels={board.labels ?? []}
            onClose={() => setSelectedTask(null)}
            onRefresh={refresh}
            onAgentClick={(agentId) => setSelectedAgent(agentId)}
          />
        )}

        {chatTask && (
          <TaskChatDrawer
            open
            onOpenChange={(open) => {
              if (!open) setChatTask(null);
            }}
            taskId={chatTask.id}
            task={chatTask}
          />
        )}

        {selectedAgent && (
          <AgentProfile
            agentId={selectedAgent}
            onClose={() => setSelectedAgent(null)}
            onTaskClick={(taskId) => {
              setSelectedAgent(null);
              setSelectedTask(taskId);
            }}
          />
        )}
      </div>
    </div>
  );
}