"use client";

import { motion, useInView } from "framer-motion";
import { useRef, useState } from "react";
import { Navbar } from "@/components/home/Navbar";
import { Footer } from "@/components/home/Footer";
import { PageHeader } from "@/components/shared/PageHeader";
import { MapPin, Bed, Bath, Maximize, Search, SlidersHorizontal, Grid3X3, List, Home, DollarSign, ChevronDown } from "lucide-react";

const propertyTypes = ["All", "House", "Apartment", "Land", "Commercial", "Villa"];
const tabs = ["Buy", "Rent", "Sell"] as const;
const locations = ["All Locations", "Nairobi", "Mombasa", "Kisumu", "Nakuru", "Eldoret", "Nanyuki"];

const properties = [
  {
    title: "Modern 4BR Villa in Karen",
    location: "Karen, Nairobi",
    price: "KES 45,000,000",
    beds: 4,
    baths: 3,
    area: "350 sqm",
    tag: "For Sale",
    image: "https://images.unsplash.com/photo-1613490493576-7fde63acd811?q=80&w=2071&auto=format&fit=crop",
  },
  {
    title: "2BR Apartment in Kilimani",
    location: "Kilimani, Nairobi",
    price: "KES 12,500,000",
    beds: 2,
    baths: 2,
    area: "120 sqm",
    tag: "For Sale",
    image: "https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?q=80&w=2075&auto=format&fit=crop",
  },
  {
    title: "Beachfront Cottage in Diani",
    location: "Diani, Mombasa",
    price: "KES 28,000,000",
    beds: 3,
    baths: 2,
    area: "220 sqm",
    tag: "New",
    image: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?q=80&w=2070&auto=format&fit=crop",
  },
  {
    title: "1-Acre Land in Nanyuki",
    location: "Nanyuki, Laikipia",
    price: "KES 8,500,000",
    beds: 0,
    baths: 0,
    area: "4,046 sqm",
    tag: "Hot Deal",
    image: "https://images.unsplash.com/photo-1500382017468-9049fed747ef?q=80&w=2232&auto=format&fit=crop",
  },
  {
    title: "Penthouse in Westlands",
    location: "Westlands, Nairobi",
    price: "KES 35,000,000",
    beds: 3,
    baths: 3,
    area: "280 sqm",
    tag: "Premium",
    image: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?q=80&w=2053&auto=format&fit=crop",
  },
  {
    title: "Townhouse in Runda",
    location: "Runda, Nairobi",
    price: "KES 52,000,000",
    beds: 5,
    baths: 4,
    area: "400 sqm",
    tag: "For Sale",
    image: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2070&auto=format&fit=crop",
  },
  {
    title: "Studio Apartment Kileleshwa",
    location: "Kileleshwa, Nairobi",
    price: "KES 6,800,000",
    beds: 1,
    baths: 1,
    area: "45 sqm",
    tag: "For Sale",
    image: "https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?q=80&w=2080&auto=format&fit=crop",
  },
  {
    title: "5BR Mansion in Muthaiga",
    location: "Muthaiga, Nairobi",
    price: "KES 120,000,000",
    beds: 5,
    baths: 5,
    area: "650 sqm",
    tag: "Luxury",
    image: "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?q=80&w=2070&auto=format&fit=crop",
  },
  {
    title: "Commercial Space in CBD",
    location: "CBD, Nairobi",
    price: "KES 18,000,000",
    beds: 0,
    baths: 2,
    area: "200 sqm",
    tag: "Commercial",
    image: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop",
  },
];

