'use client';

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useParams, useRouter } from 'next/navigation';
import api from '@/lib/api';
import { toast } from 'react-toastify';
import type { Application, Deployment, ResourceUsage, ClusterPublic, ClusterPoolPublic } from '@/types';
import { useState, useRef, useCallback, useEffect } from 'react';
import { Hexagon, Rocket, Play, Square, RotateCw, Globe, Package, Server, Scale, CheckCircle, Clock, XCircle, AlertCircle, Link, GitBranch, KeyRound, FolderUp, BarChart3, ChevronDown, FileText, Monitor, Hammer, Settings, RefreshCw, Upload, Circle, Pin } from 'lucide-react';

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

/**
 * Parse CPU value to millicores (e.g. "100m" → 100, "1" → 1000, "250n" → 0.00025)
 */
function parseCpuToMillicores(cpu: string): number {
  if (!cpu || cpu === '0') return 0;
  if (cpu.endsWith('n')) return parseFloat(cpu) / 1_000_000;
  if (cpu.endsWith('u')) return parseFloat(cpu) / 1_000;
  if (cpu.endsWith('m')) return parseFloat(cpu);
  return parseFloat(cpu) * 1000;
}

/**
 * Parse memory value to MiB (e.g. "128Mi" → 128, "1Gi" → 1024, "131072Ki" → 128)
 */
function parseMemoryToMi(memory: string): number {
  if (!memory || memory === '0') return 0;
  if (memory.endsWith('Ki')) return parseFloat(memory) / 1024;
  if (memory.endsWith('Mi')) return parseFloat(memory);
  if (memory.endsWith('Gi')) return parseFloat(memory) * 1024;
  if (memory.endsWith('Ti')) return parseFloat(memory) * 1024 * 1024;
  // raw bytes
  return parseFloat(memory) / (1024 * 1024);
}

