"use client";

import { useState, useEffect, useCallback } from "react";
import type { ReactElement } from "react";
import { useParams, useRouter } from "next/navigation";
import { ArrowLeft } from "lucide-react";

import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
import { fetchProject, type ProjectDetail } from "@/lib/api/projects";
import { useWorkspaceId } from "@/lib/hooks";

interface BadgeStyle {
  label: string;
  bg: string;
  color: string;
}

interface StatusBadgeProps {
  style: BadgeStyle;
}

interface MetaItemProps {
  label: string;
  value: string;
}

function getProjectStatusStyle(status: string): BadgeStyle {
  switch (status) {
    case "PLANNING":
      return { label: "Planning", bg: "rgba(47,128,255,0.15)", color: "var(--primary)" };
    case "ACTIVE":
      return { label: "Active", bg: "rgba(20,184,166,0.15)", color: "var(--success)" };
    case "PAUSED":
      return { label: "Paused", bg: "rgba(245,158,11,0.15)", color: "var(--warn)" };
    case "COMPLETED":
      return { label: "Completed", bg: "rgba(139,92,246,0.15)", color: "var(--purple)" };
    case "ARCHIVED":
      return { label: "Archived", bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
    default:
      return { label: status, bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
  }
}

function getPriorityStyle(priority: string | null | undefined): BadgeStyle {
  switch (priority) {
    case "HIGH":
      return { label: "High", bg: "rgba(229,72,77,0.15)", color: "var(--danger)" };
    case "MEDIUM":
      return { label: "Medium", bg: "rgba(245,158,11,0.15)", color: "var(--warn)" };
    case "LOW":
      return { label: "Low", bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
    default:
      return { label: "Unspecified", bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
  }
}

function getTaskStatusStyle(status: string): BadgeStyle {
  switch (status) {
    case "NOT_STARTED":
      return { label: "Not Started", bg: "rgba(47,128,255,0.15)", color: "var(--primary)" };
    case "IN_PROGRESS":
      return { label: "In Progress", bg: "rgba(245,158,11,0.15)", color: "var(--warn)" };
    case "PAUSED":
      return { label: "Paused", bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
    case "COMPLETED":
      return { label: "Completed", bg: "rgba(20,184,166,0.15)", color: "var(--success)" };
    case "ARCHIVED":
      return { label: "Archived", bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
    default:
      return { label: status, bg: "rgba(143,157,183,0.15)", color: "var(--muted)" };
  }
}

function formatDate(iso: string | null | undefined): string {
  if (!iso) return "Not set";

  try {
    return new Date(iso).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
    });
  } catch {
    return iso;
  }
}

function formatDateTime(iso: string | null | undefined): string {
  if (!iso) return "Not set";

  try {
    return new Date(iso).toLocaleString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
      hour: "numeric",
      minute: "2-digit",
    });
  } catch {
    return iso;
  }
}

function toFriendlyErrorMessage(error: unknown): string {
  const fallback = "We had trouble loading this project. Please try again when you're ready.";

  if (!(error instanceof Error)) {
    return fallback;
  }

  const message = error.message.trim();
  if (message.toLowerCase().includes("not found")) {
    return "Project not found. It may have been deleted or you may not have access to it.";
  }

  return message || fallback;
}

function StatusBadge({ style: statusStyle }: StatusBadgeProps): ReactElement {
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        padding: "2px 10px",
        borderRadius: "var(--r)",
        background: statusStyle.bg,
        color: statusStyle.color,
        fontSize: "0.75rem",
        fontWeight: 500,
      }}
    >
      {statusStyle.label}
    </span>
  );
}

function MetaItem({ label, value }: MetaItemProps): ReactElement {
  return (
    <div
      style={{
        background: "var(--bg)",
        border: "1px solid var(--border)",
        borderRadius: "var(--r)",
        padding: "10px 12px",
      }}
    >
      <p style={{ margin: "0 0 4px", fontSize: "0.75rem", color: "var(--muted)" }}>{label}</p>
      <p style={{ margin: 0, fontSize: "0.85rem", color: "var(--text)" }}>{value}</p>
    </div>
  );
}

