"use client"

import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Download, FileSpreadsheet, Webhook, Gift } 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()
  }

  const handleGiftAidExport = () => {
    const a = document.createElement("a")
    a.href = "/api/exports/crm-pack?giftAidOnly=true"
    a.download = `gift-aid-declarations-${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, HMRC, and automation tools</p>
      </div>

      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
        <Card>
          <CardHeader>
            <CardTitle className="text-lg flex items-center gap-2">
              <FileSpreadsheet className="h-5 w-5" /> CRM Export Pack
            </CardTitle>
            <CardDescription>
              All pledges as CSV with full attribution data.
            </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 text-xs">
                <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
            </Button>
          </CardContent>
        </Card>

        <Card className="border-success-green/30">
          <CardHeader>
            <CardTitle className="text-lg flex items-center gap-2">
              <Gift className="h-5 w-5 text-success-green" /> Gift Aid Report
            </CardTitle>
            <CardDescription>
              HMRC-ready Gift Aid declarations for tax reclaim.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="text-sm text-muted-foreground space-y-1">
              <p>Includes only Gift Aid-eligible pledges:</p>
              <ul className="list-disc list-inside space-y-0.5 text-xs">
                <li>Donor full name (required by HMRC)</li>
                <li>Donation amount and date</li>
                <li>Gift Aid declaration status</li>
                <li>Event and reference for audit trail</li>
              </ul>
            </div>
            <div className="rounded-xl bg-success-green/5 border border-success-green/20 p-3">
              <p className="text-xs text-success-green font-medium">
                💷 Claim 25p for every £1 donated by a UK taxpayer
              </p>
            </div>
            <Button onClick={handleGiftAidExport} className="w-full bg-success-green hover:bg-success-green/90">
              <Download className="h-4 w-4 mr-2" /> Download Gift Aid Report
            </Button>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-lg flex items-center gap-2">
              <Webhook className="h-5 w-5" /> Webhook / API
            </CardTitle>
            <CardDescription>
              Connect to Zapier, Make, or n8n for automation.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="text-sm text-muted-foreground space-y-2">
              <p>Reminder endpoint:</p>
              <code className="block bg-gray-100 rounded-lg p-3 text-xs font-mono break-all">
                GET /api/webhooks?since=2025-01-01
              </code>
              <p className="text-xs">Returns pending reminders with donor contact info for external email/SMS.</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 to Zapier or n8n to send automatic reminder emails and SMS
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
