import React, { useCallback, useEffect, useState } from 'react';
import { Link2, RefreshCw, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { apiFetch } from '@/lib/api';
import { cn } from '@/lib/utils';

const CAP_FIELDS = [
    { key: 'linkedin_daily_connection_cap', label: 'Max connects / day', min: 1, max: 200 },
    { key: 'linkedin_daily_message_cap', label: 'Max messages / day', min: 1, max: 300 },
    { key: 'linkedin_weekly_connection_cap', label: 'Max connects / week', min: 1, max: 1000 },
    { key: 'linkedin_weekly_message_cap', label: 'Max messages / week', min: 1, max: 1500 },
];

export default function LinkedInConnectSettings() {
    const [loading, setLoading] = useState(true);
    const [busy, setBusy] = useState(false);
    const [accounts, setAccounts] = useState([]);
    const [defaultRefId, setDefaultRefId] = useState(null);
    const [caps, setCaps] = useState({});
    const [savingCapId, setSavingCapId] = useState(null);

    const load = useCallback(async () => {
        setLoading(true);
        try {
            const r = await apiFetch('/api/unipile/linkedin/campaign-defaults');
            const d = r.ok ? await r.json() : {};
            const accts = d.accounts || [];
            setAccounts(accts);
            setDefaultRefId(d.default_unipile_account_ref_id ?? null);
            setCaps((prev) => {
                const next = { ...prev };
                accts.forEach((a) => {
                    next[a.id] = {
                        linkedin_daily_connection_cap: a.linkedin_daily_connection_cap ?? 20,
                        linkedin_daily_message_cap: a.linkedin_daily_message_cap ?? 40,
                        linkedin_weekly_connection_cap: a.linkedin_weekly_connection_cap ?? 100,
                        linkedin_weekly_message_cap: a.linkedin_weekly_message_cap ?? 200,
                    };
                });
                return next;
            });
        } catch {
            setAccounts([]);
        } finally {
            setLoading(false);
        }
    }, []);

    const saveCaps = useCallback(async (accountId) => {
        const patch = caps[accountId];
        if (!patch) return;
        setSavingCapId(accountId);
        try {
            const res = await apiFetch(`/api/unipile/linkedin/accounts/${accountId}/limits`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(patch),
            });
            if (!res.ok) throw new Error('Could not save limits');
        } catch (e) {
            alert(e.message || 'Failed to save limits');
        } finally {
            setSavingCapId(null);
        }
    }, [caps]);

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

    const connectAccount = async () => {
        setBusy(true);
        try {
            const res = await apiFetch('/api/unipile/linkedin/hosted-link', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    label: 'LinkedIn account',
                }),
            });
            const data = await res.json().catch(() => ({}));
            if (!res.ok) throw new Error(data.detail || 'Could not start LinkedIn connect');
            if (data.url) window.location.href = data.url;
        } catch (e) {
            alert(e.message || 'Connect failed');
        } finally {
            setBusy(false);
        }
    };

    return (
        <section className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
            <div className="flex flex-wrap items-start justify-between gap-3">
                <div className="flex items-center gap-2 font-semibold text-slate-800">
                    <Link2 className="h-5 w-5 text-violet-600" />
                    Connect LinkedIn
                </div>
                <Button type="button" variant="outline" size="sm" disabled={loading || busy} onClick={load}>
                    <RefreshCw className={cn('mr-2 h-4 w-4', loading && 'animate-spin')} />
                    Refresh
                </Button>
            </div>
            <div className="mt-4 flex flex-col gap-3 md:flex-row md:items-end">
                <Button type="button" disabled={busy} onClick={connectAccount} className="bg-slate-900 text-white">
                    <Link2 className="mr-2 h-4 w-4" />
                    Connect account
                </Button>
            </div>

            {loading ? (
                <div className="mt-6 flex justify-center py-8 text-slate-400">
                    <Loader2 className="h-8 w-8 animate-spin" />
                </div>
            ) : accounts.length === 0 ? (
                <p className="mt-6 text-sm text-slate-500">Connected accounts: 0</p>
            ) : (
                <div className="mt-6 space-y-3">
                    <p className="text-sm font-medium text-slate-700">
                        Connected accounts ({accounts.length}) — default for LinkedIn sequence steps
                    </p>
                    <ul className="space-y-2">
                        {accounts.map((a) => {
                            const name = a.display_name || a.label || 'LinkedIn';
                            const initials = name
                                .split(/\s+/)
                                .slice(0, 2)
                                .map((s) => s[0] || '')
                                .join('')
                                .toUpperCase();
                            const checked = defaultRefId != null && Number(defaultRefId) === Number(a.id);
                            const accCaps = caps[a.id] || {};
                            return (
                                <li
                                    key={a.id}
                                    className={cn(
                                        'rounded-xl border px-3 py-2 transition',
                                        checked ? 'border-violet-300 bg-violet-50/60' : 'border-slate-200 hover:bg-slate-50'
                                    )}
                                >
                                    <div className="flex cursor-pointer items-center gap-3" onClick={() => setDefaultRefId(a.id)}>
                                        <input
                                            type="radio"
                                            className="h-4 w-4 accent-violet-600"
                                            checked={checked}
                                            onChange={() => setDefaultRefId(a.id)}
                                        />
                                        {a.avatar_url ? (
                                            <img
                                                src={a.avatar_url}
                                                alt=""
                                                className="h-9 w-9 rounded-full object-cover"
                                            />
                                        ) : (
                                            <span className="flex h-9 w-9 items-center justify-center rounded-full bg-violet-100 text-xs font-semibold text-violet-800">
                                                {initials || 'LI'}
                                            </span>
                                        )}
                                        <div className="min-w-0 flex-1">
                                            <p className="truncate font-medium text-slate-900">{name}</p>
                                            <p className="truncate text-xs text-slate-500">{a.label}</p>
                                        </div>
                                        <span className="text-[10px] font-semibold uppercase text-slate-400">
                                            {a.status || '—'}
                                        </span>
                                    </div>
                                    <div
                                        className="mt-3 grid grid-cols-2 gap-2 border-t border-slate-200/80 pt-3 sm:grid-cols-4"
                                        onClick={(e) => e.stopPropagation()}
                                    >
                                        {CAP_FIELDS.map((f) => (
                                            <label key={f.key} className="flex flex-col gap-1 text-[11px] font-medium text-slate-500">
                                                {f.label}
                                                <input
                                                    type="number"
                                                    min={f.min}
                                                    max={f.max}
                                                    value={accCaps[f.key] ?? ''}
                                                    onChange={(e) =>
                                                        setCaps((prev) => ({
                                                            ...prev,
                                                            [a.id]: {
                                                                ...prev[a.id],
                                                                [f.key]: e.target.value === '' ? '' : Number(e.target.value),
                                                            },
                                                        }))
                                                    }
                                                    onBlur={() => saveCaps(a.id)}
                                                    className="rounded-md border border-slate-200 px-2 py-1 text-xs text-slate-800 focus:border-violet-400 focus:outline-none"
                                                />
                                            </label>
                                        ))}
                                        {savingCapId === a.id ? (
                                            <span className="col-span-2 self-end text-[10px] text-violet-500 sm:col-span-4">Saving…</span>
                                        ) : null}
                                    </div>
                                </li>
                            );
                        })}
                    </ul>
                    <div className="flex flex-wrap items-center gap-3">
                        <button
                            type="button"
                            className="text-xs font-medium text-violet-700 hover:underline"
                            onClick={async () => {
                                setBusy(true);
                                try {
                                    const res = await apiFetch('/api/me/linkedin-prefs', {
                                        method: 'PATCH',
                                        headers: { 'Content-Type': 'application/json' },
                                        body: JSON.stringify({ default_unipile_account_ref_id: 0 }),
                                    });
                                    if (!res.ok) throw new Error('Could not clear');
                                    setDefaultRefId(null);
                                    await load();
                                } catch (e) {
                                    alert(e.message || 'Failed');
                                } finally {
                                    setBusy(false);
                                }
                            }}
                        >
                            Clear default
                        </button>
                    </div>
                </div>
            )}
        </section>
    );
}