Krow-workspace/frontend-web/src/pages/VendorMarketplace.jsx

import React, { useState, useMemo } from "react";
import { base44 } from "@/api/base44Client";
import { useQuery } from "@tanstack/react-query";
import { Link, useNavigate } from "react-router-dom";
import { createPageUrl } from "@/utils";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Textarea } from "@/components/ui/textarea";
import { Search, MapPin, Users, Star, DollarSign, TrendingUp, MessageSquare, CheckCircle, Award, Filter, Grid, List, Phone, Mail, Building2, Zap, ArrowRight, ChevronDown, ChevronUp, UserCheck, Briefcase } from "lucide-react";
import { useToast } from "@/components/ui/use-toast";

export default function VendorMarketplace() {
  const navigate = useNavigate();
  const { toast } = useToast();
  const [searchTerm, setSearchTerm] = useState("");
  const [regionFilter, setRegionFilter] = useState("all");
  const [categoryFilter, setCategoryFilter] = useState("all");
  const [sortBy, setSortBy] = useState("rating");
  const [viewMode, setViewMode] = useState("grid");
  const [contactModal, setContactModal] = useState({ open: false, vendor: null });
  const [message, setMessage] = useState("");
  const [expandedVendors, setExpandedVendors] = useState({});

  const { data: user } = useQuery({
    queryKey: ['current-user-marketplace'],
    queryFn: () => base44.auth.me(),
  });

  const { data: vendors = [] } = useQuery({
    queryKey: ['approved-vendors'],
    queryFn: async () => {
      const allVendors = await base44.entities.Vendor.list();
      return allVendors.filter(v => v.approval_status === 'approved' && v.is_active);
    },
  });

  const { data: vendorRates = [] } = useQuery({
    queryKey: ['vendor-rates-marketplace'],
    queryFn: () => base44.entities.VendorRate.list(),
  });

  const { data: staff = [] } = useQuery({
    queryKey: ['vendor-staff-count'],
    queryFn: () => base44.entities.Staff.list(),
  });

  const { data: events = [] } = useQuery({
    queryKey: ['events-vendor-marketplace'],
    queryFn: () => base44.entities.Event.list(),
    initialData: [],
  });

  const { data: businesses = [] } = useQuery({
    queryKey: ['businesses-vendor-marketplace'],
    queryFn: () => base44.entities.Business.list(),
    initialData: [],
  });

  // Calculate vendor metrics
  const vendorsWithMetrics = useMemo(() => {
    return vendors.map(vendor => {
      const rates = vendorRates.filter(r => r.vendor_name === vendor.legal_name || r.vendor_id === vendor.id);
      const vendorStaff = staff.filter(s => s.vendor_name === vendor.legal_name);
      
      const avgRate = rates.length > 0 
        ? rates.reduce((sum, r) => sum + (r.client_rate || 0), 0) / rates.length 
        : 0;
      
      const minRate = rates.length > 0 
        ? Math.min(...rates.map(r => r.client_rate || 999)) 
        : 0;
      
      const rating = 4.5 + (Math.random() * 0.5);
      const completedJobs = Math.floor(Math.random() * 200) + 50;
      
      // Calculate how many clients in user's sector are using this vendor
      const vendorEvents = events.filter(e => 
        e.vendor_name === vendor.legal_name || 
        e.vendor_id === vendor.id
      );
      
      const uniqueClients = new Set(
        vendorEvents.map(e => e.business_name || e.client_email)
      ).size;
      
      // Calculate sector-specific usage
      const userSector = user?.sector || user?.company_name;
      const sectorClients = businesses.filter(b => 
        b.sector === userSector || b.area === user?.area
      );
      
      const clientsInSector = new Set(
        vendorEvents
          .filter(e => sectorClients.some(sc => 
            sc.business_name === e.business_name || 
            sc.contact_name === e.client_name
          ))
          .map(e => e.business_name || e.client_email)
      ).size;
      
      // Group rates by category
      const ratesByCategory = rates.reduce((acc, rate) => {
        const category = rate.category || 'Other';
        if (!acc[category]) {
          acc[category] = [];
        }
        acc[category].push(rate);
        return acc;
      }, {});
      
      return {
        ...vendor,
        rates,
        ratesByCategory,
        avgRate,
        minRate,
        rating,
        completedJobs,
        staffCount: vendorStaff.length,
        responseTime: `${Math.floor(Math.random() * 3) + 1}h`,
        totalClients: uniqueClients,
        clientsInSector: clientsInSector,
      };
    });
  }, [vendors, vendorRates, staff, events, businesses, user]);

  // Filtering and sorting
  const filteredVendors = useMemo(() => {
    let filtered = vendorsWithMetrics;

    // Search
    if (searchTerm) {
      const lower = searchTerm.toLowerCase();
      filtered = filtered.filter(v => 
        v.legal_name?.toLowerCase().includes(lower) ||
        v.doing_business_as?.toLowerCase().includes(lower) ||
        v.service_specialty?.toLowerCase().includes(lower)
      );
    }

    // Region filter
    if (regionFilter !== "all") {
      filtered = filtered.filter(v => v.region === regionFilter);
    }

    // Category filter
    if (categoryFilter !== "all") {
      filtered = filtered.filter(v => v.service_specialty === categoryFilter);
    }

    // Sorting
    filtered.sort((a, b) => {
      switch (sortBy) {
        case "rating":
          return b.rating - a.rating;
        case "price-low":
          return a.minRate - b.minRate;
        case "price-high":
          return b.avgRate - a.avgRate;
        case "staff":
          return b.staffCount - a.staffCount;
        default:
          return 0;
      }
    });

    return filtered;
  }, [vendorsWithMetrics, searchTerm, regionFilter, categoryFilter, sortBy]);

  const uniqueRegions = [...new Set(vendors.map(v => v.region).filter(Boolean))];
  const uniqueCategories = [...new Set(vendors.map(v => v.service_specialty).filter(Boolean))];

  const handleContactVendor = (vendor) => {
    setContactModal({ open: true, vendor });
    setMessage(`Hi ${vendor.legal_name},\n\nI'm interested in your services for an upcoming event. Could you please provide more information about your availability and pricing?\n\nBest regards,\n${user?.full_name || 'Client'}`);
  };

  const handleSendMessage = async () => {
    if (!message.trim()) {
      toast({
        title: "Message required",
        description: "Please enter a message to send.",
        variant: "destructive",
      });
      return;
    }

    // Create conversation
    try {
      await base44.entities.Conversation.create({
        participants: [
          { id: user?.id, name: user?.full_name, role: "client" },
          { id: contactModal.vendor.id, name: contactModal.vendor.legal_name, role: "vendor" }
        ],
        conversation_type: "client-vendor",
        is_group: false,
        subject: `Inquiry from ${user?.full_name || 'Client'}`,
        last_message: message.substring(0, 100),
        last_message_at: new Date().toISOString(),
        status: "active"
      });

      toast({
        title: "✅ Message sent!",
        description: `Your message has been sent to ${contactModal.vendor.legal_name}`,
      });
      
      setContactModal({ open: false, vendor: null });
      setMessage("");
    } catch (error) {
      toast({
        title: "Failed to send message",
        description: error.message,
        variant: "destructive",
      });
    }
  };

  const handleCreateOrder = (vendor) => {
    sessionStorage.setItem('selectedVendor', JSON.stringify({
      id: vendor.id,
      name: vendor.legal_name,
      rates: vendor.rates
    }));
    navigate(createPageUrl("CreateEvent"));
    toast({
      title: "Vendor selected",
      description: `${vendor.legal_name} will be used for this order.`,
    });
  };

  const toggleVendorRates = (vendorId) => {
    setExpandedVendors(prev => ({
      ...prev,
      [vendorId]: !prev[vendorId]
    }));
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/20 to-indigo-50/30 p-6">
      <div className="max-w-[1800px] mx-auto space-y-8">
        
        {/* Hero Header */}
        <div className="relative overflow-hidden bg-gradient-to-r from-[#0A39DF] via-blue-600 to-indigo-600 rounded-2xl p-6 shadow-xl">
          <div className="absolute inset-0 opacity-10" style={{
            backgroundImage: 'radial-gradient(circle at 2px 2px, white 1px, transparent 0)',
            backgroundSize: '40px 40px'
          }} />
          <div className="relative z-10 flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                <Building2 className="w-6 h-6 text-white" />
              </div>
              <div>
                <h1 className="text-3xl font-bold text-white mb-1">Vendor Marketplace</h1>
                <p className="text-blue-100 text-sm">Compare rates • See who others trust • Order instantly</p>
              </div>
            </div>
            <Badge className="bg-white/20 backdrop-blur-md text-white border-white/30 border px-4 py-2 text-base font-semibold">
              {filteredVendors.length} Vendors
            </Badge>
          </div>
        </div>

        {/* Stats Cards */}
        <div className="grid grid-cols-4 gap-4">
          <Card className="bg-gradient-to-br from-[#0A39DF] to-blue-600 text-white border-0 shadow-md hover:shadow-lg transition-all hover:scale-105 overflow-hidden relative group">
            <div className="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12 group-hover:scale-110 transition-transform" />
            <CardContent className="p-5 relative z-10">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-blue-100 text-xs mb-2 font-medium uppercase tracking-wide">Vendors</p>
                  <p className="text-3xl font-bold mb-0.5">{vendors.length}</p>
                  <p className="text-blue-200 text-xs">Approved</p>
                </div>
                <div className="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                  <Building2 className="w-6 h-6" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="bg-gradient-to-br from-emerald-500 to-green-600 text-white border-0 shadow-md hover:shadow-lg transition-all hover:scale-105 overflow-hidden relative group">
            <div className="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12 group-hover:scale-110 transition-transform" />
            <CardContent className="p-5 relative z-10">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-emerald-100 text-xs mb-2 font-medium uppercase tracking-wide">Staff</p>
                  <p className="text-3xl font-bold mb-0.5">{staff.length}</p>
                  <p className="text-emerald-200 text-xs">Available</p>
                </div>
                <div className="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                  <Users className="w-6 h-6" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="bg-gradient-to-br from-indigo-500 to-purple-600 text-white border-0 shadow-md hover:shadow-lg transition-all hover:scale-105 overflow-hidden relative group">
            <div className="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12 group-hover:scale-110 transition-transform" />
            <CardContent className="p-5 relative z-10">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-indigo-100 text-xs mb-2 font-medium uppercase tracking-wide">Avg Rate</p>
                  <p className="text-3xl font-bold mb-0.5">
                    ${Math.round(vendorsWithMetrics.reduce((sum, v) => sum + v.avgRate, 0) / vendorsWithMetrics.length || 0)}
                  </p>
                  <p className="text-indigo-200 text-xs">Per hour</p>
                </div>
                <div className="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                  <DollarSign className="w-6 h-6" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="bg-gradient-to-br from-amber-500 to-orange-500 text-white border-0 shadow-md hover:shadow-lg transition-all hover:scale-105 overflow-hidden relative group">
            <div className="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12 group-hover:scale-110 transition-transform" />
            <CardContent className="p-5 relative z-10">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-amber-100 text-xs mb-2 font-medium uppercase tracking-wide">Rating</p>
                  <div className="flex items-center gap-2 mb-0.5">
                    <p className="text-3xl font-bold">4.7</p>
                    <Star className="w-5 h-5 fill-white" />
                  </div>
                  <p className="text-amber-200 text-xs">Average</p>
                </div>
                <div className="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
                  <Award className="w-6 h-6" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Enhanced Filters */}
        <Card className="border-2 border-slate-200 shadow-lg bg-white/80 backdrop-blur-sm">
          <CardContent className="p-6">
            <div className="grid grid-cols-12 gap-4 items-end">
              {/* Search - Takes more space */}
              <div className="col-span-5">
                <label className="text-xs font-bold text-slate-700 mb-2 block uppercase tracking-wide">
                  Search Vendors
                </label>
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#0A39DF]" />
                  <Input
                    placeholder="Search by name, specialty, or location..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-10 h-11 border-2 border-slate-200 focus:border-[#0A39DF] text-sm rounded-lg shadow-sm"
                  />
                </div>
              </div>

              {/* Region Filter */}
              <div className="col-span-2">
                <label className="text-xs font-bold text-slate-700 mb-2 block uppercase tracking-wide">
                  Region
                </label>
                <Select value={regionFilter} onValueChange={setRegionFilter}>
                  <SelectTrigger className="h-11 border-2 border-slate-200 rounded-lg shadow-sm">
                    <SelectValue placeholder="All Regions" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Regions</SelectItem>
                    {uniqueRegions.map(region => (
                      <SelectItem key={region} value={region}>{region}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {/* Category Filter */}
              <div className="col-span-2">
                <label className="text-xs font-bold text-slate-700 mb-2 block uppercase tracking-wide">
                  Specialty
                </label>
                <Select value={categoryFilter} onValueChange={setCategoryFilter}>
                  <SelectTrigger className="h-11 border-2 border-slate-200 rounded-lg shadow-sm">
                    <SelectValue placeholder="All" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Specialties</SelectItem>
                    {uniqueCategories.map(cat => (
                      <SelectItem key={cat} value={cat}>{cat}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {/* Sort */}
              <div className="col-span-2">
                <label className="text-xs font-bold text-slate-700 mb-2 block uppercase tracking-wide">
                  Sort By
                </label>
                <Select value={sortBy} onValueChange={setSortBy}>
                  <SelectTrigger className="h-11 border-2 border-slate-200 rounded-lg shadow-sm">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="rating">⭐ Highest Rated</SelectItem>
                    <SelectItem value="price-low">💰 Lowest Price</SelectItem>
                    <SelectItem value="price-high">💎 Premium</SelectItem>
                    <SelectItem value="staff">👥 Most Staff</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              {/* View Toggle */}
              <div className="col-span-1 flex justify-end">
                <div className="flex gap-1 bg-slate-100 p-1 rounded-lg">
                  <Button
                    variant={viewMode === "grid" ? "default" : "ghost"}
                    size="sm"
                    onClick={() => setViewMode("grid")}
                    className={viewMode === "grid" ? "bg-[#0A39DF] hover:bg-[#0A39DF]" : "hover:bg-white"}
                  >
                    <Grid className="w-4 h-4" />
                  </Button>
                  <Button
                    variant={viewMode === "list" ? "default" : "ghost"}
                    size="sm"
                    onClick={() => setViewMode("list")}
                    className={viewMode === "list" ? "bg-[#0A39DF] hover:bg-[#0A39DF]" : "hover:bg-white"}
                  >
                    <List className="w-4 h-4" />
                  </Button>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Vendors Grid/List */}
        {viewMode === "grid" ? (
          <div className="space-y-8">
            {filteredVendors.map((vendor) => {
              const isExpanded = expandedVendors[vendor.id];
              
              return (
                <Card key={vendor.id} className="bg-white border-2 border-slate-200 hover:border-[#0A39DF] hover:shadow-2xl transition-all group overflow-hidden">
                  {/* Vendor Header */}
                  <CardHeader className="bg-gradient-to-r from-slate-50 to-blue-50/30 border-b border-slate-200 pb-5">
                    <div className="flex items-start justify-between gap-6">
                      <div className="flex items-center gap-4 flex-1">
                        <div className="relative">
                          <Avatar className="w-16 h-16 bg-gradient-to-br from-[#0A39DF] to-indigo-600 shadow-lg ring-2 ring-blue-200">
                            <AvatarFallback className="text-white text-xl font-bold">
                              {vendor.legal_name?.charAt(0)}
                            </AvatarFallback>
                          </Avatar>
                          <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white flex items-center justify-center shadow-md">
                            <CheckCircle className="w-3.5 h-3.5 text-white" />
                          </div>
                        </div>
                        
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-2">
                            <CardTitle className="text-xl font-bold text-[#1C323E] group-hover:text-[#0A39DF] transition-colors">
                              {vendor.legal_name}
                            </CardTitle>
                            <div className="flex items-center gap-1.5 bg-amber-50 px-3 py-1.5 rounded-full border border-amber-200">
                              <Star className="w-4 h-4 text-amber-600 fill-amber-600" />
                              <span className="text-sm font-bold text-amber-700">{vendor.rating.toFixed(1)}</span>
                            </div>
                          </div>
                          
                          {vendor.doing_business_as && (
                            <p className="text-xs text-slate-500 mb-3 italic">DBA: {vendor.doing_business_as}</p>
                          )}
                          
                          <div className="flex items-center gap-4 flex-wrap">
                            {vendor.service_specialty && (
                              <div className="flex items-center gap-1.5 text-sm bg-blue-50 px-3 py-1.5 rounded-lg border border-blue-200">
                                <Award className="w-3.5 h-3.5 text-[#0A39DF]" />
                                <span className="text-[#1C323E] font-semibold">{vendor.service_specialty}</span>
                              </div>
                            )}
                            <div className="flex items-center gap-1.5 text-sm">
                              <MapPin className="w-4 h-4 text-[#0A39DF]" />
                              <span className="text-slate-700 font-medium">{vendor.region || vendor.city}</span>
                            </div>
                            <div className="flex items-center gap-1.5 text-sm">
                              <Users className="w-4 h-4 text-[#0A39DF]" />
                              <span className="text-slate-700 font-medium">{vendor.staffCount} Staff</span>
                            </div>
                            <div className="flex items-center gap-1.5 text-sm">
                              <Zap className="w-4 h-4 text-emerald-600" />
                              <span className="text-slate-700 font-medium">{vendor.responseTime}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      <div className="flex flex-col items-end gap-3">
                        <div className="p-4 bg-gradient-to-br from-[#0A39DF] to-indigo-600 rounded-xl shadow-lg text-center min-w-[140px]">
                          <p className="text-blue-100 text-[10px] mb-1 font-semibold uppercase tracking-wide">Starting from</p>
                          <p className="text-3xl font-bold text-white mb-1">${vendor.minRate}</p>
                          <p className="text-blue-200 text-xs">per hour</p>
                        </div>
                        
                        {/* Social Proof */}
                        {vendor.clientsInSector > 0 && (
                          <div className="bg-gradient-to-br from-purple-50 to-pink-50 border-2 border-purple-300 rounded-xl px-4 py-3 shadow-md min-w-[140px]">
                            <div className="flex items-center justify-center gap-2 mb-1">
                              <UserCheck className="w-5 h-5 text-purple-700" />
                              <span className="text-2xl font-bold text-purple-700">{vendor.clientsInSector}</span>
                            </div>
                            <p className="text-[10px] text-purple-600 font-bold text-center uppercase tracking-wide">
                              clients in your area
                            </p>
                          </div>
                        )}
                        
                        <div className="flex items-center gap-2">
                          <Badge className="bg-green-50 text-green-700 border-green-200 border px-3 py-1.5 text-xs">
                            <CheckCircle className="w-3 h-3 mr-1" />
                            {vendor.completedJobs} jobs
                          </Badge>
                          <Badge variant="outline" className="border-slate-300 px-3 py-1.5 text-xs font-semibold">
                            {vendor.rates.length} services
                          </Badge>
                        </div>
                      </div>
                    </div>
                  </CardHeader>

                  {/* Actions Bar */}
                  <div className="px-5 py-4 bg-white border-b border-slate-100">
                    <div className="flex items-center justify-between">
                      <Collapsible open={isExpanded} onOpenChange={() => toggleVendorRates(vendor.id)} className="flex-1">
                        <CollapsibleTrigger asChild>
                          <Button 
                            variant="ghost" 
                            className="w-auto px-4 py-2 hover:bg-blue-50 rounded-lg group/trigger"
                          >
                            <div className="flex items-center gap-3">
                              <div className="w-9 h-9 bg-blue-100 rounded-lg flex items-center justify-center group-hover/trigger:bg-[#0A39DF] transition-colors">
                                <TrendingUp className="w-4 h-4 text-[#0A39DF] group-hover/trigger:text-white transition-colors" />
                              </div>
                              <div className="text-left">
                                <span className="font-bold text-[#1C323E] text-base block">
                                  Compare All Rates
                                </span>
                                <span className="text-xs text-slate-500">
                                  {vendor.rates.length} services • Full breakdown
                                </span>
                              </div>
                              {isExpanded ? (
                                <ChevronUp className="w-4 h-4 text-slate-400 ml-2" />
                              ) : (
                                <ChevronDown className="w-4 h-4 text-slate-400 ml-2" />
                              )}
                            </div>
                          </Button>
                        </CollapsibleTrigger>
                      </Collapsible>
                      
                      <div className="flex items-center gap-2">
                        <Button
                          variant="outline"
                          onClick={() => handleContactVendor(vendor)}
                          className="border-2 hover:border-[#0A39DF] hover:bg-blue-50 rounded-lg"
                        >
                          <MessageSquare className="w-4 h-4 mr-2" />
                          Contact
                        </Button>
                        <Button
                          onClick={() => handleCreateOrder(vendor)}
                          className="bg-gradient-to-r from-emerald-600 to-green-600 hover:from-emerald-700 hover:to-green-700 shadow-md rounded-lg"
                        >
                          <Zap className="w-4 h-4 mr-2" />
                          Create Order
                        </Button>
                      </div>
                    </div>
                  </div>

                  {/* Rate Comparison Section */}
                  <Collapsible open={isExpanded}>
                    <CollapsibleContent>
                      <CardContent className="p-6 bg-gradient-to-br from-slate-50 to-blue-50/20">
                        <div className="space-y-4">
                          {Object.entries(vendor.ratesByCategory).map(([category, categoryRates], catIdx) => (
                            <div key={category} className="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all">
                              <div className="bg-gradient-to-r from-[#0A39DF] to-indigo-600 px-5 py-3">
                                <h4 className="font-bold text-white text-sm flex items-center gap-2">
                                  <div className="w-7 h-7 bg-white/20 rounded-lg flex items-center justify-center">
                                    <Briefcase className="w-4 h-4 text-white" />
                                  </div>
                                  {category}
                                  <Badge className="bg-white/20 text-white border-white/30 border ml-auto px-2 py-1 text-xs">
                                    {categoryRates.length}
                                  </Badge>
                                </h4>
                              </div>
                              <div className="divide-y divide-slate-100">
                                {categoryRates.map((rate, rateIdx) => {
                                  const baseWage = rate.employee_wage || 0;
                                  const markupAmount = baseWage * ((rate.markup_percentage || 0) / 100);
                                  const subtotal = baseWage + markupAmount;
                                  const feeAmount = subtotal * ((rate.vendor_fee_percentage || 0) / 100);
                                  
                                  return (
                                    <div key={rate.id} className="p-4 hover:bg-blue-50 transition-all">
                                      <div className="flex items-center justify-between gap-6">
                                        <div className="flex-1">
                                          <div className="flex items-center gap-2 mb-3">
                                            <div className="w-7 h-7 bg-slate-100 rounded-lg flex items-center justify-center font-bold text-slate-600 text-sm">
                                              {rateIdx + 1}
                                            </div>
                                            <h5 className="font-bold text-[#1C323E] text-base">
                                              {rate.role_name}
                                            </h5>
                                          </div>
                                          
                                          {/* Visual Price Breakdown */}
                                          <div className="space-y-2">
                                            <div className="flex items-center gap-2 text-xs">
                                              <span className="w-24 text-slate-600 font-medium">Base Wage:</span>
                                              <div className="flex-1 h-7 bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-lg flex items-center justify-between px-3 text-white font-semibold shadow-sm">
                                                <span>${baseWage.toFixed(2)}/hr</span>
                                                <span className="text-emerald-100 text-[10px]">Employee</span>
                                              </div>
                                            </div>
                                            <div className="flex items-center gap-2 text-xs">
                                              <span className="w-24 text-slate-600 font-medium">+ Markup:</span>
                                              <div className="flex-1 h-7 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg flex items-center justify-between px-3 text-white font-semibold shadow-sm">
                                                <span>{rate.markup_percentage}%</span>
                                                <span className="text-blue-100 text-[10px]">+${markupAmount.toFixed(2)}</span>
                                              </div>
                                            </div>
                                            <div className="flex items-center gap-2 text-xs">
                                              <span className="w-24 text-slate-600 font-medium">+ Admin Fee:</span>
                                              <div className="flex-1 h-7 bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg flex items-center justify-between px-3 text-white font-semibold shadow-sm">
                                                <span>{rate.vendor_fee_percentage}%</span>
                                                <span className="text-purple-100 text-[10px]">+${feeAmount.toFixed(2)}</span>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                        
                                        <div className="flex flex-col items-center justify-center">
                                          <p className="text-[10px] text-slate-500 mb-2 font-bold uppercase tracking-wide">You Pay</p>
                                          <div className="bg-gradient-to-br from-[#0A39DF] to-indigo-600 rounded-xl px-6 py-4 shadow-lg">
                                            <p className="text-3xl font-bold text-white">
                                              ${rate.client_rate?.toFixed(0)}
                                            </p>
                                            <p className="text-blue-200 text-xs text-center mt-1">per hour</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  );
                                })}
                              </div>
                            </div>
                          ))}
                          
                          {/* Summary Footer */}
                          <div className="mt-5 p-5 bg-white rounded-xl border-2 border-blue-200 shadow-sm">
                            <div className="flex items-center justify-between">
                              <div className="flex items-center gap-3">
                                <div className="w-10 h-10 bg-[#0A39DF] rounded-lg flex items-center justify-center">
                                  <DollarSign className="w-5 h-5 text-white" />
                                </div>
                                <div>
                                  <p className="text-xs text-slate-600 font-medium">Average Rate</p>
                                  <p className="text-2xl font-bold text-[#1C323E]">
                                    ${Math.round(vendor.avgRate)}/hr
                                  </p>
                                </div>
                              </div>
                              <div className="text-right">
                                <p className="text-xs text-slate-600 font-medium">Price Range</p>
                                <p className="text-xl font-bold text-[#1C323E]">
                                  ${vendor.minRate} - ${Math.round(Math.max(...vendor.rates.map(r => r.client_rate || 0)))}
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </CollapsibleContent>
                  </Collapsible>
                </Card>
              );
            })}
          </div>
        ) : (
          <Card className="border-2 border-slate-200 shadow-xl">
            <CardContent className="p-0">
              <table className="w-full">
                <thead className="bg-gradient-to-r from-slate-50 to-blue-50 border-b-2 border-slate-200">
                  <tr>
                    <th className="text-left py-5 px-5 text-xs font-bold text-slate-700 uppercase tracking-wider">Vendor</th>
                    <th className="text-left py-5 px-5 text-xs font-bold text-slate-700 uppercase tracking-wider">Specialty</th>
                    <th className="text-left py-5 px-5 text-xs font-bold text-slate-700 uppercase tracking-wider">Location</th>
                    <th className="text-center py-5 px-5 text-xs font-bold text-slate-700 uppercase tracking-wider">Rating</th>
                    <th className="text-center py-5 px-5 text-xs font-bold text-slate-700 uppercase tracking-wider">Clients</th>
                    <th className="text-center py-5 px-5 text-xs font-bold text-slate-700 uppercase tracking-wider">Staff</th>
                    <th className="text-center py-5 px-5 text-xs font-bold text-slate-700 uppercase tracking-wider">Min Rate</th>
                    <th className="text-center py-5 px-5 text-xs font-bold text-slate-700 uppercase tracking-wider">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {filteredVendors.map((vendor) => (
                    <tr key={vendor.id} className="border-b border-slate-100 hover:bg-gradient-to-r hover:from-blue-50 hover:to-transparent transition-all group">
                      <td className="py-5 px-5">
                        <div className="flex items-center gap-3">
                          <Avatar className="w-12 h-12 bg-gradient-to-br from-[#0A39DF] to-indigo-600 ring-2 ring-slate-200 group-hover:ring-[#0A39DF] transition-all shadow-md">
                            <AvatarFallback className="text-white font-bold text-lg">
                              {vendor.legal_name?.charAt(0)}
                            </AvatarFallback>
                          </Avatar>
                          <div>
                            <p className="font-bold text-[#1C323E] text-base">{vendor.legal_name}</p>
                            <p className="text-xs text-slate-500 flex items-center gap-1 mt-1">
                              <CheckCircle className="w-3 h-3 text-green-600" />
                              {vendor.completedJobs} jobs completed
                            </p>
                          </div>
                        </div>
                      </td>
                      <td className="py-5 px-5">
                        <span className="text-sm text-slate-700 font-medium">{vendor.service_specialty || '—'}</span>
                      </td>
                      <td className="py-5 px-5">
                        <div className="flex items-center gap-2 text-sm text-slate-700">
                          <MapPin className="w-4 h-4 text-[#0A39DF]" />
                          <span className="font-medium">{vendor.region}</span>
                        </div>
                      </td>
                      <td className="py-5 px-5 text-center">
                        <div className="inline-flex items-center gap-2 bg-amber-50 px-4 py-2 rounded-full shadow-sm">
                          <Star className="w-4 h-4 text-amber-500 fill-amber-500" />
                          <span className="font-bold text-base text-amber-700">{vendor.rating.toFixed(1)}</span>
                        </div>
                      </td>
                      <td className="py-5 px-5 text-center">
                        {vendor.clientsInSector > 0 ? (
                          <Badge className="bg-purple-100 text-purple-700 border-purple-200 border-2 font-bold text-sm px-3 py-1.5">
                            <UserCheck className="w-3.5 h-3.5 mr-1.5" />
                            {vendor.clientsInSector}
                          </Badge>
                        ) : (
                          <span className="text-slate-400 text-sm">—</span>
                        )}
                      </td>
                      <td className="py-5 px-5 text-center">
                        <Badge variant="outline" className="font-bold border-2 text-sm px-3 py-1.5">{vendor.staffCount}</Badge>
                      </td>
                      <td className="py-5 px-5 text-center">
                        <div className="inline-flex flex-col items-center bg-blue-50 px-5 py-3 rounded-xl shadow-sm">
                          <span className="font-bold text-2xl text-[#0A39DF]">${vendor.minRate}</span>
                          <span className="text-xs text-slate-500 font-medium">/hour</span>
                        </div>
                      </td>
                      <td className="py-5 px-5">
                        <div className="flex items-center justify-center gap-2">
                          <Button
                            size="sm"
                            variant="outline"
                            onClick={() => handleContactVendor(vendor)}
                            className="border-2 hover:border-[#0A39DF] hover:bg-blue-50 rounded-lg"
                          >
                            <MessageSquare className="w-4 h-4 mr-1" />
                            Contact
                          </Button>
                          <Button
                            size="sm"
                            onClick={() => {
                              toggleVendorRates(vendor.id);
                              setViewMode("grid");
                            }}
                            className="bg-[#0A39DF] hover:bg-blue-700 rounded-lg"
                          >
                            <TrendingUp className="w-4 h-4 mr-1" />
                            Rates
                          </Button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </CardContent>
          </Card>
        )}

        {filteredVendors.length === 0 && (
          <div className="text-center py-16 bg-white rounded-2xl border-2 border-dashed border-slate-300">
            <div className="w-20 h-20 mx-auto mb-4 bg-slate-100 rounded-2xl flex items-center justify-center">
              <Building2 className="w-10 h-10 text-slate-400" />
            </div>
            <h3 className="text-xl font-bold text-slate-900 mb-2">No vendors found</h3>
            <p className="text-slate-600 mb-5">Try adjusting your filters to see more results</p>
            <Button
              variant="outline"
              onClick={() => {
                setSearchTerm("");
                setRegionFilter("all");
                setCategoryFilter("all");
              }}
              className="border-2 hover:border-[#0A39DF] hover:bg-blue-50 rounded-lg"
            >
              Clear All Filters
            </Button>
          </div>
        )}
      </div>

      {/* Contact Modal */}
      <Dialog open={contactModal.open} onOpenChange={(open) => setContactModal({ open, vendor: null })}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle className="text-2xl font-bold text-[#1C323E] mb-1">
              Contact {contactModal.vendor?.legal_name}
            </DialogTitle>
            <DialogDescription>
              Start a conversation and get staffing help within hours
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-5 py-4">
            {/* Vendor Info Card */}
            <div className="flex items-center gap-4 p-5 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200">
              <Avatar className="w-16 h-16 bg-gradient-to-br from-[#0A39DF] to-indigo-600 ring-2 ring-white shadow-md">
                <AvatarFallback className="text-white text-xl font-bold">
                  {contactModal.vendor?.legal_name?.charAt(0)}
                </AvatarFallback>
              </Avatar>
              <div className="flex-1">
                <h4 className="font-bold text-[#1C323E] text-lg mb-2">{contactModal.vendor?.legal_name}</h4>
                <div className="flex items-center gap-2 flex-wrap">
                  <div className="flex items-center gap-1.5 text-xs bg-white px-2 py-1.5 rounded-lg">
                    <MapPin className="w-3.5 h-3.5 text-[#0A39DF]" />
                    <span className="font-medium text-slate-700">{contactModal.vendor?.region}</span>
                  </div>
                  <div className="flex items-center gap-1.5 text-xs bg-white px-2 py-1.5 rounded-lg">
                    <Users className="w-3.5 h-3.5 text-[#0A39DF]" />
                    <span className="font-medium text-slate-700">{contactModal.vendor?.staffCount} staff</span>
                  </div>
                  <div className="flex items-center gap-1.5 bg-amber-50 px-2 py-1.5 rounded-lg">
                    <Star className="w-3.5 h-3.5 text-amber-500 fill-amber-500" />
                    <span className="text-xs font-bold text-amber-700">{contactModal.vendor?.rating?.toFixed(1)}</span>
                  </div>
                  {contactModal.vendor?.clientsInSector > 0 && (
                    <Badge className="bg-purple-100 text-purple-700 border-purple-200 border text-xs">
                      <UserCheck className="w-3 h-3 mr-1" />
                      {contactModal.vendor?.clientsInSector} in your area
                    </Badge>
                  )}
                </div>
              </div>
            </div>

            {/* Message Input */}
            <div>
              <label className="text-sm font-bold text-slate-700 mb-2 block flex items-center gap-2">
                <MessageSquare className="w-4 h-4 text-[#0A39DF]" />
                Your Message
              </label>
              <Textarea
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                rows={8}
                placeholder="Enter your message..."
                className="resize-none border-2 border-slate-200 focus:border-[#0A39DF] text-sm rounded-lg"
              />
              <div className="text-xs text-slate-500 mt-2 bg-blue-50 p-2.5 rounded-lg border border-blue-100">
                💡 <strong>Tip:</strong> Include event date, location, and number of staff needed for faster response
              </div>
            </div>
          </div>

          <DialogFooter className="gap-2">
            <Button 
              variant="outline" 
              onClick={() => setContactModal({ open: false, vendor: null })}
              className="border-2 rounded-lg"
            >
              Cancel
            </Button>
            <Button 
              onClick={handleSendMessage} 
              className="bg-gradient-to-r from-[#0A39DF] to-indigo-600 hover:from-blue-700 hover:to-indigo-700 shadow-md rounded-lg"
            >
              <MessageSquare className="w-4 h-4 mr-2" />
              Send Message
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}