"use client";

import { useParams, usePathname } from "next/navigation";
import {
  ClipboardList,
  CheckCircle2,
  Circle,
  Clock,
  Target,
  ListTodo,
  Calendar,
  Plus,
  Sparkles,
} from "lucide-react";
import {
  PageTemplate,
  PageSection,
  PageCard,
  PageGrid,
} from "@/components/layout/page-template";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const BUILD_PLAN_NAV_ITEMS = [
  { title: "MVP Scope", icon: Target, href: "/build-plan" },
  { title: "Backlog", icon: ListTodo, href: "/build-plan#backlog" },
  { title: "Milestones", icon: Calendar, href: "/build-plan#milestones" },
  { title: "Progress", icon: Clock, href: "/build-plan#progress" },
];

const SAMPLE_MVP_FEATURES = [
  { id: 1, title: "User Authentication", status: "completed", priority: "high" },
  { id: 2, title: "Dashboard UI", status: "in_progress", priority: "high" },
  { id: 3, title: "Core Feature Flow", status: "in_progress", priority: "high" },
  { id: 4, title: "Payment Integration", status: "todo", priority: "medium" },
  { id: 5, title: "Email Notifications", status: "todo", priority: "low" },
];

const SAMPLE_BACKLOG = [
  { id: 1, title: "Advanced Analytics", priority: "medium" },
  { id: 2, title: "Team Collaboration", priority: "high" },
  { id: 3, title: "API Access", priority: "low" },
  { id: 4, title: "Mobile App", priority: "medium" },
];

