"use client";

import { useParams, usePathname } from "next/navigation";
import {
  Code2,
  Globe,
  Server,
  MessageSquare,
  ChevronRight,
} from "lucide-react";
import {
  PageTemplate,
  PageSection,
  PageCard,
  PageGrid,
} from "@/components/layout/page-template";

const PRODUCT_NAV_ITEMS = [
  { title: "Code", icon: Code2, href: "/code" },
  { title: "Website", icon: Globe, href: "/product#website" },
  { title: "Chat Agent", icon: MessageSquare, href: "/product#agent" },
  { title: "Deployment", icon: Server, href: "/product#deployment" },
];

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

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

  return (
    <PageTemplate
      sidebar={{
        items: sidebarItems,
      }}
    >
      {/* Quick Navigation Cards */}
      <PageSection>
        <PageGrid cols={2}>
          {PRODUCT_NAV_ITEMS.map((item) => {
            const Icon = item.icon;
            const fullHref = `/${workspace}/project/${projectId}${item.href}`;

            return (
              <a key={item.href} href={fullHref}>
                <PageCard hover>
                  <div className="flex items-start gap-4">
                    <div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center shrink-0">
                      <Icon className="h-5 w-5 text-muted-foreground" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <h3 className="font-semibold mb-1">{item.title}</h3>
                      <p className="text-sm text-muted-foreground">
                        {item.title === "Code" &&
                          "Browse codebase, manage repositories"}
                        {item.title === "Website" &&
                          "Marketing site, landing pages"}
                        {item.title === "Chat Agent" &&
                          "Conversational AI interface"}
                        {item.title === "Deployment" &&
                          "Hosting, CI/CD, environments"}
                      </p>
                    </div>
                    <ChevronRight className="h-5 w-5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
                  </div>
                </PageCard>
              </a>
            );
          })}
        </PageGrid>
      </PageSection>

      {/* Code Section */}
      <PageSection
        title="Code"
        description="Your application codebase"
      >
        <PageCard>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center">
                <Code2 className="h-5 w-5 text-muted-foreground" />
              </div>
              <div>
                <p className="font-medium">Browse Repository</p>
                <p className="text-sm text-muted-foreground">
                  View files, commits, and code structure
                </p>
              </div>
            </div>
            <a href={`/${workspace}/project/${projectId}/code`}>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </a>
          </div>
        </PageCard>
      </PageSection>

      {/* Website Section */}
      <PageSection
        title="Website"
        description="Marketing site and landing pages"
      >
        <PageCard>
          <div className="text-center py-8 text-muted-foreground">
            <Globe className="h-12 w-12 mx-auto mb-3 opacity-50" />
            <p className="text-sm">
              Manage your marketing website and landing pages
            </p>
          </div>
        </PageCard>
      </PageSection>

      {/* Chat Agent Section */}
      <PageSection
        title="Chat Agent"
        description="Conversational AI interface"
      >
        <PageCard>
          <div className="text-center py-8 text-muted-foreground">
            <MessageSquare className="h-12 w-12 mx-auto mb-3 opacity-50" />
            <p className="text-sm">
              Configure and manage your AI chat agent
            </p>
          </div>
        </PageCard>
      </PageSection>

      {/* Deployment Section */}
      <PageSection
        title="Deployment"
        description="Hosting and CI/CD"
      >
        <PageGrid cols={3}>
          <PageCard>
            <div className="text-center">
              <div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center mx-auto mb-3">
                <Server className="h-6 w-6 text-muted-foreground" />
              </div>
              <h3 className="font-semibold mb-1">Production</h3>
              <p className="text-sm text-muted-foreground mb-2">Live</p>
              <p className="text-xs text-muted-foreground">vercel.app</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">
                <Server className="h-6 w-6 text-muted-foreground" />
              </div>
              <h3 className="font-semibold mb-1">Staging</h3>
              <p className="text-sm text-muted-foreground mb-2">Preview</p>
              <p className="text-xs text-muted-foreground">staging.vercel.app</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">
                <Server className="h-6 w-6 text-muted-foreground" />
              </div>
              <h3 className="font-semibold mb-1">Development</h3>
              <p className="text-sm text-muted-foreground mb-2">Local</p>
              <p className="text-xs text-muted-foreground">localhost:3000</p>
            </div>
          </PageCard>
        </PageGrid>
      </PageSection>
    </PageTemplate>
  );
}