'use client';

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

// ──────────────────────────────────────────────
// Hjälpfunktioner
// ──────────────────────────────────────────────

function SimpleMarkdownPreview({ text }: { text: string }) {
  return (
    <div style={{ whiteSpace: 'pre-wrap', lineHeight: 1.7 }}>
      {text.split('\n').map((line, i) => {
        if (line.startsWith('# ')) return <h3 key={i} style={{ margin: '0.5rem 0 0.25rem', fontSize: '1.3em', fontWeight: 700 }}>{line.slice(2)}</h3>;
        if (line.startsWith('## ')) return <h4 key={i} style={{ margin: '0.5rem 0 0.25rem', 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>
  );
}

function StatusBadge({ status }: { status: 'enough' | 'missing' | 'unit_mismatch' }) {
  const styles = {
    enough: { label: 'Räcker', color: '#1f5f2c', background: '#ecf8ee', border: '#b9e0bf' },
    missing: { label: 'Saknas', color: '#8b0000', background: '#ffeaea', border: '#f1b5b5' },
    unit_mismatch: { label: 'Enhetskonflikt', color: '#8a4b00', background: '#fff4e5', border: '#f0cf9b' },
  }[status];

  return (
    <span style={{
      padding: '0.15rem 0.5rem',
      fontSize: '0.8rem',
      fontWeight: 600,
      borderRadius: '4px',
      color: styles.color,
      background: styles.background,
      border: `1px solid ${styles.border}`,
    }}>
      {styles.label}
    </span>
  );
}

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)' },
  { value: 'port', label: 'port (portioner)' },
  { value: 'efter smak', label: 'Efter smak' },
  { value: 'förp', label: 'förp (förpackning)' },
  { value: 'klyfta', label: 'klyfta' },
];

// ──────────────────────────────────────────────
// Huvud-komponent
// ──────────────────────────────────────────────

export default function RecipeDetailClient({ recipe: initialRecipe }: { recipe: Recipe }) {
  const router = useRouter();
  const [recipe, setRecipe] = useState(initialRecipe);
  const [isEditing, setIsEditing] = useState(false);
  const [isLiked, setIsLiked] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Redigeringsformulär-state
  const [form, setForm] = useState({
    name: initialRecipe.name,
    description: initialRecipe.description || '',
    instructions: initialRecipe.instructions || '',
    imageUrl: initialRecipe.imageUrl || '',
    ingredients: initialRecipe.ingredients.map((ing) => ({
      productId: ing.productId,
      quantity: String(ing.quantity),
      unit: ing.unit,
      note: ing.note || '',
    })),
  });

  // Produktlista för ingrediens-väljare
  const [products, setProducts] = useState<Product[]>([]);

  // Inventarieförhandsgranskning
  const [preview, setPreview] = useState<RecipeInventoryPreview | null>(null);
  const [previewError, setPreviewError] = useState<string | null>(null);
  const [isPreviewing, startPreviewTransition] = useTransition();

  // Bilduppdatering
  const [imageUrlInput, setImageUrlInput] = useState('');
  const [imageError, setImageError] = useState<string | null>(null);
  const [isUploadingImage, setIsUploadingImage] = useState(false);

  // localStorage: gilla
  useEffect(() => {
    const liked = localStorage.getItem(`recipe-liked-${recipe.id}`) === 'true';
    setIsLiked(liked);
  }, [recipe.id]);

  // Ladda produkter för redigera-läge
  useEffect(() => {
    if (isEditing && products.length === 0) {
      fetchJson<Product[]>('/api/products').then(setProducts).catch(console.error);
    }
  }, [isEditing, products.length]);

  // ── Gilla ──
  const toggleLike = () => {
    const next = !isLiked;
    setIsLiked(next);
    localStorage.setItem(`recipe-liked-${recipe.id}`, String(next));
  };

  // ── Inventarieförhandsgranskning ──
  const loadPreview = () => {
    setPreviewError(null);
    startPreviewTransition(async () => {
      try {
        const res = await fetch(`/api/recipe-preview-proxy?id=${recipe.id}`, { cache: 'no-store' });
        if (!res.ok) throw new Error(await parseErrorResponse(res));
        setPreview(await res.json());
      } catch (err) {
        setPreviewError(err instanceof Error ? err.message : 'Fel vid hämtning av inventariedata');
      }
    });
  };

  // ── Ta bort recept ──
  const handleDelete = async () => {
    if (!confirm(`Ta bort receptet "${recipe.name}"? Det går inte att ångra.`)) return;
    setIsDeleting(true);
    try {
      const res = await fetch(`/api/recipes/${recipe.id}`, { method: 'DELETE' });
      if (!res.ok) throw new Error(await parseErrorResponse(res));
      router.push('/recipes');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Kunde inte ta bort receptet.');
      setIsDeleting(false);
    }
  };

  // ── Spara redigering ──
  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSaving(true);
    setError(null);
    try {
      const body = {
        ...form,
        ingredients: form.ingredients.map((ing) => ({
          ...ing,
          quantity: Number(ing.quantity),
        })),
      };
      const res = await fetch(`/api/recipes/${recipe.id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      if (!res.ok) throw new Error(await parseErrorResponse(res));
      const updated: Recipe = await res.json();
      setRecipe(updated);
      setIsEditing(false);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Kunde inte spara receptet.');
    } finally {
      setIsSaving(false);
    }
  };

  // ── Uppdatera bild ──
  const handleImageUpdate = async () => {
    if (!imageUrlInput.trim()) return;
    setIsUploadingImage(true);
    setImageError(null);
    try {
      const res = await fetch(`/api/recipes/${recipe.id}/image`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ sourceUrl: imageUrlInput.trim() }),
      });
      if (!res.ok) throw new Error(await parseErrorResponse(res));
      const updated: Recipe = await res.json();
      setRecipe(updated);
      setForm((f) => ({ ...f, imageUrl: updated.imageUrl || '' }));
      setImageUrlInput('');
    } catch (err) {
      setImageError(err instanceof Error ? err.message : 'Kunde inte hämta bilden.');
    } finally {
      setIsUploadingImage(false);
    }
  };

  // ── Ingrediens-hjälpfunktioner (redigera-läge) ──
  const setIngredientField = (idx: number, field: string, value: string | number) => {
    setForm((f) => {
      const ings = [...f.ingredients];
      ings[idx] = { ...ings[idx], [field]: value };
      return { ...f, ingredients: ings };
    });
  };

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

  const removeIngredient = (idx: number) =>
    setForm((f) => {
      const ings = [...f.ingredients];
      ings.splice(idx, 1);
      return { ...f, ingredients: ings };
    });

  // ──────────────────────────────────────────────
  // VY-LÄGE
  // ──────────────────────────────────────────────
  if (!isEditing) {
    return (
      <div>
        {/* Bild */}
        {recipe.imageUrl ? (
          <img
            src={recipe.imageUrl}
            alt={recipe.name}
            style={{ width: '100%', maxHeight: '400px', objectFit: 'cover', borderRadius: '8px', marginBottom: '1.25rem', display: 'block' }}
          />
        ) : (
          <div style={{
            width: '100%', height: '200px', background: '#e9ecef', borderRadius: '8px',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: '4rem', fontWeight: 700, color: '#868e96', marginBottom: '1.25rem',
          }}>
            {recipe.name.charAt(0).toUpperCase()}
          </div>
        )}

        {/* Titel + knappar */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: '0.75rem', marginBottom: '1rem' }}>
          <h1 style={{ margin: 0, fontSize: '1.75rem' }}>{recipe.name}</h1>
          <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
            <button onClick={toggleLike} style={btnStyle(isLiked ? '#e53e3e' : undefined)}>
              {isLiked ? '♥ Gillad' : '♡ Gilla'}
            </button>
            <button onClick={loadPreview} disabled={isPreviewing} style={btnStyle()}>
              {isPreviewing ? 'Hämtar...' : 'Inventariegranskning'}
            </button>
            <button onClick={() => setIsEditing(true)} style={btnStyle()}>Redigera</button>
            <button onClick={handleDelete} disabled={isDeleting} style={btnStyle('#e53e3e')}>
              {isDeleting ? 'Tar bort...' : 'Ta bort'}
            </button>
          </div>
        </div>

        {error && <p style={errorStyle}>{error}</p>}

        {recipe.description && (
          <p style={{ color: '#555', marginBottom: '1.25rem', fontSize: '1.05rem' }}>{recipe.description}</p>
        )}

        {/* Ingredienser */}
        <section style={sectionStyle}>
          <h2 style={sectionTitle}>Ingredienser</h2>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: '0.4rem' }}>
            {recipe.ingredients.map((ing) => (
              <li key={ing.id} style={{ display: 'flex', gap: '0.5rem', alignItems: 'baseline' }}>
                <span style={{ fontWeight: 600, minWidth: '60px', textAlign: 'right' }}>
                  {Number(ing.quantity)} {ing.unit}
                </span>
                <span>{ing.product.canonicalName || ing.product.name}</span>
                {ing.note && <span style={{ color: '#868e96', fontSize: '0.875rem' }}>({ing.note})</span>}
              </li>
            ))}
          </ul>
        </section>

        {/* Instruktioner */}
        {recipe.instructions && (
          <section style={sectionStyle}>
            <h2 style={sectionTitle}>Instruktioner</h2>
            <SimpleMarkdownPreview text={recipe.instructions} />
          </section>
        )}

        {/* Inventarieförhandsgranskning */}
        {(preview || previewError) && (
          <section style={{ ...sectionStyle, marginTop: '1.5rem' }}>
            <h2 style={sectionTitle}>Inventariegranskning</h2>
            {previewError && <p style={errorStyle}>{previewError}</p>}
            {preview && (
              <>
                <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '1rem', fontSize: '0.9rem' }}>
                  <span>Totalt: <strong>{preview.summary.totalIngredients}</strong></span>
                  <span style={{ color: '#1f5f2c' }}>Räcker: <strong>{preview.summary.enoughCount}</strong></span>
                  <span style={{ color: '#8b0000' }}>Saknas: <strong>{preview.summary.missingCount}</strong></span>
                  {preview.summary.unitMismatchCount > 0 && (
                    <span style={{ color: '#8a4b00' }}>Enhetskonflikt: <strong>{preview.summary.unitMismatchCount}</strong></span>
                  )}
                </div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: '0.5rem' }}>
                  {preview.ingredients.map((ing) => (
                    <li key={ing.ingredientId} style={{
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      padding: '0.5rem 0.75rem', borderRadius: '6px', border: '1px solid #eee',
                      flexWrap: 'wrap', gap: '0.5rem',
                    }}>
                      <span>
                        <strong>{ing.productName}</strong>
                        {' '}<span style={{ color: '#555', fontSize: '0.875rem' }}>
                          {ing.requiredQuantity} {ing.requiredUnit}
                          {ing.status !== 'enough' && ing.missingQuantity > 0 && (
                            <> — saknar <strong>{ing.missingQuantity} {ing.requiredUnit}</strong></>
                          )}
                        </span>
                      </span>
                      <StatusBadge status={ing.status} />
                    </li>
                  ))}
                </ul>
              </>
            )}
          </section>
        )}
      </div>
    );
  }

  // ──────────────────────────────────────────────
  // REDIGERA-LÄGE
  // ──────────────────────────────────────────────
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
        <h1 style={{ margin: 0 }}>Redigera recept</h1>
        <button onClick={() => setIsEditing(false)} style={btnStyle()}>Avbryt</button>
      </div>

      {error && <p style={errorStyle}>{error}</p>}

      <form onSubmit={handleSave} style={{ display: 'grid', gap: '1.25rem' }}>
        {/* Bild-uppdatering */}
        <section style={sectionStyle}>
          <h2 style={sectionTitle}>Bild</h2>
          {recipe.imageUrl && (
            <img src={recipe.imageUrl} alt="" style={{ width: '100%', maxHeight: '200px', objectFit: 'cover', borderRadius: '6px', marginBottom: '0.75rem' }} />
          )}
          <div style={{ display: 'flex', gap: '0.5rem' }}>
            <input
              type="url"
              placeholder="https://... (bild-URL)"
              value={imageUrlInput}
              onChange={(e) => setImageUrlInput(e.target.value)}
              style={inputStyle}
            />
            <button type="button" onClick={handleImageUpdate} disabled={isUploadingImage || !imageUrlInput.trim()} style={btnStyle()}>
              {isUploadingImage ? 'Hämtar...' : 'Uppdatera bild'}
            </button>
          </div>
          {imageError && <p style={{ ...errorStyle, marginTop: '0.5rem' }}>{imageError}</p>}
        </section>

        {/* Grundinfo */}
        <section style={sectionStyle}>
          <h2 style={sectionTitle}>Receptdetaljer</h2>
          <label style={labelStyle}>Receptnamn *</label>
          <input type="text" required value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} style={{ ...inputStyle, marginBottom: '1rem' }} />

          <label style={labelStyle}>Beskrivning</label>
          <textarea value={form.description} onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))} rows={3} style={{ ...inputStyle, fontFamily: 'inherit', resize: 'vertical', marginBottom: '1rem' }} />

          <label style={labelStyle}>Instruktioner</label>
          <textarea value={form.instructions} onChange={(e) => setForm((f) => ({ ...f, instructions: e.target.value }))} rows={8} style={{ ...inputStyle, fontFamily: 'inherit', resize: 'vertical' }} />
        </section>

        {/* Ingredienser */}
        <section style={sectionStyle}>
          <h2 style={sectionTitle}>Ingredienser</h2>
          {form.ingredients.map((ing, idx) => (
            <div key={idx} style={{ display: 'grid', gridTemplateColumns: '1fr auto auto auto auto', gap: '0.5rem', marginBottom: '0.75rem', alignItems: 'center' }}>
              <select
                value={ing.productId}
                onChange={(e) => setIngredientField(idx, 'productId', Number(e.target.value))}
                style={inputStyle}
              >
                <option value={0}>Välj produkt...</option>
                {products.map((p) => (
                  <option key={p.id} value={p.id}>{p.canonicalName || p.name}</option>
                ))}
              </select>
              <input
                type="number"
                placeholder="Mängd"
                value={ing.quantity}
                min={0}
                step="any"
                onChange={(e) => setIngredientField(idx, 'quantity', e.target.value)}
                style={{ ...inputStyle, width: '80px' }}
              />
              <select
                value={ing.unit}
                onChange={(e) => setIngredientField(idx, 'unit', e.target.value)}
                style={{ ...inputStyle, width: '120px' }}
              >
                {UNIT_OPTIONS.map((u) => <option key={u.value} value={u.value}>{u.label}</option>)}
              </select>
              <input
                type="text"
                placeholder="Not (valfri)"
                value={ing.note}
                onChange={(e) => setIngredientField(idx, 'note', e.target.value)}
                style={{ ...inputStyle, width: '110px' }}
              />
              <button type="button" onClick={() => removeIngredient(idx)} style={{ ...btnStyle('#e53e3e'), whiteSpace: 'nowrap' }}>Ta bort</button>
            </div>
          ))}
          <button type="button" onClick={addIngredient} style={btnStyle()}>+ Lägg till ingrediens</button>
        </section>

        <div style={{ display: 'flex', gap: '0.75rem' }}>
          <button type="submit" disabled={isSaving} style={btnStyle('#0070f3')}>
            {isSaving ? 'Sparar...' : 'Spara ändringar'}
          </button>
          <button type="button" onClick={() => setIsEditing(false)} style={btnStyle()}>Avbryt</button>
        </div>
      </form>
    </div>
  );
}

// ──────────────────────────────────────────────
// Stilkonstanter
// ──────────────────────────────────────────────

function btnStyle(bg?: string): React.CSSProperties {
  return {
    padding: '0.45rem 0.9rem',
    background: bg || '#f0f0f0',
    color: bg ? '#fff' : '#333',
    border: '1px solid ' + (bg || '#ccc'),
    borderRadius: '6px',
    cursor: 'pointer',
    fontSize: '0.9rem',
    fontWeight: 500,
    whiteSpace: 'nowrap',
  };
}

const sectionStyle: React.CSSProperties = {
  border: '1px solid #dee2e6',
  borderRadius: '8px',
  padding: '1rem',
};

const sectionTitle: React.CSSProperties = {
  margin: '0 0 0.75rem',
  fontSize: '1.1rem',
  fontWeight: 700,
};

const inputStyle: React.CSSProperties = {
  width: '100%',
  padding: '0.6rem 0.75rem',
  border: '1px solid #ced4da',
  borderRadius: '6px',
  fontSize: '0.95rem',
  boxSizing: 'border-box',
};

const labelStyle: React.CSSProperties = {
  display: 'block',
  fontWeight: 600,
  marginBottom: '0.35rem',
};

const errorStyle: React.CSSProperties = {
  color: 'crimson',
  background: '#ffe5e5',
  padding: '0.6rem 0.75rem',
  borderRadius: '6px',
  margin: 0,
};