import Link from "next/link"
import { 
  ArrowLeft, 
  ThumbsUp, 
  ThumbsDown, 
  Bookmark, 
  Share2, 
  MoreHorizontal,
  Calendar,
  Eye,
  FileText,
  Image as ImageIcon,
  Video,
  ExternalLink,
  Flag,
  Zap,
} from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

// Mock data - would come from API based on [id]
const ideaData = {
  id: "1",
  author: {
    name: "Rahul Sharma",
    username: "@rahulsharma",
    avatar: "",
    type: "individual" as const,
    isVerified: true,
  },
  title: "AI-Powered Personal Finance Assistant for Indian Market",
  content: `I have been working on this idea for the past 6 months and I believe there's a huge gap in the Indian market for a truly intelligent personal finance assistant.

**The Problem:**
Most Indians struggle with financial planning. They don't know where to invest, how to save taxes, or plan for retirement. Existing apps are either too complex or don't understand Indian financial products.

**The Solution:**
An AI-powered app that:
- Analyzes your spending patterns automatically
- Suggests personalized investment strategies based on Indian tax laws
- Provides real-time market insights in simple language
- Helps with tax planning and filing
- Offers vernacular language support (Hindi, Tamil, Telugu, etc.)

**Market Opportunity:**
- 400M+ smartphone users in India
- Only 3% of Indians invest in stock markets
- Digital payment adoption is at an all-time high

**What I'm Looking For:**
- Technical co-founder with ML/AI expertise
- Seed funding of INR 50 lakhs
- Mentorship from fintech industry experts

I have already built a basic prototype and have 500+ users on the waitlist. Would love to connect with interested investors and collaborators!`,
  category: "Technology & Innovation",
  tags: ["Fintech", "AI", "India", "Personal Finance", "Startup"],
  attachments: [
    { type: "image", url: "/placeholder.svg", name: "App Mockup" },
    { type: "pdf", url: "#", name: "Business Plan.pdf" },
    { type: "video", url: "#", name: "Demo Video" },
  ],
  stats: {
    likes: 234,
    dislikes: 12,
    views: 1892,
    saves: 89,
  },
  aiScore: 87,
  createdAt: "March 15, 2026",
  isLiked: false,
  isDisliked: false,
  isSaved: false,
}

const relatedIdeas = [
  {
    id: "2",
    title: "Micro-Investment Platform for Gen Z",
    author: "Priya Patel",
    likes: 156,
    category: "Business & Finance",
  },
  {
    id: "3",
    title: "Blockchain-Based Credit Scoring System",
    author: "Amit Kumar",
    likes: 98,
    category: "Technology & Innovation",
  },
  {
    id: "4",
    title: "Rural Banking Solution using Feature Phones",
    author: "Sneha Reddy",
    likes: 203,
    category: "Social Impact",
  },
]

