"use client";

import { useState, useEffect, useCallback } from "react";
import {
  Plus,
  FolderOpen,
  CheckCircle2,
  AlertCircle,
  Clock,
  ChevronRight,
  ListTodo,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import {
  fetchProjects,
  createProject,
  fetchMyTasks,
  type ProjectRow,
  type TaskRow,
} from "@/lib/supabase/task-actions";
import PageSkeleton from "./PageSkeleton";

type TabKey = "projects" | "my-tasks";

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 PROJECT_STATUS_COLORS: Record<string, string> = {
  active: "bg-teal-50 text-teal-700 border-teal-200",
  archived: "bg-gray-100 text-gray-600 border-gray-200",
  completed: "bg-green-50 text-green-700 border-green-200",
};

export default function TasksPage({
  onOpenProject,
}: {
  onOpenProject: (projectId: string) => void;
}) {
  const [tab, setTab] = useState<TabKey>("projects");
  const [projects, setProjects] = useState<ProjectRow[]>([]);
  const [myTasks, setMyTasks] = useState<TaskRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [showNewProject, setShowNewProject] = useState(false);
  const [newName, setNewName] = useState("");
  const [newDesc, setNewDesc] = useState("");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    Promise.all([fetchProjects(), fetchMyTasks()])
      .then(([p, t]) => {
        if (!cancelled) {
          setProjects(p);
          setMyTasks(t);
        }
      })
      .catch((err) => {
        console.error("[Tasks] Failed to load:", err);
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, []);

  const handleCreateProject = async () => {
    setError(null);
    if (!newName.trim()) {
      setError("Project name is required");
      return;
    }
    setSaving(true);
    const result = await createProject(newName.trim(), newDesc.trim() || undefined);
    setSaving(false);
    if (!result.success) {
      setError(result.error || "Failed to create project");
      return;
    }
    setNewName("");
    setNewDesc("");
    setShowNewProject(false);
    // Refresh projects
    const updated = await fetchProjects();
    setProjects(updated);
  };

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

  const formatDate = (d: string | null) => {
    if (!d) return "No due date";
    return new Date(d).toLocaleDateString("en-AU", {
      day: "numeric",
      month: "short",
      year: "numeric",
    });
  };

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

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Tasks</h1>
          <p className="text-gray-500 mt-1">Manage projects and your personal task list</p>
        </div>
      </div>

      {/* Tabs */}
      <div className="flex gap-1 bg-gray-100 rounded-lg p-1 w-fit">
        <button
          onClick={() => setTab("projects")}
          className={`px-4 py-2 text-sm font-medium rounded-md transition-all cursor-pointer ${
            tab === "projects"
              ? "bg-white text-gray-900 shadow-sm"
              : "text-gray-500 hover:text-gray-700"
          }`}
        >
          Projects
        </button>
        <button
          onClick={() => setTab("my-tasks")}
          className={`px-4 py-2 text-sm font-medium rounded-md transition-all cursor-pointer ${
            tab === "my-tasks"
              ? "bg-white text-gray-900 shadow-sm"
              : "text-gray-500 hover:text-gray-700"
          }`}
        >
          My Tasks
          {myTasks.length > 0 && (
            <span className="ml-1.5 inline-flex items-center justify-center w-5 h-5 text-[10px] font-bold rounded-full bg-teal-100 text-teal-700">
              {myTasks.length}
            </span>
          )}
        </button>
      </div>

      {/* ── Projects Tab ─────────────────────────────────────── */}
      {tab === "projects" && (
        <>
          {/* New Project Modal */}
          {showNewProject && (
            <Card className="border-0 shadow-sm border-l-4 border-l-[#1D9E75]">
              <CardContent className="p-6 space-y-4">
                <h3 className="text-sm font-semibold text-gray-900">New project</h3>
                {error && (
                  <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
                    {error}
                  </div>
                )}
                <input
                  value={newName}
                  onChange={(e) => setNewName(e.target.value)}
                  placeholder="Project name"
                  className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                />
                <textarea
                  value={newDesc}
                  onChange={(e) => setNewDesc(e.target.value)}
                  placeholder="Description (optional)"
                  rows={3}
                  className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] resize-none"
                />
                <div className="flex gap-2 justify-end">
                  <Button
                    variant="outline"
                    onClick={() => {
                      setShowNewProject(false);
                      setNewName("");
                      setNewDesc("");
                      setError(null);
                    }}
                    className="cursor-pointer"
                  >
                    Cancel
                  </Button>
                  <Button
                    onClick={handleCreateProject}
                    disabled={saving}
                    className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer"
                  >
                    {saving && (
                      <span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                    )}
                    {saving ? "Creating..." : "Create"}
                  </Button>
                </div>
              </CardContent>
            </Card>
          )}

          {/* Projects Grid */}
          <div className="flex items-center justify-between">
            <h2 className="text-lg font-semibold text-gray-900">
              Projects ({projects.length})
            </h2>
            {!showNewProject && (
              <Button
                onClick={() => setShowNewProject(true)}
                className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer"
              >
                <Plus className="w-4 h-4" />
                New project
              </Button>
            )}
          </div>

          {projects.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-16 text-center bg-white rounded-lg border border-gray-200">
              <FolderOpen className="w-8 h-8 text-gray-300 mb-3" />
              <p className="text-sm text-gray-500 font-medium">No projects yet</p>
              <p className="text-xs text-gray-400 mt-1">Create your first project to get started</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
              {projects.map((p) => {
                const taskCount = p.tasks?.[0]?.count ?? 0;
                return (
                  <Card
                    key={p.id}
                    className="border border-gray-200 shadow-sm hover:shadow-md transition-shadow cursor-pointer group"
                    onClick={() => onOpenProject(p.id)}
                  >
                    <CardContent className="p-5">
                      <div className="flex items-start justify-between gap-2 mb-3">
                        <h3 className="text-sm font-semibold text-gray-900 group-hover:text-[#1D9E75] transition-colors truncate">
                          {p.name}
                        </h3>
                        <Badge
                          className={`text-[10px] ${PROJECT_STATUS_COLORS[p.status] || PROJECT_STATUS_COLORS.active}`}
                        >
                          {p.status}
                        </Badge>
                      </div>
                      {p.description && (
                        <p className="text-xs text-gray-500 mb-3 line-clamp-2">{p.description}</p>
                      )}
                      <div className="flex items-center justify-between text-xs text-gray-400">
                        <div className="flex items-center gap-1">
                          <ListTodo className="w-3.5 h-3.5" />
                          <span>
                            {taskCount} task{taskCount !== 1 ? "s" : ""}
                          </span>
                        </div>
                        <div className="flex items-center gap-1">
                          {p.creator?.full_name && (
                            <span>by {p.creator.full_name}</span>
                          )}
                          <ChevronRight className="w-3.5 h-3.5 text-gray-300 group-hover:text-[#1D9E75] transition-colors" />
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                );
              })}
            </div>
          )}
        </>
      )}

      {/* ── My Tasks Tab ─────────────────────────────────────── */}
      {tab === "my-tasks" && (
        <>
          <h2 className="text-lg font-semibold text-gray-900">
            My Tasks ({myTasks.length})
          </h2>

          {myTasks.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-16 text-center bg-white rounded-lg border border-gray-200">
              <CheckCircle2 className="w-8 h-8 text-gray-300 mb-3" />
              <p className="text-sm text-gray-500 font-medium">No tasks assigned</p>
              <p className="text-xs text-gray-400 mt-1">Tasks assigned to you will appear here</p>
            </div>
          ) : (
            <div className="space-y-3">
              {myTasks.map((task) => {
                const overdue = isOverdue(task);
                return (
                  <Card
                    key={task.id}
                    className={`border shadow-sm ${
                      overdue
                        ? "border-red-300 bg-red-50/30"
                        : "border-gray-200"
                    }`}
                  >
                    <CardContent className="p-4">
                      <div className="flex items-start gap-3">
                        {/* Status icon */}
                        <div className="mt-0.5 flex-shrink-0">
                          {task.status === "done" ? (
                            <CheckCircle2 className="w-4 h-4 text-green-500" />
                          ) : overdue ? (
                            <AlertCircle className="w-4 h-4 text-red-500" />
                          ) : (
                            <Clock className="w-4 h-4 text-gray-400" />
                          )}
                        </div>

                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2 mb-1">
                            <h3 className="text-sm font-semibold text-gray-900 truncate">
                              {task.title}
                            </h3>
                            <Badge
                              className={`text-[10px] ${PRIORITY_COLORS[task.priority] || PRIORITY_COLORS.low}`}
                            >
                              {task.priority}
                            </Badge>
                            {task.status !== "done" && (
                              <Badge className="text-[10px] bg-gray-100 text-gray-600 border-gray-200">
                                {task.status}
                              </Badge>
                            )}
                          </div>
                          <div className="flex items-center gap-3 text-xs text-gray-400">
                            {task.project?.name && (
                              <span>{task.project.name}</span>
                            )}
                            <span
                              className={
                                overdue ? "text-red-500 font-medium" : ""
                              }
                            >
                              Due: {formatDate(task.due_date)}
                            </span>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                );
              })}
            </div>
          )}
        </>
      )}
    </div>
  );
}