import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Landmark, RefreshCw, Sparkles } from "lucide-react";

/**
 * Integrations hub. The bank-feed (Plaid), ledger-sync and ACMACC-sync panels
 * are powered by Supabase Edge Functions on ACMACC. This page is a stub until
 * those functions are deployed; the credentials are configured in .env /
 * Supabase secrets (PLAID_*, ANTHROPIC_API_KEY).
 */
export default function AccountingIntegrationsPage() {
  const items = [
    { icon: Landmark, title: "Bank Feeds (Plaid)", desc: "Connect bank & credit-card accounts to auto-import transactions for reconciliation." },
    { icon: RefreshCw, title: "Ledger Sync", desc: "Sync the general ledger with your external accounting source." },
    { icon: Sparkles, title: "AI Bill Parsing", desc: "Auto-extract vendor, amount and line items from uploaded bills." },
  ];
  return (
    <div className="space-y-4 max-w-2xl">
      {items.map((it) => (
        <Card key={it.title}>
          <CardHeader>
            <div className="flex items-center gap-2">
              <it.icon className="h-4 w-4 text-primary" />
              <CardTitle className="text-base">{it.title}</CardTitle>
            </div>
            <CardDescription>{it.desc}</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground">
              Setup is being wired up via Supabase Edge Functions.
            </p>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}
