import { useState, useEffect, useCallback } from "react";
import { __ } from "@wordpress/i18n";
import type {
	ConversationSummary,
	ConversationDetail,
	UsageInfo,
} from "./data/types";
import {
	ApiError,
	fetchConversations,
	fetchConversation,
	fetchUsage,
} from "./data/api";
import ConversationList from "./components/ConversationList";
import ConversationDetailView from "./components/ConversationDetail";
import UsageCard from "./components/UsageCard";
import ConnectionRequired from "./components/ConnectionRequired";
import styles from "./App.module.css";
import layoutStyles from "./components/HistoryLayout.module.css";

export default function App() {
	const [conversations, setConversations] = useState<ConversationSummary[]>(
		[],
	);
	const [selectedId, setSelectedId] = useState<string | null>(null);
	const [detail, setDetail] = useState<ConversationDetail | null>(null);
	const [usage, setUsage] = useState<UsageInfo | null>(null);
	const [loadingConversations, setLoadingConversations] = useState(true);
	const [loadingDetail, setLoadingDetail] = useState(false);
	const [error, setError] = useState<string | null>(null);
	const [connectionLost, setConnectionLost] = useState(false);
	const requiresConnection =
		!window.flexibleChatHistory.isConnected || connectionLost;

	useEffect(() => {
		if (requiresConnection) {
			return;
		}

		fetchConversations()
			.then(setConversations)
			.catch((err: unknown) => {
				if (err instanceof ApiError && err.status === 401) {
					setConnectionLost(true);
					return;
				}

				setError(
					__(
						"Unable to load conversations. Please try again.",
						"flexible-chat",
					),
				);
			})
			.finally(() => setLoadingConversations(false));

		fetchUsage()
			.then(setUsage)
			.catch((err: unknown) => {
				if (err instanceof ApiError && err.status === 401) {
					setConnectionLost(true);
				}
			});
	}, [requiresConnection]);

	const handleSelect = useCallback((id: string) => {
		setSelectedId(id);
		setLoadingDetail(true);
		setError(null);
		fetchConversation(id)
			.then(setDetail)
			.catch((err: unknown) => {
				if (err instanceof ApiError && err.status === 401) {
					setConnectionLost(true);
					return;
				}

				setError(
					__(
						"Unable to load conversation. Please try again.",
						"flexible-chat",
					),
				);
			})
			.finally(() => setLoadingDetail(false));
	}, []);

	if (requiresConnection) {
		return <ConnectionRequired connectionLost={connectionLost} />;
	}

	return (
		<div className={styles.history}>
			<aside className={layoutStyles.sidebar}>
				<h2 className={layoutStyles.sidebarTitle}>
					{__("Conversations", "flexible-chat")}
				</h2>
				{loadingConversations ? (
					<div className={styles.loading}>
						<span className="spinner is-active" />
					</div>
				) : (
					<ConversationList
						conversations={conversations}
						selectedId={selectedId}
						onSelect={handleSelect}
					/>
				)}
				{usage && <UsageCard usage={usage} />}
			</aside>
			<main className={layoutStyles.detail}>
				{error && (
					<div className={`${styles.error} notice notice-error`}>
						<p>{error}</p>
					</div>
				)}
				{selectedId ? (
					loadingDetail ? (
						<div className={styles.loading}>
							<span className="spinner is-active" />
						</div>
					) : (
						detail && (
							<ConversationDetailView conversation={detail} />
						)
					)
				) : (
					<div className={styles.empty}>
						<p>
							{__(
								"Select a conversation to view details.",
								"flexible-chat",
							)}
						</p>
					</div>
				)}
			</main>
		</div>
	);
}