import type { PropsWithChildren } from 'react';
import React from 'react';
import { GridTable, Section } from '@theorchard/suite-components';
import './styles.scss';
import { SidecarTrigger } from './sidecar-trigger';
import type { GridTableColumnDefinition } from '@theorchard/suite-components';
import type { CellProps } from '@theorchard/suite-components/dist/esm/src/components/table/base/types';

interface TermsDetailCondition {
    id: string;
    /** Pre-formatted comma-separated list, or "All". */
    transactionType: string;
    service: string;
    country: string;
    /** Numeric rate as a string, no '%' suffix. */
    rate: string;
}

export interface TermsDetailGroup {
    id: string;
    /**
     * Header line for the collapsible group, e.g.
     * "Fraudulent Streams & Penalties · 100%" or "Worldwide · 80%".
     */
    title: string;
    conditions: TermsDetailCondition[];
}

interface TermsDetailSidecarItem {
    /** Primary text shown in the list row. */
    label: string;
    /** Secondary text shown below the label. */
    subtitle?: string;
}

interface TermsDetailSidecar {
    /** Sidecar header title. Defaults to the term's `name`. */
    title?: string;
    /** Heading inside the sidecar body, e.g. "Tracks (5)". */
    heading: string;
    items: TermsDetailSidecarItem[];
    /** Tooltip text when there are no items. */
    emptyTooltip?: string;
    /** Empty-search message inside the ListBox. */
    noMatchText?: string;
}

export interface TermsDetailItem {
    id: string;
    /** Bold title above the metadata line, e.g. "Product Term". */
    name?: string;
    /** Muted dot-separated detail line, e.g. "13 products · 136021". */
    metadata?: React.ReactNode;
    /** Right-aligned actions (edit, lock, etc). Optional — omit for read-only. */
    actions?: React.ReactNode;
    /** Optional rich attachment list opened via a "more details" button. */
    sidecar?: TermsDetailSidecar;
    groups: TermsDetailGroup[];
}

export interface TermsDetailProps {
    /** Outer card title, e.g. "Product Terms". */
    title: string;
    terms: TermsDetailItem[];
    emptyMessage: string;
    /** Header label for the rate column. Defaults to "Rate". */
    rateColumnLabel?: string;
    /** Optional content rendered to the right of the title (e.g. "+ Add" link). */
    titleAction?: React.ReactNode;
    testId?: string;
}

const buildColumns = (
    rateColumnLabel: string
): GridTableColumnDefinition<TermsDetailCondition>[] => [
    {
        name: 'index',
        title: '#',
        maxWidth: '6%',
        Cell: ({
            data: { id },
        }: PropsWithChildren<CellProps<TermsDetailCondition>>) => (
            <div className="TermsDetail-cell">{id}</div>
        ),
    },
    {
        name: 'transactionType',
        title: 'Transaction Type',
        maxWidth: '28%',
        Cell: ({
            data: { transactionType },
        }: PropsWithChildren<CellProps<TermsDetailCondition>>) => (
            <div className="TermsDetail-cell">{transactionType}</div>
        ),
    },
    {
        name: 'service',
        title: 'Service',
        maxWidth: '28%',
        Cell: ({
            data: { service },
        }: PropsWithChildren<CellProps<TermsDetailCondition>>) => (
            <div className="TermsDetail-cell">{service}</div>
        ),
    },
    {
        name: 'country',
        title: 'Country',
        maxWidth: '28%',
        Cell: ({
            data: { country },
        }: PropsWithChildren<CellProps<TermsDetailCondition>>) => (
            <div className="TermsDetail-cell">{country}</div>
        ),
    },
    {
        name: 'rate',
        title: rateColumnLabel,
        maxWidth: '10%',
        Cell: ({
            data: { rate },
        }: PropsWithChildren<CellProps<TermsDetailCondition>>) => (
            <div className="TermsDetail-cell">{rate}%</div>
        ),
    },
];

const TermBlock: React.FC<{
    term: TermsDetailItem;
    columns: GridTableColumnDefinition<TermsDetailCondition>[];
}> = ({ term, columns }) => (
    <Section data-testid={`termsDetailBlock-${term.id}`}>
        <Section.Header>
            <div className="TermsDetail-termHeader">
                <div className="TermsDetail-termHeader-titleRow">
                    {term.name && <Section.Title>{term.name}</Section.Title>}
                    <div className="TermsDetail-termHeader-actions">
                        {term.actions}
                        {term.sidecar && (
                            <SidecarTrigger
                                id={`term-${term.id}`}
                                title={term.sidecar.title ?? term.name ?? ''}
                                heading={term.sidecar.heading}
                                items={term.sidecar.items}
                                emptyTooltip={term.sidecar.emptyTooltip}
                                noMatchText={term.sidecar.noMatchText}
                            />
                        )}
                    </div>
                </div>
                {term.metadata && (
                    <div className="TermsDetail-termHeader-metadata text-muted">
                        {term.metadata}
                    </div>
                )}
            </div>
        </Section.Header>
        <Section.Body>
            {term.groups.map((group, groupIndex) => (
                <React.Fragment key={group.id}>
                    <Section expandable defaultExpanded={false} level="sub">
                        <Section.Header>
                            <Section.Title>{group.title}</Section.Title>
                        </Section.Header>
                        <Section.Body>
                            <Section.Table>
                                <GridTable
                                    bordered
                                    variant="zebra"
                                    rowKey="id"
                                    columnDefs={columns}
                                    data={group.conditions}
                                    loading={false}
                                />
                            </Section.Table>
                        </Section.Body>
                    </Section>
                    {groupIndex < term.groups.length - 1 && <Section.Divider />}
                </React.Fragment>
            ))}
        </Section.Body>
    </Section>
);

export const TermsDetail: React.FC<TermsDetailProps> = ({
    title,
    terms,
    emptyMessage,
    rateColumnLabel = 'Rate',
    titleAction,
    testId,
}) => {
    const columns = buildColumns(rateColumnLabel);

    return (
        <Section className="TermsDetail" data-testid={testId}>
            <Section.Header>
                <div className="TermsDetail-titleRow">
                    <Section.Title className="TermsDetail-title">
                        {title}
                    </Section.Title>
                    {titleAction && (
                        <div className="TermsDetail-titleAction">
                            {titleAction}
                        </div>
                    )}
                </div>
            </Section.Header>
            <Section.Body>
                {terms.length === 0 ? (
                    <span className="text-muted TermsDetail-empty">
                        {emptyMessage}
                    </span>
                ) : (
                    terms.map(term => (
                        <TermBlock
                            key={term.id}
                            term={term}
                            columns={columns}
                        />
                    ))
                )}
            </Section.Body>
        </Section>
    );
};