webshop/shop/app/admin/einstellungen/licserver/page.tsx

'use client';

import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Loader2, KeyRound, Server, CheckCircle2, XCircle, Eye, EyeOff, Wifi } from 'lucide-react';
import { saveLicServerConfig, testLicServerConnection } from '@/lib/actions/licserver-config';
import { createClient } from '@/lib/supabase/client';
import { useRouter } from 'next/navigation';

export default function LicServerPage() {
  const [loading, setLoading] = useState(true);
  const [licUrl, setLicUrl] = useState('');
  const [licKey, setLicKey] = useState('');
  const [showKey, setShowKey] = useState(false);
  const [licSaving, setLicSaving] = useState(false);
  const [licTesting, setLicTesting] = useState(false);
  const [licStatus, setLicStatus] = useState<{ ok: boolean; message: string } | null>(null);
  const [licMsg, setLicMsg] = useState('');
  const [licMsgType, setLicMsgType] = useState<'success' | 'error' | ''>('');
  const router = useRouter();

  useEffect(() => {
    async function loadData() {
      try {
        const supabase = createClient();
        const { data: { user } } = await supabase.auth.getUser();
        if (!user) {
          router.push('/auth/login');
          return;
        }
        const { data } = await supabase.from('settings').select('licserver_base_url, licserver_api_key').eq('id', 'licserver').maybeSingle();
        if (data) {
          setLicUrl(data.licserver_base_url || '');
          setLicKey(data.licserver_api_key || '');
        }
      } catch (e) {
        console.error(e);
      } finally {
        setLoading(false);
      }
    }
    loadData();
  }, [router]);

  if (loading) {
    return <div className="p-8 text-white flex justify-center items-center"><Loader2 className="w-8 h-8 animate-spin text-primary" /></div>;
  }

  return (
    <div className="p-6 max-w-5xl mx-auto space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-extrabold tracking-tight text-white flex items-center gap-3">
            <KeyRound className="w-8 h-8 text-violet-400" />
            CASPOS LicServer
          </h1>
          <p className="text-slate-400 text-xs mt-1">
            REST API-Anbindung für die automatisierte Lizenzierung und Schlüsselgenerierung.
          </p>
        </div>

        {licStatus && (
          <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold border ${
            licStatus.ok
              ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400'
              : 'bg-amber-500/10 border-amber-500/20 text-amber-400'
          }`}>
            {licStatus.ok ? <CheckCircle2 className="w-3.5 h-3.5" /> : <XCircle className="w-3.5 h-3.5" />}
            {licStatus.message}
          </div>
        )}
      </div>

      {licMsg && (
        <div className={`p-3.5 rounded-xl text-xs font-medium border ${
          licMsgType === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-destructive/10 border-destructive/20 text-destructive'
        }`}>
          {licMsg}
        </div>
      )}

      <div className="p-6 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-5">
        <div className="grid md:grid-cols-2 gap-4">
          <div className="space-y-1.5">
            <Label htmlFor="lic-url" className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
              <Server className="w-3.5 h-3.5 text-slate-400" /> Server URL
            </Label>
            <Input
              id="lic-url"
              value={licUrl}
              onChange={e => setLicUrl(e.target.value)}
              placeholder="http://192.168.178.174:9980"
              className="text-sm font-mono bg-slate-950/80 border-slate-800 text-white rounded-xl"
            />
          </div>

          <div className="space-y-1.5">
            <Label htmlFor="lic-key" className="text-xs font-bold text-slate-300 flex items-center gap-1.5">
              <KeyRound className="w-3.5 h-3.5 text-slate-400" /> API-Key
            </Label>
            <div className="relative">
              <Input
                id="lic-key"
                type={showKey ? 'text' : 'password'}
                value={licKey}
                onChange={e => setLicKey(e.target.value)}
                placeholder="Ihr X-Api-Key"
                className="text-sm font-mono pr-10 bg-slate-950/80 border-slate-800 text-white rounded-xl"
              />
              <button
                type="button"
                onClick={() => setShowKey(v => !v)}
                className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white transition-colors"
                aria-label={showKey ? 'Key verbergen' : 'Key anzeigen'}
              >
                {showKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
              </button>
            </div>
          </div>
        </div>

        <div className="flex items-center justify-end gap-3 pt-4 border-t border-slate-800">
          <Button
            disabled={licSaving || licTesting}
            onClick={async () => {
              setLicSaving(true);
              setLicMsg('');
              setLicStatus(null);
              const res = await saveLicServerConfig(licUrl, licKey);
              setLicMsgType(res.success ? 'success' : 'error');
              setLicMsg(res.success ? 'Konfiguration gespeichert.' : (res.error || 'Fehler beim Speichern'));
              setLicSaving(false);
            }}
            className="bg-violet-600 hover:bg-violet-500 text-white rounded-xl px-5 h-10 text-xs font-bold"
          >
            {licSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <KeyRound className="w-4 h-4 mr-2" />}
            Speichern
          </Button>

          <Button
            variant="outline"
            disabled={licSaving || licTesting}
            onClick={async () => {
              setLicTesting(true);
              setLicStatus(null);
              await saveLicServerConfig(licUrl, licKey);
              const result = await testLicServerConnection();
              setLicStatus(result);
              setLicTesting(false);
            }}
            className="border-slate-700 text-slate-300 hover:text-white rounded-xl px-5 h-10 text-xs font-bold"
          >
            {licTesting ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Wifi className="w-4 h-4 mr-2" />}
            Verbindung testen
          </Button>
        </div>
      </div>
    </div>
  );
}