openmonetis/components/insights/insights-page.tsx

"use client";

import {
  generateInsightsAction,
  loadSavedInsightsAction,
  saveInsightsAction,
  deleteSavedInsightsAction,
} from "@/app/(dashboard)/insights/actions";
import { DEFAULT_MODEL } from "@/app/(dashboard)/insights/data";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Alert, AlertDescription } from "@/components/ui/alert";
import type { InsightsResponse } from "@/lib/schemas/insights";
import { RiDeleteBinLine, RiSaveLine, RiSparklingLine, RiAlertLine } from "@remixicon/react";
import { useEffect, useState, useTransition } from "react";
import { toast } from "sonner";
import { EmptyState } from "../empty-state";
import { InsightsGrid } from "./insights-grid";
import { ModelSelector } from "./model-selector";
import { format } from "date-fns";
import { ptBR } from "date-fns/locale";

interface InsightsPageProps {
  period: string;
  onAnalyze?: () => void;
}

export function InsightsPage({ period, onAnalyze }: InsightsPageProps) {
  const [selectedModel, setSelectedModel] = useState(DEFAULT_MODEL);
  const [insights, setInsights] = useState<InsightsResponse | null>(null);
  const [isPending, startTransition] = useTransition();
  const [isSaving, startSaveTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  const [isSaved, setIsSaved] = useState(false);
  const [savedDate, setSavedDate] = useState<Date | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  // Carregar insights salvos ao montar o componente
  useEffect(() => {
    const loadSaved = async () => {
      try {
        const result = await loadSavedInsightsAction(period);
        if (result.success && result.data) {
          setInsights(result.data.insights);
          setSelectedModel(result.data.modelId);
          setIsSaved(true);
          setSavedDate(result.data.createdAt);
        }
      } catch (err) {
        console.error("Error loading saved insights:", err);
      } finally {
        setIsLoading(false);
      }
    };

    loadSaved();
  }, [period]);

  const handleAnalyze = () => {
    setError(null);
    setIsSaved(false);
    setSavedDate(null);
    onAnalyze?.();
    startTransition(async () => {
      try {
        const result = await generateInsightsAction(period, selectedModel);

        if (result.success) {
          setInsights(result.data);
          toast.success("Insights gerados com sucesso!");
        } else {
          setError(result.error);
          toast.error(result.error);
        }
      } catch (err) {
        const errorMessage = "Erro inesperado ao gerar insights.";
        setError(errorMessage);
        toast.error(errorMessage);
        console.error("Error generating insights:", err);
      }
    });
  };

  const handleSave = () => {
    if (!insights) return;

    startSaveTransition(async () => {
      try {
        const result = await saveInsightsAction(
          period,
          selectedModel,
          insights
        );

        if (result.success) {
          setIsSaved(true);
          setSavedDate(result.data.createdAt);
          toast.success("Análise salva com sucesso!");
        } else {
          toast.error(result.error);
        }
      } catch (err) {
        toast.error("Erro ao salvar análise.");
        console.error("Error saving insights:", err);
      }
    });
  };

  const handleDelete = () => {
    startSaveTransition(async () => {
      try {
        const result = await deleteSavedInsightsAction(period);

        if (result.success) {
          setIsSaved(false);
          setSavedDate(null);
          toast.success("Análise removida com sucesso!");
        } else {
          toast.error(result.error);
        }
      } catch (err) {
        toast.error("Erro ao remover análise.");
        console.error("Error deleting insights:", err);
      }
    });
  };

  return (
    <div className="flex flex-col gap-6">
      {/* Privacy Warning */}
      <Alert>
        <RiAlertLine className="size-4" />
        <AlertDescription className="text-sm">
          <strong>Aviso de privacidade:</strong> Ao gerar insights, seus dados financeiros serão enviados para o provedor de IA selecionado
          (Anthropic, OpenAI, Google ou OpenRouter) para processamento. Certifique-se de que você confia no provedor escolhido antes de prosseguir.
        </AlertDescription>
      </Alert>

      {/* Model Selector */}
      <ModelSelector
        value={selectedModel}
        onValueChange={setSelectedModel}
        disabled={isPending}
      />

      {/* Analyze Button */}
      <div className="flex items-center gap-3 flex-wrap">
        <Button
          onClick={handleAnalyze}
          disabled={isPending || isLoading}
          className="bg-linear-to-r from-primary to-violet-500 dark:from-primary-dark dark:to-emerald-600"
        >
          <RiSparklingLine className="mr-2 size-5" aria-hidden="true" />
          {isPending ? "Analisando..." : "Gerar análise inteligente"}
        </Button>

        {insights && !error && (
          <Button
            onClick={isSaved ? handleDelete : handleSave}
            disabled={isSaving || isPending || isLoading}
            variant={isSaved ? "destructive" : "outline"}
          >
            {isSaved ? (
              <>
                <RiDeleteBinLine className="mr-2 size-4" />
                {isSaving ? "Removendo..." : "Remover análise"}
              </>
            ) : (
              <>
                <RiSaveLine className="mr-2 size-4" />
                {isSaving ? "Salvando..." : "Salvar análise"}
              </>
            )}
          </Button>
        )}

        {isSaved && savedDate && (
          <span className="text-sm text-muted-foreground">
            Salva em{" "}
            {format(new Date(savedDate), "dd/MM/yyyy 'às' HH:mm", {
              locale: ptBR,
            })}
          </span>
        )}
      </div>

      {/* Content Area */}
      <div className="min-h-[400px]">
        {(isPending || isLoading) && <LoadingState />}
        {!isPending && !isLoading && !insights && !error && (
          <Card className="flex min-h-[50vh] w-full items-center justify-center py-12">
            <EmptyState
              media={<RiSparklingLine className="size-6 text-primary" />}
              title="Nenhuma análise realizada"
              description="Clique no botão acima para gerar insights inteligentes sobre seus
          dados financeiros do mês selecionado."
            />
          </Card>
        )}
        {!isPending && !isLoading && error && (
          <ErrorState error={error} onRetry={handleAnalyze} />
        )}
        {!isPending && !isLoading && insights && !error && (
          <InsightsGrid insights={insights} />
        )}
      </div>
    </div>
  );
}

function LoadingState() {
  return (
    <div className="space-y-6">
      {/* Intro text skeleton */}
      <div className="space-y-2 px-1">
        <Skeleton className="h-5 w-full max-w-2xl" />
        <Skeleton className="h-5 w-full max-w-md" />
      </div>

      {/* Grid de Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Card key={i} className="relative overflow-hidden">
            <CardHeader>
              <div className="flex items-center gap-2">
                <Skeleton className="size-5 rounded" />
                <Skeleton className="h-5 w-32" />
              </div>
            </CardHeader>
            <CardContent>
              {Array.from({ length: 4 }).map((_, j) => (
                <div
                  key={j}
                  className="flex flex-1 border-b border-dashed py-2.5 gap-2 items-start last:border-0"
                >
                  <Skeleton className="size-4 shrink-0 rounded" />
                  <div className="flex-1 space-y-2">
                    <Skeleton className="h-4 w-full" />
                    <Skeleton className="h-4 w-3/4" />
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

function ErrorState({
  error,
  onRetry,
}: {
  error: string;
  onRetry: () => void;
}) {
  return (
    <div className="flex flex-col items-center justify-center gap-4 py-12 px-4 text-center">
      <div className="flex flex-col gap-2">
        <h3 className="text-lg font-semibold text-destructive">
          Erro ao gerar insights
        </h3>
        <p className="text-sm text-muted-foreground max-w-md">{error}</p>
      </div>
      <Button onClick={onRetry} variant="outline">
        Tentar novamente
      </Button>
    </div>
  );
}