export default function PropertiesPage() {
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
  const [activeTab, setActiveTab] = useState<(typeof tabs)[number]>("Buy");
  const [activeType, setActiveType] = useState("All");
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-50px" });

  return (
    <div className="flex flex-1 flex-col">
      <Navbar />

      <PageHeader
        title="Properties"
        breadcrumbs={[
          { label: "Home", href: "/" },
          { label: "Properties" },
        ]}
        backgroundImage="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2070&auto=format&fit=crop"
      />

      {/* Filters Bar */}
      <section className="bg-obsidian-900 sticky top-0 z-40">
        <div className="mx-auto max-w-7xl px-6 lg:px-8 py-5">
          {/* Main Search Bar */}
          <div className="flex flex-col lg:flex-row items-stretch">
            {/* Tabs - Left Side */}
            <div className="flex lg:flex-col gap-0">
              {tabs.map((tab) => (
                <button
                  key={tab}
                  onClick={() => setActiveTab(tab)}
                  className={`px-6 lg:px-8 py-3 text-[12px] font-semibold uppercase tracking-[0.2em] transition-all ${
                    activeTab === tab
                      ? "bg-primary text-white"
                      : "bg-white/10 text-white/70 hover:bg-white/20 hover:text-white"
                  }`}
                >
                  {tab}
                </button>
              ))}
            </div>

            {/* Search Fields */}
            <div className="flex-1 bg-white/10 backdrop-blur-md border border-white/10">
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 h-full">
                {/* Location */}
                <div className="flex items-center gap-3 px-6 py-4 lg:py-0 border-b sm:border-b lg:border-b-0 lg:border-r border-white/10">
                  <MapPin size={18} className="text-primary shrink-0" strokeWidth={1.5} />
                  <div className="flex flex-col gap-0.5">
                    <span className="text-[10px] text-white/40 uppercase tracking-[0.2em] font-medium">
                      Location
                    </span>
                    <div className="relative">
                      <select className="bg-transparent text-white text-[14px] w-full outline-none appearance-none cursor-pointer">
                        {locations.map((loc) => (
                          <option key={loc} value={loc} className="text-obsidian-900">{loc}</option>
                        ))}
                      </select>
                      <ChevronDown size={14} className="absolute right-0 top-1/2 -translate-y-1/2 text-white/40 pointer-events-none" />
                    </div>
                  </div>
                </div>

                {/* Property Type */}
                <div className="flex items-center gap-3 px-6 py-4 lg:py-0 border-b sm:border-b lg:border-b-0 lg:border-r border-white/10">
                  <Home size={18} className="text-primary shrink-0" strokeWidth={1.5} />
                  <div className="flex flex-col gap-0.5 flex-1">
                    <span className="text-[10px] text-white/40 uppercase tracking-[0.2em] font-medium">
                      Type
                    </span>
                    <div className="relative">
                      <select className="bg-transparent text-white text-[14px] w-full outline-none appearance-none cursor-pointer">
                        <option value="" className="text-obsidian-900">All Types</option>
                        <option value="apartment" className="text-obsidian-900">Apartment</option>
                        <option value="house" className="text-obsidian-900">House</option>
                        <option value="land" className="text-obsidian-900">Land</option>
                        <option value="commercial" className="text-obsidian-900">Commercial</option>
                        <option value="villa" className="text-obsidian-900">Villa</option>
                      </select>
                      <ChevronDown size={14} className="absolute right-0 top-1/2 -translate-y-1/2 text-white/40 pointer-events-none" />
                    </div>
                  </div>
                </div>

                {/* Price Range */}
                <div className="flex items-center gap-3 px-6 py-4 lg:py-0 border-b sm:border-b-0 lg:border-r border-white/10">
                  <DollarSign size={18} className="text-primary shrink-0" strokeWidth={1.5} />
                  <div className="flex flex-col gap-0.5 flex-1">
                    <span className="text-[10px] text-white/40 uppercase tracking-[0.2em] font-medium">
                      Price Range
                    </span>
                    <div className="relative">
                      <select className="bg-transparent text-white text-[14px] w-full outline-none appearance-none cursor-pointer">
                        <option value="" className="text-obsidian-900">Any Price</option>
                        <option value="1" className="text-obsidian-900">KES 1M - 5M</option>
                        <option value="2" className="text-obsidian-900">KES 5M - 15M</option>
                        <option value="3" className="text-obsidian-900">KES 15M - 50M</option>
                        <option value="4" className="text-obsidian-900">KES 50M+</option>
                      </select>
                      <ChevronDown size={14} className="absolute right-0 top-1/2 -translate-y-1/2 text-white/40 pointer-events-none" />
                    </div>
                  </div>
                </div>

                {/* Search Button */}
                <div className="flex items-center justify-center px-6 py-4 lg:py-0">
                  <button className="w-full bg-primary hover:bg-orange-600 text-white h-12 flex items-center justify-center gap-2 transition-colors text-[12px] font-semibold uppercase tracking-[0.15em]">
                    <Search size={16} strokeWidth={1.5} />
                    Search
                  </button>
                </div>
              </div>
            </div>
          </div>

          {/* Bottom Row: Type Tabs + View Toggle */}
          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mt-4">
            {/* Type Tabs */}
            <div className="flex gap-2 flex-wrap">
              {propertyTypes.map((type) => (
                <button
                  key={type}
                  onClick={() => setActiveType(type)}
                  className={`px-4 py-2 text-xs font-semibold uppercase tracking-wider transition-all ${
                    activeType === type
                      ? "bg-primary text-white"
                      : "bg-white/10 text-white/60 hover:bg-white/20 hover:text-white"
                  }`}
                >
                  {type}
                </button>
              ))}
            </div>

            {/* View Toggle */}
            <div className="flex items-center gap-2">
              <button
                onClick={() => setViewMode("grid")}
                className={`p-2.5 transition-colors ${viewMode === "grid" ? "bg-primary text-white" : "bg-white/10 text-white/50 hover:bg-white/20"}`}
              >
                <Grid3X3 size={16} />
              </button>
              <button
                onClick={() => setViewMode("list")}
                className={`p-2.5 transition-colors ${viewMode === "list" ? "bg-primary text-white" : "bg-white/10 text-white/50 hover:bg-white/20"}`}
              >
                <List size={16} />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Properties Grid */}
      <section className="py-16 lg:py-24 bg-obsidian-50" ref={ref}>
        <div className="mx-auto max-w-7xl px-6 lg:px-8">
          {/* Results count */}
          <div className="flex items-center justify-between mb-8">
            <p className="text-sm text-obsidian-400">
              Showing <span className="text-obsidian-700 font-semibold">{properties.length}</span> properties
            </p>
            <select className="text-sm text-obsidian-500 outline-none bg-transparent">
              <option>Sort by: Newest</option>
              <option>Price: Low to High</option>
              <option>Price: High to Low</option>
            </select>
          </div>

          {/* Grid View */}
          <div className={`grid gap-8 ${viewMode === "grid" ? "sm:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}>
            {properties.map((property, i) => (
              <motion.div
                key={property.title}
                initial={{ opacity: 0, y: 40 }}
                animate={isInView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: i * 0.05 }}
                className={`group cursor-pointer bg-white border border-obsidian-100 hover:shadow-card transition-shadow ${
                  viewMode === "list" ? "flex flex-col sm:flex-row" : ""
                }`}
              >
                {/* Image */}
                <div className={`relative overflow-hidden ${viewMode === "list" ? "sm:w-80 aspect-[4/3] sm:aspect-auto" : "aspect-[4/3]"}`}>
                  <img
                    src={property.image}
                    alt={property.title}
                    className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
                  />
                  <div className="absolute top-4 left-4">
                    <span className="bg-primary text-white text-xs font-semibold px-3 py-1.5 uppercase tracking-wider">
                      {property.tag}
                    </span>
                  </div>
                </div>

                {/* Content */}
                <div className={`p-5 ${viewMode === "list" ? "flex-1 flex flex-col justify-center" : ""}`}>
                  <p className="text-primary font-display font-bold text-lg">{property.price}</p>
                  <h3 className="mt-1 font-display text-base font-bold text-obsidian-700 group-hover:text-primary transition-colors">
                    {property.title}
                  </h3>
                  <div className="flex items-center gap-1 mt-2 text-obsidian-400">
                    <MapPin size={14} />
                    <span className="text-sm">{property.location}</span>
                  </div>
                  <div className="mt-4 pt-4 border-t border-obsidian-100 flex items-center gap-5">
                    {property.beds > 0 && (
                      <div className="flex items-center gap-1.5 text-obsidian-400">
                        <Bed size={14} />
                        <span className="text-xs">{property.beds} Beds</span>
                      </div>
                    )}
                    {property.baths > 0 && (
                      <div className="flex items-center gap-1.5 text-obsidian-400">
                        <Bath size={14} />
                        <span className="text-xs">{property.baths} Baths</span>
                      </div>
                    )}
                    <div className="flex items-center gap-1.5 text-obsidian-400">
                      <Maximize size={14} />
                      <span className="text-xs">{property.area}</span>
                    </div>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>

          {/* Pagination */}
          <div className="mt-12 flex items-center justify-center gap-2">
            {[1, 2, 3, 4, 5].map((page) => (
              <button
                key={page}
                className={`w-10 h-10 flex items-center justify-center text-sm font-semibold transition-colors ${
                  page === 1
                    ? "bg-primary text-white"
                    : "bg-white border border-obsidian-200 text-obsidian-500 hover:border-primary hover:text-primary"
                }`}
              >
                {page}
              </button>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}
