/**
 * Dashboard Page Component
 * @description Main dashboard page with metrics and agent cards
 */

import { MetricCard } from '@/components/dashboard/metric-card';
import { AgentsSection } from '@/components/dashboard/agents-section';
import { Button } from '@/components/ui/button';
import { Search, Plus } from 'lucide-react';
import { MOCK_AGENTS } from '@/constants/agents';

/**
 * Dashboard component
 * @description Main dashboard page with all sections
 * @returns {JSX.Element} Dashboard element
 */
export function Dashboard(): JSX.Element {
    return (
        <div className="px-4 py-4 md:px-6 lg:px-10 lg:pt-6 lg:pb-10">
            {/* Content Header: Welcome + Search/Create */}
            <div className="mb-4 md:mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                <div className="space-y-2">
                    <h1 className="text-[1.75rem] md:text-[2rem] lg:text-[2.5rem] font-semibold text-[#1A1A1A] leading-tight">
                        Welcome, Vijay! 👋🏻
                    </h1>
                    <p className="max-w-2xl text-[0.875rem] md:text-[0.9375rem] lg:text-[1rem] text-[#5B6170]">
                        Manage Agents, Workflows, Tools and Knowledge Base
                    </p>
                </div>

                <div className="flex flex-col md:flex-row items-stretch md:items-center gap-3 w-full md:w-auto">
                    <div className="relative flex-1 md:flex-initial">
                        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#9AA1B5]" />
                        <input
                            type="text"
                            placeholder="Search"
                            className="h-11 w-full md:w-[300px] lg:w-[340px] rounded-lg border border-[#E1E4EF] bg-white pl-10 pr-4 text-[0.875rem] md:text-[0.9375rem] lg:text-[1rem] text-[#4A4F5C] outline-none transition focus:border-[#0033FF] focus:ring-2 focus:ring-[#0033FF]/15 min-h-[44px]"
                        />
                    </div>
                    <Button className="flex h-11 items-center justify-center gap-2 rounded-lg border border-[#0033FF] bg-white px-4 md:px-5 text-[0.875rem] md:text-[0.9375rem] lg:text-[1rem] font-medium text-[#0033FF] shadow-[0_0_2px_rgba(0,51,255,0.25),0_3px_8px_rgba(0,51,255,0.12)] transition hover:bg-[#F5F8FF] min-h-[44px]">
                        <Plus className="h-4 w-4" />
                        Create Agent
                    </Button>
                </div>
            </div>

            {/* Metrics Grid */}
            <div className="mb-4 md:mb-7 h-full bg-[rgba(247,248,255,0.82)] border border-solid border-white content-stretch flex flex-col items-start justify-center p-4 md:p-6 relative rounded-xl md:rounded-2xl lg:rounded-3xl">
                <div className="content-stretch grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 items-stretch relative shrink-0 w-full">
                    <MetricCard
                        title="ACTIVE AGENTS"
                        subtitle="Agents"
                        value="03"
                        gradient="blue-teal"
                        imageUrl="/Dashboard/Card1.svg"
                    />
                    <MetricCard
                        title="KNOWLEDGE BASES"
                        subtitle="Knowledge Bases"
                        value="02"
                        gradient="pink-purple"
                        imageUrl="/Dashboard/Card2.svg"
                    />
                    <MetricCard
                        title="ACTIVE WORKFLOWS"
                        subtitle="Workflows"
                        value="01"
                        gradient="orange-yellow"
                        imageUrl="/Dashboard/Card3.svg"
                    />
                    <MetricCard
                        title="CONNECTED TOOLS"
                        subtitle="Tools"
                        value="01"
                        gradient="blue-purple"
                        imageUrl="/Dashboard/Card4.svg"
                    />
                </div>
            </div>

            {/* Agents Section */}
            <div className="mt-4 md:mt-6">
                <AgentsSection agents={MOCK_AGENTS} />
            </div>
        </div>
    );
}