import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { Calendar, BarChart2, Users, Tag, FileText, Settings } from "lucide-react";
import Link from "next/link";
// hooks
import { useProject } from "@/hooks/store/use-project";
import { Logo } from "@buzzwaretech/propel/emoji-icon-picker";
import { renderFormattedDate } from "@buzzwaretech/utils";

type Props = {
  workspaceSlug: string;
  projectId: string;
};

export const ProjectOverviewRoot = observer(function ProjectOverviewRoot({
  workspaceSlug,
  projectId,
}: Props) {
  const { getProjectById } = useProject();
  const project = getProjectById(projectId);

  if (!project) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="text-center">
          <p className="text-tertiary text-sm">Project not found</p>
        </div>
      </div>
    );
  }

  const stats = [
    {
      label: "Work Items",
      value: project.total_issues ?? 0,
      icon: BarChart2,
      href: `/${workspaceSlug}/projects/${projectId}/issues`,
      color: "text-blue-500",
      bg: "bg-blue-50 dark:bg-blue-950",
    },
    {
      label: "Cycles",
      value: project.total_cycles ?? 0,
      icon: Calendar,
      href: `/${workspaceSlug}/projects/${projectId}/cycles`,
      color: "text-orange-500",
      bg: "bg-orange-50 dark:bg-orange-950",
    },
    {
      label: "Modules",
      value: project.total_modules ?? 0,
      icon: Tag,
      href: `/${workspaceSlug}/projects/${projectId}/modules`,
      color: "text-purple-500",
      bg: "bg-purple-50 dark:bg-purple-950",
    },
    {
      label: "Members",
      value: project.total_members ?? 0,
      icon: Users,
      href: `/${workspaceSlug}/settings/projects/${projectId}/members`,
      color: "text-green-500",
      bg: "bg-green-50 dark:bg-green-950",
    },
  ];

  const quickLinks = [
    {
      label: "Work Items",
      description: "View and manage all work items",
      href: `/${workspaceSlug}/projects/${projectId}/issues`,
      icon: BarChart2,
    },
    {
      label: "Cycles",
      description: "Manage sprint cycles",
      href: `/${workspaceSlug}/projects/${projectId}/cycles`,
      icon: Calendar,
    },
    {
      label: "Modules",
      description: "Group work into modules",
      href: `/${workspaceSlug}/projects/${projectId}/modules`,
      icon: Tag,
    },
    {
      label: "Views",
      description: "Custom filtered views",
      href: `/${workspaceSlug}/projects/${projectId}/views`,
      icon: FileText,
    },
    {
      label: "Pages",
      description: "Project documentation",
      href: `/${workspaceSlug}/projects/${projectId}/pages`,
      icon: FileText,
    },
    {
      label: "Settings",
      description: "Manage project settings",
      href: `/${workspaceSlug}/settings/projects/${projectId}`,
      icon: Settings,
    },
  ];

  return (
    <div className="h-full w-full overflow-y-auto">
      <div className="mx-auto max-w-4xl px-6 py-8 space-y-8">

        {/* Project Header */}
        <div className="flex items-start gap-4">
          <div className="flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl bg-surface-2 border border-subtle">
            <Logo logo={project.logo_props} size={28} />
          </div>
          <div className="flex-1 min-w-0">
            <h1 className="text-2xl font-bold text-primary truncate">{project.name}</h1>
            {project.description && (
              <p className="mt-1 text-sm text-secondary line-clamp-3">{project.description}</p>
            )}
            <div className="mt-2 flex items-center gap-4 text-xs text-tertiary">
              <span className="font-mono bg-surface-2 px-2 py-0.5 rounded border border-subtle">
                {project.identifier}
              </span>
              {project.created_at && (
                <span>Created {renderFormattedDate(project.created_at)}</span>
              )}
            </div>
          </div>
        </div>

        {/* Stats Cards */}
        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
          {stats.map((stat) => {
            const Icon = stat.icon;
            return (
              <Link
                key={stat.label}
                href={stat.href}
                className="group flex flex-col gap-2 rounded-xl border border-subtle bg-surface-1 p-4 hover:border-primary/30 hover:bg-surface-2 transition-all duration-200"
              >
                <div className={`flex h-9 w-9 items-center justify-center rounded-lg ${stat.bg}`}>
                  <Icon className={`h-4 w-4 ${stat.color}`} />
                </div>
                <div>
                  <p className="text-2xl font-bold text-primary">{stat.value}</p>
                  <p className="text-xs text-tertiary">{stat.label}</p>
                </div>
              </Link>
            );
          })}
        </div>

        {/* Quick Links */}
        <div>
          <h2 className="mb-4 text-sm font-semibold text-secondary uppercase tracking-wider">
            Quick Navigation
          </h2>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {quickLinks.map((link) => {
              const Icon = link.icon;
              return (
                <Link
                  key={link.label}
                  href={link.href}
                  className="group flex items-center gap-3 rounded-lg border border-subtle bg-surface-1 p-4 hover:border-primary/30 hover:bg-surface-2 transition-all duration-200"
                >
                  <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-surface-2 border border-subtle group-hover:border-primary/30">
                    <Icon className="h-4 w-4 text-secondary" />
                  </div>
                  <div className="min-w-0">
                    <p className="text-sm font-medium text-primary">{link.label}</p>
                    <p className="text-xs text-tertiary truncate">{link.description}</p>
                  </div>
                </Link>
              );
            })}
          </div>
        </div>

        {/* Project Details */}
        <div className="rounded-xl border border-subtle bg-surface-1 p-6">
          <h2 className="mb-4 text-sm font-semibold text-secondary uppercase tracking-wider">
            Project Details
          </h2>
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
              <p className="text-xs text-tertiary mb-1">Network</p>
              <p className="text-sm text-primary font-medium">
                {project.network === 0 ? "🔒 Secret" : project.network === 1 ? "🔗 Public (in Workspace)" : "🌐 Public"}
              </p>
            </div>
            <div>
              <p className="text-xs text-tertiary mb-1">Identifier</p>
              <p className="text-sm font-mono text-primary font-medium">{project.identifier}</p>
            </div>
            {project.timezone && (
              <div>
                <p className="text-xs text-tertiary mb-1">Timezone</p>
                <p className="text-sm text-primary font-medium">{project.timezone}</p>
              </div>
            )}
            {project.created_at && (
              <div>
                <p className="text-xs text-tertiary mb-1">Created</p>
                <p className="text-sm text-primary font-medium">{renderFormattedDate(project.created_at)}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
});