'use client'

import { Ban, ShieldOff } from 'lucide-react'
import { useState } from 'react'
import { banUser, unbanUser } from '@/actions/users'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea'
import { useServerAction } from '@/hooks/use-server-action'

interface BanInfo {
  id: number
  reason: string
  type: string
  staffName: string
  timestamp: number
  banExpire: number
}

interface UserBanSectionProps {
  userId: number
  username: string
  bans: BanInfo[]
}

export function UserBanSection({ userId, username, bans }: UserBanSectionProps) {
  const { isPending, run } = useServerAction()
  const [showBanForm, setShowBanForm] = useState(false)
  const [reason, setReason] = useState('')
  const [duration, setDuration] = useState('24')
  const [banType, setBanType] = useState('account')

  const activeBan = bans.find((b) => {
    const now = Math.floor(Date.now() / 1000)
    return b.banExpire === 0 || b.banExpire > now
  })

  function handleBan() {
    run(
      () =>
        banUser({
          userId,
          reason,
          duration: parseInt(duration, 10),
          type: banType as 'account' | 'ip' | 'machine',
        }),
      {
        successMessage: `${username} has been banned.`,
        onSuccess: () => {
          setShowBanForm(false)
          setReason('')
        },
      },
    )
  }

  function handleUnban() {
    run(() => unbanUser({ userId }), {
      successMessage: `${username} has been unbanned.`,
    })
  }

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle>Bans</CardTitle>
        <div className="flex gap-2">
          {activeBan ? (
            <Button variant="outline" size="sm" onClick={handleUnban} disabled={isPending}>
              <ShieldOff className="mr-2 h-4 w-4" />
              Unban
            </Button>
          ) : (
            <Button variant="destructive" size="sm" onClick={() => setShowBanForm(!showBanForm)}>
              <Ban className="mr-2 h-4 w-4" />
              Ban
            </Button>
          )}
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        {activeBan && (
          <div className="rounded-md border border-destructive/50 bg-destructive/10 p-3">
            <p className="text-sm font-medium text-destructive">Active Ban</p>
            <p className="text-sm">{activeBan.reason}</p>
            <p className="text-xs text-muted-foreground">
              By {activeBan.staffName} &middot;{' '}
              {activeBan.banExpire === 0
                ? 'Permanent'
                : `Expires ${new Date(activeBan.banExpire * 1000).toLocaleString()}`}
            </p>
          </div>
        )}

        {showBanForm && !activeBan && (
          <div className="space-y-3 rounded-md border p-3">
            <div className="space-y-2">
              <Label>Reason</Label>
              <Textarea
                value={reason}
                onChange={(e) => setReason(e.target.value)}
                placeholder="Ban reason..."
              />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-2">
                <Label>Duration (hours)</Label>
                <Input
                  type="number"
                  value={duration}
                  onChange={(e) => setDuration(e.target.value)}
                  placeholder="0 = permanent"
                />
              </div>
              <div className="space-y-2">
                <Label>Type</Label>
                <Select value={banType} onValueChange={setBanType}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="account">Account</SelectItem>
                    <SelectItem value="ip">IP</SelectItem>
                    <SelectItem value="machine">Machine</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <Button variant="destructive" onClick={handleBan} disabled={isPending || !reason}>
              {isPending ? 'Banning...' : 'Confirm Ban'}
            </Button>
          </div>
        )}

        {bans.length > 0 && (
          <div className="space-y-2">
            <p className="text-sm font-medium">History</p>
            {bans.map((ban) => (
              <div key={ban.id} className="flex items-center justify-between text-sm">
                <div>
                  <span>{ban.reason}</span>
                  <span className="ml-2">
                    <Badge variant="outline">{ban.type}</Badge>
                  </span>
                </div>
                <span className="text-xs text-muted-foreground">
                  {new Date(ban.timestamp * 1000).toLocaleDateString()}
                </span>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  )
}