import React, { useEffect, useState } from 'react';
import AdminLayout from '../../layouts/AdminLayout';
import { Box, Heading, Button, SimpleGrid, FormControl, FormLabel, Input, HStack, VStack, Text, IconButton, useToast, Divider, Textarea, Switch, NumberInput, NumberInputField } from '@chakra-ui/react';
import { getClothingAdmin, createClothing, updateClothing, deleteClothing, ClothingItem } from '../../services/clothing';
import { FiPlus, FiTrash2, FiSave } from 'react-icons/fi';

const emptyItem: Partial<ClothingItem> = { 
  title: '', 
  description: '', 
  price: 0, 
  currency: 'Kč', 
  image_url: '', 
  url: '', 
  is_active: true,
  display_order: 0
};

const AdminMerchPage: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [items, setItems] = useState<ClothingItem[]>([]);
  const toast = useToast();

  const fetchItems = async () => {
    try {
      const data = await getClothingAdmin();
      setItems(data);
    } catch (e) {
      toast({ status: 'error', title: 'Chyba', description: 'Nepodařilo se načíst oblečení.' });
    } finally {
      setLoading(false);
    }
  };

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

  const addItem = () => {
    const newItem: Partial<ClothingItem> = { ...emptyItem };
    setItems((prev) => [...prev, newItem as ClothingItem]);
  };

  const removeItem = async (idx: number) => {
    const item = items[idx];
    if (item.id) {
      try {
        await deleteClothing(item.id);
        toast({ status: 'success', title: 'Smazáno', description: 'Položka byla smazána.' });
        fetchItems();
      } catch (e) {
        toast({ status: 'error', title: 'Chyba', description: 'Nepodařilo se smazat položku.' });
      }
    } else {
      setItems((prev) => prev.filter((_, i) => i !== idx));
    }
  };

  const updateField = (idx: number, key: keyof ClothingItem, val: any) => {
    setItems((prev) => prev.map((it, i) => i === idx ? { ...it, [key]: val } : it));
  };

  const saveItem = async (idx: number) => {
    const item = items[idx];
    if (!item.title || !item.image_url) {
      toast({ status: 'warning', title: 'Upozornění', description: 'Vyplňte alespoň název a obrázek.' });
      return;
    }

    setSaving(true);
    try {
      if (item.id) {
        await updateClothing(item.id, item);
        toast({ status: 'success', title: 'Uloženo', description: 'Položka byla aktualizována.' });
      } else {
        await createClothing(item);
        toast({ status: 'success', title: 'Uloženo', description: 'Položka byla vytvořena.' });
        fetchItems();
      }
    } catch (e) {
      toast({ status: 'error', title: 'Chyba', description: 'Nepodařilo se uložit položku.' });
    } finally {
      setSaving(false);
    }
  };

  return (
    <AdminLayout>
      <Box>
        <Heading size="md" mb={2}>Oblečení a Fan Shop</Heading>
        <Text fontSize="sm" color="gray.600" mb={2}>
          Spravujte položky oblečení a merchandisingu. Na titulní stránce se zobrazí 5 nejnovějších položek, všechny položky jsou k dispozici na stránce /obleceni.
        </Text>
        <Box mb={4} p={3} bg="blue.50" borderRadius="md" borderLeft="4px solid" borderColor="blue.500">
          <Text fontSize="sm" color="blue.800">
            💡 <strong>Tip:</strong> Přidejte cenu pro lepší přehlednost. Na veřejné stránce se zobrazí pouze aktivní položky.
          </Text>
        </Box>

        <HStack justify="space-between" mb={3}>
          <Button leftIcon={<FiPlus />} onClick={addItem}>Přidat položku</Button>
        </HStack>

        <Divider my={3} />

        {loading ? (
          <Text>Načítání…</Text>
        ) : (
          <VStack align="stretch" spacing={4}>
            {items.map((it, idx) => (
              <Box key={idx} borderWidth="1px" borderRadius="md" p={4} bg="white">
                <HStack justify="space-between" mb={3}>
                  <Heading size="sm">
                    {it.title || `Položka #${idx + 1}`}
                    {!it.is_active && <Text as="span" ml={2} fontSize="xs" color="gray.500">(neaktivní)</Text>}
                  </Heading>
                  <HStack>
                    <Button 
                      size="sm" 
                      colorScheme="blue" 
                      leftIcon={<FiSave />} 
                      onClick={() => saveItem(idx)} 
                      isLoading={saving}
                    >
                      Uložit
                    </Button>
                    <IconButton 
                      aria-label="Smazat" 
                      icon={<FiTrash2 />} 
                      onClick={() => removeItem(idx)} 
                      variant="outline" 
                      colorScheme="red" 
                      size="sm"
                    />
                  </HStack>
                </HStack>
                
                <SimpleGrid columns={{ base: 1, md: 2 }} spacing={3}>
                  <FormControl isRequired>
                    <FormLabel>Název</FormLabel>
                    <Input 
                      value={it.title || ''} 
                      onChange={(e) => updateField(idx, 'title', e.target.value)} 
                      placeholder="např. Dres domácí 2024/25" 
                    />
                  </FormControl>
                  
                  <FormControl isRequired>
                    <FormLabel>Obrázek (URL)</FormLabel>
                    <Input 
                      value={it.image_url || ''} 
                      onChange={(e) => updateField(idx, 'image_url', e.target.value)} 
                      placeholder="https://example.com/img.jpg" 
                    />
                  </FormControl>

                  <FormControl>
                    <FormLabel>Cena</FormLabel>
                    <HStack>
                      <NumberInput 
                        value={it.price || 0} 
                        onChange={(_, val) => updateField(idx, 'price', val)} 
                        min={0}
                        precision={2}
                        flex={1}
                      >
                        <NumberInputField placeholder="0.00" />
                      </NumberInput>
                      <Input 
                        value={it.currency || 'Kč'} 
                        onChange={(e) => updateField(idx, 'currency', e.target.value)} 
                        placeholder="Kč" 
                        width="80px"
                      />
                    </HStack>
                  </FormControl>

                  <FormControl>
                    <FormLabel>Odkaz (e‑shop)</FormLabel>
                    <Input 
                      value={it.url || ''} 
                      onChange={(e) => updateField(idx, 'url', e.target.value)} 
                      placeholder="https://eshop.example.com/produkt" 
                    />
                  </FormControl>

                  <FormControl>
                    <FormLabel>Pořadí zobrazení</FormLabel>
                    <NumberInput 
                      value={it.display_order || 0} 
                      onChange={(_, val) => updateField(idx, 'display_order', val)} 
                      min={0}
                    >
                      <NumberInputField />
                    </NumberInput>
                  </FormControl>

                  <FormControl display="flex" alignItems="center">
                    <FormLabel mb={0}>Aktivní</FormLabel>
                    <Switch 
                      isChecked={it.is_active !== false} 
                      onChange={(e) => updateField(idx, 'is_active', e.target.checked)} 
                    />
                  </FormControl>
                </SimpleGrid>

                <FormControl mt={3}>
                  <FormLabel>Popis</FormLabel>
                  <Textarea 
                    value={it.description || ''} 
                    onChange={(e) => updateField(idx, 'description', e.target.value)} 
                    placeholder="Volitelný popis položky"
                    rows={2}
                  />
                </FormControl>
              </Box>
            ))}
            {items.length === 0 && (
              <Text color="gray.600">Zatím žádné položky. Použijte tlačítko „Přidat položku".</Text>
            )}
          </VStack>
        )}
      </Box>
    </AdminLayout>
  );
};

export default AdminMerchPage;
