// app/admin/subscription-plans/page.tsx

'use client';

import { useState } from 'react';
import {
  Crown,
  Plus,
  Edit,
  Trash2,
  CheckCircle,
  XCircle,
  Eye,
  ChevronLeft,
  ChevronRight,
  Search,
  Filter,
  X,
  Save,
  Users,
  MessageCircle,
  DollarSign,
  FileText,
  Clock,
  Zap,
} from 'lucide-react';

// Types
interface PlanFeature {
  id: string;
  text: string;
  included: boolean;
}

interface SubscriptionPlan {
  id: string;
  name: string;
  key: string;
  price: number;
  period: string;
  description: string;
  features: PlanFeature[];
  isActive: boolean;
  isRecommended: boolean;
  badgeText: string;
  badgeColor: string;
  createdAt: string;
  subscriberCount: number;
}

// Mock data
const mockPlans: SubscriptionPlan[] = [
  {
    id: '1',
    name: 'Starter',
    key: 'starter',
    price: 0,
    period: 'month',
    description: 'Perfect for caregivers starting out',
    features: [
      { id: 'f1', text: '5 proposals per month', included: true },
      { id: 'f2', text: '10% commission', included: true },
      { id: 'f3', text: 'Unlimited search of care seeker profiles', included: true },
      { id: 'f4', text: 'View profiles with limited info', included: true },
      { id: 'f5', text: 'No direct message from profile view', included: false },
      { id: 'f6', text: 'Priority support', included: false },
      { id: 'f7', text: 'Advanced analytics', included: false },
    ],
    isActive: true,
    isRecommended: false,
    badgeText: 'Current option',
    badgeColor: 'bg-gray-100 text-gray-700',
    createdAt: '2025-01-01',
    subscriberCount: 245,
  },
  {
    id: '2',
    name: 'Premium',
    key: 'premium',
    price: 19.99,
    period: 'month',
    description: 'For professional caregivers who want more',
    features: [
      { id: 'f1', text: 'Complete care seeker profile access', included: true },
      { id: 'f2', text: 'Unlimited messaging', included: true },
      { id: 'f3', text: '5% commission', included: true },
      { id: 'f4', text: 'Unlimited proposals', included: true },
      { id: 'f5', text: 'Priority support', included: true },
      { id: 'f6', text: 'Advanced analytics', included: true },
      { id: 'f7', text: 'Featured profile listing', included: true },
    ],
    isActive: true,
    isRecommended: true,
    badgeText: 'Recommended',
    badgeColor: 'bg-amber-100 text-amber-700',
    createdAt: '2025-01-01',
    subscriberCount: 189,
  },
  {
    id: '3',
    name: 'Enterprise',
    key: 'enterprise',
    price: 49.99,
    period: 'month',
    description: 'For agencies and large care teams',
    features: [
      { id: 'f1', text: 'Everything in Premium', included: true },
      { id: 'f2', text: 'Team management dashboard', included: true },
      { id: 'f3', text: 'Multiple caregiver accounts', included: true },
      { id: 'f4', text: 'Custom branding', included: true },
      { id: 'f5', text: 'API access', included: true },
      { id: 'f6', text: 'Dedicated account manager', included: true },
      { id: 'f7', text: 'Bulk invoicing', included: true },
    ],
    isActive: false,
    isRecommended: false,
    badgeText: 'Coming Soon',
    badgeColor: 'bg-purple-100 text-purple-700',
    createdAt: '2025-01-01',
    subscriberCount: 0,
  },
];

const featureCategories = [
  { id: 'proposals', label: 'Proposals & Bidding', icon: FileText },
  { id: 'messaging', label: 'Communication', icon: MessageCircle },
  { id: 'commission', label: 'Commission & Pricing', icon: DollarSign },
  { id: 'profile', label: 'Profile & Visibility', icon: Users },
  { id: 'support', label: 'Support & Analytics', icon: Clock },
];

