import { useState } from 'react';
import Head from 'next/head';
import Layout from '../../components/Layout';
import { adminAPI } from '../../services/api';

export default function AdminLicenses() {
    const [genForm, setGenForm] = useState({ userId: '', plan: 'PRO_MONTHLY', durationDays: 30 });
    const [loading, setLoading] = useState(false);

    const handleGenerateLicense = async () => {
        if (!genForm.userId) return alert('User ID required');
        setLoading(true);
        try {
            await adminAPI.generateLicense({ userId: genForm.userId, plan: genForm.plan, durationDays: genForm.durationDays });
            alert('License generated successfully!');
            setGenForm({ userId: '', plan: 'PRO_MONTHLY', durationDays: 30 });
        } catch (err: any) {
            alert(err.response?.data?.message || 'Failed to generate license');
        }
        setLoading(false);
    };

    return (
        <>
            <Head><title>Licenses – MarketScope Admin</title></Head>
            <Layout requireAdmin>
                <div className="animate-fade-in max-w-2xl">
                    <h1 className="text-2xl font-bold mb-6">🔑 License Management</h1>

                    <div className="card">
                        <h3 className="text-sm font-bold text-gray-400 uppercase tracking-wider mb-6">Generate New License</h3>
                        <div className="space-y-6">
                            <div>
                                <label className="block text-sm font-medium text-gray-400 mb-2">User ID (UUID)</label>
                                <input
                                    type="text"
                                    value={genForm.userId}
                                    onChange={(e) => setGenForm({ ...genForm, userId: e.target.value })}
                                    className="input-field"
                                    placeholder="e.g. 550e8400-e29b-41d4-a716-446655440000"
                                />
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div>
                                    <label className="block text-sm font-medium text-gray-400 mb-2">Plan</label>
                                    <select
                                        value={genForm.plan}
                                        onChange={(e) => setGenForm({ ...genForm, plan: e.target.value })}
                                        className="input-field"
                                    >
                                        <option value="PRO_MONTHLY">Pro Monthly</option>
                                        <option value="PRO_YEARLY">Pro Yearly</option>
                                    </select>
                                </div>
                                <div>
                                    <label className="block text-sm font-medium text-gray-400 mb-2">Duration (Days)</label>
                                    <input
                                        type="number"
                                        value={genForm.durationDays}
                                        onChange={(e) => setGenForm({ ...genForm, durationDays: Number(e.target.value) })}
                                        className="input-field"
                                    />
                                </div>
                            </div>

                            <button
                                onClick={handleGenerateLicense}
                                disabled={loading}
                                className="btn-primary w-full flex items-center justify-center gap-2"
                            >
                                {loading ? <div className="animate-spin w-5 h-5 border-2 border-white border-t-transparent rounded-full" /> : 'Generate License Key'}
                            </button>
                        </div>
                    </div>

                    <div className="mt-8 p-4 bg-blue-500/5 border border-blue-500/20 rounded-xl">
                        <p className="text-xs text-blue-400 leading-relaxed">
                            <span className="font-bold">Note:</span> Generating a license will automatically assign it to the specified user and set their role to <b>USER_PRO</b> if not already set. The user will need to restart their extension or wait for the 24h cache to refresh.
                        </p>
                    </div>
                </div>
            </Layout>
        </>
    );
}
