import { TriggerButton } from "@/components/trigger-button";
import { AIChatButton } from "@/components/ai-chat-button";
import { triggerApprovalTask, triggerMessagesTask } from "./actions";

export default function Home() {
  return (
    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
        <h1 className="text-3xl font-bold mb-4">Realtime Streams Test</h1>
        <p className="text-gray-600 mb-8">
          Click a button below to trigger a streaming task and watch it in real-time. You can
          refresh the page to test stream reconnection.
        </p>

        <div className="mt-8 pt-8 border-t border-gray-300 w-full">
          <h2 className="text-xl font-semibold mb-4">AI Chat Stream (AI SDK v5)</h2>
          <p className="text-sm text-gray-600 mb-4">
            Test AI SDK v5&apos;s streamText with toUIMessageStream()
          </p>
          <AIChatButton />
        </div>

        <div className="flex flex-col gap-4">
          <TriggerButton scenario="markdown">Markdown Stream</TriggerButton>
          <TriggerButton scenario="continuous">Continuous Stream</TriggerButton>
          <TriggerButton scenario="burst">Burst Stream</TriggerButton>
          <TriggerButton scenario="stall">Stall Stream (3 min)</TriggerButton>
          <TriggerButton scenario="slow-steady">Slow Steady Stream (5 min)</TriggerButton>
        </div>

        <div className="flex flex-col gap-4">
          <TriggerButton useDurableStreams={true} scenario="markdown">
            Markdown Stream (Durable)
          </TriggerButton>
          <TriggerButton useDurableStreams={true} scenario="continuous">
            Continuous Stream (Durable)
          </TriggerButton>
          <TriggerButton useDurableStreams={true} scenario="burst">
            Burst Stream (Durable)
          </TriggerButton>
          <TriggerButton useDurableStreams={true} scenario="stall">
            Stall Stream (3 min) (Durable)
          </TriggerButton>
          <TriggerButton useDurableStreams={true} scenario="slow-steady">
            Slow Steady Stream (5 min) (Durable)
          </TriggerButton>
        </div>

        <div className="mt-8 pt-8 border-t border-gray-300 w-full">
          <h2 className="text-xl font-semibold mb-4">Input Streams</h2>
          <p className="text-sm text-gray-600 mb-4">
            Test sending data from the UI to a running task via useInputStreamSend
          </p>
          <div className="flex gap-3">
            <form action={triggerApprovalTask}>
              <button
                type="submit"
                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
              >
                Approval Flow (.wait)
              </button>
            </form>
            <form action={triggerMessagesTask}>
              <button
                type="submit"
                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              >
                Messages Flow (.on)
              </button>
            </form>
          </div>
        </div>

        <div className="mt-8 pt-8 border-t border-gray-300">
          <h2 className="text-xl font-semibold mb-4">Performance Testing</h2>
          <TriggerButton scenario="performance" redirect="/performance">
            📊 Performance Test V1 (Latency Monitoring)
          </TriggerButton>

          <TriggerButton scenario="performance" redirect="/performance" useDurableStreams={true}>
            📊 Performance Test V2 (Latency Monitoring)
          </TriggerButton>
        </div>
      </main>
    </div>
  );
}
