feat: Implement PDF document import functionality with Markdown conversion

- Added DocumentImportModule, DocumentImportController, and DocumentImportService for handling PDF uploads.
- Integrated pdf-parse for extracting text from PDF files.
- Created PdfParser for parsing PDF documents and converting them to Markdown format.
- Updated frontend to support file uploads via drag-and-drop and file input for PDF documents.
- Modified API routes to handle document import requests.
- Enhanced error handling for unsupported file types and file size limits.
- Updated README to reflect new features and usage instructions.

frontend/app/import/page.tsx

@@ -1,148 +1,231 @@
 'use client';
 
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import Navigation from '../Navigation';
 import { parseErrorResponse } from '../../lib/error-handler';
 
+interface ImportResult {
+  markdown: string;
+  title: string;
+  documentType: 'pdf';
+  metadata?: {
+    pageCount?: number;
+    producer?: string;
+    creationDate?: string;
+    characterCount?: number;
+  };
+}
+
 export default function ImportPage() {
-  const [quickImportUrl, setQuickImportUrl] = useState('');
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [result, setResult] = useState<any>(null);
+  const [result, setResult] = useState<ImportResult | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const handleQuickImport = async (e: React.FormEvent) => {
+  const handleFileSelect = (file: File) => {
+    setError(null);
+    setResult(null);
+    if (!file.name.toLowerCase().endsWith('.pdf')) {
+      setError('Endast PDF-filer stöds för tillfället.');
+      return;
+    }
+    setSelectedFile(file);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
     e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = () => setIsDragging(false);
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const file = e.dataTransfer.files[0];
+    if (file) handleFileSelect(file);
+  };
+
+  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) handleFileSelect(file);
+  };
+
+  const handleImport = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedFile) return;
+
     setError(null);
     setResult(null);
     setIsLoading(true);
 
     try {
-      const input = quickImportUrl.trim();
-      if (!input) {
-        setError('Vänligen ange en URL eller filsökväg');
-        setIsLoading(false);
-        return;
-      }
+      const formData = new FormData();
+      formData.append('file', selectedFile);
 
-      // Försök importera från URL eller fil
-      const res = await fetch('/api/quick-import', {
+      const res = await fetch('/api/document-import-proxy', {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ input }),
+        body: formData,
       });
 
       if (!res.ok) {
         const errorMessage = await parseErrorResponse(res);
-        setError(errorMessage || 'Importen misslyckades. Kontrollera att länken eller filsökvägen är korrekt.');
-        setIsLoading(false);
+        setError(errorMessage || 'Importen misslyckades.');
         return;
       }
 
-      const data = await res.json();
-      if (data.markdown) {
-        setResult(data);
-      }
+      const data: ImportResult = await res.json();
+      setResult(data);
     } catch (err) {
-      const message = err instanceof Error ? err.message : 'Något oväntad gick fel';
+      const message = err instanceof Error ? err.message : 'Något oväntat gick fel';
       setError(`Fel: ${message}`);
     } finally {
       setIsLoading(false);
     }
   };
 
