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, Divider, Alert, AlertIcon,
    InputGroup, InputRightElement, IconButton, Badge, Link,
    useColorModeValue, Spinner, Textarea
} from "@chakra-ui/react";
import { FiEye, FiEyeOff, FiSave, FiLogOut, FiArrowLeft } from "react-icons/fi";
import { CustomHead } from "@components";

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

const DEFAULT_MODEL = "jigsawstack/text-translate:454df4c49941c05dea05175bd37686d0872c73c1f9366d1c2505db32ade52a89";

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
    });
    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 cardBg = useColorModeValue("white", "gray.800");
    const borderCol = useColorModeValue("gray.200", "gray.600");

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

    // Load settings when authed
    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();
            if (res.ok) {
                setTestResult(`✓ Success: "${d.translation}"`);
            } else {
                setTestResult(`✗ Error: ${d.error}`);
            }
        } catch {
            setTestResult("✗ Network error");
        } finally {
            setTestLoading(false);
        }
    };

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

    // Login form
    if (!authed) {
        return (
            <>
                <CustomHead home={false} />
                <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>
            </>
        );
    }

    // Admin panel
    return (
        <>
            <CustomHead home={false} />
            <Box w="full" maxW="700px" mx="auto" px={4} pb={10}>
                <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>

                            <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>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 for the JigsawStack translation model. Get yours at{" "}
                                    <Link href="https://jigsawstack.com" isExternal color="lingva.400">
                                        jigsawstack.com
                                    </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>
                                    Replicate model version string. Default uses the JigsawStack text-translate model.
                                </FormHelperText>
                            </FormControl>

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

                    {/* Security Section */}
                    <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 password.</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>
        </>
    );
};

export default AdminPage;