import React, { useEffect, useState } from 'react';
import { AuthProvider, AuthGuard, useAuth } from './AdminAuth';
import AdminLayout from './AdminLayout';

interface Feed {
  id: string;
  name: string;
  enabled: boolean;
  status: string;
  product_count: number;
  last_sync: string | null;
  error_message?: string;
}

function StatusBadge({ status }: { status: string }) {
  const styles: Record<string, string> = {
    active: 'bg-[#00FF6A]/10 text-[#00FF6A]',
    error: 'bg-[#FF3B3B]/10 text-[#FF3B3B]',
    paused: 'bg-[#666]/10 text-[#666]',
    syncing: 'bg-[#FFD700]/10 text-[#FFD700]',
  };
  return (
    <span className={`text-xs px-2 py-1 rounded-full ${styles[status] || styles.active}`}>
      {status === 'active' ? 'Active' : status === 'error' ? 'Error' : status === 'paused' ? 'Paused' : 'Syncing'}
    </span>
  );
}

function FeedManagerContent() {
  const { token } = useAuth();
  const [feeds, setFeeds] = useState<Feed[]>([]);

  useEffect(() => {
    // Mock feeds for now - replace with API call when feeds table exists
    setFeeds([
      { id: '1', name: 'Footlocker NL', enabled: true, status: 'active', product_count: 1204, last_sync: '2 uur geleden' },
      { id: '2', name: 'JD Sports', enabled: true, status: 'active', product_count: 2341, last_sync: '1 uur geleden' },
      { id: '3', name: 'Zalando NL', enabled: true, status: 'error', product_count: 892, last_sync: '6 uur geleden', error_message: 'Feed URL timeout' },
      { id: '4', name: 'Sneakerstad', enabled: false, status: 'paused', product_count: 456, last_sync: '3 dagen geleden' },
      { id: '5', name: 'TradeTracker', enabled: true, status: 'active', product_count: 3102, last_sync: '30 min geleden' },
    ]);
  }, []);

  const toggleFeed = (id: string) => {
    setFeeds(prev => prev.map(f => f.id === id ? { ...f, enabled: !f.enabled, status: f.enabled ? 'paused' : 'active' } : f));
  };

  const syncFeed = (id: string) => {
    setFeeds(prev => prev.map(f => f.id === id ? { ...f, status: 'syncing' } : f));
    setTimeout(() => {
      setFeeds(prev => prev.map(f => f.id === id ? { ...f, status: 'active', last_sync: 'Zojuist' } : f));
    }, 2000);
  };

  return (
    <AdminLayout title="Feeds">
      <div className="bg-[#141414] border border-[#333] rounded-xl overflow-hidden">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-[#333] text-[#999] text-left">
              <th className="px-5 py-3 font-medium">Name</th>
              <th className="px-5 py-3 font-medium">Status</th>
              <th className="px-5 py-3 font-medium">Products</th>
              <th className="px-5 py-3 font-medium">Last Sync</th>
              <th className="px-5 py-3 font-medium">Actions</th>
            </tr>
          </thead>
          <tbody>
            {feeds.map(feed => (
              <tr key={feed.id} className="border-b border-[#222] hover:bg-[#1A1A1A] transition-colors">
                <td className="px-5 py-3 text-[#F5F5F5] font-medium">{feed.name}</td>
                <td className="px-5 py-3"><StatusBadge status={feed.status} /></td>
                <td className="px-5 py-3 text-[#999]">{feed.product_count.toLocaleString()}</td>
                <td className="px-5 py-3 text-[#999]">{feed.last_sync}</td>
                <td className="px-5 py-3 flex gap-2">
                  <button onClick={() => syncFeed(feed.id)} title="Force sync"
                    className="text-[#999] hover:text-[#00FF6A] transition-colors" disabled={feed.status === 'syncing'}>⟳</button>
                  <button onClick={() => toggleFeed(feed.id)} title={feed.enabled ? 'Pause' : 'Resume'}
                    className="text-[#999] hover:text-[#F5F5F5] transition-colors">{feed.enabled ? 'Pause' : 'Play'}</button>
                  <button className="text-[#999] hover:text-[#F5F5F5] transition-colors">✎</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </AdminLayout>
  );
}

export default function FeedManagerPage() {
  return <AuthProvider><AuthGuard><FeedManagerContent /></AuthGuard></AuthProvider>;
}