"use client";

import Link from "next/link";
import { getAppName } from "@tline/config";
import { useState } from "react";

import { ErrorBoundary } from "./components/ErrorBoundary";
import { MediaPanel } from "./components/MediaPanel";
import { TimelineTree } from "./components/TimelineTree";

export default function HomePage() {
  const [selectedDayIso, setSelectedDayIso] = useState<string | null>(null);

  return (
    <main style={{ padding: 16, display: "grid", gap: 16 }}>
      <header>
        <h1 style={{ marginTop: 0 }}>{getAppName()}</h1>
        <ul>
          <li>
            <Link href="/admin">Admin</Link>
          </li>
          <li>
            <a href="/api/healthz">API health</a>
          </li>
        </ul>
      </header>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "2fr 1fr",
          gap: 16,
          alignItems: "start",
        }}
      >
        <ErrorBoundary>
          <TimelineTree onSelectDay={setSelectedDayIso} />
        </ErrorBoundary>
        <ErrorBoundary>
          <MediaPanel selectedDayIso={selectedDayIso} />
        </ErrorBoundary>
      </div>
    </main>
  );
}