useSSEStream

import { useSSEStream } from "@sonamu-kit/react-components";

// 이벤트 타입 정의
type AIStreamEvents = {
  token: { text: string };     // token 이벤트: 텍스트 조각
  usage: { tokens: number };   // usage 이벤트: 토큰 사용량
  end: string;                  // end 이벤트: 완료 신호
};

import { useState } from "react";
import { useSSEStream } from "@sonamu-kit/react-components";

export function AIChat() {
  const [response, setResponse] = useState("");
  const [totalTokens, setTotalTokens] = useState(0);

  const { isConnected, error, isEnded } = useSSEStream<AIStreamEvents>(
    "/api/ai/stream",  // SSE 엔드포인트
    { prompt: "Hello, AI!" },  // 쿼리 파라미터
    {
      // 이벤트 핸들러
      token: (data) => {
        // 텍스트 조각이 올 때마다 추가
        setResponse((prev) => prev + data.text);
      },
      usage: (data) => {
        // 토큰 사용량 업데이트
        setTotalTokens(data.tokens);
      },
      end: () => {
        // 스트리밍 완료
        console.log("Stream ended");
      },
    },
    {
      enabled: true,      // 자동 연결
      retry: 3,           // 최대 3번 재시도
      retryInterval: 3000, // 3초 간격
    }
  );

  return (
    <div>
      {isConnected && <div className="text-green-500">연결됨</div>}
      {error && <div className="text-red-500">에러: {error}</div>}
      <div className="whitespace-pre-wrap">{response}</div>
      {isEnded && <div>토큰 사용: {totalTokens}</div>}
    </div>
  );
}

function useSSEStream<T extends Record<string, any>>(
  url: string,
  params: Record<string, any>,
  handlers: {
    [K in keyof T]?: (data: T[K]) => void;
  },
  options?: SSEStreamOptions
): SSEStreamState

useSSEStream("/api/ai/stream", params, handlers);

useSSEStream(
  "/api/ai/stream",
  {
    prompt: "Hello",
    model: "gpt-4",
    temperature: 0.7,
  },
  handlers
);

// 실제 요청 URL:
// /api/ai/stream?prompt=Hello&model=gpt-4&temperature=0.7

{
  token: (data: { text: string }) => {
    // token 이벤트 처리
  },
  usage: (data: { tokens: number }) => {
    // usage 이벤트 처리
  },
  end: () => {
    // end 이벤트 처리
  },
}

type SSEStreamState = {
  isConnected: boolean;  // 현재 연결 상태
  error: string | null;  // 에러 메시지
  retryCount: number;    // 현재 재시도 횟수
  isEnded: boolean;      // 정상 종료 여부
};

import { useState } from "react";
import { useSSEStream } from "@sonamu-kit/react-components";
import { Button, Textarea } from "@sonamu-kit/react-components/components";

type AIStreamEvents = {
  token: { text: string };
  end: string;
};

export function AIChat() {
  const [prompt, setPrompt] = useState("");
  const [response, setResponse] = useState("");
  const [enabled, setEnabled] = useState(false);

  const { isConnected, error, isEnded } = useSSEStream<AIStreamEvents>(
    "/api/ai/chat",
    { prompt },
    {
      token: (data) => {
        setResponse((prev) => prev + data.text);
      },
      end: () => {
        console.log("AI 응답 완료");
        setEnabled(false);  // 연결 종료
      },
    },
    {
      enabled,
      retry: 1,  // AI 요청은 재시도 1회만
      retryInterval: 1000,
    }
  );

  const handleSubmit = () => {
    setResponse("");  // 이전 응답 초기화
    setEnabled(true);  // 스트림 시작
  };

  return (
    <div className="space-y-4">
      <Textarea
        value={prompt}
        onValueChange={setPrompt}
        placeholder="질문을 입력하세요"
        rows={3}
      />

      <Button
        onClick={handleSubmit}
        disabled={isConnected || !prompt}
      >
        {isConnected ? "응답 중..." : "질문하기"}
      </Button>

      {error && (
        <div className="p-4 bg-red-50 text-red-700 rounded">
          {error}
        </div>
      )}

      {response && (
        <div className="p-4 bg-gray-50 rounded">
          <div className="whitespace-pre-wrap">{response}</div>
          {isConnected && <span className="animate-pulse">▊</span>}
        </div>
      )}

      {isEnded && (
        <div className="text-sm text-gray-500">
          응답 완료
        </div>
      )}
    </div>
  );
}

type UploadEvents = {
  progress: { percent: number; loaded: number; total: number };
  complete: { fileUrl: string };
  error: { message: string };
};

export function FileUploader() {
  const [file, setFile] = useState<File | null>(null);
  const [uploadId, setUploadId] = useState<string | null>(null);
  const [progress, setProgress] = useState(0);
  const [fileUrl, setFileUrl] = useState<string | null>(null);

  const { isConnected, error } = useSSEStream<UploadEvents>(
    "/api/file/upload/progress",
    { uploadId: uploadId ?? "" },
    {
      progress: (data) => {
        setProgress(data.percent);
      },
      complete: (data) => {
        setFileUrl(data.fileUrl);
      },
      error: (data) => {
        alert(data.message);
      },
    },
    {
      enabled: uploadId !== null,
      retry: 5,
      retryInterval: 2000,
    }
  );

  const handleUpload = async () => {
    if (!file) return;

    // 1. 업로드 시작 (uploadId 발급)
    const formData = new FormData();
    formData.append("file", file);

    const response = await fetch("/api/file/upload", {
      method: "POST",
      body: formData,
    });

    const { uploadId } = await response.json();

    // 2. SSE로 진행 상황 추적
    setUploadId(uploadId);
  };

  return (
    <div>
      <input
        type="file"
        onChange={(e) => setFile(e.target.files?.[0] ?? null)}
      />

      <Button onClick={handleUpload} disabled={!file || isConnected}>
        업로드
      </Button>

      {isConnected && (
        <div>
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div
              className="bg-blue-600 h-2 rounded-full transition-all"
              style={{ width: `${progress}%` }}
            />
          </div>
          <p>{progress}%</p>
        </div>
      )}

      {fileUrl && (
        <div>
          업로드 완료: <a href={fileUrl}>{fileUrl}</a>
        </div>
      )}

      {error && <div className="text-red-500">{error}</div>}
    </div>
  );
}

