"use client"

import { useEffect, useState } from "react"
import { toast } from "sonner"
import { credentialsApi, ConfiguredService } from "@/lib/api"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Check, Loader2, Plus, Shield, Trash2, X } from "lucide-react"

export default function CredentialsPage() {
    const [loading, setLoading] = useState(true)
    const [services, setServices] = useState<ConfiguredService[]>([])
    const [openDialog, setOpenDialog] = useState(false)
    const [selectedService, setSelectedService] = useState<string>("")
    const [formData, setFormData] = useState<Record<string, string>>({})
    const [saving, setSaving] = useState(false)

    // Predefined schemas for known services
    const schemas: Record<string, { label: string, fields: { key: string, label: string, type?: string }[] }> = {
        stripe: {
            label: "Stripe",
            fields: [
                { key: "secretKey", label: "Secret Key (sk_...)", type: "password" },
                { key: "webhookSecret", label: "Webhook Secret (whsec_...)", type: "password" },
                { key: "publishableKey", label: "Publishable Key (pk_...)", type: "text" },
            ]
        },
        storage: {
            label: "AWS S3 / Compatible",
            fields: [
                { key: "endpoint", label: "Endpoint URL", type: "text" },
                { key: "region", label: "Region", type: "text" },
                { key: "bucket", label: "Bucket Name", type: "text" },
                { key: "accessKey", label: "Access Key ID", type: "text" },
                { key: "secretKey", label: "Secret Access Key", type: "password" },
            ]
        },
        cpanel: {
            label: "cPanel Integration",
            fields: [
                { key: "host", label: "cPanel URL (https://domain:2083)", type: "text" },
                { key: "username", label: "Username", type: "text" },
                { key: "apiToken", label: "API Token", type: "password" },
            ]
        },
        cloudflare_config: {
            label: "Cloudflare",
            fields: [
                { key: "apiToken", label: "API Token", type: "password" },
                { key: "zoneId", label: "Zone ID", type: "text" },
            ]
        },
        smtp: {
            label: "SMTP Email",
            fields: [
                { key: "host", label: "Host", type: "text" },
                { key: "port", label: "Port", type: "number" },
                { key: "username", label: "Username", type: "text" },
                { key: "password", label: "Password", type: "password" },
                { key: "from_email", label: "From Email", type: "email" },
                { key: "from_name", label: "From Name", type: "text" },
                { key: "secure", label: "Use TLS", type: "checkbox" } // TODO handle checkbox
            ]
        },
        appwrite: {
            label: "Appwrite",
            fields: [
                { key: "endpoint", label: "Endpoint", type: "text" },
                { key: "projectId", label: "Project ID", type: "text" },
                { key: "apiKey", label: "API Key", type: "password" },
            ]
        },
        firebase: {
            label: "Firebase (JSON)",
            fields: [
                { key: "serviceAccountJson", label: "Service Account JSON Content", type: "textarea" }
            ]
        }
    }

    const availableServices = Object.keys(schemas)

    useEffect(() => {
        loadServices()
    }, [])

    const loadServices = async () => {
        try {
            setLoading(true)
            const res = await credentialsApi.list()
            // Backend returns { services: [...] }
            if (res && res.services) {
                setServices(res.services)
            }
        } catch (error) {
            toast.error("Failed to load credentials")
            console.error(error)
        } finally {
            setLoading(false)
        }
    }

    const handleEdit = (serviceName: string) => {
        setSelectedService(serviceName)
        setFormData({}) // Reset form, we don't load existing secrets for security
        setOpenDialog(true)
    }

    const handleSave = async () => {
        if (!selectedService) return

        try {
            setSaving(true)
            await credentialsApi.save(selectedService, formData)
            toast.success(`${schemas[selectedService]?.label || selectedService} credentials saved!`)
            setOpenDialog(false)
            loadServices()
        } catch (error: any) {
            toast.error(error.message || "Failed to save")
        } finally {
            setSaving(false)
        }
    }

    const handleDelete = async (serviceName: string) => {
        if (!confirm(`Are you sure you want to delete credentials for ${serviceName}? This will break functionality relying on it.`)) return

        try {
            await credentialsApi.delete(serviceName)
            toast.success("Credentials deleted")
            loadServices()
        } catch (error: any) {
            toast.error("Failed to delete")
        }
    }

    return (
        <div className="space-y-6">
            <div className="flex justify-between items-center">
                <div>
                    <h1 className="text-3xl font-bold tracking-tight">System Credentials</h1>
                    <p className="text-muted-foreground mt-2">
                        Manage external service connections securely. Keys are encrypted in the database.
                    </p>
                </div>
            </div>

            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                {services.map((svc) => (
                    <Card key={svc.service_name} className={svc.is_configured ? "border-green-500/50" : "opacity-70"}>
                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                            <CardTitle className="text-sm font-medium">
                                {schemas[svc.service_name]?.label || svc.service_name}
                            </CardTitle>
                            {svc.is_configured ? (
                                <Badge variant="default" className="bg-green-500/15 text-green-700 hover:bg-green-500/25 border-green-500/50">
                                    <Check className="h-3 w-3 mr-1" /> Active
                                </Badge>
                            ) : (
                                <Badge variant="outline" className="text-muted-foreground">
                                    Pending
                                </Badge>
                            )}
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold pt-2">
                                <Shield className={svc.is_configured ? "text-green-500" : "text-gray-400"} size={32} />
                            </div>
                            <p className="text-xs text-muted-foreground mt-4">
                                {svc.is_configured
                                    ? `Last updated ${new Date(svc.updated_at).toLocaleDateString()}`
                                    : "Not configured yet"}
                            </p>
                            <div className="mt-4 flex gap-2">
                                <Button variant="outline" size="sm" className="w-full" onClick={() => handleEdit(svc.service_name)}>
                                    {svc.is_configured ? "Update" : "Configure"}
                                </Button>
                                {svc.is_configured && (
                                    <Button variant="ghost" size="icon" className="text-destructive hover:bg-destructive/10" onClick={() => handleDelete(svc.service_name)}>
                                        <Trash2 className="h-4 w-4" />
                                    </Button>
                                )}
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>

            <Dialog open={openDialog} onOpenChange={setOpenDialog}>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>Configure {schemas[selectedService]?.label || selectedService}</DialogTitle>
                        <DialogDescription>
                            Enter the credentials for this service. They will be encrypted before storage.
                        </DialogDescription>
                    </DialogHeader>

                    <div className="space-y-4 py-4">
                        {schemas[selectedService]?.fields.map((field) => (
                            <div key={field.key} className="space-y-2">
                                <Label htmlFor={field.key}>{field.label}</Label>
                                {field.type === 'textarea' ? (
                                    <textarea
                                        id={field.key}
                                        className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                                        value={formData[field.key] || ""}
                                        onChange={(e) => setFormData({ ...formData, [field.key]: e.target.value })}
                                    />
                                ) : (
                                    <Input
                                        id={field.key}
                                        type={field.type}
                                        value={formData[field.key] || ""}
                                        onChange={(e) => setFormData({ ...formData, [field.key]: e.target.value })}
                                        placeholder={`Enter ${field.label}`}
                                    />
                                )}
                            </div>
                        ))}
                    </div>

                    <DialogFooter>
                        <Button variant="outline" onClick={() => setOpenDialog(false)}>Cancel</Button>
                        <Button onClick={handleSave} disabled={saving}>
                            {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                            Save Credentials
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </div>
    )
}