"use client";

import { useState, useEffect, useCallback } from "react";
import { Plus, X, Save, ArrowLeft, User } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import {
  fetchProjectTasks,
  createTask,
  updateTask,
  fetchEmployeesForAssign,
  type TaskRow,
} from "@/lib/supabase/task-actions";
import PageSkeleton from "./PageSkeleton";

const COLUMNS = [
  { key: "todo", label: "To do", color: "bg-gray-100" },
  { key: "in_progress", label: "In progress", color: "bg-blue-100" },
  { key: "done", label: "Done", color: "bg-green-100" },
] as const;

const PRIORITY_COLORS: Record<string, string> = {
  low: "bg-gray-100 text-gray-600 border-gray-200",
  medium: "bg-blue-50 text-blue-700 border-blue-200",
  high: "bg-amber-50 text-amber-700 border-amber-200",
  urgent: "bg-red-50 text-red-700 border-red-200",
};

const AVATAR_COLORS = [
  "#1D9E75",
  "#534AB7",
  "#E07A5F",
  "#3D84A8",
  "#F2CC8F",
  "#81B29A",
  "#E07A5F",
  "#6C63FF",
];

function getInitials(first: string, last: string): string {
  return `${(first?.[0] || "")}${(last?.[0] || "")}`.toUpperCase();
}

function getAvatarColor(name: string): string {
  let hash = 0;
  for (let i = 0; i < name.length; i++) {
    hash = name.charCodeAt(i) + ((hash << 5) - hash);
  }
  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
}

function formatDate(d: string | null): string {
  if (!d) return "";
  return new Date(d).toLocaleDateString("en-AU", {
    day: "numeric",
    month: "short",
  });
}

function isOverdue(task: TaskRow): boolean {
  if (!task.due_date || task.status === "done") return false;
  return new Date(task.due_date) < new Date(new Date().toDateString());
}

interface EmployeeOption {
  id: string;
  first_name: string;
  last_name: string;
  email: string | null;
}

