'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { ArrowLeft, Activity, Apple, Loader2, ExternalLink, CheckCircle2 } from 'lucide-react';

export default function AddigyPage() {
  const [status, setStatus] = useState<any>(null);

  useEffect(() => {
    fetch('/api/integrations/status')
      .then(r => r.json())
      .then(d => setStatus(d.addigy))
      .catch(() => {});
  }, []);

  return (
    <div className="container mx-auto py-4 md:py-8 px-4 space-y-6">
      <div className="flex items-center gap-4">
        <Link href="/admin/sync">
          <Button variant="outline" size="sm" className="gap-2">
            <ArrowLeft className="w-4 h-4" />
            Integrations
          </Button>
        </Link>
        <div className="flex items-center gap-3">
          <div className="p-2 rounded-lg border bg-muted/30">
            <Apple className="w-5 h-5 text-muted-foreground" />
          </div>
          <div>
            <h1 className="text-2xl font-bold">Apple RMM — Addigy</h1>
            <p className="text-sm text-muted-foreground">macOS/iOS device management, policies, compliance</p>
          </div>
        </div>
        <div className="ml-auto">
          <a href="https://app.addigy.com" target="_blank" rel="noopener noreferrer">
            <Button variant="outline" size="sm" className="gap-2">
              <ExternalLink className="w-4 h-4" />Open Portal
            </Button>
          </a>
        </div>
      </div>

      <Tabs defaultValue="status" className="w-full">
        <TabsList className="grid w-full max-w-xs grid-cols-2">
          <TabsTrigger value="status" className="gap-2">
            <Activity className="h-4 w-4" />Status
          </TabsTrigger>
          <TabsTrigger value="about" className="gap-2">
            <Apple className="h-4 w-4" />About
          </TabsTrigger>
        </TabsList>

        <TabsContent value="status" className="mt-6">
          {!status ? (
            <div className="flex items-center justify-center py-12"><Loader2 className="w-5 h-5 animate-spin text-muted-foreground" /></div>
          ) : (
            <div className="space-y-4">
              <div className="rounded-lg border p-4 bg-muted/30 flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <CheckCircle2 className={`w-5 h-5 ${status.configured ? 'text-green-500' : 'text-muted-foreground'}`} />
                  <div>
                    <p className="text-sm font-medium">{status.configured ? 'Connected' : 'Not configured'}</p>
                    <p className="text-xs text-muted-foreground">{status.apiUrl}</p>
                  </div>
                </div>
              </div>
              <div className="rounded-lg border p-4 bg-muted/30 text-sm text-muted-foreground">
                Full sync and database integration is planned. Device and policy data is currently available on-demand via the Addigy API.
                Use the org mappings page to link Addigy organizations to Autotask companies.
              </div>
              <div className="flex gap-2">
                <Link href="/addigy-mappings">
                  <Button variant="outline" size="sm">Org Mappings</Button>
                </Link>
              </div>
            </div>
          )}
        </TabsContent>

        <TabsContent value="about" className="mt-6">
          <div className="space-y-4 text-sm text-muted-foreground">
            <div className="rounded-lg border p-4 space-y-2">
              <p className="font-medium text-foreground">API Endpoints Available</p>
              <ul className="space-y-1 list-disc list-inside">
                <li><code className="text-xs bg-muted px-1 rounded">GET /api/addigy-devices</code> — managed Apple devices</li>
                <li><code className="text-xs bg-muted px-1 rounded">GET /api/addigy-policies</code> — device policies</li>
                <li><code className="text-xs bg-muted px-1 rounded">GET /api/addigy/org-mappings</code> — org to company mappings</li>
              </ul>
            </div>
            <div className="rounded-lg border p-4 space-y-2">
              <p className="font-medium text-foreground">Authentication</p>
              <p>Bearer token auth via <code className="text-xs bg-muted px-1 rounded">ADDIGY_API_TOKEN</code></p>
              <p>Base URL: <code className="text-xs bg-muted px-1 rounded">https://api.addigy.com/api/v2</code></p>
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}
