resolutionflow/frontend/src/pages/admin/InviteCodesPage.tsx

import { useState, useEffect, useCallback } from 'react'
import { Plus, Copy, Trash2, Ticket, Mail, MailCheck, RefreshCw } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { DataTable, PageHeader, StatusBadge, ActionMenu, EmptyState } from '@/components/admin'
import type { Column } from '@/components/admin'
import { Modal } from '@/components/common/Modal'
import { adminApi } from '@/api/admin'
import { toast } from '@/lib/toast'
import { cn } from '@/lib/utils'
import type { InviteCodeResponse, InviteCodeCreateRequest } from '@/types/admin'

const PLAN_OPTIONS = [
  { value: 'free', label: 'Free' },
  { value: 'starter', label: 'Starter' },
  { value: 'pro', label: 'Pro' },
  { value: 'enterprise', label: 'Enterprise' },
] as const

const planBadgeVariant = (plan: string): 'success' | 'destructive' | 'warning' | 'default' => {
  switch (plan) {
    case 'pro': return 'success'
    case 'team': return 'warning'
    default: return 'default'
  }
}

export function InviteCodesPage() {
  const [codes, setCodes] = useState<InviteCodeResponse[]>([])
  const [loading, setLoading] = useState(true)
  const [createOpen, setCreateOpen] = useState(false)
  const [creating, setCreating] = useState(false)

  // Form state
  const [email, setEmail] = useState('')
  const [expiresInDays, setExpiresInDays] = useState('')
  const [assignedPlan, setAssignedPlan] = useState<'free' | 'pro' | 'starter' | 'enterprise'>('free')
  const [trialDays, setTrialDays] = useState('')
  const [note, setNote] = useState('')

  const fetchCodes = useCallback(async () => {
    setLoading(true)
    try {
      const data = await adminApi.listInviteCodes()
      setCodes(Array.isArray(data) ? data : [])
    } catch {
      toast.error('Failed to load invite codes')
    } finally {
      setLoading(false)
    }
  }, [])

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

  const resetForm = () => {
    setEmail('')
    setExpiresInDays('')
    setAssignedPlan('free')
    setTrialDays('')
    setNote('')
  }

  const handleCreate = async () => {
    setCreating(true)
    try {
      const data: InviteCodeCreateRequest = {}
      if (expiresInDays) {
        data.expires_at = new Date(Date.now() + parseInt(expiresInDays) * 86400000).toISOString()
      }
      if (email.trim()) data.email = email.trim()
      if (note.trim()) data.note = note.trim()
      data.assigned_plan = assignedPlan
      if (assignedPlan !== 'free' && trialDays) {
        data.trial_duration_days = parseInt(trialDays)
      }
      await adminApi.createInviteCode(data)
      toast.success('Invite code created')
      setCreateOpen(false)
      resetForm()
      fetchCodes()
    } catch {
      toast.error('Failed to create invite code')
    } finally {
      setCreating(false)
    }
  }

  const handleCopy = (code: string) => {
    navigator.clipboard.writeText(code)
    toast.success('Code copied to clipboard')
  }

  const handleDelete = async (code: string) => {
    try {
      await adminApi.deleteInviteCode(code)
      toast.success('Invite code deleted')
      fetchCodes()
    } catch {
      toast.error('Failed to delete invite code')
    }
  }

  const handleResend = async (code: string) => {
    try {
      const newInvite = await adminApi.resendInviteCode(code)
      toast.success(`New code ${newInvite.code} sent to ${newInvite.email}`)
      fetchCodes()
    } catch {
      toast.error('Failed to resend invite code')
    }
  }

  const selectClass = cn(
    'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
    'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
  )

  const columns: Column<InviteCodeResponse>[] = [
    {
      key: 'code',
      header: 'Code',
      render: (c) => (
        <code className="rounded bg-white/[0.08] px-2 py-1 text-sm font-mono text-muted-foreground">{c.code}</code>
      ),
    },
    {
      key: 'email',
      header: 'Recipient',
      render: (c) => c.email ? (
        <div className="flex items-center gap-1.5">
          {c.email_sent ? (
            <MailCheck className="h-3.5 w-3.5 text-emerald-400" />
          ) : (
            <Mail className="h-3.5 w-3.5 text-muted-foreground" />
          )}
          <span className="text-sm text-muted-foreground">{c.email}</span>
        </div>
      ) : (
        <span className="text-sm text-muted-foreground">&mdash;</span>
      ),
    },
    {
      key: 'plan',
      header: 'Plan',
      render: (c) => (
        <StatusBadge variant={planBadgeVariant(c.assigned_plan)}>
          {c.assigned_plan.charAt(0).toUpperCase() + c.assigned_plan.slice(1)}
        </StatusBadge>
      ),
    },
    {
      key: 'trial',
      header: 'Trial',
      render: (c) => c.has_trial ? (
        <span className="text-sm text-muted-foreground">{c.trial_duration_days}d</span>
      ) : (
        <span className="text-sm text-muted-foreground">&mdash;</span>
      ),
    },
    {
      key: 'status',
      header: 'Status',
      render: (c) => {
        if (c.is_used) return <StatusBadge variant="default">Used</StatusBadge>
        if (c.is_expired) return <StatusBadge variant="warning">Expired</StatusBadge>
        if (c.is_valid) return <StatusBadge variant="success">Active</StatusBadge>
        return <StatusBadge variant="destructive">Inactive</StatusBadge>
      },
    },
    {
      key: 'expires_at',
      header: 'Expires',
      render: (c) => (
        <span className="text-sm text-muted-foreground">
          {c.expires_at ? new Date(c.expires_at).toLocaleDateString() : 'Never'}
        </span>
      ),
    },
    {
      key: 'created_at',
      header: 'Created',
      render: (c) => (
        <span className="text-sm text-muted-foreground">
          {new Date(c.created_at).toLocaleDateString()}
        </span>
      ),
    },
    {
      key: 'actions',
      header: '',
      className: 'w-12',
      render: (c) => (
        <ActionMenu items={[
          {
            label: 'Copy Code',
            icon: <Copy className="h-4 w-4" />,
            onClick: () => handleCopy(c.code),
          },
          ...(c.is_valid && c.email ? [{
            label: 'Resend',
            icon: <RefreshCw className="h-4 w-4" />,
            onClick: () => handleResend(c.code),
          }] : []),
          ...(!c.is_used ? [{
            label: 'Delete',
            icon: <Trash2 className="h-4 w-4" />,
            onClick: () => handleDelete(c.code),
            destructive: true,
          }] : []),
        ]} />
      ),
    },
  ]

  return (
    <div className="space-y-6">
      <PageHeader
        title="Invite Codes"
        description="Create and manage registration invite codes with plan assignment"
        action={
          <Button onClick={() => setCreateOpen(true)}>
            <Plus className="h-4 w-4" />
            Create Code
          </Button>
        }
      />

      <DataTable
        columns={columns}
        data={codes}
        keyExtractor={(c) => c.id}
        isLoading={loading}
        emptyState={
          <EmptyState
            icon={<Ticket className="h-12 w-12" />}
            title="No invite codes"
            description="Create an invite code to allow new user registrations."
          />
        }
      />

      <Modal
        isOpen={createOpen}
        onClose={() => { setCreateOpen(false); resetForm() }}
        title="Create Invite Code"
        size="sm"
        footer={
          <div className="flex justify-end gap-3">
            <Button variant="secondary" onClick={() => { setCreateOpen(false); resetForm() }}>Cancel</Button>
            <Button onClick={handleCreate} loading={creating}>
              {creating ? 'Creating...' : 'Create'}
            </Button>
          </div>
        }
      >
        <div className="space-y-4">
          <div>
            <label className="mb-1 block text-sm font-medium text-foreground">Recipient Email</label>
            <Input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="Optional — will send invite email"
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium text-foreground">Plan</label>
            <select
              aria-label="Plan"
              value={assignedPlan}
              onChange={(e) => {
                const plan = e.target.value as 'free' | 'pro' | 'starter' | 'enterprise'
                setAssignedPlan(plan)
                if (plan === 'free') setTrialDays('')
              }}
              className={selectClass}
            >
              {PLAN_OPTIONS.map(o => (
                <option key={o.value} value={o.value}>{o.label}</option>
              ))}
            </select>
          </div>

          {assignedPlan !== 'free' && (
            <div>
              <label className="mb-1 block text-sm font-medium text-foreground">Trial Duration (days)</label>
              <Input
                type="number"
                value={trialDays}
                onChange={(e) => setTrialDays(e.target.value)}
                placeholder="e.g. 14 (1-90)"
                min={1}
                max={90}
              />
              <p className="mt-1 text-xs text-muted-foreground">Leave empty for no trial — account gets full plan immediately.</p>
            </div>
          )}

          <div>
            <label className="mb-1 block text-sm font-medium text-foreground">Expires in (days)</label>
            <Input
              type="number"
              value={expiresInDays}
              onChange={(e) => setExpiresInDays(e.target.value)}
              placeholder="Leave empty for no expiry"
            />
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium text-foreground">Note</label>
            <Input
              type="text"
              value={note}
              onChange={(e) => setNote(e.target.value)}
              placeholder="Optional note (e.g. who this is for)"
            />
          </div>
        </div>
      </Modal>
    </div>
  )
}

export default InviteCodesPage