'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, KeyRound, Ban, Infinity, Hash, FolderOpen, Plus,
} from 'lucide-react'

// ── Shared helper ─────────────────────────────────────────────────────────────

function CopyButton({ text }: { text: string }) {
  const [copied, setCopied] = useState(false)
  return (
    <Button
      variant="ghost"
      size="sm"
      className="h-7 px-2"
      onClick={async () => {
        await navigator.clipboard.writeText(text)
        setCopied(true)
        setTimeout(() => setCopied(false), 2000)
      }}
    >
      {copied
        ? <Check className="h-3.5 w-3.5 text-green-500" />
        : <Copy className="h-3.5 w-3.5" />}
    </Button>
  )
}

// ── Invites ───────────────────────────────────────────────────────────────────

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 InvitesSection() {
  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 [newToken, setNewToken] = useState<string | null>(null)
  const [successEmail, setSuccessEmail] = 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.SyntheticEvent<HTMLFormElement>) => {
    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) => {
    await fetch('/api/invites', {
      method: 'DELETE',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id }),
    })
    await fetchInvites()
  }

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

  const statusBadge = (invite: Invite) => {
    const s = inviteStatus(invite)
    if (s === 'used') return <span className="flex items-center gap-1 text-xs text-green-500"><CheckCircle2 className="h-3 w-3" /> Used</span>
    if (s === '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-4">
      <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>

      <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>
  )
}

// ── Enrollment tokens ─────────────────────────────────────────────────────────

interface EnrollmentToken {
  id: string
  token: string
  label: string | null
  created_at: string
  expires_at: string | null
  used_count: number
  max_uses: number | null
  revoked_at: string | null
}

function tokenStatus(t: EnrollmentToken): 'active' | 'revoked' | 'expired' | 'exhausted' {
  if (t.revoked_at) return 'revoked'
  if (t.expires_at && new Date(t.expires_at) < new Date()) return 'expired'
  if (t.max_uses !== null && t.used_count >= t.max_uses) return 'exhausted'
  return 'active'
}

