"use client"

import React, { useState, useMemo } from "react"
import { Settings, Search, Pencil, Trash2, Check, X, Plus } from "lucide-react"
import * as yaml from "js-yaml"
import Editor from "@monaco-editor/react"
import { useTranslations } from "next-intl"
import { useColorTheme } from "@/hooks/use-color-theme"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { EngineEditDialog, EngineCreateDialog } from "@/components/scan/engine"
import { useEngines, useCreateEngine, useUpdateEngine, useDeleteEngine } from "@/hooks/use-engines"
import { cn } from "@/lib/utils"
import type { ScanEngine } from "@/types/engine.types"
import { MasterDetailSkeleton } from "@/components/ui/master-detail-skeleton"

/** Feature configuration item definition - corresponds to YAML configuration structure */
const FEATURE_LIST = [
  { key: "subdomain_discovery" },
  { key: "port_scan" },
  { key: "site_scan" },
  { key: "fingerprint_detect" },
  { key: "directory_scan" },
  { key: "url_fetch" },
  { key: "vuln_scan" },
] as const

type FeatureKey = typeof FEATURE_LIST[number]["key"]

/** Parse engine configuration to get enabled features */
function parseEngineFeatures(engine: ScanEngine): Record<FeatureKey, boolean> {
  const defaultFeatures: Record<FeatureKey, boolean> = {
    subdomain_discovery: false,
    port_scan: false,
    site_scan: false,
    fingerprint_detect: false,
    directory_scan: false,
    url_fetch: false,
    vuln_scan: false,
  }

  if (!engine.configuration) return defaultFeatures

  try {
    const config = yaml.load(engine.configuration) as Record<string, unknown>
    if (!config) return defaultFeatures

    return {
      subdomain_discovery: !!config.subdomain_discovery,
      port_scan: !!config.port_scan,
      site_scan: !!config.site_scan,
      fingerprint_detect: !!config.fingerprint_detect,
      directory_scan: !!config.directory_scan,
      url_fetch: !!config.url_fetch,
      vuln_scan: !!config.vuln_scan,
    }
  } catch {
    return defaultFeatures
  }
}

/** Calculate the number of enabled features */
function countEnabledFeatures(engine: ScanEngine) {
  const features = parseEngineFeatures(engine)
  return Object.values(features).filter(Boolean).length
}

/**
 * Scan engine page
 */
