import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Separator } from "@/components/ui/separator"

export function ApplicationUI() {
  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-2xl font-bold mb-4">Application UI Components</h2>
        <p className="text-muted-foreground mb-6">Essential UI components styled with your custom design system</p>
      </div>

      {/* Stacked Card Layout */}
      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Team Members</CardTitle>
            <CardDescription>Invite your team members to collaborate.</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center space-x-4">
                <Avatar>
                  <AvatarImage src="/diverse-person-portrait.png" />
                  <AvatarFallback>JD</AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <p className="text-sm font-medium">Jane Davis</p>
                  <p className="text-sm text-muted-foreground">jane@example.com</p>
                </div>
                <Badge>Admin</Badge>
              </div>
              <Separator />
              <div className="flex items-center space-x-4">
                <Avatar>
                  <AvatarImage src="/diverse-group.png" />
                  <AvatarFallback>RM</AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <p className="text-sm font-medium">Robert Miller</p>
                  <p className="text-sm text-muted-foreground">robert@example.com</p>
                </div>
                <Badge variant="outline">Member</Badge>
              </div>
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button variant="outline">Cancel</Button>
            <Button>Invite People</Button>
          </CardFooter>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Account Settings</CardTitle>
            <CardDescription>Update your account information.</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name">Name</Label>
              <Input id="name" placeholder="Your name" defaultValue="Alex Johnson" />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" placeholder="Your email" defaultValue="alex@example.com" />
            </div>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button variant="outline">Cancel</Button>
            <Button>Save Changes</Button>
          </CardFooter>
        </Card>
      </div>

      {/* Tabbed Interface */}
      <Card className="mt-8">
        <CardHeader>
          <CardTitle>Project Dashboard</CardTitle>
          <CardDescription>Manage your project settings and resources.</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="overview" className="w-full">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="overview">Overview</TabsTrigger>
              <TabsTrigger value="analytics">Analytics</TabsTrigger>
              <TabsTrigger value="reports">Reports</TabsTrigger>
            </TabsList>
            <TabsContent value="overview" className="p-4 border rounded-md mt-4">
              <h3 className="text-lg font-medium mb-2">Project Overview</h3>
              <p className="text-muted-foreground">Your project is 80% complete. Keep up the good work!</p>
              <div className="h-4 w-full bg-secondary rounded-full mt-4">
                <div className="h-4 rounded-full bg-primary" style={{ width: "80%" }}></div>
              </div>
            </TabsContent>
            <TabsContent value="analytics" className="p-4 border rounded-md mt-4">
              <h3 className="text-lg font-medium mb-2">Analytics Dashboard</h3>
              <p className="text-muted-foreground">View detailed analytics for your project performance.</p>
              <div className="grid grid-cols-3 gap-4 mt-4">
                <div className="p-4 border rounded-md text-center">
                  <p className="text-3xl font-bold">128</p>
                  <p className="text-sm text-muted-foreground">Total Users</p>
                </div>
                <div className="p-4 border rounded-md text-center">
                  <p className="text-3xl font-bold">$2.4k</p>
                  <p className="text-sm text-muted-foreground">Revenue</p>
                </div>
                <div className="p-4 border rounded-md text-center">
                  <p className="text-3xl font-bold">24%</p>
                  <p className="text-sm text-muted-foreground">Growth</p>
                </div>
              </div>
            </TabsContent>
            <TabsContent value="reports" className="p-4 border rounded-md mt-4">
              <h3 className="text-lg font-medium mb-2">Reports</h3>
              <p className="text-muted-foreground">Download and manage your project reports.</p>
              <div className="space-y-2 mt-4">
                <div className="flex items-center justify-between p-2 border rounded-md">
                  <span>Monthly Report</span>
                  <Button size="sm" variant="outline">
                    Download
                  </Button>
                </div>
                <div className="flex items-center justify-between p-2 border rounded-md">
                  <span>Quarterly Summary</span>
                  <Button size="sm" variant="outline">
                    Download
                  </Button>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}