"use client";

import { useParams, usePathname } from "next/navigation";
import {
  Megaphone,
  MessageSquare,
  Globe,
  Target,
  Rocket,
  Sparkles,
  Edit,
  Plus,
} from "lucide-react";
import {
  PageTemplate,
  PageSection,
  PageCard,
  PageGrid,
} from "@/components/layout/page-template";
import { Button } from "@/components/ui/button";

const MARKET_NAV_ITEMS = [
  { title: "Value Proposition", icon: Target, href: "/market" },
  { title: "Messaging Framework", icon: MessageSquare, href: "/market#messaging" },
  { title: "Website Copy", icon: Globe, href: "/market#website" },
  { title: "Launch Strategy", icon: Rocket, href: "/market#launch" },
  { title: "Target Channels", icon: Megaphone, href: "/market#channels" },
];

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

  const sidebarItems = MARKET_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,
      }}
    >
      {/* Value Proposition */}
      <PageSection
        title="Value Proposition"
        description="Your core message to the market"
        headerAction={
          <Button size="sm" variant="ghost">
            <Edit className="h-4 w-4 mr-2" />
            Edit
          </Button>
        }
      >
        <PageCard>
          <div className="space-y-6">
            <div>
              <h3 className="text-sm font-medium text-muted-foreground mb-2">
                Headline
              </h3>
              <p className="text-2xl font-bold">
                Build Your Product Faster with AI-Powered Insights
              </p>
            </div>
            <div>
              <h3 className="text-sm font-medium text-muted-foreground mb-2">
                Subheadline
              </h3>
              <p className="text-lg text-muted-foreground">
                Turn conversations into code, design, and marketing - all in one platform
              </p>
            </div>
            <div>
              <h3 className="text-sm font-medium text-muted-foreground mb-2">
                Key Benefits
              </h3>
              <ul className="space-y-2">
                <li className="flex items-start gap-2">
                  <div className="h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
                    <div className="h-2 w-2 rounded-full bg-primary" />
                  </div>
                  <span>Save weeks of planning and research</span>
                </li>
                <li className="flex items-start gap-2">
                  <div className="h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
                    <div className="h-2 w-2 rounded-full bg-primary" />
                  </div>
                  <span>Get AI-generated designs and code structure</span>
                </li>
                <li className="flex items-start gap-2">
                  <div className="h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0 mt-0.5">
                    <div className="h-2 w-2 rounded-full bg-primary" />
                  </div>
                  <span>Launch with confidence and clarity</span>
                </li>
              </ul>
            </div>
          </div>
        </PageCard>
      </PageSection>

      {/* Messaging Framework */}
      <PageSection title="Messaging Framework" description="How you talk about your product">
        <PageGrid cols={2}>
          <PageCard>
            <h3 className="font-semibold mb-3 flex items-center gap-2">
              <MessageSquare className="h-4 w-4 text-muted-foreground" />
              Primary Message
            </h3>
            <p className="text-sm text-muted-foreground mb-3">
              For solo founders and small teams building their first product
            </p>
            <p className="text-base">
              "Stop getting stuck in planning. Start building with AI as your co-founder."
            </p>
          </PageCard>

          <PageCard>
            <h3 className="font-semibold mb-3 flex items-center gap-2">
              <Target className="h-4 w-4 text-muted-foreground" />
              Positioning
            </h3>
            <p className="text-sm text-muted-foreground mb-3">
              Different from competitors because...
            </p>
            <p className="text-base">
              "We don't just track - we actively guide you from idea to launch with AI."
            </p>
          </PageCard>
        </PageGrid>
      </PageSection>

      {/* Website Copy */}
      <PageSection
        title="Website Copy"
        description="Content for your marketing site"
        headerAction={
          <Button size="sm" variant="ghost">
            <Sparkles className="h-4 w-4 mr-2" />
            Generate More
          </Button>
        }
      >
        <div className="space-y-4">
          <PageCard>
            <h3 className="font-semibold mb-3">Hero Section</h3>
            <div className="space-y-3">
              <div className="p-3 rounded-lg bg-muted/50">
                <p className="text-xs text-muted-foreground mb-1">Headline</p>
                <p className="font-medium">Build Your SaaS from Idea to Launch</p>
              </div>
              <div className="p-3 rounded-lg bg-muted/50">
                <p className="text-xs text-muted-foreground mb-1">CTA Button</p>
                <p className="font-medium">Start Building Free →</p>
              </div>
            </div>
          </PageCard>

          <PageCard>
            <h3 className="font-semibold mb-3">Features Section</h3>
            <PageGrid cols={3}>
              <div className="p-3 rounded-lg bg-muted/50">
                <p className="text-sm font-medium mb-1">🎯 AI Interview</p>
                <p className="text-xs text-muted-foreground">
                  Chat with AI to define your product
                </p>
              </div>
              <div className="p-3 rounded-lg bg-muted/50">
                <p className="text-sm font-medium mb-1">🎨 Auto Design</p>
                <p className="text-xs text-muted-foreground">
                  Generate UI screens instantly
                </p>
              </div>
              <div className="p-3 rounded-lg bg-muted/50">
                <p className="text-sm font-medium mb-1">🚀 Launch Plan</p>
                <p className="text-xs text-muted-foreground">
                  Get a complete go-to-market strategy
                </p>
              </div>
            </PageGrid>
          </PageCard>

          <PageCard>
            <h3 className="font-semibold mb-3">Social Proof</h3>
            <div className="p-3 rounded-lg bg-muted/50">
              <p className="text-sm text-muted-foreground italic">
                "This tool cut our planning time from 4 weeks to 2 days. Incredible."
              </p>
              <p className="text-xs text-muted-foreground mt-2">
                - Founder Name, Company
              </p>
            </div>
          </PageCard>
        </div>
      </PageSection>

      {/* Launch Strategy */}
      <PageSection title="Launch Strategy" description="Your go-to-market plan">
        <PageCard>
          <div className="space-y-4">
            <div>
              <h4 className="font-semibold mb-2 flex items-center gap-2">
                <Rocket className="h-4 w-4 text-muted-foreground" />
                Launch Timeline
              </h4>
              <div className="space-y-2">
                <div className="flex items-center gap-3 p-3 rounded-lg bg-muted/30">
                  <div className="text-xs font-medium text-muted-foreground w-20">
                    Week 1-2
                  </div>
                  <div className="text-sm">Soft launch to beta testers</div>
                </div>
                <div className="flex items-center gap-3 p-3 rounded-lg bg-muted/30">
                  <div className="text-xs font-medium text-muted-foreground w-20">
                    Week 3
                  </div>
                  <div className="text-sm">Product Hunt launch</div>
                </div>
                <div className="flex items-center gap-3 p-3 rounded-lg bg-muted/30">
                  <div className="text-xs font-medium text-muted-foreground w-20">
                    Week 4+
                  </div>
                  <div className="text-sm">Content marketing & SEO</div>
                </div>
              </div>
            </div>
          </div>
        </PageCard>
      </PageSection>

      {/* Target Channels */}
      <PageSection
        title="Target Channels"
        description="Where to reach your audience"
        headerAction={
          <Button size="sm" variant="ghost">
            <Plus className="h-4 w-4 mr-2" />
            Add Channel
          </Button>
        }
      >
        <PageGrid cols={2}>
          <PageCard hover>
            <div className="flex items-start gap-3">
              <div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center shrink-0">
                <Globe className="h-5 w-5 text-muted-foreground" />
              </div>
              <div>
                <h3 className="font-semibold mb-1">Twitter/X</h3>
                <p className="text-sm text-muted-foreground mb-2">
                  Primary channel for developer audience
                </p>
                <span className="text-xs px-2 py-1 rounded-full bg-primary/10 text-primary">
                  High Priority
                </span>
              </div>
            </div>
          </PageCard>

          <PageCard hover>
            <div className="flex items-start gap-3">
              <div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center shrink-0">
                <Rocket className="h-5 w-5 text-muted-foreground" />
              </div>
              <div>
                <h3 className="font-semibold mb-1">Product Hunt</h3>
                <p className="text-sm text-muted-foreground mb-2">
                  Launch day visibility and early adopters
                </p>
                <span className="text-xs px-2 py-1 rounded-full bg-muted text-muted-foreground font-medium">
                  Launch Day
                </span>
              </div>
            </div>
          </PageCard>

          <PageCard hover>
            <div className="flex items-start gap-3">
              <div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center shrink-0">
                <MessageSquare className="h-5 w-5 text-muted-foreground" />
              </div>
              <div>
                <h3 className="font-semibold mb-1">Dev Communities</h3>
                <p className="text-sm text-muted-foreground mb-2">
                  Indie Hackers, Reddit, Discord servers
                </p>
                <span className="text-xs px-2 py-1 rounded-full bg-muted text-muted-foreground font-medium">
                  Ongoing
                </span>
              </div>
            </div>
          </PageCard>

          <PageCard hover>
            <div className="flex items-start gap-3">
              <div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center shrink-0">
                <Globe className="h-5 w-5 text-muted-foreground" />
              </div>
              <div>
                <h3 className="font-semibold mb-1">Content Marketing</h3>
                <p className="text-sm text-muted-foreground mb-2">
                  Blog posts, tutorials, case studies
                </p>
                <span className="text-xs px-2 py-1 rounded-full bg-muted text-muted-foreground font-medium">
                  Long-term
                </span>
              </div>
            </div>
          </PageCard>
        </PageGrid>
      </PageSection>
    </PageTemplate>
  );
}