import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { GenericModal } from "../ui/GenericModal";
import { TextField, Typography, Box, Button, IconButton, InputAdornment } from "@mui/material";
import { Visibility, VisibilityOff } from '@mui/icons-material';
import { modalStyle } from "../recorder/AddWhereCondModal";
import { useGlobalInfoStore } from '../../context/globalInfo';
import { getStoredRecording, updateRecording } from '../../api/storage';
import { WhereWhatPair } from 'maxun-core';

// Base interfaces for robot data structure
interface RobotMeta {
    name: string;
    id: string;
    createdAt: string;
    pairs: number;
    updatedAt: string;
    params: any[];
}

interface RobotWorkflow {
    workflow: WhereWhatPair[];
}

interface ScheduleConfig {
    runEvery: number;
    runEveryUnit: 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS';
    startFrom: 'SUNDAY' | 'MONDAY' | 'TUESDAY' | 'WEDNESDAY' | 'THURSDAY' | 'FRIDAY' | 'SATURDAY';
    atTimeStart?: string;
    atTimeEnd?: string;
    timezone: string;
    lastRunAt?: Date;
    nextRunAt?: Date;
    cronExpression?: string;
}

export interface RobotSettings {
    id: string;
    userId?: number;
    recording_meta: RobotMeta;
    recording: RobotWorkflow;
    google_sheet_email?: string | null;
    google_sheet_name?: string | null;
    google_sheet_id?: string | null;
    google_access_token?: string | null;
    google_refresh_token?: string | null;
    schedule?: ScheduleConfig | null;
    isLogin?: boolean;
}

interface RobotSettingsProps {
    isOpen: boolean;
    handleStart: (settings: RobotSettings) => void;
    handleClose: () => void;
    initialSettings?: RobotSettings | null;
}

// Enhanced interfaces for credential handling
interface CredentialInfo {
    value: string;
    type: string;
}

interface Credentials {
    [key: string]: CredentialInfo;
}

interface CredentialVisibility {
    [key: string]: boolean;
}

interface GroupedCredentials {
    passwords: string[];
    emails: string[];
    usernames: string[];
    others: string[];
}

