import React, { useState, useEffect } from 'react';
import { X, Loader, AlertCircle, CheckCircle, Upload as UploadIcon, Download, FileText, Trash2 } from 'lucide-react';
import ConfirmModal from './ConfirmModal';

const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';

export default function KnowledgeBaseModal({ onClose, onUpdate }) {
  const [phase, setPhase] = useState('idle'); // idle, uploading, success, error
  const [selectedFile, setSelectedFile] = useState(null);
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [category, setCategory] = useState('General');
  const [result, setResult] = useState(null);
  const [existingArticles, setExistingArticles] = useState([]);
  const [error, setError] = useState('');
  const [pendingConfirm, setPendingConfirm] = useState(null);
  // Fetch existing articles on mount
  useEffect(() => {
    fetchExistingArticles();
  }, []);

  const fetchExistingArticles = async () => {
    try {
      const response = await fetch(`${API_BASE}/knowledge-base`, { credentials: 'include' });
      if (!response.ok) throw new Error('Failed to fetch articles');
      const data = await response.json();
      setExistingArticles(data);
    } catch (err) {
      console.error('Error fetching articles:', err);
    }
  };

  const handleFileSelect = (e) => {
    const file = e.target.files[0];
    if (file) {
      // Validate file type
      const allowedExtensions = ['.pdf', '.md', '.txt', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.html', '.json', '.yaml', '.yml'];
      const ext = '.' + file.name.split('.').pop().toLowerCase();

      if (!allowedExtensions.includes(ext)) {
        setError('File type not allowed. Please upload: PDF, Markdown, Text, Office docs, or HTML files.');
        return;
      }

      setSelectedFile(file);
      setError('');

      // Auto-populate title from filename if empty
      if (!title) {
        const filename = file.name.replace(/\.[^/.]+$/, ''); // Remove extension
        setTitle(filename);
      }
    }
  };

  const handleUpload = async () => {
    if (!selectedFile || !title.trim()) {
      setError('Please provide both a title and file');
      return;
    }

    setPhase('uploading');

    const formData = new FormData();
    formData.append('file', selectedFile);
    formData.append('title', title.trim());
    formData.append('description', description.trim());
    formData.append('category', category);

    try {
      const response = await fetch(`${API_BASE}/knowledge-base/upload`, {
        method: 'POST',
        body: formData,
        credentials: 'include'
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error || 'Upload failed');
      }

      const data = await response.json();
      setResult(data);
      setPhase('success');

      // Refresh the list of existing articles
      await fetchExistingArticles();

      // Notify parent to refresh
      if (onUpdate) onUpdate();
    } catch (err) {
      setError(err.message);
      setPhase('error');
    }
  };

  const handleDownload = async (id, filename) => {
    try {
      const response = await fetch(`${API_BASE}/knowledge-base/${id}/download`, {
        credentials: 'include'
      });

      if (!response.ok) throw new Error('Download failed');

      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    } catch (err) {
      console.error('Error downloading file:', err);
      setError('Failed to download file');
    }
  };

  const handleDelete = async (id, articleTitle) => {
    setPendingConfirm({
      title: 'Delete Article',
      message: `Are you sure you want to delete "${articleTitle}"?`,
      confirmText: 'Delete',
      onConfirm: async () => {
        setPendingConfirm(null);
        try {
          const response = await fetch(`${API_BASE}/knowledge-base/${id}`, {
            method: 'DELETE',
            credentials: 'include'
          });

          if (!response.ok) throw new Error('Delete failed');

          // Refresh the list
          await fetchExistingArticles();

          // Notify parent to refresh
          if (onUpdate) onUpdate();
        } catch (err) {
          console.error('Error deleting article:', err);
          setError('Failed to delete article');
        }
      },
    });
  };

  const resetForm = () => {
    setPhase('idle');
    setSelectedFile(null);
    setTitle('');
    setDescription('');
    setCategory('General');
    setResult(null);
    setError('');
  };

  const formatFileSize = (bytes) => {
    if (!bytes) return 'Unknown size';
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
  };

  const formatDate = (dateString) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    });
  };

  const getCategoryColor = (cat) => {
    const colors = {
      'General': '#94A3B8',
      'Policy': '#0EA5E9',
      'Procedure': '#10B981',
      'Guide': '#F59E0B',
      'Reference': '#8B5CF6'
    };
    return colors[cat] || '#94A3B8';
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()} style={{ maxWidth: '700px' }}>
        {/* Header */}
        <div className="modal-header">
          <h2 className="modal-title">Knowledge Base</h2>
          <button onClick={onClose} className="modal-close">
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Body */}
        <div className="modal-body">
          {/* Idle Phase - Upload Form */}
          {phase === 'idle' && (
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-2" style={{ color: '#94A3B8' }}>
                  Title *
                </label>
                <input
                  type="text"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  placeholder="e.g., Inventory Management Policy"
                  className="intel-input w-full"
                  maxLength={255}
                />
              </div>

              <div>
                <label className="block text-sm font-medium mb-2" style={{ color: '#94A3B8' }}>
                  Description
                </label>
                <textarea
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  placeholder="Brief description of this document..."
                  className="intel-input w-full"
                  rows={3}
                  maxLength={500}
                />
              </div>

              <div>
                <label className="block text-sm font-medium mb-2" style={{ color: '#94A3B8' }}>
                  Category
                </label>
                <select
                  value={category}
                  onChange={(e) => setCategory(e.target.value)}
                  className="intel-input w-full"
                >
                  <option value="General">General</option>
                  <option value="Policy">Policy</option>
                  <option value="Procedure">Procedure</option>
                  <option value="Guide">Guide</option>
                  <option value="Reference">Reference</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium mb-2" style={{ color: '#94A3B8' }}>
                  Document File *
                </label>
                <input
                  type="file"
                  accept=".pdf,.md,.txt,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.html,.json,.yaml,.yml"
                  onChange={handleFileSelect}
                  className="intel-input w-full"
                />
                {selectedFile && (
                  <p className="mt-2 text-sm" style={{ color: '#10B981' }}>
                    Selected: {selectedFile.name} ({formatFileSize(selectedFile.size)})
                  </p>
                )}
              </div>

              <button
                onClick={handleUpload}
                disabled={!selectedFile || !title.trim()}
                className={`intel-button w-full ${selectedFile && title.trim() ? 'intel-button-success' : 'opacity-50 cursor-not-allowed'}`}
              >
                <UploadIcon className="w-4 h-4 mr-2" />
                Upload Document
              </button>

              {error && (
                <div className="flex items-start gap-2 p-3 rounded" style={{ background: 'rgba(239, 68, 68, 0.1)', border: '1px solid #EF4444' }}>
                  <AlertCircle className="w-5 h-5 flex-shrink-0" style={{ color: '#EF4444' }} />
                  <p style={{ color: '#FCA5A5' }}>{error}</p>
                </div>
              )}
            </div>
          )}

          {/* Uploading Phase */}
          {phase === 'uploading' && (
            <div className="text-center py-8">
              <Loader className="w-12 h-12 animate-spin mx-auto mb-4" style={{ color: '#0EA5E9' }} />
              <p style={{ color: '#94A3B8' }}>Uploading document...</p>
            </div>
          )}

          {/* Success Phase */}
          {phase === 'success' && result && (
            <div className="space-y-4">
              <div className="flex items-center gap-2 p-4 rounded" style={{ background: 'rgba(16, 185, 129, 0.1)', border: '1px solid #10B981' }}>
                <CheckCircle className="w-6 h-6" style={{ color: '#10B981' }} />
                <div>
                  <p className="font-medium" style={{ color: '#34D399' }}>Upload Successful!</p>
                  <p className="text-sm mt-1" style={{ color: '#94A3B8' }}>
                    {result.title} has been added to the knowledge base.
                  </p>
                </div>
              </div>

              <button onClick={resetForm} className="intel-button w-full">
                Upload Another Document
              </button>
            </div>
          )}

          {/* Error Phase */}
          {phase === 'error' && (
            <div className="space-y-4">
              <div className="flex items-start gap-2 p-4 rounded" style={{ background: 'rgba(239, 68, 68, 0.1)', border: '1px solid #EF4444' }}>
                <AlertCircle className="w-6 h-6 flex-shrink-0" style={{ color: '#EF4444' }} />
                <div>
                  <p className="font-medium" style={{ color: '#FCA5A5' }}>Upload Failed</p>
                  <p className="text-sm mt-1" style={{ color: '#94A3B8' }}>{error}</p>
                </div>
              </div>
              <button onClick={resetForm} className="intel-button w-full">
                Try Again
              </button>
            </div>
          )}

          {/* Existing Articles Section */}
          {(phase === 'idle' || phase === 'success') && existingArticles.length > 0 && (
            <div className="mt-8">
              <h3 className="text-lg font-medium mb-4" style={{ color: '#94A3B8' }}>
                Existing Documents ({existingArticles.length})
              </h3>
              <div className="space-y-3 max-h-96 overflow-y-auto">
                {existingArticles.map((article) => (
                  <div
                    key={article.id}
                    className="intel-card p-4"
                  >
                    <div className="flex items-start justify-between gap-3">
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          <FileText className="w-4 h-4 flex-shrink-0" style={{ color: getCategoryColor(article.category) }} />
                          <p className="font-medium truncate" style={{ color: '#E2E8F0' }}>
                            {article.title}
                          </p>
                        </div>
                        {article.description && (
                          <p className="text-sm mb-2 line-clamp-2" style={{ color: '#94A3B8' }}>
                            {article.description}
                          </p>
                        )}
                        <div className="flex items-center gap-3 text-xs" style={{ color: '#64748B' }}>
                          <span
                            className="px-2 py-0.5 rounded"
                            style={{
                              background: `${getCategoryColor(article.category)}33`,
                              color: getCategoryColor(article.category)
                            }}
                          >
                            {article.category}
                          </span>
                          <span>{formatDate(article.created_at)}</span>
                          <span>{formatFileSize(article.file_size)}</span>
                        </div>
                      </div>
                      <div className="flex gap-2 flex-shrink-0">
                        <button
                          onClick={() => handleDownload(article.id, article.file_name)}
                          className="intel-button intel-button-small intel-button-success"
                          title="Download"
                        >
                          <Download className="w-3 h-3" />
                        </button>
                        <button
                          onClick={() => handleDelete(article.id, article.title)}
                          className="intel-button intel-button-small"
                          style={{ borderColor: '#EF4444', color: '#EF4444' }}
                          title="Delete"
                        >
                          <Trash2 className="w-3 h-3" />
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Confirmation Modal */}
      <ConfirmModal
        open={!!pendingConfirm}
        title={pendingConfirm?.title}
        message={pendingConfirm?.message}
        confirmText={pendingConfirm?.confirmText}
        variant="danger"
        onConfirm={pendingConfirm?.onConfirm}
        onCancel={() => setPendingConfirm(null)}
      />
    </div>
  );
}