+  const copyToClipboard = () => {
+    if (result?.markdown) {
+      navigator.clipboard.writeText(result.markdown);
+    }
+  };
+
   return (
     <main style={{ padding: '1rem', maxWidth: '900px', margin: '0 auto' }}>
       <Navigation />
-      <h1 style={{ marginBottom: '1.5rem' }}>Importera recept</h1>
+      <h1 style={{ marginBottom: '0.5rem' }}>Importera dokument</h1>
+      <p style={{ margin: '0 0 1.5rem 0', color: '#6b7280', fontSize: '0.95rem' }}>
+        Ladda upp en PDF-fil och konvertera den till Markdown-format.
+      </p>
 
-      {/* IMPORT-SEKTION */}
-      <div
-        style={{
-          background: '#fef3c7',
-          border: '2px solid #f59e0b',
-          borderRadius: '8px',
-          padding: '1.5rem',
-          marginBottom: '2rem',
-        }}
-      >
-        <h2 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem', color: '#92400e' }}>
-          ⚡ Snabbimport
-        </h2>
-        <p style={{ margin: '0 0 1rem 0', color: '#92400e', fontSize: '0.9rem' }}>
-          Klistra in en receptlänk från ICA eller annan webbsida:
-        </p>
-
-        <form onSubmit={handleQuickImport} style={{ display: 'grid', gap: '0.75rem' }}>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: '0.5rem' }}>
-            <input
-              type="text"
-              value={quickImportUrl}
-              onChange={(e) => setQuickImportUrl(e.target.value)}
-              placeholder="https://www.ica.se/recept/..."
-              style={{
-                padding: '0.75rem',
-                border: '1px solid #d97706',
-                borderRadius: '4px',
-                fontSize: '0.95rem',
-                boxSizing: 'border-box',
-              }}
-              disabled={isLoading}
-            />
-            <button
-              type="submit"
-              disabled={isLoading || !quickImportUrl.trim()}
-              style={{
-                padding: '0.75rem 1.5rem',
-                background: '#f59e0b',
-                color: '#fff',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: isLoading || !quickImportUrl.trim() ? 'not-allowed' : 'pointer',
-                opacity: isLoading || !quickImportUrl.trim() ? 0.6 : 1,
-                fontSize: '0.95rem',
-                fontWeight: 600,
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {isLoading ? 'Laddar...' : '→'}
-            </button>
+      {/* UPLOAD-SEKTION */}
+      <form onSubmit={handleImport}>
+        <div
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          onClick={() => fileInputRef.current?.click()}
+          style={{
+            border: `2px dashed ${isDragging ? '#3b82f6' : selectedFile ? '#10b981' : '#d1d5db'}`,
+            borderRadius: '8px',
+            padding: '2.5rem 1.5rem',
+            textAlign: 'center',
+            cursor: 'pointer',
+            background: isDragging ? '#eff6ff' : selectedFile ? '#f0fdf4' : '#f9fafb',
+            transition: 'all 0.15s ease',
+            marginBottom: '1rem',
+          }}
+        >
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".pdf,application/pdf"
+            onChange={handleFileInputChange}
+            style={{ display: 'none' }}
+          />
+          <div style={{ fontSize: '2.5rem', marginBottom: '0.5rem' }}>
+            {selectedFile ? '📄' : '⬆️'}
           </div>
-
-          {error && (
-            <p
-              style={{
-                margin: '0.5rem 0 0 0',
-                color: '#991b1b',
-                background: '#fee2e2',
-                padding: '0.75rem',
-                borderRadius: '4px',
-                fontSize: '0.85rem',
-              }}
-            >
-              ⚠️ {error}
-            </p>
+          {selectedFile ? (
+            <>
+              <p style={{ margin: '0 0 0.25rem 0', fontWeight: 600, color: '#065f46' }}>
+                {selectedFile.name}
+              </p>
+              <p style={{ margin: 0, fontSize: '0.85rem', color: '#6b7280' }}>
+                {(selectedFile.size / 1024 / 1024).toFixed(2)} MB — Klicka för att byta fil
+              </p>
+            </>
+          ) : (
+            <>
+              <p style={{ margin: '0 0 0.25rem 0', fontWeight: 600, color: '#374151' }}>
+                Dra och släpp din PDF här
+              </p>
+              <p style={{ margin: 0, fontSize: '0.85rem', color: '#6b7280' }}>
+                eller klicka för att välja fil (max 50 MB)
+              </p>
+            </>
           )}
-        </form>
-      </div>
+        </div>
+
+        {error && (
+          <p
+            style={{
+              margin: '0 0 1rem 0',
+              color: '#991b1b',
+              background: '#fee2e2',
+              padding: '0.75rem',
+              borderRadius: '4px',
+              fontSize: '0.85rem',
+            }}
+          >
+            ⚠️ {error}
+          </p>
+        )}
+
+        <button
+          type="submit"
+          disabled={isLoading || !selectedFile}
+          style={{
+            padding: '0.75rem 2rem',
+            background: '#3b82f6',
+            color: '#fff',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: isLoading || !selectedFile ? 'not-allowed' : 'pointer',
+            opacity: isLoading || !selectedFile ? 0.5 : 1,
+            fontSize: '0.95rem',
+            fontWeight: 600,
+          }}
+        >
+          {isLoading ? 'Konverterar...' : 'Konvertera till Markdown'}
+        </button>
+      </form>
 
       {/* RESULT */}
       {result && (
         <div
           style={{
-            background: '#ecfdf5',
+            marginTop: '2rem',
+            background: '#f0fdf4',
             border: '2px solid #10b981',
             borderRadius: '8px',
             padding: '1.5rem',
           }}
         >
-          <h2 style={{ margin: '0 0 1rem 0', color: '#059669' }}>✓ Recept importerat</h2>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+            <h2 style={{ margin: 0, color: '#065f46' }}>✓ {result.title}</h2>
+            <button
+              onClick={copyToClipboard}
+              style={{
+                padding: '0.4rem 0.9rem',
+                background: '#fff',
+                border: '1px solid #10b981',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                fontSize: '0.85rem',
+                color: '#065f46',
+              }}
+            >
+              Kopiera Markdown
+            </button>
+          </div>
+
+          {result.metadata && (
+            <p style={{ margin: '0 0 1rem 0', fontSize: '0.85rem', color: '#6b7280' }}>
+              {result.metadata.pageCount} sidor
+              {result.metadata.characterCount ? ` · ${result.metadata.characterCount.toLocaleString('sv')} tecken` : ''}
+            </p>
+          )}
+
           <div
             style={{
               background: '#fff',
               border: '1px solid #d1fae5',
               borderRadius: '4px',
               padding: '1rem',
-              maxHeight: '400px',
+              maxHeight: '500px',
               overflowY: 'auto',
             }}
           >
@@ -158,9 +241,6 @@ export default function ImportPage() {
               {result.markdown}
             </pre>
           </div>
-          <p style={{ margin: '1rem 0 0 0', fontSize: '0.9rem', color: '#059669' }}>
-            Källa: {result.source === 'ica' ? 'ICA' : 'Annan webbsida'}
-          </p>
         </div>
       )}
     </main>