import { Component, Show, Accessor, Setter } from 'solid-js';
import { Card } from '@/components/shared/Card';
import { SectionHeader } from '@/components/shared/SectionHeader';
import RefreshCw from 'lucide-solid/icons/refresh-cw';
import CheckCircle from 'lucide-solid/icons/check-circle';
import ArrowRight from 'lucide-solid/icons/arrow-right';
import Package from 'lucide-solid/icons/package';
import Download from 'lucide-solid/icons/download';
import type { UpdateInfo, VersionInfo, UpdatePlan } from '@/api/updates';

interface UpdatesSettingsPanelProps {
  versionInfo: Accessor<VersionInfo | null>;
  updateInfo: Accessor<UpdateInfo | null>;
  checkingForUpdates: Accessor<boolean>;
  updateChannel: Accessor<'stable' | 'rc'>;
  setUpdateChannel: Setter<'stable' | 'rc'>;
  autoUpdateEnabled: Accessor<boolean>;
  setAutoUpdateEnabled: Setter<boolean>;
  autoUpdateCheckInterval: Accessor<number>;
  setAutoUpdateCheckInterval: Setter<number>;
  autoUpdateTime: Accessor<string>;
  setAutoUpdateTime: Setter<string>;
  checkForUpdates: () => Promise<void>;
  setHasUnsavedChanges: Setter<boolean>;
  // Update installation props
  updatePlan: Accessor<UpdatePlan | null>;
  onInstallUpdate: () => void;
  isInstalling: Accessor<boolean>;
}

