'use client'

import { useState, useEffect, useCallback } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { UserPlus, Copy, Check, Trash2, Clock, CheckCircle2, Loader2 } from 'lucide-react'

interface Invite {
  id: string
  token: string
  email: string
  created_at: string
  expires_at: string
  used_at: string | null
}

function inviteStatus(invite: Invite): 'used' | 'expired' | 'pending' {
  if (invite.used_at) return 'used'
  if (new Date(invite.expires_at) < new Date()) return 'expired'
  return 'pending'
}

function CopyButton({ text }: { text: string }) {
  const [copied, setCopied] = useState(false)

  const handleCopy = async () => {
    await navigator.clipboard.writeText(text)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <Button variant="ghost" size="sm" onClick={handleCopy} className="h-7 px-2">
      {copied ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
    </Button>
  )
}

export default function AdminPage() {
  const [invites, setInvites] = useState<Invite[]>([])
  const [email, setEmail] = useState('')
  const [isLoading, setIsLoading] = useState(true)
  const [isCreating, setIsCreating] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [successEmail, setSuccessEmail] = useState<string | null>(null)
  const [newToken, setNewToken] = useState<string | null>(null)

  const fetchInvites = useCallback(async () => {
    try {
      const res = await fetch('/api/invites')
      const data = await res.json()
      if (res.ok) setInvites(data.invites)
    } finally {
      setIsLoading(false)
    }
  }, [])

  useEffect(() => {
    fetchInvites()
  }, [fetchInvites])

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault()
    setError(null)
    setSuccessEmail(null)
    setNewToken(null)
    setIsCreating(true)

    try {
      const res = await fetch('/api/invites', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      })
      const data = await res.json()

      if (!res.ok) {
        setError(data.error)
        return
      }

      setSuccessEmail(email)
      setNewToken(data.invite.token)
      setEmail('')
      await fetchInvites()
    } catch {
      setError('Network error. Please try again.')
    } finally {
      setIsCreating(false)
    }
  }

  const handleDelete = async (id: string) => {
    const res = await fetch('/api/invites', {
      method: 'DELETE',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id }),
    })
    if (res.ok) await fetchInvites()
  }

  const inviteUrl = (token: string) =>
    `${window.location.origin}/auth/invite/${token}`

  const statusBadge = (invite: Invite) => {
    const status = inviteStatus(invite)
    if (status === 'used')
      return (
        <span className="flex items-center gap-1 text-xs text-green-500">
          <CheckCircle2 className="h-3 w-3" /> Used
        </span>
      )
    if (status === 'expired')
      return (
        <span className="flex items-center gap-1 text-xs text-muted-foreground">
          <Clock className="h-3 w-3" /> Expired
        </span>
      )
    return (
      <span className="flex items-center gap-1 text-xs text-primary">
        <Clock className="h-3 w-3" /> Pending
      </span>
    )
  }

  return (
    <div className="space-y-6 max-w-2xl">
      <div>
        <h2 className="text-2xl font-bold">Admin</h2>
        <p className="text-muted-foreground">Manage user invitations</p>
      </div>

      {/* Create invite */}
      <Card className="border-border/50">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <UserPlus className="h-5 w-5" />
            Invite user
          </CardTitle>
          <CardDescription>
            Send an invite link to a new user. Links expire after 7 days.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleCreate} className="space-y-4">
            <div className="grid gap-2">
              <Label htmlFor="email">Email address</Label>
              <div className="flex gap-2">
                <Input
                  id="email"
                  type="email"
                  placeholder="user@company.com"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="bg-secondary/50"
                />
                <Button type="submit" disabled={isCreating}>
                  {isCreating ? (
                    <Loader2 className="h-4 w-4 animate-spin" />
                  ) : (
                    'Send invite'
                  )}
                </Button>
              </div>
            </div>

            {error && (
              <div className="rounded-md bg-destructive/10 border border-destructive/20 p-3">
                <p className="text-sm text-destructive">{error}</p>
              </div>
            )}

            {newToken && successEmail && (
              <div className="rounded-md bg-green-500/10 border border-green-500/20 p-3 space-y-2">
                <p className="text-sm text-green-500 font-medium">
                  Invite created for {successEmail}
                </p>
                <div className="flex items-center gap-2">
                  <code className="text-xs text-muted-foreground truncate flex-1 bg-muted/50 px-2 py-1 rounded">
                    {inviteUrl(newToken)}
                  </code>
                  <CopyButton text={inviteUrl(newToken)} />
                </div>
              </div>
            )}
          </form>
        </CardContent>
      </Card>

      {/* Invites list */}
      <Card className="border-border/50">
        <CardHeader>
          <CardTitle>Invitations</CardTitle>
          <CardDescription>All invite links, newest first</CardDescription>
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <div className="flex justify-center py-8">
              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
            </div>
          ) : invites.length === 0 ? (
            <p className="text-sm text-muted-foreground text-center py-8">
              No invitations yet
            </p>
          ) : (
            <div className="space-y-2">
              {invites.map((invite) => {
                const status = inviteStatus(invite)
                return (
                  <div
                    key={invite.id}
                    className="flex items-center justify-between p-3 rounded-lg bg-muted/30"
                  >
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium truncate">{invite.email}</p>
                      <div className="flex items-center gap-3 mt-0.5">
                        {statusBadge(invite)}
                        <span className="text-xs text-muted-foreground">
                          {new Date(invite.created_at).toLocaleDateString()}
                        </span>
                      </div>
                    </div>
                    <div className="flex items-center gap-1 ml-3">
                      {status === 'pending' && (
                        <CopyButton text={inviteUrl(invite.token)} />
                      )}
                      <Button
                        variant="ghost"
                        size="sm"
                        className="h-7 px-2 text-muted-foreground hover:text-destructive"
                        onClick={() => handleDelete(invite.id)}
                      >
                        <Trash2 className="h-3.5 w-3.5" />
                      </Button>
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}