export default function ScanEnginePage() {
  const [selectedId, setSelectedId] = useState<number | null>(null)
  const [searchQuery, setSearchQuery] = useState("")
  const [editingEngine, setEditingEngine] = useState<ScanEngine | null>(null)
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [engineToDelete, setEngineToDelete] = useState<ScanEngine | null>(null)

  const { currentTheme } = useColorTheme()
  
  // Internationalization
  const tCommon = useTranslations("common")
  const tConfirm = useTranslations("common.confirm")
  const tNav = useTranslations("navigation")
  const tEngine = useTranslations("scan.engine")

  // API Hooks
  const { data: engines = [], isLoading } = useEngines()
  const createEngineMutation = useCreateEngine()
  const updateEngineMutation = useUpdateEngine()
  const deleteEngineMutation = useDeleteEngine()

  // Filter engine list
  const filteredEngines = useMemo(() => {
    if (!searchQuery.trim()) return engines
    const query = searchQuery.toLowerCase()
    return engines.filter((e) => e.name.toLowerCase().includes(query))
  }, [engines, searchQuery])

  // Selected engine
  const selectedEngine = useMemo(() => {
    if (!selectedId) return null
    return engines.find((e) => e.id === selectedId) || null
  }, [selectedId, engines])

  // Selected engine's feature status
  const selectedFeatures = useMemo(() => {
    if (!selectedEngine) return null
    return parseEngineFeatures(selectedEngine)
  }, [selectedEngine])

  const handleEdit = (engine: ScanEngine) => {
    setEditingEngine(engine)
    setIsEditDialogOpen(true)
  }

  const handleSaveYaml = async (engineId: number, yamlContent: string) => {
    await updateEngineMutation.mutateAsync({
      id: engineId,
      data: { configuration: yamlContent },
    })
  }

  const handleDelete = (engine: ScanEngine) => {
    setEngineToDelete(engine)
    setDeleteDialogOpen(true)
  }

  const confirmDelete = () => {
    if (!engineToDelete) return
    deleteEngineMutation.mutate(engineToDelete.id, {
      onSuccess: () => {
        if (selectedId === engineToDelete.id) {
          setSelectedId(null)
        }
        setDeleteDialogOpen(false)
        setEngineToDelete(null)
      },
    })
  }

  const handleCreateEngine = async (name: string, yamlContent: string) => {
    await createEngineMutation.mutateAsync({
      name,
      configuration: yamlContent,
    })
  }

  // Loading state
  if (isLoading) {
    return <MasterDetailSkeleton title={tNav("scanEngine")} listItemCount={4} />
  }

  return (
    <div className="flex flex-col h-full">
      {/* Top: Title + Search + Create button */}
      <div className="flex items-center justify-between gap-4 px-4 py-4 lg:px-6">
        <h1 className="text-2xl font-bold shrink-0">{tNav("scanEngine")}</h1>
        <div className="flex items-center gap-2 flex-1 max-w-md">
          <div className="relative flex-1">
            <Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              placeholder={tEngine("searchPlaceholder")}
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-8"
            />
          </div>
        </div>
        <Button onClick={() => setIsCreateDialogOpen(true)}>
          <Plus className="h-4 w-4 mr-1" />
          {tEngine("createEngine")}
        </Button>
      </div>

      <Separator />

      {/* Main: Left list + Right details */}
      <div className="flex flex-1 min-h-0">
        {/* Left: Engine list */}
        <div className="w-72 lg:w-80 border-r flex flex-col">
          <div className="px-4 py-3 border-b">
            <h2 className="text-sm font-medium text-muted-foreground">
              {tEngine("engineList")} ({filteredEngines.length})
            </h2>
          </div>
          <ScrollArea className="flex-1">
            {isLoading ? (
              <div className="p-4 text-sm text-muted-foreground">{tCommon("loading")}</div>
            ) : filteredEngines.length === 0 ? (
              <div className="p-4 text-sm text-muted-foreground">
                {searchQuery ? tEngine("noMatchingEngine") : tEngine("noEngines")}
              </div>
            ) : (
              <div className="p-2">
                {filteredEngines.map((engine) => (
                  <button
                    key={engine.id}
                    onClick={() => setSelectedId(engine.id)}
                    className={cn(
                      "w-full text-left rounded-lg px-3 py-2.5 transition-colors",
                      selectedId === engine.id
                        ? "bg-primary/10 text-primary"
                        : "hover:bg-muted"
                    )}
                  >
                    <div className="font-medium text-sm truncate">
                      {engine.name}
                    </div>
                    <div className="text-xs text-muted-foreground mt-0.5">
                      {tEngine("featuresEnabled", { count: countEnabledFeatures(engine) })}
                    </div>
                  </button>
                ))}
              </div>
            )}
          </ScrollArea>
        </div>

        {/* Right: Engine details */}
        <div className="flex-1 flex flex-col min-w-0">
          {selectedEngine && selectedFeatures ? (
            <>
              {/* Details header */}
              <div className="px-6 py-4 border-b">
                <div className="flex items-start gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 shrink-0">
                    <Settings className="h-5 w-5 text-primary" />
                  </div>
                  <div className="min-w-0 flex-1">
                    <h2 className="text-lg font-semibold truncate">
                      {selectedEngine.name}
                    </h2>
                    <p className="text-sm text-muted-foreground mt-0.5">
                      {tEngine("updatedAt")} {new Date(selectedEngine.updatedAt).toLocaleString()}
                    </p>
                  </div>
                  <Badge variant="outline">
                    {tEngine("featuresCount", { count: countEnabledFeatures(selectedEngine) })}
                  </Badge>
                </div>
              </div>

              {/* Details content */}
              <div className="flex-1 flex flex-col min-h-0 p-6 gap-6">
                {/* Feature status */}
                <div className="shrink-0">
                  <h3 className="text-sm font-medium mb-3">{tEngine("enabledFeatures")}</h3>
                  <div className="rounded-lg border">
                    <div className="grid grid-cols-3 gap-px bg-muted">
                      {FEATURE_LIST.map((feature) => {
                        const enabled = selectedFeatures[feature.key as keyof typeof selectedFeatures]
                        return (
                          <div
                            key={feature.key}
                            className={cn(
                              "flex items-center gap-2 px-3 py-2.5 bg-background",
                              enabled ? "text-foreground" : "text-muted-foreground"
                            )}
                          >
                            {enabled ? (
                              <Check className="h-4 w-4 text-green-600 shrink-0" />
                            ) : (
                              <X className="h-4 w-4 text-muted-foreground/50 shrink-0" />
                            )}
                            <span className="text-sm truncate">{tEngine(`features.${feature.key}`)}</span>
                          </div>
                        )
                      })}
                    </div>
                  </div>
                </div>

                {/* Configuration preview */}
                {selectedEngine.configuration && (
                  <div className="flex-1 flex flex-col min-h-0">
                    <h3 className="text-sm font-medium mb-3 shrink-0">{tEngine("configPreview")}</h3>
                    <div className="flex-1 rounded-lg border overflow-hidden min-h-0">
                      <Editor
                        height="100%"
                        defaultLanguage="yaml"
                        value={selectedEngine.configuration}
                        options={{
                          readOnly: true,
                          minimap: { enabled: false },
                          fontSize: 12,
                          lineNumbers: "off",
                          scrollBeyondLastLine: false,
                          automaticLayout: true,
                          folding: true,
                          wordWrap: "on",
                          padding: { top: 12, bottom: 12 },
                        }}
                        theme={currentTheme.isDark ? "vs-dark" : "light"}
                      />
                    </div>
                  </div>
                )}
              </div>

              {/* Action buttons */}
              <div className="px-6 py-4 border-t flex items-center gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => handleEdit(selectedEngine)}
                >
                  <Pencil className="h-4 w-4 mr-1.5" />
                  {tEngine("editConfig")}
                </Button>
                <div className="flex-1" />
                <Button
                  variant="outline"
                  size="sm"
                  className="text-destructive hover:text-destructive"
                  onClick={() => handleDelete(selectedEngine)}
                  disabled={deleteEngineMutation.isPending}
                >
                  <Trash2 className="h-4 w-4 mr-1.5" />
                  {tCommon("actions.delete")}
                </Button>
              </div>
            </>
          ) : (
            // Unselected state
            <div className="flex-1 flex items-center justify-center">
              <div className="text-center text-muted-foreground">
                <Settings className="h-12 w-12 mx-auto mb-3 opacity-50" />
                <p className="text-sm">{tEngine("selectEngineHint")}</p>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Edit engine dialog */}
      <EngineEditDialog
        engine={editingEngine}
        open={isEditDialogOpen}
        onOpenChange={setIsEditDialogOpen}
        onSave={handleSaveYaml}
      />

      {/* Create engine dialog */}
      <EngineCreateDialog
        open={isCreateDialogOpen}
        onOpenChange={setIsCreateDialogOpen}
        onSave={handleCreateEngine}
      />

      {/* Delete confirmation dialog */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{tConfirm("deleteTitle")}</AlertDialogTitle>
            <AlertDialogDescription>
              {tConfirm("deleteEngineMessage", { name: engineToDelete?.name ?? "" })}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>{tCommon("actions.cancel")}</AlertDialogCancel>
            <AlertDialogAction 
              onClick={confirmDelete} 
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              disabled={deleteEngineMutation.isPending}
            >
              {deleteEngineMutation.isPending ? tConfirm("deleting") : tCommon("actions.delete")}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}

