'use client'

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { filamentService, colorService } from '@/src/services/api';
import { Filament } from '@/src/types/filament';
import { bambuLabColors, colorsByFinish, getColorHex } from '@/src/data/bambuLabColorsComplete';
import '@/src/styles/select.css';

interface FilamentWithId extends Filament {
  id: string;
  createdAt?: string;
  updatedAt?: string;
  bojaHex?: string;
}

export default function AdminDashboard() {
  const router = useRouter();
  const [filaments, setFilaments] = useState<FilamentWithId[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [editingFilament, setEditingFilament] = useState<FilamentWithId | null>(null);
  const [showAddForm, setShowAddForm] = useState(false);
  const [darkMode, setDarkMode] = useState(false);
  const [mounted, setMounted] = useState(false);
  const [sortField, setSortField] = useState<string>('');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');

  // Initialize dark mode - default to true for admin
  useEffect(() => {
    setMounted(true);
    const saved = localStorage.getItem('darkMode');
    if (saved !== null) {
      setDarkMode(JSON.parse(saved));
    } else {
      // Default to dark mode for admin
      setDarkMode(true);
    }
  }, []);

  useEffect(() => {
    if (!mounted) return;
    
    localStorage.setItem('darkMode', JSON.stringify(darkMode));
    if (darkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [darkMode, mounted]);

  // Check authentication
  useEffect(() => {
    const token = localStorage.getItem('authToken');
    const expiry = localStorage.getItem('tokenExpiry');
    
    if (!token || !expiry || Date.now() > parseInt(expiry)) {
      router.push('/upadaj');
    }
  }, [router]);

  // Fetch filaments
  const fetchFilaments = async () => {
    try {
      setLoading(true);
      const filaments = await filamentService.getAll();
      setFilaments(filaments);
    } catch (err) {
      setError('Greška pri učitavanju filamenata');
      console.error('Fetch error:', err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchFilaments();
  }, []);

  // Sorting logic
  const handleSort = (field: string) => {
    if (sortField === field) {
      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
    } else {
      setSortField(field);
      setSortOrder('asc');
    }
  };

  const sortedFilaments = [...filaments].sort((a, b) => {
    if (!sortField) return 0;
    
    let aVal = a[sortField as keyof FilamentWithId];
    let bVal = b[sortField as keyof FilamentWithId];
    
    // Handle null/undefined values
    if (aVal === null || aVal === undefined) aVal = '';
    if (bVal === null || bVal === undefined) bVal = '';
    
    // Convert to strings for comparison
    aVal = String(aVal).toLowerCase();
    bVal = String(bVal).toLowerCase();
    
    if (aVal < bVal) return sortOrder === 'asc' ? -1 : 1;
    if (aVal > bVal) return sortOrder === 'asc' ? 1 : -1;
    return 0;
  });

  const handleSave = async (filament: Partial<FilamentWithId>) => {
    try {
      if (filament.id) {
        await filamentService.update(filament.id, filament);
      } else {
        await filamentService.create(filament);
      }
      
      setEditingFilament(null);
      setShowAddForm(false);
      fetchFilaments();
    } catch (err) {
      setError('Greška pri čuvanju filamenata');
      console.error('Save error:', err);
    }
  };

  const handleDelete = async (id: string) => {
    if (!confirm('Da li ste sigurni da želite obrisati ovaj filament?')) {
      return;
    }

    try {
      await filamentService.delete(id);
      fetchFilaments();
    } catch (err) {
      setError('Greška pri brisanju filamenata');
      console.error('Delete error:', err);
    }
  };

  const handleLogout = () => {
    localStorage.removeItem('authToken');
    localStorage.removeItem('tokenExpiry');
    router.push('/upadaj');
  };

  if (loading) {
    return <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
      <div className="text-gray-600 dark:text-gray-400">Učitavanje...</div>
    </div>;
  }

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
      {/* Main Content - Full Screen */}
      <div className="w-full">
          <header className="bg-white dark:bg-gray-800 shadow transition-colors">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 lg:py-6">
              <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <h1 className="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white">Admin</h1>
                <div className="flex flex-wrap gap-2 sm:gap-4 w-full sm:w-auto">
                  {!showAddForm && !editingFilament && (
                    <button
                      onClick={() => setShowAddForm(true)}
                      className="flex-1 sm:flex-initial px-3 sm:px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 text-sm sm:text-base"
                    >
                      Dodaj novi
                    </button>
                  )}
                  <button
                    onClick={() => router.push('/')}
                    className="flex-1 sm:flex-initial px-3 sm:px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm sm:text-base"
                  >
                    Nazad na sajt
                  </button>
                  {mounted && (
                    <button
                      onClick={() => setDarkMode(!darkMode)}
                      className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
                      title={darkMode ? 'Svetla tema' : 'Tamna tema'}
                    >
                      {darkMode ? '☀️' : '🌙'}
                    </button>
                  )}
                  <button
                    onClick={handleLogout}
                    className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
                  >
                    Odjava
                  </button>
                </div>
              </div>
            </div>
          </header>

          <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {error && (
          <div className="mb-4 p-4 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-400 rounded">
            {error}
          </div>
        )}

        {/* Add/Edit Form */}
        {(showAddForm || editingFilament) && (
          <div className="mb-8">
            <FilamentForm
              key={editingFilament?.id || 'new'}
              filament={editingFilament || {}}
              filaments={filaments}
              onSave={handleSave}
              onCancel={() => {
                setEditingFilament(null);
                setShowAddForm(false);
              }}
            />
          </div>
        )}

        {/* Filaments Table */}
        <div className="overflow-x-auto bg-white dark:bg-gray-800 rounded-lg shadow">
          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead className="bg-gray-50 dark:bg-gray-700">
              <tr>
                <th onClick={() => handleSort('tip')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                  Tip {sortField === 'tip' && (sortOrder === 'asc' ? '↑' : '↓')}
                </th>
                <th onClick={() => handleSort('finish')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                  Finish {sortField === 'finish' && (sortOrder === 'asc' ? '↑' : '↓')}
                </th>
                <th onClick={() => handleSort('boja')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                  Boja {sortField === 'boja' && (sortOrder === 'asc' ? '↑' : '↓')}
                </th>
                <th onClick={() => handleSort('refill')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                  Refill {sortField === 'refill' && (sortOrder === 'asc' ? '↑' : '↓')}
                </th>
                <th onClick={() => handleSort('vakum')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                  Vakuum {sortField === 'vakum' && (sortOrder === 'asc' ? '↑' : '↓')}
                </th>
                <th onClick={() => handleSort('otvoreno')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                  Otvoreno {sortField === 'otvoreno' && (sortOrder === 'asc' ? '↑' : '↓')}
                </th>
                <th onClick={() => handleSort('kolicina')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                  Količina {sortField === 'kolicina' && (sortOrder === 'asc' ? '↑' : '↓')}
                </th>
                <th onClick={() => handleSort('cena')} className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                  Cena {sortField === 'cena' && (sortOrder === 'asc' ? '↑' : '↓')}
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Akcije</th>
              </tr>
            </thead>
            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
              {sortedFilaments.map((filament) => (
                <tr key={filament.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.tip}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.finish}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                    <div className="flex items-center gap-2">
                      {filament.bojaHex && (
                        <div 
                          className="w-7 h-7 rounded border border-gray-300 dark:border-gray-600" 
                          style={{ backgroundColor: filament.bojaHex }}
                          title={filament.bojaHex}
                        />
                      )}
                      <span>{filament.boja}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                    {(() => {
                      const refillCount = parseInt(filament.refill) || 0;
                      if (refillCount > 0) {
                        return <span className="text-green-600 dark:text-green-400 font-semibold">{refillCount}</span>;
                      }
                      return <span className="text-gray-400 dark:text-gray-500">0</span>;
                    })()}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                    {(() => {
                      const match = filament.vakum?.match(/^(\d+)\s*vakuum/);
                      const vakuumCount = match ? parseInt(match[1]) : 0;
                      if (vakuumCount > 0) {
                        return <span className="text-green-600 dark:text-green-400 font-semibold">{vakuumCount}</span>;
                      }
                      return <span className="text-gray-400 dark:text-gray-500">0</span>;
                    })()}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                    {(() => {
                      const match = filament.otvoreno?.match(/^(\d+)\s*otvorena/);
                      const otvorenCount = match ? parseInt(match[1]) : 0;
                      if (otvorenCount > 0) {
                        return <span className="text-green-600 dark:text-green-400 font-semibold">{otvorenCount}</span>;
                      }
                      return <span className="text-gray-400 dark:text-gray-500">0</span>;
                    })()}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.kolicina}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{filament.cena}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <button
                      onClick={() => {
                        console.log('Editing filament:', filament);
                        setEditingFilament(filament);
                        setShowAddForm(false);
                      }}
                      className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 mr-3"
                      title="Izmeni"
                    >
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                      </svg>
                    </button>
                    <button
                      onClick={() => handleDelete(filament.id)}
                      className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
                      title="Obriši"
                    >
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                      </svg>
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
          </main>
      </div>
    </div>
  );
}

// Filament Form Component
function FilamentForm({ 
  filament, 
  filaments,
  onSave, 
  onCancel 
}: { 
  filament: Partial<FilamentWithId>, 
  filaments: FilamentWithId[],
  onSave: (filament: Partial<FilamentWithId>) => void,
  onCancel: () => void 
}) {
  const [formData, setFormData] = useState({
    tip: filament.tip || '',
    finish: filament.finish || '',
    boja: filament.boja || '',
    bojaHex: filament.bojaHex || '',
    refill: filament.refill || '',
    vakum: filament.vakum || '',
    otvoreno: filament.otvoreno || '',
    kolicina: filament.kolicina || '',
    cena: filament.cena || (filament.id ? '' : '3999'), // Default price for new filaments
  });

  const [availableColors, setAvailableColors] = useState<Array<{id: string, name: string, hex: string}>>([]);

  // Load colors from API
  useEffect(() => {
    const loadColors = async () => {
      try {
        const colors = await colorService.getAll();
        setAvailableColors(colors.sort((a: any, b: any) => a.name.localeCompare(b.name)));
      } catch (error) {
        console.error('Error loading colors:', error);
        // Fallback to colors from existing filaments
        const existingColors = [...new Set(filaments.map(f => f.boja).filter(Boolean))];
        const colorObjects = existingColors.map((color, idx) => ({
          id: `existing-${idx}`,
          name: color,
          hex: filaments.find(f => f.boja === color)?.bojaHex || '#000000'
        }));
        setAvailableColors(colorObjects.sort((a, b) => a.name.localeCompare(b.name)));
      }
    };

    loadColors();
    
    // Reload colors when window gets focus (in case user added colors in another tab)
    const handleFocus = () => loadColors();
    window.addEventListener('focus', handleFocus);
    
    return () => window.removeEventListener('focus', handleFocus);
  }, [filaments]);

  // Update form when filament prop changes
  useEffect(() => {
    setFormData({
      tip: filament.tip || '',
      finish: filament.finish || '',
      boja: filament.boja || '',
      bojaHex: filament.bojaHex || '',
      refill: filament.refill || '',
      vakum: filament.vakum || '',
      otvoreno: filament.otvoreno || '',
      kolicina: filament.kolicina || '',
      cena: filament.cena || (filament.id ? '' : '3999'), // Default price for new filaments
    });
  }, [filament]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    
    if (name === 'refill') {
      // Auto-set price based on refill quantity
      const refillCount = parseInt(value) || 0;
      setFormData({
        ...formData,
        [name]: value,
        // Auto-fill price based on refill status if this is a new filament
        ...(filament.id ? {} : { cena: refillCount > 0 ? '3499' : '3999' })
      });
    } else {
      setFormData({
        ...formData,
        [name]: value
      });
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave({
      ...filament,
      ...formData
    });
  };

  return (
    <div className="mb-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow transition-colors">
      <h2 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
        {filament.id ? 'Izmeni filament' : 'Dodaj novi filament'}
      </h2>
      <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Tip</label>
          <select
            name="tip"
            value={formData.tip}
            onChange={handleChange}
            required
            className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">Izaberi tip</option>
            <option value="ABS">ABS</option>
            <option value="ASA">ASA</option>
            <option value="PA6">PA6</option>
            <option value="PAHT">PAHT</option>
            <option value="PC">PC</option>
            <option value="PET">PET</option>
            <option value="PETG">PETG</option>
            <option value="PLA">PLA</option>
            <option value="PPA">PPA</option>
            <option value="PPS">PPS</option>
            <option value="TPU">TPU</option>
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Finish</label>
          <select
            name="finish"
            value={formData.finish}
            onChange={handleChange}
            required
            className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">Izaberi finish</option>
            <option value="85A">85A</option>
            <option value="90A">90A</option>
            <option value="95A HF">95A HF</option>
            <option value="Aero">Aero</option>
            <option value="Basic">Basic</option>
            <option value="Basic Gradient">Basic Gradient</option>
            <option value="CF">CF</option>
            <option value="FR">FR</option>
            <option value="Galaxy">Galaxy</option>
            <option value="GF">GF</option>
            <option value="Glow">Glow</option>
            <option value="HF">HF</option>
            <option value="Marble">Marble</option>
            <option value="Matte">Matte</option>
            <option value="Metal">Metal</option>
            <option value="Silk Multi-Color">Silk Multi-Color</option>
            <option value="Silk+">Silk+</option>
            <option value="Sparkle">Sparkle</option>
            <option value="Translucent">Translucent</option>
            <option value="Wood">Wood</option>
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Boja</label>
          <select
            name="boja"
            value={formData.boja}
            onChange={(e) => {
              const selectedColorName = e.target.value;
              let hexValue = formData.bojaHex;
              
              // Use Bambu Lab colors
              const bambuHex = getColorHex(selectedColorName);
              if (bambuHex !== "#000000") {
                hexValue = bambuHex;
              }
              
              // Check available colors from database
              const dbColor = availableColors.find(c => c.name === selectedColorName);
              if (dbColor && hexValue === formData.bojaHex) {
                hexValue = dbColor.hex;
              }
              
              setFormData({
                ...formData,
                boja: selectedColorName,
                bojaHex: hexValue
              });
            }}
            required
            className="custom-select w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">Izaberite boju</option>
            {/* Show Bambu Lab colors based on finish */}
            {formData.finish && colorsByFinish[formData.finish as keyof typeof colorsByFinish] && (
              <optgroup label={`Bambu Lab ${formData.finish} boje`}>
                {colorsByFinish[formData.finish as keyof typeof colorsByFinish].map(colorName => (
                  <option key={`bambu-${colorName}`} value={colorName}>
                    {colorName}
                  </option>
                ))}
              </optgroup>
            )}
            {/* Show all available colors from database */}
            {availableColors.length > 0 && (
              <optgroup label='Ostale boje'>
                {availableColors.map(color => (
                  <option key={color.id} value={color.name}>
                    {color.name}
                  </option>
                ))}
              </optgroup>
            )}
            <option value="custom">Druga boja...</option>
          </select>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">
            {formData.boja && formData.boja !== 'custom' ? `Hex kod za ${formData.boja}` : 'Hex kod boje'}
          </label>
          <div className="flex items-center gap-2">
            <input
              type="color"
              name="bojaHex"
              value={formData.bojaHex || '#000000'}
              onChange={handleChange}
              disabled={!!(formData.boja && formData.boja !== 'custom' && getColorHex(formData.boja) !== "#000000")}
              className="w-full h-10 px-1 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
            />
            {formData.bojaHex && (
              <span className="text-sm text-gray-600 dark:text-gray-400">{formData.bojaHex}</span>
            )}
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Količina</label>
          <input
            type="number"
            name="kolicina"
            value={formData.kolicina}
            onChange={handleChange}
            min="0"
            step="1"
            placeholder="0"
            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Cena</label>
          <input
            type="text"
            name="cena"
            value={formData.cena}
            onChange={handleChange}
            placeholder="npr. 2500"
            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        {/* Quantity inputs for refill, vakuum, and otvoreno */}
        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Refill količina</label>
          <input
            type="number"
            name="refill"
            value={(() => {
              if (!formData.refill) return 0;
              const num = parseInt(formData.refill);
              return isNaN(num) ? (formData.refill.toLowerCase() === 'da' ? 1 : 0) : num;
            })()}
            onChange={(e) => {
              const value = parseInt(e.target.value) || 0;
              handleChange({
                target: {
                  name: 'refill',
                  value: value > 0 ? value.toString() : 'Ne'
                }
              } as any);
            }}
            min="0"
            step="1"
            placeholder="0"
            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Vakuum količina</label>
          <input
            type="number"
            name="vakum"
            value={(() => {
              if (!formData.vakum) return 0;
              const match = formData.vakum.match(/^(\d+)\s*vakuum/);
              if (match) return parseInt(match[1]);
              return formData.vakum.toLowerCase().includes('vakuum') ? 1 : 0;
            })()}
            onChange={(e) => {
              const value = parseInt(e.target.value) || 0;
              handleChange({
                target: {
                  name: 'vakum',
                  value: value > 0 ? `${value} vakuum` : 'Ne'
                }
              } as any);
            }}
            min="0"
            step="1"
            placeholder="0"
            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Otvoreno količina</label>
          <input
            type="number"
            name="otvoreno"
            value={(() => {
              if (!formData.otvoreno) return 0;
              const match = formData.otvoreno.match(/^(\d+)\s*otvorena/);
              if (match) return parseInt(match[1]);
              return formData.otvoreno.toLowerCase().includes('otvorena') ? 1 : 0;
            })()}
            onChange={(e) => {
              const value = parseInt(e.target.value) || 0;
              handleChange({
                target: {
                  name: 'otvoreno',
                  value: value > 0 ? `${value} otvorena` : 'Ne'
                }
              } as any);
            }}
            min="0"
            step="1"
            placeholder="0"
            className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        <div className="md:col-span-2 flex justify-end gap-4 mt-4">
          <button
            type="button"
            onClick={onCancel}
            className="px-4 py-2 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors"
          >
            Otkaži
          </button>
          <button
            type="submit"
            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
          >
            Sačuvaj
          </button>
        </div>
      </form>
    </div>
  );
}