type LogEvents = {
  log: { level: string; message: string; timestamp: string };
};

export function LogViewer() {
  const [logs, setLogs] = useState<Array<{ level: string; message: string; timestamp: string }>>([]);
  const [enabled, setEnabled] = useState(true);

  const { isConnected, error } = useSSEStream<LogEvents>(
    "/api/logs/stream",
    { level: "info" },
    {
      log: (data) => {
        setLogs((prev) => [...prev, data].slice(-100));  // 최근 100개만 유지
      },
    },
    {
      enabled,
      retry: 10,  // 로그는 계속 재연결
      retryInterval: 5000,
    }
  );

  return (
    <div>
      <div className="flex items-center gap-2 mb-4">
        <Button
          variant={enabled ? "red" : "default"}
          onClick={() => setEnabled(!enabled)}
        >
          {enabled ? "중지" : "시작"}
        </Button>

        {isConnected && <span className="text-green-500">● 연결됨</span>}
        {error && <span className="text-red-500">● {error}</span>}
      </div>

      <div className="bg-black text-green-400 p-4 rounded font-mono text-sm h-96 overflow-y-auto">
        {logs.map((log, i) => (
          <div key={i} className="mb-1">
            <span className="text-gray-500">[{log.timestamp}]</span>{" "}
            <span className={log.level === "error" ? "text-red-400" : ""}>
              {log.level.toUpperCase()}
            </span>{" "}
            {log.message}
          </div>
        ))}
      </div>
    </div>
  );
}

// ai.model.ts (백엔드)
import { api } from "sonamu";

class AIModelClass {
  @api({
    httpMethod: "GET",
    sse: true,  // SSE 활성화
    guards: ["login"],
  })
  async *chat(params: { prompt: string }) {
    // 제너레이터 함수로 스트리밍
    const stream = await openai.chat.completions.create({
      model: "gpt-4",
      messages: [{ role: "user", content: params.prompt }],
      stream: true,
    });

    for await (const chunk of stream) {
      const text = chunk.choices[0]?.delta?.content ?? "";
      if (text) {
        // 'token' 이벤트 전송
        yield { event: "token", data: { text } };
      }
    }

    // 'end' 이벤트 전송
    yield { event: "end", data: "complete" };
  }
}

yield {
  event: "이벤트명",  // 필수
  data: { /* 데이터 */ },  // 필수
};

yield { event: "token", data: { text: "Hello" } };
yield { event: "usage", data: { tokens: 42 } };
yield { event: "end", data: "complete" };

const [shouldConnect, setShouldConnect] = useState(false);

const { isConnected } = useSSEStream(
  "/api/notifications",
  {},
  handlers,
  {
    enabled: shouldConnect,  // false면 연결하지 않음
  }
);

// 사용자 액션으로 연결 시작
<Button onClick={() => setShouldConnect(true)}>
  알림 구독
</Button>

const [filter, setFilter] = useState("all");

useSSEStream(
  "/api/logs/stream",
  { level: filter },  // filter가 바뀌면 재연결
  handlers
);

// filter가 변경되면 자동으로 연결이 끊기고 새 파라미터로 재연결됨

const [reconnectTrigger, setReconnectTrigger] = useState(0);

useSSEStream(
  "/api/stream",
  { trigger: reconnectTrigger },  // trigger 변경 시 재연결
  handlers
);

// 수동 재연결
<Button onClick={() => setReconnectTrigger(prev => prev + 1)}>
  재연결
</Button>

// 스트림 1: AI 응답
const stream1 = useSSEStream<AIEvents>(
  "/api/ai/chat",
  { prompt: "Hello" },
  {
    token: (data) => setAiResponse(prev => prev + data.text),
  }
);

// 스트림 2: 알림
const stream2 = useSSEStream<NotificationEvents>(
  "/api/notifications",
  {},
  {
    notification: (data) => showNotification(data),
  }
);

// ❌ 나쁜 예: 메모리 무한 증가
const [logs, setLogs] = useState<string[]>([]);

useSSEStream("/api/logs", {}, {
  log: (data) => {
    setLogs(prev => [...prev, data.message]);  // 계속 증가
  },
});

// ✅ 좋은 예: 최근 N개만 유지
useSSEStream("/api/logs", {}, {
  log: (data) => {
    setLogs(prev => [...prev, data.message].slice(-100));  // 최근 100개만
  },
});

const { error, isEnded } = useSSEStream(url, params, {
  error: (data) => {
    // 서버에서 보낸 에러 이벤트
    console.error("Server error:", data);
  },
});

// 연결 실패 에러
if (error) {
  console.error("Connection error:", error);
}

useEffect(() => {
  // useSSEStream은 자동으로 cleanup 처리됨
  return () => {
    // 별도 cleanup 불필요
  };
}, []);

// 백엔드: sonamu.config.ts
export default {
  api: {
    cors: {
      origin: "http://localhost:5173",
      credentials: true,
    },
  },
};