export default function TasksProjectPage({
  projectId,
  onBack,
}: {
  projectId: string;
  onBack: () => void;
}) {
  const [tasks, setTasks] = useState<TaskRow[]>([]);
  const [employees, setEmployees] = useState<EmployeeOption[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Inline add form state
  const [addColumn, setAddColumn] = useState<string | null>(null);
  const [addTitle, setAddTitle] = useState("");
  const [addDesc, setAddDesc] = useState("");
  const [addAssignee, setAddAssignee] = useState("");
  const [addDueDate, setAddDueDate] = useState("");
  const [addPriority, setAddPriority] = useState("medium");
  const [addSaving, setAddSaving] = useState(false);

  // Slide-over panel
  const [editTask, setEditTask] = useState<TaskRow | null>(null);
  const [editTitle, setEditTitle] = useState("");
  const [editDesc, setEditDesc] = useState("");
  const [editAssignee, setEditAssignee] = useState("");
  const [editDueDate, setEditDueDate] = useState("");
  const [editPriority, setEditPriority] = useState("");
  const [editStatus, setEditStatus] = useState("");
  const [editSaving, setEditSaving] = useState(false);

  useEffect(() => {
    let cancelled = false;
    Promise.all([fetchProjectTasks(projectId), fetchEmployeesForAssign()])
      .then(([t, e]) => {
        if (!cancelled) {
          setTasks(t);
          setEmployees(e);
        }
      })
      .catch((err) => {
        console.error("[TasksProject] Failed to load:", err);
        setError(err.message || "Failed to load tasks");
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [projectId]);

  const openAddForm = useCallback((col: string) => {
    setAddColumn(col);
    setAddTitle("");
    setAddDesc("");
    setAddAssignee("");
    setAddDueDate("");
    setAddPriority("medium");
  }, []);

  const closeAddForm = useCallback(() => {
    setAddColumn(null);
  }, []);

  const handleAddTask = async () => {
    if (!addTitle.trim() || !addColumn) return;
    setAddSaving(true);
    setError(null);
    const result = await createTask({
      project_id: projectId,
      title: addTitle.trim(),
      description: addDesc.trim() || undefined,
      assigned_to: addAssignee || undefined,
      due_date: addDueDate || undefined,
      priority: addPriority,
      status: addColumn,
    });
    setAddSaving(false);
    if (!result.success) {
      setError(result.error || "Failed to create task");
      return;
    }
    closeAddForm();
    const updated = await fetchProjectTasks(projectId);
    setTasks(updated);
  };

  const openEditPanel = useCallback((task: TaskRow) => {
    setEditTask(task);
    setEditTitle(task.title);
    setEditDesc(task.description || "");
    setEditAssignee(task.assigned_to || "");
    setEditDueDate(task.due_date || "");
    setEditPriority(task.priority);
    setEditStatus(task.status);
  }, []);

  const closeEditPanel = useCallback(() => {
    setEditTask(null);
  }, []);

  const handleSaveEdit = async () => {
    if (!editTask) return;
    setEditSaving(true);
    setError(null);
    const result = await updateTask(editTask.id, {
      title: editTitle.trim(),
      description: editDesc.trim() || undefined,
      assigned_to: editAssignee || undefined,
      due_date: editDueDate || undefined,
      priority: editPriority,
      status: editStatus,
    });
    setEditSaving(false);
    if (!result.success) {
      setError(result.error || "Failed to update task");
      return;
    }
    const updated = await fetchProjectTasks(projectId);
    setTasks(updated);
    closeEditPanel();
  };

  if (loading) return <PageSkeleton name="Project Tasks" />;

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
          {error}
          <button
            onClick={() => setError(null)}
            className="ml-2 font-medium underline cursor-pointer"
          >
            Dismiss
          </button>
        </div>
      )}

      {/* Header */}
      <div className="flex items-center gap-3">
        <Button
          variant="ghost"
          onClick={onBack}
          className="p-2 h-auto cursor-pointer"
        >
          <ArrowLeft className="w-4 h-4" />
        </Button>
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">
            Project Tasks
          </h1>
          <p className="text-gray-500 mt-1">Kanban board</p>
        </div>
      </div>

      {/* Kanban Columns */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {COLUMNS.map((col) => {
          const colTasks = tasks.filter((t) => t.status === col.key);
          const isAdding = addColumn === col.key;

          return (
            <div key={col.key} className="space-y-3">
              {/* Column header */}
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div className={`w-2.5 h-2.5 rounded-full ${col.color}`} />
                  <h3 className="text-sm font-semibold text-gray-700">
                    {col.label}
                  </h3>
                  <span className="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded-full">
                    {colTasks.length}
                  </span>
                </div>
                {!isAdding && (
                  <button
                    onClick={() => openAddForm(col.key)}
                    className="p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors cursor-pointer"
                  >
                    <Plus className="w-4 h-4" />
                  </button>
                )}
              </div>

              {/* Inline add form */}
              {isAdding && (
                <Card className="border border-teal-200 bg-teal-50/50 shadow-sm">
                  <CardContent className="p-3 space-y-2">
                    <input
                      value={addTitle}
                      onChange={(e) => setAddTitle(e.target.value)}
                      placeholder="Task title"
                      className="w-full border border-gray-200 rounded px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                      autoFocus
                    />
                    <textarea
                      value={addDesc}
                      onChange={(e) => setAddDesc(e.target.value)}
                      placeholder="Description (optional)"
                      rows={2}
                      className="w-full border border-gray-200 rounded px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] resize-none"
                    />
                    <select
                      value={addAssignee}
                      onChange={(e) => setAddAssignee(e.target.value)}
                      className="w-full border border-gray-200 rounded px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] appearance-none bg-white"
                    >
                      <option value="">Unassigned</option>
                      {employees.map((emp) => (
                        <option key={emp.id} value={emp.id}>
                          {emp.first_name} {emp.last_name}
                        </option>
                      ))}
                    </select>
                    <input
                      type="date"
                      value={addDueDate}
                      onChange={(e) => setAddDueDate(e.target.value)}
                      className="w-full border border-gray-200 rounded px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                    />
                    <select
                      value={addPriority}
                      onChange={(e) => setAddPriority(e.target.value)}
                      className="w-full border border-gray-200 rounded px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] appearance-none bg-white"
                    >
                      <option value="low">Low</option>
                      <option value="medium">Medium</option>
                      <option value="high">High</option>
                      <option value="urgent">Urgent</option>
                    </select>
                    <div className="flex gap-2">
                      <Button
                        size="sm"
                        onClick={handleAddTask}
                        disabled={addSaving || !addTitle.trim()}
                        className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white text-xs cursor-pointer"
                      >
                        {addSaving && (
                          <span className="w-3 h-3 border-2 border-white border-t-transparent rounded-full animate-spin mr-1" />
                        )}
                        Add
                      </Button>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={closeAddForm}
                        className="text-xs cursor-pointer"
                      >
                        Cancel
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              )}

              {/* Task cards */}
              <div className="space-y-2">
                {colTasks.map((task) => (
                  <Card
                    key={task.id}
                    className="border border-gray-200 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
                    onClick={() => openEditPanel(task)}
                  >
                    <CardContent className="p-3 space-y-2">
                      <div className="flex items-start justify-between gap-2">
                        <h4 className="text-sm font-medium text-gray-900 leading-snug">
                          {task.title}
                        </h4>
                        <Badge
                          className={`text-[10px] flex-shrink-0 ${
                            PRIORITY_COLORS[task.priority] ||
                            PRIORITY_COLORS.low
                          }`}
                        >
                          {task.priority}
                        </Badge>
                      </div>

                      <div className="flex items-center justify-between">
                        {/* Assignee avatar */}
                        {task.assignee ? (
                          <div
                            className="w-6 h-6 rounded-full flex items-center justify-center text-white text-[9px] font-bold"
                            style={{
                              backgroundColor: getAvatarColor(
                                `${task.assignee.first_name} ${task.assignee.last_name}`
                              ),
                            }}
                            title={`${task.assignee.first_name} ${task.assignee.last_name}`}
                          >
                            {getInitials(
                              task.assignee.first_name,
                              task.assignee.last_name
                            )}
                          </div>
                        ) : (
                          <div className="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center text-gray-400">
                            <User className="w-3 h-3" />
                          </div>
                        )}

                        {/* Due date */}
                        {task.due_date && (
                          <span
                            className={`text-[10px] ${
                              isOverdue(task)
                                ? "text-red-500 font-medium"
                                : "text-gray-400"
                            }`}
                          >
                            {formatDate(task.due_date)}
                          </span>
                        )}
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          );
        })}
      </div>

      {/* ── Slide-over Edit Panel ────────────────────────────── */}
      {editTask && (
        <>
          {/* Backdrop */}
          <div
            className="fixed inset-0 bg-black/20 z-40"
            onClick={closeEditPanel}
          />
          {/* Panel */}
          <div className="fixed right-0 top-0 h-full w-full max-w-md bg-white shadow-2xl z-50 overflow-y-auto">
            <div className="p-6 space-y-5">
              {/* Panel header */}
              <div className="flex items-center justify-between">
                <h2 className="text-lg font-semibold text-gray-900">
                  Edit Task
                </h2>
                <button
                  onClick={closeEditPanel}
                  className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors cursor-pointer"
                >
                  <X className="w-4 h-4" />
                </button>
              </div>

              <div className="space-y-4">
                {/* Title */}
                <div>
                  <label className="block text-xs font-medium text-gray-500 mb-1">
                    Title
                  </label>
                  <input
                    value={editTitle}
                    onChange={(e) => setEditTitle(e.target.value)}
                    className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                  />
                </div>

                {/* Description */}
                <div>
                  <label className="block text-xs font-medium text-gray-500 mb-1">
                    Description
                  </label>
                  <textarea
                    value={editDesc}
                    onChange={(e) => setEditDesc(e.target.value)}
                    rows={3}
                    className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] resize-none"
                  />
                </div>

                {/* Assignee */}
                <div>
                  <label className="block text-xs font-medium text-gray-500 mb-1">
                    Assignee
                  </label>
                  <select
                    value={editAssignee}
                    onChange={(e) => setEditAssignee(e.target.value)}
                    className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] appearance-none bg-white"
                  >
                    <option value="">Unassigned</option>
                    {employees.map((emp) => (
                      <option key={emp.id} value={emp.id}>
                        {emp.first_name} {emp.last_name}
                      </option>
                    ))}
                  </select>
                </div>

                {/* Due date */}
                <div>
                  <label className="block text-xs font-medium text-gray-500 mb-1">
                    Due date
                  </label>
                  <input
                    type="date"
                    value={editDueDate}
                    onChange={(e) => setEditDueDate(e.target.value)}
                    className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                  />
                </div>

                {/* Priority */}
                <div>
                  <label className="block text-xs font-medium text-gray-500 mb-1">
                    Priority
                  </label>
                  <select
                    value={editPriority}
                    onChange={(e) => setEditPriority(e.target.value)}
                    className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] appearance-none bg-white"
                  >
                    <option value="low">Low</option>
                    <option value="medium">Medium</option>
                    <option value="high">High</option>
                    <option value="urgent">Urgent</option>
                  </select>
                </div>

                {/* Status */}
                <div>
                  <label className="block text-xs font-medium text-gray-500 mb-1">
                    Status
                  </label>
                  <select
                    value={editStatus}
                    onChange={(e) => setEditStatus(e.target.value)}
                    className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] appearance-none bg-white"
                  >
                    {COLUMNS.map((col) => (
                      <option key={col.key} value={col.key}>
                        {col.label}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              {/* Save button */}
              <div className="flex gap-2 pt-2">
                <Button
                  onClick={handleSaveEdit}
                  disabled={editSaving || !editTitle.trim()}
                  className="flex-1 bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer"
                >
                  {editSaving && (
                    <span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                  )}
                  <Save className="w-4 h-4" />
                  {editSaving ? "Saving..." : "Save"}
                </Button>
                <Button
                  variant="outline"
                  onClick={closeEditPanel}
                  className="cursor-pointer"
                >
                  Cancel
                </Button>
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  );
}