"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Separator } from "@/components/ui/separator"
import { Heart, Share2, Flag, MapPin, Clock, Star, MessageCircle, Phone, ArrowLeft, Shield, Eye } from "lucide-react"
import Link from "next/link"
import { useParams } from "next/navigation"

export default function AdDetailsPage() {
  const params = useParams()
  const [currentImageIndex, setCurrentImageIndex] = useState(0)
  const [isFavorite, setIsFavorite] = useState(false)

  // Mock data - in real app, fetch based on params.adId
  const ad = {
    id: params.adId,
    title: "Professional Web Development Services",
    description:
      "Full-stack web development with React, Node.js, and modern technologies. I have 5+ years of experience building scalable web applications for startups and enterprises. Services include:\n\n• Custom web application development\n• E-commerce solutions\n• API development and integration\n• Database design and optimization\n• Performance optimization\n• Maintenance and support\n\nI work with modern technologies including React, Next.js, Node.js, Python, PostgreSQL, and AWS. All projects come with clean code, documentation, and ongoing support.",
    type: "service" as const,
    category: "Technology",
    price: 50,
    location: "San Francisco, CA",
    postedAt: "2 hours ago",
    views: 127,
    images: ["/placeholder-okcta.png", "/multiple-monitor-coding.png", "/modern-office.png"],
    seller: {
      id: "1",
      name: "Alex Chen",
      avatar: "/professional-man.png",
      rating: 4.9,
      reviewCount: 47,
      verified: true,
      memberSince: "March 2022",
      responseTime: "Usually responds within 1 hour",
      completedJobs: 156,
    },
    featured: true,
    urgent: false,
    availability: "Weekdays 9 AM - 6 PM PST",
    serviceType: "Project-based",
  }

  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-6 max-w-4xl">
        {/* Header */}
        <div className="flex items-center gap-4 mb-6">
          <Link href="/ads">
            <Button variant="ghost" size="sm">
              <ArrowLeft className="w-4 h-4" />
            </Button>
          </Link>
          <div className="flex-1">
            <h1 className="text-2xl font-bold line-clamp-2">{ad.title}</h1>
            <div className="flex items-center gap-4 text-sm text-muted-foreground mt-1">
              <div className="flex items-center gap-1">
                <MapPin className="w-3 h-3" />
                {ad.location}
              </div>
              <div className="flex items-center gap-1">
                <Clock className="w-3 h-3" />
                {ad.postedAt}
              </div>
              <div className="flex items-center gap-1">
                <Eye className="w-3 h-3" />
                {ad.views} views
              </div>
            </div>
          </div>
          <div className="flex gap-2">
            <Button variant="ghost" size="sm" onClick={() => setIsFavorite(!isFavorite)}>
              <Heart className={`w-4 h-4 ${isFavorite ? "fill-red-500 text-red-500" : ""}`} />
            </Button>
            <Button variant="ghost" size="sm">
              <Share2 className="w-4 h-4" />
            </Button>
            <Button variant="ghost" size="sm">
              <Flag className="w-4 h-4" />
            </Button>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Main Content */}
          <div className="lg:col-span-2 space-y-6">
            {/* Image Gallery */}
            <Card>
              <CardContent className="p-0">
                <div className="relative">
                  <img
                    src={ad.images[currentImageIndex] || "/placeholder.svg"}
                    alt={ad.title}
                    className="w-full h-80 object-cover rounded-t-lg"
                  />
                  <div className="absolute top-2 left-2 flex gap-1">
                    {ad.featured && <Badge className="bg-amber-500 hover:bg-amber-600">Featured</Badge>}
                    {ad.urgent && <Badge variant="destructive">Urgent</Badge>}
                    <Badge variant="outline" className="bg-white/90">
                      {ad.type === "product" ? "Product" : "Service"}
                    </Badge>
                  </div>
                </div>

                {ad.images.length > 1 && (
                  <div className="flex gap-2 p-4">
                    {ad.images.map((image, index) => (
                      <button
                        key={index}
                        onClick={() => setCurrentImageIndex(index)}
                        className={`w-16 h-16 rounded-lg overflow-hidden border-2 ${
                          currentImageIndex === index ? "border-primary" : "border-transparent"
                        }`}
                      >
                        <img
                          src={image || "/placeholder.svg"}
                          alt={`View ${index + 1}`}
                          className="w-full h-full object-cover"
                        />
                      </button>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Description */}
            <Card>
              <CardHeader>
                <CardTitle>Description</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="whitespace-pre-line text-sm leading-relaxed">{ad.description}</div>
              </CardContent>
            </Card>

            {/* Service Details */}
            {ad.type === "service" && (
              <Card>
                <CardHeader>
                  <CardTitle>Service Details</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <span className="text-sm font-medium">Service Type:</span>
                      <p className="text-sm text-muted-foreground">{ad.serviceType}</p>
                    </div>
                    <div>
                      <span className="text-sm font-medium">Availability:</span>
                      <p className="text-sm text-muted-foreground">{ad.availability}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}

            {/* Safety Tips */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Shield className="w-5 h-5 text-green-600" />
                  Safety Tips
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="text-sm text-muted-foreground space-y-1">
                  <li>• Meet in public places for transactions</li>
                  <li>• Verify seller identity before meeting</li>
                  <li>• Use secure payment methods</li>
                  <li>• Trust your instincts - if something feels wrong, walk away</li>
                </ul>
              </CardContent>
            </Card>
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
            {/* Price and Actions */}
            <Card>
              <CardContent className="p-6">
                <div className="text-3xl font-bold text-primary mb-4">
                  ${ad.price}
                  {ad.type === "service" && "/hr"}
                </div>

                <div className="space-y-3">
                  <Button className="w-full" size="lg">
                    <MessageCircle className="w-4 h-4 mr-2" />
                    Message Seller
                  </Button>
                  <Button variant="outline" className="w-full bg-transparent" size="lg">
                    <Phone className="w-4 h-4 mr-2" />
                    Call Seller
                  </Button>
                </div>
              </CardContent>
            </Card>

            {/* Seller Information */}
            <Card>
              <CardHeader>
                <CardTitle>Seller Information</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center gap-3">
                  <Avatar className="w-12 h-12">
                    <AvatarImage src={ad.seller.avatar || "/placeholder.svg"} />
                    <AvatarFallback>{ad.seller.name[0]}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="flex items-center gap-2">
                      <h3 className="font-semibold">{ad.seller.name}</h3>
                      {ad.seller.verified && (
                        <Badge variant="secondary" className="text-xs">
                          Verified
                        </Badge>
                      )}
                    </div>
                    <div className="flex items-center gap-1">
                      <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                      <span className="text-sm">{ad.seller.rating}</span>
                      <span className="text-xs text-muted-foreground">({ad.seller.reviewCount} reviews)</span>
                    </div>
                  </div>
                </div>

                <Separator />

                <div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Member since:</span>
                    <span>{ad.seller.memberSince}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Response time:</span>
                    <span>{ad.seller.responseTime}</span>
                  </div>
                  {ad.type === "service" && (
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Completed jobs:</span>
                      <span>{ad.seller.completedJobs}</span>
                    </div>
                  )}
                </div>

                <Button variant="outline" className="w-full bg-transparent">
                  View Seller Profile
                </Button>
              </CardContent>
            </Card>

            {/* Location */}
            <Card>
              <CardHeader>
                <CardTitle>Location</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-2 mb-3">
                  <MapPin className="w-4 h-4 text-muted-foreground" />
                  <span className="text-sm">{ad.location}</span>
                </div>
                <div className="bg-muted rounded-lg h-32 flex items-center justify-center">
                  <span className="text-muted-foreground text-sm">Map placeholder</span>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}