import axios from 'axios';
import { IconType } from 'react-icons';
import {
  FaRegClipboard,
  FaBullseye,
  FaMapSigns,
  FaColumns,
  FaFlag,
  FaNewspaper,
  FaFutbol,
  FaUsers,
  FaTable,
  FaChartLine,
  FaCalendarAlt,
  FaHandshake,
  FaTshirt,
  FaCommentDots,
  FaTrophy,
  FaBookOpen,
  FaImages,
  FaVideo,
  FaBroadcastTower,
  FaPodcast,
  FaHashtag,
  FaEnvelopeOpenText,
  FaPhoneAlt,
  FaHourglassHalf,
  FaPoll,
  FaQuestionCircle,
  FaSearch,
  FaMapMarkedAlt,
  FaCalendarCheck,
  FaCloudSun,
  FaTicketAlt,
  FaCube
} from 'react-icons/fa';

const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:8080/api/v1';

export interface PageElementConfig {
  id?: number;
  page_type: string;
  element_name: string;
  variant: string;
  visible?: boolean;
  display_order?: number;
  settings?: Record<string, any>;
  created_at?: string;
  updated_at?: string;
}

// Public endpoints
export const getPageElementConfigs = async (pageType: string): Promise<PageElementConfig[]> => {
  const response = await axios.get(`${API_BASE_URL}/page-elements`, {
    params: { page_type: pageType }
  });
  return response.data || [];
};

// Admin endpoints
export const getAllPageElementConfigs = async (): Promise<PageElementConfig[]> => {
  const response = await axios.get(`${API_BASE_URL}/admin/page-elements`, {
    withCredentials: true,
  });
  return response.data || [];
};

export const createOrUpdatePageElementConfig = async (config: Partial<PageElementConfig>): Promise<PageElementConfig> => {
  const response = await axios.post(`${API_BASE_URL}/admin/page-elements`, config, {
    withCredentials: true,
  });
  return response.data;
};

export const updatePageElementConfig = async (id: number, config: Partial<PageElementConfig>): Promise<PageElementConfig> => {
  const response = await axios.put(`${API_BASE_URL}/admin/page-elements/${id}`, config, {
    withCredentials: true,
  });
  return response.data;
};

export const deletePageElementConfig = async (id: number): Promise<void> => {
  await axios.delete(`${API_BASE_URL}/admin/page-elements/${id}`, {
    withCredentials: true,
  });
};

export const batchUpdatePageElementConfigs = async (configs: PageElementConfig[]): Promise<{ message: string; updated: number; created: number }> => {
  const response = await axios.post(`${API_BASE_URL}/admin/page-elements/batch`, configs, {
    withCredentials: true,
  });
  return response.data;
};

// Element variant definitions
export interface ElementVariant {
  value: string;
  label: string;
  description: string;
  preview?: string;
}

// Predefined element types that can be added to pages
export interface PredefinedElement {
  name: string;
  label: string;
  description: string;
  icon: IconType;
  category: 'content' | 'media' | 'interactive' | 'layout';
  defaultVariant: string;
  component?: string;
}

