'use client'

import { useState, useEffect, useCallback, useRef } from 'react';
import { saleService, customerService, filamentService, colorService } from '@/src/services/api';
import { Customer, Sale, SaleItem, CreateSaleRequest } from '@/src/types/sales';
import { Filament } from '@/src/types/filament';

interface LineItem {
  filament_id: string;
  item_type: 'refill' | 'spulna';
  quantity: number;
}

export default function SalesPage() {
  const [mounted, setMounted] = useState(false);
  const [darkMode, setDarkMode] = useState(false);

  // Sales list state
  const [sales, setSales] = useState<Sale[]>([]);
  const [totalSales, setTotalSales] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  // Modal state
  const [showNewSaleModal, setShowNewSaleModal] = useState(false);
  const [showDetailModal, setShowDetailModal] = useState(false);
  const [selectedSale, setSelectedSale] = useState<Sale | null>(null);
  const [detailLoading, setDetailLoading] = useState(false);

  const LIMIT = 50;

  // Dark mode init
  useEffect(() => {
    setMounted(true);
    const saved = localStorage.getItem('darkMode');
    setDarkMode(saved !== null ? JSON.parse(saved) : 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]);

  // Auth check
  useEffect(() => {
    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 sales
  const fetchSales = useCallback(async () => {
    try {
      setLoading(true);
      setError('');
      const data = await saleService.getAll(page, LIMIT);
      setSales(data.sales);
      setTotalSales(data.total);
    } catch {
      setError('Greska pri ucitavanju prodaja');
    } finally {
      setLoading(false);
    }
  }, [page]);

  useEffect(() => {
    if (!mounted) return;
    fetchSales();
  }, [mounted, fetchSales]);

  const totalPages = Math.ceil(totalSales / LIMIT);

  const handleViewDetail = async (sale: Sale) => {
    try {
      setDetailLoading(true);
      setShowDetailModal(true);
      const detail = await saleService.getById(sale.id);
      setSelectedSale(detail);
    } catch {
      setError('Greska pri ucitavanju detalja prodaje');
      setShowDetailModal(false);
    } finally {
      setDetailLoading(false);
    }
  };

  const handleDeleteSale = async (id: string) => {
    if (!window.confirm('Da li ste sigurni da zelite da obrisete ovu prodaju?')) return;
    try {
      await saleService.delete(id);
      setShowDetailModal(false);
      setSelectedSale(null);
      fetchSales();
    } catch {
      setError('Greska pri brisanju prodaje');
    }
  };

  const formatDate = (dateStr?: string) => {
    if (!dateStr) return '-';
    const date = new Date(dateStr);
    return date.toLocaleDateString('sr-RS', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
    });
  };

  const formatPrice = (amount: number) => {
    return amount.toLocaleString('sr-RS') + ' RSD';
  };

  if (!mounted) return null;

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
      {/* Sidebar */}
      <div className="w-64 bg-white dark:bg-gray-800 shadow-lg h-screen sticky top-0">
        <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="/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 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
            >
              Boje
            </a>
            <a
              href="/upadaj/requests"
              className="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
            >
              Zahtevi za boje
            </a>
            <a
              href="/upadaj/sales"
              className="block px-4 py-2 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded"
            >
              Prodaja
            </a>
            <a
              href="/upadaj/customers"
              className="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
            >
              Kupci
            </a>
            <a
              href="/upadaj/analytics"
              className="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
            >
              Analitika
            </a>
          </nav>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex-1 p-8">
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Prodaja</h1>
          <div className="flex items-center gap-4">
            <button
              onClick={() => setDarkMode(!darkMode)}
              className="px-3 py-2 text-sm bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
            >
              {darkMode ? 'Svetli mod' : 'Tamni mod'}
            </button>
            <button
              onClick={() => setShowNewSaleModal(true)}
              className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition-colors font-medium"
            >
              Nova prodaja
            </button>
          </div>
        </div>

        {error && (
          <div className="mb-4 p-3 bg-red-100 dark:bg-red-900/30 border border-red-300 dark:border-red-700 text-red-700 dark:text-red-400 rounded">
            {error}
          </div>
        )}

        {/* Sales Table */}
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
          {loading ? (
            <div className="p-8 text-center text-gray-500 dark:text-gray-400">Ucitavanje...</div>
          ) : sales.length === 0 ? (
            <div className="p-8 text-center text-gray-500 dark:text-gray-400">Nema prodaja</div>
          ) : (
            <table className="w-full">
              <thead className="bg-gray-50 dark:bg-gray-700">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    Datum
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    Ime kupca
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    Stavki
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    Cena
                  </th>
                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    Akcije
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
                {sales.map((sale) => (
                  <tr key={sale.id} className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                      {formatDate(sale.created_at)}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                      {sale.customer_name || '-'}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
                      {sale.item_count ?? 0}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                      {formatPrice(sale.total_amount)}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm space-x-2">
                      <button
                        onClick={() => handleViewDetail(sale)}
                        className="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
                      >
                        Detalji
                      </button>
                      <button
                        onClick={() => handleDeleteSale(sale.id)}
                        className="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
                      >
                        Obrisi
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>

        {/* Pagination */}
        {totalPages > 1 && (
          <div className="mt-4 flex justify-center items-center gap-2">
            <button
              onClick={() => setPage((p) => Math.max(1, p - 1))}
              disabled={page === 1}
              className="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              Prethodna
            </button>
            <span className="text-sm text-gray-600 dark:text-gray-400">
              Strana {page} od {totalPages}
            </span>
            <button
              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
              disabled={page === totalPages}
              className="px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              Sledeca
            </button>
          </div>
        )}
      </div>

      {/* New Sale Modal */}
      {showNewSaleModal && (
        <NewSaleModal
          onClose={() => setShowNewSaleModal(false)}
          onCreated={() => {
            setShowNewSaleModal(false);
            fetchSales();
          }}
          formatPrice={formatPrice}
        />
      )}

      {/* Sale Detail Modal */}
      {showDetailModal && (
        <SaleDetailModal
          sale={selectedSale}
          loading={detailLoading}
          onClose={() => {
            setShowDetailModal(false);
            setSelectedSale(null);
          }}
          onDelete={(id) => handleDeleteSale(id)}
          formatPrice={formatPrice}
          formatDate={formatDate}
        />
      )}
    </div>
  );
}

// --- NewSaleModal ---

function NewSaleModal({
  onClose,
  onCreated,
  formatPrice,
}: {
  onClose: () => void;
  onCreated: () => void;
  formatPrice: (n: number) => string;
}) {
  const [customerName, setCustomerName] = useState('');
  const [customerPhone, setCustomerPhone] = useState('');
  const [customerCity, setCustomerCity] = useState('');
  const [customerNotes, setCustomerNotes] = useState('');
  const [notes, setNotes] = useState('');
  const [items, setItems] = useState<LineItem[]>([{ filament_id: '', item_type: 'refill', quantity: 1 }]);
  const [filaments, setFilaments] = useState<Filament[]>([]);
  const [colorPrices, setColorPrices] = useState<Record<string, { cena_refill: number; cena_spulna: number }>>({});
  const [customerSuggestions, setCustomerSuggestions] = useState<Customer[]>([]);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState('');
  const searchTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
  const suggestionsRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const loadData = async () => {
      try {
        const [filamentData, colorData] = await Promise.all([
          filamentService.getAll(),
          colorService.getAll(),
        ]);
        setFilaments(filamentData);
        const priceMap: Record<string, { cena_refill: number; cena_spulna: number }> = {};
        for (const c of colorData) {
          priceMap[c.name] = { cena_refill: c.cena_refill || 3499, cena_spulna: c.cena_spulna || 3999 };
        }
        setColorPrices(priceMap);
      } catch {
        // Data failed to load
      }
    };
    loadData();
  }, []);

  // Close suggestions on outside click
  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (suggestionsRef.current && !suggestionsRef.current.contains(e.target as Node)) {
        setShowSuggestions(false);
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  const handleCustomerSearch = (value: string) => {
    setCustomerName(value);
    if (searchTimeout.current) clearTimeout(searchTimeout.current);
    if (value.length < 2) {
      setCustomerSuggestions([]);
      setShowSuggestions(false);
      return;
    }
    searchTimeout.current = setTimeout(async () => {
      try {
        const results = await customerService.search(value);
        setCustomerSuggestions(results);
        setShowSuggestions(results.length > 0);
      } catch {
        setCustomerSuggestions([]);
        setShowSuggestions(false);
      }
    }, 300);
  };

  const selectCustomer = (customer: Customer) => {
    setCustomerName(customer.name);
    setCustomerPhone(customer.phone || '');
    setCustomerCity(customer.city || '');
    setCustomerNotes(customer.notes || '');
    setShowSuggestions(false);
  };

  const getFilamentById = (id: string): Filament | undefined => {
    return filaments.find((f) => String(f.id) === String(id));
  };

  const getFilamentPrice = (filament: Filament, type: 'refill' | 'spulna'): number => {
    const prices = colorPrices[filament.boja];
    const base = type === 'refill' ? (prices?.cena_refill || 3499) : (prices?.cena_spulna || 3999);
    if (filament.sale_active && filament.sale_percentage) {
      return Math.round(base * (1 - filament.sale_percentage / 100));
    }
    return base;
  };

  const getItemPrice = (item: LineItem): number => {
    const filament = getFilamentById(item.filament_id);
    if (!filament) return 0;
    return getFilamentPrice(filament, item.item_type) * item.quantity;
  };

  const totalAmount = items.reduce((sum, item) => sum + getItemPrice(item), 0);

  const getAvailableStock = (filament: Filament, type: 'refill' | 'spulna'): number => {
    return type === 'refill' ? filament.refill : filament.spulna;
  };

  const updateItem = (index: number, updates: Partial<LineItem>) => {
    setItems((prev) => {
      const next = [...prev];
      next[index] = { ...next[index], ...updates };
      return next;
    });
  };

  const removeItem = (index: number) => {
    if (items.length <= 1) return;
    setItems((prev) => prev.filter((_, i) => i !== index));
  };

  const addItem = () => {
    setItems((prev) => [...prev, { filament_id: '', item_type: 'refill', quantity: 1 }]);
  };

  const handleSubmit = async () => {
    if (!customerName.trim()) {
      setSubmitError('Ime kupca je obavezno');
      return;
    }
    const validItems = items.filter((item) => item.filament_id !== '' && item.quantity > 0);
    if (validItems.length === 0) {
      setSubmitError('Dodajte bar jednu stavku');
      return;
    }

    // Validate stock
    for (const item of validItems) {
      const filament = getFilamentById(item.filament_id);
      if (!filament) {
        setSubmitError('Nevalidan filament');
        return;
      }
      const available = getAvailableStock(filament, item.item_type);
      if (item.quantity > available) {
        setSubmitError(
          `Nedovoljno zaliha za ${filament.boja} ${filament.tip} (${item.item_type}): dostupno ${available}, trazeno ${item.quantity}`
        );
        return;
      }
    }

    const payload: CreateSaleRequest = {
      customer: {
        name: customerName.trim(),
        phone: customerPhone.trim() || undefined,
        city: customerCity.trim() || undefined,
        notes: customerNotes.trim() || undefined,
      },
      items: validItems.map((item) => ({
        filament_id: item.filament_id,
        item_type: item.item_type,
        quantity: item.quantity,
      })),
      notes: notes.trim() || undefined,
    };

    try {
      setSubmitting(true);
      setSubmitError('');
      await saleService.create(payload);
      onCreated();
    } catch {
      setSubmitError('Greska pri kreiranju prodaje');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-3xl max-h-[90vh] overflow-y-auto m-4">
        <div className="p-6">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-xl font-bold text-gray-900 dark:text-white">Nova prodaja</h2>
            <button
              onClick={onClose}
              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-2xl leading-none"
            >
              &times;
            </button>
          </div>

          {submitError && (
            <div className="mb-4 p-3 bg-red-100 dark:bg-red-900/30 border border-red-300 dark:border-red-700 text-red-700 dark:text-red-400 rounded text-sm">
              {submitError}
            </div>
          )}

          {/* Customer Section */}
          <div className="mb-6">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Kupac</h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="relative" ref={suggestionsRef}>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Ime kupca *
                </label>
                <input
                  type="text"
                  value={customerName}
                  onChange={(e) => handleCustomerSearch(e.target.value)}
                  onFocus={() => customerSuggestions.length > 0 && setShowSuggestions(true)}
                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  placeholder="Ime i prezime"
                />
                {showSuggestions && customerSuggestions.length > 0 && (
                  <div className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded shadow-lg max-h-40 overflow-y-auto">
                    {customerSuggestions.map((c) => (
                      <button
                        key={c.id}
                        onClick={() => selectCustomer(c)}
                        className="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 text-sm text-gray-900 dark:text-white"
                      >
                        <span className="font-medium">{c.name}</span>
                        {c.city && (
                          <span className="text-gray-500 dark:text-gray-400 ml-2">({c.city})</span>
                        )}
                      </button>
                    ))}
                  </div>
                )}
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Telefon
                </label>
                <input
                  type="text"
                  value={customerPhone}
                  onChange={(e) => setCustomerPhone(e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  placeholder="Broj telefona"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  Grad
                </label>
                <input
                  type="text"
                  value={customerCity}
                  onChange={(e) => setCustomerCity(e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  placeholder="Grad"
                />
              </div>
            </div>
            <div className="mt-3">
              <div className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Beleske o kupcu</div>
              <textarea
                value={customerNotes}
                onChange={(e) => setCustomerNotes(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                placeholder="npr. stampa figurice, obicno koristi crnu..."
                rows={2}
              />
            </div>
          </div>

          {/* Items Section */}
          <div className="mb-6">
            <div className="flex justify-between items-center mb-3">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Stavke</h3>
              <button
                onClick={addItem}
                className="px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700 transition-colors"
              >
                Dodaj stavku
              </button>
            </div>
            <div className="space-y-3">
              {items.map((item, index) => {
                const filament = getFilamentById(item.filament_id);
                const available = filament ? getAvailableStock(filament, item.item_type) : 0;
                const itemPrice = getItemPrice(item);

                return (
                  <div
                    key={index}
                    className="flex flex-wrap gap-3 items-end p-3 bg-gray-50 dark:bg-gray-700/50 rounded border border-gray-200 dark:border-gray-600"
                  >
                    <div className="flex-1 min-w-[200px]">
                      <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                        Filament
                      </label>
                      <select
                        value={item.filament_id}
                        onChange={(e) => updateItem(index, { filament_id: e.target.value })}
                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      >
                        <option value={0}>-- Izaberite filament --</option>
                        {filaments
                          .filter((f) => f.kolicina > 0)
                          .map((f) => (
                            <option key={f.id} value={f.id}>
                              {f.boja} - {f.tip} {f.finish} (refill: {f.refill}, spulna: {f.spulna})
                            </option>
                          ))}
                      </select>
                    </div>
                    <div className="w-32">
                      <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                        Tip
                      </label>
                      <select
                        value={item.item_type}
                        onChange={(e) =>
                          updateItem(index, {
                            item_type: e.target.value as 'refill' | 'spulna',
                            quantity: 1,
                          })
                        }
                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      >
                        <option value="refill">Refill</option>
                        <option value="spulna">Spulna</option>
                      </select>
                    </div>
                    <div className="w-24">
                      <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                        Kolicina {filament ? `(max ${available})` : ''}
                      </label>
                      <input
                        type="number"
                        min={1}
                        max={available || undefined}
                        value={item.quantity}
                        onChange={(e) => updateItem(index, { quantity: Math.max(1, Number(e.target.value)) })}
                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                      />
                    </div>
                    <div className="w-32 text-right">
                      <label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                        Cena
                      </label>
                      <div className="px-3 py-2 text-sm font-medium text-gray-900 dark:text-white">
                        {itemPrice > 0 ? formatPrice(itemPrice) : '-'}
                      </div>
                    </div>
                    <div>
                      <button
                        onClick={() => removeItem(index)}
                        disabled={items.length <= 1}
                        className="px-3 py-2 bg-red-600 text-white text-sm rounded hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                      >
                        Ukloni
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Total */}
          <div className="mb-6 p-4 bg-gray-100 dark:bg-gray-700 rounded flex justify-between items-center">
            <span className="text-lg font-semibold text-gray-900 dark:text-white">Ukupno:</span>
            <span className="text-xl font-bold text-gray-900 dark:text-white">{formatPrice(totalAmount)}</span>
          </div>

          {/* Notes */}
          <div className="mb-6">
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              Beleske
            </label>
            <textarea
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              rows={3}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              placeholder="Napomena za prodaju..."
            />
          </div>

          {/* Actions */}
          <div className="flex justify-end gap-3">
            <button
              onClick={onClose}
              className="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors"
            >
              Otkazi
            </button>
            <button
              onClick={handleSubmit}
              disabled={submitting}
              className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
            >
              {submitting ? 'Cuvanje...' : 'Sacuvaj'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// --- SaleDetailModal ---

function SaleDetailModal({
  sale,
  loading,
  onClose,
  onDelete,
  formatPrice,
  formatDate,
}: {
  sale: Sale | null;
  loading: boolean;
  onClose: () => void;
  onDelete: (id: string) => void;
  formatPrice: (n: number) => string;
  formatDate: (d?: string) => string;
}) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4">
        <div className="p-6">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-xl font-bold text-gray-900 dark:text-white">Detalji prodaje</h2>
            <button
              onClick={onClose}
              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-2xl leading-none"
            >
              &times;
            </button>
          </div>

          {loading ? (
            <div className="p-8 text-center text-gray-500 dark:text-gray-400">Ucitavanje...</div>
          ) : !sale ? (
            <div className="p-8 text-center text-gray-500 dark:text-gray-400">Prodaja nije pronadjena</div>
          ) : (
            <>
              {/* Customer Info */}
              <div className="mb-6">
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Kupac</h3>
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <span className="text-gray-500 dark:text-gray-400">Ime: </span>
                    <span className="text-gray-900 dark:text-white font-medium">
                      {sale.customer_name || '-'}
                    </span>
                  </div>
                  <div>
                    <span className="text-gray-500 dark:text-gray-400">Telefon: </span>
                    <span className="text-gray-900 dark:text-white">
                      {sale.customer_phone || '-'}
                    </span>
                  </div>
                  <div>
                    <span className="text-gray-500 dark:text-gray-400">Datum: </span>
                    <span className="text-gray-900 dark:text-white">{formatDate(sale.created_at)}</span>
                  </div>
                </div>
              </div>

              {/* Items */}
              <div className="mb-6">
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Stavke</h3>
                {sale.items && sale.items.length > 0 ? (
                  <div className="border border-gray-200 dark:border-gray-600 rounded overflow-hidden">
                    <table className="w-full">
                      <thead className="bg-gray-50 dark:bg-gray-700">
                        <tr>
                          <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                            Filament
                          </th>
                          <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                            Tip
                          </th>
                          <th className="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                            Kolicina
                          </th>
                          <th className="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                            Cena
                          </th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-gray-200 dark:divide-gray-600">
                        {sale.items.map((item: SaleItem) => (
                          <tr key={item.id}>
                            <td className="px-4 py-2 text-sm text-gray-900 dark:text-white">
                              {item.filament_boja} - {item.filament_tip} {item.filament_finish}
                            </td>
                            <td className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400 capitalize">
                              {item.item_type}
                            </td>
                            <td className="px-4 py-2 text-sm text-gray-900 dark:text-white text-right">
                              {item.quantity}
                            </td>
                            <td className="px-4 py-2 text-sm text-gray-900 dark:text-white text-right font-medium">
                              {formatPrice(item.unit_price * item.quantity)}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                ) : (
                  <p className="text-sm text-gray-500 dark:text-gray-400">Nema stavki</p>
                )}
              </div>

              {/* Total */}
              <div className="mb-6 p-4 bg-gray-100 dark:bg-gray-700 rounded flex justify-between items-center">
                <span className="text-lg font-semibold text-gray-900 dark:text-white">Ukupno:</span>
                <span className="text-xl font-bold text-gray-900 dark:text-white">
                  {formatPrice(sale.total_amount)}
                </span>
              </div>

              {/* Notes */}
              {sale.notes && (
                <div className="mb-6">
                  <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Beleske</h3>
                  <p className="text-sm text-gray-900 dark:text-white bg-gray-50 dark:bg-gray-700/50 p-3 rounded">
                    {sale.notes}
                  </p>
                </div>
              )}

              {/* Actions */}
              <div className="flex justify-between">
                <button
                  onClick={() => {
                    if (window.confirm('Da li ste sigurni da zelite da obrisete ovu prodaju?')) {
                      onDelete(sale.id);
                    }
                  }}
                  className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
                >
                  Obrisi prodaju
                </button>
                <button
                  onClick={onClose}
                  className="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors"
                >
                  Zatvori
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}