"use client"

import { Sparkles } from "lucide-react"
import { AiChatIframe } from "@/components/ai/ai-chat-iframe"
import { useAiConfig, useAiQuota } from "@/lib/api/hooks/use-ai-queries"

export default function ChatPage() {
  const { data: config, isLoading } = useAiConfig()
  const { data: quota } = useAiQuota(Boolean(config?.enabled))

  if (isLoading) {
    return (
      <div className="flex h-dvh items-center justify-center text-sm text-muted-foreground">
        Chargement UltiAI…
      </div>
    )
  }

  if (!config?.enabled) {
    return (
      <div className="flex h-dvh flex-col items-center justify-center gap-2 px-6 text-center">
        <Sparkles className="h-8 w-8 text-muted-foreground" />
        <p className="text-sm text-muted-foreground">
          UltiAI n&apos;est pas activé. Activez le plugin dans l&apos;administration.
        </p>
      </div>
    )
  }

  return (
    <div className="flex h-dvh flex-col">
      <header className="flex items-center justify-between border-b px-4 py-2">
        <div className="flex items-center gap-2 text-sm font-medium">
          <Sparkles className="h-4 w-4 text-[#1a73e8]" />
          UltiAI
        </div>
        {quota ? (
          <span className="text-xs text-muted-foreground">
            {quota.requests_remaining}/{quota.requests_limit} requêtes aujourd&apos;hui
          </span>
        ) : null}
      </header>
      <AiChatIframe
        publicPath={config.public_path}
        context={{ app: "standalone", temporary: false }}
        className="min-h-0 flex-1 border-0"
      />
    </div>
  )
}