'use client';

import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Loader2, CheckCircle, XCircle, RefreshCw, Trash2, Database, BrainCircuit } from 'lucide-react';
import { cleanupAllOrphans, syncAllEmbeddings } from '@/app/actions/notes';
import { toast } from 'sonner';

export default function SettingsPage() {
  const [loading, setLoading] = useState(false);
  const [cleanupLoading, setCleanupLoading] = useState(false);
  const [syncLoading, setSyncLoading] = useState(false);

  const handleSync = async () => {
    setSyncLoading(true);
    try {
      const result = await syncAllEmbeddings();
      if (result.success) {
        toast.success(`Indexing complete: ${result.count} notes processed`);
      }
    } catch (error) {
      console.error(error);
      toast.error("Error during indexing");
    } finally {
      setSyncLoading(false);
    }
  };

  const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle');
  const [result, setResult] = useState<any>(null);
  const [config, setConfig] = useState<any>(null);

  const checkConnection = async () => {
    setLoading(true);
    setStatus('idle');
    setResult(null);
    try {
      const res = await fetch('/api/ai/test');
      const data = await res.json();

      setConfig({
        provider: data.provider,
        status: res.ok ? 'connected' : 'disconnected'
      });

      if (res.ok) {
        setStatus('success');
        setResult(data);
      } else {
        setStatus('error');
        setResult(data);
      }
    } catch (error: any) {
      console.error(error);
      setStatus('error');
      setResult({ message: error.message, stack: error.stack });
    } finally {
      setLoading(false);
    }
  };

  const handleCleanup = async () => {
    setCleanupLoading(true);
    try {
      const result = await cleanupAllOrphans();
      if (result.success) {
        toast.success(result.message || `Cleanup complete: ${result.created} created, ${result.deleted} removed`);
      }
    } catch (error) {
      console.error(error);
      toast.error("Error during cleanup");
    } finally {
      setCleanupLoading(false);
    }
  };

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

  return (
    <div className="container mx-auto py-10 px-4 max-w-4xl space-y-8">
      <h1 className="text-3xl font-bold mb-8">Settings</h1>

      <Card>
        <CardHeader>
          <div className="flex justify-between items-center">
            <div>
              <CardTitle className="flex items-center gap-2">
                AI Diagnostics
                {status === 'success' && <CheckCircle className="text-green-500 w-5 h-5" />}
                {status === 'error' && <XCircle className="text-red-500 w-5 h-5" />}
              </CardTitle>
              <CardDescription>Check your AI provider connection status.</CardDescription>
            </div>
            <Button variant="outline" size="sm" onClick={checkConnection} disabled={loading}>
              {loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <RefreshCw className="w-4 h-4 mr-2" />}
              Test Connection
            </Button>
          </div>
        </CardHeader>
        <CardContent className="space-y-6">

          {/* Current Configuration */}
          <div className="grid grid-cols-2 gap-4">
            <div className="p-4 rounded-lg bg-secondary/50">
              <p className="text-sm font-medium text-muted-foreground mb-1">Configured Provider</p>
              <p className="text-lg font-mono">{config?.provider || '...'}</p>
            </div>
            <div className="p-4 rounded-lg bg-secondary/50">
              <p className="text-sm font-medium text-muted-foreground mb-1">API Status</p>
              <Badge variant={status === 'success' ? 'default' : 'destructive'}>
                {status === 'success' ? 'Operational' : 'Error'}
              </Badge>
            </div>
          </div>

          {/* Test Result */}
          {result && (
            <div className="space-y-2">
              <h3 className="text-sm font-medium">Test Details:</h3>
              <div className={`p-4 rounded-md font-mono text-xs overflow-x-auto ${status === 'error' ? 'bg-red-50 text-red-900 border border-red-200' : 'bg-slate-950 text-slate-50'}`}>
                <pre>{JSON.stringify(result, null, 2)}</pre>
              </div>

              {status === 'error' && (
                <div className="text-sm text-red-600 mt-2">
                  <p className="font-bold">Troubleshooting Tips:</p>
                  <ul className="list-disc list-inside mt-1">
                    <li>Check that Ollama is running (<code>ollama list</code>)</li>
                    <li>Check the URL (http://localhost:11434)</li>
                    <li>Verify the model (e.g., granite4:latest) is downloaded</li>
                    <li>Check the Next.js server terminal for more logs</li>
                  </ul>
                </div>
              )}
            </div>
          )}

        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Database className="w-5 h-5" />
            Maintenance
          </CardTitle>
          <CardDescription>Tools to maintain your database health.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col gap-4">
            <div className="flex items-center justify-between p-4 border rounded-lg">
              <div>
                <h3 className="font-medium">Clean Orphan Tags</h3>
                <p className="text-sm text-muted-foreground">Remove tags that are no longer used by any notes.</p>
              </div>
              <Button variant="secondary" onClick={handleCleanup} disabled={cleanupLoading}>
                {cleanupLoading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Trash2 className="w-4 h-4 mr-2" />}
                Clean
              </Button>
            </div>

            <div className="flex items-center justify-between p-4 border rounded-lg">
              <div>
                <h3 className="font-medium flex items-center gap-2">
                  Semantic Indexing
                  <Badge variant="outline" className="text-[10px]">AI</Badge>
                </h3>
                <p className="text-sm text-muted-foreground">Generate vectors for all notes to enable intent-based search.</p>
              </div>
              <Button variant="secondary" onClick={handleSync} disabled={syncLoading}>
                {syncLoading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <BrainCircuit className="w-4 h-4 mr-2" />}
                Index All
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}