export default function ProjectDetailPage(): ReactElement {
  const router = useRouter();
  const params = useParams<{ id: string | string[] }>();
  const workspaceId = useWorkspaceId();
  const rawProjectId = params.id;
  const projectId = Array.isArray(rawProjectId) ? (rawProjectId[0] ?? null) : rawProjectId;

  const [project, setProject] = useState<ProjectDetail | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const loadProject = useCallback(async (id: string, wsId: string): Promise<void> => {
    try {
      setIsLoading(true);
      setError(null);
      const data = await fetchProject(id, wsId);
      setProject(data);
    } catch (err: unknown) {
      console.error("[ProjectDetail] Failed to fetch project:", err);
      setProject(null);
      setError(toFriendlyErrorMessage(err));
    } finally {
      setIsLoading(false);
    }
  }, []);

  useEffect(() => {
    if (!projectId) {
      setProject(null);
      setError("The project link is invalid. Please return to the projects page.");
      setIsLoading(false);
      return;
    }

    if (!workspaceId) {
      setProject(null);
      setError("Select a workspace to view this project.");
      setIsLoading(false);
      return;
    }

    const id = projectId;
    const wsId = workspaceId;
    let cancelled = false;

    async function load(): Promise<void> {
      try {
        setIsLoading(true);
        setError(null);
        const data = await fetchProject(id, wsId);
        if (!cancelled) {
          setProject(data);
        }
      } catch (err: unknown) {
        console.error("[ProjectDetail] Failed to fetch project:", err);
        if (!cancelled) {
          setProject(null);
          setError(toFriendlyErrorMessage(err));
        }
      } finally {
        if (!cancelled) {
          setIsLoading(false);
        }
      }
    }

    void load();

    return (): void => {
      cancelled = true;
    };
  }, [projectId, workspaceId]);

  function handleRetry(): void {
    if (!projectId || !workspaceId) return;
    void loadProject(projectId, workspaceId);
  }

  function handleBack(): void {
    router.push("/projects");
  }

  const projectStatus = project ? getProjectStatusStyle(project.status) : null;
  const projectPriority = project ? getPriorityStyle(project.priority) : null;
  const dueDate = project?.dueDate ?? project?.endDate;
  const creator =
    project?.creator.name && project.creator.name.trim().length > 0
      ? `${project.creator.name} (${project.creator.email})`
      : (project?.creator.email ?? "Unknown");

  return (
    <main className="container mx-auto px-4 py-8" style={{ maxWidth: 960 }}>
      <button
        onClick={handleBack}
        style={{
          display: "inline-flex",
          alignItems: "center",
          gap: 8,
          marginBottom: 20,
          padding: "8px 12px",
          borderRadius: "var(--r)",
          border: "1px solid var(--border)",
          background: "var(--surface)",
          color: "var(--text-2)",
          fontSize: "0.85rem",
          fontWeight: 500,
          cursor: "pointer",
        }}
      >
        <ArrowLeft size={16} />
        Back to projects
      </button>

      {isLoading ? (
        <div className="flex justify-center py-16">
          <MosaicSpinner label="Loading project..." />
        </div>
      ) : error !== null ? (
        <div
          style={{
            background: "var(--surface)",
            border: "1px solid var(--border)",
            borderRadius: "var(--r-lg)",
            padding: 32,
            textAlign: "center",
          }}
        >
          <p style={{ color: "var(--danger)", margin: "0 0 20px" }}>{error}</p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <button
              onClick={handleBack}
              style={{
                padding: "8px 16px",
                background: "transparent",
                border: "1px solid var(--border)",
                borderRadius: "var(--r)",
                color: "var(--text-2)",
                fontSize: "0.85rem",
                cursor: "pointer",
              }}
            >
              Back to projects
            </button>
            <button
              onClick={handleRetry}
              style={{
                padding: "8px 16px",
                background: "var(--danger)",
                border: "none",
                borderRadius: "var(--r)",
                color: "#fff",
                fontSize: "0.85rem",
                fontWeight: 500,
                cursor: "pointer",
              }}
            >
              Try again
            </button>
          </div>
        </div>
      ) : project === null ? (
        <div
          style={{
            background: "var(--surface)",
            border: "1px solid var(--border)",
            borderRadius: "var(--r-lg)",
            padding: 32,
            textAlign: "center",
          }}
        >
          <p style={{ color: "var(--muted)", margin: 0 }}>Project details are not available.</p>
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <section
            style={{
              background: "var(--surface)",
              border: "1px solid var(--border)",
              borderRadius: "var(--r-lg)",
              padding: 24,
            }}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "flex-start",
                gap: 12,
                flexWrap: "wrap",
              }}
            >
              <div style={{ minWidth: 0 }}>
                <h1
                  style={{ margin: 0, fontSize: "1.875rem", fontWeight: 700, color: "var(--text)" }}
                >
                  {project.name}
                </h1>
              </div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {projectStatus && <StatusBadge style={projectStatus} />}
                {projectPriority && <StatusBadge style={projectPriority} />}
              </div>
            </div>

            {project.description ? (
              <p
                style={{
                  margin: "14px 0 0",
                  color: "var(--muted)",
                  fontSize: "0.9rem",
                  lineHeight: 1.6,
                }}
              >
                {project.description}
              </p>
            ) : (
              <p
                style={{
                  margin: "14px 0 0",
                  color: "var(--muted)",
                  fontSize: "0.9rem",
                  lineHeight: 1.6,
                  fontStyle: "italic",
                }}
              >
                No description provided.
              </p>
            )}

            <div className="grid grid-cols-1 md:grid-cols-2 gap-3" style={{ marginTop: 18 }}>
              <MetaItem label="Start date" value={formatDate(project.startDate)} />
              <MetaItem label="Due date" value={formatDate(dueDate)} />
              <MetaItem label="Created" value={formatDateTime(project.createdAt)} />
              <MetaItem label="Updated" value={formatDateTime(project.updatedAt)} />
              <MetaItem label="Creator" value={creator} />
              <MetaItem
                label="Work items"
                value={`${String(project._count.tasks)} tasks · ${String(project._count.events)} events`}
              />
            </div>
          </section>

          <section
            style={{
              background: "var(--surface)",
              border: "1px solid var(--border)",
              borderRadius: "var(--r-lg)",
              padding: 24,
            }}
          >
            <h2 style={{ margin: "0 0 12px", fontSize: "1.1rem", color: "var(--text)" }}>
              Tasks ({String(project._count.tasks)})
            </h2>

            {project.tasks.length === 0 ? (
              <p style={{ margin: 0, color: "var(--muted)", fontSize: "0.9rem" }}>
                No tasks yet for this project.
              </p>
            ) : (
              <div>
                {project.tasks.map((task, index) => (
                  <div
                    key={task.id}
                    style={{
                      padding: "12px 0",
                      borderTop: index === 0 ? "none" : "1px solid var(--border)",
                    }}
                  >
                    <div
                      style={{
                        display: "flex",
                        alignItems: "flex-start",
                        justifyContent: "space-between",
                        gap: 12,
                        flexWrap: "wrap",
                      }}
                    >
                      <div style={{ minWidth: 0 }}>
                        <p style={{ margin: 0, color: "var(--text)", fontWeight: 500 }}>
                          {task.title}
                        </p>
                        <p style={{ margin: "4px 0 0", color: "var(--muted)", fontSize: "0.8rem" }}>
                          Due: {formatDate(task.dueDate)}
                        </p>
                      </div>
                      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                        <StatusBadge style={getTaskStatusStyle(task.status)} />
                        <StatusBadge style={getPriorityStyle(task.priority)} />
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </section>

          <section
            style={{
              background: "var(--surface)",
              border: "1px solid var(--border)",
              borderRadius: "var(--r-lg)",
              padding: 24,
            }}
          >
            <h2 style={{ margin: "0 0 12px", fontSize: "1.1rem", color: "var(--text)" }}>
              Events ({String(project._count.events)})
            </h2>

            {project.events.length === 0 ? (
              <p style={{ margin: 0, color: "var(--muted)", fontSize: "0.9rem" }}>
                No events scheduled for this project.
              </p>
            ) : (
              <div>
                {project.events.map((event, index) => (
                  <div
                    key={event.id}
                    style={{
                      padding: "12px 0",
                      borderTop: index === 0 ? "none" : "1px solid var(--border)",
                    }}
                  >
                    <p style={{ margin: 0, color: "var(--text)", fontWeight: 500 }}>
                      {event.title}
                    </p>
                    <p style={{ margin: "4px 0 0", color: "var(--muted)", fontSize: "0.8rem" }}>
                      {formatDateTime(event.startTime)} - {formatDateTime(event.endTime)}
                    </p>
                  </div>
                ))}
              </div>
            )}
          </section>
        </div>
      )}
    </main>
  );
}