export default function SubscriptionPlansPage() {
  const [plans, setPlans] = useState<SubscriptionPlan[]>(mockPlans);
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');
  const [currentPage, setCurrentPage] = useState(1);
  const [showAddModal, setShowAddModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [selectedPlan, setSelectedPlan] = useState<SubscriptionPlan | null>(null);
  const [editingPlan, setEditingPlan] = useState<Partial<SubscriptionPlan>>({});
  const [featuresList, setFeaturesList] = useState<PlanFeature[]>([]);

  const itemsPerPage = 10;

  const filteredPlans = plans.filter((plan) => {
    const matchesSearch = plan.name.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesStatus = statusFilter === 'all' || 
      (statusFilter === 'active' && plan.isActive) ||
      (statusFilter === 'inactive' && !plan.isActive);
    return matchesSearch && matchesStatus;
  });

  const totalPages = Math.ceil(filteredPlans.length / itemsPerPage);
  const paginatedPlans = filteredPlans.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  const handleAddPlan = () => {
    setEditingPlan({
      name: '',
      key: '',
      price: 0,
      period: 'month',
      description: '',
      isActive: true,
      isRecommended: false,
      badgeText: '',
    });
    setFeaturesList([
      { id: '1', text: 'Feature 1', included: true },
      { id: '2', text: 'Feature 2', included: false },
      { id: '3', text: 'Feature 3', included: false },
    ]);
    setShowAddModal(true);
  };

  const handleEditPlan = (plan: SubscriptionPlan) => {
    setEditingPlan(plan);
    setFeaturesList([...plan.features]);
    setShowEditModal(true);
  };

  const handleDeletePlan = (plan: SubscriptionPlan) => {
    setSelectedPlan(plan);
    setShowDeleteModal(true);
  };

  const handleToggleActive = (planId: string) => {
    setPlans(plans.map(plan => 
      plan.id === planId ? { ...plan, isActive: !plan.isActive } : plan
    ));
  };

  const handleAddFeature = () => {
    setFeaturesList([
      ...featuresList,
      { id: Date.now().toString(), text: 'New feature', included: false },
    ]);
  };

  const handleRemoveFeature = (featureId: string) => {
    setFeaturesList(featuresList.filter(f => f.id !== featureId));
  };

  const handleFeatureTextChange = (featureId: string, text: string) => {
    setFeaturesList(featuresList.map(f => 
      f.id === featureId ? { ...f, text } : f
    ));
  };

  const handleFeatureToggle = (featureId: string) => {
    setFeaturesList(featuresList.map(f => 
      f.id === featureId ? { ...f, included: !f.included } : f
    ));
  };

  const handleSavePlan = () => {
    if (showAddModal) {
      const newPlan: SubscriptionPlan = {
        id: Date.now().toString(),
        name: editingPlan.name || '',
        key: editingPlan.key || '',
        price: editingPlan.price || 0,
        period: editingPlan.period || 'month',
        description: editingPlan.description || '',
        features: featuresList,
        isActive: editingPlan.isActive || false,
        isRecommended: editingPlan.isRecommended || false,
        badgeText: editingPlan.badgeText || '',
        badgeColor: editingPlan.isRecommended ? 'bg-amber-100 text-amber-700' : 'bg-gray-100 text-gray-700',
        createdAt: new Date().toISOString().split('T')[0],
        subscriberCount: 0,
      };
      setPlans([...plans, newPlan]);
    } else if (showEditModal && selectedPlan) {
      setPlans(plans.map(plan => 
        plan.id === selectedPlan.id 
          ? { ...plan, ...editingPlan, features: featuresList }
          : plan
      ));
    }
    setShowAddModal(false);
    setShowEditModal(false);
    setSelectedPlan(null);
  };

  const confirmDelete = () => {
    if (selectedPlan) {
      setPlans(plans.filter(plan => plan.id !== selectedPlan.id));
      setShowDeleteModal(false);
      setSelectedPlan(null);
    }
  };

  return (
    <div className="space-y-6">
      {/* Page Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Subscription Plans</h1>
          <p className="text-gray-500 mt-1">Manage provider subscription plans and features</p>
        </div>
        <button
          onClick={handleAddPlan}
          className="flex items-center gap-2 px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors"
        >
          <Plus className="w-4 h-4" />
          Add Plan
        </button>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
        <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
          <div className="flex items-center justify-between">
            <div className="w-12 h-12 bg-emerald-100 rounded-xl flex items-center justify-center">
              <Crown className="w-6 h-6 text-emerald-600" />
            </div>
            <span className="text-2xl font-bold text-gray-900">{plans.length}</span>
          </div>
          <p className="text-sm text-gray-500 mt-2">Total Plans</p>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
          <div className="flex items-center justify-between">
            <div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
              <CheckCircle className="w-6 h-6 text-green-600" />
            </div>
            <span className="text-2xl font-bold text-gray-900">{plans.filter(p => p.isActive).length}</span>
          </div>
          <p className="text-sm text-gray-500 mt-2">Active Plans</p>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
          <div className="flex items-center justify-between">
            <div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
              <Users className="w-6 h-6 text-purple-600" />
            </div>
            <span className="text-2xl font-bold text-gray-900">{plans.reduce((sum, p) => sum + p.subscriberCount, 0)}</span>
          </div>
          <p className="text-sm text-gray-500 mt-2">Total Subscribers</p>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
          <div className="flex items-center justify-between">
            <div className="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center">
              <Zap className="w-6 h-6 text-amber-600" />
            </div>
            <span className="text-2xl font-bold text-gray-900">{plans.filter(p => p.isRecommended).length}</span>
          </div>
          <p className="text-sm text-gray-500 mt-2">Recommended</p>
        </div>
      </div>

      {/* Filters Bar */}
      <div className="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
        <div className="flex flex-col sm:flex-row gap-4">
          <div className="flex-1 relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
            <input
              type="text"
              placeholder="Search plans..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900 placeholder:text-gray-400"
            />
          </div>
          <div className="flex items-center gap-2">
            <Filter className="w-5 h-5 text-gray-400" />
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
              className="px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 outline-none text-gray-900"
            >
              <option value="all">All Status</option>
              <option value="active">Active</option>
              <option value="inactive">Inactive</option>
            </select>
          </div>
        </div>
      </div>

      {/* Plans Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
        {paginatedPlans.map((plan) => (
          <div
            key={plan.id}
            className={`bg-white rounded-xl shadow-sm border transition-all ${
              plan.isActive ? 'border-gray-200' : 'border-gray-100 opacity-60'
            }`}
          >
            {/* Plan Header */}
            <div className="p-5 border-b border-gray-100">
              <div className="flex items-start justify-between mb-3">
                <div>
                  <h3 className="text-xl font-bold text-gray-900">{plan.name}</h3>
                  <p className="text-sm text-gray-500 mt-1">{plan.description}</p>
                </div>
                {plan.badgeText && (
                  <span className={`px-2 py-1 rounded-full text-xs font-medium ${plan.badgeColor}`}>
                    {plan.badgeText}
                  </span>
                )}
              </div>
              <div className="flex items-baseline gap-1">
                {plan.price === 0 ? (
                  <span className="text-3xl font-bold text-gray-900">Free</span>
                ) : (
                  <>
                    <span className="text-3xl font-bold text-gray-900">${plan.price}</span>
                    <span className="text-gray-500">/{plan.period}</span>
                  </>
                )}
              </div>
            </div>

            {/* Features List */}
            <div className="p-5 space-y-3">
              {plan.features.slice(0, 5).map((feature) => (
                <div key={feature.id} className="flex items-center gap-2">
                  {feature.included ? (
                    <CheckCircle className="w-4 h-4 text-emerald-500" />
                  ) : (
                    <XCircle className="w-4 h-4 text-gray-300" />
                  )}
                  <span className={`text-sm ${feature.included ? 'text-gray-700' : 'text-gray-400'}`}>
                    {feature.text}
                  </span>
                </div>
              ))}
              {plan.features.length > 5 && (
                <p className="text-sm text-emerald-600">+{plan.features.length - 5} more features</p>
              )}
            </div>

            {/* Plan Stats */}
            <div className="px-5 py-3 bg-gray-50 border-t border-gray-100">
              <div className="flex items-center justify-between text-sm">
                <span className="text-gray-500">Subscribers</span>
                <span className="font-semibold text-gray-900">{plan.subscriberCount}</span>
              </div>
            </div>

            {/* Actions */}
            <div className="p-4 border-t border-gray-100 flex gap-2">
              <button
                onClick={() => handleToggleActive(plan.id)}
                className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                  plan.isActive
                    ? 'bg-red-50 text-red-600 hover:bg-red-100'
                    : 'bg-emerald-50 text-emerald-600 hover:bg-emerald-100'
                }`}
              >
                {plan.isActive ? 'Deactivate' : 'Activate'}
              </button>
              <button
                onClick={() => handleEditPlan(plan)}
                className="px-3 py-2 rounded-lg text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors"
              >
                <Edit className="w-4 h-4" />
              </button>
              <button
                onClick={() => handleDeletePlan(plan)}
                className="px-3 py-2 rounded-lg text-sm font-medium bg-red-50 text-red-600 hover:bg-red-100 transition-colors"
              >
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
          </div>
        ))}
      </div>

      {/* Pagination */}
      {totalPages > 1 && (
        <div className="flex items-center justify-between px-6 py-4 bg-white rounded-xl border border-gray-100">
          <p className="text-sm text-gray-500">
            Showing {(currentPage - 1) * itemsPerPage + 1} to {Math.min(currentPage * itemsPerPage, filteredPlans.length)} of {filteredPlans.length} results
          </p>
          <div className="flex gap-2">
            <button
              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
              disabled={currentPage === 1}
              className="p-2 rounded-lg border border-gray-200 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
            >
              <ChevronLeft className="w-4 h-4" />
            </button>
            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
              <button
                key={page}
                onClick={() => setCurrentPage(page)}
                className={`px-3 py-1 rounded-lg ${
                  currentPage === page
                    ? 'bg-emerald-600 text-white'
                    : 'border border-gray-200 hover:bg-gray-50 text-gray-700'
                }`}
              >
                {page}
              </button>
            ))}
            <button
              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
              disabled={currentPage === totalPages}
              className="p-2 rounded-lg border border-gray-200 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
            >
              <ChevronRight className="w-4 h-4" />
            </button>
          </div>
        </div>
      )}

      {/* Add/Edit Plan Modal */}
      {(showAddModal || showEditModal) && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div className="sticky top-0 bg-white border-b border-gray-100 px-6 py-4 flex items-center justify-between">
              <h2 className="text-xl font-bold text-gray-900">
                {showAddModal ? 'Add New Plan' : 'Edit Plan'}
              </h2>
              <button
                onClick={() => {
                  setShowAddModal(false);
                  setShowEditModal(false);
                }}
                className="p-2 rounded-lg hover:bg-gray-100"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-6 space-y-6">
              {/* Basic Information */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Plan Name *
                  </label>
                  <input
                    type="text"
                    value={editingPlan.name || ''}
                    onChange={(e) => setEditingPlan({ ...editingPlan, name: e.target.value })}
                    className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                    placeholder="e.g., Premium"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Plan Key *
                  </label>
                  <input
                    type="text"
                    value={editingPlan.key || ''}
                    onChange={(e) => setEditingPlan({ ...editingPlan, key: e.target.value.toLowerCase().replace(/\s/g, '_') })}
                    className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                    placeholder="e.g., premium"
                  />
                </div>
              </div>

              <div className="grid grid-cols-3 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Price ($)
                  </label>
                  <input
                    type="number"
                    value={editingPlan.price || 0}
                    onChange={(e) => setEditingPlan({ ...editingPlan, price: parseFloat(e.target.value) })}
                    className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                    placeholder="0"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Period
                  </label>
                  <select
                    value={editingPlan.period || 'month'}
                    onChange={(e) => setEditingPlan({ ...editingPlan, period: e.target.value })}
                    className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 outline-none text-gray-900"
                  >
                    <option value="month">Monthly</option>
                    <option value="year">Yearly</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Badge Text
                  </label>
                  <input
                    type="text"
                    value={editingPlan.badgeText || ''}
                    onChange={(e) => setEditingPlan({ ...editingPlan, badgeText: e.target.value })}
                    className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                    placeholder="Recommended"
                  />
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Description
                </label>
                <textarea
                  value={editingPlan.description || ''}
                  onChange={(e) => setEditingPlan({ ...editingPlan, description: e.target.value })}
                  rows={2}
                  className="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900 resize-none"
                  placeholder="Brief description of the plan..."
                />
              </div>

              {/* Features Section */}
              <div>
                <div className="flex items-center justify-between mb-4">
                  <label className="block text-sm font-medium text-gray-700">
                    Features
                  </label>
                  <button
                    onClick={handleAddFeature}
                    className="text-sm text-emerald-600 hover:text-emerald-700 font-medium flex items-center gap-1"
                  >
                    <Plus className="w-4 h-4" />
                    Add Feature
                  </button>
                </div>
                <div className="space-y-3">
                  {featuresList.map((feature) => (
                    <div key={feature.id} className="flex items-center gap-3">
                      <button
                        onClick={() => handleFeatureToggle(feature.id)}
                        className={`p-1 rounded-lg transition-colors ${
                          feature.included ? 'text-emerald-600' : 'text-gray-300'
                        }`}
                      >
                        {feature.included ? (
                          <CheckCircle className="w-5 h-5" />
                        ) : (
                          <XCircle className="w-5 h-5" />
                        )}
                      </button>
                      <input
                        type="text"
                        value={feature.text}
                        onChange={(e) => handleFeatureTextChange(feature.id, e.target.value)}
                        className="flex-1 px-3 py-2 border border-gray-200 rounded-lg focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-gray-900"
                      />
                      <button
                        onClick={() => handleRemoveFeature(feature.id)}
                        className="p-1 rounded-lg text-red-500 hover:bg-red-50"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  ))}
                </div>
              </div>

              {/* Settings */}
              <div className="flex gap-6">
                <label className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={editingPlan.isActive || false}
                    onChange={(e) => setEditingPlan({ ...editingPlan, isActive: e.target.checked })}
                    className="w-4 h-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500"
                  />
                  <span className="text-sm text-gray-700">Active</span>
                </label>
                <label className="flex items-center gap-2">
                  <input
                    type="checkbox"
                    checked={editingPlan.isRecommended || false}
                    onChange={(e) => setEditingPlan({ ...editingPlan, isRecommended: e.target.checked })}
                    className="w-4 h-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500"
                  />
                  <span className="text-sm text-gray-700">Recommended</span>
                </label>
              </div>

              {/* Action Buttons */}
              <div className="flex gap-3 pt-4 border-t border-gray-100">
                <button
                  onClick={() => {
                    setShowAddModal(false);
                    setShowEditModal(false);
                  }}
                  className="flex-1 px-4 py-2 border border-gray-200 rounded-lg font-medium hover:bg-gray-50"
                >
                  Cancel
                </button>
                <button
                  onClick={handleSavePlan}
                  className="flex-1 px-4 py-2 bg-emerald-600 text-white rounded-lg font-medium hover:bg-emerald-700 flex items-center justify-center gap-2"
                >
                  <Save className="w-4 h-4" />
                  Save Plan
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Delete Confirmation Modal */}
      {showDeleteModal && selectedPlan && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-2xl max-w-md w-full p-6">
            <div className="text-center">
              <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <Trash2 className="w-8 h-8 text-red-600" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 mb-2">Delete Plan</h3>
              <p className="text-gray-500 mb-6">
                Are you sure you want to delete <span className="font-semibold">{selectedPlan.name}</span>?
                This action cannot be undone.
              </p>
              <div className="flex gap-3">
                <button
                  onClick={() => setShowDeleteModal(false)}
                  className="flex-1 px-4 py-2 border border-gray-200 rounded-lg font-medium hover:bg-gray-50"
                >
                  Cancel
                </button>
                <button
                  onClick={confirmDelete}
                  className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700"
                >
                  Delete
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}