import { ViewModeProvider } from "./context/ViewModeContext";
import { useData } from "./hooks/useData";
import { Dashboard } from "./pages/Dashboard";

function Inner() {
  const { data, error, loading } = useData();

  if (loading)
    return (
      <div className="flex items-center justify-center h-screen bg-[#f8f7f4]">
        <div className="flex flex-col items-center gap-3">
          <div className="w-8 h-8 border-2 border-slate-300 border-t-blue-500 rounded-full animate-spin" />
          <p className="text-sm text-slate-500 font-medium">Loading analytics...</p>
        </div>
      </div>
    );
  if (error || !data)
    return (
      <div className="flex items-center justify-center h-screen bg-[#f8f7f4]">
        <div className="bg-white rounded-2xl p-8 shadow-lg border border-red-100 max-w-sm">
          <p className="text-red-600 font-semibold text-sm">Failed to load data</p>
          <p className="text-red-400 text-xs mt-1">{error}</p>
        </div>
      </div>
    );

  return <Dashboard data={data} />;
}

export default function App() {
  return (
    <ViewModeProvider>
      <Inner />
    </ViewModeProvider>
  );
}
