import React, { useState, useEffect } from 'react';
import {
  Box,
  Button,
  FormControl,
  FormLabel,
  Input,
  Textarea,
  Select,
  VStack,
  HStack,
  Heading,
  Text,
  useToast,
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
  SimpleGrid,
  Icon,
  Badge,
} from '@chakra-ui/react';
import { FiSave, FiEye, FiCode, FiLayout, FiZap } from 'react-icons/fi';
import AdminLayout from '../../layouts/AdminLayout';
import RichTextEditor from '../../components/common/RichTextEditor';
import api from '../../services/api';
import { generateAboutAI } from '../../services/ai';

type AboutPageData = {
  id?: number;
  title: string;
  subtitle: string;
  style: 'default' | 'modern' | 'timeline' | 'custom';
  content: string;
  sections: string;
  seo_title: string;
  seo_description: string;
};

const AboutAdminPage: React.FC = () => {
  const toast = useToast();
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [aiGenerating, setAiGenerating] = useState(false);
  const [aiPrompt, setAiPrompt] = useState('');
  const [aiAudience, setAiAudience] = useState('Fanoušci klubu');
  const [data, setData] = useState<AboutPageData>({
    title: '',
    subtitle: '',
    style: 'default',
    content: '',
    sections: '[]',
    seo_title: '',
    seo_description: '',
  });

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

  const loadData = async () => {
    setLoading(true);
    try {
      const res = await api.get('/admin/about');
      if (res.data) {
        setData(res.data);
      }
    } catch (e: any) {
      toast({ title: 'Chyba', description: 'Nepodařilo se načíst data', status: 'error' });
    } finally {
      setLoading(false);
    }
  };

  const handleSave = async () => {
    if (!data.title.trim()) {
      toast({ title: 'Chyba', description: 'Vyplňte název stránky', status: 'warning' });
      return;
    }

    setSaving(true);
    try {
      await api.put('/admin/about', data);
      toast({ title: 'Uloženo', description: 'Stránka O klubu byla uložena', status: 'success' });
      await loadData();
    } catch (e: any) {
      toast({
        title: 'Chyba',
        description: e?.response?.data?.error || 'Nepodařilo se uložit',
        status: 'error',
      });
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async () => {
    if (!confirm('Opravdu smazat stránku O klubu?')) return;
    try {
      await api.delete('/admin/about');
      toast({ title: 'Smazáno', description: 'Stránka byla smazána', status: 'info' });
      setData({
        title: '',
        subtitle: '',
        style: 'default',
        content: '',
        sections: '[]',
        seo_title: '',
        seo_description: '',
      });
    } catch (e: any) {
      toast({ title: 'Chyba', description: 'Nepodařilo se smazat', status: 'error' });
    }
  };

  const handleGenerateAI = async () => {
    if (!aiPrompt.trim()) {
      toast({ title: 'Chyba', description: 'Zadejte poznámky pro AI', status: 'warning' });
      return;
    }

    setAiGenerating(true);
    try {
      const result = await generateAboutAI({
        prompt: aiPrompt,
        audience: aiAudience,
        style: data.style,
      });
      setData((prev) => ({
        ...prev,
        content: result.html || prev.content,
        title: result.title || prev.title,
        subtitle: result.subtitle || prev.subtitle,
        seo_title: result.seo_title || prev.seo_title,
        seo_description: result.seo_description || prev.seo_description,
      }));
      toast({
        title: 'Hotovo!',
        description: 'Obsah byl vygenerován pomocí AI',
        status: 'success',
      });
    } catch (e: any) {
      toast({
        title: 'Chyba AI',
        description: e?.response?.data?.error || 'Nepodařilo se vygenerovat obsah',
        status: 'error',
      });
    } finally {
      setAiGenerating(false);
    }
  };

  const styleDescriptions: Record<string, { name: string; desc: string }> = {
    default: { name: 'Výchozí', desc: 'Jednoduchý layout s titulkem a obsahem' },
    modern: { name: 'Moderní', desc: 'Vizuálně atraktivní s hero obrázkem a sekcemi' },
    timeline: { name: 'Timeline', desc: 'Historie klubu na časové ose' },
    custom: { name: 'Vlastní HTML', desc: 'Plná kontrola nad obsahem a stylingem' },
  };

  return (
    <AdminLayout requireAdmin={false}>
      <Box>
        <HStack justify="space-between" mb={4}>
          <Heading size="lg">Stránka O klubu</Heading>
          <HStack>
            <Button
              leftIcon={<FiSave />}
              colorScheme="brand"
              onClick={handleSave}
              isLoading={saving}
            >
              Uložit
            </Button>
          </HStack>
        </HStack>

        <Text color="gray.600" mb={6}>
          Vytvořte nebo upravte stránku O klubu. Dostupná na <strong>/o-klubu</strong>.
        </Text>

        <Tabs variant="enclosed" colorScheme="brand">
          <TabList>
            <Tab><Icon as={FiLayout} mr={2} /> Obsah</Tab>
            <Tab><Icon as={FiCode} mr={2} /> Styl</Tab>
            <Tab><Icon as={FiEye} mr={2} /> SEO</Tab>
          </TabList>

          <TabPanels>
            {/* Content Tab */}
            <TabPanel>
              <VStack align="stretch" spacing={4}>
                <FormControl isRequired>
                  <FormLabel>Název stránky</FormLabel>
                  <Input
                    value={data.title}
                    onChange={(e) => setData((prev) => ({ ...prev, title: e.target.value }))}
                    placeholder="O naší klubu"
                  />
                </FormControl>

                <FormControl>
                  <FormLabel>Podtitulek</FormLabel>
                  <Input
                    value={data.subtitle}
                    onChange={(e) => setData((prev) => ({ ...prev, subtitle: e.target.value }))}
                    placeholder="Naše historie, hodnoty a komunita"
                  />
                </FormControl>

                {/* Hero image removed: About page uses club logo and name from settings */}

                <Box
                  borderWidth="1px"
                  borderRadius="md"
                  p={4}
                  bg="gray.50"
                >
                  <HStack justify="space-between" mb={3} align="flex-start">
                    <Box>
                      <Heading size="sm" mb={1}>AI generátor obsahu</Heading>
                      <Text fontSize="sm" color="gray.600">
                        Napište krátké poznámky (např. historie, úspěchy, hodnoty) a nechte AI připravit návrh stránky.
                      </Text>
                    </Box>
                    <Button
                      leftIcon={<FiZap />}
                      colorScheme="purple"
                      variant="solid"
                      onClick={handleGenerateAI}
                      isLoading={aiGenerating}
                    >
                      Vygenerovat
                    </Button>
                  </HStack>
                  <VStack align="stretch" spacing={3}>
                    <FormControl>
                      <FormLabel>Poznámky pro AI</FormLabel>
                      <Textarea
                        value={aiPrompt}
                        onChange={(e) => setAiPrompt(e.target.value)}
                        placeholder="Popište historii klubu, současné cíle, přístup k mládeži..."
                        rows={4}
                      />
                    </FormControl>
                    <FormControl>
                      <FormLabel>Cílové publikum</FormLabel>
                      <Input
                        value={aiAudience}
                        onChange={(e) => setAiAudience(e.target.value)}
                        placeholder="Fanoušci klubu"
                      />
                    </FormControl>
                  </VStack>
                </Box>

                <FormControl>
                  <FormLabel>Obsah stránky</FormLabel>
                  <RichTextEditor
                    value={data.content}
                    onChange={(value) => setData((prev) => ({ ...prev, content: value }))}
                    height="400px"
                    toolbar="full"
                    showImageResize={true}
                    placeholder="Zadejte obsah stránky O nás..."
                  />
                </FormControl>
              </VStack>
            </TabPanel>

            {/* Style Tab */}
            <TabPanel>
              <VStack align="stretch" spacing={4}>
                <FormControl>
                  <FormLabel>Styl stránky</FormLabel>
                  <Select
                    value={data.style}
                    onChange={(e) =>
                      setData((prev) => ({ ...prev, style: e.target.value as any }))
                    }
                  >
                    {Object.entries(styleDescriptions).map(([key, { name, desc }]) => (
                      <option key={key} value={key}>
                        {name}
                      </option>
                    ))}
                  </Select>
                  <Text fontSize="sm" color="gray.600" mt={2}>
                    {styleDescriptions[data.style]?.desc}
                  </Text>
                </FormControl>

                <Box
                  p={4}
                  borderWidth="1px"
                  borderRadius="md"
                  bg="blue.50"
                  borderColor="blue.200"
                >
                  <Heading size="sm" mb={2}>Vybraný styl: {styleDescriptions[data.style]?.name}</Heading>
                  <SimpleGrid columns={{ base: 1, md: 2 }} spacing={3} mb={3}>
                    <Box>
                      <Badge colorScheme="blue" mb={1}>Výchozí</Badge>
                      <Text fontSize="sm">Jednoduchý layout, ideální pro text</Text>
                    </Box>
                    <Box>
                      <Badge colorScheme="purple" mb={1}>Moderní</Badge>
                      <Text fontSize="sm">Hero obrázek + sekce karet</Text>
                    </Box>
                    <Box>
                      <Badge colorScheme="green" mb={1}>Timeline</Badge>
                      <Text fontSize="sm">Historie klubu chronologicky</Text>
                    </Box>
                    <Box>
                      <Badge colorScheme="orange" mb={1}>Vlastní</Badge>
                      <Text fontSize="sm">Plná kontrola přes HTML/CSS</Text>
                    </Box>
                  </SimpleGrid>
                </Box>

                {data.style === 'custom' && (
                  <Box
                    p={3}
                    bg="yellow.50"
                    borderWidth="1px"
                    borderColor="yellow.300"
                    borderRadius="md"
                  >
                    <Text fontSize="sm" fontWeight="semibold" mb={1}>
                      Vlastní HTML režim
                    </Text>
                    <Text fontSize="sm">
                      V editoru můžete použít jakékoliv HTML a CSS. Ujistěte se, že je kód validní.
                    </Text>
                  </Box>
                )}
              </VStack>
            </TabPanel>

            {/* SEO Tab */}
            <TabPanel>
              <VStack align="stretch" spacing={4}>
                <FormControl>
                  <FormLabel>SEO Titulek</FormLabel>
                  <Input
                    value={data.seo_title}
                    onChange={(e) => setData((prev) => ({ ...prev, seo_title: e.target.value }))}
                    placeholder="Pokud prázdné, použije se název stránky"
                  />
                </FormControl>

                <FormControl>
                  <FormLabel>SEO Popis</FormLabel>
                  <Textarea
                    value={data.seo_description}
                    onChange={(e) =>
                      setData((prev) => ({ ...prev, seo_description: e.target.value }))
                    }
                    placeholder="Krátký popis pro vyhledávače (doporučeno 150-160 znaků)"
                    rows={4}
                  />
                  <Text fontSize="sm" color="gray.600" mt={1}>
                    Délka: {data.seo_description.length} znaků
                  </Text>
                </FormControl>
              </VStack>
            </TabPanel>
          </TabPanels>
        </Tabs>

        <Box mt={6} pt={4} borderTopWidth="1px">
          <HStack justify="space-between">
            <Button colorScheme="red" variant="outline" onClick={handleDelete}>
              Smazat stránku
            </Button>
            <HStack>
              <Button as="a" href="/o-klubu" target="_blank" variant="outline">
                Náhled
              </Button>
              <Button
                leftIcon={<FiSave />}
                colorScheme="brand"
                onClick={handleSave}
                isLoading={saving}
              >
                Uložit změny
              </Button>
            </HStack>
          </HStack>
        </Box>
      </Box>
    </AdminLayout>
  );
};

export default AboutAdminPage;
