"use client"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { useMaterial } from "@/contexts/material-context"
import { cn } from "@/lib/utils"
import {
  Search,
  Settings,
  Edit,
  Phone,
  Video,
  Info,
  Smile,
  Paperclip,
  Send,
  MoreVertical,
  ChevronDown,
  ImageIcon,
  File,
  Mic,
} from "lucide-react"
import { useState } from "react"

export function MessagingAppExample() {
  const { selectedMaterial, getThemeAwareClass } = useMaterial()
  const materialClass = selectedMaterial ? getThemeAwareClass(selectedMaterial) : ""
  const [message, setMessage] = useState("")

  const contacts = [
    {
      name: "Sarah Johnson",
      status: "online",
      lastMessage: "Sure, let's meet at 3pm tomorrow",
      time: "10:42 AM",
      unread: 0,
      avatar: "/diverse-person-portrait.png",
    },
    {
      name: "Design Team",
      status: "online",
      lastMessage: "Alex: I've updated the mockups",
      time: "9:30 AM",
      unread: 3,
      avatar: "/diverse-group-conversation.png",
      isGroup: true,
    },
    {
      name: "Michael Chen",
      status: "offline",
      lastMessage: "Thanks for the feedback!",
      time: "Yesterday",
      unread: 0,
      avatar: "/diverse-avatars.png",
    },
    {
      name: "Emma Wilson",
      status: "online",
      lastMessage: "Can you send me the files?",
      time: "Yesterday",
      unread: 0,
      avatar: "/diverse-group-meeting.png",
    },
  ]

  const messages = [
    {
      id: 1,
      sender: "Sarah Johnson",
      content: "Hi there! How's the project coming along?",
      time: "10:30 AM",
      isMe: false,
    },
    {
      id: 2,
      sender: "Me",
      content: "Hey Sarah! It's going well. I've finished the initial designs and I'm working on the prototypes now.",
      time: "10:32 AM",
      isMe: true,
    },
    {
      id: 3,
      sender: "Sarah Johnson",
      content: "That sounds great! When do you think you'll be able to share them with the team?",
      time: "10:35 AM",
      isMe: false,
    },
    {
      id: 4,
      sender: "Me",
      content: "I'm planning to have everything ready by tomorrow afternoon. Would 3pm work for a review meeting?",
      time: "10:38 AM",
      isMe: true,
    },
    {
      id: 5,
      sender: "Sarah Johnson",
      content: "Sure, let's meet at 3pm tomorrow. I'll send out a calendar invite to the team.",
      time: "10:42 AM",
      isMe: false,
    },
  ]

  return (
    <div className="w-full h-full bg-background-secondary overflow-auto flex flex-col">
      {/* Sidebar - Contacts */}
      <div className={cn("w-80 border-r flex flex-col", materialClass)}>
        <div className="p-4 border-b flex items-center justify-between">
          <h1 className="text-lg font-semibold">Messages</h1>
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
              <Settings className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
              <Edit className="h-4 w-4" />
            </Button>
          </div>
        </div>

        <div className="p-4">
          <div className="relative mb-4">
            <Search className="h-4 w-4 absolute left-3 top-2.5 text-muted-foreground" />
            <Input placeholder="Search messages" className="pl-9" />
          </div>

          <div className="space-y-1">
            {contacts.map((contact, i) => (
              <Button
                key={i}
                variant="ghost"
                className={cn("w-full justify-start text-left h-auto py-3 px-3", i === 0 && "bg-accent")}
              >
                <div className="flex items-center gap-3 w-full">
                  <div className="relative">
                    <Avatar>
                      <AvatarImage src={contact.avatar || "/placeholder.svg"} />
                      <AvatarFallback>{contact.name.charAt(0)}</AvatarFallback>
                    </Avatar>
                    {contact.status === "online" && (
                      <span className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 border-2 border-background"></span>
                    )}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex justify-between items-center">
                      <p className="font-medium truncate">{contact.name}</p>
                      <p className="text-xs text-muted-foreground whitespace-nowrap">{contact.time}</p>
                    </div>
                    <div className="flex justify-between items-center">
                      <p className="text-sm text-muted-foreground truncate">{contact.lastMessage}</p>
                      {contact.unread > 0 && <Badge className="ml-2">{contact.unread}</Badge>}
                    </div>
                  </div>
                </div>
              </Button>
            ))}
          </div>
        </div>
      </div>

      {/* Main Chat Area */}
      <div className="flex-1 flex flex-col">
        {/* Chat Header */}
        <div className={cn("p-4 border-b flex items-center justify-between", materialClass)}>
          <div className="flex items-center gap-3">
            <Avatar>
              <AvatarImage src="/diverse-person-portrait.png" />
              <AvatarFallback>SJ</AvatarFallback>
            </Avatar>
            <div>
              <div className="flex items-center gap-1">
                <h2 className="font-medium">Sarah Johnson</h2>
                <span className="text-xs text-green-500">• Online</span>
              </div>
              <p className="text-xs text-muted-foreground">Last active 2m ago</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
              <Phone className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
              <Video className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
              <Info className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
              <MoreVertical className="h-4 w-4" />
            </Button>
          </div>
        </div>

        {/* Messages */}
        <div className="flex-1 p-4 overflow-auto">
          <div className="space-y-4">
            {messages.map((msg) => (
              <div key={msg.id} className={cn("flex", msg.isMe ? "justify-end" : "justify-start")}>
                <div className="flex gap-3 max-w-[80%]">
                  {!msg.isMe && (
                    <Avatar className="h-8 w-8">
                      <AvatarImage src="/diverse-person-portrait.png" />
                      <AvatarFallback>SJ</AvatarFallback>
                    </Avatar>
                  )}
                  <div>
                    <div className={cn("rounded-lg p-3", msg.isMe ? "bg-primary text-primary-foreground" : "bg-muted")}>
                      <p className="text-sm">{msg.content}</p>
                    </div>
                    <p className="text-xs text-muted-foreground mt-1">{msg.time}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Message Input */}
        <div className={cn("p-4 border-t", materialClass)}>
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="icon" className="h-9 w-9 rounded-full">
              <Smile className="h-5 w-5" />
            </Button>
            <div className="relative flex-1">
              <Input
                placeholder="Type a message..."
                className="pr-20"
                value={message}
                onChange={(e) => setMessage(e.target.value)}
              />
              <div className="absolute right-2 top-2 flex items-center gap-1">
                <Button variant="ghost" size="icon" className="h-6 w-6 rounded-full">
                  <Paperclip className="h-4 w-4" />
                </Button>
                <Button variant="ghost" size="icon" className="h-6 w-6 rounded-full">
                  <Mic className="h-4 w-4" />
                </Button>
              </div>
            </div>
            <Button size="icon" className="h-9 w-9 rounded-full">
              <Send className="h-4 w-4" />
            </Button>
          </div>
          <div className="flex items-center justify-center mt-2">
            <div className="flex gap-2">
              <Button variant="ghost" size="sm" className="h-7 text-xs">
                <ImageIcon className="h-3.5 w-3.5 mr-1" />
                Photos
              </Button>
              <Button variant="ghost" size="sm" className="h-7 text-xs">
                <File className="h-3.5 w-3.5 mr-1" />
                Files
              </Button>
              <Button variant="ghost" size="sm" className="h-7 text-xs">
                <ChevronDown className="h-3.5 w-3.5 mr-1" />
                More
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}