import React, { useState, useMemo, useCallback } from 'react';
import { BarChart, Bar, PieChart, Pie, Cell, ResponsiveContainer, XAxis, YAxis, Tooltip, Legend } from 'recharts';
import { Shield, AlertTriangle, CheckCircle, TrendingUp, Building2, FileText, Clock, DollarSign, Users, Search, Filter, Download, Plus, X, ChevronRight, Lock, Globe, Server, Database } from 'lucide-react';

// Sample vendor data with all 8 risk categories
const SAMPLE_VENDORS = [
  {
    id: 'v1',
    name: 'CloudSecure Inc',
    category: 'Cloud Infrastructure',
    tier: 'Critical',
    riskScore: 92,
    contractValue: 2500000,
    employees: 450,
    founded: 2015,
    certifications: ['SOC 2 Type II', 'ISO 27001', 'GDPR'],
    lastAssessment: '2024-11-15',
    categories: {
      security: 95,
      compliance: 90,
      operational: 88,
      financial: 92,
      dataGovernance: 94,
      exitReadiness: 85,
      thirdParty: 90,
      incidentResponse: 96
    },
    status: 'Active',
    uptime: 99.95
  },
  {
    id: 'v2',
    name: 'DataFlow Systems',
    category: 'Data Analytics',
    tier: 'High',
    riskScore: 78,
    contractValue: 850000,
    employees: 120,
    founded: 2018,
    certifications: ['SOC 2 Type I', 'GDPR'],
    lastAssessment: '2024-10-20',
    categories: {
      security: 82,
      compliance: 85,
      operational: 75,
      financial: 70,
      dataGovernance: 80,
      exitReadiness: 72,
      thirdParty: 78,
      incidentResponse: 80
    },
    status: 'Active',
    uptime: 99.5
  },
  {
    id: 'v3',
    name: 'PayStream Solutions',
    category: 'Payment Processing',
    tier: 'Critical',
    riskScore: 88,
    contractValue: 1800000,
    employees: 320,
    founded: 2012,
    certifications: ['PCI DSS', 'SOC 2 Type II', 'ISO 27001'],
    lastAssessment: '2024-12-01',
    categories: {
      security: 92,
      compliance: 95,
      operational: 90,
      financial: 88,
      dataGovernance: 85,
      exitReadiness: 80,
      thirdParty: 85,
      incidentResponse: 90
    },
    status: 'Active',
    uptime: 99.99
  },
  {
    id: 'v4',
    name: 'HR Connect Pro',
    category: 'HR Management',
    tier: 'Medium',
    riskScore: 65,
    contractValue: 320000,
    employees: 85,
    founded: 2019,
    certifications: ['SOC 2 Type I'],
    lastAssessment: '2024-09-10',
    categories: {
      security: 68,
      compliance: 70,
      operational: 65,
      financial: 60,
      dataGovernance: 62,
      exitReadiness: 58,
      thirdParty: 65,
      incidentResponse: 70
    },
    status: 'Under Review',
    uptime: 98.5
  },
  {
    id: 'v5',
    name: 'MarketingHub',
    category: 'Marketing Automation',
    tier: 'Low',
    riskScore: 45,
    contractValue: 120000,
    employees: 45,
    founded: 2020,
    certifications: ['GDPR'],
    lastAssessment: '2024-08-05',
    categories: {
      security: 50,
      compliance: 55,
      operational: 48,
      financial: 40,
      dataGovernance: 45,
      exitReadiness: 42,
      thirdParty: 48,
      incidentResponse: 45
    },
    status: 'Active',
    uptime: 97.8
  },
  {
    id: 'v6',
    name: 'SecureAuth Technologies',
    category: 'Identity Management',
    tier: 'High',
    riskScore: 82,
    contractValue: 950000,
    employees: 180,
    founded: 2016,
    certifications: ['SOC 2 Type II', 'ISO 27001', 'FedRAMP'],
    lastAssessment: '2024-11-28',
    categories: {
      security: 90,
      compliance: 88,
      operational: 82,
      financial: 78,
      dataGovernance: 85,
      exitReadiness: 75,
      thirdParty: 80,
      incidentResponse: 88
    },
    status: 'Active',
    uptime: 99.8
  },
  {
    id: 'v7',
    name: 'LogiChain Partners',
    category: 'Supply Chain',
    tier: 'Medium',
    riskScore: 58,
    contractValue: 450000,
    employees: 200,
    founded: 2014,
    certifications: ['ISO 27001'],
    lastAssessment: '2024-07-15',
    categories: {
      security: 60,
      compliance: 65,
      operational: 55,
      financial: 52,
      dataGovernance: 58,
      exitReadiness: 50,
      thirdParty: 55,
      incidentResponse: 62
    },
    status: 'Active',
    uptime: 98.2
  },
  {
    id: 'v8',
    name: 'DevOps Accelerator',
    category: 'Development Tools',
    tier: 'Low',
    riskScore: 42,
    contractValue: 180000,
    employees: 60,
    founded: 2021,
    certifications: [],
    lastAssessment: '2024-06-20',
    categories: {
      security: 45,
      compliance: 40,
      operational: 48,
      financial: 38,
      dataGovernance: 42,
      exitReadiness: 40,
      thirdParty: 45,
      incidentResponse: 42
    },
    status: 'Pending',
    uptime: 97.0
  },
  {
    id: 'v9',
    name: 'ComplianceFirst',
    category: 'Regulatory Compliance',
    tier: 'High',
    riskScore: 85,
    contractValue: 720000,
    employees: 150,
    founded: 2017,
    certifications: ['SOC 2 Type II', 'ISO 27001', 'HIPAA', 'GDPR'],
    lastAssessment: '2024-12-05',
    categories: {
      security: 88,
      compliance: 95,
      operational: 85,
      financial: 82,
      dataGovernance: 90,
      exitReadiness: 78,
      thirdParty: 82,
      incidentResponse: 90
    },
    status: 'Active',
    uptime: 99.7
  },
  {
    id: 'v10',
    name: 'BackupVault',
    category: 'Data Backup',
    tier: 'Critical',
    riskScore: 90,
    contractValue: 1200000,
    employees: 280,
    founded: 2013,
    certifications: ['SOC 2 Type II', 'ISO 27001', 'HIPAA'],
    lastAssessment: '2024-11-10',
    categories: {
      security: 94,
      compliance: 92,
      operational: 95,
      financial: 88,
      dataGovernance: 90,
      exitReadiness: 82,
      thirdParty: 88,
      incidentResponse: 92
    },
    status: 'Active',
    uptime: 99.98
  }
];

