"use client";

import { useEffect, useState } from "react";
import { useTheme } from "next-themes";
import { 
  Settings, 
  Palette, 
  Globe, 
  Server, 
  CheckCircle2, 
  XCircle, 
  RefreshCw,
  Monitor,
  Sun,
  Moon,
  Info
} from "lucide-react";

import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { Skeleton } from "@/components/ui/skeleton";
import { toast } from "sonner";
import { dolibarrFetch } from "@/lib/dolibarrClient";

interface ConnectionStatus {
  connected: boolean;
  url: string;
  version?: string;
  error?: string;
}

export default function ConfiguracionPage() {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus | null>(null);
  const [isTestingConnection, setIsTestingConnection] = useState(false);

  useEffect(() => {
    setMounted(true);
    testConnection();
  }, []);

  const testConnection = async () => {
    setIsTestingConnection(true);
    const apiUrl = process.env.NEXT_PUBLIC_API_URL || "No configurada";
    
    try {
      const status = await dolibarrFetch("status");
      setConnectionStatus({
        connected: true,
        url: apiUrl,
        version: status?.success?.dolibarr_version || status?.dolibarr_version || "Desconocida",
      });
      toast.success("Conexion verificada con Dolibarr");
    } catch (err) {
      console.error("Connection test failed:", err);
      setConnectionStatus({
        connected: false,
        url: apiUrl,
        error: err instanceof Error ? err.message : "Error desconocido",
      });
      toast.error("No se pudo conectar con Dolibarr");
    } finally {
      setIsTestingConnection(false);
    }
  };

  const themeOptions = [
    { value: "light", label: "Claro", icon: Sun, description: "Tema claro" },
    { value: "dark", label: "Oscuro", icon: Moon, description: "Tema oscuro" },
    { value: "system", label: "Sistema", icon: Monitor, description: "Seguir preferencia del sistema" },
  ];

  return (
    <div className="p-6 space-y-6 max-w-3xl mx-auto">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Ajustes</h1>
        <p className="text-muted-foreground">Configuracion de la aplicacion y conexion con Dolibarr</p>
      </div>

      {/* Theme */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg flex items-center gap-2">
            <Palette className="h-5 w-5" />
            Apariencia
          </CardTitle>
          <CardDescription>Personaliza el aspecto visual de la aplicacion</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>Tema</Label>
            <div className="grid grid-cols-3 gap-3">
              {mounted && themeOptions.map((option) => {
                const isSelected = theme === option.value;
                const Icon = option.icon;
                return (
                  <button
                    key={option.value}
                    onClick={() => setTheme(option.value)}
                    className={`flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all ${
                      isSelected
                        ? "border-blue-500 bg-blue-50 dark:bg-blue-950"
                        : "border-muted hover:border-muted-foreground/25"
                    }`}
                  >
                    <Icon className={`h-6 w-6 ${isSelected ? "text-blue-500" : "text-muted-foreground"}`} />
                    <span className={`text-sm font-medium ${isSelected ? "text-blue-600 dark:text-blue-400" : ""}`}>
                      {option.label}
                    </span>
                    <span className="text-xs text-muted-foreground">{option.description}</span>
                  </button>
                );
              })}
              {!mounted && (
                <>
                  {[1, 2, 3].map((i) => (
                    <Skeleton key={i} className="h-24 w-full rounded-lg" />
                  ))}
                </>
              )}
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Dolibarr Connection */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg flex items-center gap-2">
            <Server className="h-5 w-5" />
            Conexion con Dolibarr
          </CardTitle>
          <CardDescription>Estado de la conexion con el servidor Dolibarr</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* Connection status */}
          <div className="flex items-center justify-between p-4 rounded-lg bg-muted/50">
            <div className="flex items-center gap-3">
              {isTestingConnection ? (
                <RefreshCw className="h-5 w-5 text-muted-foreground animate-spin" />
              ) : connectionStatus?.connected ? (
                <CheckCircle2 className="h-5 w-5 text-green-500" />
              ) : (
                <XCircle className="h-5 w-5 text-red-500" />
              )}
              <div>
                <p className="text-sm font-medium">
                  {isTestingConnection
                    ? "Verificando conexion..."
                    : connectionStatus?.connected
                    ? "Conectado"
                    : "Desconectado"}
                </p>
                <p className="text-xs text-muted-foreground">
                  {connectionStatus?.url || "Verificando..."}
                </p>
              </div>
            </div>
            <Button
              variant="outline"
              size="sm"
              onClick={testConnection}
              disabled={isTestingConnection}
            >
              <RefreshCw className={`h-4 w-4 mr-2 ${isTestingConnection ? "animate-spin" : ""}`} />
              Probar
            </Button>
          </div>

          {/* Connection details */}
          {connectionStatus && (
            <>
              <Separator />
              <div className="space-y-3">
                <DetailRow label="URL de la API" value={connectionStatus.url} />
                {connectionStatus.connected && connectionStatus.version && (
                  <DetailRow label="Version de Dolibarr" value={connectionStatus.version} />
                )}
                {connectionStatus.error && (
                  <div className="flex items-start gap-2 p-3 rounded-lg bg-red-50 dark:bg-red-950/30 text-red-700 dark:text-red-400 text-sm">
                    <XCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
                    <p>{connectionStatus.error}</p>
                  </div>
                )}
                <DetailRow
                  label="Estado"
                  value={
                    connectionStatus.connected ? "Operativo" : "Sin conexion"
                  }
                  badge
                  badgeVariant={connectionStatus.connected ? "success" : "error"}
                />
              </div>
            </>
          )}
        </CardContent>
      </Card>

      {/* App Info */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg flex items-center gap-2">
            <Info className="h-5 w-5" />
            Informacion de la Aplicacion
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <DetailRow label="Aplicacion" value="Dolibarr - Gestion de Proyectos" />
          <Separator />
          <DetailRow label="Framework" value="Next.js 16.0.7" />
          <Separator />
          <DetailRow label="React" value="19.2.0" />
          <Separator />
          <DetailRow label="UI" value="shadcn/ui + Tailwind CSS" />
          <Separator />
          <DetailRow label="Idioma" value="Espanol (es-ES)" />
        </CardContent>
      </Card>

      {/* Locale / Language */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg flex items-center gap-2">
            <Globe className="h-5 w-5" />
            Idioma y Region
          </CardTitle>
          <CardDescription>Configuracion regional de la aplicacion</CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <DetailRow label="Idioma" value="Espanol" />
          <Separator />
          <DetailRow label="Formato de fecha" value="dd/mm/aaaa (es-ES)" />
          <Separator />
          <DetailRow label="Moneda" value="Euro (EUR)" />
        </CardContent>
      </Card>
    </div>
  );
}

function DetailRow({
  label,
  value,
  badge,
  badgeVariant,
}: {
  label: string;
  value: string;
  badge?: boolean;
  badgeVariant?: "success" | "error";
}) {
  return (
    <div className="flex items-center justify-between">
      <span className="text-sm text-muted-foreground">{label}</span>
      {badge ? (
        <Badge
          variant="outline"
          className={
            badgeVariant === "success"
              ? "bg-green-100 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800"
              : "bg-red-100 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800"
          }
        >
          {value}
        </Badge>
      ) : (
        <span className="text-sm font-medium">{value}</span>
      )}
    </div>
  );
}