Features 1

import { useState } from "react";

import { CheckCircle2, Database, Download, Globe, Settings2, Terminal } from "lucide-react";
import { Area, AreaChart } from "recharts";

import { cn } from "@/lib/utils";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ChartContainer } from "@/components/ui/chart";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

const TABS = [
    { id: "frameworks", label: "Frameworks" },
    { id: "functions", label: "Serverless" },
    { id: "database", label: "Edge Database" },
    { id: "analytics", label: "Realtime Analytics" },
    { id: "security", label: "WAF Security" },
];

const CARDS = [
    {
        id: 1,
        step: "1",
        title: "Edge Deployments",
        description:
            "Deploy serverless functions and frontend routes in seconds. Connect your Git provider and trigger global previews on every commit.",
    },
    {
        id: 2,
        step: "2",
        title: "Serverless Database",
        description:
            "Query databases at the edge with automatic connection pooling. Scale tables dynamically without worrying about memory limits.",
    },
    {
        id: 3,
        step: "3",
        title: "Realtime Monitor",
        description:
            "Visualize traffic patterns, trace API endpoints, and view logs instantly inside a single administrative interface.",
    },
];

const chartData = [
    { name: "Mon", requests: 120 },
    { name: "Tue", requests: 210 },
    { name: "Wed", requests: 180 },
    { name: "Thu", requests: 340 },
    { name: "Fri", requests: 290 },
    { name: "Sat", requests: 430 },
];

const chartConfig = {
    requests: {
        label: "Requests",
        color: "var(--chart-1)",
    },
};

function VisualDeploymentWidget() {
    return (
        <div className="flex flex-col gap-3">
            <div className="bg-card flex flex-wrap sm:flex-nowrap items-center justify-between gap-3 rounded-md border p-3">
                <div className="flex items-center gap-2">
                    <CheckCircle2 className="size-5 shrink-0 text-emerald-500" />
                    <div className="flex flex-col gap-0.5">
                        <span className="text-sm font-medium">Production Active</span>
                        <span className="text-muted-foreground text-xs">32s ago</span>
                    </div>
                </div>
                <Globe className="text-muted-foreground size-4 shrink-0" />
            </div>
            <div className="bg-card flex items-center gap-3 rounded-md border p-3">
                <div className="bg-muted flex size-7 shrink-0 items-center justify-center rounded-full">
                    <Terminal className="text-muted-foreground size-4" />
                </div>
                <div className="flex flex-col gap-0.5">
                    <span className="text-sm font-medium">Build: Success</span>
                    <span className="text-muted-foreground text-xs">Time: 1.2m</span>
                </div>
            </div>
        </div>
    );
}

function VisualDatabaseWidget() {
    return (
        <div className="flex flex-col gap-3">
            <div className="bg-card flex flex-col gap-2 rounded-md border p-3">
                <div className="flex items-center justify-between">
                    <span className="font-medium">Active Pools</span>
                    <Badge variant="secondary" className="cursor-default">
                        12
                    </Badge>
                </div>
                <div className="flex items-center justify-between text-sm">
                    <span className="text-muted-foreground font-medium">Queued Queries</span>
                    <Badge variant="secondary" className="cursor-default">
                        0
                    </Badge>
                </div>
            </div>
            <div className="bg-card flex items-center justify-between gap-3 rounded-md border p-3">
                <div className="flex items-center gap-2">
                    <div className="bg-muted flex size-7 shrink-0 items-center justify-center rounded-full">
                        <Database className="text-muted-foreground size-4" />
                    </div>
                    <span className="text-sm font-medium">orders_v2</span>
                </div>
                <span className="text-sm font-medium text-emerald-500">Verified</span>
            </div>
        </div>
    );
}

function VisualAnalyticsWidget() {
    return (
        <div className="flex flex-col gap-3">
            <div className="grid grid-cols-2 gap-2">
                <Select defaultValue="all-regions">
                    <SelectTrigger size="sm" className="w-full">
                        <SelectValue placeholder="Region" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="all-regions">All Regions</SelectItem>
                        <SelectItem value="us-east">US East</SelectItem>
                        <SelectItem value="eu-west">EU West</SelectItem>
                    </SelectContent>
                </Select>
                <Select defaultValue="24h">
                    <SelectTrigger size="sm" className="w-full">
                        <SelectValue placeholder="Period" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="24h">Last 24h</SelectItem>
                        <SelectItem value="7d">Last 7 days</SelectItem>
                        <SelectItem value="30d">Last 30 days</SelectItem>
                    </SelectContent>
                </Select>
            </div>
            <div className="bg-card flex flex-col gap-3 rounded-md border p-3">
                <ChartContainer config={chartConfig} className="h-28 w-full">
                    <AreaChart data={chartData} margin={{ top: 4, right: 4, left: 4, bottom: 0 }}>
                        <defs>
                            <linearGradient id="colorRequests" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="5%" stopColor="var(--color-requests)" stopOpacity={0.2} />
                                <stop offset="95%" stopColor="var(--color-requests)" stopOpacity={0} />
                            </linearGradient>
                        </defs>
                        <Area
                            type="monotone"
                            dataKey="requests"
                            stroke="var(--color-requests)"
                            fill="url(#colorRequests)"
                            strokeWidth={2}
                        />
                    </AreaChart>
                </ChartContainer>
                <Button size="sm" className="w-full">
                    <Download className="size-4" />
                    <span>Export Logs</span>
                </Button>
            </div>
        </div>
    );
}

export const Features1 = () => {
    const [activeTab, setActiveTab] = useState("frameworks");

    return (
        <section className="py-16 md:py-24 lg:py-32" id="features-1">
            <div className="mx-auto flex w-full max-w-7xl flex-col gap-10 sm:gap-12 md:gap-16 px-4 sm:px-6">
                <header className="mx-auto flex max-w-3xl flex-col items-center gap-3 text-center">
                    <Badge variant="secondary" className="w-fit gap-1.5">
                        <Settings2 className="size-4" />
                        <span>Developer Suite</span>
                    </Badge>

                    <h2
                        id="features-1-heading"
                        className="text-3xl leading-tight font-semibold text-balance sm:text-4xl md:text-5xl">
                        The developer workspace that scales with your code
                    </h2>

                    <div className="mt-4 flex flex-wrap items-center justify-center gap-2 sm:gap-3">
                        {TABS.map((tab) => {
                            const isActive = tab.id === activeTab;
                            return (
                                <Button
                                    key={tab.id}
                                    onClick={() => setActiveTab(tab.id)}
                                    type="button"
                                    variant={isActive ? "default" : "ghost"}>
                                    {tab.label}
                                </Button>
                            );
                        })}
                    </div>
                </header>

                <div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                    {CARDS.map((card, idx) => (
                        <Card
                            key={card.id}
                            className={cn("flex flex-col justify-between", idx === 2 && "md:col-span-2 lg:col-span-1")}>
                            <CardHeader>
                                <div className="flex items-center gap-3">
                                    <div className="bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-full font-mono text-sm font-medium">
                                        {card.step}
                                    </div>
                                    <CardTitle>{card.title}</CardTitle>
                                </div>
                                <CardDescription>{card.description}</CardDescription>
                            </CardHeader>
                            <CardContent className="pb-6">
                                {card.id === 1 && <VisualDeploymentWidget />}
                                {card.id === 2 && <VisualDatabaseWidget />}
                                {card.id === 3 && <VisualAnalyticsWidget />}
                            </CardContent>
                        </Card>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default Features1;