'use client'
import 'maplibre-gl/dist/maplibre-gl.css';
import type { Map, MapOptions } from 'maplibre-gl';
import maplibregl from 'maplibre-gl';
import { AppSidebar } from '@/app/app-sidebar'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbPage,
} from '@/components/ui/breadcrumb'
import { Separator } from '@/components/ui/separator'
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from '@/components/ui/sidebar'
import { useEffect, useRef } from 'react';
import { MapProvider } from './map-context';
import { MapComponent } from '@/components/map-component';
import { ThemeToggle } from '@/components/theme-toggle';
import { Timeline } from '@/app/timeline';

import { Dock } from "@/app/dock"

import {
  Home,
  Search,
  Music,
  Heart,
  Settings,
  Plus,
  User,
  Play,
  Pause
} from "lucide-react"
import { cn } from '@/lib/utils';


export default function Page() {

  const items = [
    { icon: Home, label: "Home" },
    { icon: Search, label: "Search" },
    { icon: Play, label: "Play" },
    { icon: User, label: "Profile" },
    { icon: Settings, label: "Settings" }
  ]

  // 创建默认时间范围（过去7天到未来3天）
  const now = new Date();
  const startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000); // 7天前
  const endDate = new Date(now.getTime() + 3 * 24 * 60 * 60 * 1000);   // 3天后
  const currentDate = now;


  const containerRef = useRef<HTMLDivElement | null>(null);
  const mapRef = useRef<Map | null>(null);

  useEffect(() => {
    if (!containerRef.current || mapRef.current) return;

    const options: MapOptions = {
      container: containerRef.current,
      style: 'https://demotiles.maplibre.org/style.json',
      center: [103.851959, 1.290270],  // 新加坡
      zoom: 11,
    };

    mapRef.current = new maplibregl.Map(options);
    mapRef.current.addControl(new maplibregl.NavigationControl(), 'top-right');
    return () => mapRef.current?.remove();
  }, []);

  return (
    <MapProvider>
      <SidebarProvider>
        <AppSidebar />
        <SidebarInset>
          <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
            <SidebarTrigger className="-ml-1" />
            <Separator orientation="vertical" className="mr-2 h-4" />
            <div className="flex items-center gap-2 justify-between w-full">
              <Breadcrumb>
                <BreadcrumbList>
                  <BreadcrumbItem>
                    <BreadcrumbPage>October 2024</BreadcrumbPage>
                  </BreadcrumbItem>
                </BreadcrumbList>
              </Breadcrumb>
              <ThemeToggle />
            </div>
          </header>
          <div className="relative h-full w-full flex flex-col">
            <MapComponent />
            <Timeline
              className={
                cn(
                  "backdrop-blur-lg border shadow-lg",
                  "bg-background/90 border-border",
                  // "absolute bottom-0 left-1/2 -translate-x-1/2 ",
                  "z-10"
                )
              }
              startDate={startDate}
              endDate={endDate}
              // currentDate={currentDate}
              onDateChange={(date) => {
                console.log('Selected date:', date);
              }}
            />
            {/* <Dock items={items} className="absolute top-1/2 right-4 -translate-y-1/2" /> */}
          </div>
        </SidebarInset>
      </SidebarProvider>
    </MapProvider>
  )
}
