import { useState, useEffect, FormEvent } from "react";
import { NextPage } from "next";
import NextLink from "next/link";
import {
    Box, VStack, HStack, Heading, Text, Input, Button, Switch,
    FormControl, FormLabel, FormHelperText, Alert, AlertIcon,
    InputGroup, InputRightElement, IconButton, Badge, Link,
    useColorModeValue, Spinner, Textarea, RadioGroup, Radio, Code
} from "@chakra-ui/react";
import { FiEye, FiEyeOff, FiSave, FiLogOut, FiArrowLeft } from "react-icons/fi";
import { CustomHead } from "@components";

type ReplicateMode = "cloud" | "local";

type Settings = {
    replicateApiToken: string;
    jigsawApiKey: string;
    modelVersion: string;
    replicateEnabled: boolean;
    replicateMode: ReplicateMode;
    localEndpoint: string;
};

const DEFAULT_MODEL = "jigsawstack/text-translate:454df4c49941c05dea05175bd37686d0872c73c1f9366d1c2505db32ade52a89";
const DEFAULT_LOCAL_ENDPOINT = "http://localhost:5030/predictions";

const AdminPage: NextPage = () => {
    const [authed, setAuthed] = useState<boolean | null>(null);
    const [password, setPassword] = useState("");
    const [loginError, setLoginError] = useState("");
    const [loginLoading, setLoginLoading] = useState(false);

    const [settings, setSettings] = useState<Settings>({
        replicateApiToken: "",
        jigsawApiKey: "",
        modelVersion: DEFAULT_MODEL,
        replicateEnabled: false,
        replicateMode: "cloud",
        localEndpoint: DEFAULT_LOCAL_ENDPOINT
    });
    const [newPassword, setNewPassword] = useState("");
    const [saveMsg, setSaveMsg] = useState<{ type: "success" | "error"; text: string } | null>(null);
    const [saving, setSaving] = useState(false);
    const [showToken, setShowToken] = useState(false);
    const [showJigsawKey, setShowJigsawKey] = useState(false);
    const [testResult, setTestResult] = useState<string | null>(null);
    const [testLoading, setTestLoading] = useState(false);

    const pageBg = useColorModeValue("gray.50", "gray.900");
    const cardBg = useColorModeValue("white", "gray.800");
    const borderCol = useColorModeValue("gray.200", "gray.600");
    const codeBg = useColorModeValue("gray.100", "gray.700");

    useEffect(() => {
        fetch("/api/admin/auth")
            .then(r => r.json())
            .then(d => setAuthed(d.authenticated))
            .catch(() => setAuthed(false));
    }, []);

    useEffect(() => {
        if (!authed) return;
        fetch("/api/admin/settings")
            .then(r => r.json())
            .then(d => setSettings(s => ({ ...s, ...d })))
            .catch(() => {});
    }, [authed]);

    const login = async (e: FormEvent) => {
        e.preventDefault();
        setLoginLoading(true);
        setLoginError("");
        try {
            const res = await fetch("/api/admin/auth", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ password })
            });
            if (res.ok) setAuthed(true);
            else {
                const d = await res.json();
                setLoginError(d.error ?? "Login failed");
            }
        } catch {
            setLoginError("Network error");
        } finally {
            setLoginLoading(false);
        }
    };

    const logout = async () => {
        await fetch("/api/admin/auth", { method: "DELETE" });
        setAuthed(false);
        setPassword("");
    };

    const save = async (e: FormEvent) => {
        e.preventDefault();
        setSaving(true);
        setSaveMsg(null);
        try {
            const body: Record<string, unknown> = { ...settings };
            if (newPassword.length >= 6) body.newPassword = newPassword;
            const res = await fetch("/api/admin/settings", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(body)
            });
            const d = await res.json();
            if (res.ok) {
                setSettings(s => ({ ...s, ...d }));
                setSaveMsg({ type: "success", text: "Settings saved successfully" });
                setNewPassword("");
            } else {
                setSaveMsg({ type: "error", text: d.error ?? "Save failed" });
            }
        } catch {
            setSaveMsg({ type: "error", text: "Network error" });
        } finally {
            setSaving(false);
        }
    };

    const testTranslation = async () => {
        setTestLoading(true);
        setTestResult(null);
        try {
            const res = await fetch("/api/translate/replicate", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ text: "Hello, world!", targetLanguage: "es" })
            });
            const d = await res.json();
            setTestResult(res.ok ? `✓ "${d.translation}"` : `✗ ${d.error}`);
        } catch {
            setTestResult("✗ Network error");
        } finally {
            setTestLoading(false);
        }
    };

    if (authed === null) {
        return (
            <Box w="full" minH="100%" bg={pageBg} display="flex" justifyContent="center" pt={20}>
                <Spinner size="xl" color="lingva.400" />
            </Box>
        );
    }

    if (!authed) {
        return (
            <>
                <CustomHead home={false} />
                <Box w="full" minH="100%" bg={pageBg}>
                <Box
                    w="full" maxW="400px" mx="auto" mt={10} p={8}
                    bg={cardBg} borderWidth={1} borderColor={borderCol}
                    borderRadius="xl" boxShadow="md"
                >
                    <VStack spacing={6} as="form" onSubmit={login}>
                        <Heading size="md">Admin Login</Heading>
                        {loginError && (
                            <Alert status="error" borderRadius="md">
                                <AlertIcon />{loginError}
                            </Alert>
                        )}
                        <FormControl isRequired>
                            <FormLabel>Password</FormLabel>
                            <Input
                                type="password"
                                value={password}
                                onChange={e => setPassword(e.target.value)}
                                autoFocus
                                placeholder="Admin password"
                            />
                            <FormHelperText>Default: admin (set ADMIN_PASSWORD env var)</FormHelperText>
                        </FormControl>
                        <Button type="submit" colorScheme="lingva" w="full" isLoading={loginLoading}>
                            Login
                        </Button>
                        <NextLink href="/" passHref>
                            <Link fontSize="sm">← Back to translator</Link>
                        </NextLink>
                    </VStack>
                </Box>
                </Box>
            </>
        );
    }

    return (
        <>
            <CustomHead home={false} />
            <Box w="full" minH="100%" bg={pageBg}>
            <Box w="full" maxW="700px" mx="auto" px={4} pb={10} pt={2}>
                <HStack justify="space-between" mb={6}>
                    <NextLink href="/" passHref>
                        <Button as={Link} leftIcon={<FiArrowLeft />} variant="ghost" size="sm">Back</Button>
                    </NextLink>
                    <Heading size="md">Admin Settings</Heading>
                    <Button leftIcon={<FiLogOut />} variant="ghost" size="sm" onClick={logout}>Logout</Button>
                </HStack>

                <VStack spacing={6} as="form" onSubmit={save}>

                    {/* ── Replicate Section ── */}
                    <Box w="full" p={6} bg={cardBg} borderWidth={1} borderColor={borderCol} borderRadius="xl">
                        <HStack mb={4}>
                            <Heading size="sm">Replicate AI Translation</Heading>
                            <Badge colorScheme={settings.replicateEnabled ? "green" : "gray"}>
                                {settings.replicateEnabled ? "Enabled" : "Disabled"}
                            </Badge>
                        </HStack>

                        <VStack spacing={4} align="stretch">
                            <FormControl display="flex" alignItems="center">
                                <FormLabel mb={0}>Enable Replicate Translation</FormLabel>
                                <Switch
                                    colorScheme="lingva"
                                    isChecked={settings.replicateEnabled}
                                    onChange={e => setSettings(s => ({ ...s, replicateEnabled: e.target.checked }))}
                                />
                            </FormControl>

                            {/* Mode selector */}
                            <FormControl>
                                <FormLabel>Translation Backend</FormLabel>
                                <RadioGroup
                                    value={settings.replicateMode}
                                    onChange={v => setSettings(s => ({ ...s, replicateMode: v as ReplicateMode }))}
                                >
                                    <HStack spacing={6}>
                                        <Radio value="cloud" colorScheme="lingva">
                                            <VStack align="start" spacing={0}>
                                                <Text fontSize="sm" fontWeight="semibold">Replicate Cloud</Text>
                                                <Text fontSize="xs" color="gray.500">Uses replicate.com API</Text>
                                            </VStack>
                                        </Radio>
                                        <Radio value="local" colorScheme="lingva">
                                            <VStack align="start" spacing={0}>
                                                <Text fontSize="sm" fontWeight="semibold">Local Docker (Cog)</Text>
                                                <Text fontSize="xs" color="gray.500">Uses local container</Text>
                                            </VStack>
                                        </Radio>
                                    </HStack>
                                </RadioGroup>
                            </FormControl>

                            {/* Cloud fields */}
                            {settings.replicateMode === "cloud" && (
                                <>
                                    <FormControl>
                                        <FormLabel>Replicate API Token</FormLabel>
                                        <InputGroup>
                                            <Input
                                                type={showToken ? "text" : "password"}
                                                value={settings.replicateApiToken}
                                                onChange={e => setSettings(s => ({ ...s, replicateApiToken: e.target.value }))}
                                                placeholder="r8_..."
                                                fontFamily="mono"
                                                fontSize="sm"
                                            />
                                            <InputRightElement>
                                                <IconButton size="xs" variant="ghost"
                                                    aria-label="Toggle visibility"
                                                    icon={showToken ? <FiEyeOff /> : <FiEye />}
                                                    onClick={() => setShowToken(v => !v)}
                                                />
                                            </InputRightElement>
                                        </InputGroup>
                                        <FormHelperText>
                                            Get your token at{" "}
                                            <Link href="https://replicate.com/account/api-tokens" isExternal color="lingva.400">
                                                replicate.com/account/api-tokens
                                            </Link>
                                        </FormHelperText>
                                    </FormControl>

                                    <FormControl>
                                        <FormLabel>Model Version</FormLabel>
                                        <Textarea
                                            value={settings.modelVersion}
                                            onChange={e => setSettings(s => ({ ...s, modelVersion: e.target.value }))}
                                            fontFamily="mono"
                                            fontSize="xs"
                                            rows={2}
                                            placeholder={DEFAULT_MODEL}
                                        />
                                        <FormHelperText>
                                            Format: <Code fontSize="xs">owner/model:hash</Code> — the hash after the colon is extracted automatically.
                                        </FormHelperText>
                                    </FormControl>
                                </>
                            )}

                            {/* Local fields */}
                            {settings.replicateMode === "local" && (
                                <>
                                    <Box bg={codeBg} p={4} borderRadius="md" fontSize="sm">
                                        <Text fontWeight="semibold" mb={2}>Start the local model container:</Text>
                                        <Code display="block" fontSize="xs" whiteSpace="pre" overflowX="auto">
                                            {`docker run -d -p 5030:5000 \\\n  r8.im/jigsawstack/text-translate@sha256:454df4c49941c05dea05175bd37686d0872c73c1f9366d1c2505db32ade52a89`}
                                        </Code>
                                    </Box>
                                    <FormControl>
                                        <FormLabel>Local Model Endpoint</FormLabel>
                                        <Input
                                            value={settings.localEndpoint}
                                            onChange={e => setSettings(s => ({ ...s, localEndpoint: e.target.value }))}
                                            placeholder={DEFAULT_LOCAL_ENDPOINT}
                                            fontFamily="mono"
                                            fontSize="sm"
                                        />
                                        <FormHelperText>
                                            Default: <Code fontSize="xs">{DEFAULT_LOCAL_ENDPOINT}</Code> (container port 5000 mapped to host 5030)
                                        </FormHelperText>
                                    </FormControl>
                                </>
                            )}

                            {/* JigsawStack key — needed in both modes */}
                            <FormControl>
                                <FormLabel>JigsawStack API Key</FormLabel>
                                <InputGroup>
                                    <Input
                                        type={showJigsawKey ? "text" : "password"}
                                        value={settings.jigsawApiKey}
                                        onChange={e => setSettings(s => ({ ...s, jigsawApiKey: e.target.value }))}
                                        placeholder="sk_..."
                                        fontFamily="mono"
                                        fontSize="sm"
                                    />
                                    <InputRightElement>
                                        <IconButton size="xs" variant="ghost"
                                            aria-label="Toggle visibility"
                                            icon={showJigsawKey ? <FiEyeOff /> : <FiEye />}
                                            onClick={() => setShowJigsawKey(v => !v)}
                                        />
                                    </InputRightElement>
                                </InputGroup>
                                <FormHelperText>
                                    Required by the JigsawStack model in both cloud and local modes.{" "}
                                    <Link href="https://jigsawstack.com" isExternal color="lingva.400">Get yours →</Link>
                                </FormHelperText>
                            </FormControl>

                            <HStack>
                                <Button
                                    size="sm" variant="outline" colorScheme="lingva"
                                    onClick={testTranslation} isLoading={testLoading}
                                    isDisabled={!settings.replicateEnabled || !settings.jigsawApiKey}
                                >
                                    Test Translation
                                </Button>
                                {testResult && (
                                    <Text fontSize="sm" color={testResult.startsWith("✓") ? "green.500" : "red.500"}>
                                        {testResult}
                                    </Text>
                                )}
                            </HStack>
                        </VStack>
                    </Box>

                    {/* ── Security ── */}
                    <Box w="full" p={6} bg={cardBg} borderWidth={1} borderColor={borderCol} borderRadius="xl">
                        <Heading size="sm" mb={4}>Security</Heading>
                        <FormControl>
                            <FormLabel>New Admin Password</FormLabel>
                            <Input
                                type="password"
                                value={newPassword}
                                onChange={e => setNewPassword(e.target.value)}
                                placeholder="Leave blank to keep current"
                                minLength={6}
                            />
                            <FormHelperText>Minimum 6 characters. Leave blank to keep current.</FormHelperText>
                        </FormControl>
                    </Box>

                    {saveMsg && (
                        <Alert status={saveMsg.type} borderRadius="md">
                            <AlertIcon />{saveMsg.text}
                        </Alert>
                    )}

                    <Button type="submit" colorScheme="lingva" leftIcon={<FiSave />} isLoading={saving} size="lg" w="full">
                        Save Settings
                    </Button>
                </VStack>
            </Box>
            </Box>
        </>
    );
};

export default AdminPage;