import React from 'react';
import { Message, Icon, List } from 'semantic-ui-react';

/**
 * Maps Shippo error codes to user-friendly field labels and descriptions.
 */
const SHIPPO_ERROR_INFO = {
    unknown_street: {
        field: "Street Address",
        hint: "The street address could not be found. Please verify the street name and number."
    },
    invalid_postal_code: {
        field: "Postal Code",
        hint: "The postal code format is invalid for this country."
    },
    postal_code_not_found: {
        field: "Postal Code",
        hint: "The postal code does not exist. Please verify it is correct."
    },
    premise_number_missing: {
        field: "Street Number",
        hint: "A house or building number is required but missing from the address."
    },
    invalid_city_state_zip: {
        field: "City/State/ZIP",
        hint: "The combination of city, state, and ZIP code is invalid."
    },
    ambiguous_address: {
        field: "Address",
        hint: "The address matches multiple possible locations. Please provide more specific details."
    },
    invalid_state: {
        field: "State",
        hint: "The state or province code is not valid."
    },
    invalid_city: {
        field: "City",
        hint: "The city name could not be recognized."
    },
    invalid_country: {
        field: "Country",
        hint: "The country code is not valid."
    },
    address_not_found: {
        field: "Address",
        hint: "The complete address could not be found. Please verify all fields."
    },
    insufficient_address: {
        field: "Address",
        hint: "The address is incomplete. Please provide all required fields."
    }
};

/**
 * Gets a user-friendly icon for the error type.
 */
function getErrorIcon(code) {
    if (code.includes('postal') || code.includes('zip')) {
        return 'mail';
    }
    if (code.includes('street') || code.includes('premise') || code.includes('address')) {
        return 'map marker alternate';
    }
    if (code.includes('city') || code.includes('state') || code.includes('country')) {
        return 'globe';
    }
    return 'exclamation triangle';
}

/**
 * Component to display detailed Shippo address validation errors.
 *
 * @param {Object} props
 * @param {Array} props.shippoMessages - Array of Shippo message objects with code, text, and source
 */
export default function ShippoErrorDetails({ shippoMessages }) {
    if (!shippoMessages || shippoMessages.length === 0) {
        return null;
    }

    return (
        <Message warning>
            <Message.Header>
                <Icon name="map marker alternate" />
                Address Validation Issues
            </Message.Header>
            <List divided relaxed style={{ marginTop: '1em' }}>
                {shippoMessages.map((msg, index) => {
                    const code = msg.code || 'unknown';
                    const errorInfo = SHIPPO_ERROR_INFO[code] || {
                        field: "Address",
                        hint: msg.text || "Please verify the address information."
                    };

                    return (
                        <List.Item key={index}>
                            <List.Icon
                                name={getErrorIcon(code)}
                                size='large'
                                verticalAlign='middle'
                                color='orange'
                            />
                            <List.Content>
                                <List.Header>{errorInfo.field}</List.Header>
                                <List.Description>
                                    <p style={{ marginBottom: '0.5em' }}>
                                        {msg.text || errorInfo.hint}
                                    </p>
                                    {errorInfo.hint && msg.text && errorInfo.hint !== msg.text && (
                                        <p style={{ fontStyle: 'italic', color: '#666', marginBottom: '0.5em' }}>
                                            {errorInfo.hint}
                                        </p>
                                    )}
                                    <span style={{ fontSize: '0.85em', color: '#888' }}>
                                        Code: {code}
                                        {msg.source && ` | Source: ${msg.source}`}
                                    </span>
                                </List.Description>
                            </List.Content>
                        </List.Item>
                    );
                })}
            </List>
        </Message>
    );
}