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

import { Link } from "@coreai-ds/react-components";
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 { Card } from "@coreai-ds/react-components";
import { CardHeader } from "@coreai-ds/react-components";
import { CardFooter } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { CodeRegular } from "@fluentui/react-icons";

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>);
}

export const WithActionCards = () => {
    const actions = [
        {
            heading: 'Connect data sources',
            description: 'Integrate with your enterprise data from supported sources like Fabric, Cosmos, Blob storage, and more.',
            action: 'Connect',
        },
        {
            heading: 'Upload files',
            description: 'Add files that can provide context for any agent in your project.',
            action: 'Upload',
        },
        {
            heading: 'Integrate Microsoft IQ',
            description: (<>
            Set up IQ integration for full business intelligence in your agents.{' '}
            <Link href="#">What can Work IQ do?</Link>
          </>),
            action: 'Integrate',
        },
    ];
    const styles = /* css */ `
      .empty-state-actions-example__card {
        box-sizing: border-box;
        display: flex;
        flex: 0 0 auto;
        width: 256px;
        height: 148px;
        text-align: left;
      }

      .empty-state-actions-example__header {
        flex: 1;
        align-content: start;
        row-gap: var(--spacingVerticalXS);
      }

      .empty-state-actions-example__footer {
        gap: var(--spacingHorizontalXS);
      }
    `;
    return (<>
        <style>{styles}</style>
        <EmptyState header="Benefit from Action Artifact" cards={<>
              {actions.map(({ heading, description, action }) => (<Card className="empty-state-actions-example__card" key={heading}>
                  <CardHeader className="empty-state-actions-example__header" header={<Text preset="heading5" foreground={1}>
                        {heading}
                      </Text>} description={<Text preset="bodyS">{description}</Text>}/>
                  <CardFooter className="empty-state-actions-example__footer">
                    <Button>{action}</Button>
                    <Button appearance="transparent" icon={<CodeRegular />}>
                      Use code
                    </Button>
                  </CardFooter>
                </Card>))}
            </>} links={<Link href="#">How to make the coolest artifact ever</Link>}/>
      </>);
};

export default WithActionCards;