/**
 * External Dependencies
 */
import { __ } from '@wordpress/i18n';
import { ChevronDown, Check, X } from 'lucide-react';

/**
 * Internal Dependencies
 */
import { clsx } from '@admin/utils';
import { Checkbox } from '@admin/components/Checkbox';
import { Card } from '@admin/components/Card';
import { Select } from '@admin/components/Select';
import { ToggleRow } from './ToggleRow';
import { Field } from './Field';
import {
	DATA_SHARED_LIST,
	DATA_NOT_SHARED_LIST,
	DATA_TOGGLES,
} from '../constants';

const FREQ_OPTIONS = [
	{ value: 'weekly', label: __( 'Weekly', 'advanced-ads' ) },
	{ value: 'monthly', label: __( 'Monthly', 'advanced-ads' ) },
];

export function DataSharingPanel( { state, set, error } ) {
	return (
		<Card className="mb-0 flex flex-col gap-3 px-5 py-[18px]">
			<Checkbox
				checked={ state.dataShare }
				onChange={ ( checked ) => set( 'dataShare', checked ) }
				label={
					<span className="max-w-[660px] text-[13.5px] leading-relaxed text-gray-900">
						{ __(
							'I agree to share anonymous usage data to',
							'advanced-ads'
						) }{ ' ' }
						<strong className="font-semibold">
							{ __( 'help the developers', 'advanced-ads' ) }
						</strong>{ ' ' }
						{ __(
							'improve the plugin. This never includes your visitors, your revenue, or your ad code.',
							'advanced-ads'
						) }
					</span>
				}
			/>
			{ error && (
				<p className="m-0 pl-[29px] text-[13px] text-red-700">
					{ error }
				</p>
			) }

			<div className="flex flex-wrap items-center gap-3.5 pl-[29px]">
				<button
					type="button"
					onClick={ () => set( 'advData', ! state.advData ) }
					aria-expanded={ state.advData }
					className="flex cursor-pointer items-center gap-1.5 border-0 bg-transparent p-0 text-[12.5px] text-primary"
				>
					<ChevronDown
						className={ clsx(
							'size-4 transition-transform',
							state.advData && 'rotate-180'
						) }
					/>
					{ __( 'What is shared?', 'advanced-ads' ) }
				</button>
				<a
					href="https://wpadvancedads.com/privacy-policy/"
					target="_blank"
					rel="noreferrer"
					className="text-[12.5px]"
				>
					{ __( 'Read our privacy policy', 'advanced-ads' ) }
				</a>
			</div>

			{ state.advData && (
				<div className="ml-[29px] flex flex-col gap-5 border-t border-gray-100 pt-4">
					<div className="grid grid-cols-1 gap-5.5 sm:grid-cols-2">
						<ul className="m-0 flex list-none flex-col gap-2.5 p-0">
							<span className="text-xs font-semibold uppercase tracking-wide text-gray-500">
								{ __( 'What is shared', 'advanced-ads' ) }
							</span>
							{ DATA_SHARED_LIST.map( ( item ) => (
								<li
									key={ item }
									className="flex items-start gap-2 text-[13px] leading-snug"
								>
									<Check
										className="mt-0.5 size-3.5 shrink-0 text-green-700"
										strokeWidth={ 3 }
									/>
									{ item }
								</li>
							) ) }
						</ul>
						<ul className="m-0 flex list-none flex-col gap-2.5 p-0">
							<span className="text-xs font-semibold uppercase tracking-wide text-gray-500">
								{ __( 'What is never shared', 'advanced-ads' ) }
							</span>
							{ DATA_NOT_SHARED_LIST.map( ( item ) => (
								<li
									key={ item }
									className="flex items-start gap-2 text-[13px] leading-snug text-gray-600"
								>
									<X className="mt-0.5 size-3.5 shrink-0 text-gray-400" />
									{ item }
								</li>
							) ) }
						</ul>
					</div>

					{ state.dataShare && (
					<div className="flex flex-col gap-4 border-t border-gray-100 pt-4">
						{ DATA_TOGGLES.map( ( t ) => (
							<ToggleRow
								key={ t.key }
								checked={ !! state[ t.key ] }
								onChange={ ( v ) => set( t.key, v ) }
								label={ t.label }
								description={ t.help }
							/>
						) ) }
						<Field
							className="max-w-[240px]"
							label={ __(
								'How often data is sent',
								'advanced-ads'
							) }
						>
							<Select
								value={ state.dataFreq }
								onChange={ ( v ) => set( 'dataFreq', v ) }
								options={ FREQ_OPTIONS }
							/>
						</Field>
					</div>
					) }
				</div>
			) }
		</Card>
	);
}