'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';
import { UNIT_OPTIONS } from '../../../lib/units';

// ──────────────────────────────────────────────
// 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>;
        const numberedMatch = line.match(/^(\d+)\.\s+(.*)/);
        if (numberedMatch) return (
          <div key={i} style={{ display: 'flex', gap: '0.6rem', marginBottom: '0.35rem' }}>
            <span style={{ fontWeight: 700, minWidth: '1.5rem', textAlign: 'right', flexShrink: 0 }}>{numberedMatch[1]}.</span>
            <span>{numberedMatch[2]}</span>
          </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>
  );
}

// ──────────────────────────────────────────────
// 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);
  const [servings, setServings] = useState<number>(initialRecipe.servings ?? 1);

  // Redigeringsformulär-state
  const [form, setForm] = useState({
    name: initialRecipe.name,
    description: initialRecipe.description || '',
    instructions: initialRecipe.instructions || '',
    imageUrl: initialRecipe.imageUrl || '',
    servings: initialRecipe.servings as number | null,
    isPublic: initialRecipe.isPublic,
    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>
          {recipe.servings && (
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1rem', fontSize: '0.9rem', flexWrap: 'wrap' }}>
              <span style={{ color: '#555' }}>Portioner:</span>
              <button type="button" onClick={() => setServings((s) => Math.max(1, s - 1))} style={btnStyle()}>−</button>
              <span style={{ fontWeight: 700, minWidth: '2rem', textAlign: 'center' }}>{servings}</span>
              <button type="button" onClick={() => setServings((s) => s + 1)} style={btnStyle()}>+</button>
              {servings !== recipe.servings && (
                <button type="button" onClick={() => setServings(recipe.servings!)} style={{ ...btnStyle(), fontSize: '0.8rem', padding: '0.3rem 0.6rem' }}>
                  Återställ ({recipe.servings})
                </button>
              )}
            </div>
          )}
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: '0.4rem' }}>
            {recipe.ingredients.map((ing) => {
              const scale = recipe.servings ? servings / recipe.servings : 1;
              const qty = Number(ing.quantity) * scale;
              const displayQty = qty % 1 === 0 ? qty : parseFloat(qty.toFixed(2));
              return (
                <li key={ing.id} style={{ display: 'flex', gap: '0.5rem', alignItems: 'baseline' }}>
                  <span style={{ fontWeight: 600, minWidth: '60px', textAlign: 'right' }}>
                    {displayQty} {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>
        )}

        {/* Näringsvärden */}
        {(() => {
          const scale = recipe.servings ? servings / recipe.servings : 1;
          const totals = recipe.ingredients.reduce(
            (acc, ing) => {
              const n = ing.product.nutrition;
              if (!n) return acc;
              const qty = Number(ing.quantity) * scale;
              const qtyInGrams = ing.unit === 'g' ? qty : ing.unit === 'kg' ? qty * 1000 : null;
              if (qtyInGrams === null) return acc;
              const f = qtyInGrams / 100;
              return {
                calories: acc.calories + (n.calories ?? 0) * f,
                protein: acc.protein + (n.protein ?? 0) * f,
                fat: acc.fat + (n.fat ?? 0) * f,
                carbohydrates: acc.carbohydrates + (n.carbohydrates ?? 0) * f,
              };
            },
            { calories: 0, protein: 0, fat: 0, carbohydrates: 0 },
          );
          const hasAny = recipe.ingredients.some(
            (i) => i.product.nutrition && (i.unit === 'g' || i.unit === 'kg'),
          );
          if (!hasAny) return null;
          const portionLabel = recipe.servings
            ? `${servings} ${servings === 1 ? 'portion' : 'portioner'}`
            : 'hela receptet';
          return (
            <section style={{ ...sectionStyle, marginTop: '1.5rem' }}>
              <h2 style={sectionTitle}>Näringsvärden ({portionLabel})</h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))', gap: '0.75rem' }}>
                {[
                  { label: 'Energi', value: totals.calories, unit: 'kcal' },
                  { label: 'Protein', value: totals.protein, unit: 'g' },
                  { label: 'Fett', value: totals.fat, unit: 'g' },
                  { label: 'Kolhydrater', value: totals.carbohydrates, unit: 'g' },
                ].map(({ label, value, unit }) => (
                  <div key={label} style={{ padding: '0.75rem', background: '#f8f9fa', borderRadius: '6px', textAlign: 'center' }}>
                    <div style={{ fontSize: '1.2rem', fontWeight: 700 }}>
                      {value < 1 ? value.toFixed(1) : Math.round(value)}{unit}
                    </div>
                    <div style={{ fontSize: '0.8rem', color: '#666' }}>{label}</div>
                  </div>
                ))}
              </div>
              <p style={{ fontSize: '0.8rem', color: '#888', marginTop: '0.5rem', marginBottom: 0 }}>
                * Endast ingredienser med viktenhet (g/kg) och registrerade näringsvärden inkluderas.
              </p>
            </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>

        {/* Portioner */}
        <section style={sectionStyle}>
          <h2 style={sectionTitle}>Portioner</h2>
          <input
            type="number"
            min={1}
            step={1}
            value={form.servings ?? ''}
            onChange={(e) => setForm((f) => ({ ...f, servings: e.target.value ? Number(e.target.value) : null }))}
            style={{ ...inputStyle, width: '120px' }}
            placeholder="t.ex. 4"
          />
          <p style={{ fontSize: '0.85rem', color: '#666', marginTop: '0.4rem', marginBottom: 0 }}>
            Anges portioner kan mängderna skalas på receptsidan.
          </p>
        </section>

        {/* Synlighet */}
        <section style={sectionStyle}>
          <h2 style={sectionTitle}>Synlighet</h2>
          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }}>
            <input
              type="checkbox"
              checked={form.isPublic}
              onChange={(e) => setForm((f) => ({ ...f, isPublic: e.target.checked }))}
              style={{ width: 16, height: 16 }}
            />
            <span>Publikt recept (synligt för alla inloggade)</span>
          </label>
          <p style={{ fontSize: '0.85rem', color: '#666', marginTop: '0.4rem', marginBottom: 0 }}>
            Privata recept syns bara för dig och de du delar med.
          </p>
        </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,
};