import Link from 'next/link'
import { {{QUICK_ACTIONS_IMPORTS}} } from "lucide-react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

const quickActions = {{QUICK_ACTIONS_JSON}};

const iconMap: Record<string, React.ReactNode> = {
  Home: <Home className="h-5 w-5" />,
  Users: <Users className="h-5 w-5" />,
  UserPlus: <UserPlus className="h-5 w-5" />,
  Calendar: <Calendar className="h-5 w-5" />,
  BarChart3: <BarChart3 className="h-5 w-5" />,
  Settings: <Settings className="h-5 w-5" />,
  Package: <Package className="h-5 w-5" />,
  Truck: <Truck className="h-5 w-5" />,
  MapPin: <MapPin className="h-5 w-5" />,
  Warehouse: <Warehouse className="h-5 w-5" />,
  Clock: <Clock className="h-5 w-5" />,
  DollarSign: <DollarSign className="h-5 w-5" />,
  TrendingUp: <TrendingUp className="h-5 w-5" />,
  Receipt: <Receipt className="h-5 w-5" />,
  CheckCircle: <CheckCircle className="h-5 w-5" />,
  ShoppingCart: <ShoppingCart className="h-5 w-5" />,
  Cpu: <Cpu className="h-5 w-5" />,
  Activity: <Activity className="h-5 w-5" />,
  Bell: <Bell className="h-5 w-5" />,
  ScanLine: <ScanLine className="h-5 w-5" />,
  LayoutDashboard: <LayoutDashboard className="h-5 w-5" />,
  Sprout: <Sprout className="h-5 w-5" />,
  Ticket: <Ticket className="h-5 w-5" />,
  BookOpen: <BookOpen className="h-5 w-5" />,
  Briefcase: <Briefcase className="h-5 w-5" />,
};

export default function HomePage() {
  return (
    <div className="container mx-auto p-4 space-y-6">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="text-3xl font-bold tracking-tight">{{APP_NAME}}</h1>
        <p className="text-muted-foreground">{{APP_DESCRIPTION}}</p>
      </div>

      {/* KPI Cards - Placeholder for future implementation */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Items</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">-</div>
            <p className="text-xs text-muted-foreground">Connect to see data</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">This Month</CardTitle>
            <TrendingUp className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">-</div>
            <p className="text-xs text-muted-foreground">Connect to see data</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Pending</CardTitle>
            <Clock className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">-</div>
            <p className="text-xs text-muted-foreground">Connect to see data</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Status</CardTitle>
            <Activity className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">Ready</div>
            <p className="text-xs text-muted-foreground">System operational</p>
          </CardContent>
        </Card>
      </div>

      {/* Quick Actions */}
      {quickActions && quickActions.length > 0 && (
        <div className="space-y-4">
          <h2 className="text-2xl font-semibold tracking-tight">Quick Actions</h2>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {quickActions.map((action: any) => (
              <Link key={action.href} href={action.href}>
                <Card className="hover:bg-accent transition-colors cursor-pointer">
                  <CardHeader>
                    <div className="flex items-center space-x-4">
                      <div className="p-2 bg-primary/10 rounded-lg">
                        {iconMap[action.icon] || <Activity className="h-5 w-5" />}
                      </div>
                      <CardTitle className="text-base">{action.label}</CardTitle>
                    </div>
                  </CardHeader>
                </Card>
              </Link>
            ))}
          </div>
        </div>
      )}

      {/* Recent Activity - Placeholder */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold tracking-tight">Recent Activity</h2>
        <Card>
          <CardContent className="pt-6">
            <p className="text-sm text-muted-foreground text-center py-8">
              No recent activity. Start by creating your first item.
            </p>
          </CardContent>
        </Card>
      </div>

      {/* Getting Started */}
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold tracking-tight">Getting Started</h2>
        <Card>
          <CardHeader>
            <CardTitle>Welcome to {{APP_NAME}}</CardTitle>
            <CardDescription>Follow these steps to get started</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <h3 className="font-medium">1. Configure Environment</h3>
              <p className="text-sm text-muted-foreground">
                Update your <code className="bg-muted px-1 rounded">.env.local</code> file with your Odoo credentials
              </p>
            </div>
            <div className="space-y-2">
              <h3 className="font-medium">2. Generate Types</h3>
              <p className="text-sm text-muted-foreground">
                Run <code className="bg-muted px-1 rounded">pnpm run codegen</code> to generate TypeScript types from your Odoo models
              </p>
            </div>
            <div className="space-y-2">
              <h3 className="font-medium">3. Start Building</h3>
              <p className="text-sm text-muted-foreground">
                Use the quick actions above to start creating and managing your data
              </p>
            </div>
            <div className="pt-4">
              <Link href="/settings">
                <Button>Go to Settings</Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}