/**
 * AdminInvoiceShareSettings — Super Admin → Invoice Share Settings.
 *
 * Controls for the public-link / PDF-share flow:
 *   - Master enable
 *   - Auto PDF download
 *   - Token expiry (days)
 *   - Watermark + custom text
 *   - QR verification
 *   - Digital signature placeholder
 *   - Custom domain (note: DNS must be pointed via Emergent Support)
 *   - WhatsApp templates per transaction type
 */
import React, { useEffect, useState, useCallback } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { Share2, Globe, ShieldCheck, MessageCircle, Save, RotateCcw, Info, AlertCircle } from "lucide-react";
import { api } from "@/lib/api";
import { toast } from "sonner";

export default function AdminInvoiceShareSettings() {
    const [settings, setSettings] = useState(null);
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);

    const load = useCallback(async () => {
        try {
            const { data } = await api.get("/invoice-share/settings");
            setSettings(data);
        } catch (e) {
            toast.error("Failed to load settings");
        } finally {
            setLoading(false);
        }
    }, []);

    useEffect(() => { load(); }, [load]);

    const save = async (patch) => {
        setSaving(true);
        try {
            const { data } = await api.put("/invoice-share/settings", patch);
            setSettings(data);
            toast.success("Saved");
        } catch (e) {
            toast.error("Failed to save");
        } finally {
            setSaving(false);
        }
    };

    if (loading || !settings) return <div className="text-center py-12 text-muted-foreground">Loading…</div>;

    const updateLocal = (k, v) => setSettings(prev => ({ ...prev, [k]: v }));
    const updateTemplate = (key, v) => setSettings(prev => ({
        ...prev,
        wa_templates: { ...(prev.wa_templates || {}), [key]: v },
    }));

    return (
        <div className="space-y-5" data-testid="invoice-share-settings-page">
            <header className="flex flex-wrap items-end justify-between gap-3">
                <div>
                    <div className="text-[10px] uppercase tracking-[0.2em] text-emerald-600 font-semibold">Customer Communication</div>
                    <h1 className="font-display text-3xl font-bold flex items-center gap-2">
                        <Share2 className="h-7 w-7 text-emerald-600" /> Invoice Share Settings
                    </h1>
                    <p className="text-sm text-muted-foreground mt-1">Public invoice link branding, security, expiry, aur WhatsApp templates.</p>
                </div>
                <div className="flex items-center gap-2">
                    <Button variant="outline" size="sm" onClick={load} data-testid="settings-refresh">
                        <RotateCcw className="h-3.5 w-3.5 mr-1.5" /> Reload
                    </Button>
                    <Button size="sm" onClick={() => save(settings)} disabled={saving} className="bg-emerald-600 hover:bg-emerald-700 text-white" data-testid="settings-save-all">
                        <Save className="h-3.5 w-3.5 mr-1.5" /> {saving ? "Saving…" : "Save All"}
                    </Button>
                </div>
            </header>

            <Tabs defaultValue="general">
                <TabsList>
                    <TabsTrigger value="general" data-testid="tab-general">General</TabsTrigger>
                    <TabsTrigger value="security" data-testid="tab-security">Security & PDF</TabsTrigger>
                    <TabsTrigger value="domain" data-testid="tab-domain">Branding & Domain</TabsTrigger>
                    <TabsTrigger value="templates" data-testid="tab-templates">WhatsApp Templates</TabsTrigger>
                </TabsList>

                {/* GENERAL */}
                <TabsContent value="general" className="space-y-4 mt-4">
                    <Card>
                        <CardHeader><CardTitle className="text-base flex items-center gap-2"><ShieldCheck className="h-4 w-4 text-emerald-600" />Public Invoice Links</CardTitle></CardHeader>
                        <CardContent className="space-y-4">
                            <ToggleRow
                                label="Enable Secure Invoice Links"
                                hint="Master switch — turning OFF disables /p/inv/{token} for all customers."
                                checked={settings.enable_share}
                                onChange={(v) => { updateLocal("enable_share", v); save({ enable_share: v }); }}
                                testid="toggle-enable"
                            />
                            <ToggleRow
                                label="Auto PDF Download on Open"
                                hint="When customer opens link, PDF starts downloading immediately."
                                checked={settings.auto_download}
                                onChange={(v) => { updateLocal("auto_download", v); save({ auto_download: v }); }}
                                testid="toggle-auto-download"
                            />
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 pt-1">
                                <div>
                                    <Label className="text-xs">Token Expiry (days)</Label>
                                    <Input
                                        type="number" min="1" max="3650"
                                        value={settings.expiry_days}
                                        onChange={(e) => updateLocal("expiry_days", Number(e.target.value || 30))}
                                        onBlur={(e) => save({ expiry_days: Number(e.target.value || 30) })}
                                        className="h-9"
                                        data-testid="input-expiry-days"
                                    />
                                    <p className="text-[10px] text-muted-foreground mt-1">Customer ka link itne dino baad expire ho jayega.</p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </TabsContent>

                {/* SECURITY */}
                <TabsContent value="security" className="space-y-4 mt-4">
                    <Card>
                        <CardHeader><CardTitle className="text-base flex items-center gap-2"><ShieldCheck className="h-4 w-4 text-emerald-600" />PDF Protection</CardTitle></CardHeader>
                        <CardContent className="space-y-4">
                            <ToggleRow
                                label="Watermark on PDF"
                                hint="Diagonal watermark printed across each page."
                                checked={settings.watermark}
                                onChange={(v) => { updateLocal("watermark", v); save({ watermark: v }); }}
                                testid="toggle-watermark"
                            />
                            <div>
                                <Label className="text-xs">Watermark Text</Label>
                                <Input
                                    value={settings.watermark_text || ""}
                                    onChange={(e) => updateLocal("watermark_text", e.target.value)}
                                    onBlur={(e) => save({ watermark_text: e.target.value })}
                                    className="h-9"
                                    data-testid="input-watermark-text"
                                />
                            </div>
                            <ToggleRow
                                label="QR Verification on PDF"
                                hint="Customer apne phone se QR scan karke invoice verify kar sakta hai."
                                checked={settings.qr_verify}
                                onChange={(v) => { updateLocal("qr_verify", v); save({ qr_verify: v }); }}
                                testid="toggle-qr-verify"
                            />
                            <ToggleRow
                                label="Digital Signature"
                                hint="Add cryptographic signature (requires PFX cert upload — coming soon)."
                                checked={settings.digital_signature}
                                onChange={(v) => { updateLocal("digital_signature", v); save({ digital_signature: v }); }}
                                testid="toggle-signature"
                            />
                            <div className="rounded-md bg-blue-50 border border-blue-200 p-3 text-xs text-blue-800 flex gap-2">
                                <Info className="h-4 w-4 shrink-0" />
                                <span>PDF read-only hai — customer link se invoice edit nahi kar sakta. Watermark + QR + hash = triple-layer protection.</span>
                            </div>
                        </CardContent>
                    </Card>
                </TabsContent>

                {/* DOMAIN */}
                <TabsContent value="domain" className="space-y-4 mt-4">
                    <Card>
                        <CardHeader><CardTitle className="text-base flex items-center gap-2"><Globe className="h-4 w-4 text-emerald-600" />Branding & Domain</CardTitle></CardHeader>
                        <CardContent className="space-y-4">
                            <div>
                                <Label className="text-xs">Brand Name (shown on public page + PDF)</Label>
                                <Input
                                    value={settings.brand_name || ""}
                                    onChange={(e) => updateLocal("brand_name", e.target.value)}
                                    onBlur={(e) => save({ brand_name: e.target.value })}
                                    className="h-9"
                                    data-testid="input-brand-name"
                                />
                            </div>
                            <div>
                                <Label className="text-xs flex items-center gap-1">
                                    Custom Domain <Badge variant="outline" className="text-[9px] py-0">Optional</Badge>
                                </Label>
                                <Input
                                    placeholder="invoice.regalmarketing.com"
                                    value={settings.custom_domain || ""}
                                    onChange={(e) => updateLocal("custom_domain", e.target.value)}
                                    onBlur={(e) => save({ custom_domain: e.target.value })}
                                    className="h-9 font-mono"
                                    data-testid="input-custom-domain"
                                />
                                <div className="rounded-md bg-amber-50 border border-amber-300 p-3 text-xs text-amber-900 flex gap-2 mt-2">
                                    <AlertCircle className="h-4 w-4 shrink-0" />
                                    <div>
                                        <b>DNS pointing zaroori hai.</b> Custom domain set karne ke liye DNS A/CNAME record point karna padega <code className="bg-white/60 px-1 rounded">offline-billing-pro-2.emergent.host</code> par.
                                        Yeh setup Emergent Support contact karke karwana hota hai — main agent direct DNS configure nahi kar sakta.
                                    </div>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </TabsContent>

                {/* TEMPLATES */}
                <TabsContent value="templates" className="space-y-4 mt-4">
                    <Card>
                        <CardHeader>
                            <CardTitle className="text-base flex items-center gap-2"><MessageCircle className="h-4 w-4 text-emerald-600" />WhatsApp / SMS Templates</CardTitle>
                            <div className="text-[11px] text-muted-foreground mt-1">
                                Variables: <code>{"{customer_name}"}</code>, <code>{"{invoice_no}"}</code>, <code>{"{total}"}</code>, <code>{"{link}"}</code>
                            </div>
                        </CardHeader>
                        <CardContent className="space-y-5">
                            {Object.entries(settings.wa_templates || {}).map(([key, tpl]) => (
                                <div key={key} className="space-y-1">
                                    <Label className="text-xs uppercase tracking-wider font-semibold text-emerald-700">{key} template</Label>
                                    <Textarea
                                        rows={6}
                                        value={tpl}
                                        onChange={(e) => updateTemplate(key, e.target.value)}
                                        onBlur={() => save({ wa_templates: settings.wa_templates })}
                                        className="font-mono text-xs"
                                        data-testid={`template-${key}`}
                                    />
                                </div>
                            ))}
                        </CardContent>
                    </Card>
                </TabsContent>
            </Tabs>
        </div>
    );
}

function ToggleRow({ label, hint, checked, onChange, testid }) {
    return (
        <div className="flex items-start justify-between gap-4 py-1">
            <div className="flex-1">
                <div className="text-sm font-medium">{label}</div>
                {hint && <div className="text-[11px] text-muted-foreground mt-0.5">{hint}</div>}
            </div>
            <Switch checked={!!checked} onCheckedChange={onChange} data-testid={testid} />
        </div>
    );
}