'use client';

import { useState, useEffect } from 'react';
import { useRouter, useParams } from 'next/navigation';
import { fetchJson } from '../../../../lib/api';
import { parseErrorResponse } from '../../../../lib/error-handler';
import type { Product, Recipe } from '../../../../features/inventory/types';
import Navigation from '../../../Navigation';

const MARKDOWN_HELP = `
**Fetstil:** **text** eller __text__
*Kursiv:* *text* eller _text_
• Punktlista: - punkt eller * punkt
# Rubrik 1
## Rubrik 2
### Rubrik 3
`;

function SimpleMarkdownPreview({ text }: { text: string }) {
  const lines = text.split('\n');

  return (
    <div style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6, wordBreak: 'break-word' }}>
      {lines.map((line, i) => {
        // Enkel bearbetning
        if (line.startsWith('# ')) {
          return <h3 key={i} style={{ margin: '0.5rem 0 0.25rem 0', fontSize: '1.3em', fontWeight: 700 }}>{line.slice(2)}</h3>;
        }
        if (line.startsWith('## ')) {
          return <h4 key={i} style={{ margin: '0.5rem 0 0.25rem 0', fontSize: '1.1em', fontWeight: 700 }}>{line.slice(3)}</h4>;
        }
        if (line.startsWith('- ') || line.startsWith('* ')) {
          return <div key={i} style={{ marginLeft: '1.5rem' }}>• {line.slice(2)}</div>;
        }
        if (line.trim() === '') {
          return <div key={i} style={{ height: '0.5rem' }} />;
        }
        return <div key={i}>{line}</div>;
      })}
    </div>
  );
}

