import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { apiClient } from '@/lib/api-client';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Plus, Globe, ExternalLink, MoreVertical } from 'lucide-react';
import { Link } from 'react-router-dom';
import { format } from 'date-fns';

export function WebsitesPage() {
  const [page, setPage] = useState(1);
  const { data, isLoading } = useQuery({
    queryKey: ['websites', page],
    queryFn: () => apiClient.getWebsites({ page, limit: 12 }),
  });

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Websites</h1>
          <p className="text-muted-foreground">
            Manage your monitored websites and their scan schedules
          </p>
        </div>
        <Button>
          <Plus className="h-4 w-4 mr-2" />
          Add Website
        </Button>
      </div>

      {isLoading ? (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {[...Array(6)].map((_, i) => (
            <Card key={i} className="h-48 animate-pulse bg-muted" />
          ))}
        </div>
      ) : (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {data?.websites?.map((website: any) => (
            <Card key={website.id} className="p-6">
              <div className="flex items-start justify-between">
                <Globe className="h-5 w-5 text-muted-foreground" />
                <Button variant="ghost" size="icon">
                  <MoreVertical className="h-4 w-4" />
                </Button>
              </div>
              <div className="mt-4">
                <h3 className="font-semibold">{website.name}</h3>
                <a
                  href={website.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1 mt-1"
                >
                  {website.url}
                  <ExternalLink className="h-3 w-3" />
                </a>
              </div>
              <div className="mt-4 flex items-center justify-between">
                <div>
                  {website.complianceScore !== null ? (
                    <div>
                      <span className="text-2xl font-bold">
                        {Math.round(website.complianceScore)}%
                      </span>
                      <p className="text-xs text-muted-foreground">Compliance</p>
                    </div>
                  ) : (
                    <p className="text-sm text-muted-foreground">No scans yet</p>
                  )}
                </div>
                <Button variant="outline" size="sm" asChild>
                  <Link to={`/websites/${website.id}`}>View Details</Link>
                </Button>
              </div>
              {website.lastScanAt && (
                <p className="text-xs text-muted-foreground mt-2">
                  Last scan: {format(new Date(website.lastScanAt), 'MMM d, h:mm a')}
                </p>
              )}
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}