'use client';

import { useRouter } from 'next/navigation';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { FileText, Layout, Upload, BookOpen } from 'lucide-react';

interface AppTile {
  id: string;
  title: string;
  description: string;
  icon: React.ReactNode;
  href: string;
  color: string;
}

export default function DashboardPage() {
  const router = useRouter();

  const apps: AppTile[] = [
    {
      id: 'files',
      title: 'Files',
      description: 'Manage and organize your uploaded files',
      icon: <FileText className="w-8 h-8" />,
      href: '/files',
      color: 'bg-blue-500'
    },
    {
      id: 'layout-configurations',
      title: 'Layout Configurations',
      description: 'Create and manage layout configurations',
      icon: <Layout className="w-8 h-8" />,
      href: '/layout-configurations',
      color: 'bg-green-500'
    },
    {
      id: 'imports',
      title: 'Imports',
      description: 'Import and manage data from external sources',
      icon: <Upload className="w-8 h-8" />,
      href: '/imports',
      color: 'bg-purple-500'
    },
    {
      id: 'api-docs',
      title: 'API Documentation',
      description: 'Explore API endpoints and documentation',
      icon: <BookOpen className="w-8 h-8" />,
      href: '/api-docs',
      color: 'bg-orange-500'
    }
  ];

  const handleAppClick = (href: string) => {
    router.push(href);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
      <div className="container mx-auto px-4 py-8">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
            Welcome to Vtorio Dashboard
          </h1>
          <p className="text-lg text-gray-600 dark:text-gray-300">
            Select an application to get started
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
          {apps.map((app) => (
            <Card
              key={app.id}
              className="group cursor-pointer transition-all duration-300 hover:shadow-lg hover:scale-105 dark:bg-gray-800 dark:border-gray-700"
              onClick={() => handleAppClick(app.href)}
            >
              <CardHeader className="text-center">
                <div className={`${app.color} w-16 h-16 rounded-full flex items-center justify-center text-white mx-auto mb-4 group-hover:scale-110 transition-transform duration-300`}>
                  {app.icon}
                </div>
                <CardTitle className="text-xl font-semibold text-gray-900 dark:text-white">
                  {app.title}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-center text-gray-600 dark:text-gray-300">
                  {app.description}
                </CardDescription>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="mt-12 text-center">
          <p className="text-sm text-gray-500 dark:text-gray-400">
            Click on any application to access its features
          </p>
        </div>
      </div>
    </div>
  );
}