export const PREDEFINED_ELEMENTS: PredefinedElement[] = [
  // Layout - Rozvržení
  { name: 'header', label: 'Hlavička', description: 'Hlavička stránky s logem a navigací', icon: FaRegClipboard, category: 'layout', defaultVariant: 'unified' },
  { name: 'hero', label: 'Hlavní Sekce', description: 'Hlavní obsahová oblast s úvodním obsahem', icon: FaBullseye, category: 'layout', defaultVariant: 'grid' },
  { name: 'footer', label: 'Patička', description: 'Spodní část stránky s odkazy a kontakty', icon: FaMapSigns, category: 'layout', defaultVariant: 'standard' },
  { name: 'sidebar', label: 'Boční Panel', description: 'Boční sloupec s doplňkovým obsahem', icon: FaColumns, category: 'layout', defaultVariant: 'right' },
  { name: 'banner', label: 'Banner', description: 'Reklamní nebo informační banner', icon: FaFlag, category: 'layout', defaultVariant: 'top' },
  
  // Content - Obsah
  { name: 'news', label: 'Novinky', description: 'Nejnovější články a zprávy', icon: FaNewspaper, category: 'content', defaultVariant: 'grid' },
  { name: 'matches', label: 'Zápasy', description: 'Nadcházející a poslední zápasy', icon: FaFutbol, category: 'content', defaultVariant: 'compact' },
  { name: 'team', label: 'Tým', description: 'Hráči a realizační tým', icon: FaUsers, category: 'content', defaultVariant: 'grid' },
  { name: 'table', label: 'Tabulka', description: 'Ligová tabulka', icon: FaTable, category: 'content', defaultVariant: 'split_news' },
  { name: 'stats', label: 'Statistiky', description: 'Týmové a hráčské statistiky', icon: FaChartLine, category: 'content', defaultVariant: 'cards' },
  { name: 'activities', label: 'Akce', description: 'Nadcházející události a aktivity', icon: FaCalendarAlt, category: 'content', defaultVariant: 'list' },
  { name: 'sponsors', label: 'Partneři', description: 'Loga a odkazy partnerů', icon: FaHandshake, category: 'content', defaultVariant: 'grid' },
  { name: 'merch', label: 'Fanshop', description: 'Prodej klubového zboží', icon: FaTshirt, category: 'content', defaultVariant: 'grid' },
  { name: 'testimonials', label: 'Reference', description: 'Hodnocení a ohlasy fanoušků', icon: FaCommentDots, category: 'content', defaultVariant: 'carousel' },
  { name: 'achievements', label: 'Úspěchy', description: 'Trofeje a ocenění klubu', icon: FaTrophy, category: 'content', defaultVariant: 'timeline' },
  { name: 'history', label: 'Historie', description: 'Historie a milníky klubu', icon: FaBookOpen, category: 'content', defaultVariant: 'timeline' },
  
  // Media - Média
  { name: 'gallery', label: 'Galerie', description: 'Fotogalerie', icon: FaImages, category: 'media', defaultVariant: 'grid' },
  { name: 'videos', label: 'Videa', description: 'YouTube videa a sestřihy', icon: FaVideo, category: 'media', defaultVariant: 'grid' },
  { name: 'live', label: 'Live Stream', description: 'Živé přenosy zápasů', icon: FaBroadcastTower, category: 'media', defaultVariant: 'featured' },
  { name: 'podcast', label: 'Podcast', description: 'Zvukové podcasty a komentáře', icon: FaPodcast, category: 'media', defaultVariant: 'list' },
  { name: 'social', label: 'Sociální Sítě', description: 'Příspěvky ze sociálních sítí', icon: FaHashtag, category: 'media', defaultVariant: 'grid' },
  
  // Interactive - Interaktivní
  { name: 'newsletter', label: 'Newsletter', description: 'Formulář pro odběr novinek', icon: FaEnvelopeOpenText, category: 'interactive', defaultVariant: 'default' },
  { name: 'contact', label: 'Kontakt', description: 'Kontaktní formulář', icon: FaPhoneAlt, category: 'interactive', defaultVariant: 'form' },
  { name: 'countdown', label: 'Odpočet', description: 'Odpočet do příštího zápasu', icon: FaHourglassHalf, category: 'interactive', defaultVariant: 'default' },
  { name: 'poll', label: 'Anketa', description: 'Hlasování a ankety pro fanoušky', icon: FaPoll, category: 'interactive', defaultVariant: 'vertical' },
  { name: 'quiz', label: 'Kvíz', description: 'Interaktivní kvízy', icon: FaQuestionCircle, category: 'interactive', defaultVariant: 'card' },
  { name: 'search', label: 'Vyhledávání', description: 'Vyhledávací pole', icon: FaSearch, category: 'interactive', defaultVariant: 'header' },
  { name: 'map', label: 'Mapa', description: 'Mapa stadionu a areálu', icon: FaMapMarkedAlt, category: 'interactive', defaultVariant: 'default' },
  { name: 'calendar', label: 'Kalendář', description: 'Kalendář zápasů a akcí', icon: FaCalendarCheck, category: 'interactive', defaultVariant: 'month' },
  { name: 'weather', label: 'Počasí', description: 'Informace o počasí na stadionu', icon: FaCloudSun, category: 'interactive', defaultVariant: 'widget' },
  { name: 'ticketing', label: 'Vstupenky', description: 'Prodej a rezervace vstupenek', icon: FaTicketAlt, category: 'interactive', defaultVariant: 'widget' },
];

