"use client";

import { useState } from "react";
import { useChatWidgetStore } from "@/hooks/useChatWidgetStore";
import { usePresenceStore } from "@/hooks/usePresenceStore";
import { useChatStore } from "@/hooks/useChatStore";
import { useAuthStore } from "@/hooks/useAuthStore";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

export function ChatFooter() {
  const { setMinimized } = useChatWidgetStore();
  const { presenceData } = usePresenceStore();
  const { user } = useAuthStore();
  const { sendMessage } = useChatStore();

  const [message, setMessage] = useState("");

  if (!user) return null;

  return (
    <Card className="p-3 border-t border-border">
      <CardContent className="flex items-center gap-3 py-3">
        <Avatar className="h-8 w-8">
          <AvatarImage src={user.image || undefined} alt={user.name || "User"} />
          <AvatarFallback>{user.name?.charAt(0) || "?"}</AvatarFallback>
        </Avatar>
        <div className="flex-1">
          <Input
            placeholder="Type a message..."
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault();
                if (message.trim()) {
                  sendMessage(message.trim());
                  setMessage("");
                }
              }
            }}
            className="h-8"
          />
        </div>
        <Button
          variant="ghost"
          size="sm"
          disabled={!message.trim()}
          onClick={() => {
            if (message.trim()) {
              sendMessage(message.trim());
              setMessage("");
            }
          }}
        >
          Send
        </Button>
        <Badge variant="secondary" className="text-xs">
          {presenceData?.users?.length || 0} online
        </Badge>
      </CardContent>
    </Card>
  );
}