'use client'

import React, { useState } from 'react'
import { SettingsNav, SettingsSection } from '@/components/settings'
import { Button } from '@/components/ui/button'
import { Loader2, CheckCircle, XCircle, RefreshCw, Database, BrainCircuit } from 'lucide-react'
import { cleanupAllOrphans, syncAllEmbeddings } from '@/app/actions/notes'
import { toast } from 'sonner'
import { useLanguage } from '@/lib/i18n'
import Link from 'next/link'

export default function SettingsPage() {
  const { t } = useLanguage()
  const [loading, setLoading] = useState(false)
  const [cleanupLoading, setCleanupLoading] = useState(false)
  const [syncLoading, setSyncLoading] = useState(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 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 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)
    }
  }

  return (

    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold mb-2">{t('settings.title')}</h1>
        <p className="text-gray-600 dark:text-gray-400">
          {t('settings.description')}
        </p>
      </div>

      {/* Quick Links */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Link href="/settings/ai">
          <div className="p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer">
            <BrainCircuit className="h-6 w-6 text-purple-500 mb-2" />
            <h3 className="font-semibold">{t('aiSettings.title')}</h3>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              {t('aiSettings.description')}
            </p>
          </div>
        </Link>
        <Link href="/settings/profile">
          <div className="p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer">
            <RefreshCw className="h-6 w-6 text-primary mb-2" />
            <h3 className="font-semibold">{t('profile.title')}</h3>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              {t('profile.description')}
            </p>
          </div>
        </Link>
      </div>

      {/* AI Diagnostics */}
      <SettingsSection
        title={t('diagnostics.title')}
        icon={<span className="text-2xl">🔍</span>}
        description={t('diagnostics.description')}
      >
        <div className="grid grid-cols-2 gap-4 py-4">
          <div className="p-4 rounded-lg bg-secondary/50">
            <p className="text-sm font-medium text-muted-foreground mb-1">{t('diagnostics.configuredProvider')}</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">{t('diagnostics.apiStatus')}</p>
            <div className="flex items-center gap-2">
              {status === 'success' && <CheckCircle className="text-green-500 w-5 h-5" />}
              {status === 'error' && <XCircle className="text-red-500 w-5 h-5" />}
              <span className={`text-sm font-medium ${status === 'success' ? 'text-green-600 dark:text-green-400' :
                status === 'error' ? 'text-red-600 dark:text-red-400' :
                  'text-gray-600'
                }`}>
                {status === 'success' ? t('diagnostics.operational') :
                  status === 'error' ? t('diagnostics.errorStatus') :
                    t('diagnostics.checking')}
              </span>
            </div>
          </div>
        </div>

        {result && (
          <div className="space-y-2 mt-4">
            <h3 className="text-sm font-medium">{t('diagnostics.testDetails')}</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 dark:bg-red-950 dark:text-red-100 dark:border-red-900'
              : 'bg-slate-950 text-slate-50'
              }`}>
              <pre>{JSON.stringify(result, null, 2)}</pre>
            </div>

            {status === 'error' && (
              <div className="text-sm text-red-600 dark:text-red-400 mt-2">
                <p className="font-bold">{t('diagnostics.troubleshootingTitle')}</p>
                <ul className="list-disc list-inside mt-1 space-y-1">
                  <li>{t('diagnostics.tip1')}</li>
                  <li>{t('diagnostics.tip2')}</li>
                  <li>{t('diagnostics.tip3')}</li>
                  <li>{t('diagnostics.tip4')}</li>
                </ul>
              </div>
            )}
          </div>
        )}

        <div className="mt-4 flex justify-end">
          <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" />}
            {t('general.testConnection')}
          </Button>
        </div>
      </SettingsSection>

      {/* Maintenance */}
      <SettingsSection
        title={t('settings.maintenance')}
        icon={<span className="text-2xl">🔧</span>}
        description={t('settings.maintenanceDescription')}
      >
        <div className="space-y-4 py-4">
          <div className="flex items-center justify-between p-4 border rounded-lg">
            <div>
              <h3 className="font-medium flex items-center gap-2">
                {t('settings.cleanTags')}
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                {t('settings.cleanTagsDescription')}
              </p>
            </div>
            <Button variant="secondary" onClick={handleCleanup} disabled={cleanupLoading}>
              {cleanupLoading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Database className="w-4 h-4 mr-2" />}
              {t('general.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">
                {t('settings.semanticIndexing')}
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                {t('settings.semanticIndexingDescription')}
              </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" />}
              {t('general.indexAll')}
            </Button>
          </div>
        </div>
      </SettingsSection>
    </div>
  )

}