export default function BuildPlanPage() {
  const params = useParams();
  const pathname = usePathname();
  const workspace = params.workspace as string;
  const projectId = params.projectId as string;

  const sidebarItems = BUILD_PLAN_NAV_ITEMS.map((item) => {
    const fullHref = `/${workspace}/project/${projectId}${item.href}`;
    return {
      ...item,
      href: fullHref,
      isActive: pathname === fullHref || pathname.startsWith(fullHref),
    };
  });

  const completedCount = SAMPLE_MVP_FEATURES.filter((f) => f.status === "completed").length;
  const totalCount = SAMPLE_MVP_FEATURES.length;
  const progressPercent = Math.round((completedCount / totalCount) * 100);

  return (
    <PageTemplate
      sidebar={{
        title: "Build Plan",
        description: "Track what needs to be built",
        items: sidebarItems,
        footer: (
          <div className="space-y-1">
            <p className="text-xs text-muted-foreground">
              {completedCount} of {totalCount} MVP features done
            </p>
            <div className="h-1 bg-muted rounded-full overflow-hidden">
              <div
                className="h-full bg-primary transition-all"
                style={{ width: `${progressPercent}%` }}
              />
            </div>
          </div>
        ),
      }}
      hero={{
        icon: ClipboardList,
        title: "Build Plan",
        description: "Manage your MVP scope and track progress",
        actions: [
          {
            label: "Generate Tasks",
            onClick: () => console.log("Generate tasks with AI"),
            icon: Sparkles,
          },
        ],
      }}
    >
      {/* Progress Overview */}
      <PageSection>
        <PageGrid cols={4}>
          <PageCard>
            <div className="text-center">
              <CheckCircle2 className="h-8 w-8 text-green-600 mx-auto mb-2" />
              <p className="text-3xl font-bold">{completedCount}</p>
              <p className="text-sm text-muted-foreground">Completed</p>
            </div>
          </PageCard>
          <PageCard>
            <div className="text-center">
              <Clock className="h-8 w-8 text-blue-600 mx-auto mb-2" />
              <p className="text-3xl font-bold">
                {SAMPLE_MVP_FEATURES.filter((f) => f.status === "in_progress").length}
              </p>
              <p className="text-sm text-muted-foreground">In Progress</p>
            </div>
          </PageCard>
          <PageCard>
            <div className="text-center">
              <Circle className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
              <p className="text-3xl font-bold">
                {SAMPLE_MVP_FEATURES.filter((f) => f.status === "todo").length}
              </p>
              <p className="text-sm text-muted-foreground">To Do</p>
            </div>
          </PageCard>
          <PageCard>
            <div className="text-center">
              <Target className="h-8 w-8 text-primary mx-auto mb-2" />
              <p className="text-3xl font-bold">{progressPercent}%</p>
              <p className="text-sm text-muted-foreground">Progress</p>
            </div>
          </PageCard>
        </PageGrid>
      </PageSection>

      {/* MVP Scope */}
      <PageSection
        title="MVP Scope"
        description="Features included in your minimum viable product"
        headerAction={
          <Button size="sm" variant="ghost">
            <Plus className="h-4 w-4 mr-2" />
            Add Feature
          </Button>
        }
      >
        <PageCard>
          <div className="space-y-2">
            {SAMPLE_MVP_FEATURES.map((feature) => (
              <div
                key={feature.id}
                className={cn(
                  "flex items-center gap-3 p-3 rounded-lg border transition-all hover:border-primary/50",
                  feature.status === "completed" && "bg-green-50/50 dark:bg-green-950/20"
                )}
              >
                <div className="shrink-0">
                  {feature.status === "completed" && (
                    <CheckCircle2 className="h-5 w-5 text-green-600" />
                  )}
                  {feature.status === "in_progress" && (
                    <Clock className="h-5 w-5 text-blue-600" />
                  )}
                  {feature.status === "todo" && (
                    <Circle className="h-5 w-5 text-muted-foreground" />
                  )}
                </div>
                <div className="flex-1">
                  <p
                    className={cn(
                      "font-medium",
                      feature.status === "completed" && "line-through text-muted-foreground"
                    )}
                  >
                    {feature.title}
                  </p>
                </div>
                <div>
                  <span
                    className={cn(
                      "text-xs px-2 py-1 rounded-full",
                      feature.priority === "high" &&
                        "bg-red-500/10 text-red-700 dark:text-red-400",
                      feature.priority === "medium" &&
                        "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400",
                      feature.priority === "low" &&
                        "bg-gray-500/10 text-gray-700 dark:text-gray-400"
                    )}
                  >
                    {feature.priority}
                  </span>
                </div>
                <div>
                  <span
                    className={cn(
                      "text-xs px-2 py-1 rounded-full",
                      feature.status === "completed" &&
                        "bg-green-500/10 text-green-700 dark:text-green-400",
                      feature.status === "in_progress" &&
                        "bg-blue-500/10 text-blue-700 dark:text-blue-400",
                      feature.status === "todo" &&
                        "bg-gray-500/10 text-gray-700 dark:text-gray-400"
                    )}
                  >
                    {feature.status === "in_progress" ? "in progress" : feature.status}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </PageCard>
      </PageSection>

      {/* Backlog */}
      <PageSection
        title="Backlog"
        description="Features for future iterations"
        headerAction={
          <Button size="sm" variant="ghost">
            <Plus className="h-4 w-4 mr-2" />
            Add to Backlog
          </Button>
        }
      >
        <PageCard>
          <div className="space-y-2">
            {SAMPLE_BACKLOG.map((item) => (
              <div
                key={item.id}
                className="flex items-center gap-3 p-3 rounded-lg border hover:border-primary/50 transition-all"
              >
                <ListTodo className="h-5 w-5 text-muted-foreground shrink-0" />
                <div className="flex-1">
                  <p className="font-medium">{item.title}</p>
                </div>
                <span
                  className={cn(
                    "text-xs px-2 py-1 rounded-full",
                    item.priority === "high" &&
                      "bg-red-500/10 text-red-700 dark:text-red-400",
                    item.priority === "medium" &&
                      "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400",
                    item.priority === "low" &&
                      "bg-gray-500/10 text-gray-700 dark:text-gray-400"
                  )}
                >
                  {item.priority}
                </span>
                <Button size="sm" variant="ghost">
                  Move to MVP
                </Button>
              </div>
            ))}
          </div>
        </PageCard>
      </PageSection>

      {/* Milestones */}
      <PageSection title="Milestones" description="Key dates and goals">
        <PageGrid cols={3}>
          <PageCard>
            <div className="text-center">
              <div className="h-12 w-12 rounded-full bg-green-500/10 flex items-center justify-center mx-auto mb-3">
                <CheckCircle2 className="h-6 w-6 text-green-600" />
              </div>
              <h3 className="font-semibold mb-1">Alpha Release</h3>
              <p className="text-sm text-muted-foreground mb-2">Completed</p>
              <p className="text-xs text-muted-foreground">Jan 15, 2025</p>
            </div>
          </PageCard>

          <PageCard className="border-primary">
            <div className="text-center">
              <div className="h-12 w-12 rounded-full bg-blue-500/10 flex items-center justify-center mx-auto mb-3">
                <Clock className="h-6 w-6 text-blue-600" />
              </div>
              <h3 className="font-semibold mb-1">Beta Launch</h3>
              <p className="text-sm text-muted-foreground mb-2">In Progress</p>
              <p className="text-xs text-muted-foreground">Feb 1, 2025</p>
            </div>
          </PageCard>

          <PageCard>
            <div className="text-center">
              <div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center mx-auto mb-3">
                <Target className="h-6 w-6 text-muted-foreground" />
              </div>
              <h3 className="font-semibold mb-1">Public Launch</h3>
              <p className="text-sm text-muted-foreground mb-2">Planned</p>
              <p className="text-xs text-muted-foreground">Mar 1, 2025</p>
            </div>
          </PageCard>
        </PageGrid>
      </PageSection>
    </PageTemplate>
  );
}