"use client"

import { Heart, MessageCircle, Send, Bookmark, MoreHorizontal, Flag, UserMinus, Link, Code } from "lucide-react"
import { demoInstagramPost } from './demo/social'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

/**
 * ═══════════════════════════════════════════════════════════════════════════
 * InstagramPostProps
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Props for the InstagramPost component, which displays an Instagram-style
 * post with image, caption, and engagement actions.
 */
export interface InstagramPostProps {
  data?: {
    /** Author's Instagram username. */
    author?: string
    /** Avatar letter fallback or image URL for the profile picture. */
    avatar?: string
    /** URL of the post image to display. */
    image?: string
    /** Formatted like count (e.g., "2,847"). */
    likes?: string
    /** Post caption text content. */
    caption?: string
    /** Time since posted (e.g., "2 hours ago"). */
    time?: string
    /** Whether the author has a verified badge. */
    verified?: boolean
  }
}

/**
 * An Instagram post embed component with image, caption, and engagement.
 * Displays the post with like, comment, share, and save actions.
 *
 * Features:
 * - Square aspect ratio image display
 * - Gradient avatar ring for stories indicator
 * - Verified badge support
 * - Action buttons (like, comment, share, save)
 * - Dropdown menu (report, unfollow, copy link, embed)
 * - Like count and caption display
 *
 * @component
 * @example
 * ```tsx
 * <InstagramPost
 *   data={{
 *     author: "manifest.ai",
 *     avatar: "M",
 *     image: "https://example.com/photo.jpg",
 *     likes: "2,847",
 *     caption: "Check out this amazing view!",
 *     time: "2 hours ago",
 *     verified: true
 *   }}
 * />
 * ```
 */
export function InstagramPost({ data }: InstagramPostProps) {
  const resolved: NonNullable<InstagramPostProps['data']> = data ?? demoInstagramPost
  const author = resolved?.author
  const avatar = resolved?.avatar
  const image = resolved?.image
  const likes = resolved?.likes
  const caption = resolved?.caption
  const time = resolved?.time
  const verified = resolved?.verified

  if (!author && !image && !caption) {
    return null
  }

  return (
    <div className="rounded-xl border bg-card overflow-hidden">
      {(author || avatar) && (
        <div className="flex items-center justify-between p-3">
          <div className="flex items-center gap-2">
            {avatar && (
              <div className="h-8 w-8 rounded-full bg-gradient-to-br from-[#833AB4] via-[#FD1D1D] to-[#F77737] p-0.5">
                <div className="h-full w-full rounded-full bg-card flex items-center justify-center text-xs font-semibold">
                  {avatar}
                </div>
              </div>
            )}
            <div className="flex items-center gap-1">
              {author && <span className="font-semibold text-sm">{author}</span>}
              {verified && (
                <svg className="h-3.5 w-3.5 text-blue-500" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484z" />
                </svg>
              )}
            </div>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger render={<button className="text-foreground hover:text-muted-foreground transition-colors cursor-pointer" />}><MoreHorizontal className="h-5 w-5" /></DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem>
                <Flag className="mr-2 h-4 w-4" />
                Report
              </DropdownMenuItem>
              <DropdownMenuItem>
                <UserMinus className="mr-2 h-4 w-4" />
                Unfollow
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem>
                <Link className="mr-2 h-4 w-4" />
                Copy link
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Code className="mr-2 h-4 w-4" />
                Embed
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      )}
      {image && (
        <div className="aspect-square bg-muted">
          <img src={image} alt={author ? `Instagram post by ${author}` : 'Instagram post'} className="w-full h-full object-cover" />
        </div>
      )}
      {(likes || caption || time) && (
        <div className="p-3 space-y-2">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <button aria-label="Like" className="hover:text-muted-foreground transition-colors cursor-pointer">
                <Heart className="h-6 w-6" />
              </button>
              <button aria-label="Comment" className="hover:text-muted-foreground transition-colors cursor-pointer">
                <MessageCircle className="h-6 w-6" />
              </button>
              <button aria-label="Share" className="hover:text-muted-foreground transition-colors cursor-pointer">
                <Send className="h-6 w-6" />
              </button>
            </div>
            <button aria-label="Save" className="hover:text-muted-foreground transition-colors cursor-pointer">
              <Bookmark className="h-6 w-6" />
            </button>
          </div>
          {likes && <p className="font-semibold text-sm">{likes} likes</p>}
          {(author || caption) && (
            <p className="text-sm">
              {author && <span className="font-semibold">{author}</span>}
              {author && caption && " "}
              {caption}
            </p>
          )}
          {time && <p className="text-xs text-muted-foreground">{time}</p>}
        </div>
      )}
    </div>
  )
}
