"use client"

import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useMaterial } from "@/contexts/material-context"
import { cn } from "@/lib/utils"
import {
  Home,
  Bell,
  MessageSquare,
  User,
  Search,
  MoreHorizontal,
  Heart,
  MessageCircle,
  Repeat2,
  Share2,
  ImageIcon,
  Smile,
  Bookmark,
} from "lucide-react"

export function SocialFeedExample() {
  const { selectedMaterial, getThemeAwareClass } = useMaterial()
  const materialClass = selectedMaterial ? getThemeAwareClass(selectedMaterial) : ""

  const posts = [
    {
      user: {
        name: "Jane Cooper",
        handle: "@janecooper",
        avatar: "/diverse-person-portrait.png",
      },
      content:
        "Just launched my new portfolio website! Check it out and let me know what you think. #webdesign #portfolio",
      time: "2h ago",
      likes: 24,
      comments: 5,
      shares: 2,
      hasImage: true,
      image: "/placeholder.svg?key=r0u46",
    },
    {
      user: {
        name: "Alex Morgan",
        handle: "@alexmorgan",
        avatar: "/diverse-avatars.png",
      },
      content: "Working on a new design system for our product. Excited to share more details soon!",
      time: "5h ago",
      likes: 42,
      comments: 8,
      shares: 3,
      hasImage: false,
    },
  ]

  return (
    <div className="w-full h-full bg-background-secondary overflow-auto flex flex-col">
      {/* Header */}
      <div className={cn("flex justify-between items-center p-4 border-b", materialClass)}>
        <div className="flex items-center gap-2">
          <MessageSquare className="h-5 w-5 text-primary" />
          <h1 className="text-lg font-semibold">SocialConnect</h1>
        </div>
        <div className="flex items-center gap-2">
          <div className="relative hidden md:flex items-center">
            <Search className="h-4 w-4 absolute left-2.5 text-muted-foreground" />
            <Input placeholder="Search..." className="pl-8 w-[200px] h-9" />
          </div>
        </div>
      </div>

      <div className="flex h-[calc(100%-64px)]">
        {/* Sidebar */}
        <div className={cn("w-16 md:w-56 border-r flex flex-col items-center md:items-start p-4", materialClass)}>
          <div className="space-y-1 w-full">
            <Button variant="ghost" className="w-full justify-start" size="lg">
              <Home className="h-5 w-5 md:mr-2" />
              <span className="hidden md:inline">Home</span>
            </Button>
            <Button variant="ghost" className="w-full justify-start" size="lg">
              <Bell className="h-5 w-5 md:mr-2" />
              <span className="hidden md:inline">Notifications</span>
            </Button>
            <Button variant="ghost" className="w-full justify-start" size="lg">
              <MessageCircle className="h-5 w-5 md:mr-2" />
              <span className="hidden md:inline">Messages</span>
            </Button>
            <Button variant="ghost" className="w-full justify-start" size="lg">
              <Bookmark className="h-5 w-5 md:mr-2" />
              <span className="hidden md:inline">Bookmarks</span>
            </Button>
            <Button variant="ghost" className="w-full justify-start" size="lg">
              <User className="h-5 w-5 md:mr-2" />
              <span className="hidden md:inline">Profile</span>
            </Button>
          </div>
          <div className="mt-auto w-full">
            <Button className="w-full mt-4">
              <span className="hidden md:inline">Post</span>
              <span className="md:hidden">+</span>
            </Button>
          </div>
        </div>

        {/* Main Content */}
        <div className="flex-1 overflow-auto">
          {/* Tabs */}
          <div className="p-4 border-b">
            <Tabs defaultValue="for-you" className="w-full">
              <TabsList className="w-full">
                <TabsTrigger value="for-you" className="flex-1">
                  For You
                </TabsTrigger>
                <TabsTrigger value="following" className="flex-1">
                  Following
                </TabsTrigger>
                <TabsTrigger value="trending" className="flex-1">
                  Trending
                </TabsTrigger>
              </TabsList>
            </Tabs>
          </div>

          {/* New Post Input */}
          <div className="p-4 border-b">
            <div className="flex gap-3">
              <Avatar>
                <AvatarImage src="/diverse-avatars.png" />
                <AvatarFallback>ME</AvatarFallback>
              </Avatar>
              <div className="flex-1">
                <Input placeholder="What's happening?" className="mb-2" />
                <div className="flex justify-between items-center">
                  <div className="flex gap-2">
                    <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
                      <ImageIcon className="h-4 w-4 text-primary" />
                    </Button>
                    <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
                      <Smile className="h-4 w-4 text-primary" />
                    </Button>
                  </div>
                  <Button size="sm">Post</Button>
                </div>
              </div>
            </div>
          </div>

          {/* Posts */}
          <div className="p-4 space-y-4">
            {posts.map((post, i) => (
              <Card key={i} className={cn(materialClass)}>
                <CardHeader className="p-4 pb-0 flex flex-row items-start space-y-0 gap-3">
                  <Avatar>
                    <AvatarImage src={post.user.avatar || "/placeholder.svg"} />
                    <AvatarFallback>{post.user.name.charAt(0)}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="flex items-center justify-between">
                      <div>
                        <span className="font-medium">{post.user.name}</span>
                        <span className="text-muted-foreground text-sm ml-1">{post.user.handle}</span>
                      </div>
                      <div className="flex items-center">
                        <span className="text-xs text-muted-foreground">{post.time}</span>
                        <Button variant="ghost" size="icon" className="h-8 w-8 ml-1">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </CardHeader>
                <CardContent className="p-4 pt-2">
                  <p className="mb-3">{post.content}</p>
                  {post.hasImage && (
                    <div className="rounded-lg overflow-hidden mb-3">
                      <img
                        src={post.image || "/placeholder.svg"}
                        alt="Post image"
                        className="w-full h-auto object-cover"
                      />
                    </div>
                  )}
                </CardContent>
                <CardFooter className="p-4 pt-0 flex justify-between">
                  <Button variant="ghost" size="sm" className="text-muted-foreground">
                    <Heart className="h-4 w-4 mr-1" />
                    {post.likes}
                  </Button>
                  <Button variant="ghost" size="sm" className="text-muted-foreground">
                    <MessageCircle className="h-4 w-4 mr-1" />
                    {post.comments}
                  </Button>
                  <Button variant="ghost" size="sm" className="text-muted-foreground">
                    <Repeat2 className="h-4 w-4 mr-1" />
                    {post.shares}
                  </Button>
                  <Button variant="ghost" size="sm" className="text-muted-foreground">
                    <Share2 className="h-4 w-4" />
                  </Button>
                </CardFooter>
              </Card>
            ))}
          </div>
        </div>

        {/* Right Sidebar - Trending/Suggestions */}
        <div className={cn("w-72 border-l p-4 hidden lg:block", materialClass)}>
          <div className="mb-6">
            <h3 className="font-medium mb-3">Who to follow</h3>
            <div className="space-y-3">
              {[
                { name: "Leslie Alexander", handle: "@lesliealex", avatar: "/diverse-group-conversation.png" },
                { name: "Michael Foster", handle: "@michaelf", avatar: "/diverse-group-meeting.png" },
              ].map((user, i) => (
                <div key={i} className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src={user.avatar || "/placeholder.svg"} />
                      <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
                    </Avatar>
                    <div>
                      <p className="text-sm font-medium">{user.name}</p>
                      <p className="text-xs text-muted-foreground">{user.handle}</p>
                    </div>
                  </div>
                  <Button variant="outline" size="sm" className="h-8">
                    Follow
                  </Button>
                </div>
              ))}
            </div>
          </div>

          <div>
            <h3 className="font-medium mb-3">Trending Topics</h3>
            <div className="space-y-3">
              {[
                { topic: "#WebDesign", posts: "12.5k posts" },
                { topic: "#UXResearch", posts: "8.2k posts" },
                { topic: "#AITrends", posts: "24.1k posts" },
              ].map((trend, i) => (
                <div key={i} className="space-y-1">
                  <p className="text-sm font-medium">{trend.topic}</p>
                  <p className="text-xs text-muted-foreground">{trend.posts}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}