import { createResource, createSignal, Show, For, createEffect } from 'solid-js';
import { 
  BookOpen, Plus, Search, Edit2, Trash2, CheckCircle, 
  Clock, User, ChevronRight, FileText, LayoutGrid, List,
  Save, X, Globe, Lock, AlertCircle
} from 'lucide-solid';
import { saveRuntimeConfig, getRuntimeConfig } from '~/lib/runtime/storage';
import { RuntimeKBConfig, RuntimeKBArticle } from '~/lib/runtime/types';

const CATEGORIES = [
  'General', 'Account & Profiles', 'Lead System', 'Credits & Payments', 
  'Verifications', 'Security', 'Policies', 'Troubleshooting'
];

async function loadKBArticles(): Promise<RuntimeKBConfig> {
  const config = await getRuntimeConfig<RuntimeKBConfig>('knowledge_base', 'GLOBAL_KB');
  return config?.payload || { articles: [] };
}

export default function KnowledgeBasePage() {
  const [kbData, { refetch }] = createResource(loadKBArticles);
  const [view, setView] = createSignal<'list' | 'editor'>('list');
  const [searchQuery, setSearchQuery] = createSignal('');
  const [selectedCategory, setSelectedCategory] = createSignal('All');
  
  // Editor state
  const [editingArticle, setEditingArticle] = createSignal<Partial<RuntimeKBArticle> | null>(null);
  const [saving, setSaving] = createSignal(false);

  const filteredArticles = () => {
    const articles = kbData()?.articles || [];
    return articles.filter(a => {
      const matchesSearch = a.title.toLowerCase().includes(searchQuery().toLowerCase()) || 
                          a.content.toLowerCase().includes(searchQuery().toLowerCase());
      const matchesCategory = selectedCategory() === 'All' || a.category === selectedCategory();
      return matchesSearch && matchesCategory;
    });
  };

  const handleEdit = (article: RuntimeKBArticle) => {
    setEditingArticle({ ...article });
    setView('editor');
  };

  const handleCreate = () => {
    setEditingArticle({
      id: `kb-${Date.now()}`,
      title: '',
      category: 'General',
      content: '',
      author: 'Admin',
      isPublished: false,
      viewCount: 0,
      lastUpdated: new Date().toISOString()
    });
    setView('editor');
  };

  const handleSave = async () => {
    const article = editingArticle();
    if (!article || !article.title || !article.content) return;

    setSaving(true);
    try {
      const currentArticles = kbData()?.articles || [];
      const index = currentArticles.findIndex(a => a.id === article.id);
      
      const updatedArticle = {
        ...article,
        lastUpdated: new Date().toISOString()
      } as RuntimeKBArticle;

      let newArticles = [...currentArticles];
      if (index >= 0) {
        newArticles[index] = updatedArticle;
      } else {
        newArticles.unshift(updatedArticle);
      }

      await saveRuntimeConfig('knowledge_base', 'GLOBAL_KB', { articles: newArticles }, 'published');
      await refetch();
      setView('list');
      setEditingArticle(null);
    } catch (err) {
      console.error('Failed to save article:', err);
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (id: string) => {
    if (!confirm('Are you sure you want to delete this article?')) return;
    
    try {
      const currentArticles = kbData()?.articles || [];
      const newArticles = currentArticles.filter(a => a.id !== id);
      await saveRuntimeConfig('knowledge_base', 'GLOBAL_KB', { articles: newArticles }, 'published');
      await refetch();
    } catch (err) {
      console.error('Failed to delete article:', err);
    }
  };

  const seedArticles = async () => {
    if (!confirm('This will seed 40 platform articles. Continue?')) return;
    
    setSaving(true);
    try {
      const articles: RuntimeKBArticle[] = [];
      
      // Generation logic for 40 articles
      const articleTemplates = [
        { category: 'Verifications', topics: ['Business Approval', 'Identity Verification', 'Media Verification', 'Verification Timeline', 'Common Rejection Reasons'] },
        { category: 'Lead System', topics: ['How to Find Leads', 'Response Quality', 'Budget Matching', 'Unlocking Contacts', 'Lead Expiry'] },
        { category: 'Credits & Payments', topics: ['What are Tracecoins', 'Purchasing Plans', 'Refund Policy', 'Tax Invoices', 'Payment Failures'] },
        { category: 'Account & Profiles', topics: ['Portfolio Best Practices', 'Service Switching', 'Subscription Settings', 'Privacy Control', 'Profile URL Customization'] },
        { category: 'Security', topics: ['Password Recovery', '2FA Setup', 'Scam Prevention', 'Data Privacy GDPR', 'Account Recovery'] },
        { category: 'Troubleshooting', topics: ['App Performance', 'Notification Settings', 'Browser Compatibility', 'Image Upload Issues', 'Logout Problems'] },
        { category: 'Policies', topics: ['Terms of Service', 'Privacy Policy', 'Cancellation Policy', 'Refund Terms', 'Platform Guidelines'] },
        { category: 'General', topics: ['Welcome Guide', 'Mastering the Dashboard', 'Referral Program', 'Support Channels', 'App Updates'] },
      ];

      articleTemplates.forEach(t => {
        t.topics.forEach((topic, i) => {
          articles.push({
            id: `kb-seed-${t.category.toLowerCase().replace(/\s/g, '-')}-${i}`,
            title: topic,
            category: t.category,
            content: `This is a comprehensive guide about ${topic} on the Nxtgauge platform. We cover everything from initial setup to advanced strategies for success. 

### Key Highlights:
1. Understanding the fundamentals of ${topic}.
2. Step-by-step implementation guide.
3. Troubleshooting common roadblocks.
4. Professional tips for maximizing your business results.

Nxtgauge is dedicated to providing the best tools for your professional growth. Check back frequently for updates on this guide.`,
            author: 'System Architect',
            isPublished: true,
            viewCount: Math.floor(Math.random() * 500) + 100,
            lastUpdated: new Date().toISOString()
          });
        });
      });

      await saveRuntimeConfig('knowledge_base', 'GLOBAL_KB', { articles }, 'published');
      await refetch();
      alert('40 articles seeded successfully!');
    } catch (err) {
      console.error('Seeding failed:', err);
    } finally {
      setSaving(false);
    }
  };

  return (
    <div class="flex flex-col -mx-6 -mt-6 min-h-full bg-[#F8FAFC]">
      <div class="bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-center">
        <div>
          <h1 class="text-xl font-bold text-[#0F172A] flex items-center gap-2">
            <BookOpen size={20} class="text-[#FF5E13]" />
            Knowledge Base Management
          </h1>
          <p class="text-sm text-gray-500 mt-0.5">Manage help articles and runtime documentation.</p>
        </div>
        <div class="flex gap-2">
          <button 
            onClick={seedArticles}
            class="px-4 py-2 text-sm font-semibold text-[#64748B] hover:bg-gray-100 rounded-lg border border-gray-200 transition-all flex items-center gap-2"
          >
            <AlertCircle size={16} /> Seed 40 Articles
          </button>
          <button 
            onClick={handleCreate}
            class="px-4 py-2 text-sm font-semibold text-white bg-[#FF5E13] hover:bg-[#E54D00] rounded-lg shadow-sm transition-all flex items-center gap-2"
          >
            <Plus size={16} /> New Article
          </button>
        </div>
      </div>

      <Show when={view() === 'list'} fallback={
        <div class="p-6 max-w-4xl mx-auto w-full">
          <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
            <div class="p-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
              <h2 class="font-bold text-gray-800">{editingArticle()?.id ? 'Edit' : 'Create'} Article</h2>
              <button onClick={() => setView('list')} class="text-gray-400 hover:text-gray-600"><X size={20}/></button>
            </div>
            <div class="p-6 space-y-4">
              <div>
                <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Title</label>
                <input 
                  type="text" 
                  value={editingArticle()?.title || ''} 
                  onInput={(e) => setEditingArticle(p => ({ ...p!, title: e.currentTarget.value }))}
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#FF5E13] focus:border-[#FF5E13] outline-none"
                  placeholder="Article Title"
                />
              </div>
              <div class="grid grid-cols-2 gap-4">
                <div>
                  <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Category</label>
                  <select 
                    value={editingArticle()?.category || 'General'} 
                    onChange={(e) => setEditingArticle(p => ({ ...p!, category: e.currentTarget.value }))}
                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#FF5E13] outline-none"
                  >
                    <For each={CATEGORIES}>{cat => <option value={cat}>{cat}</option>}</For>
                  </select>
                </div>
                <div>
                  <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Status</label>
                  <label class="flex items-center gap-2 py-2 cursor-pointer">
                    <input 
                      type="checkbox" 
                      checked={editingArticle()?.isPublished} 
                      onChange={(e) => setEditingArticle(p => ({ ...p!, isPublished: e.currentTarget.checked }))}
                    />
                    <span class="text-sm font-medium text-gray-700">Published</span>
                  </label>
                </div>
              </div>
              <div>
                <label class="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Content (Markdown Supported)</label>
                <textarea 
                  rows={15}
                  value={editingArticle()?.content || ''} 
                  onInput={(e) => setEditingArticle(p => ({ ...p!, content: e.currentTarget.value }))}
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#FF5E13] outline-none font-mono text-sm leading-relaxed"
                  placeholder="Article content..."
                />
              </div>
            </div>
            <div class="p-4 border-t border-gray-200 bg-gray-50 flex justify-end gap-3">
              <button 
                onClick={() => setView('list')}
                class="px-4 py-2 text-sm font-bold text-gray-600 hover:text-gray-800 transition-all"
              >
                Cancel
              </button>
              <button 
                onClick={handleSave}
                disabled={saving()}
                class="px-6 py-2 text-sm font-bold text-white bg-[#0F172A] hover:bg-[#1E293B] rounded-lg shadow-sm transition-all flex items-center gap-2"
              >
                <Save size={16} /> 
                {saving() ? 'Saving...' : 'Save Article'}
              </button>
            </div>
          </div>
        </div>
      }>
        <div class="px-6 py-4 flex flex-wrap gap-4 items-center justify-between border-b border-gray-200 bg-white">
          <div class="flex gap-2">
            <button 
              onClick={() => setSelectedCategory('All')}
              class={`px-3 py-1.5 rounded-lg text-sm font-bold transition-all ${selectedCategory() === 'All' ? 'bg-[#FF5E13] text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
            >
              All
            </button>
            <For each={CATEGORIES}>{(cat) => (
              <button 
                onClick={() => setSelectedCategory(cat)}
                class={`px-3 py-1.5 rounded-lg text-sm font-bold transition-all ${selectedCategory() === cat ? 'bg-[#FF5E13] text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
              >
                {cat}
              </button>
            )}</For>
          </div>
          <div class="relative w-full max-w-md">
            <Search size={18} class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
            <input 
              type="text" 
              placeholder="Search articles..." 
              value={searchQuery()}
              onInput={(e) => setSearchQuery(e.currentTarget.value)}
              class="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-[#FF5E13] focus:border-[#FF5E13] outline-none"
            />
          </div>
        </div>

        <div class="p-6">
          <Show when={kbData.loading}>
            <div class="flex flex-col items-center justify-center py-20 text-gray-400">
              <Clock size={40} class="animate-spin mb-4" />
              <p>Loading Knowledge Base...</p>
            </div>
          </Show>

          <Show when={!kbData.loading && filteredArticles().length === 0}>
             <div class="flex flex-col items-center justify-center py-20 text-gray-400">
              <AlertCircle size={40} class="mb-4" />
              <p>No articles found. Try seeding data or adjusting filters.</p>
            </div>
          </Show>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <For each={filteredArticles()}>{(article) => (
              <div class="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition-all group overflow-hidden">
                <div class="p-5 border-b border-gray-100">
                  <div class="flex justify-between items-start mb-2">
                    <span class="px-2 py-0.5 rounded bg-gray-100 text-[10px] font-bold text-gray-500 uppercase tracking-wider">
                      {article.category}
                    </span>
                    <Show when={article.isPublished} fallback={<span class="text-[10px] font-bold text-amber-600 bg-amber-50 px-2 py-0.5 rounded">DRAFT</span>}>
                      <span class="text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded flex items-center gap-1">
                        <CheckCircle size={10} /> PUBLISHED
                      </span>
                    </Show>
                  </div>
                  <h3 class="font-bold text-[#0F172A] text-lg leading-tight mb-2 group-hover:text-[#FF5E13] transition-colors">
                    {article.title}
                  </h3>
                  <p class="text-sm text-gray-500 line-clamp-2 leading-relaxed">
                    {article.content}
                  </p>
                </div>
                <div class="px-5 py-3 bg-gray-50 flex justify-between items-center text-xs text-gray-400">
                  <div class="flex items-center gap-3">
                    <span class="flex items-center gap-1"><Clock size={12} /> {new Date(article.lastUpdated).toLocaleDateString()}</span>
                    <span class="flex items-center gap-1"><User size={12} /> {article.author}</span>
                  </div>
                  <div class="flex gap-2">
                    <button onClick={() => handleEdit(article)} class="text-gray-400 hover:text-[#FF5E13] transition-colors"><Edit2 size={16} /></button>
                    <button onClick={() => handleDelete(article.id)} class="text-gray-400 hover:text-red-500 transition-colors"><Trash2 size={16} /></button>
                  </div>
                </div>
              </div>
            )}</For>
          </div>
        </div>
      </Show>
    </div>
  );
}
