// 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 { iconToDotGrid } from "@coreai-ds/react-components";
import type { DotGridRenderOptions } from "@coreai-ds/react-components";
import type { FluentIcon } from "@fluentui/react-icons";
import { Illicon } from "@coreai-ds/react-components";
import { Agents20Filled } from "@fluentui/react-icons";
import { Button } from "@coreai-ds/react-components";
import { CodeRegular } from "@fluentui/react-icons";
import { Link } 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>);
}

function ConvertedIllicon({ icon, multiplier, convert = iconToDotGrid, ...props }: DotGridRenderOptions & {
    icon: FluentIcon;
    multiplier?: number;
    'aria-label'?: string;
    convert?: typeof iconToDotGrid;
}) {
    const [sample, setSample] = React.useState<{
        icon: FluentIcon;
        multiplier?: number;
        convert: typeof iconToDotGrid;
        value: Awaited<ReturnType<typeof iconToDotGrid>> | Error;
    }>();
    React.useEffect(() => {
        let active = true;
        void convert(icon, { multiplier }).then((value) => {
            if (active)
                setSample({ icon, multiplier, convert, value });
        }, (error: unknown) => {
            if (active) {
                setSample({
                    icon,
                    multiplier,
                    convert,
                    value: error instanceof Error ? error : new Error(String(error)),
                });
            }
        });
        return () => {
            active = false;
        };
    }, [icon, multiplier, convert]);
    if (!sample ||
        sample.icon !== icon ||
        sample.multiplier !== multiplier ||
        sample.convert !== convert) {
        return <Text role="status">Converting illustration...</Text>;
    }
    if (sample.value instanceof Error) {
        return <Text role="alert">{sample.value.message}</Text>;
    }
    return <Illicon {...props} data={sample.value}/>;
}

export const InEmptyState = () => (<EmptyState illustration={<ConvertedIllicon icon={Agents20Filled}/>} header="Benefit from Action Artifact" description="Disambiguate with text or exclude entirely." actions={<>
          <Button appearance="primary">Create agent</Button>
          <Button icon={<CodeRegular />}>Code</Button>
        </>} links={<Link href="#">How to make the coolest artifact ever</Link>}/>);

export default InEmptyState;