"use client";

import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";

interface BengaluruHeaderProps {
    filteredCount: number;
    totalCount: number;
}

export default function BengaluruHeader({ filteredCount, totalCount }: BengaluruHeaderProps) {
    const [isExpanded, setIsExpanded] = useState(false);
    const router = useRouter();
    const searchParams = useSearchParams();
    const currentSearch = searchParams.get("search");

    const fullText = "Browse real estate for sale in Bengaluru. Properties including flats, villas, and plots from trusted builders. Whether you're looking for luxurious or budget-friendly property in Bengaluru, sky&soil offers a wide range of options to suit every need. Find properties for sale in Bengaluru. Residential options with verified details, photos, and competitive pricing. Prices ₹1.5Cr - ₹5.0Cr. RERA-registered homes in gated communities, with amenities such as Swimming Pool, Gym, Clubhouse, Kids' Play Area, 24x7 Security, and Power Backup. Legal due diligence support available. 356+ options across top communities. Prime locations with IT connectivity and social infrastructure. View accurate prices, configurations, photos, and neighbourhood insights to compare options and book confidently with sky&soil.";

    const toggleReadMore = () => setIsExpanded(!isExpanded);

    const handleModernSpaacesClick = () => {
        // Toggle: if already selected, clear it (optional, but good UX). Or just set it.
        // User asked for "click that button morden this ... show morden space preprtis only filter"
        router.push("?search=Modern+Spaaces", { scroll: false });
    };

    const isModernSpaacesActive = currentSearch === "Modern Spaaces";

    return (
        <div className="mb-8">
            <div className="flex flex-col md:flex-row md:items-center justify-between mb-4">
                <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
                    Property for Sale in Bengaluru
                </h1>
                <div className="text-sm text-gray-500 dark:text-gray-400 mt-2 md:mt-0">
                    Showing 1-{filteredCount} of {totalCount} Properties | Last Updated: {new Date().toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })}
                </div>
            </div>

            <div className="mb-6">
                <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed inline">
                    {isExpanded ? fullText : `${fullText.substring(0, 230)}...`}
                </p>
                <button
                    onClick={toggleReadMore}
                    className="ml-2 text-orange-500 hover:text-orange-600 font-medium text-sm inline-block focus:outline-none"
                >
                    {isExpanded ? "Show Less" : "Read more"}
                </button>
            </div>

            <div className="flex gap-4 justify-center">
                <button
                    onClick={handleModernSpaacesClick}
                    className={`px-6 py-2 rounded-full border transition-all text-sm font-medium ${isModernSpaacesActive
                        ? "bg-gray-900 text-white border-gray-900 dark:bg-white dark:text-black"
                        : "bg-white text-gray-700 border-gray-300 hover:border-gray-900 dark:bg-black dark:text-gray-300 dark:border-gray-700"
                        }`}
                >
                    Modern Spaaces
                </button>
            </div>
        </div>
    );
}