import { Settings as SettingsIcon, Database, Bell, Shield, Key, Printer } from 'lucide-react';
import Link from 'next/link';

export default function ConfigPage() {
    return (
        <div className="space-y-8 max-w-4xl">
            <div>
                <h1 className="text-3xl font-bold tracking-tight">Configuración del Sistema</h1>
                <p className="text-muted-foreground mt-2">Personalización, seguridad y parámetros globales.</p>
            </div>

            <div className="grid gap-6">
                <section className="rounded-2xl border border-border bg-card overflow-hidden shadow-sm">
                    <div className="px-6 py-4 border-b border-border bg-muted/30">
                        <h3 className="font-bold flex items-center">
                            <Database className="h-5 w-5 mr-2 text-primary" />
                            Base de Datos
                        </h3>
                    </div>
                    <div className="p-6 space-y-6">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="font-medium">Conexión Externa</p>
                                <p className="text-sm text-muted-foreground">Servidor: 85.215.144.168</p>
                            </div>
                            <span className="px-2 py-1 bg-emerald-500/10 text-emerald-600 text-xs font-bold rounded-lg border border-emerald-500/20">
                                CONECTADO
                            </span>
                        </div>
                        <div className="flex items-center justify-between pt-4 border-t border-border">
                            <div>
                                <p className="font-medium">Copia de Seguridad</p>
                                <p className="text-sm text-muted-foreground">Última copia realizada ayer a las 23:00</p>
                            </div>
                            <button className="text-sm font-semibold text-primary hover:underline">Exportar SQL</button>
                        </div>
                    </div>
                </section>

                <section className="rounded-2xl border border-border bg-card overflow-hidden shadow-sm">
                    <div className="px-6 py-4 border-b border-border bg-muted/30">
                        <h3 className="font-bold flex items-center">
                            <Shield className="h-5 w-5 mr-2 text-primary" />
                            Seguridad y Accesos
                        </h3>
                    </div>
                    <div className="p-6">
                        <div className="space-y-4">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center space-x-3">
                                    <div className="p-2 bg-secondary rounded-lg"><Key className="h-4 w-4" /></div>
                                    <p className="text-sm font-medium">Gestionar Roles de Usuario</p>
                                </div>
                                <Link
                                    href="/configuracion/permisos"
                                    className="text-xs font-bold bg-secondary px-3 py-1 rounded-md hover:bg-border transition-colors uppercase"
                                >
                                    Configurar
                                </Link>
                            </div>
                            <div className="flex items-center justify-between">
                                <div className="flex items-center space-x-3">
                                    <div className="p-2 bg-secondary rounded-lg"><Printer className="h-4 w-4" /></div>
                                    <p className="text-sm font-medium">Configuración de Impresoras (Ticket/Factura)</p>
                                </div>
                                <button className="text-xs font-bold bg-secondary px-3 py-1 rounded-md hover:bg-border transition-colors">SELECCIONAR</button>
                            </div>
                        </div>
                    </div>
                </section>

                <section className="rounded-2xl border border-border bg-card overflow-hidden shadow-sm">
                    <div className="px-6 py-4 border-b border-border bg-muted/30 flex justify-between items-center">
                        <h3 className="font-bold flex items-center">
                            <Bell className="h-5 w-5 mr-2 text-primary" />
                            Notificaciones y Avisos
                        </h3>
                    </div>
                    <div className="p-6">
                        <div className="space-y-4">
                            <div className="flex items-center justify-between">
                                <span className="text-sm font-medium">Avisar por email sobre facturas pendientes</span>
                                <label className="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" className="sr-only peer" defaultChecked aria-label="Avisar por email sobre facturas pendientes" />
                                    <div className="w-11 h-6 bg-secondary peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                </label>
                            </div>
                            <div className="flex items-center justify-between">
                                <span className="text-sm font-medium">Notificar ausencias reiteradas automáticamente</span>
                                <label className="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" className="sr-only peer" aria-label="Notificar ausencias reiteradas automáticamente" />
                                    <div className="w-11 h-6 bg-secondary peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                                </label>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    );
}