'use client';

import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import Link from 'next/link';
import api from '@/lib/api';
import { toast } from 'react-toastify';
import type { Application, AppLifecycleStatus, ApplicationMigrationEvent, ApplicationMigrationJob, BillingCycle, Cluster } from '@/types';
import { Search, X, Package, Hexagon, User, Database, Box, AlertTriangle, Clock, ArrowRightLeft, RefreshCw } from 'lucide-react';
import { useConfirm } from '@/components/confirm-modal';
import { DeleteButtonLabel } from '@/components/delete-button-label';
import {
  DeletingCardOverlay,
  DeletingTableRowOverlay,
  deletingRowContentClass,
} from '@/components/deleting-overlay';
import { TruncatedText } from '@/components/truncated-text';
import { useDebounce } from '@/hooks/useDebounce';
import { useApplicationDelete } from '@/lib/use-application-delete';

const statusColors: Record<string, string> = {
  running: 'badge-green',
  pending: 'badge-yellow',
  building: 'badge-blue',
  deploying: 'badge-blue',
  failed: 'badge-red',
  build_failed: 'badge-red',
  cancelled: 'badge-gray',
  stopped: 'badge-gray',
};

const lifecycleColors: Record<string, string> = {
  active: 'text-green-600 bg-green-50',
  suspended: 'text-amber-700 bg-amber-50',
  pending_deletion: 'text-red-700 bg-red-50',
  deleted: 'text-gray-500 bg-gray-100',
};

const lifecycleLabels: Record<string, string> = {
  active: 'Active',
  suspended: 'Suspended — Unpaid',
  pending_deletion: 'Pending Deletion',
  deleted: 'Deleted',
};

const cycleLabels: Record<string, string> = {
  hourly: 'Hourly',
  monthly: 'Monthly',
  yearly: 'Yearly',
};

function formatExpiry(expiresAt?: string): { text: string; urgent: boolean } {
  if (!expiresAt) return { text: '—', urgent: false };
  const now = new Date();
  const exp = new Date(expiresAt);
  const diff = exp.getTime() - now.getTime();
  if (diff <= 0) return { text: 'Expired', urgent: true };
  const hours = Math.floor(diff / 3600000);
  const days = Math.floor(hours / 24);
  if (days > 0) return { text: `${days}d ${hours % 24}h`, urgent: days < 3 };
  if (hours > 0) return { text: `${hours}h`, urgent: hours < 6 };
  const mins = Math.floor(diff / 60000);
  return { text: `${mins}m`, urgent: true };
}

function formatDeletionDate(date?: string): string {
  if (!date) return '';
  return new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
}

function migrationStatusBadgeClass(status: ApplicationMigrationJob['status']): string {
  switch (status) {
    case 'completed':
      return 'badge-green';
    case 'failed':
    case 'rolled_back':
      return 'badge-red';
    case 'running':
    case 'rolling_back':
      return 'badge-blue';
    default:
      return 'badge-gray';
  }
}

function formatMigrationStatus(status: ApplicationMigrationJob['status']): string {
  return status.replace(/_/g, ' ');
}

