import { useForm } from '@inertiajs/react';
import { X, KeyRound, Loader2 } from 'lucide-react';

/**
 * Rentec uses an API key, so connecting is a form rather than an OAuth redirect.
 * Organizations running several Rentec portfolios add one connection per key.
 */
export function RentecConnectModal({ onClose, existingCount }: { onClose: () => void; existingCount: number }) {
    const form = useForm({ api_key: '', display_name: existingCount > 0 ? '' : 'Rentec Live' });

    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        form.post('/data-manager/rentec/connect', { onSuccess: () => onClose(), preserveScroll: true });
    };

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" onClick={onClose}>
            <div className="w-full max-w-md rounded-2xl border border-border bg-card shadow-xl" onClick={(e) => e.stopPropagation()}>
                <header className="flex items-center justify-between border-b border-border px-5 py-4">
                    <h2 className="flex items-center gap-2 font-semibold text-foreground">
                        <KeyRound className="size-4 text-primary" /> Connect Rentec Direct
                    </h2>
                    <button onClick={onClose} className="rounded p-1 text-muted-foreground hover:bg-muted"><X className="size-4" /></button>
                </header>

                <form onSubmit={submit} className="space-y-4 px-5 py-5">
                    <p className="text-sm text-muted-foreground">
                        Generate a read-only API key in Rentec under <strong>Settings → API</strong>.
                        {existingCount > 0 && ' Add another connection if you manage more than one Rentec portfolio.'}
                    </p>

                    <div>
                        <label className="mb-1 block text-sm font-medium text-foreground">Connection name</label>
                        <input value={form.data.display_name} onChange={(e) => form.setData('display_name', e.target.value)}
                            placeholder="e.g. Corporate Portfolio" required
                            className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm" />
                        {form.errors.display_name && <p className="mt-1 text-xs text-destructive">{form.errors.display_name}</p>}
                    </div>

                    <div>
                        <label className="mb-1 block text-sm font-medium text-foreground">API key</label>
                        <input type="password" value={form.data.api_key} onChange={(e) => form.setData('api_key', e.target.value)}
                            placeholder="eyJhbGciOi..." required autoComplete="off"
                            className="w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm" />
                        {form.errors.api_key && <p className="mt-1 text-xs text-destructive">{form.errors.api_key}</p>}
                        <p className="mt-1 text-[11px] text-muted-foreground">Encrypted at rest. We verify it against Rentec before saving.</p>
                    </div>

                    <div className="flex justify-end gap-2 pt-1">
                        <button type="button" onClick={onClose}
                            className="rounded-md border border-border px-3.5 py-2 text-sm font-medium hover:bg-muted">Cancel</button>
                        <button type="submit" disabled={form.processing || !form.data.api_key || !form.data.display_name}
                            className="inline-flex items-center gap-1.5 rounded-md bg-primary px-3.5 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50">
                            {form.processing && <Loader2 className="size-3.5 animate-spin" />}
                            Verify & connect
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
}