const RISK_COLORS = {
  Critical: '#ef4444',
  High: '#f59e0b',
  Medium: '#eab308',
  Low: '#10b981'
};

const CATEGORY_ICONS = {
  security: Shield,
  compliance: FileText,
  operational: Clock,
  financial: DollarSign,
  dataGovernance: Database,
  exitReadiness: Globe,
  thirdParty: Users,
  incidentResponse: AlertTriangle
};

const CATEGORY_LABELS = {
  security: 'Security Controls',
  compliance: 'Compliance',
  operational: 'Operational Resilience',
  financial: 'Financial Stability',
  dataGovernance: 'Data Governance',
  exitReadiness: 'Exit Readiness',
  thirdParty: 'Third-Party Dependencies',
  incidentResponse: 'Incident Response'
};

export default function App() {
  const [vendors, setVendors] = useState(SAMPLE_VENDORS);
  const [selectedVendor, setSelectedVendor] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [filterTier, setFilterTier] = useState('All');
  const [activeTab, setActiveTab] = useState('overview');

  const filteredVendors = useMemo(() => {
    return vendors.filter(v => {
      const matchesSearch = v.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        v.category.toLowerCase().includes(searchTerm.toLowerCase());
      const matchesTier = filterTier === 'All' || v.tier === filterTier;
      return matchesSearch && matchesTier;
    });
  }, [vendors, searchTerm, filterTier]);

  const stats = useMemo(() => {
    const total = vendors.length;
    const critical = vendors.filter(v => v.tier === 'Critical').length;
    const high = vendors.filter(v => v.tier === 'High').length;
    const avgScore = Math.round(vendors.reduce((sum, v) => sum + v.riskScore, 0) / total);
    const totalValue = vendors.reduce((sum, v) => sum + v.contractValue, 0);
    return { total, critical, high, avgScore, totalValue };
  }, [vendors]);

  const riskDistribution = useMemo(() => {
    const dist = { Critical: 0, High: 0, Medium: 0, Low: 0 };
    vendors.forEach(v => dist[v.tier]++);
    return Object.entries(dist).map(([name, value]) => ({ name, value }));
  }, [vendors]);

  const avgCategoryScores = useMemo(() => {
    const categories = Object.keys(SAMPLE_VENDORS[0].categories);
    return categories.map(cat => ({
      name: CATEGORY_LABELS[cat],
      score: Math.round(vendors.reduce((sum, v) => sum + v.categories[cat], 0) / vendors.length)
    }));
  }, [vendors]);

  const getRiskColor = useCallback((score) => {
    if (score >= 80) return '#10b981';
    if (score >= 60) return '#eab308';
    if (score >= 40) return '#f59e0b';
    return '#ef4444';
  }, []);

  const getTierBadgeStyle = useCallback((tier) => {
    const colors = {
      Critical: 'bg-red-500/20 text-red-400 border-red-500/30',
      High: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
      Medium: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
      Low: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30'
    };
    return colors[tier] || colors.Low;
  }, []);

  return (
    <div className="min-h-screen bg-[#0a0e1a] text-white p-6">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-blue-500/20 rounded-lg">
            <Shield className="w-8 h-8 text-blue-400" />
          </div>
          <div>
            <h1 className="text-2xl font-bold">Vendor Risk Assessment</h1>
            <p className="text-slate-400 text-sm">Third-party risk management dashboard</p>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <button className="flex items-center gap-2 px-4 py-2 bg-blue-500/20 hover:bg-blue-500/30 rounded-lg border border-blue-500/30 transition">
            <Download className="w-4 h-4" />
            <span className="text-sm">Export</span>
          </button>
          <button className="flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg transition">
            <Plus className="w-4 h-4" />
            <span className="text-sm">Add Vendor</span>
          </button>
        </div>
      </div>

      {/* Tabs */}
      <div className="flex gap-2 mb-6 border-b border-white/10 pb-2">
        {['overview', 'vendors', 'assessments', 'reports'].map(tab => (
          <button
            key={tab}
            onClick={() => setActiveTab(tab)}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition ${
              activeTab === tab
                ? 'bg-blue-500/20 text-blue-400 border border-blue-500/30'
                : 'text-slate-400 hover:text-white hover:bg-white/5'
            }`}
          >
            {tab.charAt(0).toUpperCase() + tab.slice(1)}
          </button>
        ))}
      </div>

      {activeTab === 'overview' && (
        <>
          {/* KPI Row */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <div className="bg-white/5 backdrop-blur rounded-xl p-4 border border-white/10">
              <div className="flex items-center justify-between mb-2">
                <span className="text-slate-400 text-sm">Total Vendors</span>
                <Building2 className="w-5 h-5 text-blue-400" />
              </div>
              <div className="text-3xl font-bold">{stats.total}</div>
              <div className="text-xs text-slate-500 mt-1">Across all categories</div>
            </div>
            <div className="bg-white/5 backdrop-blur rounded-xl p-4 border border-white/10">
              <div className="flex items-center justify-between mb-2">
                <span className="text-slate-400 text-sm">Critical Risk</span>
                <AlertTriangle className="w-5 h-5 text-red-400" />
              </div>
              <div className="text-3xl font-bold text-red-400">{stats.critical}</div>
              <div className="text-xs text-slate-500 mt-1">Vendors requiring attention</div>
            </div>
            <div className="bg-white/5 backdrop-blur rounded-xl p-4 border border-white/10">
              <div className="flex items-center justify-between mb-2">
                <span className="text-slate-400 text-sm">Avg Risk Score</span>
                <TrendingUp className="w-5 h-5 text-emerald-400" />
              </div>
              <div className="text-3xl font-bold text-emerald-400">{stats.avgScore}</div>
              <div className="text-xs text-slate-500 mt-1">Out of 100 (higher is better)</div>
            </div>
            <div className="bg-white/5 backdrop-blur rounded-xl p-4 border border-white/10">
              <div className="flex items-center justify-between mb-2">
                <span className="text-slate-400 text-sm">Total Contract Value</span>
                <DollarSign className="w-5 h-5 text-amber-400" />
              </div>
              <div className="text-3xl font-bold text-amber-400">${(stats.totalValue / 1000000).toFixed(1)}M</div>
              <div className="text-xs text-slate-500 mt-1">Annual committed spend</div>
            </div>
          </div>

          {/* Charts Grid */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
            <div className="bg-white/5 backdrop-blur rounded-xl p-4 border border-white/10">
              <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                <PieChart className="w-5 h-5 text-blue-400" />
                Risk Distribution
              </h3>
              <ResponsiveContainer width="100%" height={250}>
                <PieChart>
                  <Pie
                    data={riskDistribution}
                    cx="50%"
                    cy="50%"
                    innerRadius={60}
                    outerRadius={100}
                    paddingAngle={2}
                    dataKey="value"
                  >
                    {riskDistribution.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={RISK_COLORS[entry.name]} />
                    ))}
                  </Pie>
                  <Tooltip
                    contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
                    itemStyle={{ color: '#fff' }}
                  />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            </div>
            <div className="bg-white/5 backdrop-blur rounded-xl p-4 border border-white/10">
              <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                <BarChart className="w-5 h-5 text-blue-400" />
                Average Scores by Category
              </h3>
              <ResponsiveContainer width="100%" height={250}>
                <BarChart data={avgCategoryScores}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
                  <XAxis dataKey="name" tick={{ fill: '#94a3b8', fontSize: 10 }} angle={-45} textAnchor="end" height={80} />
                  <YAxis domain={[0, 100]} tick={{ fill: '#94a3b8' }} />
                  <Tooltip
                    contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
                    itemStyle={{ color: '#fff' }}
                  />
                  <Bar dataKey="score" fill="#3b82f6" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>
        </>
      )}

      {/* Vendors Tab */}
      {(activeTab === 'overview' || activeTab === 'vendors') && (
        <div className="bg-white/5 backdrop-blur rounded-xl border border-white/10 overflow-hidden">
          <div className="p-4 border-b border-white/10 flex flex-col md:flex-row md:items-center justify-between gap-4">
            <h3 className="text-lg font-semibold flex items-center gap-2">
              <Building2 className="w-5 h-5 text-blue-400" />
              Vendor Inventory
            </h3>
            <div className="flex flex-col md:flex-row gap-2">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                <input
                  type="text"
                  placeholder="Search vendors..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10 pr-4 py-2 bg-white/5 border border-white/10 rounded-lg text-sm focus:outline-none focus:border-blue-500/50 w-full md:w-64"
                />
              </div>
              <select
                value={filterTier}
                onChange={(e) => setFilterTier(e.target.value)}
                className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg text-sm focus:outline-none focus:border-blue-500/50"
              >
                <option value="All">All Tiers</option>
                <option value="Critical">Critical</option>
                <option value="High">High</option>
                <option value="Medium">Medium</option>
                <option value="Low">Low</option>
              </select>
            </div>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-white/10">
                  <th className="text-left py-3 px-4 text-slate-400 text-sm font-medium">Vendor</th>
                  <th className="text-left py-3 px-4 text-slate-400 text-sm font-medium">Category</th>
                  <th className="text-left py-3 px-4 text-slate-400 text-sm font-medium">Tier</th>
                  <th className="text-left py-3 px-4 text-slate-400 text-sm font-medium">Risk Score</th>
                  <th className="text-left py-3 px-4 text-slate-400 text-sm font-medium">Contract Value</th>
                  <th className="text-left py-3 px-4 text-slate-400 text-sm font-medium">Last Assessment</th>
                  <th className="text-left py-3 px-4 text-slate-400 text-sm font-medium">Status</th>
                </tr>
              </thead>
              <tbody>
                {filteredVendors.map(vendor => (
                  <tr
                    key={vendor.id}
                    onClick={() => setSelectedVendor(vendor)}
                    className="border-b border-white/5 hover:bg-white/5 cursor-pointer transition"
                  >
                    <td className="py-3 px-4">
                      <div className="font-medium">{vendor.name}</div>
                    </td>
                    <td className="py-3 px-4 text-slate-400">{vendor.category}</td>
                    <td className="py-3 px-4">
                      <span className={`px-2 py-1 rounded-full text-xs border ${getTierBadgeStyle(vendor.tier)}`}>
                        {vendor.tier}
                      </span>
                    </td>
                    <td className="py-3 px-4">
                      <div className="flex items-center gap-2">
                        <div className="w-24 h-2 bg-white/10 rounded-full overflow-hidden">
                          <div
                            className="h-full rounded-full transition-all"
                            style={{ width: `${vendor.riskScore}%`, backgroundColor: getRiskColor(vendor.riskScore) }}
                          />
                        </div>
                        <span className="text-sm font-medium" style={{ color: getRiskColor(vendor.riskScore) }}>
                          {vendor.riskScore}
                        </span>
                      </div>
                    </td>
                    <td className="py-3 px-4 text-slate-400">${vendor.contractValue.toLocaleString()}</td>
                    <td className="py-3 px-4 text-slate-400">{vendor.lastAssessment}</td>
                    <td className="py-3 px-4">
                      <span className={`px-2 py-1 rounded-full text-xs ${
                        vendor.status === 'Active' ? 'bg-emerald-500/20 text-emerald-400' :
                        vendor.status === 'Under Review' ? 'bg-amber-500/20 text-amber-400' :
                        'bg-slate-500/20 text-slate-400'
                      }`}>
                        {vendor.status}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="p-4 border-t border-white/10 text-sm text-slate-500">
            Showing {filteredVendors.length} of {vendors.length} vendors
          </div>
        </div>
      )}

      {/* Detail Modal */}
      {selectedVendor && (
        <div className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4" onClick={() => setSelectedVendor(null)}>
          <div className="bg-[#0f1623] rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto border border-white/10" onClick={e => e.stopPropagation()}>
            <div className="sticky top-0 bg-[#0f1623] p-6 border-b border-white/10 flex items-start justify-between">
              <div>
                <h2 className="text-2xl font-bold mb-1">{selectedVendor.name}</h2>
                <p className="text-slate-400">{selectedVendor.category}</p>
              </div>
              <button onClick={() => setSelectedVendor(null)} className="p-2 hover:bg-white/10 rounded-lg transition">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-6 space-y-6">
              {/* Quick Stats */}
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="bg-white/5 rounded-lg p-4">
                  <div className="text-slate-400 text-sm mb-1">Risk Score</div>
                  <div className="text-2xl font-bold" style={{ color: getRiskColor(selectedVendor.riskScore) }}>
                    {selectedVendor.riskScore}/100
                  </div>
                </div>
                <div className="bg-white/5 rounded-lg p-4">
                  <div className="text-slate-400 text-sm mb-1">Risk Tier</div>
                  <span className={`px-2 py-1 rounded-full text-sm font-medium ${getTierBadgeStyle(selectedVendor.tier)}`}>
                    {selectedVendor.tier}
                  </span>
                </div>
                <div className="bg-white/5 rounded-lg p-4">
                  <div className="text-slate-400 text-sm mb-1">Contract Value</div>
                  <div className="text-2xl font-bold text-amber-400">${(selectedVendor.contractValue / 1000000).toFixed(2)}M</div>
                </div>
                <div className="bg-white/5 rounded-lg p-4">
                  <div className="text-slate-400 text-sm mb-1">Uptime SLA</div>
                  <div className="text-2xl font-bold text-emerald-400">{selectedVendor.uptime}%</div>
                </div>
              </div>

              {/* Category Scores */}
              <div>
                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                  <Shield className="w-5 h-5 text-blue-400" />
                  Risk Category Breakdown
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {Object.entries(selectedVendor.categories).map(([key, score]) => {
                    const Icon = CATEGORY_ICONS[key];
                    return (
                      <div key={key} className="bg-white/5 rounded-lg p-4">
                        <div className="flex items-center gap-2 mb-2">
                          <Icon className="w-4 h-4 text-blue-400" />
                          <span className="text-sm font-medium">{CATEGORY_LABELS[key]}</span>
                        </div>
                        <div className="w-full h-2 bg-white/10 rounded-full overflow-hidden">
                          <div
                            className="h-full rounded-full transition-all"
                            style={{ width: `${score}%`, backgroundColor: getRiskColor(score) }}
                          />
                        </div>
                        <div className="text-right text-sm mt-1" style={{ color: getRiskColor(score) }}>{score}/100</div>
                      </div>
                    );
                  })}
                </div>
              </div>

              {/* Certifications */}
              <div>
                <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-blue-400" />
                  Certifications & Compliance
                </h3>
                <div className="flex flex-wrap gap-2">
                  {selectedVendor.certifications.length > 0 ? (
                    selectedVendor.certifications.map(cert => (
                      <span key={cert} className="px-3 py-1 bg-emerald-500/20 text-emerald-400 rounded-full text-sm border border-emerald-500/30">
                        {cert}
                      </span>
                    ))
                  ) : (
                    <span className="text-slate-400 text-sm">No certifications on file</span>
                  )}
                </div>
              </div>

              {/* Company Info */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="bg-white/5 rounded-lg p-4">
                  <div className="text-slate-400 text-sm mb-1">Founded</div>
                  <div className="text-lg font-medium">{selectedVendor.founded}</div>
                </div>
                <div className="bg-white/5 rounded-lg p-4">
                  <div className="text-slate-400 text-sm mb-1">Employees</div>
                  <div className="text-lg font-medium">{selectedVendor.employees}</div>
                </div>
                <div className="bg-white/5 rounded-lg p-4">
                  <div className="text-slate-400 text-sm mb-1">Last Assessment</div>
                  <div className="text-lg font-medium">{selectedVendor.lastAssessment}</div>
                </div>
              </div>

              {/* Actions */}
              <div className="flex gap-2 pt-4 border-t border-white/10">
                <button className="flex-1 px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded-lg text-sm font-medium transition">
                  Start Assessment
                </button>
                <button className="flex-1 px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-sm font-medium transition">
                  View Reports
                </button>
                <button className="flex-1 px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-sm font-medium transition">
                  Edit Vendor
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}