import { useState, useEffect } from 'react'
import { Cloud, ArrowRight, ExternalLink, Info, CheckCircle2, XCircle } from 'lucide-react'

export default function VercelSync({ onMessage, authFetch }) {
    const [vercelToken, setVercelToken] = useState('')
    const [projectId, setProjectId] = useState('')
    const [teamId, setTeamId] = useState('')
    const [loading, setLoading] = useState(false)
    const [result, setResult] = useState(null)
    const [preconfig, setPreconfig] = useState(null)

    const apiFetch = authFetch || fetch

    useEffect(() => {
        const loadPreconfig = async () => {
            try {
                const res = await apiFetch('/admin/vercel/config')
                if (res.ok) {
                    const data = await res.json()
                    setPreconfig(data)
                    if (data.project_id) setProjectId(data.project_id)
                    if (data.team_id) setTeamId(data.team_id)
                }
            } catch (e) {
                console.error('Failed to load preconfig:', e)
            }
        }
        loadPreconfig()
    }, [])

    const handleSync = async () => {
        const tokenToUse = preconfig?.has_token && !vercelToken ? '__USE_PRECONFIG__' : vercelToken

        if (!tokenToUse && !preconfig?.has_token) {
            onMessage('error', 'Vercel Token is required')
            return
        }
        if (!projectId) {
            onMessage('error', 'Project ID is required')
            return
        }

        setLoading(true)
        setResult(null)
        try {
            const res = await apiFetch('/admin/vercel/sync', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    vercel_token: vercelToken,
                    project_id: projectId,
                    team_id: teamId || undefined,
                }),
            })
            const data = await res.json()
            if (res.ok) {
                setResult({ ...data, success: true })
                onMessage('success', data.message)
            } else {
                setResult({ ...data, success: false })
                onMessage('error', data.detail || 'Sync failed')
            }
        } catch (e) {
            onMessage('error', 'Network error')
        } finally {
            setLoading(false)
        }
    }

    return (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-5xl mx-auto h-[calc(100vh-140px)]">
            {/* Configuration Form */}
            <div className="bg-card border border-border rounded-xl shadow-sm p-6 space-y-6">
                <div className="border-b border-border pb-6">
                    <h2 className="text-xl font-semibold flex items-center gap-2">
                        <Cloud className="w-6 h-6 text-primary" />
                        Vercel Deployment
                    </h2>
                    <p className="text-muted-foreground text-sm mt-1">
                        Sync your current key and account configuration directly to Vercel environment variables.
                    </p>
                </div>

                <div className="space-y-4">
                    <div className="space-y-2">
                        <label className="text-sm font-medium flex items-center justify-between">
                            Vercel Token
                            <a href="https://vercel.com/account/tokens" target="_blank" rel="noopener noreferrer" className="text-xs text-primary hover:underline flex items-center gap-1">
                                Get Token <ExternalLink className="w-3 h-3" />
                            </a>
                        </label>
                        <div className="relative">
                            <input
                                type="password"
                                className="input-field pr-10"
                                placeholder={preconfig?.has_token ? "Using pre-configured token" : "Enter Vercel Access Token"}
                                value={vercelToken}
                                onChange={e => setVercelToken(e.target.value)}
                            />
                            {preconfig?.has_token && !vercelToken && (
                                <div className="absolute right-3 top-2.5 text-emerald-500">
                                    <CheckCircle2 className="w-5 h-5" />
                                </div>
                            )}
                        </div>
                    </div>

                    <div className="space-y-2">
                        <label className="text-sm font-medium">Project ID</label>
                        <input
                            type="text"
                            className="input-field"
                            placeholder="prj_xxxxxxxxxxxx or Project Name"
                            value={projectId}
                            onChange={e => setProjectId(e.target.value)}
                        />
                        <p className="text-xs text-muted-foreground">Found in Project Settings → General</p>
                    </div>

                    <div className="space-y-2">
                        <label className="text-sm font-medium flex items-center gap-2">
                            Team ID <span className="text-xs text-muted-foreground font-normal">(Optional)</span>
                        </label>
                        <input
                            type="text"
                            className="input-field"
                            placeholder="team_xxxxxxxxxxxx"
                            value={teamId}
                            onChange={e => setTeamId(e.target.value)}
                        />
                    </div>
                </div>

                <div className="pt-4">
                    <button
                        onClick={handleSync}
                        disabled={loading}
                        className="w-full btn btn-primary flex justify-center items-center py-3 text-base shadow-lg shadow-primary/20 hover:shadow-primary/30"
                    >
                        {loading ? (
                            <span className="flex items-center gap-2">
                                <span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                                Syncing...
                            </span>
                        ) : (
                            <span className="flex items-center gap-2">
                                Sync & Redeploy <ArrowRight className="w-5 h-5" />
                            </span>
                        )}
                    </button>
                    <p className="text-xs text-center text-muted-foreground mt-4">
                        This will trigger a new deployment on Vercel which takes about 30-60 seconds.
                    </p>
                </div>
            </div>

            {/* Status & Guide */}
            <div className="space-y-6">
                {result && (
                    <div className={`p-6 rounded-xl border ${result.success ? 'bg-emerald-500/10 border-emerald-500/20' : 'bg-destructive/10 border-destructive/20'} animate-in fade-in slide-in-from-right-4`}>
                        <div className="flex items-start gap-4">
                            {result.success ? (
                                <div className="p-2 bg-emerald-500 text-white rounded-full shadow-lg shadow-emerald-500/30">
                                    <CheckCircle2 className="w-6 h-6" />
                                </div>
                            ) : (
                                <div className="p-2 bg-destructive text-white rounded-full shadow-lg shadow-destructive/30">
                                    <XCircle className="w-6 h-6" />
                                </div>
                            )}
                            <div className="space-y-1">
                                <h3 className={`font-semibold text-lg ${result.success ? 'text-emerald-500' : 'text-destructive'}`}>
                                    {result.success ? 'Sync Successful' : 'Sync Failed'}
                                </h3>
                                <p className="text-sm opacity-90">{result.message}</p>

                                {result.deployment_url && (
                                    <div className="pt-3 mt-3 border-t border-emerald-500/20">
                                        <a href={`https://${result.deployment_url}`} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-sm font-medium hover:underline">
                                            Visit Deployment <ExternalLink className="w-3 h-3" />
                                        </a>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                )}

                <div className="bg-secondary/20 border border-border rounded-xl p-6">
                    <h3 className="font-semibold flex items-center gap-2 mb-4">
                        <Info className="w-5 h-5 text-primary" />
                        How it works
                    </h3>
                    <ul className="space-y-4">
                        <li className="flex gap-3">
                            <span className="shrink-0 w-6 h-6 rounded-full bg-background border border-border flex items-center justify-center text-xs font-bold text-muted-foreground">1</span>
                            <p className="text-sm text-muted-foreground">Current configuration (Keys & Accounts) is exported to a JSON string.</p>
                        </li>
                        <li className="flex gap-3">
                            <span className="shrink-0 w-6 h-6 rounded-full bg-background border border-border flex items-center justify-center text-xs font-bold text-muted-foreground">2</span>
                            <p className="text-sm text-muted-foreground">The JSON is encoded to Base64 to ensure format compatibility.</p>
                        </li>
                        <li className="flex gap-3">
                            <span className="shrink-0 w-6 h-6 rounded-full bg-background border border-border flex items-center justify-center text-xs font-bold text-muted-foreground">3</span>
                            <p className="text-sm text-muted-foreground">We update the <code className="bg-background px-1 py-0.5 rounded border border-border text-xs">DS2API_CONFIG_JSON</code> env variable in your Vercel project.</p>
                        </li>
                        <li className="flex gap-3">
                            <span className="shrink-0 w-6 h-6 rounded-full bg-background border border-border flex items-center justify-center text-xs font-bold text-muted-foreground">4</span>
                            <p className="text-sm text-muted-foreground">A redeployment is triggered to apply the new environment variables.</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    )
}