'use client';

import { LayoutShell } from '../../../../components/layout-shell';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import api from '../../../../lib/api-client';
import { useState } from 'react';
import { Modal } from '../../../../components/ui/modal';

export default function ApiManagementPage() {
    const queryClient = useQueryClient();
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [newKeyName, setNewKeyName] = useState('');
    const [generatedKey, setGeneratedKey] = useState<string | null>(null);

    const { data: keys } = useQuery({
        queryKey: ['api-keys'],
        queryFn: async () => {
            const response = await api.get('/api-keys');
            return response.data;
        },
    });

    const { data: logs } = useQuery({
        queryKey: ['api-logs'],
        queryFn: async () => {
            const response = await api.get('/api-logs');
            return response.data;
        },
        refetchInterval: 5000, // Live poll logs
    });

    const createMutation = useMutation({
        mutationFn: async () => {
            const response = await api.post('/api-keys', { name: newKeyName, scopes: 'read,write' });
            return response.data;
        },
        onSuccess: (data) => {
            queryClient.invalidateQueries({ queryKey: ['api-keys'] });
            setGeneratedKey(data.api_key);
            setNewKeyName('');
        },
    });

    return (
        <LayoutShell role="SUPER_ADMIN">
            <div className="flex flex-col gap-8">
                {/* API Keys Section */}
                <section>
                    <div className="flex items-center justify-between">
                        <div>
                            <h1 className="text-2xl font-bold text-slate-900">API Management</h1>
                            <p className="text-sm text-slate-500">Manage access keys and monitor system logs.</p>
                        </div>
                        <button
                            onClick={() => setIsModalOpen(true)}
                            className="rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700"
                        >
                            Create API Key
                        </button>
                    </div>

                    <div className="mt-6 overflow-hidden rounded-2xl border border-slate-100 bg-white shadow-sm">
                        <div className="border-b border-slate-100 bg-slate-50 px-6 py-4">
                            <h3 className="font-semibold text-slate-900">Active API Keys</h3>
                        </div>
                        <table className="min-w-full divide-y divide-slate-100 text-sm">
                            <thead className="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
                                <tr>
                                    <th className="px-6 py-3">Name</th>
                                    <th className="px-6 py-3">Scopes</th>
                                    <th className="px-6 py-3">Created</th>
                                    <th className="px-6 py-3">Status</th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-slate-100">
                                {keys?.data?.length === 0 ? (
                                    <tr><td colSpan={4} className="px-6 py-8 text-center text-slate-500">No API keys found.</td></tr>
                                ) : (
                                    keys?.data?.map((key: any) => (
                                        <tr key={key.id}>
                                            <td className="px-6 py-3 font-medium text-slate-900">{key.name}</td>
                                            <td className="px-6 py-3 font-mono text-xs text-slate-500">{key.scopes}</td>
                                            <td className="px-6 py-3 text-slate-500">{key.created_at}</td>
                                            <td className="px-6 py-3">
                                                <span className="rounded-full bg-emerald-50 px-2 py-1 text-xs font-semibold text-emerald-600">Active</span>
                                            </td>
                                        </tr>
                                    ))
                                )}
                            </tbody>
                        </table>
                    </div>
                </section>

                {/* System Logs Section */}
                <section>
                    <div className="mb-4 flex items-center justify-between">
                        <h2 className="text-lg font-bold text-slate-900">System Logs</h2>
                        <span className="flex items-center gap-2 text-xs text-slate-500">
                            <span className="relative flex h-2 w-2">
                                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"></span>
                                <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
                            </span>
                            Live Stream
                        </span>
                    </div>
                    <div className="h-96 overflow-y-auto rounded-2xl border border-slate-800 bg-slate-900 p-4 font-mono text-xs text-slate-300 shadow-inner">
                        {logs?.data?.map((log: any, i: number) => (
                            <div key={i} className="mb-1 border-b border-slate-800 pb-1 last:border-0">
                                <span className="text-emerald-400">[{log.timestamp || 'INFO'}]</span>{' '}
                                <span className="text-slate-100">{log.message}</span>
                                {log.context && (
                                    <pre className="mt-1 overflow-x-auto text-slate-500">{JSON.stringify(log.context, null, 2)}</pre>
                                )}
                            </div>
                        ))}
                        {(!logs?.data || logs.data.length === 0) && (
                            <p className="text-slate-600">Waiting for logs...</p>
                        )}
                    </div>
                </section>
            </div>

            <Modal isOpen={isModalOpen} onClose={() => { setIsModalOpen(false); setGeneratedKey(null); }} title="Create API Key">
                <div className="space-y-4">
                    {!generatedKey ? (
                        <>
                            <div>
                                <label className="block text-sm font-medium text-slate-700">Key Name</label>
                                <input
                                    type="text"
                                    placeholder="e.g. External Integration"
                                    value={newKeyName}
                                    onChange={(e) => setNewKeyName(e.target.value)}
                                    className="mt-1 block w-full rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-brand focus:outline-none"
                                />
                            </div>
                            <div className="flex justify-end gap-3 pt-4">
                                <button
                                    onClick={() => setIsModalOpen(false)}
                                    className="rounded-lg px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50"
                                >
                                    Cancel
                                </button>
                                <button
                                    onClick={() => createMutation.mutate()}
                                    disabled={!newKeyName || createMutation.isPending}
                                    className="rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 disabled:opacity-50"
                                >
                                    {createMutation.isPending ? 'Generating...' : 'Generate Key'}
                                </button>
                            </div>
                        </>
                    ) : (
                        <div className="rounded-lg bg-emerald-50 p-4 text-center">
                            <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-emerald-100 text-2xl">🔑</div>
                            <h3 className="font-bold text-emerald-900">Key Generated!</h3>
                            <p className="mt-1 text-sm text-emerald-700">Copy this key now. You won't see it again.</p>
                            <div className="mt-4 rounded border border-emerald-200 bg-white p-3 font-mono text-sm font-bold text-slate-800 break-all">
                                {generatedKey}
                            </div>
                            <button
                                onClick={() => { setIsModalOpen(false); setGeneratedKey(null); }}
                                className="mt-6 w-full rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700"
                            >
                                Done
                            </button>
                        </div>
                    )}
                </div>
            </Modal>
        </LayoutShell>
    );
}