'use client';

import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { 
  Server,
  Monitor,
  Power,
  Clock,
  CheckCircle,
  XCircle
} from 'lucide-react';
import { format } from 'date-fns';
import { ConfigurationItem } from '@/lib/types/autotask';
import { DattoRMMDevice } from '@/lib/types/datto-rmm';

interface StatusCardsProps {
  device?: ConfigurationItem;
  rmmDevice?: DattoRMMDevice;
}

export function StatusCards({ device, rmmDevice }: StatusCardsProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
      <Card className="border-0 shadow-lg">
        <CardContent className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-muted-foreground">Status</p>
              <div className="flex items-center gap-2 mt-1">
                {device?.isActive ? (
                  <Badge variant="default" className="bg-green-600">
                    <CheckCircle className="w-3 h-3 mr-1" />
                    Active
                  </Badge>
                ) : (
                  <Badge variant="secondary">
                    <XCircle className="w-3 h-3 mr-1" />
                    Inactive
                  </Badge>
                )}
              </div>
            </div>
            <Power className={`h-5 w-5 ${device?.isActive ? 'text-green-600' : 'text-gray-400'}`} />
          </div>
        </CardContent>
      </Card>

      <Card className="border-0 shadow-lg">
        <CardContent className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-muted-foreground">PSA</p>
              <div className="flex items-center gap-2 mt-1">
                {device ? (
                  <CheckCircle className="w-4 h-4 text-green-600" />
                ) : (
                  <XCircle className="w-4 h-4 text-gray-400" />
                )}
                <span className="text-sm font-medium">
                  {device ? 'Connected' : 'Not Found'}
                </span>
              </div>
            </div>
            <Server className="h-5 w-5 text-purple-600" />
          </div>
        </CardContent>
      </Card>

      <Card className="border-0 shadow-lg">
        <CardContent className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-muted-foreground">RMM</p>
              <div className="flex items-center gap-2 mt-1">
                {rmmDevice ? (
                  <CheckCircle className="w-4 h-4 text-green-600" />
                ) : (
                  <XCircle className="w-4 h-4 text-gray-400" />
                )}
                <span className="text-sm font-medium">
                  {rmmDevice ? 'Connected' : 'Not Found'}
                </span>
              </div>
            </div>
            <Monitor className="h-5 w-5 text-blue-600" />
          </div>
        </CardContent>
      </Card>

      <Card className="border-0 shadow-lg">
        <CardContent className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-muted-foreground">Last Seen</p>
              <p className="text-sm font-medium mt-1">
                {device?.lastModifiedTime ? 
                  format(new Date(device.lastModifiedTime), 'MMM d, yyyy') : 
                  rmmDevice?.lastSeen ?
                  format(new Date(rmmDevice.lastSeen), 'MMM d, yyyy') :
                  '-'}
              </p>
            </div>
            <Clock className="h-5 w-5 text-orange-600" />
          </div>
        </CardContent>
      </Card>
    </div>
  );
}