"use client"

import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Download, FileSpreadsheet, Webhook } from "lucide-react"

export default function ExportsPage() {
  const handleCrmExport = () => {
    const a = document.createElement("a")
    a.href = "/api/exports/crm-pack"
    a.download = `pledges-export-${new Date().toISOString().slice(0, 10)}.csv`
    a.click()
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-extrabold text-gray-900">Exports</h1>
        <p className="text-muted-foreground mt-1">Export data for your CRM and automation tools</p>
      </div>

      <div className="grid md:grid-cols-2 gap-4">
        <Card>
          <CardHeader>
            <CardTitle className="text-lg flex items-center gap-2">
              <FileSpreadsheet className="h-5 w-5" /> CRM Export Pack
            </CardTitle>
            <CardDescription>
              Download all pledges as CSV with full attribution data, ready to import into your CRM.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="text-sm text-muted-foreground space-y-1">
              <p>Includes:</p>
              <ul className="list-disc list-inside space-y-0.5">
                <li>Donor name, email, phone</li>
                <li>Pledge amount and status</li>
                <li>Payment method and reference</li>
                <li>Event name and source attribution</li>
                <li>Gift Aid flag</li>
                <li>Days to collect</li>
              </ul>
            </div>
            <Button onClick={handleCrmExport} className="w-full">
              <Download className="h-4 w-4 mr-2" /> Download CRM Pack (CSV)
            </Button>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-lg flex items-center gap-2">
              <Webhook className="h-5 w-5" /> Webhook Events
            </CardTitle>
            <CardDescription>
              Poll pending reminder events for external automation (Zapier, Make, n8n).
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="text-sm text-muted-foreground space-y-2">
              <p>Endpoint:</p>
              <code className="block bg-gray-100 rounded-lg p-3 text-xs font-mono">
                GET /api/webhooks?since=2025-01-01T00:00:00Z
              </code>
              <p>Returns pending reminders with donor contact info and pledge details.</p>
            </div>
            <div className="rounded-xl bg-trust-blue/5 border border-trust-blue/20 p-3">
              <p className="text-xs text-trust-blue font-medium">
                💡 Connect this to Zapier or Make to send emails/SMS automatically
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
