'use client';

import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { ArrowLeft, Plus, Trash2, Zap, RefreshCw, Send, Globe } from 'lucide-react';
import {
  listSubscriptions,
  createSubscription,
  deleteSubscription,
  testWebhook,
  getEventTypes,
  type WebhookSubscription,
  type EventType,
} from '@/lib/webhook-client';

export default function WebhooksPage() {
  const [subs, setSubs] = useState<WebhookSubscription[]>([]);
  const [eventTypes, setEventTypes] = useState<EventType[]>([]);
  const [loading, setLoading] = useState(true);
  const [showCreate, setShowCreate] = useState(false);
  const [newUrl, setNewUrl] = useState('');
  const [newEvents, setNewEvents] = useState<string[]>([]);
  const [newDesc, setNewDesc] = useState('');
  const [error, setError] = useState<string | null>(null);

  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      const [subsData, typesData] = await Promise.all([listSubscriptions(), getEventTypes()]);
      setSubs(subsData);
      setEventTypes(typesData.eventTypes);
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to load');
    }
    setLoading(false);
  }, []);

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

  const handleCreate = async () => {
    if (!newUrl.trim() || newEvents.length === 0) {
      setError('URL and at least one event type are required');
      return;
    }
    try {
      await createSubscription({ url: newUrl.trim(), events: newEvents, description: newDesc.trim() || undefined });
      setShowCreate(false);
      setNewUrl('');
      setNewEvents([]);
      setNewDesc('');
      loadData();
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to create');
    }
  };

  const handleDelete = async (id: string) => {
    try {
      await deleteSubscription(id);
      loadData();
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to delete');
    }
  };

  const handleTest = async (id: string) => {
    try {
      await testWebhook(id);
      setError(null);
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Test failed');
    }
  };

  const toggleEvent = (type: string) => {
    setNewEvents(prev => prev.includes(type) ? prev.filter(t => t !== type) : [...prev, type]);
  };

  return (
    <div className="min-h-screen" style={{ backgroundColor: 'var(--cm-bg-canvas)' }}>
      <div className="max-w-2xl mx-auto px-4 py-6">
        {/* Header */}
        <div className="flex items-center gap-3 mb-6">
          <Link href="/settings" className="p-2 rounded-lg" style={{ color: 'var(--cm-text-secondary)' }} aria-label="Back to settings">
            <ArrowLeft size={20} />
          </Link>
          <div className="flex-1">
            <h1 className="text-xl font-bold" style={{ color: 'var(--cm-text-primary)' }}>Webhooks</h1>
            <p className="text-xs" style={{ color: 'var(--cm-text-tertiary)' }}>Integrate ChronoMind with external services</p>
          </div>
          <button
            onClick={() => setShowCreate(!showCreate)}
            aria-label="Add webhook"
            className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium cursor-pointer"
            style={{ backgroundColor: 'var(--cm-accent)', color: 'var(--cm-white)' }}
          >
            <Plus size={14} /> Add
          </button>
        </div>

        {/* Error */}
        {error && (
          <div className="rounded-lg p-3 mb-4 text-sm" style={{ backgroundColor: 'var(--cm-critical-10)', color: 'var(--cm-danger)' }} role="alert">
            {error}
            <button onClick={() => setError(null)} className="ml-2 underline cursor-pointer" aria-label="Dismiss error">dismiss</button>
          </div>
        )}

        {/* Create form */}
        {showCreate && (
          <div className="rounded-xl border p-4 mb-4" style={{ backgroundColor: 'var(--cm-surface-card)', borderColor: 'var(--cm-border)' }}>
            <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--cm-text-primary)' }}>New Webhook</h3>
            <input
              type="url"
              value={newUrl}
              onChange={e => setNewUrl(e.target.value)}
              placeholder="https://example.com/webhook"
              className="w-full px-3 py-2 rounded-lg text-sm mb-3"
              style={{ backgroundColor: 'var(--cm-surface-muted)', color: 'var(--cm-text-primary)', border: '1px solid var(--cm-border)' }}
            />
            <input
              type="text"
              value={newDesc}
              onChange={e => setNewDesc(e.target.value)}
              placeholder="Description (optional)"
              className="w-full px-3 py-2 rounded-lg text-sm mb-3"
              style={{ backgroundColor: 'var(--cm-surface-muted)', color: 'var(--cm-text-primary)', border: '1px solid var(--cm-border)' }}
            />
            <p className="text-xs font-medium mb-2" style={{ color: 'var(--cm-text-secondary)' }}>Events</p>
            <div className="flex flex-wrap gap-2 mb-3">
              {eventTypes.map(et => (
                <button
                  key={et.type}
                  onClick={() => toggleEvent(et.type)}
                  className="px-2 py-1 rounded text-[10px] font-medium cursor-pointer"
                  style={{
                    backgroundColor: newEvents.includes(et.type) ? 'var(--cm-accent)' : 'var(--cm-surface-muted)',
                    color: newEvents.includes(et.type) ? 'var(--cm-white)' : 'var(--cm-text-secondary)',
                  }}
                >
                  {et.type}
                </button>
              ))}
            </div>
            <button
              onClick={handleCreate}
              className="w-full py-2 rounded-lg text-sm font-medium cursor-pointer"
              style={{ backgroundColor: 'var(--cm-accent)', color: 'var(--cm-white)' }}
            >
              Create Webhook
            </button>
          </div>
        )}

        {/* Subscriptions list */}
        {loading ? (
          <div className="text-center py-12">
            <RefreshCw size={24} className="animate-spin mx-auto mb-2" style={{ color: 'var(--cm-text-tertiary)' }} />
          </div>
        ) : subs.length === 0 ? (
          <div className="text-center py-12">
            <Globe size={32} style={{ color: 'var(--cm-text-tertiary)' }} className="mx-auto mb-3" />
            <p className="text-sm" style={{ color: 'var(--cm-text-secondary)' }}>No webhooks configured.</p>
          </div>
        ) : (
          <div className="space-y-3">
            {subs.map(sub => (
              <div
                key={sub.id}
                className="rounded-xl border p-4"
                style={{ backgroundColor: 'var(--cm-surface-card)', borderColor: 'var(--cm-border)' }}
              >
                <div className="flex items-start justify-between mb-2">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <Zap size={14} style={{ color: sub.active ? 'var(--cm-gentle)' : 'var(--cm-text-tertiary)' }} />
                      <span className="text-sm font-medium truncate" style={{ color: 'var(--cm-text-primary)' }}>
                        {sub.url}
                      </span>
                    </div>
                    {sub.description && (
                      <p className="text-xs" style={{ color: 'var(--cm-text-secondary)' }}>{sub.description}</p>
                    )}
                    <div className="flex flex-wrap gap-1 mt-1">
                      {sub.events.map(evt => (
                        <span key={evt} className="px-1.5 py-0.5 rounded text-[10px]" style={{ backgroundColor: 'var(--cm-surface-muted)', color: 'var(--cm-text-tertiary)' }}>
                          {evt}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
                <div className="flex items-center justify-between mt-3">
                  <span className="text-[10px]" style={{ color: 'var(--cm-text-tertiary)' }}>
                    {sub.consecutiveFailures > 0 ? `${sub.consecutiveFailures} failures` : 'Healthy'}
                  </span>
                  <div className="flex gap-2">
                    <button
                      onClick={() => handleTest(sub.id)}
                      aria-label="Send test webhook"
                      className="flex items-center gap-1 px-2 py-1 rounded text-[10px] cursor-pointer"
                      style={{ color: 'var(--cm-accent)' }}
                    >
                      <Send size={12} /> Test
                    </button>
                    <button
                      onClick={() => handleDelete(sub.id)}
                      aria-label="Delete webhook"
                      className="flex items-center gap-1 px-2 py-1 rounded text-[10px] cursor-pointer"
                      style={{ color: 'var(--cm-danger)' }}
                    >
                      <Trash2 size={12} /> Delete
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}