/**
 * Bot Detail/Edit Page
 * 
 * View and edit bot configuration, manage sources, view logs.
 * 
 * Requirements: 1.3, 4.6, 8.2
 */

'use client';

import { useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import { ArrowLeftIcon } from '@/components/Icons';
import { Bot, Play, Pause, Rss, Activity, Settings, Sparkles, Clock, Trash2, Pencil } from 'lucide-react';
import { useToast } from '@/lib/contexts/ToastContext';

export default function BotDetailPage() {
  const params = useParams();
  const router = useRouter();
  const { showToast } = useToast();
  const botId = params.id as string;
  const [bot, setBot] = useState<any>(null);
  const [sources, setSources] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [actionLoading, setActionLoading] = useState(false);
  const [showAddSource, setShowAddSource] = useState(false);
  const [newSource, setNewSource] = useState({
    type: 'rss' as 'rss' | 'reddit' | 'news_api' | 'brave_news',
    url: '',
    subreddit: '',
    apiKey: '',
    // Brave News config
    braveQuery: '',
    braveFreshness: 'pw' as 'pd' | 'pw' | 'pm' | 'py',
    braveCountry: '',
    // News API config
    newsProvider: 'newsapi' as 'newsapi' | 'gnews' | 'newsdata',
    newsQuery: '',
    newsCategory: '',
    newsCountry: '',
    newsLanguage: '',
  });

  useEffect(() => {
    fetchBot();
    fetchSources();
  }, [botId]);

  const fetchBot = async () => {
    try {
      const response = await fetch(`/api/bots/${botId}`);
      if (response.ok) {
        const data = await response.json();
        setBot(data.bot);
      }
    } catch (error) {
      console.error('Failed to fetch bot:', error);
    } finally {
      setLoading(false);
    }
  };

  const fetchSources = async () => {
    try {
      const response = await fetch(`/api/bots/${botId}/sources`);
      if (response.ok) {
        const data = await response.json();
        setSources(data.sources || []);
      }
    } catch (error) {
      console.error('Failed to fetch sources:', error);
    }
  };

  const handleTriggerPost = async () => {
    setActionLoading(true);
    try {
      const response = await fetch(`/api/bots/${botId}/post`, { 
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({}),
      });
      if (response.ok) {
        showToast('Post triggered successfully!', 'success');
        fetchBot();
      } else {
        const data = await response.json();
        showToast(`Failed to trigger post: ${data.error || 'Unknown error'}`, 'error');
      }
    } catch (error) {
      showToast('Failed to trigger post', 'error');
    } finally {
      setActionLoading(false);
    }
  };

  const handleToggleActive = async () => {
    setActionLoading(true);
    try {
      const response = await fetch(`/api/bots/${botId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ isActive: !bot.isActive }),
      });
      if (response.ok) {
        fetchBot();
      }
    } catch (error) {
      console.error('Failed to toggle bot:', error);
    } finally {
      setActionLoading(false);
    }
  };

  const handleAddSource = async () => {
    setActionLoading(true);
    try {
      let url = newSource.url;
      const payload: Record<string, unknown> = {
        type: newSource.type,
        apiKey: newSource.apiKey || undefined,
      };

      // Build URL and config based on type
      if (newSource.type === 'brave_news') {
        if (!newSource.braveQuery || !newSource.apiKey) {
          showToast('Search query and API key are required for Brave News', 'error');
          setActionLoading(false);
          return;
        }
        const braveUrl = new URL('https://api.search.brave.com/res/v1/news/search');
        braveUrl.searchParams.set('q', newSource.braveQuery);
        if (newSource.braveFreshness) braveUrl.searchParams.set('freshness', newSource.braveFreshness);
        if (newSource.braveCountry) braveUrl.searchParams.set('country', newSource.braveCountry);
        url = braveUrl.toString();
        payload.braveNewsConfig = {
          query: newSource.braveQuery,
          freshness: newSource.braveFreshness,
          country: newSource.braveCountry || undefined,
        };
      } else if (newSource.type === 'news_api') {
        if (!newSource.newsQuery || !newSource.apiKey) {
          showToast('Search query and API key are required for News API', 'error');
          setActionLoading(false);
          return;
        }
        let baseUrl: string;
        const params = new URLSearchParams();
        switch (newSource.newsProvider) {
          case 'gnews':
            baseUrl = 'https://gnews.io/api/v4/search';
            params.set('q', newSource.newsQuery);
            if (newSource.newsCountry) params.set('country', newSource.newsCountry);
            if (newSource.newsLanguage) params.set('lang', newSource.newsLanguage);
            if (newSource.newsCategory) params.set('topic', newSource.newsCategory);
            break;
          case 'newsdata':
            baseUrl = 'https://newsdata.io/api/1/news';
            params.set('q', newSource.newsQuery);
            if (newSource.newsCountry) params.set('country', newSource.newsCountry);
            if (newSource.newsLanguage) params.set('language', newSource.newsLanguage);
            if (newSource.newsCategory) params.set('category', newSource.newsCategory);
            break;
          default:
            baseUrl = 'https://newsapi.org/v2/everything';
            params.set('q', newSource.newsQuery);
            if (newSource.newsLanguage) params.set('language', newSource.newsLanguage);
        }
        url = `${baseUrl}?${params.toString()}`;
        payload.newsApiConfig = {
          provider: newSource.newsProvider,
          query: newSource.newsQuery,
          category: newSource.newsCategory || undefined,
          country: newSource.newsCountry || undefined,
          language: newSource.newsLanguage || undefined,
        };
      } else if (newSource.type === 'reddit') {
        payload.subreddit = newSource.subreddit || undefined;
      }

      payload.url = url;

      const response = await fetch(`/api/bots/${botId}/sources`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (response.ok) {
        setShowAddSource(false);
        setNewSource({ 
          type: 'rss', 
          url: '', 
          subreddit: '', 
          apiKey: '',
          braveQuery: '',
          braveFreshness: 'pw',
          braveCountry: '',
          newsProvider: 'newsapi',
          newsQuery: '',
          newsCategory: '',
          newsCountry: '',
          newsLanguage: '',
        });
        fetchSources();
      } else {
        const data = await response.json();
        showToast(`Failed to add source: ${data.error || 'Unknown error'}`, 'error');
      }
    } catch (error) {
      showToast('Failed to add source', 'error');
    } finally {
      setActionLoading(false);
    }
  };

  const handleFetchSource = async (sourceId: string) => {
    setActionLoading(true);
    try {
      const response = await fetch(`/api/bots/${botId}/sources/${sourceId}/fetch`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({}),
      });
      if (response.ok) {
        const data = await response.json();
        showToast(`Fetched ${data.itemsFetched || 0} items successfully!`, 'success');
        fetchSources();
      } else {
        const data = await response.json();
        showToast(`Failed to fetch content: ${data.error || 'Unknown error'}`, 'error');
      }
    } catch (error) {
      showToast('Failed to fetch content', 'error');
    } finally {
      setActionLoading(false);
    }
  };

  if (loading) {
    return (
      <div style={{ maxWidth: '800px', margin: '0 auto', padding: '24px 16px 64px' }}>
        <div style={{ textAlign: 'center', padding: '48px 24px', color: 'var(--foreground-tertiary)' }}>
          Loading...
        </div>
      </div>
    );
  }

  if (!bot) {
    return (
      <div style={{ maxWidth: '800px', margin: '0 auto', padding: '24px 16px 64px' }}>
        <div className="card" style={{ padding: '48px 24px', textAlign: 'center' }}>
          <p style={{ color: 'var(--foreground-tertiary)' }}>Bot not found</p>
          <Link href="/settings/bots" className="btn" style={{ marginTop: '16px' }}>
            Back to Bots
          </Link>
        </div>
      </div>
    );
  }

  const scheduleConfig = typeof bot.scheduleConfig === 'string' 
    ? JSON.parse(bot.scheduleConfig) 
    : bot.scheduleConfig || null;
  const personalityConfig = typeof bot.personalityConfig === 'string'
    ? JSON.parse(bot.personalityConfig)
    : bot.personalityConfig || {};

  return (
    <div style={{ maxWidth: '800px', margin: '0 auto', padding: '24px 16px 64px' }}>
      <header style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '32px' }}>
        <Link href="/settings/bots" style={{ color: 'var(--foreground)' }}>
          <ArrowLeftIcon />
        </Link>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
            <h1 style={{ fontSize: '24px', fontWeight: 700 }}>{bot.name}</h1>
            {bot.autonomousMode && (
              <span style={{ 
                display: 'inline-flex', 
                alignItems: 'center', 
                gap: '4px',
                fontSize: '11px',
                padding: '4px 10px',
                borderRadius: 'var(--radius-full)',
                background: 'var(--accent-muted)',
                color: 'var(--accent)',
              }}>
                <Sparkles size={12} />
                Autonomous
              </span>
            )}
          </div>
          <p style={{ fontSize: '14px', color: 'var(--foreground-tertiary)' }}>
            @{bot.handle}
          </p>
        </div>
        <div style={{ display: 'flex', gap: '8px' }}>
          {bot.isSuspended ? (
            <span className="status-pill suspended">Suspended</span>
          ) : bot.isActive ? (
            <span className="status-pill active">Active</span>
          ) : (
            <span className="status-pill">Inactive</span>
          )}
        </div>
      </header>

      {/* Quick Actions */}
      <div className="card" style={{ padding: '20px', marginBottom: '16px' }}>
        <h2 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}>
          <Play size={18} />
          Quick Actions
        </h2>
        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
          <button
            onClick={handleTriggerPost}
            disabled={actionLoading || bot.isSuspended}
            className="btn btn-primary"
          >
            <Play size={16} />
            Trigger Post
          </button>
          <button
            onClick={handleToggleActive}
            disabled={actionLoading || bot.isSuspended}
            className="btn"
          >
            {bot.isActive ? <Pause size={16} /> : <Play size={16} />}
            {bot.isActive ? 'Deactivate' : 'Activate'}
          </button>
          <Link
            href={`/settings/bots/${botId}/edit`}
            className="btn"
          >
            <Pencil size={16} />
            Edit Bot
          </Link>
        </div>
      </div>

      {/* Bot Info */}
      <div className="card" style={{ padding: '20px', marginBottom: '16px' }}>
        <h2 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}>
          <Bot size={18} />
          Bot Information
        </h2>
        <div style={{ display: 'grid', gap: '12px' }}>
          {bot.bio && (
            <div>
              <div style={{ fontSize: '13px', color: 'var(--foreground-tertiary)', marginBottom: '4px' }}>
                Bio
              </div>
              <div style={{ fontSize: '14px', color: 'var(--foreground-secondary)' }}>
                {bot.bio}
              </div>
            </div>
          )}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '12px' }}>
            <div>
              <div style={{ fontSize: '13px', color: 'var(--foreground-tertiary)', marginBottom: '4px' }}>
                Last Post
              </div>
              <div style={{ fontSize: '14px' }}>
                {bot.lastPostAt ? new Date(bot.lastPostAt).toLocaleString() : 'Never'}
              </div>
            </div>
            <div>
              <div style={{ fontSize: '13px', color: 'var(--foreground-tertiary)', marginBottom: '4px' }}>
                Created
              </div>
              <div style={{ fontSize: '14px' }}>
                {new Date(bot.createdAt).toLocaleDateString()}
              </div>
            </div>
            <div>
              <div style={{ fontSize: '13px', color: 'var(--foreground-tertiary)', marginBottom: '4px' }}>
                LLM Provider
              </div>
              <div style={{ fontSize: '14px' }}>
                {bot.llmProvider} / {bot.llmModel}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Schedule */}
      {bot.autonomousMode && scheduleConfig && (
        <div className="card" style={{ padding: '20px', marginBottom: '16px' }}>
          <h2 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}>
            <Clock size={18} />
            Posting Schedule
          </h2>
          <div style={{ fontSize: '14px', color: 'var(--foreground-secondary)' }}>
            {scheduleConfig.type === 'interval' && scheduleConfig.intervalMinutes
              ? `Posts every ${scheduleConfig.intervalMinutes} minutes`
              : 'Custom schedule configured'}
          </div>
        </div>
      )}

      {/* Personality */}
      <div className="card" style={{ padding: '20px', marginBottom: '16px' }}>
        <h2 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}>
          <Sparkles size={18} />
          Personality
        </h2>
        <div style={{ 
          fontSize: '13px', 
          color: 'var(--foreground-secondary)',
          background: 'var(--background-tertiary)',
          padding: '12px',
          borderRadius: 'var(--radius-md)',
          whiteSpace: 'pre-wrap',
          fontFamily: 'monospace',
        }}>
          {personalityConfig?.systemPrompt || 'No system prompt configured'}
        </div>
      </div>

      {/* Content Sources */}
      <div className="card" style={{ padding: '20px', marginBottom: '16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
          <h2 style={{ fontSize: '16px', fontWeight: 600, display: 'flex', alignItems: 'center', gap: '8px' }}>
            <Rss size={18} />
            Content Sources ({sources.length})
          </h2>
          <button
            onClick={() => setShowAddSource(!showAddSource)}
            className="btn btn-sm btn-primary"
          >
            {showAddSource ? 'Cancel' : '+ Add Source'}
          </button>
        </div>

        {showAddSource && (
          <div className="card" style={{ padding: '16px', marginBottom: '16px', background: 'var(--background-tertiary)' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
              <div>
                <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>
                  Source Type
                </label>
                <select
                  value={newSource.type}
                  onChange={(e) => setNewSource({ ...newSource, type: e.target.value as typeof newSource.type })}
                  className="input"
                >
                  <option value="rss">RSS Feed</option>
                  <option value="reddit">Reddit</option>
                  <option value="brave_news">Brave News Search</option>
                  <option value="news_api">News API (Advanced)</option>
                </select>
              </div>

              {newSource.type === 'rss' && (
                <div>
                  <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>
                    RSS Feed URL
                  </label>
                  <input
                    type="url"
                    value={newSource.url}
                    onChange={(e) => setNewSource({ ...newSource, url: e.target.value })}
                    className="input"
                    placeholder="https://example.com/feed.xml"
                  />
                </div>
              )}

              {newSource.type === 'reddit' && (
                <div>
                  <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>
                    Subreddit
                  </label>
                  <input
                    type="text"
                    value={newSource.subreddit}
                    onChange={(e) => setNewSource({ ...newSource, subreddit: e.target.value, url: `https://reddit.com/r/${e.target.value}` })}
                    className="input"
                    placeholder="technology"
                  />
                </div>
              )}

              {newSource.type === 'brave_news' && (
                <>
                  <div>
                    <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>
                      Search Query
                    </label>
                    <input
                      type="text"
                      value={newSource.braveQuery}
                      onChange={(e) => setNewSource({ ...newSource, braveQuery: e.target.value })}
                      className="input"
                      placeholder="AI technology, climate change, etc."
                    />
                    <p style={{ fontSize: '12px', color: 'var(--foreground-tertiary)', marginTop: '4px' }}>
                      Use quotes for exact phrases, minus to exclude terms
                    </p>
                  </div>
                  <div>
                    <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>
                      Freshness
                    </label>
                    <select
                      value={newSource.braveFreshness}
                      onChange={(e) => setNewSource({ ...newSource, braveFreshness: e.target.value as typeof newSource.braveFreshness })}
                      className="input"
                    >
                      <option value="pd">Last 24 hours</option>
                      <option value="pw">Last 7 days</option>
                      <option value="pm">Last 31 days</option>
                      <option value="py">Last year</option>
                    </select>
                  </div>
                  <div>
                    <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>
                      Country (optional)
                    </label>
                    <select
                      value={newSource.braveCountry}
                      onChange={(e) => setNewSource({ ...newSource, braveCountry: e.target.value })}
                      className="input"
                    >
                      <option value="">All countries</option>
                      <option value="US">United States</option>
                      <option value="GB">United Kingdom</option>
                      <option value="CA">Canada</option>
                      <option value="AU">Australia</option>
                      <option value="DE">Germany</option>
                      <option value="FR">France</option>
                      <option value="JP">Japan</option>
                    </select>
                  </div>
                  <div>
                    <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>
                      Brave API Key
                    </label>
                    <input
                      type="password"
                      value={newSource.apiKey}
                      onChange={(e) => setNewSource({ ...newSource, apiKey: e.target.value })}
                      className="input"
                      placeholder="Your Brave Search API key"
                    />
                    <p style={{ fontSize: '12px', color: 'var(--foreground-tertiary)', marginTop: '4px' }}>
                      Get your API key at <a href="https://brave.com/search/api/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--accent)' }}>brave.com/search/api</a>
                    </p>
                  </div>
                </>
              )}

              {newSource.type === 'news_api' && (
                <>
                  <div>
                    <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>
                      News Provider
                    </label>
                    <select
                      value={newSource.newsProvider}
                      onChange={(e) => setNewSource({ ...newSource, newsProvider: e.target.value as typeof newSource.newsProvider })}
                      className="input"
                    >
                      <option value="newsapi">NewsAPI.org</option>
                      <option value="gnews">GNews.io</option>
                      <option value="newsdata">NewsData.io</option>
                    </select>
                  </div>
                  <div>
                    <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>
                      Search Keywords
                    </label>
                    <input
                      type="text"
                      value={newSource.newsQuery}
                      onChange={(e) => setNewSource({ ...newSource, newsQuery: e.target.value })}
                      className="input"
                      placeholder="technology, AI, startups"
                    />
                  </div>
                  <div>
                    <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>
                      Category (optional)
                    </label>
                    <select
                      value={newSource.newsCategory}
                      onChange={(e) => setNewSource({ ...newSource, newsCategory: e.target.value })}
                      className="input"
                    >
                      <option value="">All categories</option>
                      <option value="technology">Technology</option>
                      <option value="business">Business</option>
                      <option value="science">Science</option>
                      <option value="health">Health</option>
                      <option value="sports">Sports</option>
                      <option value="entertainment">Entertainment</option>
                    </select>
                  </div>
                  <div>
                    <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>
                      Country (optional)
                    </label>
                    <select
                      value={newSource.newsCountry}
                      onChange={(e) => setNewSource({ ...newSource, newsCountry: e.target.value })}
                      className="input"
                    >
                      <option value="">All countries</option>
                      <option value="us">United States</option>
                      <option value="gb">United Kingdom</option>
                      <option value="ca">Canada</option>
                      <option value="au">Australia</option>
                      <option value="de">Germany</option>
                      <option value="fr">France</option>
                    </select>
                  </div>
                  <div>
                    <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>
                      API Key
                    </label>
                    <input
                      type="password"
                      value={newSource.apiKey}
                      onChange={(e) => setNewSource({ ...newSource, apiKey: e.target.value })}
                      className="input"
                      placeholder="Your API key"
                    />
                  </div>
                </>
              )}

              <button
                onClick={handleAddSource}
                disabled={
                  actionLoading || 
                  (newSource.type === 'rss' && !newSource.url) ||
                  (newSource.type === 'reddit' && !newSource.subreddit) ||
                  (newSource.type === 'brave_news' && (!newSource.braveQuery || !newSource.apiKey)) ||
                  (newSource.type === 'news_api' && (!newSource.newsQuery || !newSource.apiKey))
                }
                className="btn btn-primary"
              >
                {actionLoading ? 'Adding...' : 'Add Source'}
              </button>
            </div>
          </div>
        )}

        {sources.length === 0 ? (
          <p style={{ fontSize: '13px', color: 'var(--foreground-tertiary)', textAlign: 'center', padding: '24px 0' }}>
            No content sources configured. Add a source to enable posting.
          </p>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
            {sources.map((source: any) => {
              let displayName = '';
              try {
                if (source.type === 'brave_news') {
                  const urlObj = new URL(source.url);
                  displayName = urlObj.searchParams.get('q') || 'Brave News';
                } else if (source.subreddit) {
                  displayName = source.subreddit;
                } else if (source.url) {
                  displayName = new URL(source.url).hostname;
                } else {
                  displayName = 'Unknown';
                }
              } catch {
                displayName = source.url || 'Unknown';
              }
              
              return (
                <div 
                  key={source.id} 
                  style={{ 
                    padding: '12px',
                    background: 'var(--background-tertiary)',
                    borderRadius: 'var(--radius-md)',
                    border: '1px solid var(--border)',
                  }}
                >
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: '13px', fontWeight: 500, marginBottom: '4px' }}>
                        {source.type === 'brave_news' ? 'BRAVE NEWS' : source.type.toUpperCase()} - {displayName}
                      </div>
                      <div style={{ fontSize: '12px', color: 'var(--foreground-tertiary)' }}>
                        {source.lastFetchAt ? `Last fetched: ${new Date(source.lastFetchAt).toLocaleString()}` : 'Never fetched'}
                        {source.lastError && <span style={{ color: 'var(--error)' }}> • Error: {source.lastError}</span>}
                      </div>
                    </div>
                    <span className={`status-pill ${source.isActive ? 'active' : ''}`}>
                      {source.isActive ? 'Active' : 'Inactive'}
                    </span>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* Danger Zone */}
      <div className="card" style={{ padding: '20px', borderColor: 'var(--error)' }}>
        <h2 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', color: 'var(--error)', display: 'flex', alignItems: 'center', gap: '8px' }}>
          <Trash2 size={18} />
          Danger Zone
        </h2>
        <p style={{ fontSize: '13px', color: 'var(--foreground-secondary)', marginBottom: '12px' }}>
          Deleting a bot is permanent and cannot be undone. All associated data will be removed.
        </p>
        <button
          onClick={() => {
            if (confirm(`Are you sure you want to delete ${bot.name}? This cannot be undone.`)) {
              fetch(`/api/bots/${botId}`, { method: 'DELETE' })
                .then(() => router.push('/settings/bots'))
                .catch(() => showToast('Failed to delete bot', 'error'));
            }
          }}
          className="btn"
          style={{ color: 'var(--error)', borderColor: 'var(--error)' }}
        >
          <Trash2 size={16} />
          Delete Bot
        </button>
      </div>
    </div>
  );
}