/**
 * PlanDetailPanel Component
 *
 * Detail view for a selected plan or add-on, shown in the main panel
 * of the master-detail layout.
 */

import React, { useState } from 'react';
import {
  Package,
  Pencil,
  Copy,
  Trash2,
  DollarSign,
  Users,
  Check,
  AlertTriangle,
  ExternalLink,
  ChevronDown,
  ChevronRight,
  Plus,
  Archive,
} from 'lucide-react';
import { Badge, Alert, Modal, ModalFooter } from '../../components/ui';
import {
  usePlanVersionSubscribers,
  useDeletePlan,
  useDeletePlanVersion,
  useMarkVersionLegacy,
  useForceUpdatePlanVersion,
  formatCentsToDollars,
  type PlanWithVersions,
  type PlanVersion,
  type AddOnProduct,
} from '../../hooks/useBillingAdmin';
import { useCurrentUser } from '../../hooks/useAuth';

// =============================================================================
// Types
// =============================================================================

interface PlanDetailPanelProps {
  plan: PlanWithVersions | null;
  addon: AddOnProduct | null;
  onEdit: () => void;
  onDuplicate: () => void;
  onCreateVersion: () => void;
  onEditVersion: (version: PlanVersion) => void;
}

// =============================================================================
// Component
// =============================================================================

