"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, Star, ExternalLink, Search, Grid3X3, List } from "lucide-react";

const categories = ["All", "Developer", "Agency", "Contractor", "Finance", "Legal"];

const companies = [
  {
    name: "Hass Consult Ltd",
    category: "Agency",
    location: "Nairobi, Kenya",
    rating: 4.9,
    reviews: 128,
    description: "Leading property consultancy with over 20 years of experience in Kenyan real estate.",
    image: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop",
    verified: true,
  },
  {
    name: "Centum Real Estate",
    category: "Developer",
    location: "Nairobi, Kenya",
    rating: 4.8,
    reviews: 95,
    description: "Award-winning developer of landmark residential and commercial projects across East Africa.",
    image: "https://images.unsplash.com/photo-1560179707-f14e90ef3623?q=80&w=2073&auto=format&fit=crop",
    verified: true,
  },
  {
    name: "Cytonn Investments",
    category: "Finance",
    location: "Nairobi, Kenya",
    rating: 4.7,
    reviews: 210,
    description: "Alternative investment manager with a focus on high-yield real estate development projects.",
    image: "https://images.unsplash.com/photo-1554469384-e58fac16e23a?q=80&w=2074&auto=format&fit=crop",
    verified: true,
  },
  {
    name: "Mi Vida Homes",
    category: "Developer",
    location: "Nairobi, Kenya",
    rating: 4.6,
    reviews: 67,
    description: "Affordable housing developer creating quality homes for middle-income Kenyans.",
    image: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2070&auto=format&fit=crop",
    verified: true,
  },
  {
    name: "Knight Frank Kenya",
    category: "Agency",
    location: "Nairobi, Kenya",
    rating: 4.9,
    reviews: 152,
    description: "Global property consultancy providing expert advice on Kenyan commercial and residential assets.",
    image: "https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2069&auto=format&fit=crop",
    verified: true,
  },
  {
    name: "Tilisi Developments",
    category: "Developer",
    location: "Kiambu, Kenya",
    rating: 4.5,
    reviews: 43,
    description: "Master-planned mixed-use development offering modern urban living west of Nairobi.",
    image: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?q=80&w=2053&auto=format&fit=crop",
    verified: true,
  },
];

export default function CompaniesPage() {
  const [activeCategory, setActiveCategory] = useState("All");
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-50px" });

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

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

      {/* Filters */}
      <section className="bg-white border-b border-obsidian-100 sticky top-0 z-40">
        <div className="mx-auto max-w-7xl px-6 lg:px-8 py-5">
          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 justify-between">
            <div className="flex items-center gap-3 flex-1">
              <div className="flex items-center gap-2 bg-obsidian-50 px-4 py-3 flex-1 max-w-md">
                <Search size={16} className="text-obsidian-400" />
                <input
                  type="text"
                  placeholder="Search companies..."
                  className="bg-transparent text-sm text-obsidian-700 placeholder:text-obsidian-400 w-full outline-none"
                />
              </div>
            </div>
            <div className="flex items-center gap-2">
              <button
                onClick={() => setViewMode("grid")}
                className={`p-2.5 transition-colors ${viewMode === "grid" ? "bg-primary text-white" : "bg-obsidian-50 text-obsidian-400"}`}
              >
                <Grid3X3 size={16} />
              </button>
              <button
                onClick={() => setViewMode("list")}
                className={`p-2.5 transition-colors ${viewMode === "list" ? "bg-primary text-white" : "bg-obsidian-50 text-obsidian-400"}`}
              >
                <List size={16} />
              </button>
            </div>
          </div>

          <div className="flex gap-2 mt-4 flex-wrap">
            {categories.map((cat) => (
              <button
                key={cat}
                onClick={() => setActiveCategory(cat)}
                className={`px-4 py-2 text-xs font-semibold uppercase tracking-wider transition-all ${
                  activeCategory === cat
                    ? "bg-primary text-white"
                    : "bg-obsidian-50 text-obsidian-500 hover:bg-obsidian-100"
                }`}
              >
                {cat}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Companies 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">
          <div className="flex items-center justify-between mb-8">
            <p className="text-sm text-obsidian-400">
              Showing <span className="text-obsidian-700 font-semibold">{companies.length}</span> vetted companies
            </p>
            <select className="text-sm text-obsidian-500 outline-none bg-transparent">
              <option>Sort by: Rating</option>
              <option>Sort by: Name</option>
              <option>Sort by: Reviews</option>
            </select>
          </div>

          <div className={`grid gap-8 ${viewMode === "grid" ? "sm:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}>
            {companies.map((company, i) => (
              <motion.div
                key={company.name}
                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-72 aspect-[16/10] sm:aspect-auto" : "aspect-[16/10]"}`}>
                  <img
                    src={company.image}
                    alt={company.name}
                    className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
                  />
                  {company.verified && (
                    <div className="absolute top-4 left-4 bg-green-600 text-white text-xs font-semibold px-3 py-1.5 uppercase tracking-wider">
                      Verified
                    </div>
                  )}
                  <div className="absolute top-4 right-4 bg-obsidian-700/80 text-white text-xs font-medium px-3 py-1.5 uppercase tracking-wider">
                    {company.category}
                  </div>
                </div>

                {/* Content */}
                <div className={`p-5 ${viewMode === "list" ? "flex-1 flex flex-col justify-center" : ""}`}>
                  <div className="flex items-center gap-2 mb-2">
                    <div className="flex items-center gap-1">
                      <Star size={14} className="text-primary fill-primary" />
                      <span className="text-sm font-bold text-obsidian-700">{company.rating}</span>
                    </div>
                    <span className="text-xs text-obsidian-400">({company.reviews} reviews)</span>
                  </div>

                  <h3 className="font-display text-lg font-bold text-obsidian-700 group-hover:text-primary transition-colors">
                    {company.name}
                  </h3>

                  <div className="flex items-center gap-1 mt-1 text-obsidian-400">
                    <MapPin size={14} />
                    <span className="text-sm">{company.location}</span>
                  </div>

                  <p className="mt-3 text-sm text-obsidian-400 leading-relaxed line-clamp-2">
                    {company.description}
                  </p>

                  <a
                    href="#"
                    className="inline-flex items-center gap-2 mt-4 text-xs font-semibold text-primary uppercase tracking-wider"
                  >
                    View Profile <ExternalLink size={12} />
                  </a>
                </div>
              </motion.div>
            ))}
          </div>

          {/* Pagination */}
          <div className="mt-12 flex items-center justify-center gap-2">
            {[1, 2, 3].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>
  );
}
