'use client';

import React, { useState, useEffect } from 'react';
import {
  Download,
  Send,
  ExternalLink,
  CheckCircle2,
  Plus,
  FolderOpen,
  Save,
  Copy,
  Edit2,
  RefreshCw,
  UploadCloud,
  Check,
  MessageSquare
} from 'lucide-react';
import { NewsletterCampaign } from '@/types/newsletter';
import { getBrevoCampaignUrl } from '@/lib/brevo';

interface TopBarProps {
  campaign: NewsletterCampaign;
  isSaving: boolean;
  onSave: () => void;
  onUpdateTitle: (title: string) => void;
  onOpenSavedCampaigns: () => void;
  onDuplicateCampaign: () => void;
  onExportZip: () => void;
  onExportBrevo: (updateExisting?: boolean) => void;
  isExportingBrevo: boolean;
  brevoCampaignUrl?: string | null;
  brevoListingUrl?: string | null;
  onClearBrevoId?: () => void;
  onAddModule: (type: any) => void;
  onOpenReviews?: () => void;
  reviewOpenCount?: number; // počet otvorených pripomienok
}

export const TopBar: React.FC<TopBarProps> = ({
  campaign,
  isSaving,
  onSave,
  onUpdateTitle,
  onOpenSavedCampaigns,
  onDuplicateCampaign,
  onExportZip,
  onExportBrevo,
  isExportingBrevo,
  onClearBrevoId,
  onAddModule,
  onOpenReviews,
  reviewOpenCount = 0
}) => {
  const [isEditingTitle, setIsEditingTitle] = useState(false);
  const [isVerifyingBrevo, setIsVerifyingBrevo] = useState(false);
  const [isVerifiedInBrevo, setIsVerifiedInBrevo] = useState(false);
  const [brevoCampaignStatus, setBrevoCampaignStatus] = useState<string | null>(null);

  // Funkcia na reálne overenie existencie kampane priamo cez Brevo API
  const verifyCampaignInBrevo = async (campaignId?: number) => {
    const idToCheck = campaignId || campaign.brevoCampaignId;
    if (!idToCheck) {
      setIsVerifiedInBrevo(false);
      setBrevoCampaignStatus(null);
      return;
    }

    setIsVerifyingBrevo(true);
    try {
      const res = await fetch(`/api/brevo/verify?campaignId=${encodeURIComponent(idToCheck)}`);
      const data = await res.json();

      if (data.exists) {
        setIsVerifiedInBrevo(true);
        setBrevoCampaignStatus(data.status || 'draft');
      } else {
        // Kampaň v Brevo reálne neexistuje (vymazaná alebo prenos zlyhal)
        setIsVerifiedInBrevo(false);
        setBrevoCampaignStatus(null);
        if (onClearBrevoId) {
          onClearBrevoId();
        }
      }
    } catch (err) {
      console.warn('Chyba pri overovaní Brevo kampane:', err);
    } finally {
      setIsVerifyingBrevo(false);
    }
  };

  // Pri zmene brevoCampaignId automaticky overíme stav v Brevo
  useEffect(() => {
    if (campaign.brevoCampaignId) {
      verifyCampaignInBrevo(campaign.brevoCampaignId);
    } else {
      setIsVerifiedInBrevo(false);
      setBrevoCampaignStatus(null);
    }
  }, [campaign.brevoCampaignId]);

  return (
    <header className="h-16 bg-white border-b border-gray-200 px-4 md:px-6 flex items-center justify-between sticky top-0 z-30 shadow-xs">
      {/* Ľavá časť: Logo, Moje newslettre, Titulok a stav */}
      <div className="flex items-center gap-3">
        <div className="w-9 h-9 rounded-xl bg-[#e2001a] flex items-center justify-center text-white font-black text-sm shadow-sm tracking-tighter shrink-0">
          COOP
        </div>

        {/* Tlačidlo Moje newslettre */}
        <button
          onClick={onOpenSavedCampaigns}
          className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-gray-100 hover:bg-gray-200 px-3 py-1.5 rounded-xl border border-gray-200 transition-colors shadow-xs"
          title="Otvoriť, duplikovať alebo vytvoriť nový newsletter"
        >
          <FolderOpen className="w-3.5 h-3.5 text-blue-600" />
          <span className="hidden sm:inline">Moje newslettre</span>
        </button>

        <div className="h-6 w-px bg-gray-200 mx-1 hidden sm:block" />

        {/* Názov kampane */}
        <div className="flex flex-col">
          {isEditingTitle ? (
            <input
              type="text"
              autoFocus
              value={campaign.title || ''}
              onChange={(e) => onUpdateTitle(e.target.value)}
              onBlur={() => setIsEditingTitle(false)}
              onKeyDown={(e) => {
                if (e.key === 'Enter') setIsEditingTitle(false);
              }}
              className="text-xs font-bold text-gray-900 border border-blue-400 rounded px-2 py-0.5 outline-none bg-blue-50/50 w-56"
            />
          ) : (
            <div
              onClick={() => setIsEditingTitle(true)}
              className="group flex items-center gap-1.5 cursor-pointer"
              title="Kliknite pre úpravu názvu"
            >
              <h1 className="text-xs md:text-sm font-bold text-gray-900 leading-tight max-w-[180px] md:max-w-xs truncate group-hover:text-blue-600">
                {campaign.title || 'COOP Jednota Newsletter'}
              </h1>
              <Edit2 className="w-3 h-3 text-gray-400 group-hover:text-blue-600 transition-colors" />
            </div>
          )}

          <div className="flex items-center gap-2 mt-0.5">
            <span className="text-[10px] text-gray-500">
              {isSaving ? (
                <span className="text-amber-600 font-medium animate-pulse">Ukladám...</span>
              ) : (
                <span className="text-emerald-600 font-medium flex items-center gap-1">
                  <CheckCircle2 className="w-3 h-3" /> Uložené
                </span>
              )}
            </span>
          </div>
        </div>

        {/* Pridanie sekcie */}
        <div className="hidden lg:flex items-center gap-2 ml-4 pl-4 border-l border-gray-200">
          <button
            onClick={() => onAddModule('banner')}
            className="text-[11px] font-bold text-gray-700 bg-gray-50 hover:bg-gray-100 border border-gray-200 px-2.5 py-1 rounded-lg flex items-center gap-1 transition-colors"
          >
            <Plus className="w-3 h-3 text-gray-500" /> Nový Banner
          </button>
          <button
            onClick={() => onAddModule('products_grid')}
            className="text-[11px] font-bold text-gray-700 bg-gray-50 hover:bg-gray-100 border border-gray-200 px-2.5 py-1 rounded-lg flex items-center gap-1 transition-colors"
          >
            <Plus className="w-3 h-3 text-gray-500" /> Produktový rad
          </button>
        </div>
      </div>

      {/* Pravá časť: Uložiť, Duplikovať, Export do ZIP a Inteligentné Brevo akcie */}
      <div className="flex items-center gap-2">
        {/* Pripomienky cez zdieľaný odkaz */}
        {onOpenReviews && (
          <button
            onClick={onOpenReviews}
            className="relative flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 px-3 py-1.5 rounded-xl transition-all shadow-xs"
            title="Odkaz na pripomienky a zoznam pripomienok"
          >
            <MessageSquare className="w-3.5 h-3.5 text-gray-600" />
            <span className="hidden md:inline">Pripomienky</span>
            {reviewOpenCount > 0 && (
              <span className="absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-1 rounded-full bg-[#e2001a] text-white text-[10px] font-black flex items-center justify-center">
                {reviewOpenCount}
              </span>
            )}
          </button>
        )}

        {/* Tlačidlo manuálneho uloženia */}
        <button
          onClick={onSave}
          disabled={isSaving}
          className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 disabled:opacity-50 px-3 py-1.5 rounded-xl transition-all shadow-xs"
          title="Uložiť zmeny ihneď do databázy"
        >
          <Save className="w-3.5 h-3.5 text-gray-600" />
          <span className="hidden md:inline">Uložiť</span>
        </button>

        {/* Tlačidlo duplikovania celej kampane */}
        <button
          onClick={onDuplicateCampaign}
          className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 px-3 py-1.5 rounded-xl transition-all shadow-xs"
          title="Vytvoriť kópiu tohto newslettera"
        >
          <Copy className="w-3.5 h-3.5 text-gray-600" />
          <span className="hidden md:inline">Duplikovať</span>
        </button>

        <button
          onClick={onExportZip}
          className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 px-3.5 py-1.5 rounded-xl transition-all shadow-xs"
        >
          <Download className="w-3.5 h-3.5 text-gray-600" />
          <span className="hidden sm:inline">Export ZIP</span>
        </button>

        {/* BREVO SEKČNÉ OVLÁDANIE S REÁLNYM OVERENÍM */}
        {isVerifyingBrevo ? (
          <div className="flex items-center gap-1.5 text-xs font-bold text-gray-500 bg-gray-100 border border-gray-200 px-3.5 py-1.5 rounded-xl">
            <RefreshCw className="w-3.5 h-3.5 animate-spin text-gray-500" />
            <span>Overujem v Brevo...</span>
          </div>
        ) : isVerifiedInBrevo && campaign.brevoCampaignId ? (
          /* Kampaň je overená priamo v Brevo: Ponúkame úpravu, aktualizáciu alebo odoslanie ako novú */
          <div className="flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 p-1 rounded-xl">
            {/* Odkaz na zoznam / úpravu v Brevo */}
            <a
              href={getBrevoCampaignUrl(campaign.brevoCampaignId)}
              target="_blank"
              rel="noreferrer"
              className="flex items-center gap-1 text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-700 px-3 py-1.2 rounded-lg transition-all shadow-xs"
              title={`Kampaň #${campaign.brevoCampaignId} je v Brevo (${brevoCampaignStatus || 'draft'}). Kliknutím ju otvoríte v Brevo.`}
            >
              <ExternalLink className="w-3.5 h-3.5" />
              <span>Otvoriť v Brevo</span>
            </a>

            {/* Tlačidlo na aktualizáciu existujúcej kampane */}
            <button
              onClick={() => onExportBrevo(true)}
              disabled={isExportingBrevo}
              className="flex items-center gap-1 text-xs font-bold text-emerald-800 hover:bg-emerald-100 px-2.5 py-1.2 rounded-lg transition-all"
              title="Aktualizovať HTML tejto existujúcej kampane v Brevo s najnovšími zmenami"
            >
              <UploadCloud className="w-3.5 h-3.5 text-emerald-700" />
              <span className="hidden xl:inline">{isExportingBrevo ? 'Ukladám...' : 'Aktualizovať'}</span>
            </button>

            {/* Tlačidlo na odoslanie ako úplne novej kampane */}
            <button
              onClick={() => onExportBrevo(false)}
              disabled={isExportingBrevo}
              className="flex items-center gap-1 text-xs font-bold text-emerald-800 hover:bg-emerald-100 px-2 py-1.2 rounded-lg transition-all"
              title="Vytvoriť a odoslať túto kampaň do Brevo ako novú kópiu"
            >
              <Send className="w-3 h-3 text-emerald-700" />
              <span className="hidden 2xl:inline">Ako novú</span>
            </button>

            {/* Tlačidlo na overenie stavu */}
            <button
              onClick={() => verifyCampaignInBrevo()}
              disabled={isVerifyingBrevo}
              className="p-1 hover:bg-emerald-200/60 text-emerald-700 rounded-lg transition-colors"
              title="Znovu overiť stav kampane v Brevo API"
            >
              <RefreshCw className="w-3 h-3" />
            </button>
          </div>
        ) : (
          /* Kampaň v Brevo nie je overená / neexistuje: Zobrazujeme tlačidlo na prvotné odoslanie */
          <button
            onClick={() => onExportBrevo(false)}
            disabled={isExportingBrevo}
            className="flex items-center gap-1.5 text-xs font-bold text-white bg-[#003399] hover:bg-blue-800 disabled:opacity-50 px-3.5 py-1.5 rounded-xl transition-all shadow-xs"
            title="Vytvoriť a odoslať túto kampaň do Brevo"
          >
            <Send className="w-3.5 h-3.5" />
            <span>{isExportingBrevo ? 'Odosielam do Brevo...' : 'Odoslať do Brevo'}</span>
          </button>
        )}
      </div>
    </header>
  );
};