'use client';

import React, { useState, useEffect } from 'react';
import { Mail, Download, Search, Filter, CheckCircle, XCircle, Calendar, Globe } from 'lucide-react';
import { Newsletter } from '../../types/newsletter';

interface NewsletterListProps {
  className?: string;
}

export function NewsletterList({ className = '' }: NewsletterListProps) {
  const [newsletters, setNewsletters] = useState<Newsletter[]>([]);
  const [filteredNewsletters, setFilteredNewsletters] = useState<Newsletter[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [activeOnly, setActiveOnly] = useState(true);
  const [exporting, setExporting] = useState(false);

  useEffect(() => {
    fetchNewsletters();
  }, [activeOnly]);

  useEffect(() => {
    // Filter newsletters based on search query
    if (!searchQuery.trim()) {
      setFilteredNewsletters(newsletters);
      return;
    }

    const filtered = newsletters.filter((newsletter) =>
      newsletter.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
      newsletter.source?.toLowerCase().includes(searchQuery.toLowerCase())
    );
    setFilteredNewsletters(filtered);
  }, [searchQuery, newsletters]);

  const fetchNewsletters = async () => {
    try {
      setLoading(true);
      setError(null);
      
      // Get auth token for authenticated request
      const { auth } = await import('../../lib/firebase');
      const currentUser = auth.currentUser;
      const token = currentUser ? await currentUser.getIdToken() : null;
      
      const headers: HeadersInit = {};
      if (token) {
        headers['Authorization'] = `Bearer ${token}`;
      }
      
      const response = await fetch(`/api/admin/newsletter?activeOnly=${activeOnly}`, {
        headers,
      });
      const result = await response.json();

      console.log('Newsletter API response:', { ok: response.ok, result });

      if (!response.ok) {
        throw new Error(result.error || 'Błąd podczas pobierania listy');
      }

      console.log('Setting newsletters:', result.data?.length || 0, 'items');
      setNewsletters(result.data || []);
      setFilteredNewsletters(result.data || []);
    } catch (err: any) {
      console.error('Error fetching newsletters:', err);
      setError(err.message || 'Nie udało się pobrać listy e-maili');
    } finally {
      setLoading(false);
    }
  };

  const handleExport = async () => {
    try {
      setExporting(true);
      
      // Create CSV content
      const headers = ['Email', 'Data zapisu', 'Status', 'Źródło'];
      const rows = filteredNewsletters.map((newsletter) => [
        newsletter.email,
        newsletter.subscribedAt.toLocaleDateString('pl-PL'),
        newsletter.isActive ? 'Aktywny' : 'Nieaktywny',
        newsletter.source || 'website',
      ]);

      const csvContent = [
        headers.join(','),
        ...rows.map((row) => row.map((cell) => `"${cell}"`).join(',')),
      ].join('\n');

      // Create blob and download
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement('a');
      const url = URL.createObjectURL(blob);
      
      link.setAttribute('href', url);
      link.setAttribute('download', `newsletter-${new Date().toISOString().split('T')[0]}.csv`);
      link.style.visibility = 'hidden';
      
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      
      URL.revokeObjectURL(url);
    } catch (err: any) {
      console.error('Error exporting newsletters:', err);
      alert('Błąd podczas eksportu: ' + err.message);
    } finally {
      setExporting(false);
    }
  };

  const formatDate = (date: Date | string | any) => {
    try {
      let dateObj: Date;
      
      // Handle different date formats
      if (date instanceof Date) {
        dateObj = date;
      } else if (typeof date === 'string') {
        dateObj = new Date(date);
      } else if (date?.toDate) {
        // Firestore Timestamp
        dateObj = date.toDate();
      } else if (date?.seconds) {
        // Firestore Timestamp with seconds
        dateObj = new Date(date.seconds * 1000);
      } else {
        // Fallback to current date
        dateObj = new Date();
      }
      
      // Check if date is valid
      if (!isFinite(dateObj.getTime())) {
        return 'Data nieznana';
      }
      
      return new Intl.DateTimeFormat('pl-PL', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
      }).format(dateObj);
    } catch (error) {
      console.error('Error formatting date:', error, date);
      return 'Data nieznana';
    }
  };

  if (loading) {
    return (
      <div className={`bg-white rounded-xl shadow-sm border border-gray-200 p-6 ${className}`}>
        <div className="animate-pulse">
          <div className="h-8 bg-gray-200 rounded w-1/3 mb-4"></div>
          <div className="space-y-3">
            {[...Array(5)].map((_, i) => (
              <div key={i} className="h-16 bg-gray-200 rounded"></div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className={`bg-white rounded-xl shadow-sm border border-gray-200 p-6 ${className}`}>
        <div className="text-center py-8">
          <XCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
          <p className="text-red-600 mb-4">{error}</p>
          <button
            onClick={fetchNewsletters}
            className="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors"
          >
            Spróbuj ponownie
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className={`bg-white rounded-xl shadow-sm border border-gray-200 p-6 ${className}`}>
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
            <Mail className="w-5 h-5 text-orange-600" />
          </div>
          <div>
            <h2 className="text-xl font-semibold text-gray-900">Newsletter</h2>
            <p className="text-sm text-gray-500">
              {filteredNewsletters.length} {filteredNewsletters.length === 1 ? 'e-mail' : 'e-maili'}
            </p>
          </div>
        </div>
        <button
          onClick={handleExport}
          disabled={exporting || filteredNewsletters.length === 0}
          className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
        >
          <Download className="w-4 h-4" />
          {exporting ? 'Eksportowanie...' : 'Eksportuj CSV'}
        </button>
      </div>

      {/* Filters */}
      <div className="flex flex-col sm:flex-row gap-4 mb-6">
        <div className="flex-1 relative">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
          <input
            type="text"
            placeholder="Szukaj po e-mailu lub źródle..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent"
          />
        </div>
        <button
          onClick={() => setActiveOnly(!activeOnly)}
          className={`flex items-center gap-2 px-4 py-2 rounded-lg border transition-colors ${
            activeOnly
              ? 'bg-orange-50 border-orange-200 text-orange-700'
              : 'bg-gray-50 border-gray-300 text-gray-700 hover:bg-gray-100'
          }`}
        >
          <Filter className="w-4 h-4" />
          {activeOnly ? 'Tylko aktywne' : 'Wszystkie'}
        </button>
      </div>

      {/* Newsletter List */}
      {filteredNewsletters.length === 0 ? (
        <div className="text-center py-12">
          <Mail className="w-16 h-16 text-gray-300 mx-auto mb-4" />
          <p className="text-gray-500 text-lg mb-2">
            {searchQuery ? 'Brak wyników wyszukiwania' : 'Brak zapisanych e-maili'}
          </p>
          {searchQuery && (
            <button
              onClick={() => setSearchQuery('')}
              className="text-orange-600 hover:text-orange-700 text-sm"
            >
              Wyczyść wyszukiwanie
            </button>
          )}
        </div>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-gray-200">
                <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">E-mail</th>
                <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Data zapisu</th>
                <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Status</th>
                <th className="text-left py-3 px-4 text-sm font-semibold text-gray-700">Źródło</th>
              </tr>
            </thead>
            <tbody>
              {filteredNewsletters.map((newsletter) => (
                <tr
                  key={newsletter.id}
                  className="border-b border-gray-100 hover:bg-gray-50 transition-colors"
                >
                  <td className="py-4 px-4">
                    <div className="flex items-center gap-2">
                      <Mail className="w-4 h-4 text-gray-400" />
                      <span className="text-gray-900 font-medium">{newsletter.email}</span>
                    </div>
                  </td>
                  <td className="py-4 px-4">
                    <div className="flex items-center gap-2 text-gray-600">
                      <Calendar className="w-4 h-4 text-gray-400" />
                      <span className="text-sm">{formatDate(newsletter.subscribedAt)}</span>
                    </div>
                  </td>
                  <td className="py-4 px-4">
                    <div className="flex items-center gap-2">
                      {newsletter.isActive ? (
                        <>
                          <CheckCircle className="w-4 h-4 text-green-500" />
                          <span className="text-sm text-green-700 font-medium">Aktywny</span>
                        </>
                      ) : (
                        <>
                          <XCircle className="w-4 h-4 text-red-500" />
                          <span className="text-sm text-red-700 font-medium">Nieaktywny</span>
                        </>
                      )}
                    </div>
                  </td>
                  <td className="py-4 px-4">
                    <div className="flex items-center gap-2">
                      <Globe className="w-4 h-4 text-gray-400" />
                      <span className="text-sm text-gray-600 capitalize">
                        {newsletter.source || 'website'}
                      </span>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}