export default function AppDetailPage() {
  const params = useParams();
  const router = useRouter();
  const queryClient = useQueryClient();
  const appId = params.id as string;
  const [showLogs, setShowLogs] = useState(false);
  const [logTab, setLogTab] = useState<'pod' | 'build'>('pod');
  const fileInputRef = useRef<HTMLInputElement>(null);
  const logsEndRef = useRef<HTMLPreElement>(null);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [isDragging, setIsDragging] = useState(false);
  const [showResources, setShowResources] = useState(false);
  const [resourceForm, setResourceForm] = useState({
    cpuRequest: '',
    cpuLimit: '',
    memoryRequest: '',
    memoryLimit: '',
    replicas: 1,
  });

  const { data: app, isLoading } = useQuery<Application>({
    queryKey: ['application', appId],
    queryFn: () => api.get(`/applications/${appId}`).then((r) => r.data),
  });

  const { data: deployments = [] } = useQuery<Deployment[]>({
    queryKey: ['deployments', appId],
    queryFn: () => api.get(`/deployments/applications/${appId}`).then((r) => r.data),
    refetchInterval: 5000, // Poll for status updates
  });

  const { data: logsData } = useQuery<{ logs: string }>({
    queryKey: ['logs', appId],
    queryFn: () => api.get(`/deployments/applications/${appId}/logs`).then((r) => r.data),
    enabled: showLogs && logTab === 'pod',
    refetchInterval: showLogs && logTab === 'pod' ? 3000 : false,
  });

  const { data: buildLogsData } = useQuery<{ buildLog: string | null; status: string; version: string | null }>({
    queryKey: ['build-logs', appId],
    queryFn: () => api.get(`/deployments/applications/${appId}/build-logs`).then((r) => r.data),
    enabled: showLogs && logTab === 'build',
    refetchInterval: showLogs && logTab === 'build' ? 5000 : false,
  });

  const { data: resourceUsage, isLoading: resourcesLoading } = useQuery<ResourceUsage>({
    queryKey: ['resources', appId],
    queryFn: () => api.get(`/applications/${appId}/resources`).then((r) => r.data),
    enabled: showResources,
    refetchInterval: showResources ? 5000 : false,
  });

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

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

  // Sync form when resource data loads
  useEffect(() => {
    if (resourceUsage?.configured) {
      setResourceForm({
        cpuRequest: resourceUsage.configured.cpuRequest,
        cpuLimit: resourceUsage.configured.cpuLimit,
        memoryRequest: resourceUsage.configured.memoryRequest,
        memoryLimit: resourceUsage.configured.memoryLimit,
        replicas: resourceUsage.configured.replicas,
      });
    }
  }, [resourceUsage?.configured]);

  // Auto-scroll logs to bottom
  useEffect(() => {
    if (logsEndRef.current) {
      logsEndRef.current.scrollTop = logsEndRef.current.scrollHeight;
    }
  }, [logsData]);

  const invalidateAll = () => {
    queryClient.invalidateQueries({ queryKey: ['deployments', appId] });
    queryClient.invalidateQueries({ queryKey: ['application', appId] });
  };

  const deployMutation = useMutation({
    mutationFn: () => api.post(`/deployments/applications/${appId}/deploy`),
    onSuccess: () => {
      invalidateAll();
      toast.success('Deployment triggered!');
    },
    onError: () => toast.error('Failed to trigger deployment'),
  });

  const stopMutation = useMutation({
    mutationFn: () => api.post(`/deployments/applications/${appId}/stop`),
    onSuccess: () => {
      invalidateAll();
      toast.success('Application stopped');
    },
    onError: () => toast.error('Failed to stop application'),
  });

  const startMutation = useMutation({
    mutationFn: () => api.post(`/deployments/applications/${appId}/start`),
    onSuccess: () => {
      invalidateAll();
      toast.success('Application started');
    },
    onError: () => toast.error('Failed to start application'),
  });

  const restartMutation = useMutation({
    mutationFn: () => api.post(`/deployments/applications/${appId}/restart`),
    onSuccess: () => {
      invalidateAll();
      toast.success('Application restarting...');
    },
    onError: () => toast.error('Failed to restart application'),
  });

  const redeployMutation = useMutation({
    mutationFn: () => api.post(`/deployments/applications/${appId}/redeploy`),
    onSuccess: () => {
      invalidateAll();
      toast.success('Redeploy triggered — building new version from latest source');
    },
    onError: () => toast.error('Failed to trigger redeploy'),
  });

  const deleteMutation = useMutation({
    mutationFn: () => api.delete(`/applications/${appId}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['applications'] });
      toast.success('Application deleted');
      router.push('/dashboard/apps');
    },
    onError: () => toast.error('Failed to delete application'),
  });

  const scaleMutation = useMutation({
    mutationFn: (data: { cpuRequest?: string; cpuLimit?: string; memoryRequest?: string; memoryLimit?: string; replicas?: number }) =>
      api.patch(`/applications/${appId}/resources`, data),
    onSuccess: () => {
      invalidateAll();
      queryClient.invalidateQueries({ queryKey: ['resources', appId] });
      toast.success('Resources updated successfully!');
    },
    onError: () => toast.error('Failed to update resources'),
  });

  const previewMutation = useMutation({
    mutationFn: () => api.get(`/applications/${appId}/preview`).then((r) => r.data),
    onSuccess: (data: { url: string; nodePort: number; host: string; ingressUrl?: string }) => {
      // Open the preview URL in a new tab
      window.open(data.url, '_blank');
      toast.success(`Preview opened on port ${data.nodePort}`);
    },
    onError: () => toast.error('Failed to get preview URL. Make sure the app is deployed.'),
  });

  const uploadMutation = useMutation({
    mutationFn: (file: File) => {
      const formData = new FormData();
      formData.append('file', file);
      return api.post(`/applications/${appId}/upload`, formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
        onUploadProgress: (e) => {
          if (e.total) setUploadProgress(Math.round((e.loaded * 100) / e.total));
        },
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['application', appId] });
      toast.success('Source code uploaded successfully!');
      setUploadProgress(0);
    },
    onError: () => {
      toast.error('Failed to upload source code');
      setUploadProgress(0);
    },
  });

  const handleFileUpload = useCallback((file: File) => {
    if (!file.name.endsWith('.zip') && !file.name.endsWith('.tar.gz') && !file.name.endsWith('.tgz')) {
      toast.error('Please upload a .zip or .tar.gz file');
      return;
    }
    if (file.size > 100 * 1024 * 1024) {
      toast.error('File size must be less than 100MB');
      return;
    }
    uploadMutation.mutate(file);
  }, [uploadMutation]);

  const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
    const file = e.dataTransfer.files[0];
    if (file) handleFileUpload(file);
  }, [handleFileUpload]);

  const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(true);
  }, []);

  const handleDragLeave = useCallback(() => {
    setIsDragging(false);
  }, []);

  if (isLoading || !app) {
    return (
      <div className="space-y-6 animate-fade-in">
        <div className="flex items-center gap-4">
          <div className="skeleton w-14 h-14 rounded-2xl" />
          <div className="space-y-2 flex-1">
            <div className="skeleton h-6 w-48" />
            <div className="skeleton h-4 w-72" />
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="card space-y-3">
            {[1,2,3,4,5].map(i => <div key={i} className="skeleton h-4 w-full" />)}
          </div>
          <div className="card space-y-3">
            {[1,2,3].map(i => <div key={i} className="skeleton h-12 w-full rounded-lg" />)}
          </div>
        </div>
      </div>
    );
  }

  const latestStatus = deployments[0]?.status || 'pending';
  const hasDeployments = deployments.length > 0;
  const isStopped = latestStatus === 'stopped';
  const isRunning = latestStatus === 'running';
  const isInProgress = latestStatus === 'building' || latestStatus === 'deploying' || latestStatus === 'pending';

  const handleDelete = () => {
    if (confirm(`Are you sure you want to delete "${app.name}"?\n\nThis will permanently remove:\n• All Kubernetes resources (pods, services, ingress)\n• Database and volumes\n• All deployment records\n• Uploaded source code`)) {
      deleteMutation.mutate();
    }
  };

  return (
    <div className="space-y-6 animate-fade-in">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center gap-4">
        <div className="flex items-center gap-4 flex-1 min-w-0">
          <div className="w-14 h-14 rounded-2xl bg-primary-50 flex items-center justify-center shrink-0">
            <Hexagon className={`w-7 h-7 ${app.runtime === 'nodejs' ? 'text-green-500' : 'text-orange-500'}`} />
          </div>
          <div className="min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <h1 className="text-xl sm:text-2xl font-bold text-gray-900 truncate">{app.name}</h1>
              <span className={`badge ${statusColors[latestStatus] || 'badge-gray'}`}>
                {latestStatus}
              </span>
            </div>
            <p className="text-sm text-gray-500 truncate">
              {app.runtime} · {app.subdomain}.apps.cloudhost.local
            </p>
          </div>
        </div>

        <div className="flex flex-wrap gap-2 shrink-0">
          {!hasDeployments && (
            <button onClick={() => deployMutation.mutate()} disabled={deployMutation.isPending || (!app.codePath && !app.gitUrl)} className="btn-primary text-sm disabled:opacity-50">
              {deployMutation.isPending ? <><Clock className="w-4 h-4 inline animate-spin" /> Deploying...</> : <><Rocket className="w-4 h-4 inline" /> Deploy</>}
            </button>
          )}
          {hasDeployments && (
            <>
              {isStopped ? (
                <button onClick={() => startMutation.mutate()} disabled={startMutation.isPending} className="btn-primary text-sm disabled:opacity-50">
                  {startMutation.isPending ? <><Clock className="w-3 h-3 inline animate-spin" /></> : <><Play className="w-3 h-3 inline" /> Start</>}
                </button>
              ) : (
                <button onClick={() => stopMutation.mutate()} disabled={stopMutation.isPending || isInProgress} className="btn-secondary text-sm disabled:opacity-50">
                  {stopMutation.isPending ? <><Clock className="w-3 h-3 inline animate-spin" /></> : <><Square className="w-3 h-3 inline" /> Stop</>}
                </button>
              )}
              {isRunning && (
                <button onClick={() => restartMutation.mutate()} disabled={restartMutation.isPending} className="btn-secondary text-sm disabled:opacity-50">
                  {restartMutation.isPending ? <><Clock className="w-3 h-3 inline animate-spin" /></> : <><RotateCw className="w-3 h-3 inline" /> Restart</>}
                </button>
              )}
              {!isInProgress && (
                <button onClick={() => redeployMutation.mutate()} disabled={redeployMutation.isPending} className="btn-primary text-sm disabled:opacity-50" title="Rebuild from latest source code">
                  {redeployMutation.isPending ? <><Clock className="w-3 h-3 inline animate-spin" /></> : <><RefreshCw className="w-3 h-3 inline" /> Redeploy</>}
                </button>
              )}
              {isRunning && (
                <button onClick={() => previewMutation.mutate()} disabled={previewMutation.isPending} className="text-sm px-4 py-2 rounded-xl font-medium bg-emerald-50 text-emerald-700 hover:bg-emerald-100 border border-emerald-200 disabled:opacity-50 transition-all active:scale-[0.98]">
                  {previewMutation.isPending ? <><Clock className="w-3 h-3 inline animate-spin" /></> : <><Globe className="w-3 h-3 inline" /> Preview</>}
                </button>
              )}
            </>
          )}
          <button onClick={handleDelete} disabled={deleteMutation.isPending} className="btn-danger text-sm disabled:opacity-50">
                  {deleteMutation.isPending ? <><Clock className="w-3 h-3 inline animate-spin" /></> : 'Delete'}
          </button>
        </div>
      </div>
      {/* Status & Config */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="card">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">Configuration</h2>
          <dl className="space-y-3">
            <div className="flex justify-between">
              <dt className="text-sm text-gray-500">Runtime</dt>
              <dd className="text-sm font-medium text-gray-900">{app.runtime}</dd>
            </div>
            <div className="flex justify-between">
              <dt className="text-sm text-gray-500">Database</dt>
              <dd className="text-sm font-medium text-gray-900">{app.databaseType}</dd>
            </div>
            <div className="flex justify-between">
              <dt className="text-sm text-gray-500">Replicas</dt>
              <dd className="text-sm font-medium text-gray-900">{app.replicas}</dd>
            </div>
            <div className="flex justify-between">
              <dt className="text-sm text-gray-500">CPU</dt>
              <dd className="text-sm font-medium text-gray-900">{app.cpuRequest} / {app.cpuLimit}</dd>
            </div>
            <div className="flex justify-between">
              <dt className="text-sm text-gray-500">Memory</dt>
              <dd className="text-sm font-medium text-gray-900">{app.memoryRequest} / {app.memoryLimit}</dd>
            </div>
            <div className="flex justify-between">
              <dt className="text-sm text-gray-500">Port</dt>
              <dd className="text-sm font-medium text-gray-900">{app.port}</dd>
            </div>
            {app.clusterId && (
              <div className="flex justify-between">
                <dt className="text-sm text-gray-500">Cluster</dt>
                <dd className="text-sm font-medium text-gray-900">
                  <Server className="w-4 h-4 inline text-gray-400" /> {clusters.find((c) => c.id === app.clusterId)?.name || 'Unknown'}
                </dd>
              </div>
            )}
            {app.poolId && (
              <div className="flex justify-between">
                <dt className="text-sm text-gray-500">Pool</dt>
                <dd className="text-sm font-medium text-gray-900">
                  <Scale className="w-4 h-4 inline text-gray-400" /> {pools.find((p) => p.id === app.poolId)?.name || 'Unknown'}
                </dd>
              </div>
            )}
            {app.latestImageTag && (
              <div className="flex justify-between">
                <dt className="text-sm text-gray-500">Image</dt>
                <dd className="text-xs font-mono text-gray-700 truncate max-w-[200px]" title={app.latestImageTag}>
                  {app.latestImageTag}
                </dd>
              </div>
            )}
          </dl>
        </div>

        <div className="card">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">Deployment History</h2>
          {deployments.length === 0 ? (
            <div className="text-center py-8">
              <Package className="w-8 h-8 mx-auto text-gray-300 mb-2" />
              <p className="text-gray-500 text-sm">No deployments yet</p>
              <p className="text-gray-400 text-xs mt-1">Upload source code and click Deploy to get started</p>
            </div>
          ) : (
            <div className="space-y-3 max-h-72 overflow-y-auto">
              {deployments.slice(0, 10).map((d) => (
                <div key={d.id} className="flex items-center justify-between p-3 bg-gray-50/80 rounded-xl">
                  <div className="min-w-0 flex-1">
                    <p className="text-sm font-medium text-gray-900 truncate">{d.version || d.imageTag}</p>
                    <p className="text-xs text-gray-500">
                      {new Date(d.createdAt).toLocaleString()}
                    </p>
                    {d.errorMessage && (
                      <p className="text-xs text-red-500 mt-1 truncate" title={d.errorMessage}>
                        <XCircle className="w-3 h-3 inline" /> {d.errorMessage}
                      </p>
                    )}
                  </div>
                  <span className={`badge ${statusColors[d.status] || 'badge-gray'} ml-2 shrink-0`}>
                    {d.status}
                  </span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Source Code Upload */}
      <div className="card">
        <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2"><Package className="w-5 h-5" /> Source Code</h2>

        {app.codePath ? (
          <div className="flex items-center justify-between p-4 bg-green-50 border border-green-200 rounded-xl mb-4">
            <div className="flex items-center space-x-3">
              <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center text-green-600">
                <CheckCircle className="w-5 h-5" />
              </div>
              <div>
                <p className="text-sm font-medium text-green-800">Source code uploaded</p>
                <p className="text-xs text-green-600">{app.codePath.split('/').pop()}</p>
              </div>
            </div>
            <button
              onClick={() => fileInputRef.current?.click()}
              className="text-sm text-green-700 hover:text-green-900 font-medium"
            >
              Replace
            </button>
          </div>
        ) : app.gitUrl ? (
          <div className="flex items-center justify-between p-4 bg-blue-50 border border-blue-200 rounded-xl mb-4">
            <div className="flex items-center space-x-3">
              <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600">
                <Link className="w-5 h-5" />
              </div>
              <div>
                <p className="text-sm font-medium text-blue-800">Git repository connected</p>
                <p className="text-xs text-blue-600 font-mono">{app.gitUrl}</p>
                <div className="flex items-center space-x-3 mt-1">
                  {app.gitBranch && (
                    <span className="text-xs text-blue-500 flex items-center gap-1">
                      <GitBranch className="w-3 h-3" /> {app.gitBranch}
                    </span>
                  )}
                  {app.gitToken && (
                    <span className="text-xs text-green-600 flex items-center gap-1">
                      <KeyRound className="w-3 h-3" /> Private
                    </span>
                  )}
                </div>
              </div>
            </div>
          </div>
        ) : null}

        <div
          onDrop={handleDrop}
          onDragOver={handleDragOver}
          onDragLeave={handleDragLeave}
          onClick={() => fileInputRef.current?.click()}
          className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all
            ${isDragging
              ? 'border-primary-500 bg-primary-50'
              : 'border-gray-300 hover:border-primary-400 hover:bg-gray-50'
            }
            ${uploadMutation.isPending ? 'pointer-events-none opacity-60' : ''}
          `}
        >
          <input
            ref={fileInputRef}
            type="file"
            accept=".zip,.tar.gz,.tgz"
            className="hidden"
            onChange={(e) => {
              const file = e.target.files?.[0];
              if (file) handleFileUpload(file);
              e.target.value = '';
            }}
          />

          {uploadMutation.isPending ? (
            <div className="space-y-3">
              <Upload className="w-8 h-8 mx-auto text-gray-400 animate-pulse" />
              <p className="text-sm font-medium text-gray-700">Uploading... {uploadProgress}%</p>
              <div className="w-48 mx-auto bg-gray-200 rounded-full h-2">
                <div
                  className="bg-primary-600 h-2 rounded-full transition-all duration-300"
                  style={{ width: `${uploadProgress}%` }}
                />
              </div>
            </div>
          ) : (
            <div className="space-y-2">
              <FolderUp className="w-8 h-8 mx-auto text-gray-400" />
              <p className="text-sm font-medium text-gray-700">
                {app.codePath ? 'Upload new version' : 'Upload your project source code'}
              </p>
              <p className="text-xs text-gray-500">
                Drag & drop a <strong>.zip</strong> file here, or click to browse
              </p>
              <p className="text-xs text-gray-400">Max size: 100MB</p>
            </div>
          )}
        </div>
      </div>

      {/* Resource Monitoring & Scaling */}
      <div className="card">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2"><BarChart3 className="w-5 h-5" /> Resources & Scaling</h2>
          <button
            onClick={() => setShowResources(!showResources)}
            className="btn-secondary text-sm"
          >
            {showResources ? <><ChevronDown className="w-4 h-4 inline" /> Hide</> : <><BarChart3 className="w-4 h-4 inline" /> Monitor</>}
          </button>
        </div>

        {showResources && (
          <div className="space-y-6">
            {/* Live Metrics */}
            {resourcesLoading ? (
              <div className="text-center py-6 text-gray-400 text-sm">Loading metrics...</div>
            ) : resourceUsage ? (
              <>
                {/* Cluster Status */}
                <div className="grid grid-cols-3 gap-4">
                  <div className="bg-blue-50 rounded-xl p-4 text-center">
                    <p className="text-xs text-blue-500 font-medium">Replicas</p>
                    <p className="text-2xl font-bold text-blue-700">
                      {resourceUsage.configured.readyReplicas}/{resourceUsage.configured.replicas}
                    </p>
                    <p className="text-xs text-blue-400">ready</p>
                  </div>
                  <div className="bg-green-50 rounded-xl p-4 text-center">
                    <p className="text-xs text-green-500 font-medium">Pods</p>
                    <p className="text-2xl font-bold text-green-700">{resourceUsage.pods.length}</p>
                    <p className="text-xs text-green-400">
                      {resourceUsage.pods.filter((p) => p.ready).length} ready
                    </p>
                  </div>
                  <div className="bg-purple-50 rounded-xl p-4 text-center">
                    <p className="text-xs text-purple-500 font-medium">Metrics</p>
                    <p className="text-2xl font-bold text-purple-700">
                      {resourceUsage.metrics.length > 0 ? <CheckCircle className="w-6 h-6 mx-auto text-purple-700" /> : <Clock className="w-6 h-6 mx-auto text-purple-400" />}
                    </p>
                    <p className="text-xs text-purple-400">
                      {resourceUsage.metrics.length > 0 ? 'Available' : 'Waiting...'}
                    </p>
                  </div>
                </div>

                {/* Per-Pod Metrics */}
                {resourceUsage.metrics.length > 0 && (
                  <div className="space-y-3">
                    <h3 className="text-sm font-semibold text-gray-700">Pod Usage</h3>
                    {resourceUsage.metrics.map((metric) => {
                      const cpuUsed = parseCpuToMillicores(metric.cpu);
                      const cpuLimit = parseCpuToMillicores(resourceUsage.configured.cpuLimit);
                      const cpuPercent = cpuLimit > 0 ? Math.min((cpuUsed / cpuLimit) * 100, 100) : 0;

                      const memUsed = parseMemoryToMi(metric.memory);
                      const memLimit = parseMemoryToMi(resourceUsage.configured.memoryLimit);
                      const memPercent = memLimit > 0 ? Math.min((memUsed / memLimit) * 100, 100) : 0;

                      return (
                        <div key={metric.name} className="bg-gray-50 rounded-xl p-4 space-y-3">
                          <div className="flex items-center justify-between">
                            <p className="text-xs font-mono text-gray-600 truncate max-w-[250px]" title={metric.name}>
                              <Circle className="w-2 h-2 inline fill-green-500 text-green-500" /> {metric.name}
                            </p>
                          </div>

                          {/* CPU Bar */}
                          <div>
                            <div className="flex justify-between text-xs text-gray-500 mb-1">
                              <span>CPU</span>
                              <span>
                                {cpuUsed.toFixed(1)}m / {cpuLimit.toFixed(0)}m ({cpuPercent.toFixed(1)}%)
                              </span>
                            </div>
                            <div className="w-full bg-gray-200 rounded-full h-2.5">
                              <div
                                className={`h-2.5 rounded-full transition-all duration-500 ${
                                  cpuPercent > 80 ? 'bg-red-500' : cpuPercent > 50 ? 'bg-yellow-500' : 'bg-green-500'
                                }`}
                                style={{ width: `${cpuPercent}%` }}
                              />
                            </div>
                          </div>

                          {/* Memory Bar */}
                          <div>
                            <div className="flex justify-between text-xs text-gray-500 mb-1">
                              <span>Memory</span>
                              <span>
                                {memUsed.toFixed(1)}Mi / {memLimit.toFixed(0)}Mi ({memPercent.toFixed(1)}%)
                              </span>
                            </div>
                            <div className="w-full bg-gray-200 rounded-full h-2.5">
                              <div
                                className={`h-2.5 rounded-full transition-all duration-500 ${
                                  memPercent > 80 ? 'bg-red-500' : memPercent > 50 ? 'bg-yellow-500' : 'bg-green-500'
                                }`}
                                style={{ width: `${memPercent}%` }}
                              />
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                )}

                {/* Pod Status Table */}
                {resourceUsage.pods.length > 0 && (
                  <div>
                    <h3 className="text-sm font-semibold text-gray-700 mb-2">Pod Status</h3>
                    <div className="overflow-x-auto -mx-2 px-2">
                      <table className="w-full text-xs">
                        <thead>
                          <tr className="text-left text-gray-500 border-b border-gray-200">
                            <th className="pb-2 font-medium">Pod</th>
                            <th className="pb-2 font-medium">Status</th>
                            <th className="pb-2 font-medium">Ready</th>
                            <th className="pb-2 font-medium">Restarts</th>
                          </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-100">
                          {resourceUsage.pods.map((pod) => (
                            <tr key={pod.name} className="text-gray-700">
                              <td className="py-2 font-mono truncate max-w-[200px]" title={pod.name}>
                                {pod.name}
                              </td>
                              <td className="py-2">
                                <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
                                  pod.status === 'Running' ? 'bg-green-100 text-green-700' :
                                  pod.status === 'Pending' ? 'bg-yellow-100 text-yellow-700' :
                                  'bg-red-100 text-red-700'
                                }`}>
                                  {pod.status}
                                </span>
                              </td>
                              <td className="py-2">{pod.ready ? <CheckCircle className="w-4 h-4 text-green-500" /> : <Clock className="w-4 h-4 text-yellow-500" />}</td>
                              <td className="py-2">{pod.restarts}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </div>
                )}

                {/* Scaling Controls */}
                <div className="border-t pt-4">
                  <h3 className="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-1"><Settings className="w-4 h-4" /> Scale Resources</h3>
                  <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
                    <div>
                      <label className="block text-xs text-gray-500 mb-1">CPU Request</label>
                      <input
                        type="text"
                        value={resourceForm.cpuRequest}
                        onChange={(e) => setResourceForm((f) => ({ ...f, cpuRequest: e.target.value }))}
                        className="input-field text-sm"
                        placeholder="100m"
                      />
                    </div>
                    <div>
                      <label className="block text-xs text-gray-500 mb-1">CPU Limit</label>
                      <input
                        type="text"
                        value={resourceForm.cpuLimit}
                        onChange={(e) => setResourceForm((f) => ({ ...f, cpuLimit: e.target.value }))}
                        className="input-field text-sm"
                        placeholder="500m"
                      />
                    </div>
                    <div>
                      <label className="block text-xs text-gray-500 mb-1">Memory Request</label>
                      <input
                        type="text"
                        value={resourceForm.memoryRequest}
                        onChange={(e) => setResourceForm((f) => ({ ...f, memoryRequest: e.target.value }))}
                        className="input-field text-sm"
                        placeholder="128Mi"
                      />
                    </div>
                    <div>
                      <label className="block text-xs text-gray-500 mb-1">Memory Limit</label>
                      <input
                        type="text"
                        value={resourceForm.memoryLimit}
                        onChange={(e) => setResourceForm((f) => ({ ...f, memoryLimit: e.target.value }))}
                        className="input-field text-sm"
                        placeholder="512Mi"
                      />
                    </div>
                    <div>
                      <label className="block text-xs text-gray-500 mb-1">Replicas</label>
                      <div className="flex items-center gap-2">
                        <button
                          onClick={() => setResourceForm((f) => ({ ...f, replicas: Math.max(1, f.replicas - 1) }))}
                          className="btn-icon w-9 h-9"
                        >
                          −
                        </button>
                        <span className="text-lg font-bold text-gray-800 w-8 text-center">{resourceForm.replicas}</span>
                        <button
                          onClick={() => setResourceForm((f) => ({ ...f, replicas: Math.min(10, f.replicas + 1) }))}
                          className="btn-icon w-9 h-9"
                        >
                          +
                        </button>
                      </div>
                    </div>
                    <div className="flex items-end">
                      <button
                        onClick={() => scaleMutation.mutate(resourceForm)}
                        disabled={scaleMutation.isPending}
                        className="btn-primary text-sm w-full disabled:opacity-50"
                      >
                        {scaleMutation.isPending ? <><Clock className="w-3 h-3 inline animate-spin" /> Applying...</> : <><RefreshCw className="w-3 h-3 inline" /> Apply Changes</>}
                      </button>
                    </div>
                  </div>
                </div>
              </>
            ) : (
              <div className="text-center py-6">
                <p className="text-gray-400 text-sm">
                  {isStopped ? 'Application is stopped. Start it to see resources.' : 'No resource data available yet.'}
                </p>
              </div>
            )}
          </div>
        )}
      </div>

      {/* Logs — Pod & Build */}
      <div className="card">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2"><FileText className="w-5 h-5" /> Logs</h2>
          <div className="flex items-center space-x-3">
            {showLogs && logTab === 'pod' && (
              <span className="text-xs text-gray-400 flex items-center space-x-1">
                <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
                <span>Live (every 3s)</span>
              </span>
            )}
            {showLogs && logTab === 'build' && (
              <span className="text-xs text-gray-400 flex items-center space-x-1">
                <span className="w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
                <span>Auto-refresh (every 5s)</span>
              </span>
            )}
            <button
              onClick={() => setShowLogs(!showLogs)}
              className="btn-secondary text-sm"
            >
              {showLogs ? <><ChevronDown className="w-4 h-4 inline" /> Hide Logs</> : <><FileText className="w-4 h-4 inline" /> Show Logs</>}
            </button>
          </div>
        </div>
        {showLogs && (
          <div className="space-y-3">
            {/* Tab switcher */}
            <div className="flex gap-1 bg-gray-100 rounded-xl p-1">
              <button
                onClick={() => setLogTab('pod')}
                className={`flex-1 px-4 py-2 text-sm font-medium rounded-lg transition-all ${
                  logTab === 'pod'
                    ? 'bg-white text-gray-900 shadow-sm'
                    : 'text-gray-500 hover:text-gray-700'
                }`}
              >
                <Monitor className="w-4 h-4 inline" /> Pod Logs
              </button>
              <button
                onClick={() => setLogTab('build')}
                className={`flex-1 px-4 py-2 text-sm font-medium rounded-lg transition-all ${
                  logTab === 'build'
                    ? 'bg-white text-gray-900 shadow-sm'
                    : 'text-gray-500 hover:text-gray-700'
                }`}
              >
                <Hammer className="w-4 h-4 inline" /> Build Logs
              </button>
            </div>

            {/* Pod logs */}
            {logTab === 'pod' && (
              <pre
                ref={logsEndRef}
                className="bg-gray-900 text-green-400 p-4 rounded-xl text-xs font-mono overflow-x-auto max-h-[500px] overflow-y-auto whitespace-pre-wrap break-words"
              >
                {logsData?.logs || (isRunning ? 'Loading logs...' : isStopped ? 'Application is stopped. Start it to see logs.' : 'Waiting for pod to be ready...')}
              </pre>
            )}

            {/* Build logs */}
            {logTab === 'build' && (
              <div>
                {buildLogsData?.version && (
                  <div className="flex items-center gap-3 mb-2 text-xs text-gray-500">
                    <span><Pin className="w-3 h-3 inline" /> {buildLogsData.version}</span>
                    <span className={`badge ${statusColors[buildLogsData.status] || 'badge-gray'}`}>
                      {buildLogsData.status}
                    </span>
                  </div>
                )}
                <pre className="bg-gray-900 text-blue-300 p-4 rounded-xl text-xs font-mono overflow-x-auto max-h-[500px] overflow-y-auto whitespace-pre-wrap break-words">
                  {buildLogsData?.buildLog || (
                    buildLogsData?.status === 'building'
                      ? 'Build in progress... Logs will appear when complete.'
                      : buildLogsData?.status === 'pending'
                        ? 'Build is pending...'
                        : buildLogsData?.status === 'no_deployment'
                          ? 'No deployments yet. Deploy your app to see build logs.'
                          : 'No build logs available for this deployment.'
                  )}
                </pre>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}