export default function AdminAppsPage() {
  const queryClient = useQueryClient();
  const confirm = useConfirm();
  const [search, setSearch] = useState('');
  const debouncedSearch = useDebounce(search, 400);
  const [migrateApp, setMigrateApp] = useState<Application | null>(null);
  const [targetClusterId, setTargetClusterId] = useState('');

  const { data: apps = [], isLoading } = useQuery<Application[]>({
    queryKey: ['admin-applications', debouncedSearch],
    queryFn: () =>
      api
        .get('/applications/all', { params: debouncedSearch ? { search: debouncedSearch } : {} })
        .then((r) => r.data),
  });

  const { deleteApplication, isDeleting, isAnyDeleting } = useApplicationDelete({
    invalidateKeys: [['admin-applications']],
    successMessage: 'Application deleted',
  });

  const { data: clusters = [] } = useQuery<Cluster[]>({
    queryKey: ['admin-clusters'],
    queryFn: () => api.get('/clusters').then((r) => r.data),
  });

  const { data: migrations = [] } = useQuery<ApplicationMigrationJob[]>({
    queryKey: ['application-migrations'],
    queryFn: () => api.get('/application-migrations').then((r) => r.data),
    refetchInterval: 5000,
  });

  const selectedMigration = migrateApp
    ? migrations.find((migration) => migration.applicationId === migrateApp.id)
    : undefined;
  const clusterById = new Map(clusters.map((cluster) => [cluster.id, cluster]));
  const currentCluster = migrateApp?.clusterId ? clusterById.get(migrateApp.clusterId) : undefined;
  const targetClusters = migrateApp
    ? clusters.filter((cluster) => cluster.id !== migrateApp.clusterId)
    : [];

  const { data: selectedMigrationEvents = [] } = useQuery<ApplicationMigrationEvent[]>({
    queryKey: ['application-migration-events', selectedMigration?.id],
    queryFn: () => api.get(`/application-migrations/${selectedMigration!.id}/events`).then((r) => r.data),
    enabled: !!selectedMigration?.id,
    refetchInterval: selectedMigration && ['queued', 'running', 'rolling_back'].includes(selectedMigration.status) ? 3000 : false,
  });

  const migrateMutation = useMutation({
    mutationFn: ({ appId, clusterId }: { appId: string; clusterId: string }) =>
      api.post(`/application-migrations/applications/${appId}`, {
        targetClusterId: clusterId,
        migrateStorage: true,
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['application-migrations'] });
      toast.success('Migration job queued');
    },
    onError: (err: any) => toast.error(err?.response?.data?.message || 'Failed to queue migration'),
  });

  const retryMigration = useMutation({
    mutationFn: (id: string) => api.post(`/application-migrations/${id}/retry`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['application-migrations'] });
      toast.success('Migration retry queued');
    },
    onError: (err: any) => toast.error(err?.response?.data?.message || 'Failed to retry migration'),
  });

  // Compute status counts from apps
  const statusCounts = apps.reduce(
    (acc, app) => {
      const status = app.deployments?.[0]?.status || 'pending';
      if (status === 'running') acc.running++;
      else if (status === 'stopped') acc.stopped++;
      else if (status === 'failed' || status === 'build_failed') acc.failed++;
      else if (status === 'building' || status === 'deploying') acc.deploying++;
      else acc.pending++;
      // Lifecycle counts
      const lc = app.lifecycleStatus || 'active';
      if (lc === 'suspended') acc.suspended++;
      if (lc === 'pending_deletion') acc.pendingDeletion++;
      return acc;
    },
    { running: 0, stopped: 0, failed: 0, deploying: 0, pending: 0, suspended: 0, pendingDeletion: 0 },
  );

  if (isLoading) {
    return (
      <div className="space-y-6">
        <div className="page-header">
          <div className="skeleton h-8 w-56" />
        </div>
        <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
          {[1, 2, 3, 4, 5].map((i) => (
            <div key={i} className="card py-4">
              <div className="skeleton h-8 w-12 mx-auto mb-2" />
              <div className="skeleton h-3 w-16 mx-auto" />
            </div>
          ))}
        </div>
        <div className="skeleton h-10 w-full rounded-xl" />
        <div className="space-y-3">
          {[1, 2, 3, 4].map((i) => (
            <div key={i} className="card flex items-center gap-4">
              <div className="skeleton w-11 h-11 rounded-xl" />
              <div className="flex-1 space-y-2">
                <div className="skeleton h-4 w-36" />
                <div className="skeleton h-3 w-56" />
              </div>
              <div className="skeleton h-6 w-20 rounded-full" />
            </div>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="page-header">
        <div>
          <h1 className="page-title">All Applications</h1>
          <p className="page-subtitle">
            {apps.length} application{apps.length !== 1 ? 's' : ''}
            {debouncedSearch && ` matching "${debouncedSearch}"`}
          </p>
        </div>
      </div>

      {/* Status Summary Cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
        <div className="card py-4 text-center border-l-4 border-l-green-500">
          <p className="text-2xl font-bold text-green-600">{statusCounts.running}</p>
          <p className="text-xs text-gray-500 font-medium mt-1">Running</p>
        </div>
        <div className="card py-4 text-center border-l-4 border-l-blue-500">
          <p className="text-2xl font-bold text-blue-600">{statusCounts.deploying}</p>
          <p className="text-xs text-gray-500 font-medium mt-1">Deploying</p>
        </div>
        <div className="card py-4 text-center border-l-4 border-l-yellow-500">
          <p className="text-2xl font-bold text-yellow-600">{statusCounts.pending}</p>
          <p className="text-xs text-gray-500 font-medium mt-1">Pending</p>
        </div>
        <div className="card py-4 text-center border-l-4 border-l-gray-400">
          <p className="text-2xl font-bold text-gray-500">{statusCounts.stopped}</p>
          <p className="text-xs text-gray-500 font-medium mt-1">Stopped</p>
        </div>
        <div className="card py-4 text-center border-l-4 border-l-red-500">
          <p className="text-2xl font-bold text-red-600">{statusCounts.failed}</p>
          <p className="text-xs text-gray-500 font-medium mt-1">Failed</p>
        </div>
        <div className="card py-4 text-center border-l-4 border-l-amber-500">
          <p className="text-2xl font-bold text-amber-600">{statusCounts.suspended}</p>
          <p className="text-xs text-gray-500 font-medium mt-1">Suspended</p>
        </div>
        <div className="card py-4 text-center border-l-4 border-l-red-700">
          <p className="text-2xl font-bold text-red-700">{statusCounts.pendingDeletion}</p>
          <p className="text-xs text-gray-500 font-medium mt-1">Pending Del.</p>
        </div>
      </div>

      {/* Search */}
      <div className="relative">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4" />
        <input
          type="text"
          placeholder="Search by app name, user name, email, or user ID…"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="input pl-10 w-full"
        />
        {search && (
          <button
            onClick={() => setSearch('')}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
          >
            <X className="w-4 h-4" />
          </button>
        )}
      </div>

      {apps.length === 0 ? (
        <div className="card text-center py-16">
          <Package className="w-12 h-12 mx-auto mb-4 text-gray-300" />
          {debouncedSearch ? (
            <>
              <p className="text-gray-600 text-lg font-medium">No applications found</p>
              <p className="text-gray-400 mt-1 text-sm">
                No results for &quot;{debouncedSearch}&quot;. Try a different search.
              </p>
            </>
          ) : (
            <>
              <p className="text-gray-600 text-lg font-medium">No applications yet</p>
              <p className="text-gray-400 mt-1 text-sm">No applications have been created by any user.</p>
            </>
          )}
        </div>
      ) : (
        <>
          {/* Desktop Table */}
          <div className="hidden lg:block table-wrapper overflow-x-auto">
            <table className="min-w-[1180px] w-full table-fixed divide-y divide-gray-200">
              <thead className="bg-gray-50/80">
                <tr>
                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider w-[300px] min-w-[300px]">Application</th>
                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Owner</th>
                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Service</th>
                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Cluster</th>
                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Migration</th>
                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Plan / Expiry</th>
                  <th className="px-6 py-3.5 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider min-w-[200px]">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100">
                {apps.map((app) => {
                  const latestStatus = app.deployments?.[0]?.status || 'pending';
                  const lifecycle = app.lifecycleStatus || 'active';
                  const expiry = formatExpiry(app.planExpiresAt);
                  const latestMigration = migrations.find((migration) => migration.applicationId === app.id);
                  const assignedCluster = app.clusterId ? clusterById.get(app.clusterId) : undefined;
                  const rowDeleting = isDeleting(app.id);
                  return (
                    <tr
                      key={app.id}
                      className={`hover:bg-gray-50/50 transition-colors ${lifecycle === 'suspended' ? 'bg-amber-50/30' : lifecycle === 'pending_deletion' ? 'bg-red-50/30' : ''} ${rowDeleting ? 'relative bg-gray-50/80' : ''}`}
                    >
                      <td className={`px-6 py-4 min-w-[300px] ${rowDeleting ? deletingRowContentClass : ''}`}>
                        <Link href={`/dashboard/apps/${app.id}`} className="flex items-center gap-3 min-w-[300px] group">
                          <div className="w-9 h-9 rounded-lg bg-primary-50 flex items-center justify-center shrink-0">
                            <Hexagon className={`w-5 h-5 ${app.runtime === 'nodejs' ? 'text-green-600' : app.runtime === 'wordpress' ? 'text-blue-600' : 'text-orange-500'}`} />
                          </div>
                          <div className="min-w-0 flex-1">
                            <TruncatedText className="font-semibold text-gray-900 group-hover:text-primary-600 transition-colors">
                              {app.name}
                            </TruncatedText>
                            <TruncatedText className="text-xs text-gray-400 capitalize">{app.runtime}</TruncatedText>
                          </div>
                        </Link>
                      </td>
                      <td className={`px-6 py-4 max-w-[200px] ${rowDeleting ? deletingRowContentClass : ''}`}>
                        {app.user ? (
                          <div className="min-w-0">
                            <TruncatedText className="text-sm font-medium text-gray-900">
                              {`${app.user.firstName} ${app.user.lastName}`}
                            </TruncatedText>
                            <TruncatedText className="text-xs text-gray-400">{app.user.email}</TruncatedText>
                            <TruncatedText className="text-xs text-gray-300 font-mono">{app.userId}</TruncatedText>
                          </div>
                        ) : (
                          <TruncatedText className="text-xs text-gray-400 font-mono">{app.userId}</TruncatedText>
                        )}
                      </td>
                      <td className={`px-6 py-4 max-w-[120px] text-sm text-gray-600 capitalize ${rowDeleting ? deletingRowContentClass : ''}`}>
                        <span className={`badge max-w-full truncate ${statusColors[latestStatus] || 'badge-gray'}`} title={latestStatus}>
                          {latestStatus}
                        </span>
                      </td>
                      <td className={`px-6 py-4 max-w-[180px] ${rowDeleting ? deletingRowContentClass : ''}`}>
                        <span
                          className={`inline-flex max-w-full items-center gap-1 truncate px-2 py-1 rounded-full text-xs font-semibold ${lifecycleColors[lifecycle] || 'text-gray-500 bg-gray-100'}`}
                          title={lifecycleLabels[lifecycle] || lifecycle}
                        >
                          {lifecycle === 'suspended' && <AlertTriangle className="w-3 h-3 shrink-0" />}
                          <span className="truncate">{lifecycleLabels[lifecycle] || lifecycle}</span>
                        </span>
                        {lifecycle === 'pending_deletion' && app.scheduledDeletionAt && (
                          <TruncatedText className="text-xs text-red-500 mt-1">
                            {`Delete: ${formatDeletionDate(app.scheduledDeletionAt)}`}
                          </TruncatedText>
                        )}
                      </td>
                      <td className={`px-6 py-4 max-w-[200px] ${rowDeleting ? deletingRowContentClass : ''}`}>
                        {assignedCluster ? (
                          <div className="min-w-0">
                            <TruncatedText className="text-sm font-medium text-gray-900">{assignedCluster.name}</TruncatedText>
                            <TruncatedText className="text-xs text-gray-400">
                              {`${assignedCluster.region || 'N/A'} · ${assignedCluster.status}/${assignedCluster.healthStatus || 'unknown'}`}
                            </TruncatedText>
                          </div>
                        ) : app.clusterId ? (
                          <div className="min-w-0">
                            <TruncatedText className="text-sm font-medium text-gray-700">Unknown cluster</TruncatedText>
                            <TruncatedText className="text-xs text-gray-400 font-mono">{app.clusterId}</TruncatedText>
                          </div>
                        ) : (
                          <TruncatedText className="text-xs text-gray-400">Not assigned</TruncatedText>
                        )}
                      </td>
                      <td className={`px-6 py-4 max-w-[140px] ${rowDeleting ? deletingRowContentClass : ''}`}>
                        {latestMigration ? (
                          <span
                            className={`badge text-xs capitalize max-w-full truncate ${migrationStatusBadgeClass(latestMigration.status)}`}
                            title={formatMigrationStatus(latestMigration.status)}
                          >
                            {formatMigrationStatus(latestMigration.status)}
                          </span>
                        ) : (
                          <span className="text-xs text-gray-400">—</span>
                        )}
                      </td>
                      <td className={`px-6 py-4 max-w-[140px] ${rowDeleting ? deletingRowContentClass : ''}`}>
                        {app.billingCycle && (
                          <span
                            className="badge badge-purple text-xs max-w-full truncate"
                            title={cycleLabels[app.billingCycle] || app.billingCycle}
                          >
                            {cycleLabels[app.billingCycle] || app.billingCycle}
                          </span>
                        )}
                        {app.planExpiresAt ? (
                          <TruncatedText className={`text-xs mt-1 ${expiry.urgent ? 'text-red-600 font-semibold' : 'text-gray-500'}`}>
                            {expiry.text}
                          </TruncatedText>
                        ) : (
                          <TruncatedText className="text-xs text-gray-400">No plan</TruncatedText>
                        )}
                      </td>
                      <td className={`px-6 py-4 text-right ${rowDeleting ? deletingRowContentClass : ''}`}>
                        <div className="flex flex-wrap items-center justify-end gap-1.5">
                          <Link href={`/dashboard/apps/${app.id}`} className="btn-ghost text-xs px-3 py-1.5">
                            View
                          </Link>
                          <button
                            type="button"
                            onClick={() => {
                              setMigrateApp(app);
                              setTargetClusterId('');
                            }}
                            disabled={!app.clusterId}
                            className="btn-secondary text-xs px-3 py-1.5 inline-flex items-center gap-1 disabled:opacity-50"
                            title={!app.clusterId ? 'Application is not assigned to a cluster' : undefined}
                          >
                            <ArrowRightLeft className="w-3 h-3" /> Migrate
                          </button>
                          <button
                            type="button"
                            disabled={isAnyDeleting}
                            onClick={async () => {
                              const ok = await confirm({ title: 'Delete Application', message: `Are you sure you want to delete "${app.name}"?`, confirmText: 'Delete', variant: 'danger' });
                              if (ok) deleteApplication(app.id);
                            }}
                            className="text-xs px-3 py-1.5 rounded-lg text-red-600 hover:bg-red-50 transition-colors font-medium disabled:opacity-50 disabled:pointer-events-none"
                          >
                            <DeleteButtonLabel loading={isDeleting(app.id)} />
                          </button>
                        </div>
                      </td>
                      {rowDeleting && (
                        <DeletingTableRowOverlay
                          colSpan={8}
                          name={app.name}
                          kind="application"
                        />
                      )}
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          {/* Mobile / tablet cards */}
          <div className="lg:hidden grid gap-3">
            {apps.map((app) => {
              const latestStatus = app.deployments?.[0]?.status || 'pending';
              const lifecycle = app.lifecycleStatus || 'active';
              const expiry = formatExpiry(app.planExpiresAt);
              const latestMigration = migrations.find((migration) => migration.applicationId === app.id);
              const assignedCluster = app.clusterId ? clusterById.get(app.clusterId) : undefined;
              const cardDeleting = isDeleting(app.id);
              return (
                <div
                  key={app.id}
                  className={`relative card space-y-3 ${lifecycle === 'suspended' ? 'border-amber-200/80' : lifecycle === 'pending_deletion' ? 'border-red-200/80' : ''} ${cardDeleting ? 'bg-gray-50' : ''}`}
                >
                  {cardDeleting && (
                    <DeletingCardOverlay name={app.name} kind="application" />
                  )}
                  <div className={cardDeleting ? deletingRowContentClass : undefined}>
                  <div className="flex items-start justify-between gap-3">
                    <Link href={`/dashboard/apps/${app.id}`} className="flex items-center gap-3 min-w-0 flex-1">
                      <div className="w-10 h-10 rounded-xl bg-primary-50 flex items-center justify-center shrink-0">
                        <Hexagon className={`w-5 h-5 ${app.runtime === 'nodejs' ? 'text-green-600' : app.runtime === 'wordpress' ? 'text-blue-600' : 'text-orange-500'}`} />
                      </div>
                      <div className="min-w-0">
                        <TruncatedText className="font-semibold text-gray-900">{app.name}</TruncatedText>
                        <p className="text-xs text-gray-500 capitalize">{app.runtime}</p>
                      </div>
                    </Link>
                    <span className={`badge shrink-0 ${statusColors[latestStatus] || 'badge-gray'}`}>
                      {latestStatus}
                    </span>
                  </div>

                  {app.user && (
                    <div className="text-xs text-gray-500 space-y-0.5">
                      <p className="flex items-center gap-1 font-medium text-gray-700">
                        <User className="w-3 h-3 shrink-0" />
                        {app.user.firstName} {app.user.lastName}
                      </p>
                      <TruncatedText>{app.user.email}</TruncatedText>
                    </div>
                  )}

                  <div className="flex flex-wrap items-center gap-2 text-xs">
                    <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full font-semibold ${lifecycleColors[lifecycle] || 'text-gray-500 bg-gray-100'}`}>
                      {lifecycle === 'suspended' && <AlertTriangle className="w-3 h-3" />}
                      {lifecycleLabels[lifecycle] || lifecycle}
                    </span>
                    {app.billingCycle && (
                      <span className="badge badge-purple">{cycleLabels[app.billingCycle] || app.billingCycle}</span>
                    )}
                    {latestMigration && (
                      <span className={`badge capitalize ${migrationStatusBadgeClass(latestMigration.status)}`}>
                        {formatMigrationStatus(latestMigration.status)}
                      </span>
                    )}
                  </div>

                  {lifecycle === 'pending_deletion' && app.scheduledDeletionAt && (
                    <p className="text-xs text-red-600">Delete: {formatDeletionDate(app.scheduledDeletionAt)}</p>
                  )}

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs text-gray-500">
                    <div>
                      <span className="text-gray-400 block">Cluster</span>
                      <TruncatedText className="font-medium text-gray-800">
                        {assignedCluster?.name || (app.clusterId ? 'Unknown' : 'Not assigned')}
                      </TruncatedText>
                      {assignedCluster && (
                        <TruncatedText className="text-gray-400 mt-0.5">
                          {`${assignedCluster.region || 'N/A'} · ${assignedCluster.status}`}
                        </TruncatedText>
                      )}
                    </div>
                    <div>
                      <span className="text-gray-400 block">Plan</span>
                      {app.planExpiresAt ? (
                        <span className={expiry.urgent ? 'text-red-600 font-semibold' : 'text-gray-700'}>{expiry.text}</span>
                      ) : (
                        <span className="text-gray-400">No plan</span>
                      )}
                    </div>
                    <div className="flex items-center gap-3 sm:col-span-2">
                      <span className="flex items-center gap-1"><Database className="w-3 h-3" /> {app.databaseType}</span>
                      <span className="flex items-center gap-1"><Box className="w-3 h-3" /> {app.replicas} replica{app.replicas > 1 ? 's' : ''}</span>
                    </div>
                  </div>

                  <div className="flex flex-wrap items-center gap-2 pt-3 border-t border-gray-100">
                    <Link href={`/dashboard/apps/${app.id}`} className="btn-ghost text-xs px-3 py-1.5">
                      View
                    </Link>
                    <button
                      type="button"
                      onClick={() => {
                        setMigrateApp(app);
                        setTargetClusterId('');
                      }}
                      disabled={!app.clusterId}
                      className="btn-secondary text-xs px-3 py-1.5 inline-flex items-center gap-1 disabled:opacity-50"
                      title={!app.clusterId ? 'Application is not assigned to a cluster' : undefined}
                    >
                      <ArrowRightLeft className="w-3 h-3" /> Migrate
                    </button>
                    <button
                      type="button"
                      disabled={isAnyDeleting}
                      onClick={async () => {
                        const ok = await confirm({
                          title: 'Delete Application',
                          message: `Are you sure you want to delete "${app.name}"?`,
                          confirmText: 'Delete',
                          variant: 'danger',
                        });
                        if (ok) deleteApplication(app.id);
                      }}
                      className="text-xs px-3 py-1.5 rounded-lg text-red-600 hover:bg-red-50 font-medium disabled:opacity-50 disabled:pointer-events-none"
                    >
                      <DeleteButtonLabel loading={isDeleting(app.id)} />
                    </button>
                  </div>
                  </div>
                </div>
              );
            })}
          </div>
        </>
      )}

      {migrateApp && (
        <div className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl shadow-xl max-w-2xl w-full p-6 space-y-5">
            <div className="flex items-start justify-between gap-3">
              <div>
                <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
                  <ArrowRightLeft className="w-5 h-5" /> Migrate Application
                </h2>
                <p className="text-sm text-gray-500 mt-1">
                  Move <span className="font-medium">{migrateApp.name}</span> to a healthy target cluster with logs, retry, and rollback.
                </p>
              </div>
              <button onClick={() => setMigrateApp(null)} className="p-1 text-gray-400 hover:text-gray-600">
                <X className="w-5 h-5" />
              </button>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Target Cluster</label>
              <div className="mb-3 rounded-xl bg-gray-50 border border-gray-100 p-3">
                <p className="text-xs font-medium text-gray-500">Current cluster</p>
                <p className="text-sm font-semibold text-gray-900 mt-1">
                  {currentCluster?.name || (migrateApp.clusterId ? `Unknown cluster (${migrateApp.clusterId.slice(0, 8)})` : 'Not assigned')}
                </p>
                {currentCluster && (
                  <p className="text-xs text-gray-500 mt-0.5">
                    {currentCluster.region || 'N/A'} · {currentCluster.status}/{currentCluster.healthStatus || 'unknown'}
                  </p>
                )}
              </div>
              <select
                className="input-field"
                value={targetClusterId}
                onChange={(e) => setTargetClusterId(e.target.value)}
              >
                <option value="">Select healthy cluster</option>
                {targetClusters
                  .map((cluster) => (
                    <option
                      key={cluster.id}
                      value={cluster.id}
                      disabled={cluster.status !== 'active' || cluster.healthStatus !== 'healthy'}
                    >
                      {cluster.name} · {cluster.region || 'N/A'} · {cluster.status}/{cluster.healthStatus || 'unknown'}
                    </option>
                  ))}
              </select>
              <p className="text-xs text-gray-400 mt-1">
                The current cluster is excluded. Migration is blocked for unhealthy, inactive, or maintenance clusters.
              </p>
              {targetClusters.length === 0 && (
                <p className="text-xs text-amber-600 mt-2">
                  No other cluster is available as a migration target.
                </p>
              )}
            </div>

            {selectedMigration && (
              <div className="rounded-xl border border-gray-200 p-4 space-y-3">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-semibold text-gray-800">Latest migration</p>
                    <p className="text-xs text-gray-500">
                      {selectedMigration.currentStep || 'queued'} · attempts {selectedMigration.attempts}/{selectedMigration.maxAttempts}
                    </p>
                  </div>
                  <span className={`badge ${
                    selectedMigration.status === 'completed'
                      ? 'badge-green'
                      : selectedMigration.status === 'failed' || selectedMigration.status === 'rolled_back'
                      ? 'badge-red'
                      : 'badge-blue'
                  }`}>
                    {selectedMigration.status}
                  </span>
                </div>
                {selectedMigration.errorMessage && (
                  <p className="text-sm text-red-600">{selectedMigration.errorMessage}</p>
                )}
                <div className="max-h-40 overflow-auto rounded-lg bg-gray-50 p-3 space-y-2">
                  {selectedMigrationEvents.length === 0 ? (
                    <p className="text-xs text-gray-400">No events yet.</p>
                  ) : selectedMigrationEvents.map((event) => (
                    <div key={event.id} className="text-xs">
                      <span className="font-mono text-gray-400">{new Date(event.createdAt).toLocaleTimeString()}</span>
                      <span className={`ml-2 font-medium ${
                        event.level === 'error' ? 'text-red-600' : event.level === 'warn' ? 'text-amber-600' : 'text-gray-700'
                      }`}>
                        {event.step}
                      </span>
                      <span className="ml-2 text-gray-600">{event.message}</span>
                    </div>
                  ))}
                </div>
                {['failed', 'rolled_back'].includes(selectedMigration.status) && (
                  <button
                    type="button"
                    onClick={() => retryMigration.mutate(selectedMigration.id)}
                    disabled={retryMigration.isPending}
                    className="btn-secondary text-sm inline-flex items-center gap-1"
                  >
                    <RefreshCw className={`w-4 h-4 ${retryMigration.isPending ? 'animate-spin' : ''}`} />
                    Retry migration
                  </button>
                )}
              </div>
            )}

            <div className="flex justify-end gap-2">
              <button onClick={() => setMigrateApp(null)} className="btn-secondary">
                Cancel
              </button>
              <button
                onClick={() => migrateMutation.mutate({ appId: migrateApp.id, clusterId: targetClusterId })}
                disabled={!targetClusterId || migrateMutation.isPending}
                className="btn-primary disabled:opacity-50"
              >
                {migrateMutation.isPending ? 'Queueing...' : 'Start Migration'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}