// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import * as React from 'react';
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import { Text } from "@coreai-ds/react-components";
import { Illicon } from "@coreai-ds/react-components";
import type { DotGridData } from "@coreai-ds/react-components";

interface EmptyStateProps {
    /** Optional Illicon or custom artwork displayed above the message. */
    illustration?: React.ReactNode;
    /** Main empty-state heading. */
    header: React.ReactNode;
    /** Optional supporting text explaining the state or the next step. */
    description?: React.ReactNode;
    /** Optional row of value propositions, metrics, or highlights. */
    metrics?: React.ReactNode;
    /** Optional row of cards, choices, integrations, or detailed content. */
    cards?: React.ReactNode;
    /** Optional row of primary and secondary actions. */
    actions?: React.ReactNode;
    /** Optional supporting links displayed after the actions. */
    links?: React.ReactNode;
}

const useEmptyStateStyles = makeStyles({
    root: {
        boxSizing: 'border-box',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        rowGap: tokens.spacingVerticalXL,
        width: '100%',
        minHeight: '400px', // no dimension token; preserves the empty-state canvas height
        paddingBlock: tokens.spacingVerticalXXXL,
        paddingInline: tokens.spacingHorizontalXXL,
        textAlign: 'center',
    },
    illustration: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: tokens.colorNeutralForeground3,
        fontSize: tokens.fontSizeHero800,
        lineHeight: 1,
    },
    copy: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        rowGap: tokens.spacingVerticalXS,
        maxWidth: '600px', // no dimension token; matches the Figma copy width
    },
    header: {
        marginBlock: 0,
    },
    description: {
        marginBlock: 0,
    },
    collection: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'center',
        gap: tokens.spacingHorizontalL,
        width: '100%',
    },
    actions: {
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'center',
        justifyContent: 'center',
        gap: tokens.spacingHorizontalS,
        width: '100%',
    },
    links: {
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'center',
        justifyContent: 'center',
        gap: tokens.spacingHorizontalS,
    },
});

function EmptyState({ illustration, header, description, metrics, cards, actions, links, }: EmptyStateProps) {
    const styles = useEmptyStateStyles();
    return (<div className={styles.root}>
      {illustration ? <div className={styles.illustration}>{illustration}</div> : null}

      <div className={styles.copy}>
        <Text as="h2" preset="heading4" foreground={1} className={styles.header}>
          {header}
        </Text>
        {description ? (<Text as="p" preset="body" foreground={2} className={styles.description}>
            {description}
          </Text>) : null}
      </div>

      {metrics ? <div className={styles.collection}>{metrics}</div> : null}
      {cards ? <div className={styles.collection}>{cards}</div> : null}
      {actions ? <div className={styles.actions}>{actions}</div> : null}
      {links ? <div className={styles.links}>{links}</div> : null}
    </div>);
}

// Generated once with iconToDotGrid at each source icon's native 24 x 24 resolution.
const illustrations = {
    agents: {
        rows: [
            '000000000000000000000000',
            '000000000000000000000000',
            '000000000000000000000000',
            '000000011111001110000000',
            '000000111111011111000000',
            '000001111111011011100000',
            '000001111110010011100000',
            '000011111110010011110000',
            '000011111110110111110000',
            '000111111100100111111000',
            '001111111100100111111000',
            '001111111101101111111100',
            '001111111001001111111100',
            '001111111001001111111100',
            '000111111011011111111000',
            '000011110011011111110000',
            '000011110010011111110000',
            '000001110110111111100000',
            '000001100110111111100000',
            '000000111100111111000000',
            '000000011001111110000000',
            '000000000000000000000000',
            '000000000000000000000000',
            '000000000000000000000000',
        ],
    },
    search: {
        rows: [
            '000000000000000000000000',
            '000000000000000000000000',
            '000000000000000000000000',
            '000000001111110000000000',
            '000000111111111100000000',
            '000001110000001110000000',
            '000011000000000011000000',
            '000011000000000011000000',
            '000110000000000001100000',
            '000110000000000001100000',
            '000110000000000001100000',
            '000110000000000001100000',
            '000110000000000001100000',
            '000110000000000001100000',
            '000011000000000011000000',
            '000011000000000011000000',
            '000001110000001111000000',
            '000000111111111111100000',
            '000000001111110001110000',
            '000000000000000000111000',
            '000000000000000000011100',
            '000000000000000000001100',
            '000000000000000000000000',
            '000000000000000000000000',
        ],
    },
    lock: {
        rows: [
            '000000000000000000000000',
            '000000000011110000000000',
            '000000001111111100000000',
            '000000001100001100000000',
            '000000011000000110000000',
            '000000011000000110000000',
            '000000011000000110000000',
            '000000011000000110000000',
            '000001111111111111000000',
            '000001111111111111100000',
            '000011000000000000110000',
            '000011000000000000110000',
            '000011000000000000110000',
            '000011000000000000110000',
            '000011000001100000110000',
            '000011000001100000110000',
            '000011000000000000110000',
            '000011000000000000110000',
            '000011000000000000110000',
            '000011000000000000110000',
            '000001111111111111100000',
            '000000111111111111000000',
            '000000000000000000000000',
            '000000000000000000000000',
        ],
    },
    error: {
        rows: [
            '000000000000000000000000',
            '000000000000000000000000',
            '000000000111111000000000',
            '000000011111111110000000',
            '000001110000000011100000',
            '000011100000000001110000',
            '000011000000000000110000',
            '000110000001100000011000',
            '000100000001100000001000',
            '001100000001100000001100',
            '001100000001100000001100',
            '001100000001100000001100',
            '001100000001100000001100',
            '001100000000000000001100',
            '001100000000000000001100',
            '000100000001100000001000',
            '000110000000000000011000',
            '000011000000000000110000',
            '000011100000000001110000',
            '000001110000000011100000',
            '000000011111111110000000',
            '000000000111111000000000',
            '000000000000000000000000',
            '000000000000000000000000',
        ],
    },
} satisfies Record<string, DotGridData>;

export const NoResults = () => (<EmptyState illustration={<Illicon data={illustrations.search}/>} header="No results found" description="Try adjusting your search or filters to find what you're looking for."/>);

export default NoResults;