"use client";

import React, { useState, useEffect } from 'react';
import { MessageCircle, Send, X, Minimize2, Maximize2, Monitor, Terminal, Cpu, HardDrive } from 'lucide-react';
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";

const Footer = ({ className = "", shortcuts }) => {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const [isMobile, setIsMobile] = useState(false);
  const [currentTime, setCurrentTime] = useState(new Date());

  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768);
    };
    checkMobile();
    window.addEventListener('resize', checkMobile);

    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);

    return () => {
      window.removeEventListener('resize', checkMobile);
      clearInterval(timer);
    };
  }, []);

  const defaultShortcuts = [
    [
      { key: "F1", label: "Help", action: () => addSystemMessage("F1: Help system activated") },
      { key: "F2", label: "Save", action: () => addSystemMessage("F2: Save operation") },
      { key: "F3", label: "Search", action: () => addSystemMessage("F3: Search mode") },
      { key: "F4", label: "Edit", action: () => addSystemMessage("F4: Edit mode") },
      { key: "F5", label: "Refresh", action: () => addSystemMessage("F5: System refresh") },
      { key: "F6", label: "Copy", action: () => addSystemMessage("F6: Copy operation") },
      { key: "F7", label: "use client", action: () => addSystemMessage("F7: use client operation") },
      { key: "F8", label: "Delete", action: () => addSystemMessage("F8: Delete operation") },
      { key: "F9", label: "Menu", action: () => addSystemMessage("F9: Menu opened") },
      { key: "F10", label: "Exit", action: () => addSystemMessage("F10: Exit requested") },
    ],
    [
      { key: "Ctrl+N", label: "New", action: () => addSystemMessage("New file created") },
      { key: "Ctrl+O", label: "Open", action: () => addSystemMessage("Open file dialog") },
      { key: "Ctrl+S", label: "Save", action: () => addSystemMessage("File saved") },
      { key: "Ctrl+P", label: "Print", action: () => addSystemMessage("Print dialog") },
      { key: "Ctrl+X", label: "Cut", action: () => addSystemMessage("Cut to clipboard") },
      { key: "Ctrl+C", label: "Copy", action: () => addSystemMessage("Copied to clipboard") },
      { key: "Ctrl+V", label: "Paste", action: () => addSystemMessage("Pasted from clipboard") },
      { key: "Ctrl+Z", label: "Undo", action: () => addSystemMessage("Undo last action") },
      { key: "Ctrl+Y", label: "Redo", action: () => addSystemMessage("Redo last action") },
      { key: "Ctrl+A", label: "Select", action: () => addSystemMessage("Select all") },
    ]
  ];

  const shortcutGroups = shortcuts || defaultShortcuts;

  const addSystemMessage = (text) => {
    setMessages(prev => [...prev, { text, sender: 'system', timestamp: new Date() }]);
  };

  const handleSendMessage = () => {
    if (inputValue.trim() !== '') {
      const userMessage = { text: inputValue, sender: 'user', timestamp: new Date() };
      setMessages(prev => [...prev, userMessage]);
      setInputValue('');
      setTimeout(() => {
        const responses = [
          "SYSTEM: Command processed successfully",
          "ASSISTANT: Processing your request...",
          "BOT: I understand your query. How can I assist further?",
          "SYSTEM: Operation completed. Status: OK",
          "ASSISTANT: Ready for next command",
        ];
        const randomResponse = responses[Math.floor(Math.random() * responses.length)];
        setMessages(prev => [...prev, { text: randomResponse, sender: 'bot', timestamp: new Date() }]);
      }, 800);
    }
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      handleSendMessage();
    }
  };

  const formatTime = (date) => {
    return date.toLocaleTimeString('en-US', {
      hour12: false,
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
  };

  const formatShortcutKey = (key) => {
    const parts = key.split(/(\+)/);
    return parts.map((part, index) => {
      if (part === '+') {
        return part;
      }
      return <span key={index} className="text-primary">{part}</span>;
    });
  };

  if (isMobile) {
    return (
      <div className={`h-80 bg-background border-t border-border ${className}`}>
        <ResizablePanelGroup direction="vertical" className="h-full">
          <ResizablePanel defaultSize={40} minSize={30}>
            <div className="h-full flex flex-col bg-card border-b border-border">
              <div className="flex items-center justify-between p-2 bg-muted border-b border-border">
                <div className="flex items-center gap-2">
                  <Terminal className="w-4 h-4 text-primary" />
                  <span className="text-sm font-mono text-foreground">MOBILE TERMINAL</span>
                </div>
                <div className="text-xs text-muted-foreground font-mono">
                  {formatTime(currentTime)}
                </div>
              </div>
              <div className="flex-1 p-3">
                <div className="flex items-center gap-2 bg-background border border-input rounded-md">
                  <span className="text-primary text-sm font-mono pl-3">></span>
                  <input
                    placeholder="Enter command..."
                    className="flex-1 bg-transparent text-foreground placeholder:text-muted-foreground border-0 outline-none py-2 pr-3 text-sm font-mono"
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                    onKeyPress={handleKeyPress}
                  />
                  <button
                    onClick={handleSendMessage}
                    className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-r-md px-3 py-2 text-sm font-mono transition-colors flex items-center gap-1"
                  >
                    <Send className="w-3 h-3" />
                  </button>
                </div>
              </div>
            </div>
          </ResizablePanel>
          <ResizableHandle />
          <ResizablePanel defaultSize={60} minSize={40}>
            <div className="h-full flex flex-col bg-card">
              <div className="flex items-center justify-between p-2 bg-muted border-b border-border">
                <div className="flex items-center gap-2">
                  <Monitor className="w-4 h-4 text-primary" />
                  <span className="text-sm font-mono text-foreground">OUTPUT</span>
                </div>
                <div className="flex items-center gap-1">
                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
                  <span className="text-xs text-muted-foreground font-mono">READY</span>
                </div>
              </div>
              <div className="flex-1 p-3 overflow-y-auto bg-background font-mono text-sm">
                {messages.length === 0 ? (
                  <div className="text-muted-foreground text-center py-8">
                    <div className="animate-pulse text-primary">● SYSTEM READY ●</div>
                    <div className="mt-2 text-xs">Awaiting input...</div>
                  </div>
                ) : (
                  messages.map((message, index) => (
                    <div key={index} className="mb-3">
                      <div className="text-xs text-muted-foreground mb-1">
                        [{formatTime(message.timestamp)}] {message.sender.toUpperCase()}:
                      </div>
                      <div className={`p-2 rounded border ${
                        message.sender === 'user'
                          ? 'bg-primary/10 border-primary text-foreground'
                          : message.sender === 'system'
                          ? 'bg-accent/50 border-accent text-accent-foreground'
                          : 'bg-secondary/50 border-secondary text-secondary-foreground'
                      }`}>
                        {message.text}
                      </div>
                    </div>
                  ))
                )}
              </div>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>
    );
  }

  return (
    <div className={`h-48 bg-background border-t border-border ${className}`}>
      <ResizablePanelGroup direction="horizontal" className="h-full">
        <ResizablePanel defaultSize={30} minSize={20} maxSize={50}>
          <div className="h-full flex flex-col bg-card">
            <div className="flex items-center justify-between px-3 py-1 bg-muted border-b border-border">
              <div className="flex items-center gap-2">
                <Cpu className="w-3 h-3 text-primary" />
                <span className="text-xs font-mono text-foreground">SYSTEM v3.0</span>
              </div>
              <div className="flex items-center gap-2">
                <HardDrive className="w-3 h-3 text-muted-foreground" />
                <span className="text-xs font-mono text-muted-foreground">{formatTime(currentTime)}</span>
                <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
              </div>
            </div>
            <div className="flex-1 flex items-center px-2 border-b border-border bg-secondary/20">
              <div className="flex items-center gap-1 overflow-x-auto w-full pb-1">
                {shortcutGroups[0].map((shortcut, index) => (
                  <button
                    key={index}
                    className="flex items-center text-xs cursor-pointer hover:bg-accent hover:text-accent-foreground px-2 py-1 rounded transition-colors min-w-fit border border-border hover:border-primary bg-background"
                    onClick={shortcut.action}
                  >
                    <span className="font-bold text-primary mr-1">{formatShortcutKey(shortcut.key)}</span>
                    <span className="text-muted-foreground">{shortcut.label}</span>
                  </button>
                ))}
              </div>
            </div>
            <div className="flex-1 flex items-center px-2 bg-secondary/20">
              <div className="flex items-center gap-1 overflow-x-auto w-full pb-1">
                {shortcutGroups[1].map((shortcut, index) => (
                  <button
                    key={index}
                    className="flex items-center text-xs cursor-pointer hover:bg-accent hover:text-accent-foreground px-2 py-1 rounded transition-colors min-w-fit border border-border hover:border-primary bg-background"
                    onClick={shortcut.action}
                  >
                    <span className="font-bold text-primary mr-1">{formatShortcutKey(shortcut.key)}</span>
                    <span className="text-muted-foreground">{shortcut.label}</span>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={30} minSize={20} maxSize={50}>
          <div className="h-full flex flex-col bg-card border-r border-border">
            <div className="flex items-center justify-between p-2 bg-muted border-b border-border">
              <div className="flex items-center gap-2">
                <Terminal className="w-4 h-4 text-primary" />
                <span className="text-sm font-mono text-foreground">INPUT</span>
              </div>
              <div className="text-xs text-muted-foreground font-mono">
                CMD
              </div>
            </div>
            <div className="flex-1 p-3 bg-background">
              <div className="h-full flex flex-col">
                <div className="text-xs text-muted-foreground mb-2 font-mono">
                  COMMAND LINE INTERFACE
                </div>
                <div className="flex-1 bg-card border border-input rounded-md p-3 font-mono text-sm">
                  <div className="flex items-start gap-2">
                    <span className="text-primary">></span>
                    <textarea
                      placeholder="Enter your command or query here..."
                      className="flex-1 bg-transparent text-foreground placeholder:text-muted-foreground border-0 outline-none resize-none min-h-20"
                      value={inputValue}
                      onChange={(e) => setInputValue(e.target.value)}
                      onKeyPress={(e) => {
                        if (e.key === 'Enter' && !e.shiftKey) {
                          e.preventDefault();
                          handleSendMessage();
                        }
                      }}
                    />
                  </div>
                </div>
                <div className="mt-2 flex justify-between items-center">
                  <div className="text-xs text-muted-foreground font-mono">
                    Enter to send • Shift+Enter for new line
                  </div>
                  <button
                    onClick={handleSendMessage}
                    className="bg-primary text-primary-foreground hover:bg-primary/90 rounded px-3 py-1 text-xs font-mono transition-colors flex items-center gap-1"
                  >
                    <Send className="w-3 h-3" />
                    SEND
                  </button>
                </div>
              </div>
            </div>
          </div>
        </ResizablePanel>
        <ResizableHandle />
        <ResizablePanel defaultSize={40} minSize={25}>
          <div className="h-full flex flex-col bg-card">
            <div className="flex items-center justify-between p-2 bg-muted border-b border-border">
              <div className="flex items-center gap-2">
                <Monitor className="w-4 h-4 text-primary" />
                <span className="text-sm font-mono text-foreground">OUTPUT</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-xs text-muted-foreground font-mono">
                  MSG: {messages.length}
                </span>
                <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
              </div>
            </div>
            <div className="flex-1 p-3 overflow-y-auto bg-background font-mono text-sm">
              {messages.length === 0 ? (
                <div className="text-muted-foreground text-center py-8">
                  <div className="animate-pulse text-primary text-lg">● SYSTEM READY ●</div>
                  <div className="mt-2 text-xs">
                    <div>Waiting for input...</div>
                    <div className="mt-1 text-muted-foreground/70">
                      Use F-keys or Ctrl commands
                    </div>
                  </div>
                </div>
              ) : (
                <div className="space-y-3">
                  {messages.map((message, index) => (
                    <div key={index} className="group">
                      <div className="text-xs text-muted-foreground mb-1 flex justify-between">
                        <span>[{formatTime(message.timestamp)}] {message.sender.toUpperCase()}:</span>
                        <span>#{index + 1}</span>
                      </div>
                      <div className={`p-3 rounded border transition-all group-hover:shadow-sm ${
                        message.sender === 'user'
                          ? 'bg-primary/10 border-primary text-foreground'
                          : message.sender === 'system'
                          ? 'bg-accent/50 border-accent text-accent-foreground'
                          : 'bg-secondary/50 border-secondary text-secondary-foreground'
                      }`}>
                        <div className="whitespace-pre-wrap break-words">
                          {message.text}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
            <div className="flex items-center justify-between px-3 py-1 bg-muted border-t border-border">
              <div className="text-xs text-muted-foreground font-mono">
                Ready for input
              </div>
              <div className="flex items-center gap-2">
                <div className="text-xs text-muted-foreground font-mono">
                  SCROLL: {messages.length > 10 ? 'AUTO' : 'MANUAL'}
                </div>
                <div className="w-1 h-1 bg-primary rounded-full animate-pulse" />
              </div>
            </div>
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  );
};

export default Footer;