index.tsx

import { Button, Card } from "@databricks/appkit-ui/react";
import {
  createFileRoute,
  retainSearchParams,
  useNavigate,
} from "@tanstack/react-router";
import { ThemeSelector } from "@/components/theme-selector";

export const Route = createFileRoute("/")({
  component: IndexRoute,
  search: {
    middlewares: [retainSearchParams(true)],
  },
});

function IndexRoute() {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen bg-background">
      <div className="absolute top-4 right-4">
        <ThemeSelector />
      </div>
      <div className="max-w-6xl mx-auto px-6 py-20">
        <div className="text-center mb-16">
          <h1 className="text-5xl font-bold text-foreground mb-4">
            AppKit Playground
          </h1>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            Explore the capabilities of the AppKit with interactive examples and
            demos
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto mb-16">
          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
            <div className="flex flex-col h-full">
              <h3 className="text-2xl font-semibold text-foreground mb-3">
                Analytics Dashboard
              </h3>
              <p className="text-muted-foreground mb-6 flex-grow">
                Explore real-time analytics with query execution, data
                visualization, and interactive components using the Design
                System.
              </p>
              <Button
                onClick={() => navigate({ to: "/analytics" })}
                className="w-full"
              >
                Explore real-time analytics
              </Button>
            </div>
          </Card>

          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
            <div className="flex flex-col h-full">
              <h3 className="text-2xl font-semibold text-foreground mb-3">
                Arrow Analytics Dashboard
              </h3>
              <p className="text-muted-foreground mb-6 flex-grow">
                Explore real-time analytics with query execution, data
                visualization, and interactive components using Apache Arrow
                streaming.
              </p>
              <Button
                onClick={() => navigate({ to: "/arrow-analytics" })}
                className="w-full"
              >
                Explore real-time analytics
              </Button>
            </div>
          </Card>

          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
            <div className="flex flex-col h-full">
              <h3 className="text-2xl font-semibold text-foreground mb-3">
                Stream Reconnection
              </h3>
              <p className="text-muted-foreground mb-6 flex-grow">
                Explore Server-Sent Events (SSE) stream reconnection with
                automatic Last-Event-ID tracking and resilient connection
                handling.
              </p>
              <Button
                onClick={() => navigate({ to: "/reconnect" })}
                className="w-full"
              >
                View Reconnect Demo
              </Button>
            </div>
          </Card>

          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
            <div className="flex flex-col h-full">
              <h3 className="text-2xl font-semibold text-foreground mb-3">
                Data Visualization
              </h3>
              <p className="text-muted-foreground mb-6 flex-grow">
                Explore powerful and customizable chart components from the Apps
                SDK.
              </p>
              <Button
                onClick={() => navigate({ to: "/data-visualization" })}
                className="w-full"
              >
                Explore data visualization
              </Button>
            </div>
          </Card>

          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
            <div className="flex flex-col h-full">
              <h3 className="text-2xl font-semibold text-foreground mb-3">
                Telemetry
              </h3>
              <p className="text-muted-foreground mb-6 flex-grow">
                Explore OpenTelemetry-compatible tracing and metrics examples
                with interactive demos showcasing custom observability patterns.
              </p>
              <Button
                onClick={() => navigate({ to: "/telemetry" })}
                className="w-full"
              >
                Try Telemetry Examples
              </Button>
            </div>
          </Card>

          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
            <div className="flex flex-col h-full">
              <h3 className="text-2xl font-semibold text-foreground mb-3">
                File Browser
              </h3>
              <p className="text-muted-foreground mb-6 flex-grow">
                Browse, preview, and download files from Databricks Volumes
                using the Files plugin and Unity Catalog Files API.
              </p>
              <Button
                onClick={() => navigate({ to: "/files" })}
                className="w-full"
              >
                Browse Files
              </Button>
            </div>
          </Card>

          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
            <div className="flex flex-col h-full">
              <h3 className="text-2xl font-semibold text-foreground mb-3">
                SQL Helpers
              </h3>
              <p className="text-muted-foreground mb-6 flex-grow">
                Type-safe parameter helpers for Databricks SQL queries. Test
                each helper interactively and see the generated parameter
                objects.
              </p>
              <Button
                onClick={() => navigate({ to: "/sql-helpers" })}
                className="w-full"
              >
                Try SQL Helpers
              </Button>
            </div>
          </Card>

          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
            <div className="flex flex-col h-full">
              <h3 className="text-2xl font-semibold text-foreground mb-3">
                Type-Safe SQL
              </h3>
              <p className="text-muted-foreground mb-6 flex-grow">
                Generate TypeScript types from SQL files at build time. Full
                IntelliSense for query names, parameters, and results.
              </p>
              <Button
                onClick={() => navigate({ to: "/type-safety" })}
                className="w-full"
              >
                Explore Type Safety
              </Button>
            </div>
          </Card>

          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
            <div className="flex flex-col h-full">
              <h3 className="text-2xl font-semibold text-foreground mb-3">
                Genie Chat
              </h3>
              <p className="text-muted-foreground mb-6 flex-grow">
                Ask natural language questions about your data using AI/BI
                Genie. Features SSE streaming, markdown rendering, and
                conversation persistence.
              </p>
              <Button
                onClick={() => navigate({ to: "/genie" })}
                className="w-full"
              >
                Try Genie Chat
              </Button>
            </div>
          </Card>

          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
            <div className="flex flex-col h-full">
              <h3 className="text-2xl font-semibold text-foreground mb-3">
                Lakebase Examples
              </h3>
              <p className="text-muted-foreground mb-6 flex-grow">
                Four approaches to PostgreSQL database integration with
                Databricks Lakebase: Raw driver, Drizzle ORM, TypeORM, and
                Sequelize with OAuth token refresh.
              </p>
              <Button
                onClick={() => navigate({ to: "/lakebase" })}
                className="w-full"
              >
                Explore Lakebase Integration
              </Button>
            </div>
          </Card>

          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
            <div className="flex flex-col h-full">
              <h3 className="text-2xl font-semibold text-foreground mb-3">
                Lakeflow Jobs
              </h3>
              <p className="text-muted-foreground mb-6 flex-grow">
                Trigger and monitor Databricks Lakeflow Jobs. View run history,
                stream live status updates, and cancel in-flight runs.
              </p>
              <Button
                onClick={() => navigate({ to: "/jobs" })}
                className="w-full"
              >
                Manage Jobs
              </Button>
            </div>
          </Card>

          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
            <div className="flex flex-col h-full">
              <h3 className="text-2xl font-semibold text-foreground mb-3">
                Model Serving
              </h3>
              <p className="text-muted-foreground mb-6 flex-grow">
                Chat with a Databricks Model Serving endpoint using streaming
                completions with real-time SSE responses.
              </p>
              <Button
                onClick={() => navigate({ to: "/serving" })}
                className="w-full"
              >
                Try Model Serving
              </Button>
            </div>
          </Card>
        </div>

        <div className="text-center pt-12 border-t border-border">
          <p className="text-sm text-muted-foreground">
            built by databricks using appkit
          </p>
        </div>
      </div>
    </div>
  );
}