"use client"

import { useState, useRef, useEffect, Fragment, forwardRef, useImperativeHandle, useCallback } from "react"
import { Bot, Terminal } from "lucide-react"

function linkifyText(text: string) {
  const urlRegex = /(https?:\/\/[^\s<]+[^\s<.,;:!?)\]}>])/
  const parts = text.split(urlRegex)
  return parts.map((part, i) => {
    if (part.startsWith("http://") || part.startsWith("https://")) {
      return <a key={i} href={part} target="_blank" rel="noopener noreferrer" className="underline text-[#f97316] hover:text-[#f97316]/80">{part}</a>
    }
    return <Fragment key={i}>{part}</Fragment>
  })
}

function formatContent(text: string) {
  const lines = text.split("\n")
  return lines.map((line, i) => {
    const trimmed = line.trim()
    if (trimmed.startsWith("•") || trimmed.startsWith("-")) {
      const content = trimmed.replace(/^[•\-]\s*/, "")
      return (
        <div key={i} className="flex items-start gap-2.5 my-1.5">
          <span className="w-1.5 h-1.5 bg-[#f97316] rounded-sm inline-block mt-2 flex-shrink-0" />
          <span>{linkifyText(content)}</span>
        </div>
      )
    }
    if (line === "") return <div key={i} className="h-2" />
    return <p key={i} className="my-1">{linkifyText(line)}</p>
  })
}

interface ChatMessage {
  role: "user" | "assistant"
  content: string
}

interface AIChatProps {
  onMessageSent?: (msg: string) => void
}

const quickActions = [
  { icon: "✉️", iconBg: "bg-[#f97316]/10", iconColor: "text-[#f97316]", title: "Cold Email Template", desc: "Generate targeted outreach emails", prompt: "Write a cold email template for a Software Developer" },
  { icon: "🛡️", iconBg: "bg-[#3b82f6]/10", iconColor: "text-[#3b82f6]", title: "Handle Objections", desc: "Get scripts for common objections", prompt: "Give me objection handling scripts for sales" },
  { icon: "🎯", iconBg: "bg-[#8b5cf6]/10", iconColor: "text-[#8b5cf6]", title: "Target Industry", desc: "Find leads in specific industries", prompt: "How do I target leads in the tech industry" },
  { icon: "📋", iconBg: "bg-[#22c55e]/10", iconColor: "text-[#22c55e]", title: "Build Lead List", desc: "Strategies to grow your pipeline", prompt: "Help me build a lead list strategy" },
  { icon: "📞", iconBg: "bg-[#f97316]/10", iconColor: "text-[#f97316]", title: "Call Scripts", desc: "Proven phone sales scripts", prompt: "Give me a cold call script for outreach" },
  { icon: "📊", iconBg: "bg-[#ec4899]/10", iconColor: "text-[#ec4899]", title: "Sales Strategy", desc: "Industry specific sales tactics", prompt: "What sales strategies work best per industry" },
]

const commandPills = [
  { icon: "📋", label: "Lists", prompt: "lists" },
  { icon: "👥", label: "Leads", prompt: "leads" },
  { icon: "💡", label: "Tips", prompt: "Give me some sales tips" },
  { icon: "✉️", label: "Templates", prompt: "Show me email templates" },
]

export interface AIChatHandle {
  fillInput: (text: string) => void
  addAssistantMessage: (content: string) => void
}

