import { Link } from '@tanstack/react-router';
import { APP_PATHS } from '@/routes';

const searchIcon = 'https://www.figma.com/api/mcp/asset/379327bd-47f2-4ebc-a8e0-c0004928d27b';
const emptyStateIcon = '/Agent/agent.svg';
const addIcon = '/Agent/add.svg';

export function AgentPage() {
    return (
        <div className="px-4 py-6 md:px-6 md:py-8 lg:px-10 lg:pt-10 lg:pb-16">
            <div className="flex flex-col gap-6 md:gap-8">
                <div className="space-y-2">
                    <h1 className="text-[1.75rem] md:text-[2rem] lg:text-[2.5rem] font-semibold text-[#1B1B1B] leading-tight">
                        Agent
                    </h1>
                    <p className="max-w-3xl text-[0.875rem] md:text-[0.9375rem] lg:text-[1rem] text-[#444750]">
                        Intelligent Agents that automate workflows and enhance decision-making
                    </p>
                </div>

                <div className="flex items-center justify-between">
                    <div className="flex-1 w-full max-w-2xl">
                        <div className="flex items-center gap-3 rounded-xl border border-[#E1E4EF] bg-white px-3 py-2.5 md:px-4 md:py-3 shadow-sm">
                            <img src={searchIcon} alt="Search" className="h-4 w-4 md:h-5 md:w-5 opacity-70" />
                            <input
                                type="text"
                                placeholder="Search Agent"
                                className="w-full border-none bg-transparent text-[0.875rem] md:text-[0.9375rem] lg:text-[1rem] text-[#6F7282] placeholder:text-[#9DA3B0] focus:outline-none"
                            />
                        </div>
                    </div>
                </div>

                <div className="flex min-h-[400px] md:min-h-[540px] items-center justify-center">
                    <div className="flex flex-col items-center gap-4 md:gap-6 text-center px-4">
                        <img 
                            src={emptyStateIcon} 
                            alt="No agent" 
                            className="h-24 w-24 md:h-32 md:w-32 lg:h-36 lg:w-36" 
                        />
                        <div className="space-y-2">
                            <h2 className="text-[1.5rem] md:text-[1.75rem] lg:text-[2rem] font-semibold text-[#252526]">
                                No Agent Found
                            </h2>
                            <p className="text-[0.75rem] md:text-[0.8125rem] lg:text-[0.875rem] text-[#6D6B70]">
                                Get started by adding your first Agent
                            </p>
                        </div>
                        <Link
                            to={APP_PATHS.agentCreate}
                            className="inline-flex items-center gap-2 rounded-xl bg-[#0033FF] px-4 py-2.5 md:px-5 md:py-3 text-[0.875rem] md:text-[0.9375rem] lg:text-[1rem] font-semibold text-white shadow-lg shadow-blue-500/25 transition hover:bg-[#002BCC] min-h-[44px]"
                        >
                            <img src={addIcon} alt="Add" className="h-4 w-4 md:h-5 md:w-5" />
                            Add Agent
                        </Link>
                    </div>
                </div>
            </div>
        </div>
    );
}

