'use client'

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

interface Color {
  id: string;
  name: string;
  hex: string;
  cena_refill?: number;
  cena_spulna?: number;
  createdAt?: string;
  updatedAt?: string;
}

export default function ColorsManagement() {
  const router = useRouter();
  const [colors, setColors] = useState<Color[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [editingColor, setEditingColor] = useState<Color | null>(null);
  const [showAddForm, setShowAddForm] = useState(false);
  const [darkMode, setDarkMode] = useState(false);
  const [mounted, setMounted] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedColors, setSelectedColors] = useState<Set<string>>(new Set());

  // 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(() => {
    // Wait for component to mount to avoid SSR issues with localStorage
    if (!mounted) return;

    const token = localStorage.getItem('authToken');
    const expiry = localStorage.getItem('tokenExpiry');

    if (!token || !expiry || Date.now() > parseInt(expiry)) {
      window.location.href = '/upadaj';
    }
  }, [mounted]);

  // Fetch colors
  const fetchColors = async () => {
    try {
      setLoading(true);
      const colors = await colorService.getAll();
      setColors(colors.sort((a: Color, b: Color) => a.name.localeCompare(b.name)));
    } catch (err) {
      setError('Greška pri učitavanju boja');
      console.error('Fetch error:', err);
    } finally {
      setLoading(false);
    }
  };

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


  const handleSave = async (color: Partial<Color>) => {
    try {
      if (color.id) {
        await colorService.update(color.id, { 
          name: color.name!, 
          hex: color.hex!,
          cena_refill: color.cena_refill,
          cena_spulna: color.cena_spulna
        });
      } else {
        await colorService.create({ 
          name: color.name!, 
          hex: color.hex!,
          cena_refill: color.cena_refill,
          cena_spulna: color.cena_spulna
        });
      }
      
      setEditingColor(null);
      setShowAddForm(false);
      fetchColors();
    } catch (err) {
      setError('Greška pri čuvanju boje');
      console.error('Save error:', err);
    }
  };

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

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

  const handleBulkDelete = async () => {
    if (selectedColors.size === 0) {
      setError('Molimo izaberite boje za brisanje');
      return;
    }

    if (!confirm(`Da li ste sigurni da želite obrisati ${selectedColors.size} boja?`)) {
      return;
    }

    try {
      // Delete all selected colors
      await Promise.all(Array.from(selectedColors).map(id => colorService.delete(id)));
      setSelectedColors(new Set());
      fetchColors();
    } catch (err) {
      setError('Greška pri brisanju boja');
      console.error('Bulk delete error:', err);
    }
  };

  const toggleColorSelection = (colorId: string) => {
    const newSelection = new Set(selectedColors);
    if (newSelection.has(colorId)) {
      newSelection.delete(colorId);
    } else {
      newSelection.add(colorId);
    }
    setSelectedColors(newSelection);
  };

  const toggleSelectAll = () => {
    const filteredColors = colors.filter(color => 
      color.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      color.hex.toLowerCase().includes(searchTerm.toLowerCase())
    );
    
    const allFilteredSelected = filteredColors.every(c => selectedColors.has(c.id));
    
    if (allFilteredSelected) {
      // Deselect all
      setSelectedColors(new Set());
    } else {
      // Select all filtered
      setSelectedColors(new Set(filteredColors.map(c => c.id)));
    }
  };

  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">
      <div className="flex">
        {/* Sidebar */}
        <div className="w-64 bg-white dark:bg-gray-800 shadow-lg h-screen">
          <div className="p-6">
            <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">Admin Panel</h2>
            <nav className="space-y-2">
              <a
                href="/upadaj/dashboard"
                className="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
              >
                Filamenti
              </a>
              <a
                href="/upadaj/colors"
                className="block px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded"
              >
                Boje
              </a>
            </nav>
          </div>
        </div>

        {/* Main Content */}
        <div className="flex-1">
          <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-6">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-4">
                  <img 
                    src="/logo.png" 
                    alt="Filamenteka" 
                    className="h-20 sm:h-32 w-auto drop-shadow-lg"
                  />
                  <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Upravljanje bojama</h1>
                </div>
                <div className="flex gap-4">
                  {!showAddForm && !editingColor && (
                    <button
                      onClick={() => setShowAddForm(true)}
                      className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
                    >
                      Dodaj novu boju
                    </button>
                  )}
                  {selectedColors.size > 0 && (
                    <button
                      onClick={handleBulkDelete}
                      className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
                    >
                      Obriši izabrane ({selectedColors.size})
                    </button>
                  )}
                  <button
                    onClick={() => router.push('/')}
                    className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
                  >
                    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 Form (stays at top) */}
            {showAddForm && (
              <ColorForm
                color={{}}
                onSave={handleSave}
                onCancel={() => {
                  setShowAddForm(false);
                }}
              />
            )}

            {/* Search Bar */}
            <div className="mb-4">
              <div className="relative">
                <input
                  type="text"
                  placeholder="Pretraži boje..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="w-full px-4 py-2 pl-10 pr-4 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-blue-500"
                />
                <svg className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
              </div>
            </div>

            {/* Colors 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 className="px-6 py-3 text-left">
                      <input
                        type="checkbox"
                        checked={(() => {
                          const filtered = colors.filter(color => 
                            color.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                            color.hex.toLowerCase().includes(searchTerm.toLowerCase())
                          );
                          return filtered.length > 0 && filtered.every(c => selectedColors.has(c.id));
                        })()}
                        onChange={toggleSelectAll}
                        className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                      />
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Boja</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Naziv</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Hex kod</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Cena Refil</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Cena Spulna</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">
                  {colors
                    .filter(color => 
                      color.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                      color.hex.toLowerCase().includes(searchTerm.toLowerCase())
                    )
                    .map((color) => (
                    <tr key={color.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
                      <td className="px-6 py-4 whitespace-nowrap">
                        <input
                          type="checkbox"
                          checked={selectedColors.has(color.id)}
                          onChange={() => toggleColorSelection(color.id)}
                          className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                        />
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div 
                          className="w-10 h-10 rounded border-2 border-gray-300 dark:border-gray-600" 
                          style={{ backgroundColor: color.hex }}
                        />
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{color.name}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">{color.hex}</td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-bold text-green-600 dark:text-green-400">
                        {(color.cena_refill || 3499).toLocaleString('sr-RS')} RSD
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-bold text-blue-500 dark:text-blue-400">
                        {(color.cena_spulna || 3999).toLocaleString('sr-RS')} RSD
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <button
                          onClick={() => setEditingColor(color)}
                          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(color.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>
      
      {/* Edit Modal */}
      {editingColor && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-auto">
            <div className="p-6">
              <h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">Izmeni boju</h3>
              <ColorForm
                color={editingColor}
                onSave={(color) => {
                  handleSave(color);
                  setEditingColor(null);
                }}
                onCancel={() => setEditingColor(null)}
                isModal={true}
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// Color Form Component
function ColorForm({ 
  color, 
  onSave, 
  onCancel,
  isModal = false
}: { 
  color: Partial<Color>, 
  onSave: (color: Partial<Color>) => void,
  onCancel: () => void,
  isModal?: boolean
}) {
  const [formData, setFormData] = useState({
    name: color.name || '',
    hex: color.hex || '#000000',
    cena_refill: color.cena_refill || 3499,
    cena_spulna: color.cena_spulna || 3999,
  });
  
  // Check if this is a Bambu Lab predefined color
  const isBambuLabColor = !!(formData.name && bambuLabColors.hasOwnProperty(formData.name));
  const bambuHex = formData.name ? getColorHex(formData.name) : null;

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value, type } = e.target;
    setFormData({
      ...formData,
      [name]: type === 'number' ? parseInt(value) || 0 : value
    });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Use Bambu Lab hex if it's a predefined color
    const hexToSave = isBambuLabColor && bambuHex ? bambuHex : formData.hex;
    onSave({
      ...color,
      name: formData.name,
      hex: hexToSave,
      cena_refill: formData.cena_refill,
      cena_spulna: formData.cena_spulna
    });
  };

  return (
    <div className={isModal ? "" : "mb-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow transition-colors"}>
      {!isModal && (
        <h2 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
          {color.id ? 'Izmeni boju' : 'Dodaj novu boju'}
        </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">Naziv boje</label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            required
            placeholder="npr. Crvena"
            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">Hex kod boje</label>
          <div className="flex gap-2 items-center">
            <input
              type="color"
              name="hex"
              value={isBambuLabColor && bambuHex ? bambuHex : formData.hex}
              onChange={handleChange}
              disabled={isBambuLabColor}
              className={`w-12 h-12 p-1 border-2 border-gray-300 dark:border-gray-600 rounded-md ${isBambuLabColor ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}
              style={{ backgroundColor: isBambuLabColor && bambuHex ? bambuHex : formData.hex }}
            />
            <input
              type="text"
              name="hex"
              value={isBambuLabColor && bambuHex ? bambuHex : formData.hex}
              onChange={handleChange}
              required
              readOnly={isBambuLabColor}
              pattern="^#[0-9A-Fa-f]{6}$"
              placeholder="#000000"
              className={`flex-1 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 ${isBambuLabColor ? 'bg-gray-100 dark:bg-gray-900 cursor-not-allowed' : ''}`}
            />
          </div>
          {isBambuLabColor && (
            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
              Bambu Lab predefinisana boja - hex kod se ne može menjati
            </p>
          )}
        </div>

        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300">Cena Refil</label>
          <input
            type="number"
            name="cena_refill"
            value={formData.cena_refill}
            onChange={handleChange}
            required
            min="0"
            step="1"
            placeholder="3499"
            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 Spulna</label>
          <input
            type="number"
            name="cena_spulna"
            value={formData.cena_spulna}
            onChange={handleChange}
            required
            min="0"
            step="1"
            placeholder="3999"
            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>
  );
}