'use client';

import { useState, useRef, useEffect } from 'react';

type Message = {
  id: string;
  role: 'user' | 'agent';
  text?: string;
  imageUrl?: string;
  videoUrl?: string;
};

export default function AgentInterface() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const scrollRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [messages]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim() || loading) return;

    const userMsg: Message = { id: Date.now().toString(), role: 'user', text: input };
    setMessages(prev => [...prev, userMsg]);
    setInput('');
    setLoading(true);

    try {
      // Very basic command parsing for demonstrating capabilities
      const isImageRequest = userMsg.text?.toLowerCase().includes('generate image');
      const isVideoRequest = userMsg.text?.toLowerCase().includes('generate video');

      let action = 'chat';
      if (isImageRequest) action = 'generate-image';
      if (isVideoRequest) action = 'generate-video';

      const res = await fetch('/api/gemini', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          action,
          prompt: userMsg.text,
          history: messages.map(m => ({ role: m.role === 'agent' ? 'model' : 'user', text: m.text || '' }))
        }),
      });

      const data = await res.json();
      
      if (data.error) throw new Error(data.error);

      if (action === 'chat') {
        setMessages(prev => [...prev, {
          id: Date.now().toString(),
          role: 'agent',
          text: data.text
        }]);
      } else if (action === 'generate-image') {
        setMessages(prev => [...prev, {
          id: Date.now().toString(),
          role: 'agent',
          text: 'Generated image as requested.',
          imageUrl: data.imageUrl
        }]);
      } else if (action === 'generate-video') {
        // Mock video flow - normally we'd poll video-status but we'll simulate the response
        // because video takes a long time.
        setMessages(prev => [...prev, {
          id: Date.now().toString(),
          role: 'agent',
          text: `Video generation started. Operation ID: ${data.operationName}. Use dashboard logs to monitor progress.`
        }]);
      }
    } catch (err: any) {
      setMessages(prev => [...prev, {
        id: Date.now().toString(),
        role: 'agent',
        text: `[SYSTEM ERROR]: ${err.message}`
      }]);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex flex-col h-full border border-[var(--color-slate-dark)]">
      <div className="bg-[var(--color-slate-base)] text-[var(--color-slate-ink)] p-[13px] font-mono text-[13px] uppercase tracking-widest border-b border-[var(--color-slate-dark)]">
        Autonomous Agent Workflow
      </div>
      
      <div className="flex-1 overflow-y-auto p-[21px] space-y-[21px]" ref={scrollRef}>
        {messages.length === 0 && (
          <div className="text-[var(--color-slate-dark)] font-mono text-[13px]">
            [Agent system initialized. Awaiting directives.]
          </div>
        )}
        
        {messages.map(msg => (
          <div key={msg.id} className={`flex flex-col ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
            <div className={`
              font-mono text-[13px] max-w-[89%] p-[13px] 
              ${msg.role === 'user' 
                ? 'bg-[var(--color-slate-ink)] text-[var(--color-slate-surface)]' 
                : 'bg-[var(--color-slate-light)] text-[var(--color-slate-ink)]'}
            `}>
              {msg.text && (
                <div className="whitespace-pre-wrap">{msg.text}</div>
              )}
              {msg.imageUrl && (
                <img src={msg.imageUrl} alt="Generated Asset" className="mt-[13px] max-w-full" />
              )}
            </div>
          </div>
        ))}
        {loading && (
          <div className="font-mono text-[13px] text-[var(--color-slate-dark)] p-[13px]">
            [Processing...]
          </div>
        )}
      </div>

      <div className="p-[13px] border-t border-[var(--color-slate-dark)] bg-[var(--color-slate-surface-alt)]">
        <form onSubmit={handleSubmit} className="flex gap-[8px]">
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="INPUT DIRECTIVE..."
            className="flex-1 bg-transparent border border-[var(--color-slate-dark)] p-[8px] font-mono text-[13px] text-[var(--color-slate-ink)] focus:outline-none focus:border-[var(--color-slate-ink)] placeholder-[var(--color-slate-dark)]"
          />
          <button 
            type="submit" 
            disabled={loading}
            className="bg-[var(--color-slate-ink)] text-[var(--color-slate-surface)] px-[21px] py-[8px] font-mono text-[13px] uppercase tracking-widest disabled:opacity-50 transition-opacity"
          >
            Execute
          </button>
        </form>
      </div>
    </div>
  );
}