export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
    const { t } = useTranslation();
    const [robot, setRobot] = useState<RobotSettings | null>(null);
    const [credentials, setCredentials] = useState<Credentials>({});
    const { recordingId, notify } = useGlobalInfoStore();
    const [credentialGroups, setCredentialGroups] = useState<GroupedCredentials>({ 
        passwords: [], 
        emails: [],
        usernames: [],
        others: [] 
    });
    const [showPasswords, setShowPasswords] = useState<CredentialVisibility>({});

    const isEmailPattern = (value: string): boolean => {
        return value.includes('@');
    };
    
    const isUsernameSelector = (selector: string): boolean => {
        return selector.toLowerCase().includes('username') || 
               selector.toLowerCase().includes('user') ||
               selector.toLowerCase().includes('email');
    };

    const determineCredentialType = (selector: string, info: CredentialInfo): 'password' | 'email' | 'username' | 'other' => {
        // Check for password type first
        if (info.type === 'password') {
            return 'password';
        }
        
        // Check for email patterns in the value or selector
        if (isEmailPattern(info.value) || selector.toLowerCase().includes('email')) {
            return 'email';
        }
        
        // Check for username patterns in the selector
        if (isUsernameSelector(selector)) {
            return 'username';
        }
        
        // If no specific pattern is matched, classify as other
        return 'other';
    };
    
    useEffect(() => {
        if (isOpen) {
            getRobot();
        }
    }, [isOpen]);

    useEffect(() => {
        if (robot?.recording?.workflow) {
            const extractedCredentials = extractInitialCredentials(robot.recording.workflow);
            setCredentials(extractedCredentials);
            setCredentialGroups(groupCredentialsByType(extractedCredentials));
        }
    }, [robot]);

    const extractInitialCredentials = (workflow: any[]): Credentials => {
        const credentials: Credentials = {};

        const isPrintableCharacter = (char: string): boolean => {
            return char.length === 1 && !!char.match(/^[\x20-\x7E]$/);
        };
        
        workflow.forEach(step => {
            if (!step.what) return;
            
            step.what.forEach((action: any) => {
                if (
                    (action.action === 'type' || action.action === 'press') && 
                    action.args?.length >= 2 && 
                    typeof action.args[1] === 'string'
                ) {
                    const currentSelector: string = action.args[0];
                    const character: string = action.args[1];
                    const inputType: string = action.args[2] || '';
                    
                    if (!credentials.hasOwnProperty(currentSelector)) {
                        credentials[currentSelector] = {
                            value: '',
                            type: inputType
                        };
                    }
                    
                    if (isPrintableCharacter(character)) {
                        credentials[currentSelector].value += character;
                    }
                }
            });
        });
        
        return credentials;
    };

    const groupCredentialsByType = (credentials: Credentials): GroupedCredentials => {
        return Object.entries(credentials).reduce((acc: GroupedCredentials, [selector, info]) => {
            const credentialType = determineCredentialType(selector, info);
            
            switch (credentialType) {
                case 'password':
                    acc.passwords.push(selector);
                    break;
                case 'email':
                    acc.emails.push(selector);
                    break;
                case 'username':
                    acc.usernames.push(selector);
                    break;
                default:
                    acc.others.push(selector);
            }
            
            return acc;
        }, { passwords: [], emails: [], usernames: [], others: [] });
    };

    const getRobot = async () => {
        if (recordingId) {
            const robot = await getStoredRecording(recordingId);
            setRobot(robot);
        } else {
            notify('error', t('robot_edit.notifications.update_failed'));
        }
    };

    const handleClickShowPassword = (selector: string) => {
        setShowPasswords(prev => ({
            ...prev,
            [selector]: !prev[selector]
        }));
    };

    const handleRobotNameChange = (newName: string) => {
        setRobot((prev) =>
            prev ? { ...prev, recording_meta: { ...prev.recording_meta, name: newName } } : prev
        );
    };

    const handleCredentialChange = (selector: string, value: string) => {
        setCredentials(prev => ({
            ...prev,
            [selector]: {
                ...prev[selector],
                value
            }
        }));
    };

    const handleLimitChange = (newLimit: number) => {
        setRobot((prev) => {
            if (!prev) return prev;

            const updatedWorkflow = [...prev.recording.workflow];
            if (
                updatedWorkflow.length > 0 &&
                updatedWorkflow[0]?.what &&
                updatedWorkflow[0].what.length > 0 &&
                updatedWorkflow[0].what[0].args &&
                updatedWorkflow[0].what[0].args.length > 0 &&
                updatedWorkflow[0].what[0].args[0]
            ) {
                updatedWorkflow[0].what[0].args[0].limit = newLimit;
            }

            return { ...prev, recording: { ...prev.recording, workflow: updatedWorkflow } };
        });
    };

    const renderAllCredentialFields = () => {
        return (
            <>
                {/* Render username credentials */}
                {renderCredentialFields(
                    credentialGroups.usernames, 
                    t('Username Credentials'),
                    'text'  // Always show usernames as text
                )}
                
                {/* Render email credentials */}
                {renderCredentialFields(
                    credentialGroups.emails, 
                    t('Email Credentials'),
                    'text'  // Always show emails as text
                )}
                
                {/* Render password credentials */}
                {renderCredentialFields(
                    credentialGroups.passwords, 
                    t('Password Credentials'),
                    'password'  // Use password masking
                )}
                
                {/* Render other credentials */}
                {renderCredentialFields(
                    credentialGroups.others, 
                    t('Other Credentials'),
                    'text'  // Show other credentials as text
                )}
            </>
        );
    };

    const renderCredentialFields = (selectors: string[], headerText: string, defaultType: 'text' | 'password' = 'text') => {
        if (selectors.length === 0) return null;
    
        return (
            <>
                <Typography variant="h6" style={{ marginBottom: '20px'}}>
                    {headerText}
                </Typography>
                {selectors.map((selector) => (
                    <TextField
                        key={selector}
                        type={showPasswords[selector] ? 'text' : defaultType}
                        label={`Credential for ${selector}`}
                        value={credentials[selector]?.value || ''}
                        onChange={(e) => handleCredentialChange(selector, e.target.value)}
                        style={{ marginBottom: '20px' }}
                        InputProps={{
                            // Only show visibility toggle for password fields
                            endAdornment: defaultType === 'password' ? (
                                <InputAdornment position="end">
                                    <IconButton
                                        aria-label="toggle password visibility"
                                        onClick={() => handleClickShowPassword(selector)}
                                        edge="end"
                                    >
                                        {showPasswords[selector] ? <Visibility /> : <VisibilityOff />}
                                    </IconButton>
                                </InputAdornment>
                            ) : undefined,
                        }}
                    />
                ))}
            </>
        );
    };

    const handleSave = async () => {
        if (!robot) return;

        try {
            const credentialsForPayload = Object.entries(credentials).reduce((acc, [selector, info]) => {
                const enforceType = info.type === 'password' ? 'password' : 'text';

                acc[selector] = {
                    value: info.value,
                    type: enforceType
                };
                return acc;
            }, {} as Record<string, CredentialInfo>);

            const payload = {
                name: robot.recording_meta.name,
                limit: robot.recording.workflow[0]?.what[0]?.args?.[0]?.limit,
                credentials: credentialsForPayload,
            };

            const success = await updateRecording(robot.recording_meta.id, payload);

            if (success) {
                notify('success', t('robot_edit.notifications.update_success'));
                handleStart(robot);
                handleClose();

                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            } else {
                notify('error', t('robot_edit.notifications.update_failed'));
            }
        } catch (error) {
            notify('error', t('robot_edit.notifications.update_error'));
            console.error('Error updating robot:', error);
        }
    };

    return (
        <GenericModal
            isOpen={isOpen}
            onClose={handleClose}
            modalStyle={modalStyle}
        >
            <>
                <Typography variant="h5" style={{ marginBottom: '20px' }}>
                    {t('robot_edit.title')}
                </Typography>
                <Box style={{ display: 'flex', flexDirection: 'column' }}>
                    {robot && (
                        <>
                            <TextField
                                label={t('robot_edit.change_name')}
                                key="Robot Name"
                                type='text'
                                value={robot.recording_meta.name}
                                onChange={(e) => handleRobotNameChange(e.target.value)}
                                style={{ marginBottom: '20px' }}
                            />
                            
                            {robot.recording.workflow?.[0]?.what?.[0]?.args?.[0]?.limit !== undefined && (
                                <TextField
                                    label={t('robot_edit.robot_limit')}
                                    type="number"
                                    value={robot.recording.workflow[0].what[0].args[0].limit || ''}
                                    onChange={(e) => {
                                        const value = parseInt(e.target.value, 10);
                                        if (value >= 1) {
                                            handleLimitChange(value);
                                        }
                                    }}
                                    inputProps={{ min: 1 }}
                                    style={{ marginBottom: '20px' }}
                                />
                            )}

                            {(robot.isLogin || Object.keys(credentials).length > 0) && (
                                <>
                                    {renderAllCredentialFields()}
                                </>
                            )}

                            <Box mt={2} display="flex" justifyContent="flex-end">
                                <Button variant="contained" color="primary" onClick={handleSave}>
                                    {t('robot_edit.save')}
                                </Button>
                                <Button
                                    onClick={handleClose}
                                    color="primary"
                                    variant="outlined"
                                    style={{ marginLeft: '10px' }}
                                    sx={{
                                        color: '#ff00c3 !important',
                                        borderColor: '#ff00c3 !important',
                                        backgroundColor: 'whitesmoke !important',
                                    }}>
                                    {t('robot_edit.cancel')}
                                </Button>
                            </Box>
                        </>
                    )}
                </Box>
            </>
        </GenericModal>
    );
};