import React, { useState, useEffect, useCallback } from 'react';
import { __ } from '@wordpress/i18n';
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Check, Pencil, Plus, RefreshCw, Trash2, X } from 'lucide-react';

/**
 * Admin list of the help questions generated from Contact Information, Custom Content, External Sources, pages & posts.
 * Questions can be hidden, edited, deleted, added manually or regenerated.
 */
const HelpQuestions = ({ restUrl, nonce, processing }) => {
    const [questions, setQuestions] = useState([]);
    const [loading, setLoading] = useState(true);
    const [busy, setBusy] = useState(false);
    const [error, setError] = useState(null);
    const [newQuestion, setNewQuestion] = useState('');
    const [editingId, setEditingId] = useState(null);
    const [editingText, setEditingText] = useState('');

    const request = useCallback(async (path = '', options = {}) => {
        const response = await fetch(`${restUrl}aisk/v1/help-questions${path}`, {
            method: options.method || 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-WP-Nonce': nonce
            },
            credentials: 'same-origin',
            body: options.body ? JSON.stringify(options.body) : undefined
        });
        const data = await response.json();
        if (!response.ok) {
            throw new Error(data?.message || __('Request failed', 'aisk-ai-chat'));
        }
        return Array.isArray(data) ? data : [];
    }, [restUrl, nonce]);

    const run = async (path, options) => {
        setBusy(true);
        setError(null);
        try {
            setQuestions(await request(path, options));
            return true;
        } catch (e) {
            setError(e.message);
            return false;
        } finally {
            setBusy(false);
        }
    };

    const loadQuestions = useCallback(async () => {
        try {
            setQuestions(await request());
        } catch (e) {
            setError(e.message);
        } finally {
            setLoading(false);
        }
    }, [request]);

    // Load on mount and again once "Generate Embeddings" finishes, since that creates the questions
    useEffect(() => {
        if (!processing) {
            loadQuestions();
        }
    }, [processing, loadQuestions]);

    const addQuestion = async () => {
        if (!newQuestion.trim()) return;
        if (await run('', { method: 'POST', body: { question: newQuestion } })) {
            setNewQuestion('');
        }
    };

    const saveEdit = async (id) => {
        if (!editingText.trim()) return;
        if (await run(`/${id}`, { method: 'POST', body: { question: editingText } })) {
            setEditingId(null);
        }
    };

    return (
        <div className="space-y-3">
            <div className="flex items-start justify-between gap-4">
                <div>
                    <Label>{__('Help Questions', 'aisk-ai-chat')}</Label>
                    <p className="text-sm text-gray-500">
                        {__('Generated from your Contact Information, Custom Content, External Sources, pages and posts when you save, generate embeddings or process a URL. Active questions appear in the chat widget Home and Help screens.', 'aisk-ai-chat')}
                    </p>
                </div>
                <Button
                    variant="outline"
                    onClick={() => run('/regenerate', { method: 'POST' })}
                    disabled={busy || processing}
                >
                    <RefreshCw className={`w-4 h-4 mr-2 ${busy ? 'animate-spin' : ''}`} />
                    {__('Regenerate', 'aisk-ai-chat')}
                </Button>
            </div>

            {error && <p className="text-sm text-red-500">{error}</p>}

            <div className="border rounded-lg divide-y bg-white">
                {loading ? (
                    <p className="p-4 text-sm text-gray-500">{__('Loading questions...', 'aisk-ai-chat')}</p>
                ) : questions.length === 0 ? (
                    <p className="p-4 text-sm text-gray-500">
                        {__('No questions yet. Add Contact Information or Custom Content and click Generate Embeddings.', 'aisk-ai-chat')}
                    </p>
                ) : (
                    questions.map((item) => (
                        <div key={item.id} className="flex items-center gap-3 px-4 py-2">
                            <Switch
                                checked={item.is_active}
                                onCheckedChange={(checked) => run(`/${item.id}`, { method: 'POST', body: { is_active: checked } })}
                                disabled={busy}
                                aria-label={__('Show in chat widget', 'aisk-ai-chat')}
                            />
                            {editingId === item.id ? (
                                <>
                                    <Input
                                        value={editingText}
                                        onChange={(e) => setEditingText(e.target.value)}
                                        onKeyDown={(e) => e.key === 'Enter' && saveEdit(item.id)}
                                        className="flex-1"
                                        autoFocus
                                    />
                                    <Button variant="ghost" size="icon" onClick={() => saveEdit(item.id)} disabled={busy} aria-label={__('Save', 'aisk-ai-chat')}>
                                        <Check className="w-4 h-4" />
                                    </Button>
                                    <Button variant="ghost" size="icon" onClick={() => setEditingId(null)} aria-label={__('Cancel', 'aisk-ai-chat')}>
                                        <X className="w-4 h-4" />
                                    </Button>
                                </>
                            ) : (
                                <>
                                    <span className={`flex-1 text-sm ${item.is_active ? 'text-gray-900' : 'text-gray-400 line-through'}`}>
                                        {item.question}
                                    </span>
                                    <span className="text-xs text-gray-400">
                                        {item.source === 'auto' ? __('Auto', 'aisk-ai-chat') : __('Manual', 'aisk-ai-chat')}
                                    </span>
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        onClick={() => { setEditingId(item.id); setEditingText(item.question); }}
                                        disabled={busy}
                                        aria-label={__('Edit', 'aisk-ai-chat')}
                                    >
                                        <Pencil className="w-4 h-4" />
                                    </Button>
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        onClick={() => run(`/${item.id}`, { method: 'DELETE' })}
                                        disabled={busy}
                                        aria-label={__('Delete', 'aisk-ai-chat')}
                                    >
                                        <Trash2 className="w-4 h-4" />
                                    </Button>
                                </>
                            )}
                        </div>
                    ))
                )}
            </div>

            <div className="flex gap-2">
                <Input
                    value={newQuestion}
                    onChange={(e) => setNewQuestion(e.target.value)}
                    onKeyDown={(e) => e.key === 'Enter' && addQuestion()}
                    placeholder={__('Add your own question...', 'aisk-ai-chat')}
                />
                <Button variant="outline" onClick={addQuestion} disabled={busy || !newQuestion.trim()}>
                    <Plus className="w-4 h-4 mr-1" />
                    {__('Add', 'aisk-ai-chat')}
                </Button>
            </div>
        </div>
    );
};

export default HelpQuestions;