export const ELEMENT_VARIANTS: Record<string, ElementVariant[]> = {
  header: [
    { value: 'unified', label: 'Jednotný', description: 'Klasická hlavička s logem a navigací' },
    { value: 'edge', label: 'Okrajový', description: 'Moderní hlavička s gradientem' },
    { value: 'minimal', label: 'Minimální', description: 'Čistý minimalistický design' },
    { value: 'modern', label: 'Moderní', description: 'Odvážný moderní styl s akcenty' },
    { value: 'sticky', label: 'Přilepený', description: 'Pevně přilepená hlavička při scrollování' },
    { value: 'transparent', label: 'Průhledný', description: 'Průhledná hlavička s efektem' },
    { value: 'sparta_navbar', label: 'Sparta Navbar', description: 'AC Sparta Praha styl - burger menu, logo, navigace, vyhledávání' },
  ],
  hero: [
    { value: 'grid', label: 'Mřížka', description: 'Rozložení ve formě mřížky' },
    { value: 'swiper', label: 'Karusel', description: 'Posuvný karusel' },
    { value: 'swiper_full', label: 'Celý Karusel', description: 'Celoobrazovkový karusel' },
    { value: 'edge', label: 'Okrajový', description: 'Moderní okrajový styl' },
    { value: 'video', label: 'Video', description: 'Hero s pozadím videa' },
    { value: 'split', label: 'Rozdělený', description: 'Rozdělené rozložení text/obraz' },
    { value: 'featured_sidebar', label: 'Zvýrazněný + Sidebar', description: 'Velký článek vlevo + 4 články vpravo. Kategorie: BLOG/TÝM. Tlačítko: PŘEHRÁT. Sidebar link: VÍCE NOVINEK. Překrývá se s nadcházejícím zápasem' },
    { value: 'sparta_featured_carousel', label: 'Sparta Featured Carousel', description: 'Hero header s pozadím, článek s kategoriemi, thumbnail navigace, auto-swap' },
  ],
  news: [
    { value: 'grid', label: 'Mřížka', description: 'Rozložení karet v mřížce' },
    { value: 'scroller', label: 'Posuvník', description: 'Horizontální posuvník' },
    { value: 'hero_carousel', label: 'Hero Karusel', description: 'Jeden článek najednou. Tlačítko: ZJISTIT VÍCE (vlevo dole). Numerace: 01 02 03 (vpravo dole). Auto-swap' },
    { value: 'featured_sidebar', label: 'Zvýrazněný + Sidebar', description: 'Velký článek vlevo + 4 články vpravo. Kategorie: BLOG/NOVINKY. Tlačítko: PŘEHRÁT/ČÍST VÍCE. Link: VÍCE NOVINEK' },
    { value: 'list', label: 'Seznam', description: 'Vertikální seznam' },
    { value: 'magazine', label: 'Magazín', description: 'Stylizace jako časopis' },
    { value: 'masonry', label: 'Zdivo', description: 'Pinterest styl zdiva' },
    { value: 'timeline', label: 'Časová Osa', description: 'Chronologická časová osa' },
  ],
  matches: [
    { value: 'compact', label: 'Kompaktní', description: 'Kompaktní karty zápasů - jeden sloupec (slider + taby dole)' },
    { value: 'compact_split', label: 'Kompaktní Rozdělený', description: 'Kompaktní karty zápasů - dva sloupce (slider vlevo + taby vpravo)' },
    { value: 'expanded', label: 'Rozšířený', description: 'Detailní informace o zápasech' },
    { value: 'timeline', label: 'Časová Osa', description: 'Zobrazení časové osy' },
    { value: 'calendar', label: 'Kalendář', description: 'Kalendářní zobrazení' },
    { value: 'live', label: 'Živě', description: 'Živé výsledky' },
    { value: 'scoreboard', label: 'Tabule', description: 'TV broadcast style - velká tabule skóre s live aktualizacemi' },
    { value: 'ticker', label: 'Ticker', description: 'Scrollující ticker s výsledky a nadcházejícími zápasy' },
  ],
  sponsors: [
    { value: 'grid', label: 'Mřížka', description: 'Mřížkové rozložení' },
    { value: 'slider', label: 'Posuvník', description: 'Animovaný posuvník' },
    { value: 'scroller', label: 'Horizontální', description: 'Horizontální posuvník' },
    { value: 'pyramid', label: 'Pyramida', description: 'Pyramidové rozložení' },
    { value: 'wall', label: 'Zeď', description: 'Zeď partnerů' },
    { value: 'tiered', label: 'Vrstvený', description: 'Úrovně partnerů - Hlavní / Zlatí / Stříbrní / Bronzoví' },
    { value: 'spotlight', label: 'Spotlight', description: 'Velký hlavní partner + menší partneři okolo' },
    { value: 'sparta_partners_pyramid', label: 'Sparta Partners Pyramid', description: 'Tří-úrovňová pyramida partnerů (1 hlavní / 4 střední / více malých)' },
  ],
  gallery: [
    { value: 'grid', label: 'Mřížka', description: 'Fotomřížka' },
    { value: 'masonry', label: 'Zdivo', description: 'Pinterest styl' },
    { value: 'slider', label: 'Posuvník', description: 'Slideshow prezentace' },
    { value: 'lightbox', label: 'Lightbox', description: 'Otevření v lightboxu' },
    { value: 'collage', label: 'Koláž', description: 'Kreativní koláž' },
    { value: 'featured_grid', label: 'Zvýrazněná + Mřížka', description: 'Velká hlavní fotka vlevo + malé fotky vpravo v mřížce' },
    { value: 'stories', label: 'Stories', description: 'Instagram-style stories kruhové thumbnaily s full-screen view' },
  ],
  videos: [
    { value: 'grid', label: 'Mřížka', description: 'Video mřížka' },
    { value: 'featured', label: 'Zvýrazněné', description: 'Hlavní video + seznam' },
    { value: 'carousel', label: 'Karusel', description: 'Video karusel' },
    { value: 'playlist', label: 'Playlist', description: 'Playlist styl' },
    { value: 'highlight_reel', label: 'Sestřih', description: 'TV broadcast style - hlavní sestřih + kategorie (Góly, Zákroky, Highlights)' },
    { value: 'channel', label: 'Kanál', description: 'YouTube channel style s playlists a navigací' },
    { value: 'sparta_horizontal_slider', label: 'Sparta Horizontal Slider', description: 'Horizontální posuvník s kartami, UNLIMITED odznaky, prev/next tlačítka, drag support' },
  ],
  team: [
    { value: 'grid', label: 'Mřížka', description: 'Karty hráčů v mřížce' },
    { value: 'list', label: 'Seznam', description: 'Seznam hráčů' },
    { value: 'carousel', label: 'Karusel', description: 'Posuvný karusel' },
    { value: 'auto_scroller', label: 'Auto Scroller', description: 'Horizontální auto-scroll. Jméno hráče + číslo dresu + odkaz. Taby: MUŽI / ŽENY. Fotky hráčů na pozadí' },
    { value: 'table', label: 'Tabulka', description: 'Tabulkové zobrazení' },
    { value: 'hierarchy', label: 'Hierarchie', description: 'Organizační hierarchie' },
    { value: 'formation', label: 'Rozestavení', description: 'Fotbalové rozestavení na hřišti (4-4-2, 4-3-3, atd.)' },
    { value: 'depth_chart', label: 'Hloubka Kádru', description: 'Pozice s hlavními hráči a náhradníky' },
    { value: 'sparta_tabs_stats', label: 'Sparta Tabs & Stats', description: 'Tabovaný výběr týmu s fotkou, statistikami a CTA tlačítky (Koupit dres, Detail týmu)' },
  ],
  activities: [
    { value: 'list', label: 'Seznam', description: 'Seznam událostí' },
    { value: 'calendar', label: 'Kalendář', description: 'Kalendářní zobrazení' },
    { value: 'timeline', label: 'Časová Osa', description: 'Zobrazení časové osy' },
    { value: 'cards', label: 'Karty', description: 'Kartové rozložení' },
    { value: 'featured_event', label: 'Zvýrazněná Akce', description: 'Velká hlavní akce + menší nadcházející akce' },
    { value: 'countdown_grid', label: 'Odpočet + Mřížka', description: 'Odpočet k nejbližší akci + mřížka dalších akcí' },
  ],
  newsletter: [
    { value: 'default', label: 'Výchozí', description: 'Standardní formulář' },
    { value: 'popup', label: 'Vyskakovací', description: 'Vyskakovací okno' },
    { value: 'inline', label: 'Vložený', description: 'Vložený minimální' },
    { value: 'sidebar', label: 'Boční', description: 'Boční panel' },
    { value: 'banner', label: 'Banner', description: 'Sticky top banner s minimalistickým formulářem' },
    { value: 'hero_cta', label: 'Hero CTA', description: 'Velký call-to-action s benefity (Získejte exkluzivní obsah, slevy...)' },
  ],
  social: [
    { value: 'grid', label: 'Mřížka', description: 'Mřížka příspěvků' },
    { value: 'sidebar', label: 'Boční Panel', description: 'Boční widgety' },
    { value: 'floating', label: 'Plovoucí', description: 'Plovoucí ikony' },
    { value: 'feed', label: 'Tok', description: 'Tok příspěvků' },
    { value: 'wall', label: 'Sociální Zeď', description: 'Twitter/Instagram zeď s živými příspěvky z všech platforem' },
    { value: 'highlights', label: 'Highlights', description: 'Nejlepší příspěvky týdne s most liked/shared' },
  ],
  stats: [
    { value: 'cards', label: 'Karty', description: 'Karty statistik' },
    { value: 'table', label: 'Tabulka', description: 'Datová tabulka' },
    { value: 'charts', label: 'Grafy', description: 'Vizuální grafy' },
    { value: 'dashboard', label: 'Dashboard', description: 'Přehledová deska' },
    { value: 'leaderboard', label: 'Žebříček', description: 'Top hráči - nejlepší střelci, asistence, čisté konto, atd.' },
    { value: 'comparison', label: 'Porovnání', description: 'Side-by-side porovnání hráčů nebo týmů' },
  ],
  countdown: [
    { value: 'default', label: 'Výchozí', description: 'Standardní odpočet' },
    { value: 'minimal', label: 'Minimální', description: 'Minimální časovač' },
    { value: 'large', label: 'Velký', description: 'Velké zobrazení' },
    { value: 'circular', label: 'Kruhový', description: 'Kruhový odpočet' },
  ],
  map: [
    { value: 'default', label: 'Výchozí', description: 'Standardní mapa' },
    { value: 'satellite', label: 'Satelit', description: 'Satelitní zobrazení' },
    { value: 'minimal', label: 'Minimální', description: 'Minimální design' },
    { value: 'interactive', label: 'Interaktivní', description: 'Plně interaktivní mapa' },
  ],
  merch: [
    { value: 'grid', label: 'Mřížka', description: 'Produktová mřížka' },
    { value: 'carousel', label: 'Karusel', description: 'Produktový karusel' },
    { value: 'featured', label: 'Zvýrazněné', description: 'Zvýrazněné produkty' },
    { value: 'list', label: 'Seznam', description: 'Seznam produktů' },
    { value: 'sparta_product_slider', label: 'Sparta Product Slider', description: 'Produktový karusel s fotkami, cenami a tlačítky Koupit' },
  ],
  footer: [
    { value: 'standard', label: 'Standardní', description: 'Klasická patička' },
    { value: 'minimal', label: 'Minimální', description: 'Minimalistická patička' },
    { value: 'extended', label: 'Rozšířená', description: 'Rozšířená s více sloupci' },
    { value: 'centered', label: 'Centrovaná', description: 'Centrované rozložení' },
    { value: 'sparta_extended', label: 'Sparta Extended', description: 'Rozšířená patička s partnery, navigací, newsletterem a sociálními sítěmi' },
  ],
  sidebar: [
    { value: 'right', label: 'Pravý', description: 'Pravý boční panel' },
    { value: 'left', label: 'Levý', description: 'Levý boční panel' },
    { value: 'sticky', label: 'Přilepený', description: 'Přilepený při scrollování' },
  ],
  banner: [
    { value: 'top', label: 'Nahoře', description: 'Banner v horní části' },
    { value: 'bottom', label: 'Dole', description: 'Banner ve spodní části' },
    { value: 'sidebar', label: 'Boční', description: 'Boční banner' },
    { value: 'overlay', label: 'Překryvný', description: 'Překryvný banner' },
  ],
  table: [
    { value: 'split_news', label: 'Rozdělený s Aktualitami', description: 'Dva sloupce - Aktuality vlevo + Tabulka vpravo (výchozí)' },
    { value: 'standard', label: 'Standardní', description: 'Klasická tabulka - jeden sloupec' },
    { value: 'compact', label: 'Kompaktní', description: 'Kompaktní zobrazení' },
    { value: 'detailed', label: 'Detailní', description: 'Detailní informace' },
  ],
  testimonials: [
    { value: 'carousel', label: 'Karusel', description: 'Posuvný karusel' },
    { value: 'grid', label: 'Mřížka', description: 'Mřížka referencí' },
    { value: 'wall', label: 'Zeď', description: 'Zeď ohlasů' },
  ],
  achievements: [
    { value: 'timeline', label: 'Časová Osa', description: 'Chronologická osa' },
    { value: 'grid', label: 'Mřížka', description: 'Mřížka úspěchů' },
    { value: 'showcase', label: 'Výloha', description: 'Výloha trofejí' },
  ],
  history: [
    { value: 'timeline', label: 'Časová Osa', description: 'Historická časová osa' },
    { value: 'story', label: 'Příběh', description: 'Vyprávěcí formát' },
    { value: 'milestones', label: 'Milníky', description: 'Klíčové milníky' },
  ],
  live: [
    { value: 'featured', label: 'Zvýrazněný', description: 'Hlavní live stream' },
    { value: 'embedded', label: 'Vložený', description: 'Vložený přehrávač' },
    { value: 'multi', label: 'Více Kamer', description: 'Více kamer najednou' },
  ],
  podcast: [
    { value: 'list', label: 'Seznam', description: 'Seznam epizod' },
    { value: 'player', label: 'Přehrávač', description: 'Integrovaný přehrávač' },
    { value: 'featured', label: 'Zvýrazněný', description: 'Zvýrazněné epizody' },
  ],
  contact: [
    { value: 'form', label: 'Formulář', description: 'Kontaktní formulář' },
    { value: 'info', label: 'Informace', description: 'Kontaktní údaje' },
    { value: 'combined', label: 'Kombinovaný', description: 'Formulář + údaje' },
  ],
  poll: [
    { value: 'vertical', label: 'Vertikální', description: 'Vertikální rozložení' },
    { value: 'horizontal', label: 'Horizontální', description: 'Horizontální rozložení' },
    { value: 'cards', label: 'Karty', description: 'Kartové rozložení' },
  ],
  quiz: [
    { value: 'card', label: 'Karta', description: 'Karta po kartě' },
    { value: 'form', label: 'Formulář', description: 'Formulářový styl' },
    { value: 'interactive', label: 'Interaktivní', description: 'Plně interaktivní' },
  ],
  search: [
    { value: 'header', label: 'Hlavička', description: 'V hlavičce' },
    { value: 'overlay', label: 'Překryvný', description: 'Překryvné vyhledávání' },
    { value: 'inline', label: 'Vložený', description: 'Vložený do stránky' },
  ],
  calendar: [
    { value: 'month', label: 'Měsíc', description: 'Měsíční zobrazení' },
    { value: 'week', label: 'Týden', description: 'Týdenní zobrazení' },
    { value: 'list', label: 'Seznam', description: 'Seznam událostí' },
  ],
  weather: [
    { value: 'widget', label: 'Widget', description: 'Widget počasí' },
    { value: 'detailed', label: 'Detailní', description: 'Detailní předpověď' },
    { value: 'minimal', label: 'Minimální', description: 'Základní info' },
  ],
  ticketing: [
    { value: 'widget', label: 'Widget', description: 'Widget vstupenek' },
    { value: 'full', label: 'Plný', description: 'Plný systém' },
    { value: 'link', label: 'Odkaz', description: 'Pouze odkaz' },
  ],
};
