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

import { useId } 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 { RadioGroup } from "@coreai-ds/react-components";
import { Card } from "@coreai-ds/react-components";
import { Radio } from "@coreai-ds/react-components";
import { CardHeader } from "@coreai-ds/react-components";
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>);
}

export const WithChoiceCards = () => {
    const options = [
        {
            value: 'quickstart',
            heading: 'Quickstart',
            description: 'Build from a guided starting point.',
        },
        {
            value: 'specific',
            heading: 'Specific outcome',
            description: 'Create a focused solution for one task.',
        },
        {
            value: 'advanced',
            heading: 'Advanced setup',
            description: 'Configure each part of the solution.',
        },
    ];
    const idPrefix = useId('empty-state-choice-title');
    const groupLabelId = useId('empty-state-choice-label');
    const [selectedValue, setSelectedValue] = React.useState('quickstart');
    const [submittedValue, setSubmittedValue] = React.useState('');
    const onChange = React.useCallback((_: React.FormEvent<HTMLDivElement>, data: {
        value: string;
    }) => setSelectedValue(data.value), []);
    const onSelectionChange = React.useCallback((value: string) => () => setSelectedValue(value), []);
    const onSubmit = React.useCallback((event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        setSubmittedValue(selectedValue);
    }, [selectedValue]);
    const styles = /* css */ `
      .empty-state-choice-example {
        width: 100%;
      }

      .empty-state-choice-example__choices {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacingVerticalS);
        width: 100%;
      }

      .empty-state-choice-example__group {
        display: flex;
        flex: 1 1 100%;
        justify-content: center;
        gap: var(--spacingHorizontalL);
        width: 100%;
        max-width: 800px;
      }

      .empty-state-choice-example__card {
        box-sizing: border-box;
        display: flex;
        flex: 0 0 auto;
        width: 256px;
        min-height: 84px;
        text-align: left;
      }

      .empty-state-choice-example__header {
        flex: 1;
        min-width: 0;
        row-gap: var(--spacingVerticalXXS);
      }

      @media (max-width: 848px) {
        .empty-state-choice-example__group {
          flex-direction: column;
          align-items: center;
        }
      }
    `;
    return (<>
        <style>{styles}</style>
        <form className="empty-state-choice-example" onSubmit={onSubmit}>
          <EmptyState header="What would you like to create?" description="Choose the outcome that best matches your goal." cards={<div className="empty-state-choice-example__choices">
                <Text id={groupLabelId} weight="semibold">
                  Creation method
                </Text>
                <RadioGroup name="creation-method" value={selectedValue} onChange={onChange} layout="horizontal" className="empty-state-choice-example__group" aria-labelledby={groupLabelId}>
                  {options.map(({ value, heading, description }) => {
                const titleId = `${idPrefix}-${value}`;
                return (<Card key={value} className="empty-state-choice-example__card" floatingActionPosition="left" floatingAction={<Radio value={value} aria-labelledby={titleId}/>} selected={selectedValue === value} onSelectionChange={onSelectionChange(value)}>
                        <CardHeader className="empty-state-choice-example__header" header={<Text id={titleId} preset="heading5" foreground={1}>
                              {heading}
                            </Text>} description={<Text preset="bodyS">{description}</Text>}/>
                      </Card>);
            })}
                </RadioGroup>
              </div>} actions={<>
                <Button appearance="primary" type="submit">
                  Continue
                </Button>
                <Button type="button" icon={<CodeRegular />}>
                  Action in code
                </Button>
                {submittedValue ? (<Text role="status">Selected method: {submittedValue}</Text>) : null}
              </>} links={<Link href="#">Compare creation methods</Link>}/>
        </form>
      </>);
};

export default WithChoiceCards;