function EnrollmentSection() {
  const [tokens, setTokens] = useState<EnrollmentToken[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isCreating, setIsCreating] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [newToken, setNewToken] = useState<EnrollmentToken | null>(null)

  // form state
  const [label, setLabel] = useState('')
  const [expiresInDays, setExpiresInDays] = useState('')
  const [maxUses, setMaxUses] = useState('')

  const fetchTokens = useCallback(async () => {
    try {
      const res = await fetch('/api/enrollment-tokens')
      const data = await res.json()
      if (res.ok) setTokens(data.tokens)
    } finally {
      setIsLoading(false)
    }
  }, [])

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

  const handleCreate = async (e: React.SyntheticEvent<HTMLFormElement>) => {
    e.preventDefault()
    setError(null); setNewToken(null)
    setIsCreating(true)
    try {
      const res = await fetch('/api/enrollment-tokens', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          label: label || undefined,
          expiresInDays: expiresInDays ? parseInt(expiresInDays) : undefined,
          maxUses: maxUses ? parseInt(maxUses) : undefined,
        }),
      })
      const data = await res.json()
      if (!res.ok) { setError(data.error); return }
      setNewToken(data.token)
      setLabel(''); setExpiresInDays(''); setMaxUses('')
      await fetchTokens()
    } catch {
      setError('Network error. Please try again.')
    } finally {
      setIsCreating(false)
    }
  }

  const handleRevoke = async (id: string) => {
    await fetch('/api/enrollment-tokens', {
      method: 'DELETE',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id }),
    })
    await fetchTokens()
  }

  const statusBadge = (t: EnrollmentToken) => {
    const s = tokenStatus(t)
    const styles: Record<string, string> = {
      active: 'text-green-500',
      revoked: 'text-destructive',
      expired: 'text-muted-foreground',
      exhausted: 'text-yellow-500',
    }
    const labels: Record<string, string> = {
      active: 'Active',
      revoked: 'Revoked',
      expired: 'Expired',
      exhausted: 'Exhausted',
    }
    return <span className={`text-xs font-medium ${styles[s]}`}>{labels[s]}</span>
  }

  const agentCommand = (token: string) =>
    `python agent.py --server ${window.location.origin} --enroll ${token}`

  return (
    <div className="space-y-4">
      <Card className="border-border/50">
        <CardHeader>
          <CardTitle className="flex items-center gap-2"><KeyRound className="h-5 w-5" />Create enrollment token</CardTitle>
          <CardDescription>
            Tokens let agents self-register. Share the token or use it in a silent installer for mass deployment.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleCreate} className="space-y-4">
            <div className="grid gap-2">
              <Label htmlFor="token-label">Label <span className="text-muted-foreground font-normal">(optional)</span></Label>
              <Input id="token-label" placeholder="e.g. Office PCs batch 1"
                value={label} onChange={(e) => setLabel(e.target.value)} className="bg-secondary/50" />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className="grid gap-2">
                <Label htmlFor="expires">Expires after <span className="text-muted-foreground font-normal">(days, blank = never)</span></Label>
                <Input id="expires" type="number" min="1" placeholder="Never"
                  value={expiresInDays} onChange={(e) => setExpiresInDays(e.target.value)} className="bg-secondary/50" />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="max-uses">Max uses <span className="text-muted-foreground font-normal">(blank = unlimited)</span></Label>
                <Input id="max-uses" type="number" min="1" placeholder="Unlimited"
                  value={maxUses} onChange={(e) => setMaxUses(e.target.value)} className="bg-secondary/50" />
              </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>}

            <Button type="submit" disabled={isCreating}>
              {isCreating ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Generate token'}
            </Button>
          </form>

          {newToken && (
            <div className="mt-4 rounded-md bg-green-500/10 border border-green-500/20 p-4 space-y-3">
              <p className="text-sm text-green-500 font-medium">Token created</p>

              <div>
                <p className="text-xs text-muted-foreground mb-1">Token</p>
                <div className="flex items-center gap-2">
                  <code className="text-xs bg-muted/50 px-2 py-1 rounded flex-1 truncate font-mono">{newToken.token}</code>
                  <CopyButton text={newToken.token} />
                </div>
              </div>

              <div>
                <p className="text-xs text-muted-foreground mb-1">Agent command</p>
                <div className="flex items-center gap-2">
                  <code className="text-xs bg-muted/50 px-2 py-1 rounded flex-1 truncate font-mono">{agentCommand(newToken.token)}</code>
                  <CopyButton text={agentCommand(newToken.token)} />
                </div>
              </div>

              <div>
                <p className="text-xs text-muted-foreground mb-1">Silent Windows installer</p>
                <div className="flex items-center gap-2">
                  <code className="text-xs bg-muted/50 px-2 py-1 rounded flex-1 truncate font-mono">
                    {`RemoteLink-Setup.exe /S /SERVER=${window.location.origin} /ENROLL=${newToken.token}`}
                  </code>
                  <CopyButton text={`RemoteLink-Setup.exe /S /SERVER=${window.location.origin} /ENROLL=${newToken.token}`} />
                </div>
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      <Card className="border-border/50">
        <CardHeader>
          <CardTitle>Enrollment tokens</CardTitle>
          <CardDescription>Manage tokens used to register new agents</CardDescription>
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <div className="flex justify-center py-8"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>
          ) : tokens.length === 0 ? (
            <p className="text-sm text-muted-foreground text-center py-8">No enrollment tokens yet</p>
          ) : (
            <div className="space-y-2">
              {tokens.map((t) => {
                const status = tokenStatus(t)
                const isActive = status === 'active'
                return (
                  <div key={t.id} className={`flex items-center justify-between p-3 rounded-lg bg-muted/30 ${!isActive ? 'opacity-60' : ''}`}>
                    <div className="flex-1 min-w-0 space-y-1">
                      <div className="flex items-center gap-2">
                        <p className="text-sm font-medium truncate">{t.label || <span className="text-muted-foreground italic">Unlabelled</span>}</p>
                        {statusBadge(t)}
                      </div>
                      <div className="flex items-center gap-3 text-xs text-muted-foreground">
                        <span className="font-mono truncate max-w-[160px]">{t.token}</span>
                        <span className="flex items-center gap-1">
                          <Hash className="h-3 w-3" />
                          {t.used_count} use{t.used_count !== 1 ? 's' : ''}
                          {t.max_uses !== null ? ` / ${t.max_uses}` : ''}
                        </span>
                        {t.expires_at ? (
                          <span className="flex items-center gap-1">
                            <Clock className="h-3 w-3" />
                            {new Date(t.expires_at) > new Date()
                              ? `Expires ${new Date(t.expires_at).toLocaleDateString()}`
                              : `Expired ${new Date(t.expires_at).toLocaleDateString()}`}
                          </span>
                        ) : (
                          <span className="flex items-center gap-1"><Infinity className="h-3 w-3" /> No expiry</span>
                        )}
                      </div>
                    </div>
                    <div className="flex items-center gap-1 ml-3 shrink-0">
                      {isActive && <CopyButton text={t.token} />}
                      {isActive && (
                        <Button variant="ghost" size="sm" className="h-7 px-2 text-muted-foreground hover:text-destructive"
                          onClick={() => handleRevoke(t.id)} title="Revoke token">
                          <Ban className="h-3.5 w-3.5" />
                        </Button>
                      )}
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

// ── Groups ────────────────────────────────────────────────────────────────────

interface Group {
  id: string
  name: string
  description: string | null
  created_at: string
}

function GroupsSection() {
  const [groups, setGroups] = useState<Group[]>([])
  const [name, setName] = useState('')
  const [description, setDescription] = useState('')
  const [isLoading, setIsLoading] = useState(true)
  const [isCreating, setIsCreating] = useState(false)

  const fetchGroups = useCallback(async () => {
    const res = await fetch('/api/groups')
    const data = await res.json()
    if (res.ok) setGroups(data.groups ?? [])
    setIsLoading(false)
  }, [])

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

  const handleCreate = async (e: React.SyntheticEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (!name.trim()) return
    setIsCreating(true)
    await fetch('/api/groups', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, description }),
    })
    setName(''); setDescription('')
    await fetchGroups()
    setIsCreating(false)
  }

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

  return (
    <div className="space-y-6">
      <Card className="border-border/50">
        <CardHeader>
          <CardTitle className="text-base">Create Group</CardTitle>
          <CardDescription>Groups let you organise machines and control which technicians have access to them.</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleCreate} className="space-y-3">
            <div>
              <Label htmlFor="group-name">Name</Label>
              <Input id="group-name" value={name} onChange={e => setName(e.target.value)} placeholder="e.g. Client — Acme Corp" className="mt-1" />
            </div>
            <div>
              <Label htmlFor="group-desc">Description (optional)</Label>
              <Input id="group-desc" value={description} onChange={e => setDescription(e.target.value)} placeholder="Optional description" className="mt-1" />
            </div>
            <Button type="submit" disabled={isCreating || !name.trim()}>
              {isCreating ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Plus className="mr-2 h-4 w-4" />}
              Create Group
            </Button>
          </form>
        </CardContent>
      </Card>

      <Card className="border-border/50">
        <CardHeader>
          <CardTitle className="text-base">Groups</CardTitle>
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <div className="flex items-center gap-2 text-muted-foreground text-sm"><Loader2 className="h-4 w-4 animate-spin" /> Loading…</div>
          ) : groups.length === 0 ? (
            <p className="text-sm text-muted-foreground">No groups yet. Create one above.</p>
          ) : (
            <div className="space-y-2">
              {groups.map(g => (
                <div key={g.id} className="flex items-center justify-between gap-4 p-3 rounded-lg border border-border/50">
                  <div className="flex items-center gap-3">
                    <FolderOpen className="h-4 w-4 text-muted-foreground" />
                    <div>
                      <p className="text-sm font-medium">{g.name}</p>
                      {g.description && <p className="text-xs text-muted-foreground">{g.description}</p>}
                    </div>
                  </div>
                  <Button variant="ghost" size="icon" className="h-7 w-7 text-destructive hover:text-destructive hover:bg-destructive/10" onClick={() => handleDelete(g.id)}>
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

// ── Page ──────────────────────────────────────────────────────────────────────

type Tab = 'invites' | 'enrollment' | 'groups'

export default function AdminPage() {
  const [tab, setTab] = useState<Tab>('invites')

  const tabLabels: Record<Tab, string> = {
    invites: 'User invites',
    enrollment: 'Agent enrollment',
    groups: 'Groups',
  }

  return (
    <div className="space-y-6 max-w-2xl">
      <div>
        <h2 className="text-2xl font-bold">Admin</h2>
        <p className="text-muted-foreground">Manage users, agent deployment, and machine groups</p>
      </div>

      {/* Tab bar */}
      <div className="flex gap-1 p-1 rounded-lg bg-muted/50 w-fit">
        {(['invites', 'enrollment', 'groups'] as Tab[]).map((t) => (
          <button
            key={t}
            onClick={() => setTab(t)}
            className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
              tab === t
                ? 'bg-background shadow-sm text-foreground'
                : 'text-muted-foreground hover:text-foreground'
            }`}
          >
            {tabLabels[t]}
          </button>
        ))}
      </div>

      {tab === 'invites' && <InvitesSection />}
      {tab === 'enrollment' && <EnrollmentSection />}
      {tab === 'groups' && <GroupsSection />}
    </div>
  )
}