'use client'

import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { Lock, Loader2, ArrowLeft, RefreshCw, Calendar, Mail, Globe } from 'lucide-react'
import { Button } from '@/components/ui/button'
import Link from 'next/link'

interface Lead {
    id: string
    email: string
    source: string
    referrer: string
    created_at: string
}

export default function AdminPage() {
    const [isAuthenticated, setIsAuthenticated] = useState(false)
    const [password, setPassword] = useState('')
    const [isLoading, setIsLoading] = useState(false)
    const [error, setError] = useState('')
    const [data, setData] = useState<{ total: number; leads: Lead[] } | null>(null)

    const handleLogin = async (e: React.FormEvent) => {
        e.preventDefault()
        setIsLoading(true)
        setError('')

        try {
            const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3002'}/api/waitlist/admin`, {
                headers: {
                    'x-admin-password': password
                }
            })

            const result = await response.json()

            if (result.success) {
                setIsAuthenticated(true)
                setData(result)
            } else {
                setError('Invalid password')
            }
        } catch (err) {
            setError('Connection error')
        } finally {
            setIsLoading(false)
        }
    }

    const refreshData = async () => {
        setIsLoading(true)
        try {
            const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3002'}/api/waitlist/admin`, {
                headers: {
                    'x-admin-password': password
                }
            })
            const result = await response.json()
            if (result.success) setData(result)
        } finally {
            setIsLoading(false)
        }
    }

    // LOGIN SCREEN
    if (!isAuthenticated) {
        return (
            <div className="min-h-screen flex items-center justify-center bg-background p-6">
                <motion.div
                    initial={{ opacity: 0, scale: 0.95 }}
                    animate={{ opacity: 1, scale: 1 }}
                    className="w-full max-w-sm"
                >
                    <div className="text-center mb-8">
                        <Link href="/" className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors mb-6">
                            <ArrowLeft className="mr-2 h-4 w-4" />
                            Back to Website
                        </Link>
                        <h1 className="text-2xl font-bold text-foreground">Admin Access</h1>
                        <p className="text-muted-foreground mt-2">Enter password to view waitlist</p>
                    </div>

                    <div className="bg-card border border-border rounded-xl p-6 shadow-xl">
                        <form onSubmit={handleLogin} className="space-y-4">
                            <div className="relative">
                                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                                <input
                                    type="password"
                                    value={password}
                                    onChange={(e) => setPassword(e.target.value)}
                                    className="w-full h-10 pl-10 pr-4 rounded-lg border border-border bg-background focus:ring-2 focus:ring-primary/20 outline-none transition-all"
                                    placeholder="Password"
                                    autoFocus
                                />
                            </div>

                            {error && (
                                <div className="text-sm text-red-500 font-medium text-center">
                                    {error}
                                </div>
                            )}

                            <Button type="submit" className="w-full" disabled={isLoading}>
                                {isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Login'}
                            </Button>
                        </form>
                    </div>
                </motion.div>
            </div>
        )
    }

    // DASHBOARD
    return (
        <div className="min-h-screen bg-secondary/10 p-6 md:p-12">
            <div className="max-w-5xl mx-auto space-y-8">
                {/* Header */}
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div>
                        <h1 className="text-3xl font-bold text-foreground">Waitlist Dashboard</h1>
                        <p className="text-muted-foreground mt-1">Real-time stats and signups</p>
                    </div>
                    <div className="flex gap-3">
                        <Button variant="outline" onClick={refreshData} disabled={isLoading}>
                            <RefreshCw className={`h-4 w-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
                            Refresh
                        </Button>
                        <Button variant="ghost" onClick={() => setIsAuthenticated(false)}>
                            Logout
                        </Button>
                    </div>
                </div>

                {/* Stats Cards */}
                <div className="grid md:grid-cols-3 gap-6">
                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        className="bg-card border border-border p-6 rounded-xl shadow-sm"
                    >
                        <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">Total Signups</h3>
                        <div className="mt-2 text-4xl font-bold text-[hsl(var(--primary))]">
                            {data?.total || 0}
                        </div>
                    </motion.div>

                    <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.1 }}
                        className="bg-card border border-border p-6 rounded-xl shadow-sm"
                    >
                        <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">Latest Signup</h3>
                        <div className="mt-2 text-lg font-medium text-foreground truncate">
                            {data?.leads[0]?.email || 'N/A'}
                        </div>
                        <div className="text-xs text-muted-foreground mt-1">
                            {data?.leads[0] ? new Date(data.leads[0].created_at).toLocaleString() : '-'}
                        </div>
                    </motion.div>
                </div>

                {/* Listings Table */}
                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.2 }}
                    className="bg-card border border-border rounded-xl shadow-sm overflow-hidden"
                >
                    <div className="px-6 py-4 border-b border-border bg-secondary/5">
                        <h3 className="font-semibold text-foreground">Recent Signups</h3>
                    </div>
                    <div className="overflow-x-auto">
                        <table className="w-full text-sm text-left">
                            <thead className="bg-secondary/20 text-muted-foreground font-medium">
                                <tr>
                                    <th className="px-6 py-3">Email</th>
                                    <th className="px-6 py-3">Source</th>
                                    <th className="px-6 py-3">Date</th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-border">
                                {data?.leads.map((lead) => (
                                    <tr key={lead.id} className="hover:bg-secondary/5 transition-colors">
                                        <td className="px-6 py-4 font-medium text-foreground flex items-center gap-2">
                                            <Mail className="h-3 w-3 text-muted-foreground" />
                                            {lead.email}
                                        </td>
                                        <td className="px-6 py-4 text-muted-foreground">
                                            {lead.source}
                                            {lead.referrer && <span className="text-xs ml-2 opacity-70">via {new URL(lead.referrer).hostname}</span>}
                                        </td>
                                        <td className="px-6 py-4 text-muted-foreground whitespace-nowrap">
                                            {new Date(lead.created_at).toLocaleString()}
                                        </td>
                                    </tr>
                                ))}
                                {data?.leads.length === 0 && (
                                    <tr>
                                        <td colSpan={3} className="px-6 py-8 text-center text-muted-foreground">
                                            No signups yet.
                                        </td>
                                    </tr>
                                )}
                            </tbody>
                        </table>
                    </div>
                </motion.div>
            </div>
        </div>
    )
}