import { DashboardShell, Sidebar, Header, type NavItem } from '@tree-e2e-1770173774/layout';
import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Badge,
  Home,
  Users,
  Settings,
  BarChart3,
} from '@tree-e2e-1770173774/ui';

const navItems: NavItem[] = [
  { label: 'Dashboard', href: '/', icon: Home, active: true },
  { label: 'Analytics', href: '/analytics', icon: BarChart3 },
  { label: 'Users', href: '/users', icon: Users, badge: '12' },
  { label: 'Settings', href: '/settings', icon: Settings },
];

function App() {
  return (
    <DashboardShell
      sidebar={
        <Sidebar
          logo={
            <span className="font-semibold text-lg">tree-e2e-1770173774</span>
          }
          items={navItems}
          footer={
            <div className="text-sm text-[var(--text-muted)]">
              v0.0.1
            </div>
          }
        />
      }
      header={
        <Header
          title="Dashboard"
          showSearch
          searchPlaceholder="Search..."
        />
      }
    >
      <div className="space-y-6">
        {/* Welcome card */}
        <Card>
          <CardHeader>
            <CardTitle>Welcome to web</CardTitle>
            <CardDescription>
              This is part of the{' '}
              <code className="bg-[var(--surface-200)] px-1.5 py-0.5 rounded text-sm">
                tree-e2e-1770173774
              </code>{' '}
              monorepo, using the shared UI library and layout components.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex gap-3">
              <Button>Get Started</Button>
              <Button variant="outline">Documentation</Button>
            </div>
          </CardContent>
        </Card>

        {/* Stats cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <Card>
            <CardHeader className="pb-2">
              <CardDescription>Total Users</CardDescription>
              <CardTitle className="text-3xl">1,234</CardTitle>
            </CardHeader>
            <CardContent>
              <Badge variant="success">+12% from last month</Badge>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardDescription>Active Sessions</CardDescription>
              <CardTitle className="text-3xl">567</CardTitle>
            </CardHeader>
            <CardContent>
              <Badge variant="info">Live</Badge>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardDescription>API Requests</CardDescription>
              <CardTitle className="text-3xl">89.2k</CardTitle>
            </CardHeader>
            <CardContent>
              <Badge variant="warning">High traffic</Badge>
            </CardContent>
          </Card>
        </div>

        {/* Edit hint */}
        <p className="text-sm text-[var(--text-muted)]">
          Edit this file at{' '}
          <code className="bg-[var(--surface-200)] px-1.5 py-0.5 rounded">
            apps/web/src/App.tsx
          </code>
        </p>
      </div>
    </DashboardShell>
  );
}

export default App;