'use client';

import { useState, useRef } from 'react';
import { Send, Upload, Check, AlertCircle, FileText, Plus } from 'lucide-react';

const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';

interface LogResponse {
  success: boolean;
  file_path: string;
  timestamp: string;
  message: string;
}

interface UploadResponse {
  success: boolean;
  file_path: string;
  filename: string;
  size_bytes: number;
  message: string;
}

export default function CapturePage() {
  // Log state
  const [logContent, setLogContent] = useState('');
  const [logTitle, setLogTitle] = useState('');
  const [logTags, setLogTags] = useState('');
  const [logStatus, setLogStatus] = useState<'idle' | 'sending' | 'success' | 'error'>('idle');
  const [logMessage, setLogMessage] = useState('');

  // Upload state
  const [uploadStatus, setUploadStatus] = useState<'idle' | 'uploading' | 'success' | 'error'>('idle');
  const [uploadMessage, setUploadMessage] = useState('');
  const [uploadFolder, setUploadFolder] = useState('documents');
  const [uploadTags, setUploadTags] = useState('');
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleLogSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!logContent.trim()) return;

    setLogStatus('sending');
    setLogMessage('');

    try {
      const tags = logTags.split(',').map(t => t.trim()).filter(Boolean);
      
      const res = await fetch(`${API_BASE}/api/v1/capture/log`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          content: logContent,
          title: logTitle || undefined,
          tags: tags.length > 0 ? tags : undefined,
        }),
      });

      if (!res.ok) throw new Error(`Failed: ${res.status}`);
      
      const data: LogResponse = await res.json();
      setLogStatus('success');
      setLogMessage(data.message);
      setLogContent('');
      setLogTitle('');
      setLogTags('');
      
      // Reset status after 3s
      setTimeout(() => setLogStatus('idle'), 3000);
    } catch (err) {
      setLogStatus('error');
      setLogMessage(err instanceof Error ? err.message : 'Failed to save log');
    }
  };

  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setUploadStatus('uploading');
    setUploadMessage('');

    try {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('folder', uploadFolder);
      if (uploadTags) {
        formData.append('tags', uploadTags);
      }

      const res = await fetch(`${API_BASE}/api/v1/capture/upload`, {
        method: 'POST',
        body: formData,
      });

      if (!res.ok) {
        const errData = await res.json().catch(() => ({}));
        throw new Error(errData.detail || `Upload failed: ${res.status}`);
      }

      const data: UploadResponse = await res.json();
      setUploadStatus('success');
      setUploadMessage(`${data.filename} uploaded (${(data.size_bytes / 1024).toFixed(1)} KB)`);
      
      // Reset
      if (fileInputRef.current) fileInputRef.current.value = '';
      setTimeout(() => setUploadStatus('idle'), 3000);
    } catch (err) {
      setUploadStatus('error');
      setUploadMessage(err instanceof Error ? err.message : 'Upload failed');
    }
  };

  return (
    <div className="p-8 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold text-slate-900 mb-2">Quick Capture</h1>
      <p className="text-slate-500 mb-8">
        Add notes to your Second Brain or upload documents for indexing.
      </p>

      {/* Quick Log Section */}
      <div className="bg-slate-800 rounded-xl p-6 mb-8">
        <div className="flex items-center gap-2 mb-4">
          <FileText size={20} className="text-brain-400" />
          <h2 className="text-lg font-semibold text-white">Quick Log</h2>
        </div>
        
        <form onSubmit={handleLogSubmit} className="space-y-4">
          <div className="flex gap-4">
            <input
              type="text"
              placeholder="Title (optional)"
              value={logTitle}
              onChange={(e) => setLogTitle(e.target.value)}
              className="flex-1 bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 text-white placeholder-slate-400 focus:outline-none focus:border-brain-500"
            />
            <input
              type="text"
              placeholder="Tags (comma-separated)"
              value={logTags}
              onChange={(e) => setLogTags(e.target.value)}
              className="w-64 bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 text-white placeholder-slate-400 focus:outline-none focus:border-brain-500"
            />
          </div>
          
          <textarea
            placeholder="What's on your mind? Write your note here..."
            value={logContent}
            onChange={(e) => setLogContent(e.target.value)}
            rows={4}
            className="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 text-white placeholder-slate-400 focus:outline-none focus:border-brain-500 resize-none"
          />
          
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2 text-sm">
              {logStatus === 'success' && (
                <>
                  <Check size={16} className="text-green-400" />
                  <span className="text-green-400">{logMessage}</span>
                </>
              )}
              {logStatus === 'error' && (
                <>
                  <AlertCircle size={16} className="text-red-400" />
                  <span className="text-red-400">{logMessage}</span>
                </>
              )}
            </div>
            
            <button
              type="submit"
              disabled={!logContent.trim() || logStatus === 'sending'}
              className="flex items-center gap-2 bg-brain-600 hover:bg-brain-500 disabled:bg-slate-600 disabled:cursor-not-allowed text-white px-5 py-2 rounded-lg font-medium transition-colors"
            >
              {logStatus === 'sending' ? (
                <>Saving...</>
              ) : (
                <>
                  <Send size={16} />
                  Save Log
                </>
              )}
            </button>
          </div>
        </form>
      </div>

      {/* Upload Section */}
      <div className="bg-slate-800 rounded-xl p-6">
        <div className="flex items-center gap-2 mb-4">
          <Upload size={20} className="text-brain-400" />
          <h2 className="text-lg font-semibold text-white">Upload Document</h2>
        </div>
        
        <div className="space-y-4">
          <div className="flex gap-4">
            <div className="flex-1">
              <label className="block text-sm text-slate-400 mb-1">Folder</label>
              <select
                value={uploadFolder}
                onChange={(e) => setUploadFolder(e.target.value)}
                className="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-brain-500"
              >
                <option value="documents">documents</option>
                <option value="uploads">uploads</option>
                <option value="notes">notes</option>
                <option value="research">research</option>
              </select>
            </div>
            <div className="flex-1">
              <label className="block text-sm text-slate-400 mb-1">Tags (for .md files)</label>
              <input
                type="text"
                placeholder="e.g. project, research"
                value={uploadTags}
                onChange={(e) => setUploadTags(e.target.value)}
                className="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 text-white placeholder-slate-400 focus:outline-none focus:border-brain-500"
              />
            </div>
          </div>
          
          <div className="border-2 border-dashed border-slate-600 rounded-xl p-8 text-center hover:border-brain-500 transition-colors">
            <input
              ref={fileInputRef}
              type="file"
              accept=".md,.txt,.pdf,.json,.yaml,.yml,.csv"
              onChange={handleFileUpload}
              className="hidden"
              id="file-upload"
            />
            <label
              htmlFor="file-upload"
              className="cursor-pointer flex flex-col items-center gap-3"
            >
              <div className="w-12 h-12 bg-slate-700 rounded-full flex items-center justify-center">
                <Plus size={24} className="text-slate-400" />
              </div>
              <div>
                <span className="text-brain-400 font-medium">Click to upload</span>
                <span className="text-slate-400"> or drag and drop</span>
              </div>
              <span className="text-slate-500 text-sm">
                Supports: .md, .txt, .pdf, .json, .yaml, .csv
              </span>
            </label>
          </div>
          
          {uploadStatus !== 'idle' && (
            <div className="flex items-center gap-2 text-sm">
              {uploadStatus === 'uploading' && (
                <span className="text-slate-400">Uploading...</span>
              )}
              {uploadStatus === 'success' && (
                <>
                  <Check size={16} className="text-green-400" />
                  <span className="text-green-400">{uploadMessage}</span>
                </>
              )}
              {uploadStatus === 'error' && (
                <>
                  <AlertCircle size={16} className="text-red-400" />
                  <span className="text-red-400">{uploadMessage}</span>
                </>
              )}
            </div>
          )}
        </div>
      </div>

      {/* Tips */}
      <div className="mt-8 p-4 bg-slate-800/50 rounded-lg border border-slate-700">
        <h3 className="text-sm font-medium text-slate-300 mb-2">💡 Tips</h3>
        <ul className="text-sm text-slate-400 space-y-1">
          <li>• Quick logs are saved to daily files (logs/YYYY-MM-DD.md)</li>
          <li>• Uploaded documents will be indexed automatically</li>
          <li>• Use tags to organize and find content faster</li>
          <li>• Markdown files support frontmatter for metadata</li>
        </ul>
      </div>
    </div>
  );
}