'use client'

import { useState } from 'react'
import { ChevronRightIcon } from '@heroicons/react/20/solid'
import { clsx } from 'clsx'
import { Button } from './button'

const filters = {
  category: ['All', 'Education', 'Health', 'Climate', 'Infrastructure'],
  country: ['All', 'South Africa', 'Brazil', 'Tanzania'],
  status: ['All', 'Active', 'Funded', 'Closed'],
  funding: ['All', 'Donation', 'Investment', 'Pay-it-Forward'],
}

const projects = [
  {
    id: 1,
    title: 'Zanzibar Schools',
    imageUrl: '/portfolio/zanzibar.jpg',
    impactGoal: 'Build 10 sustainable classrooms',
    location: 'Zanzibar, Tanzania',
    category: 'Education',
    country: 'Tanzania',
    status: 'Active',
    fundingType: 'Donation',
    fundedPercent: 68,
    contributors: 128,
    phase: 'Phase 1',
    href: '#',
  },
  {
    id: 2,
    title: 'Kayamandi Health Hub',
    imageUrl: '/portfolio/kayamandi.jpg',
    impactGoal: 'Provide care to 500 families',
    location: 'Stellenbosch, South Africa',
    category: 'Health',
    country: 'South Africa',
    status: 'Funded',
    fundingType: 'Investment',
    fundedPercent: 100,
    contributors: 302,
    phase: 'Phase 2',
    href: '#',
  },
  {
    id: 3,
    title: 'Southern Cape Solar',
    imageUrl: '/portfolio/southern.jpg',
    impactGoal: 'Power 200 homes with clean energy',
    location: 'Southern Cape, South Africa',
    category: 'Climate',
    country: 'South Africa',
    status: 'Active',
    fundingType: 'Investment',
    fundedPercent: 54,
    contributors: 91,
    phase: 'Phase 3',
    href: '#',
  },
  {
    id: 4,
    title: 'Township WiFi Project',
    imageUrl: '/portfolio/township.jpg',
    impactGoal: 'Free internet for 1,000 students',
    location: 'Johannesburg, South Africa',
    category: 'Infrastructure',
    country: 'South Africa',
    status: 'Active',
    fundingType: 'Pay-it-Forward',
    fundedPercent: 32,
    contributors: 45,
    phase: 'Phase 2',
    href: '#',
  },
  {
    id: 5,
    title: 'Durban Climate Garden',
    imageUrl: '/portfolio/durban.jpg',
    impactGoal: 'Grow 5 community food forests',
    location: 'Durban, South Africa',
    category: 'Climate',
    country: 'South Africa',
    status: 'Funded',
    fundingType: 'Donation',
    fundedPercent: 100,
    contributors: 212,
    phase: 'Phase 3',
    href: '#',
  },
  {
    id: 6,
    title: 'Rio Digital Youth Labs',
    imageUrl: '/portfolio/rio.jpg',
    impactGoal: 'Train 1,000 young coders',
    location: 'Rio de Janeiro, Brazil',
    category: 'Education',
    country: 'Brazil',
    status: 'Active',
    fundingType: 'Pay-it-Forward',
    fundedPercent: 45,
    contributors: 89,
    phase: 'Phase 1',
    href: '#',
  },
]

export default function ProjectCard() {
  const [filtersState, setFiltersState] = useState({
    category: 'All',
    country: 'All',
    status: 'All',
    funding: 'All',
  })

  const handleFilterChange = (type: string, value: string) => {
    setFiltersState(prev => ({ ...prev, [type]: value }))
  }

  const filteredProjects = projects.filter(project => {
    return (
      (filtersState.category === 'All' || project.category === filtersState.category) &&
      (filtersState.country === 'All' || project.country === filtersState.country) &&
      (filtersState.status === 'All' || project.status === filtersState.status) &&
      (filtersState.funding === 'All' || project.fundingType === filtersState.funding)
    )
  })

  return (
    <div className="bg-white py-24">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="text-center max-w-2xl mx-auto">
          <h2 className="text-4xl font-semibold text-gray-900 sm:text-5xl">Explore Impact Projects</h2>
          <p className="mt-2 text-lg text-gray-600">Back causes that shape a better future.</p>
        </div>

        {/* Filters */}
        <div className="mt-10 grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
          {Object.entries(filters).map(([filterType, options]) => (
            <select
              key={filterType}
              onChange={(e) => handleFilterChange(filterType, e.target.value)}
              className="w-full border border-gray-300 rounded-md p-2"
              value={filtersState[filterType as keyof typeof filtersState]}
            >
              {options.map(opt => (
                <option key={opt} value={opt}>{opt}</option>
              ))}
            </select>
          ))}
        </div>

        {/* Cards */}
        <div className="mt-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
          {filteredProjects.map(project => (
            <div key={project.id} className="relative rounded-2xl overflow-hidden bg-gray-900 text-white shadow-lg aspect-[4/5]">
              <img src={project.imageUrl} alt={project.title} className="absolute inset-0 w-full h-full object-cover opacity-50" />
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/50 to-transparent" />
              <div className="relative p-6 flex flex-col justify-end h-full">
                <div className="text-sm text-indigo-300 font-semibold">{project.impactGoal}</div>
                <h3 className="text-2xl font-bold mt-2">{project.title}</h3>
                <p className="text-sm mt-1">{project.location}</p>

                <div className="mt-4 text-sm">
                  <span className="text-gray-300">{project.fundedPercent}% funded</span> · <span className="text-gray-300">{project.contributors} backers</span>
                </div>

                <div className="mt-6 flex items-center justify-between gap-2">
                  <a href={project.href} className="text-indigo-400 hover:text-indigo-300 font-semibold flex items-center">
                    Learn More <ChevronRightIcon className="ml-1 h-4 w-4" />
                  </a>
                  <Button variant="secondary" className="text-sm bg-indigo-500 hover:bg-indigo-600 text-white px-3 py-1 rounded-md">
                    Support
                  </Button>
                </div>
              </div>
            </div>
          ))}
        </div>

        {filteredProjects.length === 0 && (
          <div className="text-center mt-12 text-gray-500 text-lg">No projects match your filter criteria.</div>
        )}
      </div>
    </div>
  )
}