export const PlanDetailPanel: React.FC<PlanDetailPanelProps> = ({
  plan,
  addon,
  onEdit,
  onDuplicate,
  onCreateVersion,
  onEditVersion,
}) => {
  const [expandedSections, setExpandedSections] = useState<Set<string>>(
    new Set(['overview', 'pricing', 'features'])
  );
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const [deleteConfirmText, setDeleteConfirmText] = useState('');
  const [showForcePushModal, setShowForcePushModal] = useState(false);
  const [forcePushConfirmText, setForcePushConfirmText] = useState('');
  const [forcePushError, setForcePushError] = useState<string | null>(null);
  const [forcePushSuccess, setForcePushSuccess] = useState<string | null>(null);

  const { data: currentUser } = useCurrentUser();
  const isSuperuser = currentUser?.is_superuser ?? false;

  const deletePlanMutation = useDeletePlan();
  const deleteVersionMutation = useDeletePlanVersion();
  const markLegacyMutation = useMarkVersionLegacy();
  const forceUpdateMutation = useForceUpdatePlanVersion();

  if (!plan && !addon) {
    return (
      <div className="flex-1 flex items-center justify-center text-gray-500 dark:text-gray-400">
        <div className="text-center">
          <Package className="w-12 h-12 mx-auto mb-4 opacity-50" />
          <p>Select a plan or add-on from the catalog</p>
        </div>
      </div>
    );
  }

  const toggleSection = (section: string) => {
    setExpandedSections((prev) => {
      const next = new Set(prev);
      if (next.has(section)) {
        next.delete(section);
      } else {
        next.add(section);
      }
      return next;
    });
  };

  const activeVersion = plan?.active_version;

  const handleDelete = async () => {
    if (!plan) return;

    const expectedText = `DELETE ${plan.code}`;
    if (deleteConfirmText !== expectedText) {
      return;
    }

    try {
      await deletePlanMutation.mutateAsync(plan.id);
      setShowDeleteConfirm(false);
      setDeleteConfirmText('');
    } catch (error) {
      console.error('Failed to delete plan:', error);
    }
  };

  const handleForcePush = async () => {
    if (!plan || !activeVersion) return;

    const expectedText = `FORCE PUSH ${plan.code}`;
    if (forcePushConfirmText !== expectedText) {
      setForcePushError('Please type the confirmation text exactly.');
      return;
    }

    setForcePushError(null);

    try {
      const result = await forceUpdateMutation.mutateAsync({
        id: activeVersion.id,
        confirm: true,
        // Pass current version data to ensure it's updated in place
        name: activeVersion.name,
      });

      if ('version' in result) {
        setForcePushSuccess(
          `Successfully pushed changes to ${result.affected_count} subscriber(s).`
        );
        setTimeout(() => {
          setShowForcePushModal(false);
          setForcePushConfirmText('');
          setForcePushSuccess(null);
        }, 2000);
      }
    } catch (error: any) {
      const errorMessage = error.response?.data?.detail || error.message || 'Failed to force push';
      setForcePushError(errorMessage);
    }
  };

  // Render Plan Detail
  if (plan) {
    return (
      <div className="flex-1 overflow-y-auto">
        {/* Header */}
        <div className="sticky top-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-6 z-10">
          <div className="flex items-start justify-between">
            <div>
              <div className="flex items-center gap-3 mb-2">
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
                  {plan.name}
                </h2>
                <span className="px-2 py-1 text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded">
                  {plan.code}
                </span>
                {!plan.is_active && <Badge variant="warning">Inactive</Badge>}
              </div>
              {plan.description && (
                <p className="text-gray-600 dark:text-gray-400">{plan.description}</p>
              )}
              {activeVersion && (
                <div className="flex items-center gap-4 mt-3 text-sm text-gray-500 dark:text-gray-400">
                  <span className="flex items-center gap-1">
                    <DollarSign className="w-4 h-4" />
                    {activeVersion.price_monthly_cents === 0
                      ? 'Free'
                      : `$${formatCentsToDollars(activeVersion.price_monthly_cents)}/mo`}
                  </span>
                  <span className="flex items-center gap-1">
                    <Users className="w-4 h-4" />
                    {plan.total_subscribers} subscriber{plan.total_subscribers !== 1 ? 's' : ''}
                  </span>
                  <span>Version {activeVersion.version}</span>
                </div>
              )}
            </div>
            <div className="flex items-center gap-2">
              <button
                onClick={onEdit}
                className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600"
              >
                <Pencil className="w-4 h-4" />
                Edit
              </button>
              <button
                onClick={onDuplicate}
                className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600"
              >
                <Copy className="w-4 h-4" />
                Duplicate
              </button>
              <button
                onClick={onCreateVersion}
                className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700"
              >
                <Plus className="w-4 h-4" />
                New Version
              </button>
            </div>
          </div>
        </div>

        <div className="p-6 space-y-6">
          {/* Overview Section */}
          <CollapsibleSection
            title="Overview"
            isExpanded={expandedSections.has('overview')}
            onToggle={() => toggleSection('overview')}
          >
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="text-sm text-gray-500 dark:text-gray-400">Plan Code</label>
                <p className="font-medium text-gray-900 dark:text-white">{plan.code}</p>
              </div>
              <div>
                <label className="text-sm text-gray-500 dark:text-gray-400">Display Order</label>
                <p className="font-medium text-gray-900 dark:text-white">{plan.display_order}</p>
              </div>
              <div>
                <label className="text-sm text-gray-500 dark:text-gray-400">Status</label>
                <p className="font-medium text-gray-900 dark:text-white">
                  {plan.is_active ? 'Active' : 'Inactive'}
                </p>
              </div>
              <div>
                <label className="text-sm text-gray-500 dark:text-gray-400">Total Subscribers</label>
                <p className="font-medium text-gray-900 dark:text-white">{plan.total_subscribers}</p>
              </div>
            </div>
          </CollapsibleSection>

          {/* Pricing Section */}
          {activeVersion && (
            <CollapsibleSection
              title="Pricing"
              isExpanded={expandedSections.has('pricing')}
              onToggle={() => toggleSection('pricing')}
            >
              <div className="grid grid-cols-3 gap-4">
                <div>
                  <label className="text-sm text-gray-500 dark:text-gray-400">Monthly</label>
                  <p className="text-xl font-bold text-gray-900 dark:text-white">
                    ${formatCentsToDollars(activeVersion.price_monthly_cents)}
                  </p>
                </div>
                <div>
                  <label className="text-sm text-gray-500 dark:text-gray-400">Yearly</label>
                  <p className="text-xl font-bold text-gray-900 dark:text-white">
                    ${formatCentsToDollars(activeVersion.price_yearly_cents)}
                  </p>
                  {activeVersion.price_yearly_cents > 0 && (
                    <p className="text-sm text-gray-500 dark:text-gray-400">
                      ${(activeVersion.price_yearly_cents / 12 / 100).toFixed(2)}/mo
                    </p>
                  )}
                </div>
                <div>
                  <label className="text-sm text-gray-500 dark:text-gray-400">Trial</label>
                  <p className="text-xl font-bold text-gray-900 dark:text-white">
                    {activeVersion.trial_days} days
                  </p>
                </div>
              </div>
            </CollapsibleSection>
          )}

          {/* Transaction Fees Section */}
          {activeVersion && (
            <CollapsibleSection
              title="Transaction Fees"
              isExpanded={expandedSections.has('fees')}
              onToggle={() => toggleSection('fees')}
            >
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-gray-500 dark:text-gray-400">Percentage</label>
                  <p className="font-medium text-gray-900 dark:text-white">
                    {activeVersion.transaction_fee_percent}%
                  </p>
                </div>
                <div>
                  <label className="text-sm text-gray-500 dark:text-gray-400">Fixed Fee</label>
                  <p className="font-medium text-gray-900 dark:text-white">
                    ${(activeVersion.transaction_fee_fixed_cents / 100).toFixed(2)}
                  </p>
                </div>
              </div>
            </CollapsibleSection>
          )}

          {/* Features Section */}
          {activeVersion && activeVersion.features.length > 0 && (
            <CollapsibleSection
              title={`Features (${activeVersion.features.length})`}
              isExpanded={expandedSections.has('features')}
              onToggle={() => toggleSection('features')}
            >
              <div className="grid grid-cols-2 gap-2">
                {activeVersion.features.map((f) => (
                  <div
                    key={f.id}
                    className="flex items-center gap-2 p-2 bg-gray-50 dark:bg-gray-700/50 rounded"
                  >
                    <Check className="w-4 h-4 text-green-500 flex-shrink-0" />
                    <span className="text-sm text-gray-900 dark:text-white">
                      {f.feature.name}
                    </span>
                    {f.int_value !== null && (
                      <span className="ml-auto text-sm text-gray-500 dark:text-gray-400">
                        {f.int_value === 0 ? 'Unlimited' : f.int_value}
                      </span>
                    )}
                  </div>
                ))}
              </div>
            </CollapsibleSection>
          )}

          {/* Stripe Section */}
          {activeVersion &&
            (activeVersion.stripe_product_id ||
              activeVersion.stripe_price_id_monthly ||
              activeVersion.stripe_price_id_yearly) && (
              <CollapsibleSection
                title="Stripe Integration"
                isExpanded={expandedSections.has('stripe')}
                onToggle={() => toggleSection('stripe')}
              >
                <div className="space-y-2">
                  {activeVersion.stripe_product_id && (
                    <div className="flex items-center gap-2">
                      <span className="text-sm text-gray-500 dark:text-gray-400">Product:</span>
                      <code className="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">
                        {activeVersion.stripe_product_id}
                      </code>
                    </div>
                  )}
                  {activeVersion.stripe_price_id_monthly && (
                    <div className="flex items-center gap-2">
                      <span className="text-sm text-gray-500 dark:text-gray-400">
                        Monthly Price:
                      </span>
                      <code className="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">
                        {activeVersion.stripe_price_id_monthly}
                      </code>
                    </div>
                  )}
                  {activeVersion.stripe_price_id_yearly && (
                    <div className="flex items-center gap-2">
                      <span className="text-sm text-gray-500 dark:text-gray-400">
                        Yearly Price:
                      </span>
                      <code className="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">
                        {activeVersion.stripe_price_id_yearly}
                      </code>
                    </div>
                  )}
                  {!activeVersion.stripe_product_id && (
                    <Alert
                      variant="warning"
                      message="No Stripe Product ID configured. This plan cannot be purchased until Stripe is set up."
                    />
                  )}
                </div>
              </CollapsibleSection>
            )}

          {/* Versions Section */}
          <CollapsibleSection
            title={`Versions (${plan.versions.length})`}
            isExpanded={expandedSections.has('versions')}
            onToggle={() => toggleSection('versions')}
          >
            <div className="space-y-2">
              {plan.versions.map((version) => (
                <VersionRow
                  key={version.id}
                  version={version}
                  isActive={!version.is_legacy}
                  onEdit={() => onEditVersion(version)}
                  onMarkLegacy={() => markLegacyMutation.mutate(version.id)}
                  onDelete={() => deleteVersionMutation.mutate(version.id)}
                />
              ))}
            </div>
          </CollapsibleSection>

          {/* Danger Zone */}
          <CollapsibleSection
            title="Danger Zone"
            isExpanded={expandedSections.has('danger')}
            onToggle={() => toggleSection('danger')}
            variant="danger"
          >
            <div className="space-y-4">
              {/* Force Push to Subscribers - Superuser Only */}
              {isSuperuser && activeVersion && plan.total_subscribers > 0 && (
                <div className="p-4 border border-orange-200 dark:border-orange-800 rounded-lg bg-orange-50 dark:bg-orange-900/20">
                  <div className="flex items-start gap-3">
                    <AlertTriangle className="w-5 h-5 text-orange-600 dark:text-orange-400 flex-shrink-0 mt-0.5" />
                    <div className="flex-1">
                      <h4 className="font-medium text-orange-800 dark:text-orange-200 mb-1">
                        Force Push Changes to All Subscribers
                      </h4>
                      <p className="text-sm text-orange-700 dark:text-orange-300 mb-3">
                        This will modify the current plan version in place, immediately affecting
                        all {plan.total_subscribers} active subscriber(s). This bypasses grandfathering
                        and cannot be undone. Changes to pricing, features, and limits will take
                        effect immediately.
                      </p>
                      <button
                        onClick={() => {
                          setShowForcePushModal(true);
                          setForcePushError(null);
                          setForcePushSuccess(null);
                          setForcePushConfirmText('');
                        }}
                        className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-orange-600 rounded-lg hover:bg-orange-700"
                      >
                        <AlertTriangle className="w-4 h-4" />
                        Force Push to Subscribers
                      </button>
                    </div>
                  </div>
                </div>
              )}

              {/* Delete Plan */}
              <div className="p-4 border border-red-200 dark:border-red-800 rounded-lg">
                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
                  Deleting a plan is permanent and cannot be undone. Plans with active subscribers
                  cannot be deleted.
                </p>
                {plan.total_subscribers > 0 ? (
                  <Alert
                    variant="warning"
                    message={`This plan has ${plan.total_subscribers} active subscriber(s) and cannot be deleted.`}
                  />
                ) : (
                  <button
                    onClick={() => setShowDeleteConfirm(true)}
                    className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700"
                  >
                    <Trash2 className="w-4 h-4" />
                    Delete Plan
                  </button>
                )}
              </div>
            </div>
          </CollapsibleSection>
        </div>

        {/* Delete Confirmation Modal */}
        {showDeleteConfirm && (
          <Modal
            isOpen
            onClose={() => {
              setShowDeleteConfirm(false);
              setDeleteConfirmText('');
            }}
            title="Delete Plan"
            size="sm"
          >
            <div className="space-y-4">
              <Alert
                variant="error"
                message="This action cannot be undone. This will permanently delete the plan and all its versions."
              />
              <p className="text-sm text-gray-600 dark:text-gray-400">
                To confirm, type <strong>DELETE {plan.code}</strong> below:
              </p>
              <input
                type="text"
                value={deleteConfirmText}
                onChange={(e) => setDeleteConfirmText(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                placeholder={`DELETE ${plan.code}`}
              />
            </div>
            <ModalFooter
              onCancel={() => {
                setShowDeleteConfirm(false);
                setDeleteConfirmText('');
              }}
              submitText="Delete Plan"
              submitVariant="danger"
              isDisabled={deleteConfirmText !== `DELETE ${plan.code}`}
              isLoading={deletePlanMutation.isPending}
              onSubmit={handleDelete}
            />
          </Modal>
        )}

        {/* Force Push Confirmation Modal */}
        {showForcePushModal && activeVersion && (
          <Modal
            isOpen
            onClose={() => {
              setShowForcePushModal(false);
              setForcePushConfirmText('');
              setForcePushError(null);
              setForcePushSuccess(null);
            }}
            title="Force Push to All Subscribers"
            size="md"
          >
            <div className="space-y-4">
              {forcePushSuccess ? (
                <Alert variant="success" message={forcePushSuccess} />
              ) : (
                <>
                  <Alert
                    variant="error"
                    message={
                      <div>
                        <strong>DANGER: This action affects paying customers!</strong>
                        <ul className="mt-2 ml-4 list-disc text-sm">
                          <li>All {plan.total_subscribers} subscriber(s) will be affected immediately</li>
                          <li>Changes to pricing will apply to future billing cycles</li>
                          <li>Feature and limit changes take effect immediately</li>
                          <li>This bypasses grandfathering protection</li>
                          <li>This action cannot be undone</li>
                        </ul>
                      </div>
                    }
                  />

                  <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                      <strong>Current version:</strong> v{activeVersion.version} - {activeVersion.name}
                    </p>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      <strong>Price:</strong> ${formatCentsToDollars(activeVersion.price_monthly_cents)}/mo
                    </p>
                  </div>

                  {forcePushError && (
                    <Alert variant="error" message={forcePushError} />
                  )}

                  <p className="text-sm text-gray-600 dark:text-gray-400">
                    To confirm this dangerous action, type <strong>FORCE PUSH {plan.code}</strong> below:
                  </p>
                  <input
                    type="text"
                    value={forcePushConfirmText}
                    onChange={(e) => setForcePushConfirmText(e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                    placeholder={`FORCE PUSH ${plan.code}`}
                  />
                </>
              )}
            </div>
            {!forcePushSuccess && (
              <ModalFooter
                onCancel={() => {
                  setShowForcePushModal(false);
                  setForcePushConfirmText('');
                  setForcePushError(null);
                }}
                submitText="Force Push Changes"
                submitVariant="danger"
                isDisabled={forcePushConfirmText !== `FORCE PUSH ${plan.code}`}
                isLoading={forceUpdateMutation.isPending}
                onSubmit={handleForcePush}
              />
            )}
          </Modal>
        )}
      </div>
    );
  }

  // Render Add-on Detail
  if (addon) {
    return (
      <div className="flex-1 overflow-y-auto">
        <div className="p-6">
          <div className="flex items-start justify-between mb-6">
            <div>
              <div className="flex items-center gap-3 mb-2">
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
                  {addon.name}
                </h2>
                <span className="px-2 py-1 text-sm font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded">
                  {addon.code}
                </span>
                {!addon.is_active && <Badge variant="warning">Inactive</Badge>}
              </div>
              {addon.description && (
                <p className="text-gray-600 dark:text-gray-400">{addon.description}</p>
              )}
            </div>
            <button
              onClick={onEdit}
              className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600"
            >
              <Pencil className="w-4 h-4" />
              Edit
            </button>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <label className="text-sm text-gray-500 dark:text-gray-400">Monthly Price</label>
              <p className="text-xl font-bold text-gray-900 dark:text-white">
                ${formatCentsToDollars(addon.price_monthly_cents)}
              </p>
            </div>
            <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
              <label className="text-sm text-gray-500 dark:text-gray-400">One-time Price</label>
              <p className="text-xl font-bold text-gray-900 dark:text-white">
                ${formatCentsToDollars(addon.price_one_time_cents)}
              </p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return null;
};

// =============================================================================
// Collapsible Section
// =============================================================================

interface CollapsibleSectionProps {
  title: string;
  isExpanded: boolean;
  onToggle: () => void;
  children: React.ReactNode;
  variant?: 'default' | 'danger';
}

const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
  title,
  isExpanded,
  onToggle,
  children,
  variant = 'default',
}) => {
  return (
    <div
      className={`border rounded-lg ${
        variant === 'danger'
          ? 'border-red-200 dark:border-red-800'
          : 'border-gray-200 dark:border-gray-700'
      }`}
    >
      <button
        onClick={onToggle}
        className={`w-full flex items-center justify-between p-4 text-left ${
          variant === 'danger'
            ? 'text-red-700 dark:text-red-400'
            : 'text-gray-900 dark:text-white'
        }`}
      >
        <span className="font-medium">{title}</span>
        {isExpanded ? (
          <ChevronDown className="w-5 h-5" />
        ) : (
          <ChevronRight className="w-5 h-5" />
        )}
      </button>
      {isExpanded && (
        <div className="px-4 pb-4 border-t border-gray-200 dark:border-gray-700 pt-4">
          {children}
        </div>
      )}
    </div>
  );
};

// =============================================================================
// Version Row
// =============================================================================

interface VersionRowProps {
  version: PlanVersion;
  isActive: boolean;
  onEdit: () => void;
  onMarkLegacy: () => void;
  onDelete: () => void;
}

const VersionRow: React.FC<VersionRowProps> = ({
  version,
  isActive,
  onEdit,
  onMarkLegacy,
  onDelete,
}) => {
  return (
    <div
      className={`flex items-center justify-between p-3 rounded-lg ${
        version.is_legacy
          ? 'bg-gray-50 dark:bg-gray-700/50'
          : 'bg-blue-50 dark:bg-blue-900/20'
      }`}
    >
      <div className="flex items-center gap-3">
        <span className="font-medium text-gray-900 dark:text-white">v{version.version}</span>
        <span className="text-gray-500 dark:text-gray-400">{version.name}</span>
        {version.is_legacy && (
          <span className="px-2 py-0.5 text-xs font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded">
            Legacy
          </span>
        )}
        {!version.is_public && !version.is_legacy && (
          <span className="px-2 py-0.5 text-xs font-medium bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300 rounded">
            Hidden
          </span>
        )}
        <span className="text-sm text-gray-500 dark:text-gray-400">
          {version.subscriber_count} subscriber{version.subscriber_count !== 1 ? 's' : ''}
        </span>
      </div>
      <div className="flex items-center gap-2">
        <button
          onClick={onEdit}
          className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
          title="Edit version"
        >
          <Pencil className="w-4 h-4" />
        </button>
        {!version.is_legacy && version.subscriber_count === 0 && (
          <button
            onClick={onMarkLegacy}
            className="p-1 text-gray-400 hover:text-amber-600 dark:hover:text-amber-400"
            title="Mark as legacy"
          >
            <Archive className="w-4 h-4" />
          </button>
        )}
        {version.subscriber_count === 0 && (
          <button
            onClick={onDelete}
            className="p-1 text-gray-400 hover:text-red-600 dark:hover:text-red-400"
            title="Delete version"
          >
            <Trash2 className="w-4 h-4" />
          </button>
        )}
      </div>
    </div>
  );
};