import { Calendar, Clock, ExternalLink, Globe, MonitorSmartphone, Shield } from 'lucide-react'
import Link from 'next/link'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

interface UserAccountInfoProps {
  user: {
    accountCreated: number
    lastLogin: number | null
    ipRegister: string
    ipCurrent: string
    twoFactorConfirmed: number
    machine_id: string
    mail: string
    gender: string
  }
}

export function UserAccountInfo({ user }: UserAccountInfoProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Account Details</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid gap-4 sm:grid-cols-2">
          <div className="space-y-3">
            <div className="flex items-center gap-3 text-sm">
              <Calendar className="h-4 w-4 text-muted-foreground shrink-0" />
              <span className="text-muted-foreground">Registered</span>
              <span className="ml-auto font-medium">
                {new Date(user.accountCreated * 1000).toLocaleDateString('it-IT', {
                  day: '2-digit',
                  month: 'short',
                  year: 'numeric',
                })}
              </span>
            </div>
            <div className="flex items-center gap-3 text-sm">
              <Clock className="h-4 w-4 text-muted-foreground shrink-0" />
              <span className="text-muted-foreground">Last Login</span>
              <span className="ml-auto font-medium">
                {user.lastLogin
                  ? new Date(user.lastLogin * 1000).toLocaleDateString('it-IT', {
                      day: '2-digit',
                      month: 'short',
                      year: 'numeric',
                      hour: '2-digit',
                      minute: '2-digit',
                    })
                  : 'Never'}
              </span>
            </div>
            <div className="flex items-center gap-3 text-sm">
              <Globe className="h-4 w-4 text-muted-foreground shrink-0" />
              <span className="text-muted-foreground">IP Register</span>
              <span className="ml-auto flex items-center gap-1.5">
                <code className="text-xs font-mono bg-muted px-2 py-0.5 rounded">
                  {user.ipRegister}
                </code>
                <Link
                  href={`/admin/users?search=${user.ipRegister}`}
                  title="Find other users with this IP"
                >
                  <ExternalLink className="h-3 w-3 text-primary" />
                </Link>
              </span>
            </div>
            <div className="flex items-center gap-3 text-sm">
              <Globe className="h-4 w-4 text-muted-foreground shrink-0" />
              <span className="text-muted-foreground">IP Current</span>
              <span className="ml-auto flex items-center gap-1.5">
                <code className="text-xs font-mono bg-muted px-2 py-0.5 rounded">
                  {user.ipCurrent}
                </code>
                <Link
                  href={`/admin/users?search=${user.ipCurrent}`}
                  title="Find other users with this IP"
                >
                  <ExternalLink className="h-3 w-3 text-primary" />
                </Link>
              </span>
            </div>
          </div>
          <div className="space-y-3">
            <div className="flex items-center gap-3 text-sm">
              <Shield className="h-4 w-4 text-muted-foreground shrink-0" />
              <span className="text-muted-foreground">2FA</span>
              <Badge variant={user.twoFactorConfirmed ? 'default' : 'outline'} className="ml-auto">
                {user.twoFactorConfirmed ? 'Enabled' : 'Disabled'}
              </Badge>
            </div>
            <div className="flex items-center gap-3 text-sm">
              <MonitorSmartphone className="h-4 w-4 text-muted-foreground shrink-0" />
              <span className="text-muted-foreground">Machine ID</span>
              <code className="ml-auto text-xs font-mono bg-muted px-2 py-0.5 rounded truncate max-w-[180px]">
                {user.machine_id || 'N/A'}
              </code>
            </div>
            <div className="flex items-center gap-3 text-sm">
              <span className="text-muted-foreground">Email</span>
              <span className="ml-auto font-medium">{user.mail}</span>
            </div>
            <div className="flex items-center gap-3 text-sm">
              <span className="text-muted-foreground">Gender</span>
              <Badge variant="outline" className="ml-auto">
                {user.gender}
              </Badge>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}