import {
	Button,
	Card,
	CardHeader,
	CardBody,
	ToggleControl,
	Icon,
	Flex,
	FlexItem,
	__experimentalText as Text,
	__experimentalHeading as Heading,
	Dropdown,
	NavigableMenu,
} from '@wordpress/components';
import { moreVertical } from '@wordpress/icons';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

const WidgetsPage = () => {
	const [ widgets, setWidgets ] = useState( [
		{ id: 1, title: 'Default Widget', status: true, entries: 983 },
		{ id: 2, title: 'Pricing Page Widget', status: true, entries: 32 },
		{ id: 3, title: 'Tech Support', status: true, entries: 422 },
	] );

	const [ currentPage, setCurrentPage ] = useState( 1 );
	const totalPages = 2;

	const toggleWidget = ( id ) => {
		setWidgets(
			widgets.map( ( widget ) =>
				widget.id === id
					? { ...widget, status: ! widget.status }
					: widget
			)
		);
	};

	const ActionMenu = ( { id } ) => (
		<Dropdown
			className="widget-actions-dropdown"
			contentClassName="widget-actions-dropdown-content"
			renderToggle={ ( { isOpen, onToggle } ) => (
				<Button
					icon={ moreVertical }
					onClick={ onToggle }
					aria-expanded={ isOpen }
				/>
			) }
			renderContent={ () => (
				<NavigableMenu>
					<Button
						className="widget-action-item"
						onClick={ () => console.log( 'Edit widget', id ) }
					>
						{ __( 'Edit', 'wazchat' ) }
					</Button>
					<Button
						className="widget-action-item"
						onClick={ () => console.log( 'Delete widget', id ) }
					>
						Delete
					</Button>
				</NavigableMenu>
			) }
		/>
	);

	return (
		<div className="widgets-page">
			<Card>
				<CardHeader>
					<Flex justify="space-between" align="center">
						<FlexItem>
							<Heading level={ 2 }>
								{ __( 'Add Widgets', 'wazchat' ) }
							</Heading>
							<Text>
								{ __(
									'Unlimited chat widgets. Unlimited possibilities.',
									'wazchat'
								) }
							</Text>
						</FlexItem>
						<FlexItem>
							<Button
								variant="primary"
								className="add-new-widget-btn"
							>
								{ __( 'Add New Widget', 'wazchat' ) }
							</Button>
						</FlexItem>
					</Flex>
				</CardHeader>
				<CardBody>
					<table className="wp-list-table widefat fixed striped">
						<thead>
							<tr>
								<th className="column-title">
									{ __( 'TITLE', 'wazchat' ) }
								</th>
								<th className="column-status">
									{ __( 'STATUS', 'wazchat' ) }
								</th>
								<th className="column-entries">
									{ __( 'ENTRIES', 'wazchat' ) }
								</th>
								<th className="column-actions">
									{ __( 'ACTIONS', 'wazchat' ) }
								</th>
							</tr>
						</thead>
						<tbody>
							{ widgets.map( ( widget ) => (
								<tr key={ widget.id }>
									<td>{ widget.title }</td>
									<td>
										<ToggleControl
											checked={ widget.status }
											onChange={ () =>
												toggleWidget( widget.id )
											}
											label={
												widget.status
													? 'Enabled'
													: 'Disabled'
											}
											hideLabelFromVision
										/>
									</td>
									<td>{ widget.entries }</td>
									<td>
										<ActionMenu id={ widget.id } />
									</td>
								</tr>
							) ) }
						</tbody>
					</table>

					<Flex
						justify="flex-end"
						align="center"
						className="pagination-container"
					>
						<FlexItem>
							<Text>{ __( 'PAGE', 'wazchat' ) }</Text>
						</FlexItem>
						<FlexItem>
							<select
								value={ currentPage }
								onChange={ ( e ) =>
									setCurrentPage( Number( e.target.value ) )
								}
								className="pagination-select"
							>
								{ Array.from(
									{ length: totalPages },
									( _, i ) => i + 1
								).map( ( page ) => (
									<option key={ page } value={ page }>
										{ page }
									</option>
								) ) }
							</select>
						</FlexItem>
						<FlexItem>
							<Text>
								{ __( 'OF', 'wazchat' ) } { totalPages }
							</Text>
						</FlexItem>
						<FlexItem>
							<Button
								icon="arrow-left-alt2"
								disabled={ currentPage === 1 }
								onClick={ () =>
									setCurrentPage( ( prev ) =>
										Math.max( 1, prev - 1 )
									)
								}
							/>
							<Button
								icon="arrow-right-alt2"
								disabled={ currentPage === totalPages }
								onClick={ () =>
									setCurrentPage( ( prev ) =>
										Math.min( totalPages, prev + 1 )
									)
								}
							/>
						</FlexItem>
					</Flex>
				</CardBody>
			</Card>

			<style>
				{ `
                    .widgets-page {
                        padding: 20px;
                    }

                    .add-new-widget-btn {
                        background-color: #2271b1 !important;
                        color: white !important;
                    }

                    .wp-list-table {
                        width: 100%;
                        border-spacing: 0;
                        border-collapse: collapse;
                    }

                    .wp-list-table th {
                        padding: 8px;
                        text-align: left;
                        font-weight: 600;
                    }

                    .wp-list-table td {
                        padding: 12px 8px;
                        vertical-align: middle;
                    }

                    .column-actions {
                        width: 60px;
                        text-align: right;
                    }

                    .column-status {
                        width: 120px;
                    }

                    .column-entries {
                        width: 100px;
                    }

                    .pagination-container {
                        margin-top: 20px;
                        gap: 10px;
                    }

                    .pagination-select {
                        padding: 2px 24px 2px 8px;
                        min-height: 30px;
                    }

                    .widget-actions-dropdown .components-dropdown-menu__toggle {
                        padding: 6px;
                    }

                    .widget-action-item {
                        width: 100%;
                        justify-content: flex-start;
                        padding: 8px 12px;
                    }
                ` }
			</style>
		</div>
	);
};

export default WidgetsPage;