"use client"

import { CardTitle, Card, CardDescription, CardHeader, CardContent, CardFooter } from '@/components/ui/card';
import RouteCards from '@/components/RouteCards';
import { Button } from '@/components/ui/button';
import { useRoutes } from '@/lib/clientActions';
import Image from 'next/image';
import Loading from '@/components/Loading';
import Error from '@/components/Error';
import { useState } from 'react';
import { RouteDialog } from '@/components/RouteDialog';


export default function Home() {

  const [routeDialog, setRouteDialog] = useState(false);
  const { data: routes, error, isLoading } = useRoutes();
  let routesMap: Route[] = routes as Route[];

  if (error) return <Error />
  if (isLoading) return <Loading />

  let route = {
    "handle": [
      {
        "handler": "subroute",
        "routes": [
          {
            "handle": [
              {
                "handler": "reverse_proxy",
                "upstreams": [
                  {
                    "dial": "1.1.1.1"
                  }
                ]
              }
            ]
          }
        ]
      }
    ],
    "match": [
      {
        "host": [
          "containers.grug.dev",
          "containers.daddyimpregnant.com",
          "containers.mizuledevelopment.com"
        ]
      }
    ],
    "terminal": true
  }

  return (
    <main>
      {routeDialog && <RouteDialog route={route as Route} />}
      <div className='flex items-center justify-center p-6'>
        <Card className='flex'>
          <CardHeader>
            <CardTitle>Active Routes</CardTitle>
            <CardDescription>Amount of configured routes</CardDescription>
          </CardHeader>
          <CardContent className='flex items-center'>
            <div>
              <p className='text-xl font-semibold translate-y-2'>{routesMap.length}</p>
            </div>
          </CardContent>
          <CardFooter>
            <Button onClick={() => setRouteDialog(!routeDialog)} className='translate-y-2.5'>Create</Button>
          </CardFooter>
        </Card>
      </div>
      <div className='grid grid-flow-row-dense md:grid-cols-6 sm:grid-cols-2 p-2'>
        <RouteCards routes={routesMap} />
      </div>
    </main>
  )
}