"use client"

import type React from "react"
import { useState, useRef } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ChatMessages } from "@/components/chat-messages"
import { ChatInput } from "@/components/chat-input"
import { ProviderSelector } from "@/components/provider-selector"
import { SuggestionPills } from "@/components/suggestion-pills"
import { useChat } from "@/hooks/use-chat"
import { Download, Upload, FileText, Copy, Globe, Zap } from "lucide-react"
import type { AIProvider } from "@/types/chat"

interface ChatInterfaceProps {
  messages?: any[]
  onSendMessage?: (message: string) => void
  suggestions?: string[]
  isGenerating?: boolean
}

export function ChatInterface({
  messages: externalMessages,
  onSendMessage: externalSendMessage,
  suggestions: externalSuggestions,
  isGenerating: externalIsGenerating,
}: ChatInterfaceProps) {
  const [selectedProvider, setSelectedProvider] = useState<AIProvider>("openai")
  const [selectedModel, setSelectedModel] = useState<string>("gpt-4o")

  const {
    messages: internalMessages,
    isLoading,
    sendMessage: internalSendMessage,
    suggestions: internalSuggestions,
    clearChat,
    uploadHistory,
    downloadHistory,
    exportHTML,
    copyJSON,
  } = useChat(selectedProvider)

  const fileInputRef = useRef<HTMLInputElement>(null)

  // Use external props if provided, otherwise use internal state
  const messages = externalMessages || internalMessages
  const sendMessage = externalSendMessage || internalSendMessage
  const suggestions = externalSuggestions || internalSuggestions
  const isGenerating = externalIsGenerating || isLoading

  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      uploadHistory(file)
      event.target.value = ""
    }
  }

  return (
    <Card className="w-full h-[700px] flex flex-col">
      <div className="p-4 border-b">
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center gap-3">
            <Badge variant="secondary" className="gap-1">
              <Zap className="h-3 w-3" />
              Software Engineering Agent
            </Badge>
            <Badge variant="outline" className="gap-1">
              <Globe className="h-3 w-3" />
              Website Generator
            </Badge>
          </div>
          <div className="text-sm text-muted-foreground">{messages.length} messages</div>
        </div>

        <div className="flex items-center justify-between">
          <ProviderSelector
            selected={selectedProvider}
            onSelect={setSelectedProvider}
            selectedModel={selectedModel}
            onModelSelect={setSelectedModel}
          />

          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" onClick={() => fileInputRef.current?.click()} className="gap-2">
              <Upload className="h-4 w-4" />
              Import
            </Button>

            <Button variant="outline" size="sm" onClick={downloadHistory} className="gap-2 bg-transparent">
              <Download className="h-4 w-4" />
              JSON
            </Button>

            <Button variant="outline" size="sm" onClick={exportHTML} className="gap-2 bg-transparent">
              <FileText className="h-4 w-4" />
              HTML
            </Button>

            <Button variant="outline" size="sm" onClick={copyJSON} className="gap-2 bg-transparent">
              <Copy className="h-4 w-4" />
              Copy
            </Button>
          </div>
        </div>

        <input ref={fileInputRef} type="file" accept=".json" onChange={handleFileUpload} className="hidden" />
      </div>

      <div className="flex-1 flex flex-col overflow-hidden">
        <ChatMessages messages={messages} isLoading={isGenerating} />

        {suggestions.length > 0 && (
          <div className="p-4 border-t">
            <SuggestionPills suggestions={suggestions} onSelect={sendMessage} />
          </div>
        )}

        <div className="p-4 border-t">
          <ChatInput onSend={sendMessage} isLoading={isGenerating} onClear={clearChat} />
        </div>
      </div>
    </Card>
  )
}