export default function IdeaDetailPage({ params }: { params: { id: string } }) {
  return (
    <div className="min-h-screen bg-background">
      {/* Top Navigation Bar */}
      <header className="sticky top-0 z-40 border-b border-border/50 glass">
        <div className="mx-auto max-w-5xl flex items-center justify-between px-4 py-4">
          <Link 
            href="/" 
            className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
          >
            <ArrowLeft className="h-5 w-5" />
            <span className="font-medium">Back to Feed</span>
          </Link>
          
          <Link href="/" className="flex items-center gap-2">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
              <Zap className="h-4 w-4" />
            </div>
            <span className="text-lg font-bold text-gradient">CheckUrIdea</span>
          </Link>

          <div className="flex items-center gap-2">
            <Button variant="ghost" size="icon" className="text-muted-foreground">
              <Share2 className="h-5 w-5" />
            </Button>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon" className="text-muted-foreground">
                  <MoreHorizontal className="h-5 w-5" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="glass glass-border">
                <DropdownMenuItem className="gap-2">
                  <Flag className="h-4 w-4" />
                  Report Idea
                </DropdownMenuItem>
                <DropdownMenuItem className="gap-2">
                  <ExternalLink className="h-4 w-4" />
                  Copy Link
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </header>

      <main className="mx-auto max-w-5xl px-4 py-8">
        <div className="grid lg:grid-cols-3 gap-8">
          {/* Main Content */}
          <div className="lg:col-span-2 space-y-6">
            {/* Author Info */}
            <div className="rounded-2xl glass glass-border p-6">
              <div className="flex items-start justify-between mb-6">
                <Link href={`/profile/${ideaData.author.type}`} className="flex items-center gap-4 group">
                  <Avatar className="h-14 w-14 ring-2 ring-primary/20">
                    <AvatarImage src={ideaData.author.avatar} />
                    <AvatarFallback className="bg-primary/20 text-primary text-lg font-bold">
                      {ideaData.author.name.split(" ").map(n => n[0]).join("")}
                    </AvatarFallback>
                  </Avatar>
                  <div>
                    <div className="flex items-center gap-2">
                      <h3 className="font-bold text-foreground group-hover:text-primary transition-colors">
                        {ideaData.author.name}
                      </h3>
                      {ideaData.author.isVerified && (
                        <div className="flex h-5 w-5 items-center justify-center rounded-full bg-primary">
                          <svg className="h-3 w-3 text-primary-foreground" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
                          </svg>
                        </div>
                      )}
                    </div>
                    <p className="text-sm text-muted-foreground">{ideaData.author.username}</p>
                  </div>
                </Link>
                
                <span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary capitalize">
                  {ideaData.author.type}
                </span>
              </div>

              {/* Meta Info */}
              <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground mb-6">
                <div className="flex items-center gap-1.5">
                  <Calendar className="h-4 w-4" />
                  {ideaData.createdAt}
                </div>
                <div className="flex items-center gap-1.5">
                  <Eye className="h-4 w-4" />
                  {ideaData.stats.views.toLocaleString()} views
                </div>
                <div className="rounded-full bg-secondary px-3 py-1 text-xs font-medium">
                  {ideaData.category}
                </div>
              </div>

              {/* Title */}
              <h1 className="text-2xl font-bold text-foreground mb-6 text-balance">
                {ideaData.title}
              </h1>

              {/* Content */}
              <div className="prose prose-invert prose-sm max-w-none">
                {ideaData.content.split('\n\n').map((paragraph, idx) => (
                  <p key={idx} className="text-foreground/90 leading-relaxed mb-4 whitespace-pre-wrap">
                    {paragraph}
                  </p>
                ))}
              </div>

              {/* Tags */}
              <div className="flex flex-wrap gap-2 mt-6 pt-6 border-t border-border/50">
                {ideaData.tags.map((tag) => (
                  <span 
                    key={tag}
                    className="rounded-full bg-secondary/50 px-3 py-1 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors cursor-pointer"
                  >
                    #{tag}
                  </span>
                ))}
              </div>
            </div>

            {/* Attachments */}
            {ideaData.attachments.length > 0 && (
              <div className="rounded-2xl glass glass-border p-6">
                <h3 className="font-bold text-foreground mb-4">Attachments</h3>
                <div className="grid sm:grid-cols-3 gap-4">
                  {ideaData.attachments.map((attachment, idx) => (
                    <div 
                      key={idx}
                      className="rounded-xl bg-secondary/30 p-4 flex flex-col items-center gap-3 hover:bg-secondary/50 transition-colors cursor-pointer group"
                    >
                      <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                        {attachment.type === "image" && <ImageIcon className="h-6 w-6 text-primary" />}
                        {attachment.type === "pdf" && <FileText className="h-6 w-6 text-red-400" />}
                        {attachment.type === "video" && <Video className="h-6 w-6 text-purple-400" />}
                      </div>
                      <span className="text-xs text-muted-foreground text-center truncate w-full">
                        {attachment.name}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Actions */}
            <div className="rounded-2xl glass glass-border p-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-1">
                  <Button variant="ghost" className="gap-2 text-muted-foreground hover:text-primary">
                    <ThumbsUp className="h-5 w-5" />
                    <span className="font-semibold">{ideaData.stats.likes}</span>
                  </Button>
                  <Button variant="ghost" className="gap-2 text-muted-foreground hover:text-destructive">
                    <ThumbsDown className="h-5 w-5" />
                    <span className="font-semibold">{ideaData.stats.dislikes}</span>
                  </Button>
                </div>
                
                <div className="flex items-center gap-1">
                  <Button variant="ghost" className="gap-2 text-muted-foreground hover:text-accent">
                    <Bookmark className="h-5 w-5" />
                    <span className="hidden sm:inline">Save</span>
                  </Button>
                  <Button variant="ghost" className="gap-2 text-muted-foreground hover:text-primary">
                    <Share2 className="h-5 w-5" />
                    <span className="hidden sm:inline">Share</span>
                  </Button>
                </div>
              </div>
            </div>

            {/* AI Score */}
            <div className="rounded-2xl glass glass-border p-6">
              <div className="flex items-center justify-between mb-4">
                <h3 className="font-bold text-foreground">AI Analysis Score</h3>
                <div className="flex items-center gap-2">
                  <Zap className="h-5 w-5 text-primary" />
                  <span className="text-2xl font-bold text-primary">{ideaData.aiScore}%</span>
                </div>
              </div>
              <div className="w-full h-3 rounded-full bg-secondary overflow-hidden">
                <div 
                  className="h-full bg-gradient-to-r from-primary to-accent rounded-full transition-all"
                  style={{ width: `${ideaData.aiScore}%` }}
                />
              </div>
              <p className="text-xs text-muted-foreground mt-3">
                Based on market viability, innovation score, and execution potential
              </p>
            </div>
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
            {/* Author Card */}
            <div className="rounded-2xl glass glass-border p-6">
              <h3 className="font-bold text-foreground mb-4">About the Creator</h3>
              <div className="flex items-center gap-3 mb-4">
                <Avatar className="h-12 w-12">
                  <AvatarFallback className="bg-primary/20 text-primary font-bold">
                    {ideaData.author.name.split(" ").map(n => n[0]).join("")}
                  </AvatarFallback>
                </Avatar>
                <div>
                  <p className="font-semibold text-foreground">{ideaData.author.name}</p>
                  <p className="text-xs text-muted-foreground">12 ideas posted</p>
                </div>
              </div>
              <Link href={`/profile/${ideaData.author.type}`}>
                <Button className="w-full" variant="outline">
                  View Profile
                </Button>
              </Link>
            </div>

            {/* Related Ideas */}
            <div className="rounded-2xl glass glass-border p-6">
              <h3 className="font-bold text-foreground mb-4">Related Ideas</h3>
              <div className="space-y-4">
                {relatedIdeas.map((idea) => (
                  <Link 
                    key={idea.id}
                    href={`/idea/${idea.id}`}
                    className="block p-3 rounded-xl bg-secondary/30 hover:bg-secondary/50 transition-colors"
                  >
                    <h4 className="font-medium text-foreground text-sm mb-2 line-clamp-2">
                      {idea.title}
                    </h4>
                    <div className="flex items-center justify-between text-xs text-muted-foreground">
                      <span>{idea.author}</span>
                      <span className="flex items-center gap-1">
                        <ThumbsUp className="h-3 w-3" />
                        {idea.likes}
                      </span>
                    </div>
                  </Link>
                ))}
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}