import React, { useState } from 'react';
import {
  Globe, Search, MapPin, Users, Heart, Building2, Phone, Mail,
  ExternalLink, ChevronDown, ChevronUp, CheckCircle, Star, Filter,
  Handshake, TreePine, BookOpen, Utensils, Paintbrush
} from 'lucide-react';


interface CommunityOrg {
  id: string;
  name: string;
  category: string;
  description: string;
  address: string;
  phone: string;
  email: string;
  website: string;
  distance: string;
  opportunities: string[];
  partnershipType: 'community-service' | 'school-partnership' | 'both';
  ageGroups: string[];
  rating: number;
  featured: boolean;
}

const COMMUNITY_DATA: CommunityOrg[] = [
  {
    id: '1', name: 'Sunshine Food Bank', category: 'Food & Nutrition',
    description: 'Local food bank providing meals and groceries to families in need. Students can help sort donations, pack meal kits, and assist with distribution events.',
    address: '1420 Community Blvd, Phoenix, AZ 85001', phone: '(602) 555-0142', email: 'volunteer@sunshinefoodbank.org', website: 'sunshinefoodbank.org',
    distance: '2.3 mi', opportunities: ['Food sorting & packing', 'Distribution day volunteers', 'Holiday meal drive', 'Garden maintenance'],
    partnershipType: 'both', ageGroups: ['K-2', '3-5', '6-8'], rating: 5, featured: true
  },
  {
    id: '2', name: 'Desert Bloom Animal Shelter', category: 'Animal Welfare',
    description: 'No-kill animal shelter that welcomes student volunteers for socialization programs. Great sensory-friendly environment for students with autism.',
    address: '890 Paw Print Lane, Phoenix, AZ 85003', phone: '(602) 555-0198', email: 'education@desertbloom.org', website: 'desertbloomshelter.org',
    distance: '3.1 mi', opportunities: ['Animal socialization visits', 'Pet supply drives', 'Kennel decoration projects', 'Reading to animals program'],
    partnershipType: 'both', ageGroups: ['3-5', '6-8'], rating: 5, featured: true
  },
  {
    id: '3', name: 'Valley Senior Living Center', category: 'Senior Services',
    description: 'Assisted living facility offering intergenerational programs. Students visit weekly to share crafts, music, and conversation with residents.',
    address: '2100 Golden Years Dr, Phoenix, AZ 85004', phone: '(602) 555-0167', email: 'activities@valleysenior.com', website: 'valleyseniorliving.com',
    distance: '1.8 mi', opportunities: ['Weekly craft sessions', 'Music & performance visits', 'Holiday card making', 'Garden buddies program'],
    partnershipType: 'community-service', ageGroups: ['K-2', '3-5', '6-8'], rating: 4, featured: false
  },
  {
    id: '4', name: 'Phoenix Public Library — East Branch', category: 'Education & Literacy',
    description: 'Local library branch with dedicated programs for special needs students. Offers sensory-friendly story times and adaptive technology workshops.',
    address: '3500 E McDowell Rd, Phoenix, AZ 85008', phone: '(602) 555-0134', email: 'eastbranch@phoenixlib.org', website: 'phoenixpubliclibrary.org',
    distance: '4.2 mi', opportunities: ['Book drive coordination', 'Reading buddy program', 'Library shelf organization', 'Story time assistants'],
    partnershipType: 'school-partnership', ageGroups: ['K-2', '3-5'], rating: 4, featured: false
  },
  {
    id: '5', name: 'Habitat for Humanity — Phoenix Chapter', category: 'Housing & Construction',
    description: 'Building homes for families in need. Age-appropriate volunteer tasks available including painting, landscaping, and supply organization.',
    address: '780 Builder Way, Phoenix, AZ 85006', phone: '(602) 555-0189', email: 'volunteer@habitatphx.org', website: 'habitatphoenix.org',
    distance: '5.6 mi', opportunities: ['Supply sorting', 'Painting projects', 'Landscaping days', 'Fundraiser events'],
    partnershipType: 'community-service', ageGroups: ['6-8'], rating: 5, featured: true
  },
  {
    id: '6', name: 'Desert Botanical Garden', category: 'Environment & Nature',
    description: 'Beautiful botanical garden offering educational partnerships and volunteer opportunities focused on desert ecology and conservation.',
    address: '1201 N Galvin Pkwy, Phoenix, AZ 85008', phone: '(602) 555-0156', email: 'education@dbg.org', website: 'dbg.org',
    distance: '6.1 mi', opportunities: ['Trail cleanup days', 'Seed planting workshops', 'Nature journaling', 'Butterfly garden maintenance'],
    partnershipType: 'both', ageGroups: ['K-2', '3-5', '6-8'], rating: 5, featured: false
  },
  {
    id: '7', name: 'Special Olympics Arizona', category: 'Sports & Recreation',
    description: 'Year-round sports training and athletic competition for individuals with intellectual disabilities. Partnership opportunities for unified sports.',
    address: '2100 S 75th Ave, Phoenix, AZ 85043', phone: '(602) 555-0145', email: 'programs@soaz.org', website: 'specialolympicsarizona.org',
    distance: '8.4 mi', opportunities: ['Unified sports events', 'Cheer squad support', 'Event setup volunteers', 'Athlete buddy program'],
    partnershipType: 'school-partnership', ageGroups: ['3-5', '6-8'], rating: 5, featured: true
  },
  {
    id: '8', name: 'Community Arts Center', category: 'Arts & Culture',
    description: 'Inclusive arts center offering adaptive art classes and exhibition opportunities. Students can participate in collaborative murals and gallery shows.',
    address: '456 Creative Ave, Phoenix, AZ 85007', phone: '(602) 555-0178', email: 'info@communityarts.org', website: 'communityartsphx.org',
    distance: '3.7 mi', opportunities: ['Collaborative mural projects', 'Art supply drives', 'Gallery exhibition setup', 'Adaptive art workshops'],
    partnershipType: 'both', ageGroups: ['K-2', '3-5', '6-8'], rating: 4, featured: false
  },
  {
    id: '9', name: 'Ronald McDonald House', category: 'Family Support',
    description: 'Provides housing and support for families with children receiving medical treatment. Students can help with meal preparation and activity kits.',
    address: '501 E Thomas Rd, Phoenix, AZ 85012', phone: '(602) 555-0123', email: 'volunteer@rmhcphx.org', website: 'rmhcphoenix.org',
    distance: '4.9 mi', opportunities: ['Meal preparation', 'Activity kit assembly', 'Holiday decoration', 'Card writing campaigns'],
    partnershipType: 'community-service', ageGroups: ['3-5', '6-8'], rating: 5, featured: false
  },
  {
    id: '10', name: 'Neighborhood Cleanup Coalition', category: 'Environment & Nature',
    description: 'Organizes monthly neighborhood beautification projects. Great for teaching environmental responsibility and community pride.',
    address: 'Various locations, Phoenix, AZ', phone: '(602) 555-0190', email: 'join@cleanupcoalition.org', website: 'phxcleanup.org',
    distance: '1.0 mi', opportunities: ['Monthly park cleanups', 'Recycling drives', 'Community garden planting', 'Mural painting'],
    partnershipType: 'community-service', ageGroups: ['K-2', '3-5', '6-8'], rating: 4, featured: false
  },
];

