"use client";
import React, { useState } from 'react';
import {
  MessageCircle, Send, X, Minimize2, Maximize2
} from 'lucide-react';
import { cn } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
const Footer = ({ className=undefined, shortcuts }) => {
  const [isChatOpen, setIsChatOpen] = useState(false);
  const [isChatMinimized, setIsChatMinimized] = useState(false);

  // Expecting shortcuts as an array of two arrays: [ [row1], [row2] ]
  const shortcutGroups = shortcuts || [[], []];

  return (
    <div className={cn("border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", className)}>
      {/* XTreeGold-style two-row footer */}
      <div className="flex flex-col">
        {/* First row - F1-F10 keys */}
        <div className="flex h-8 items-center px-2 border-b">
          <div className="flex items-center gap-4 overflow-x-auto">
            {shortcutGroups[0].map((shortcut, index) => (
              <div
                key={index}
                className="flex items-center text-xs cursor-pointer hover:bg-accent/50 px-1 py-0.5 rounded transition-colors min-w-fit"
                onClick={shortcut.action}
              >
                <span className="font-bold text-blue-600 mr-1">{shortcut.key}</span>
                <span className="text-muted-foreground">{shortcut.label}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Second row - Other keys */}
        <div className="flex h-8 items-center px-2">
          <div className="flex items-center gap-4 overflow-x-auto">
            {shortcutGroups[1].map((shortcut, index) => (
              <div
                key={index}
                className="flex items-center text-xs cursor-pointer hover:bg-accent/50 px-1 py-0.5 rounded transition-colors min-w-fit"
                onClick={shortcut.action}
              >
                <span className="font-bold text-blue-600 mr-1">{shortcut.key}</span>
                <span className="text-muted-foreground">{shortcut.label}</span>
              </div>
            ))}
          </div>

          {/* Right side - Status/AI Assistant */}
          <div className="ml-auto flex items-center gap-2">
            <Badge variant="outline" className="text-xs h-6">
              <span className="text-green-500">●</span> Ready
            </Badge>

            <Button
              variant="ghost"
              size="sm"
              onClick={() => setIsChatOpen(!isChatOpen)}
              className="flex items-center gap-2 text-xs h-6"
            >
              <MessageCircle className="w-3 h-3" />
              <span>Assistant</span>
            </Button>
          </div>
        </div>
      </div>

      {/* Chat Window (optional) */}
      {isChatOpen && !isChatMinimized && (
        <div className="border-t bg-card">
          <div className="h-48 flex flex-col">
            <div className="flex items-center justify-between p-2 border-b bg-muted/30">
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
                <span className="text-xs font-medium">General Bots Assistant</span>
              </div>
              <div className="flex gap-1">
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setIsChatMinimized(!isChatMinimized)}
                  className="h-6 w-6"
                >
                  {isChatMinimized ? <Maximize2 className="w-3 h-3" /> : <Minimize2 className="w-3 h-3" />}
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setIsChatOpen(false)}
                  className="h-6 w-6"
                >
                  <X className="w-3 h-3" />
                </Button>
              </div>
            </div>
            <ScrollArea className="flex-1 p-2">
              <div className="text-xs text-muted-foreground p-4 text-center">
                General Bots Assistant is ready to help with file operations.
              </div>
            </ScrollArea>
            <div className="flex items-center gap-1 p-2 border-t">
              <Input
                placeholder="Ask about your files..."
                className="flex-1 h-7 text-xs"
              />
              <Button size="icon" className="h-7 w-7">
                <Send className="w-3 h-3" />
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Footer;