export const AIChat = forwardRef<AIChatHandle, AIChatProps>(({ onMessageSent }, ref) => {
  const [messages, setMessages] = useState<ChatMessage[]>([])
  const [input, setInput] = useState("")
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")
  const [bootState, setBootState] = useState<"booting" | "ready" | "error">("booting")
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const textareaRef = useRef<HTMLTextAreaElement>(null)
  const hasUserMessage = messages.some(m => m.role === "user")

  useImperativeHandle(ref, () => ({
    fillInput(text: string) {
      setInput(text)
      setTimeout(() => textareaRef.current?.focus(), 50)
    },
    addAssistantMessage(content: string) {
      setMessages((prev) => {
        if (!prev.some((m) => m.role === "user")) {
          return [
            { role: "user", content: "Search Facebook" },
            { role: "assistant", content },
          ]
        }
        return [...prev, { role: "assistant", content }]
      })
    },
  }), [])

  const checkServer = useCallback(async () => {
    try {
      const res = await fetch("/api/ai/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message: "ping" }),
      })
      if (res.status !== 503) {
        setBootState("ready")
      } else {
        setTimeout(checkServer, 2000)
      }
    } catch {
      setTimeout(checkServer, 2000)
    }
  }, [])

  useEffect(() => {
    fetch("/api/ai/jobs")
      .then((r) => r.json())
      .then((data) => {
        if (data.jobs?.length) {
          const names = data.jobs.map((j: { job_title: string }) => j.job_title)
          setMessages([
            {
              role: "assistant",
              content: `Hi! I'm your Sales AI Assistant. I can help with tips for targeting:\n\n${names.map((n: string) => `• ${n}`).join("\n")}\n\nWhat would you like to know?`,
            },
          ])
        } else {
          setMessages([
            {
              role: "assistant",
              content: "Hi! I'm your Sales AI Assistant. Ask me anything about sales strategies and prospect targeting.",
            },
          ])
        }
      })
      .catch(() => {
        setMessages([
          {
            role: "assistant",
            content: "Hi! I'm your Sales AI Assistant. Ask me anything about sales strategies and prospect targeting.",
          },
        ])
      })
    checkServer()
  }, [checkServer])

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

  const sendMessage = useCallback(async (text?: string) => {
    const msg = (text || input).trim()
    if (!msg || loading) return

    setInput("")
    setError("")
    onMessageSent?.(msg)
    setMessages((prev) => [...prev, { role: "user", content: msg }])
    setLoading(true)

    try {
      const res = await fetch("/api/ai/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message: msg }),
      })

      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        throw new Error(data.error || `Error ${res.status}`)
      }

      const data = await res.json()
      setMessages((prev) => [...prev, { role: "assistant", content: data.response }])
    } catch (err) {
      const errMsg = err instanceof Error ? err.message : "AI service unavailable"
      setError(errMsg)
      setMessages((prev) => [
        ...prev,
        { role: "assistant", content: `⚠️ Error: ${errMsg}. Make sure Ollama is running with the model loaded.` },
      ])
    } finally {
      setLoading(false)
    }
  }, [input, loading, onMessageSent])

  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      sendMessage()
    }
  }, [sendMessage])

  const handleTextareaInput = useCallback((e: React.FormEvent<HTMLTextAreaElement>) => {
    const t = e.target as HTMLTextAreaElement
    t.style.height = "auto"
    t.style.height = t.scrollHeight + "px"
  }, [])

  const handleQuickAction = useCallback((prompt: string) => {
    setInput(prompt)
    setTimeout(() => sendMessage(prompt), 50)
  }, [sendMessage])

  const handleCommandPill = useCallback((prompt: string) => {
    setInput(prompt)
    setTimeout(() => sendMessage(prompt), 50)
  }, [sendMessage])

  if (bootState === "booting") {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="flex flex-col items-center gap-5">
          <p className="text-sm text-[#6b7280] animate-pulse">Servers booting...</p>
          <div className="h-[56px] w-[110px] bg-[#1a1d2e] border border-[#ffffff0f] rounded-xl flex items-center justify-center overflow-hidden">
            <div className="robot-walk relative">
              <svg width="40" height="36" viewBox="0 0 40 36" fill="none">
                <rect x="10" y="2" width="20" height="16" rx="3" fill="#f97316" opacity="0.9"/>
                <rect x="6" y="6" width="6" height="2" rx="1" className="robot-arm-l" fill="#f97316" opacity="0.7"/>
                <rect x="28" y="6" width="6" height="2" rx="1" className="robot-arm-r" fill="#f97316" opacity="0.7"/>
                <rect x="14" y="5" width="4" height="4" rx="1" fill="#0f1117"/>
                <rect x="22" y="5" width="4" height="4" rx="1" fill="#0f1117"/>
                <circle cx="16" cy="7" r="1.5" className="robot-eye" fill="#f97316"/>
                <circle cx="24" cy="7" r="1.5" className="robot-eye" fill="#f97316"/>
                <rect x="17" y="10" width="6" height="2" rx="1" fill="#0f1117"/>
                <rect x="12" y="18" width="5" height="10" rx="2" className="robot-leg-l" fill="#f97316" opacity="0.8"/>
                <rect x="23" y="18" width="5" height="10" rx="2" className="robot-leg-r" fill="#f97316" opacity="0.8"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
    )
  }

  if (bootState === "ready" && !hasUserMessage) {
    return (
      <div className="flex-1 flex flex-col overflow-y-auto" style={{ backgroundImage: "radial-gradient(circle, #ffffff08 1px, transparent 1px)", backgroundSize: "24px 24px" }}>
        <div className="flex-1 flex items-center justify-center">
          <div className="max-w-lg mx-auto pt-12 pb-6 px-4">
            <div className="float-in">
              <div className="w-16 h-16 rounded-2xl mx-auto mb-6 bg-gradient-to-br from-[#f97316] to-[#ea580c] flex items-center justify-center shadow-[0_0_40px_rgba(249,115,22,0.3)]">
                <Bot className="h-8 w-8 text-white" />
              </div>
              <h2 className="text-white font-bold text-2xl text-center mb-2">What can I help you with?</h2>
              <p className="text-[#6b7280] text-sm text-center mb-8 leading-relaxed">Your AI sales assistant is ready. Choose a quick action or type your question below.</p>
            </div>
            <div className="grid grid-cols-2 gap-3">
              {quickActions.map((action, i) => (
                <div
                  key={i}
                  onClick={() => handleQuickAction(action.prompt)}
                  className="float-in bg-[#1a1d2e] hover:bg-[#1f2437] rounded-xl p-4 border border-[#ffffff0a] hover:border-[#f97316]/30 cursor-pointer transition-all duration-200 hover:shadow-[0_4px_20px_rgba(249,115,22,0.1)] hover:-translate-y-0.5"
                  style={{ animationDelay: `${0.1 + i * 0.05}s` }}
                >
                  <div className={`w-9 h-9 rounded-lg ${action.iconBg} ${action.iconColor} flex items-center justify-center text-lg`}>{action.icon}</div>
                  <h3 className="text-white text-sm font-medium mt-3">{action.title}</h3>
                  <p className="text-[#6b7280] text-xs mt-1">{action.desc}</p>
                </div>
              ))}
            </div>
            <div className="flex gap-2 justify-center mt-6 flex-wrap">
              {commandPills.map((pill, i) => (
                <div
                  key={i}
                  onClick={() => handleCommandPill(pill.prompt)}
                  className="bg-[#1a1d2e] border border-[#ffffff0f] hover:border-[#f97316]/40 hover:bg-[#1f2437] rounded-full px-4 py-2 text-xs text-[#9ca3af] hover:text-[#f97316] transition-all duration-200 cursor-pointer flex items-center gap-1.5"
                >
                  <span>{pill.icon}</span>
                  <span>{pill.label}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="sticky bottom-0 bg-[#0f1117]/95 backdrop-blur-md border-t border-[#ffffff08] px-4 py-4">
          <div className="max-w-3xl mx-auto">
            <div className="bg-[#1a1d2e] rounded-2xl border border-[#ffffff0a] focus-within:border-[#f97316]/40 focus-within:shadow-[0_0_20px_rgba(249,115,22,0.08)] transition-all duration-200 flex items-end gap-3 px-4 py-3">
              <button type="button" className="w-8 h-8 rounded-lg text-[#4b5563] hover:text-[#f97316] hover:bg-[#ffffff08] flex items-center justify-center transition-colors duration-200 flex-shrink-0 text-lg">📎</button>
              <textarea
                ref={textareaRef}
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onInput={handleTextareaInput}
                onKeyDown={handleKeyDown}
                placeholder="Ask for sales tips..."
                rows={1}
                className="bg-transparent flex-1 text-[#e5e7eb] text-sm placeholder-[#4b5563] resize-none outline-none min-h-[24px] max-h-[200px] overflow-y-auto leading-6"
              />
              <button
                type="button"
                onClick={() => sendMessage()}
                disabled={!input.trim()}
                className={`w-9 h-9 rounded-xl flex-shrink-0 bg-gradient-to-br from-[#f97316] to-[#ea580c] flex items-center justify-center text-white transition-all duration-200 ${input.trim() ? "hover:shadow-[0_0_20px_rgba(249,115,22,0.4)] hover:scale-105 active:scale-95" : "opacity-40 cursor-not-allowed"}`}
              >
                ➤
              </button>
            </div>
            <div className="flex justify-between items-center mt-2 px-1">
              <span className="text-[#374151] text-[10px]">Shift + Enter for new line</span>
              <span className="text-[#374151] text-[10px]">{input.length} / 2000</span>
            </div>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="flex-1 flex flex-col min-h-0">
      <div className="flex-1 overflow-y-auto px-4 py-6" style={{ backgroundImage: "radial-gradient(circle, #ffffff08 1px, transparent 1px)", backgroundSize: "24px 24px" }}>
        <div className="max-w-3xl mx-auto space-y-6">
          {messages.map((msg, i) => (
            <div key={i}>
              {msg.role === "assistant" ? (
                <div className="flex gap-3 items-start">
                  <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#f97316] to-[#ea580c] flex items-center justify-center text-white text-sm flex-shrink-0">
                    <Bot className="h-4 w-4" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="bg-[#1a1d2e] rounded-2xl rounded-tl-sm border border-[#ffffff08] border-l-2 border-l-[#f97316] px-5 py-4 max-w-[85%]">
                      <div className="text-[#e5e7eb] text-sm leading-7 whitespace-pre-wrap">{formatContent(msg.content)}</div>
                    </div>
                    <div className="text-[#4b5563] text-[10px] mt-1">AI Assistant</div>
                  </div>
                </div>
              ) : (
                <div className="flex gap-3 items-start flex-row-reverse">
                  <div className="flex-1 min-w-0 flex justify-end">
                    <div className="bg-gradient-to-br from-[#f97316] to-[#ea580c] rounded-2xl rounded-tr-sm px-5 py-4 max-w-[75%]">
                      <div className="text-white text-sm leading-7 whitespace-pre-wrap">{msg.content}</div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          ))}
          {loading && (
            <div className="flex gap-3 items-start">
              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#f97316] to-[#ea580c] flex items-center justify-center text-white text-sm flex-shrink-0">
                <Bot className="h-4 w-4" />
              </div>
              <div className="bg-[#1a1d2e] rounded-2xl rounded-tl-sm border border-[#ffffff08] border-l-2 border-l-[#f97316] px-5 py-4 inline-flex items-center gap-1.5">
                <span className="w-2 h-2 rounded-full bg-[#f97316] dot-1" />
                <span className="w-2 h-2 rounded-full bg-[#f97316] dot-2" />
                <span className="w-2 h-2 rounded-full bg-[#f97316] dot-3" />
              </div>
            </div>
          )}
          <div ref={messagesEndRef} />
        </div>
      </div>
      <div className="sticky bottom-0 bg-[#0f1117]/95 backdrop-blur-md border-t border-[#ffffff08] px-4 py-4">
        <div className="max-w-3xl mx-auto">
          {error && (
            <div className="mb-2.5 text-xs text-red-400 flex items-center gap-1.5">
              <span>⚠️</span>
              {error}
            </div>
          )}
          <div className="bg-[#1a1d2e] rounded-2xl border border-[#ffffff0a] focus-within:border-[#f97316]/40 focus-within:shadow-[0_0_20px_rgba(249,115,22,0.08)] transition-all duration-200 flex items-end gap-3 px-4 py-3">
            <button type="button" className="w-8 h-8 rounded-lg text-[#4b5563] hover:text-[#f97316] hover:bg-[#ffffff08] flex items-center justify-center transition-colors duration-200 flex-shrink-0 text-lg">📎</button>
            <textarea
              ref={textareaRef}
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onInput={handleTextareaInput}
              onKeyDown={handleKeyDown}
              placeholder="Ask for sales tips..."
              rows={1}
              className="bg-transparent flex-1 text-[#e5e7eb] text-sm placeholder-[#4b5563] resize-none outline-none min-h-[24px] max-h-[200px] overflow-y-auto leading-6"
            />
            <button
              type="button"
              onClick={() => sendMessage()}
              disabled={!input.trim()}
              className={`w-9 h-9 rounded-xl flex-shrink-0 bg-gradient-to-br from-[#f97316] to-[#ea580c] flex items-center justify-center text-white transition-all duration-200 ${input.trim() ? "hover:shadow-[0_0_20px_rgba(249,115,22,0.4)] hover:scale-105 active:scale-95" : "opacity-40 cursor-not-allowed"}`}
            >
              ➤
            </button>
          </div>
          <div className="flex justify-between items-center mt-2 px-1">
            <span className="text-[#374151] text-[10px]">Shift + Enter for new line</span>
            <span className="text-[#374151] text-[10px]">{input.length} / 2000</span>
          </div>
        </div>
      </div>
    </div>
  )
})

AIChat.displayName = "AIChat"