import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Card } from "@/components/ui/card";

interface AIToolbarProps {
	isAuthenticated: boolean;
	isPending: boolean;
	aiPrompt: string;
	setAiPrompt: (prompt: string) => void;
	aiLoading: boolean;
	onAiCreate: () => void;
	onAiSummarize: () => void;
	summary: string | null;
	summaryUpdated: string | null;
}

export const AIToolbar = ({
	isAuthenticated,
	isPending,
	aiPrompt,
	setAiPrompt,
	aiLoading,
	onAiCreate,
	onAiSummarize,
	summary,
	summaryUpdated,
}: AIToolbarProps) => {
	return (
		<>
			{isPending ? (
				<div className="mb-4 p-4 text-center animate-pulse bg-muted">
					Loading...
				</div>
			) : (
				<div>
					{isAuthenticated ? (
						<div className="flex flex-col sm:flex-row gap-4 mb-4 items-start">
							<div className="w-full">
								<Textarea
									className="wrap-anywhere field-sizing-content resize-none w-full min-h-[2.5rem] max-h-64 overflow-y-auto sm:overflow-y-visible px-3 py-2 scroll-p-8 placeholder:italic"
									style={{ clipPath: "inset(0 round 1rem)" }}
									placeholder="Describe event for AI to create"
									value={aiPrompt}
									onChange={(e) => setAiPrompt(e.target.value)}
								/>
							</div>
							<div className="flex flex-row gap-2 pt-1">
								<Button onClick={onAiCreate} disabled={aiLoading}>
									{aiLoading ? "Thinking..." : "AI Create"}
								</Button>
							</div>
						</div>
					) : (
						<div className="mb-4 p-4 border border-dashed rounded-lg text-center">
							<div className="text-sm text-muted-foreground">
								Sign in to unlock natural language event creation powered by AI
							</div>
						</div>
					)}
				</div>
			)}

			{/* Summary Panel */}
			{summary && (
				<Card className="p-4 mb-4">
					<div className="text-sm mb-1">Summary updated {summaryUpdated}</div>
					<div>{summary}</div>
				</Card>
			)}

			{/* AI Actions Toolbar */}
			<p className="text-muted-foreground text-sm pb-2 pl-1">AI actions</p>
			<div className="gap-2 mb-4">
				<Button
					variant="secondary"
					onClick={onAiSummarize}
					disabled={aiLoading}
				>
					{aiLoading ? "Summarizing..." : "AI Summarize"}
				</Button>
			</div>
		</>
	);
};