export const UpdatesSettingsPanel: Component<UpdatesSettingsPanelProps> = (props) => {
  return (
    <div class="space-y-6">
      <Card
        padding="none"
        class="overflow-hidden border border-gray-200 dark:border-gray-700"
        border={false}
      >
        {/* Header */}
        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <div class="flex items-center gap-3">
            <div class="p-2 bg-blue-100 dark:bg-blue-900/40 rounded-lg">
              <RefreshCw class="w-5 h-5 text-blue-600 dark:text-blue-300" strokeWidth={2} />
            </div>
            <SectionHeader
              title="Updates"
              description="Version checking and automatic update configuration"
              size="sm"
              class="flex-1"
            />
          </div>
        </div>

        <div class="p-6 space-y-6">
          <section class="space-y-4">
            <div class="space-y-4">
              {/* Version Status Section */}
              <div class="rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
                {/* Version Grid */}
                <div class={`grid gap-px ${props.updateInfo()?.available ? 'sm:grid-cols-3' : 'sm:grid-cols-2'}`}>
                  {/* Current Version */}
                  <div class="bg-gray-50 dark:bg-gray-800/60 p-4">
                    <div class="flex items-start gap-3">
                      <div class="p-2 bg-blue-100 dark:bg-blue-900/50 rounded-lg">
                        <Package class="w-5 h-5 text-blue-600 dark:text-blue-400" />
                      </div>
                      <div class="flex-1 min-w-0">
                        <p class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                          Current Version
                        </p>
                        <p class="mt-1 text-lg font-bold text-gray-900 dark:text-gray-100 truncate">
                          {props.versionInfo()?.version || 'Loading...'}
                        </p>
                        <div class="mt-1.5 flex flex-wrap items-center gap-1.5">
                          <Show when={props.versionInfo()?.isDevelopment}>
                            <span class="inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300">
                              Development
                            </span>
                          </Show>
                          <Show when={props.versionInfo()?.isDocker}>
                            <span class="inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
                              Docker
                            </span>
                          </Show>
                          <Show when={props.versionInfo()?.isSourceBuild}>
                            <span class="inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded-full bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300">
                              Source
                            </span>
                          </Show>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Update Status / Arrow */}
                  <Show when={props.updateInfo()?.available}>
                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/30 dark:to-emerald-900/30 p-4 flex items-center justify-center">
                      <div class="flex flex-col items-center gap-1.5">
                        <div class="flex items-center gap-2 text-green-600 dark:text-green-400">
                          <ArrowRight class="w-5 h-5" />
                        </div>
                        <span class="text-xs font-semibold text-green-700 dark:text-green-300 uppercase tracking-wide">
                          Update Ready
                        </span>
                      </div>
                    </div>
                  </Show>

                  {/* Latest Version / Status */}
                  <div class={`p-4 ${props.updateInfo()?.available
                    ? 'bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20'
                    : 'bg-gray-50 dark:bg-gray-800/60'
                    }`}>
                    <div class="flex items-start gap-3">
                      <div class={`p-2 rounded-lg ${props.updateInfo()?.available
                        ? 'bg-green-100 dark:bg-green-900/50'
                        : 'bg-gray-100 dark:bg-gray-700'
                        }`}>
                        <Show when={props.updateInfo()?.available} fallback={
                          <CheckCircle class="w-5 h-5 text-gray-500 dark:text-gray-400" />
                        }>
                          <CheckCircle class="w-5 h-5 text-green-600 dark:text-green-400" />
                        </Show>
                      </div>
                      <div class="flex-1 min-w-0">
                        <p class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                          {props.updateInfo()?.available ? 'Available' : 'Status'}
                        </p>
                        <Show when={props.updateInfo()?.available} fallback={
                          <p class="mt-1 text-lg font-bold text-gray-900 dark:text-gray-100">
                            Up to date
                          </p>
                        }>
                          <p class="mt-1 text-lg font-bold text-green-700 dark:text-green-300">
                            {props.updateInfo()?.latestVersion}
                          </p>
                          <Show when={props.updateInfo()?.releaseDate}>
                            <p class="mt-0.5 text-xs text-green-600 dark:text-green-400">
                              Released {new Date(props.updateInfo()!.releaseDate).toLocaleDateString()}
                            </p>
                          </Show>
                        </Show>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Check for updates button */}
                <div class="bg-white dark:bg-gray-900/50 border-t border-gray-200 dark:border-gray-700 px-4 py-3 flex items-center justify-between">
                  <p class="text-xs text-gray-500 dark:text-gray-400">
                    <Show when={props.autoUpdateEnabled()}>
                      Auto-check enabled
                    </Show>
                    <Show when={!props.autoUpdateEnabled()}>
                      Manual checks only
                    </Show>
                  </p>
                  <button
                    type="button"
                    onClick={props.checkForUpdates}
                    disabled={
                      props.checkingForUpdates() ||
                      props.versionInfo()?.isDocker ||
                      props.versionInfo()?.isSourceBuild
                    }
                    class={`px-4 py-2 text-sm rounded-lg transition-colors flex items-center gap-2 ${props.versionInfo()?.isDocker || props.versionInfo()?.isSourceBuild
                      ? 'bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500 cursor-not-allowed'
                      : 'bg-blue-600 text-white hover:bg-blue-700'
                      }`}
                  >
                    {props.checkingForUpdates() ? (
                      <>
                        <div class="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
                        Checking...
                      </>
                    ) : (
                      <>
                        <RefreshCw class="w-4 h-4" />
                        Check Now
                      </>
                    )}
                  </button>
                </div>
              </div>

              {/* Docker installation notice */}
              <Show when={props.versionInfo()?.isDocker && !props.updateInfo()?.available}>
                <div class="p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                  <p class="text-xs text-blue-800 dark:text-blue-200">
                    <strong>Docker Installation:</strong> Updates are managed through Docker. Pull
                    the latest image to update.
                  </p>
                </div>
              </Show>

              {/* Source build notice */}
              <Show when={props.versionInfo()?.isSourceBuild}>
                <div class="p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                  <p class="text-xs text-blue-800 dark:text-blue-200">
                    <strong>Built from source:</strong> Pull the latest code from git and rebuild to
                    update.
                  </p>
                </div>
              </Show>

              {/* Warning message */}
              <Show when={Boolean(props.updateInfo()?.warning)}>
                <div class="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg">
                  <p class="text-xs text-amber-800 dark:text-amber-200">
                    {props.updateInfo()?.warning}
                  </p>
                </div>
              </Show>

              {/* Update available */}
              <Show when={props.updateInfo()?.available}>
                <div class="rounded-xl border border-green-200 dark:border-green-700 overflow-hidden bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/10">
                  {/* Header */}
                  <div class="px-5 py-4 border-b border-green-200 dark:border-green-800/50 bg-gradient-to-r from-green-100/80 to-emerald-100/50 dark:from-green-900/40 dark:to-emerald-900/30">
                    <div class="flex items-center justify-between gap-3">
                      <div class="flex items-center gap-3">
                        <div class="p-2 bg-gradient-to-br from-green-500 to-emerald-600 rounded-lg shadow-lg shadow-green-500/20">
                          <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                          </svg>
                        </div>
                        <div>
                          <h4 class="text-base font-semibold text-green-900 dark:text-green-100">
                            Update Available
                          </h4>
                          <p class="text-xs text-green-700 dark:text-green-300">
                            Version {props.updateInfo()?.latestVersion} is ready to install
                          </p>
                        </div>
                      </div>

                      {/* Automated Install Button */}
                      <Show when={props.updatePlan()?.canAutoUpdate}>
                        <button
                          type="button"
                          onClick={props.onInstallUpdate}
                          disabled={props.isInstalling()}
                          class={`px-4 py-2.5 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${props.isInstalling()
                              ? 'bg-green-400 dark:bg-green-600 text-white cursor-not-allowed'
                              : 'bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white shadow-lg shadow-green-500/25 hover:shadow-green-500/40'
                            }`}
                        >
                          <Show when={props.isInstalling()} fallback={
                            <>
                              <Download class="w-4 h-4" />
                              Install Update
                            </>
                          }>
                            <div class="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
                            Installing...
                          </Show>
                        </button>
                      </Show>
                    </div>
                  </div>

                  {/* Installation Steps */}
                  <div class="p-5 space-y-4">
                    {/* Manual Steps Header */}
                    <Show when={!props.updatePlan()?.canAutoUpdate}>
                      <div class="text-sm font-medium text-green-800 dark:text-green-200 mb-3">
                        Follow these steps to update manually:
                      </div>
                    </Show>

                    <Show when={props.updatePlan()?.canAutoUpdate}>
                      <div class="text-sm text-green-700 dark:text-green-300 mb-3">
                        Click "Install Update" above for automatic installation, or update manually:
                      </div>
                    </Show>

                    {/* ProxmoxVE LXC Installation */}
                    <Show when={props.versionInfo()?.deploymentType === 'proxmoxve'}>
                      <div class="space-y-3">
                        <div class="flex items-center gap-2 text-sm font-medium text-green-800 dark:text-green-200">
                          <span class="flex items-center justify-center w-6 h-6 rounded-full bg-green-200 dark:bg-green-800 text-xs font-bold text-green-700 dark:text-green-300">1</span>
                          Open your Pulse LXC console
                        </div>
                        <div class="flex items-center gap-2 text-sm font-medium text-green-800 dark:text-green-200">
                          <span class="flex items-center justify-center w-6 h-6 rounded-full bg-green-200 dark:bg-green-800 text-xs font-bold text-green-700 dark:text-green-300">2</span>
                          Run the update command:
                        </div>
                        <div class="ml-8 relative group">
                          <code class="block p-3 bg-gray-900 dark:bg-gray-950 rounded-lg text-sm font-mono text-green-400 border border-gray-700">
                            update
                          </code>
                          <button
                            type="button"
                            onClick={() => navigator.clipboard.writeText('update')}
                            class="absolute top-2 right-2 p-1.5 rounded bg-gray-700 hover:bg-gray-600 text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity"
                            title="Copy to clipboard"
                          >
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                            </svg>
                          </button>
                        </div>
                        <p class="ml-8 text-xs text-green-600 dark:text-green-400">
                          The script will automatically download and install the latest version.
                        </p>
                      </div>
                    </Show>

                    {/* Docker Installation */}
                    <Show when={props.versionInfo()?.deploymentType === 'docker' || (!props.versionInfo()?.deploymentType && props.versionInfo()?.isDocker)}>
                      <div class="space-y-3">
                        <div class="flex items-center gap-2 text-sm font-medium text-green-800 dark:text-green-200">
                          <span class="flex items-center justify-center w-6 h-6 rounded-full bg-green-200 dark:bg-green-800 text-xs font-bold text-green-700 dark:text-green-300">1</span>
                          Pull the latest image
                        </div>
                        <div class="ml-8 relative group">
                          <code class="block p-3 bg-gray-900 dark:bg-gray-950 rounded-lg text-sm font-mono text-green-400 border border-gray-700">
                            docker pull rcourtman/pulse:latest
                          </code>
                          <button
                            type="button"
                            onClick={() => navigator.clipboard.writeText('docker pull rcourtman/pulse:latest')}
                            class="absolute top-2 right-2 p-1.5 rounded bg-gray-700 hover:bg-gray-600 text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity"
                            title="Copy to clipboard"
                          >
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                            </svg>
                          </button>
                        </div>

                        <div class="flex items-center gap-2 text-sm font-medium text-green-800 dark:text-green-200">
                          <span class="flex items-center justify-center w-6 h-6 rounded-full bg-green-200 dark:bg-green-800 text-xs font-bold text-green-700 dark:text-green-300">2</span>
                          Restart the container
                        </div>
                        <div class="ml-8 relative group">
                          <code class="block p-3 bg-gray-900 dark:bg-gray-950 rounded-lg text-sm font-mono text-green-400 border border-gray-700">
                            docker restart pulse
                          </code>
                          <button
                            type="button"
                            onClick={() => navigator.clipboard.writeText('docker restart pulse')}
                            class="absolute top-2 right-2 p-1.5 rounded bg-gray-700 hover:bg-gray-600 text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity"
                            title="Copy to clipboard"
                          >
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                            </svg>
                          </button>
                        </div>
                        <p class="ml-8 text-xs text-green-600 dark:text-green-400">
                          Or use Docker Compose: <code class="px-1.5 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-xs">docker-compose pull && docker-compose up -d</code>
                        </p>
                      </div>
                    </Show>

                    {/* Systemd/Manual Installation */}
                    <Show when={props.versionInfo()?.deploymentType === 'systemd' || props.versionInfo()?.deploymentType === 'manual'}>
                      <div class="space-y-3">
                        <div class="flex items-center gap-2 text-sm font-medium text-green-800 dark:text-green-200">
                          <span class="flex items-center justify-center w-6 h-6 rounded-full bg-green-200 dark:bg-green-800 text-xs font-bold text-green-700 dark:text-green-300">1</span>
                          Stop the service
                        </div>
                        <div class="ml-8 relative group">
                          <code class="block p-3 bg-gray-900 dark:bg-gray-950 rounded-lg text-sm font-mono text-green-400 border border-gray-700">
                            sudo systemctl stop pulse
                          </code>
                          <button
                            type="button"
                            onClick={() => navigator.clipboard.writeText('sudo systemctl stop pulse')}
                            class="absolute top-2 right-2 p-1.5 rounded bg-gray-700 hover:bg-gray-600 text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity"
                            title="Copy to clipboard"
                          >
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                            </svg>
                          </button>
                        </div>

                        <div class="flex items-center gap-2 text-sm font-medium text-green-800 dark:text-green-200">
                          <span class="flex items-center justify-center w-6 h-6 rounded-full bg-green-200 dark:bg-green-800 text-xs font-bold text-green-700 dark:text-green-300">2</span>
                          Download and extract the new version
                        </div>
                        <div class="ml-8 relative group">
                          <code class="block p-3 bg-gray-900 dark:bg-gray-950 rounded-lg text-sm font-mono text-green-400 border border-gray-700 whitespace-pre-wrap break-all">
                            {`curl -LO https://github.com/rcourtman/Pulse/releases/download/${props.updateInfo()?.latestVersion}/pulse-${props.updateInfo()?.latestVersion}-linux-amd64.tar.gz
sudo tar -xzf pulse-${props.updateInfo()?.latestVersion}-linux-amd64.tar.gz -C /usr/local/bin pulse`}
                          </code>
                          <button
                            type="button"
                            onClick={() => navigator.clipboard.writeText(`curl -LO https://github.com/rcourtman/Pulse/releases/download/${props.updateInfo()?.latestVersion}/pulse-${props.updateInfo()?.latestVersion}-linux-amd64.tar.gz\nsudo tar -xzf pulse-${props.updateInfo()?.latestVersion}-linux-amd64.tar.gz -C /usr/local/bin pulse`)}
                            class="absolute top-2 right-2 p-1.5 rounded bg-gray-700 hover:bg-gray-600 text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity"
                            title="Copy to clipboard"
                          >
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                            </svg>
                          </button>
                        </div>

                        <div class="flex items-center gap-2 text-sm font-medium text-green-800 dark:text-green-200">
                          <span class="flex items-center justify-center w-6 h-6 rounded-full bg-green-200 dark:bg-green-800 text-xs font-bold text-green-700 dark:text-green-300">3</span>
                          Start the service
                        </div>
                        <div class="ml-8 relative group">
                          <code class="block p-3 bg-gray-900 dark:bg-gray-950 rounded-lg text-sm font-mono text-green-400 border border-gray-700">
                            sudo systemctl start pulse
                          </code>
                          <button
                            type="button"
                            onClick={() => navigator.clipboard.writeText('sudo systemctl start pulse')}
                            class="absolute top-2 right-2 p-1.5 rounded bg-gray-700 hover:bg-gray-600 text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity"
                            title="Copy to clipboard"
                          >
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </Show>

                    {/* Development Installation */}
                    <Show when={props.versionInfo()?.deploymentType === 'development'}>
                      <div class="space-y-3">
                        <div class="flex items-center gap-2 text-sm font-medium text-green-800 dark:text-green-200">
                          <span class="flex items-center justify-center w-6 h-6 rounded-full bg-green-200 dark:bg-green-800 text-xs font-bold text-green-700 dark:text-green-300">1</span>
                          Pull the latest changes
                        </div>
                        <div class="ml-8 relative group">
                          <code class="block p-3 bg-gray-900 dark:bg-gray-950 rounded-lg text-sm font-mono text-green-400 border border-gray-700">
                            git pull origin main
                          </code>
                          <button
                            type="button"
                            onClick={() => navigator.clipboard.writeText('git pull origin main')}
                            class="absolute top-2 right-2 p-1.5 rounded bg-gray-700 hover:bg-gray-600 text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity"
                            title="Copy to clipboard"
                          >
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                            </svg>
                          </button>
                        </div>

                        <div class="flex items-center gap-2 text-sm font-medium text-green-800 dark:text-green-200">
                          <span class="flex items-center justify-center w-6 h-6 rounded-full bg-green-200 dark:bg-green-800 text-xs font-bold text-green-700 dark:text-green-300">2</span>
                          Rebuild and restart
                        </div>
                        <div class="ml-8 relative group">
                          <code class="block p-3 bg-gray-900 dark:bg-gray-950 rounded-lg text-sm font-mono text-green-400 border border-gray-700">
                            make build && make run
                          </code>
                          <button
                            type="button"
                            onClick={() => navigator.clipboard.writeText('make build && make run')}
                            class="absolute top-2 right-2 p-1.5 rounded bg-gray-700 hover:bg-gray-600 text-gray-300 opacity-0 group-hover:opacity-100 transition-opacity"
                            title="Copy to clipboard"
                          >
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </Show>
                  </div>

                  {/* Release notes footer */}
                  <Show when={props.updateInfo()?.releaseNotes}>
                    <div class="px-5 py-3 border-t border-green-200 dark:border-green-800/50 bg-white/50 dark:bg-gray-900/30">
                      <details class="group">
                        <summary class="flex items-center gap-2 text-sm font-medium text-green-700 dark:text-green-300 cursor-pointer hover:text-green-800 dark:hover:text-green-200 transition-colors">
                          <svg class="w-4 h-4 transition-transform group-open:rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                          </svg>
                          View Release Notes
                        </summary>
                        <pre class="mt-3 p-4 text-xs text-gray-700 dark:text-gray-300 whitespace-pre-wrap font-mono bg-gray-100 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 max-h-64 overflow-y-auto">
                          {props.updateInfo()?.releaseNotes}
                        </pre>
                      </details>
                    </div>
                  </Show>
                </div>
              </Show>

              {/* Update settings */}
              <div class="border-t border-gray-200 dark:border-gray-700 pt-6 space-y-5">
                <h4 class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                  Update Preferences
                </h4>

                {/* Update Channel */}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  <button
                    type="button"
                    onClick={() => {
                      props.setUpdateChannel('stable');
                      props.setHasUnsavedChanges(true);
                    }}
                    disabled={props.versionInfo()?.isDocker}
                    class={`p-4 rounded-xl border-2 transition-all text-left disabled:opacity-50 disabled:cursor-not-allowed ${props.updateChannel() === 'stable'
                      ? 'border-green-500 bg-green-50 dark:bg-green-900/20'
                      : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
                      }`}
                  >
                    <div class="flex items-center gap-3">
                      <div class={`p-2 rounded-lg ${props.updateChannel() === 'stable'
                        ? 'bg-green-100 dark:bg-green-900/40'
                        : 'bg-gray-100 dark:bg-gray-800'
                        }`}>
                        <svg class={`w-5 h-5 ${props.updateChannel() === 'stable'
                          ? 'text-green-600 dark:text-green-400'
                          : 'text-gray-500 dark:text-gray-400'
                          }`} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                        </svg>
                      </div>
                      <div>
                        <p class={`text-sm font-semibold ${props.updateChannel() === 'stable'
                          ? 'text-green-900 dark:text-green-100'
                          : 'text-gray-900 dark:text-gray-100'
                          }`}>Stable</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">
                          Production-ready releases
                        </p>
                      </div>
                    </div>
                  </button>

                  <button
                    type="button"
                    onClick={() => {
                      props.setUpdateChannel('rc');
                      props.setHasUnsavedChanges(true);
                    }}
                    disabled={props.versionInfo()?.isDocker}
                    class={`p-4 rounded-xl border-2 transition-all text-left disabled:opacity-50 disabled:cursor-not-allowed ${props.updateChannel() === 'rc'
                      ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/20'
                      : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
                      }`}
                  >
                    <div class="flex items-center gap-3">
                      <div class={`p-2 rounded-lg ${props.updateChannel() === 'rc'
                        ? 'bg-purple-100 dark:bg-purple-900/40'
                        : 'bg-gray-100 dark:bg-gray-800'
                        }`}>
                        <svg class={`w-5 h-5 ${props.updateChannel() === 'rc'
                          ? 'text-purple-600 dark:text-purple-400'
                          : 'text-gray-500 dark:text-gray-400'
                          }`} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                        </svg>
                      </div>
                      <div>
                        <p class={`text-sm font-semibold ${props.updateChannel() === 'rc'
                          ? 'text-purple-900 dark:text-purple-100'
                          : 'text-gray-900 dark:text-gray-100'
                          }`}>Release Candidate</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">
                          Preview upcoming features
                        </p>
                      </div>
                    </div>
                  </button>
                </div>

                {/* Auto Update Toggle */}
                <div class="p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-800/30">
                  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <div class="flex items-center gap-3">
                      <div class="p-2 bg-blue-100 dark:bg-blue-900/40 rounded-lg">
                        <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                      </div>
                      <div>
                        <label class="text-sm font-medium text-gray-900 dark:text-gray-100">
                          Automatic Update Checks
                        </label>
                        <p class="text-xs text-gray-600 dark:text-gray-400">
                          Periodically check for new versions (installation is always manual)
                        </p>
                      </div>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                      <input
                        type="checkbox"
                        checked={props.autoUpdateEnabled()}
                        onChange={(e) => {
                          props.setAutoUpdateEnabled(e.currentTarget.checked);
                          props.setHasUnsavedChanges(true);
                        }}
                        disabled={props.versionInfo()?.isDocker}
                        class="sr-only peer"
                      />
                      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 peer-disabled:opacity-50"></div>
                    </label>
                  </div>

                  {/* Auto update options (shown when enabled) */}
                  <Show when={props.autoUpdateEnabled()}>
                    <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-1 sm:grid-cols-2 gap-4">
                      {/* Check Interval */}
                      <div class="space-y-2">
                        <label class="text-xs font-medium text-gray-700 dark:text-gray-300">
                          Check Interval
                        </label>
                        <select
                          value={props.autoUpdateCheckInterval()}
                          onChange={(e) => {
                            props.setAutoUpdateCheckInterval(parseInt(e.currentTarget.value));
                            props.setHasUnsavedChanges(true);
                          }}
                          class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800"
                        >
                          <option value="6">Every 6 hours</option>
                          <option value="12">Every 12 hours</option>
                          <option value="24">Daily</option>
                          <option value="168">Weekly</option>
                        </select>
                      </div>

                      {/* Check Time */}
                      <div class="space-y-2">
                        <label class="text-xs font-medium text-gray-700 dark:text-gray-300">
                          Preferred Time
                        </label>
                        <input
                          type="time"
                          value={props.autoUpdateTime()}
                          onChange={(e) => {
                            props.setAutoUpdateTime(e.currentTarget.value);
                            props.setHasUnsavedChanges(true);
                          }}
                          class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800"
                        />
                      </div>
                    </div>
                  </Show>
                </div>
              </div>
            </div>
          </section>
        </div>
      </Card>
    </div>
  );
};