const categoryIcons: Record<string, React.ReactNode> = {
  'Food & Nutrition': <Utensils size={16} />,
  'Animal Welfare': <Heart size={16} />,
  'Senior Services': <Users size={16} />,
  'Education & Literacy': <BookOpen size={16} />,
  'Housing & Construction': <Building2 size={16} />,
  'Environment & Nature': <TreePine size={16} />,
  'Sports & Recreation': <Star size={16} />,
  'Arts & Culture': <Paintbrush size={16} />,
  'Family Support': <Handshake size={16} />,
};

const CommunityService: React.FC = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [categoryFilter, setCategoryFilter] = useState('all');
  const [typeFilter, setTypeFilter] = useState<'all' | 'community-service' | 'school-partnership' | 'both'>('all');
  const [ageFilter, setAgeFilter] = useState('all');
  const [expandedOrg, setExpandedOrg] = useState<string | null>(null);
  const [savedOrgs, setSavedOrgs] = useState<Set<string>>(new Set());
  const [showFilters, setShowFilters] = useState(false);

  const categories = [...new Set(COMMUNITY_DATA.map(o => o.category))];

  const filteredOrgs = COMMUNITY_DATA.filter(org => {
    const matchesSearch = searchQuery === '' ||
      org.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      org.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      org.category.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesCategory = categoryFilter === 'all' || org.category === categoryFilter;
    const matchesType = typeFilter === 'all' || org.partnershipType === typeFilter || org.partnershipType === 'both';
    const matchesAge = ageFilter === 'all' || org.ageGroups.includes(ageFilter);
    return matchesSearch && matchesCategory && matchesType && matchesAge;
  });

  const toggleSave = (id: string) => {
    const next = new Set(savedOrgs);
    if (next.has(id)) next.delete(id); else next.add(id);
    setSavedOrgs(next);
  };

  const typeColors: Record<string, string> = {
    'community-service': 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30',
    'school-partnership': 'bg-blue-500/15 text-blue-400 border-blue-500/30',
    'both': 'bg-violet-500/15 text-violet-400 border-violet-500/30',
  };

  const typeLabels: Record<string, string> = {
    'community-service': 'Community Service',
    'school-partnership': 'School Partnership',
    'both': 'Service & Partnership',
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h2 className="text-2xl font-bold text-white flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-green-400 to-emerald-600 flex items-center justify-center shadow-lg shadow-green-500/30">
            <Globe size={20} className="text-white" />
          </div>
          Community Service & School Partnerships
        </h2>
        <p className="text-sm text-slate-400 mt-1">Discover local organizations for community service projects and school partnership opportunities</p>
      </div>

      {/* Info Banner */}
      <div className="bg-gradient-to-r from-green-500/10 via-emerald-500/10 to-teal-500/10 rounded-2xl border border-green-500/20 p-5">
        <div className="flex items-start gap-4">
          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center flex-shrink-0 shadow-lg shadow-green-500/30">
            <Handshake size={22} className="text-white" />
          </div>
          <div>
            <h3 className="font-bold text-green-400 text-sm uppercase tracking-wider">Building Community Connections</h3>
            <p className="text-slate-300 text-sm mt-1 leading-relaxed">
              Explore local organizations that welcome school partnerships and community service projects. These opportunities help students develop social skills, build confidence, and contribute meaningfully to their community.
            </p>
          </div>
        </div>
      </div>

      {/* Search & Filters */}
      <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-5">
        <div className="flex flex-col md:flex-row gap-3">
          <div className="relative flex-1">
            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
            <input
              type="text"
              value={searchQuery}
              onChange={e => setSearchQuery(e.target.value)}
              placeholder="Search organizations, categories, or keywords..."
              className="w-full pl-9 pr-4 py-2.5 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white placeholder-slate-500 focus:ring-2 focus:ring-green-500/50 focus:border-green-500/50 outline-none"
            />
          </div>
          <button
            onClick={() => setShowFilters(!showFilters)}
            className="flex items-center gap-2 px-4 py-2.5 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-slate-300 hover:bg-slate-700 transition-colors"
          >
            <Filter size={14} />
            Filters
            {showFilters ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
          </button>
        </div>

        {showFilters && (
          <div className="mt-4 pt-4 border-t border-slate-700/40 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 block">Category</label>
              <select
                value={categoryFilter}
                onChange={e => setCategoryFilter(e.target.value)}
                className="w-full px-3 py-2 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white focus:ring-2 focus:ring-green-500/50 outline-none"
              >
                <option value="all">All Categories</option>
                {categories.map(cat => <option key={cat} value={cat}>{cat}</option>)}
              </select>
            </div>
            <div>
              <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 block">Type</label>
              <select
                value={typeFilter}
                onChange={e => setTypeFilter(e.target.value as any)}
                className="w-full px-3 py-2 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white focus:ring-2 focus:ring-green-500/50 outline-none"
              >
                <option value="all">All Types</option>
                <option value="community-service">Community Service</option>
                <option value="school-partnership">School Partnership</option>
              </select>
            </div>
            <div>
              <label className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 block">Age Group</label>
              <select
                value={ageFilter}
                onChange={e => setAgeFilter(e.target.value)}
                className="w-full px-3 py-2 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white focus:ring-2 focus:ring-green-500/50 outline-none"
              >
                <option value="all">All Ages</option>
                <option value="K-2">K-2</option>
                <option value="3-5">3-5</option>
                <option value="6-8">6-8</option>
              </select>
            </div>
          </div>
        )}
      </div>

      {/* Stats Bar */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {[
          { label: 'Organizations', value: COMMUNITY_DATA.length.toString(), color: 'from-green-500 to-emerald-600', icon: <Building2 size={18} /> },
          { label: 'Service Projects', value: COMMUNITY_DATA.filter(o => o.partnershipType !== 'school-partnership').length.toString(), color: 'from-emerald-500 to-teal-600', icon: <Heart size={18} /> },
          { label: 'School Partners', value: COMMUNITY_DATA.filter(o => o.partnershipType !== 'community-service').length.toString(), color: 'from-blue-500 to-indigo-600', icon: <Handshake size={18} /> },
          { label: 'Saved', value: savedOrgs.size.toString(), color: 'from-amber-500 to-orange-600', icon: <Star size={18} /> },
        ].map((stat, i) => (
          <div key={i} className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-4">
            <div className="flex items-center gap-3">
              <div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${stat.color} flex items-center justify-center text-white shadow-lg`}>{stat.icon}</div>
              <div>
                <p className="text-2xl font-bold text-white">{stat.value}</p>
                <p className="text-xs text-slate-500">{stat.label}</p>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Results */}
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <p className="text-sm text-slate-400">{filteredOrgs.length} organization{filteredOrgs.length !== 1 ? 's' : ''} found</p>
        </div>

        {filteredOrgs.map(org => (
          <div key={org.id} className={`bg-slate-800/40 backdrop-blur-sm rounded-2xl border transition-all duration-200 overflow-hidden ${
            expandedOrg === org.id ? 'border-green-500/30' : 'border-slate-700/40 hover:border-slate-600/50'
          }`}>
            <div
              className="p-5 cursor-pointer"
              onClick={() => setExpandedOrg(expandedOrg === org.id ? null : org.id)}
            >
              <div className="flex items-start justify-between gap-4">
                <div className="flex items-start gap-4 min-w-0 flex-1">
                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 border border-green-500/20 flex items-center justify-center flex-shrink-0 text-green-400">
                    {categoryIcons[org.category] || <Globe size={16} />}
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2 flex-wrap">
                      <h3 className="font-semibold text-white text-base">{org.name}</h3>
                      {org.featured && (
                        <span className="px-2 py-0.5 bg-amber-500/15 text-amber-400 border border-amber-500/30 rounded-lg text-[10px] font-semibold">FEATURED</span>
                      )}
                    </div>
                    <div className="flex items-center gap-3 mt-1 flex-wrap">
                      <span className={`px-2 py-0.5 rounded-lg text-[10px] font-semibold border ${typeColors[org.partnershipType]}`}>
                        {typeLabels[org.partnershipType]}
                      </span>
                      <span className="text-xs text-slate-500 flex items-center gap-1">
                        <MapPin size={10} /> {org.distance}
                      </span>
                      <span className="text-xs text-slate-500">{org.category}</span>
                    </div>
                    <p className="text-sm text-slate-400 mt-2 line-clamp-2">{org.description}</p>
                  </div>
                </div>
                <div className="flex items-center gap-2 flex-shrink-0">
                  <button
                    onClick={e => { e.stopPropagation(); toggleSave(org.id); }}
                    className={`p-2 rounded-xl transition-all ${savedOrgs.has(org.id) ? 'bg-amber-500/15 text-amber-400' : 'bg-slate-700/50 text-slate-500 hover:text-amber-400'}`}
                  >
                    <Star size={16} fill={savedOrgs.has(org.id) ? 'currentColor' : 'none'} />
                  </button>
                  {expandedOrg === org.id ? <ChevronUp size={18} className="text-slate-500" /> : <ChevronDown size={18} className="text-slate-500" />}
                </div>
              </div>
            </div>

            {expandedOrg === org.id && (
              <div className="px-5 pb-5 space-y-4 border-t border-slate-700/40 pt-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {/* Contact Info */}
                  <div className="bg-slate-700/30 rounded-xl p-4 space-y-3">
                    <h4 className="font-semibold text-sm text-white flex items-center gap-2">
                      <Building2 size={14} className="text-green-400" /> Contact Information
                    </h4>
                    <div className="space-y-2">
                      <div className="flex items-center gap-2 text-sm text-slate-300">
                        <MapPin size={14} className="text-slate-500 flex-shrink-0" />
                        <span>{org.address}</span>
                      </div>
                      <div className="flex items-center gap-2 text-sm text-slate-300">
                        <Phone size={14} className="text-slate-500 flex-shrink-0" />
                        <span>{org.phone}</span>
                      </div>
                      <div className="flex items-center gap-2 text-sm text-slate-300">
                        <Mail size={14} className="text-slate-500 flex-shrink-0" />
                        <a href={`mailto:${org.email}`} className="text-green-400 hover:text-green-300">{org.email}</a>
                      </div>
                      <div className="flex items-center gap-2 text-sm text-slate-300">
                        <ExternalLink size={14} className="text-slate-500 flex-shrink-0" />
                        <a href={`https://${org.website}`} target="_blank" rel="noopener noreferrer" className="text-green-400 hover:text-green-300">{org.website}</a>
                      </div>
                    </div>
                  </div>

                  {/* Opportunities */}
                  <div className="bg-slate-700/30 rounded-xl p-4">
                    <h4 className="font-semibold text-sm text-white flex items-center gap-2 mb-3">
                      <CheckCircle size={14} className="text-emerald-400" /> Available Opportunities
                    </h4>
                    <div className="space-y-2">
                      {org.opportunities.map((opp, i) => (
                        <div key={i} className="flex items-center gap-2">
                          <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0" />
                          <span className="text-sm text-slate-300">{opp}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Age Groups & Actions */}
                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 pt-2">
                  <div className="flex items-center gap-2">
                    <span className="text-xs text-slate-500">Age Groups:</span>
                    {org.ageGroups.map(age => (
                      <span key={age} className="px-2 py-0.5 bg-slate-700/50 text-slate-300 rounded-lg text-xs font-medium border border-slate-600/50">{age}</span>
                    ))}
                  </div>
                  <div className="flex items-center gap-2">
                    <button className="px-4 py-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-xl text-sm font-medium hover:shadow-lg hover:shadow-green-500/25 transition-all">
                      Contact Organization
                    </button>
                    <button
                      onClick={() => toggleSave(org.id)}
                      className={`px-4 py-2 rounded-xl text-sm font-medium border transition-all ${
                        savedOrgs.has(org.id)
                          ? 'bg-amber-500/15 text-amber-400 border-amber-500/30'
                          : 'bg-slate-700/50 text-slate-300 border-slate-600/50 hover:border-amber-500/30'
                      }`}
                    >
                      {savedOrgs.has(org.id) ? 'Saved' : 'Save'}
                    </button>
                  </div>
                </div>
              </div>
            )}
          </div>
        ))}

        {filteredOrgs.length === 0 && (
          <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-12 text-center">
            <Globe size={40} className="text-slate-600 mx-auto mb-3" />
            <h3 className="font-semibold text-white mb-1">No organizations found</h3>
            <p className="text-sm text-slate-400">Try adjusting your search or filters to find more opportunities.</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default CommunityService;