microservice-importer/frontend/app/import/page.tsx

'use client';

import { useState } from 'react';
import Navigation from '../Navigation';
import { parseErrorResponse } from '../../lib/error-handler';

export default function ImportPage() {
  const [quickImportUrl, setQuickImportUrl] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [result, setResult] = useState<any>(null);

  const handleQuickImport = async (e: React.FormEvent) => {
    e.preventDefault();
    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;
      }

      // Försök importera från URL eller fil
      const res = await fetch('/api/quick-import', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ input }),
      });

      if (!res.ok) {
        const errorMessage = await parseErrorResponse(res);
        setError(errorMessage || 'Importen misslyckades. Kontrollera att länken eller filsökvägen är korrekt.');
        setIsLoading(false);
        return;
      }

      const data = await res.json();
      if (data.markdown) {
        setResult(data);
      }
    } catch (err) {
      const message = err instanceof Error ? err.message : 'Något oväntad gick fel';
      setError(`Fel: ${message}`);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <main style={{ padding: '1rem', maxWidth: '900px', margin: '0 auto' }}>
      <Navigation />
      <h1 style={{ marginBottom: '1.5rem' }}>Importera recept</h1>

      {/* 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>
          </div>

          {error && (
            <p
              style={{
                margin: '0.5rem 0 0 0',
                color: '#991b1b',
                background: '#fee2e2',
                padding: '0.75rem',
                borderRadius: '4px',
                fontSize: '0.85rem',
              }}
            >
              ⚠️ {error}
            </p>
          )}
        </form>
      </div>

      {/* RESULT */}
      {result && (
        <div
          style={{
            background: '#ecfdf5',
            border: '2px solid #10b981',
            borderRadius: '8px',
            padding: '1.5rem',
          }}
        >
          <h2 style={{ margin: '0 0 1rem 0', color: '#059669' }}>✓ Recept importerat</h2>
          <div
            style={{
              background: '#fff',
              border: '1px solid #d1fae5',
              borderRadius: '4px',
              padding: '1rem',
              maxHeight: '400px',
              overflowY: 'auto',
            }}
          >
            <pre
              style={{
                margin: 0,
                fontSize: '0.85rem',
                wordBreak: 'break-word',
                whiteSpace: 'pre-wrap',
                overflowWrap: 'break-word',
              }}
            >
              {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>
  );
}