export default function EditRecipePage() {
  const router = useRouter();
  const params = useParams();
  const recipeId = params && (Array.isArray(params.id) ? params.id[0] : params.id);

  const [recipe, setRecipe] = useState({
    name: '',
    description: '',
    instructions: '',
    ingredients: [{ productId: 0, quantity: '', unit: '', note: '', location: '' }],
  });
  const [products, setProducts] = useState<Product[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [showPreview, setShowPreview] = useState(false);
  const [showMarkdownHelp, setShowMarkdownHelp] = useState(false);

  useEffect(() => {
    const loadData = async () => {
      if (!recipeId) {
        setError('Receptet hittades inte.');
        setIsLoading(false);
        return;
      }

      try {
        // Ladda produkter
        const productsData = await fetchJson<Product[]>('/api/products');
        setProducts(productsData);

        // Ladda receptet
        const recipeData = await fetchJson<Recipe>(`/api/recipes/${recipeId}`);
        setRecipe({
          name: recipeData.name,
          description: recipeData.description || '',
          instructions: recipeData.instructions || '',
          ingredients: recipeData.ingredients.map((ing: any) => ({
            productId: ing.productId,
            quantity: ing.quantity.toString(),
            unit: ing.unit,
            note: ing.note || '',
            location: ing.location || '',
          })),
        });
      } catch (err) {
        setError((err as Error).message);
      } finally {
        setIsLoading(false);
      }
    };

    loadData();
  }, [recipeId]);

  const handleIngredientChange = (index: number, field: string, value: string | number) => {
    const newIngredients = [...recipe.ingredients];
    newIngredients[index] = { ...newIngredients[index], [field]: value };
    setRecipe({ ...recipe, ingredients: newIngredients });
  };

  const addIngredient = () => {
    setRecipe({
      ...recipe,
      ingredients: [...recipe.ingredients, { productId: 0, quantity: '', unit: '', note: '', location: '' }],
    });
  };

  const removeIngredient = (index: number) => {
    const newIngredients = [...recipe.ingredients];
    newIngredients.splice(index, 1);
    setRecipe({ ...recipe, ingredients: newIngredients });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSaving(true);
    setError(null);

    // Konvertera quantity till number för varje ingrediens
    const recipeToSend = {
      ...recipe,
      ingredients: recipe.ingredients.map(({ location: _loc, ...ing }) => ({
        ...ing,
        quantity: Number(ing.quantity),
      })),
    };

    try {
      const response = await fetch(`/api/recipes/${recipeId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(recipeToSend),
      });

      if (!response.ok) {
        const errorMessage = await parseErrorResponse(response);
        throw new Error(errorMessage);
      }

      router.push('/recipes');
    } catch (err) {
      const message = err instanceof Error ? err.message : 'Ett okänt fel inträffade. Försök igen.';
      setError(message);
    } finally {
      setIsSaving(false);
    }
  };

  const UNIT_OPTIONS = [
    { value: '', label: 'Välj enhet' },
    { value: 'g', label: 'g (gram)' },
    { value: 'kg', label: 'kg (kilogram)' },
    { value: 'hg', label: 'hg (hektogram)' },
    { value: 'ml', label: 'ml (milliliter)' },
    { value: 'dl', label: 'dl (deciliter)' },
    { value: 'l', label: 'l (liter)' },
    { value: 'st', label: 'st (styck)' },
    { value: 'tsk', label: 'tsk (tesked)' },
    { value: 'msk', label: 'msk (matsked)' },
  ];

  const LOCATION_OPTIONS = [
    { value: '', label: 'Välj plats' },
    { value: 'Kyl', label: 'Kyl' },
    { value: 'Frys', label: 'Frys' },
    { value: 'Skafferi', label: 'Skafferi' },
    { value: 'Annat', label: 'Annat' },
  ];

  if (isLoading) {
    return (
      <main style={{ padding: '1.5rem', maxWidth: '100%', margin: '0 auto' }}>
        <p>Laddar recept...</p>
      </main>
    );
  }

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

      {error && <p style={{ color: 'crimson', backgroundColor: '#ffe5e5', padding: '0.75rem', borderRadius: '4px', marginBottom: '1rem' }}>{error}</p>}

      <form onSubmit={handleSubmit} style={{ display: 'grid', gap: '1.5rem' }}>
        {/* Receptdetaljer */}
        <section style={{ display: 'grid', gap: '1rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
          <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Receptdetaljer</h2>

          <div>
            <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
              Receptnamn *
            </label>
            <input
              type="text"
              value={recipe.name}
              onChange={(e) => setRecipe({ ...recipe, name: e.target.value })}
              required
              style={{ 
                width: '100%', 
                padding: '0.75rem', 
                border: '1px solid #ddd',
                borderRadius: '4px',
                fontSize: '1rem',
                minHeight: '44px',
                boxSizing: 'border-box',
              }}
            />
          </div>

          <div>
            <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
              Beskrivning
            </label>
            <textarea
              value={recipe.description}
              onChange={(e) => setRecipe({ ...recipe, description: e.target.value })}
              placeholder="Kort beskrivning av receptet..."
              style={{ 
                width: '100%', 
                padding: '0.75rem', 
                border: '1px solid #ddd',
                borderRadius: '4px',
                fontSize: '1rem',
                minHeight: '100px',
                fontFamily: 'inherit',
                boxSizing: 'border-box',
              }}
            />
          </div>

          <div>
            <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>
              Instruktioner
            </label>
            <button
              type="button"
              onClick={() => setShowMarkdownHelp(!showMarkdownHelp)}
              style={{
                marginBottom: '0.5rem',
                padding: '0.4rem 0.75rem',
                background: '#f9f9f9',
                border: '1px solid #ddd',
                borderRadius: '4px',
                cursor: 'pointer',
                fontSize: '0.85rem',
                color: '#666',
                fontWeight: 500,
                display: 'flex',
                alignItems: 'center',
                gap: '0.25rem',
              }}
            >
              <span>{showMarkdownHelp ? '▼' : '▶'}</span>
              <strong>Markdown-stöd</strong>
            </button>
            {showMarkdownHelp && (
              <div style={{ marginBottom: '0.5rem', fontSize: '0.85rem', background: '#f9f9f9', padding: '0.5rem', borderRadius: '4px', color: '#666' }}>
                <div style={{ whiteSpace: 'pre-wrap', marginTop: '0.25rem' }}>{MARKDOWN_HELP}</div>
              </div>
            )}

            <textarea
              value={recipe.instructions}
              onChange={(e) => setRecipe({ ...recipe, instructions: e.target.value })}
              placeholder="Skriv instruktioner här. Du kan använda Markdown för formatering."
              style={{ 
                width: '100%', 
                padding: '0.75rem', 
                border: '1px solid #ddd',
                borderRadius: '4px',
                fontSize: '1rem',
                minHeight: '150px',
                fontFamily: 'inherit',
                boxSizing: 'border-box',
              }}
            />

            <button
              type="button"
              onClick={() => setShowPreview(!showPreview)}
              style={{
                marginTop: '0.5rem',
                padding: '0.5rem 1rem',
                background: '#f0f0f0',
                border: '1px solid #ddd',
                borderRadius: '4px',
                cursor: 'pointer',
                fontSize: '0.9rem',
              }}
            >
              {showPreview ? '✕ Dölj förhandsvisning' : '👁 Visa förhandsvisning'}
            </button>

            {showPreview && recipe.instructions && (
              <div style={{
                marginTop: '1rem',
                padding: '1rem',
                background: '#fafafa',
                border: '1px solid #ddd',
                borderRadius: '4px',
                maxHeight: '300px',
                overflowY: 'auto',
              }}>
                <strong>Förhandvisning:</strong>
                <SimpleMarkdownPreview text={recipe.instructions} />
              </div>
            )}
          </div>
        </section>

        {/* Ingredienser */}
        <section style={{ display: 'grid', gap: '1rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
          <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Ingredienser</h2>

          {recipe.ingredients.map((ingredient, index) => (
            <div 
              key={index} 
              style={{ 
                display: 'grid', 
                gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
                gap: '0.5rem', 
                alignItems: 'flex-end',
                padding: '0.75rem',
                background: '#f9f9f9',
                borderRadius: '4px',
              }}
            >
              <select
                value={ingredient.productId}
                onChange={(e) => handleIngredientChange(index, 'productId', Number(e.target.value))}
                required
                style={{ 
                  padding: '0.75rem',
                  border: '1px solid #ddd',
                  borderRadius: '4px',
                  fontSize: '1rem',
                  minHeight: '44px',
                  boxSizing: 'border-box',
                  width: '100%',
                }}
              >
                <option value={0}>Välj produkt</option>
                {products.length > 0 ? products.map((product) => (
                  <option key={product.id} value={product.id}>
                    {product.name}
                  </option>
                )) : <option disabled>Kunde inte ladda produkter</option>}
              </select>

              <input
                type="text"
                placeholder="Mängd"
                value={ingredient.quantity}
                onChange={(e) => handleIngredientChange(index, 'quantity', e.target.value)}
                required
                style={{ 
                  padding: '0.75rem',
                  border: '1px solid #ddd',
                  borderRadius: '4px',
                  fontSize: '1rem',
                  minHeight: '44px',
                  boxSizing: 'border-box',
                  width: '100%',
                }}
              />

              <select
                value={ingredient.unit}
                onChange={(e) => handleIngredientChange(index, 'unit', e.target.value)}
                required
                style={{ 
                  padding: '0.75rem',
                  border: '1px solid #ddd',
                  borderRadius: '4px',
                  fontSize: '1rem',
                  minHeight: '44px',
                  boxSizing: 'border-box',
                  width: '100%',
                }}
              >
                {UNIT_OPTIONS.map((opt) => (
                  <option key={opt.value} value={opt.value}>
                    {opt.label}
                  </option>
                ))}
              </select>

              <input
                type="text"
                placeholder="Notering (valfritt)"
                value={ingredient.note || ''}
                onChange={(e) => handleIngredientChange(index, 'note', e.target.value)}
                style={{ 
                  padding: '0.75rem',
                  border: '1px solid #ddd',
                  borderRadius: '4px',
                  fontSize: '1rem',
                  minHeight: '44px',
                  boxSizing: 'border-box',
                  width: '100%',
                }}
              />

              <button 
                type="button" 
                onClick={() => removeIngredient(index)} 
                style={{ 
                  padding: '0.75rem 1rem',
                  background: '#fee',
                  color: '#c00',
                  border: '1px solid #faa',
                  borderRadius: '4px',
                  cursor: 'pointer',
                  fontSize: '1rem',
                  minHeight: '44px',
                  fontWeight: 600,
                }}
              >
                ✕ Ta bort
              </button>
            </div>
          ))}

          {products.length === 0 && (
            <div style={{ color: 'crimson', background: '#ffe5e5', padding: '0.75rem', borderRadius: '4px' }}>
              Kunde inte ladda produkter. Kontrollera API:et.
            </div>
          )}

          <button 
            type="button" 
            onClick={addIngredient} 
            style={{ 
              padding: '0.75rem 1rem',
              background: '#e8f5e9',
              color: '#2e7d32',
              border: '1px solid #81c784',
              borderRadius: '4px',
              cursor: 'pointer',
              fontSize: '1rem',
              minHeight: '44px',
              fontWeight: 600,
            }}
          >
            + Lägg till ingrediens
          </button>
        </section>

        {/* Knappar */}
        <div style={{ 
          display: 'flex', 
          gap: '0.75rem', 
          flexWrap: 'wrap', 
          justifyContent: 'space-between',
          flexDirection: window.innerWidth < 600 ? 'column' : 'row',
        }}>
          <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
            <button 
              type="submit" 
              disabled={isSaving || isDeleting} 
              style={{ 
                padding: '0.75rem 1.5rem',
                background: '#0070f3',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                fontSize: '1rem',
                minHeight: '44px',
                fontWeight: 600,
              }}
            >
              {isSaving ? '⏳ Uppdaterar...' : '💾 Uppdatera recept'}
            </button>
            <button
              type="button"
              onClick={() => router.push('/recipes')}
              style={{ 
                padding: '0.75rem 1.5rem',
                background: '#f0f0f0', 
                color: '#333', 
                border: '1px solid #ccc', 
                borderRadius: '4px', 
                cursor: 'pointer',
                fontSize: '1rem',
                minHeight: '44px',
              }}
            >
              Avbryt
            </button>
          </div>
          <button
            type="button"
            disabled={isSaving || isDeleting}
            onClick={async () => {
              if (!confirm('Är du säker på att du vill radera detta recept? Detta kan inte ångras.')) return;
              setIsDeleting(true);
              setError(null);
              try {
                const res = await fetch(`/api/recipes/${recipeId}`, { method: 'DELETE' });
                if (!res.ok) {
                  const errorMessage = await parseErrorResponse(res);
                  throw new Error(errorMessage);
                }
                router.push('/recipes');
              } catch (err) {
                setError(err instanceof Error ? err.message : 'Kunde inte radera receptet.');
              } finally {
                setIsDeleting(false);
              }
            }}
            style={{ 
              padding: '0.75rem 1.5rem', 
              background: '#c0392b', 
              color: 'white', 
              border: 'none', 
              borderRadius: '4px', 
              cursor: 'pointer',
              fontSize: '1rem',
              minHeight: '44px',
              fontWeight: 600,
            }}
          >
            {isDeleting ? '⏳ Raderar...' : '🗑 Radera recept'}
          </button>
        </div>
      </form>
    </main>
  );
}